Ghost/ghost/admin/app/components/gh-koenig-editor-react.hbs
Kevin Ansfield 7a9435d524 Hooked up editor registration in react editor experiment
no issue

- use the `didCreateEditor` hook to register the editor instance as we do with our Ember version of Koenig
- allows for initial handling of focus control for moving cursor between title and body inputs
- disabled card cleanup call because the react editor does not yet have cards or the custom `cleanup()` method
2022-07-27 14:14:12 +01:00

65 lines
2.8 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 --}}
{{!-- template-lint-disable no-down-event-binding no-invalid-interactive no-passed-in-event-handlers --}}
<div
class="gh-koenig-editor-pane flex flex-column mih-100"
{{on "mousedown" this.trackMousedown}}
{{on "mouseup" this.focusEditor}}
>
<GhEditorFeatureImage
@image={{@featureImage}}
@updateImage={{@setFeatureImage}}
@clearImage={{@clearFeatureImage}}
@alt={{@featureImageAlt}}
@updateAlt={{@setFeatureImageAlt}}
@caption={{@featureImageCaption}}
@updateCaption={{@setFeatureImageCaption}}
@forceButtonDisplay={{or (not @title) (eq @title "(Untitled)") this.titleIsHovered this.titleIsFocused}}
/>
<GhTextarea
@class="gh-editor-title"
@placeholder={{@titlePlaceholder}}
@shouldFocus={{or @titleAutofocus false}}
@tabindex="1"
@autoExpand=".gh-koenig-editor"
@value={{readonly this.title}}
@input={{this.updateTitle}}
@focus-out={{optional @onTitleBlur}}
@keyDown={{this.onTitleKeydown}}
@didCreateTextarea={{this.registerTitleElement}}
{{on "focus" (fn (mut this.titleIsFocused) true)}}
{{on "blur" (fn (mut this.titleIsFocused) false)}}
{{on "mouseover" (fn (mut this.titleIsHovered) true)}}
{{on "mouseleave" (fn (mut this.titleIsHovered) false)}}
data-test-editor-title-input={{true}}
/>
<KoenigReactEditor
@mobiledoc={{@body}}
@didCreateEditor={{this.onEditorCreated}}
@onChange={{@onBodyChange}}
/>
{{!-- <KoenigEditor
@mobiledoc={{@body}}
@placeholder={{@bodyPlaceholder}}
@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}}
@updateSnippet={{@updateSnippet}}
@deleteSnippet={{@deleteSnippet}}
@cardOptions={{@cardOptions}}
@postType={{@postType}}
/> --}}
</div>
</div>