Ghost/ghost/admin/lib/koenig-editor/addon/components/koenig-card-markdown.hbs
Kevin Ansfield 489f45155d Added "Create snippet" toolbar icon when cards are selected
no issue

- show the toolbar icon for any `<KoenigCard>` instance that has the `saveAsSnippet` action passed to it
  - currently that's all cards except the HR card because that's a primitive element rather than containing any user-defined content
- add `koenigUi.inputHasFocus` so that card toolbars can be hidden when the snippet input is displayed
2020-10-21 12:16:04 +01:00

98 lines
3.8 KiB
Handlebars

<KoenigCard
@icon="koenig/card-indicator-markdown"
@class={{concat (kg-style "container-card") " koenig-card-markdown-rendered"}}
@headerOffset={{this.headerOffset}}
@toolbar={{this.toolbar}}
@payload={{this.payload}}
@isSelected={{this.isSelected}}
@isEditing={{this.isEditing}}
@onEnterEdit={{action "enterEditMode"}}
@onLeaveEdit={{action "leaveEditMode"}}
@selectCard={{action this.selectCard}}
@deselectCard={{action this.deselectCard}}
@editCard={{action this.editCard}}
@saveCard={{action this.saveCard}}
@saveAsSnippet={{this.saveAsSnippet}}
@editor={{this.editor}}
>
{{#if this.isEditing}}
<GhEditor as |editor|>
<GhScrollTrigger
@triggerOffset={{hash bottom=this.bottomOffset}}
@enter={{action "topEntered"}}
@exit={{action "topExited"}}
@registerElement={{action "registerTop"}}
/>
<GhMarkdownEditor
@markdown={{readonly this.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}}
</GhMarkdownEditor>
<GhScrollTrigger
@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}}
<GhUploader
@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 {{gh-pluralize upload.files.length "image"}}...</h3>
{{upload.progressBar}}
{{/if}}
</div>
</div>
</GhUploader>
{{/if}}
</GhEditor>
{{#if this.preventClick}}
<div class="absolute absolute--fill z-max"></div>
{{/if}}
{{else}}
{{this.renderedMarkdown}}
<div class="absolute absolute--fill z-999"></div>
{{/if}}
</KoenigCard>