Ghost/ghost/admin/lib/koenig-editor/addon/templates/components/koenig-card-markdown.hbs
Kevin Ansfield 0d08c639fe 🐛 Fixed editor undo states for card contents (#1064)
refs https://github.com/TryGhost/Ghost/issues/10049
- update `{{koenig-card}}` component to compare payload values and create a snapshot when exiting edit mode for container cards (markdown, html, code)
- update image card to trigger snapshots on image upload/selection and width change
2018-11-06 14:43:19 +00:00

97 lines
3.6 KiB
Handlebars

{{#koenig-card
icon="koenig/card-indicator-markdown"
class=(concat (kg-style "container-card") " koenig-card-markdown-rendered")
headerOffset=headerOffset
toolbar=toolbar
payload=payload
isSelected=isSelected
isEditing=isEditing
onEnterEdit=(action "enterEditMode")
onLeaveEdit=(action "leaveEditMode")
selectCard=(action selectCard)
deselectCard=(action deselectCard)
editCard=(action editCard)
saveCard=(action saveCard)
editor=editor
}}
{{#if isEditing}}
{{#gh-editor as |editor|}}
{{gh-scroll-trigger
triggerOffset=(hash bottom=bottomOffset)
enter=(action "topEntered")
exit=(action "topExited")
registerElement=(action "registerTop")
}}
{{#gh-markdown-editor
markdown=(readonly payload.markdown)
onChange=(action "updateMarkdown")
autofocus=true
enableSideBySide=false
enablePreview=false
enableHemingway=false
options=(hash status=false)
uploadedImageUrls=editor.uploadedImageUrls
onImageFilesSelected=(action editor.uploadImages)
imageMimeTypes=editor.imageMimeTypes
as |markdown|
}}
{{markdown.editor}}
{{/gh-markdown-editor}}
{{gh-scroll-trigger
enter=(action "bottomEntered")
exit=(action "bottomExited")
registerElement=(action "registerBottom")
}}
{{!-- files are dragged over editor pane --}}
{{#if editor.isDraggedOver}}
<div class="drop-target gh-editor-drop-target">
<div class="drop-target-message">
<h3>Drop image(s) here to upload</h3>
</div>
</div>
{{/if}}
{{!-- files have been dropped ready to be uploaded --}}
{{#if editor.droppedFiles}}
{{#gh-uploader
files=editor.droppedFiles
accept=editor.imageMimeTypes
extensions=editor.imageExtensions
onComplete=(action editor.uploadComplete)
onCancel=(action editor.uploadCancelled)
as |upload|
}}
<div class="gh-editor-image-upload {{if upload.errors "-error"}}">
<div class="gh-editor-image-upload-content">
{{#if upload.errors}}
<h3>Upload failed</h3>
{{#each upload.errors as |error|}}
<div class="failed">{{error.fileName}} - {{error.message}}</div>
{{/each}}
<button class="gh-btn gh-btn-grey gh-btn-icon" {{action upload.cancel}}>
<span>{{svg-jar "close"}} Close</span>
</button>
{{else}}
<h3>Uploading {{pluralize upload.files.length "image"}}...</h3>
{{upload.progressBar}}
{{/if}}
</div>
</div>
{{/gh-uploader}}
{{/if}}
{{/gh-editor}}
{{#if preventClick}}
<div class="absolute absolute--fill z-max"></div>
{{/if}}
{{else}}
{{renderedMarkdown}}
<div class="absolute absolute--fill z-999"></div>
{{/if}}
{{/koenig-card}}