1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost-Admin.git synced 2023-12-14 02:33:04 +01:00
Ghost-Admin/lib/koenig-editor/addon/components/koenig-card-markdown.hbs
Kevin Ansfield d6058dbf27 Co-located component template files
no issue

Keeps component JS backing files and template files in the same directory which avoids hunting across directories when working with components. Also lets you see all components when looking at one directory, whereas previously template-only or js-only components may not have been obvious without looking at both directories.

- ran [codemod](https://github.com/ember-codemods/ember-component-template-colocation-migrator/) for app-level components
- manually moved in-repo-addon component templates in `lib/koenig-editor`
- removed all explicit `layout` imports as JS/template associations are now made at build-time removing the need for them
- updated `.embercli` to default to new flat component structure
2020-05-18 13:14:08 +01:00

97 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}}
@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 {{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>