Ghost/ghost/admin/app/components/gh-koenig-editor.hbs
Kevin Ansfield ceb16b5e9f Added first version of feature image with caption inside editor (#1999)
refs https://github.com/TryGhost/Team/issues/771

- updated `<GhImageUploaderWithPreview>` to take an `@includeMetadata` argument that shows a basic html supporting caption field underneath (ready for toggle between caption/alt but not fully implemented)
- added feature image alt/caption properties to post model
- updated UI behind "featureImageMeta" labs flag
  - added the feature image uploader to the top of `<GhKoenigEditor>` for display above the editor title
  - removed feature image uploader from post settings menu
- added labs flag checkbox
2021-06-10 20:42:32 +01:00

58 lines
2.4 KiB
Handlebars

<div class="gh-koenig-editor relative w-100 vh-100 overflow-x-hidden overflow-y-auto z-0" {{did-insert this.registerElement}} ...attributes>
{{!-- full height content pane --}}
<div
class="gh-koenig-editor-pane flex flex-column mih-100"
{{on "mousedown" this.trackMousedown}}
{{on "mouseup" this.focusEditor}}
>
{{#if (feature "featureImageMeta")}}
<div class="gh-editor-feature-image">
<GhImageUploaderWithPreview
@image={{@featureImage}}
@text="Upload feature image"
@allowUnsplash={{true}}
@includeMetadata={{true}}
@update={{@setFeatureImage}}
@remove={{fn @setFeatureImage null}}
@alt={{@featureImageAlt}}
@caption={{@featureImageCaption}}
@updateAlt={{@setFeatureImageAlt}}
@updateCaption={{@setFeatureImageCaption}}
@captionPlaceholder="Add a caption to the feature image"
/>
</div>
{{/if}}
<GhTextarea
@class="gh-editor-title"
@placeholder={{@titlePlaceholder}}
@tabindex="1"
@autoExpand=".gh-koenig-editor"
@value={{readonly this.title}}
@input={{this.updateTitle}}
@focus-out={{optional @onTitleBlur}}
@keyDown={{this.onTitleKeydown}}
@didCreateTextarea={{this.registerTitleElement}}
data-test-editor-title-input={{true}}
/>
<KoenigEditor
@mobiledoc={{@body}}
@placeholder={{@bodyPlaceholder}}
@autofocus={{or @bodyAutofocus false}}
@spellcheck={{true}}
@onChange={{@onBodyChange}}
@didCreateEditor={{this.onEditorCreated}}
@cursorDidExitAtTop={{this.focusTitle}}
@headerOffset={{@headerOffset}}
@dropTargetSelector=".gh-koenig-editor-pane"
@scrollContainerSelector={{@scrollContainerSelector}}
@scrollOffsetTopSelector={{@scrollOffsetTopSelector}}
@scrollOffsetBottomSelector={{@scrollOffsetBottomSelector}}
@wordCountDidChange={{@onWordCountChange}}
@snippets={{@snippets}}
@saveSnippet={{@saveSnippet}}
@deleteSnippet={{@deleteSnippet}}
/>
</div>
</div>