Ghost/ghost/admin/lib/koenig-editor/addon/templates/components/koenig-card-markdown.hbs
Kevin Ansfield b21e46aa39 Koenig - Keep MD card formatting toolbar visible when possible
refs https://github.com/TryGhost/Ghost/issues/9505
- use `{{gh-scroll-trigger}}` components at top and bottom of the markdown card when in edit mode so that styles can be applied to the `.editor-toolbar` element to keep the toolbar fixed at the bottom of the screen whilst scrolling
2018-04-24 13:10:20 +01:00

87 lines
3.3 KiB
Handlebars

{{#koenig-card
icon="koenig/markdown"
class=(concat (kg-style "container-card") " koenig-card-markdown-rendered")
toolbar=toolbar
isSelected=isSelected
isEditing=isEditing
onEnterEdit=(action "enterEditMode")
onLeaveEdit=(action "leaveEditMode")
selectCard=(action selectCard)
editCard=(action editCard)
}}
{{#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")
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}}
{{else}}
{{renderedMarkdown}}
{{/if}}
{{/koenig-card}}