Ghost/ghost/admin/app/components/gh-koenig-editor-lexical.hbs

81 lines
3.6 KiB
Handlebars
Raw Normal View History

<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-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}}
{{on "dragover" this.editorPaneDragover}}
{{on "drop" this.editorPaneDrop}}
>
<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}}
@isHidden={{or (not @cardOptions.post.showTitleAndFeatureImage) false}}
/>
<div class="gh-editor-title-container page-improvements">
{{#if (and (not @cardOptions.post.showTitleAndFeatureImage) (not @featureImage))}}
<span class="gh-editor-hidden-indicator" data-tooltip="Post title is hidden on page">
{{svg-jar "eye-closed"}}
</span>
{{/if}}
<GhTextarea
@class="gh-editor-title {{if (and (not @cardOptions.post.showTitleAndFeatureImage) (not this.titleIsFocused)) "faded"}}"
@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)}}
{{on "paste" this.cleanPastedTitle}}
data-test-editor-title-input={{true}}
/>
</div>
<KoenigLexicalEditor
@lexical={{@body}}
Initial setup for Lexical multiplayer websockets service (#16611) no issue Rough prototype only, current limitations: - **No persistence**. Docs are in-memory only, YJS state will be lost on server restart although it could be re-populated by clients if they reconnect without closing their local doc (needs testing/investigation) - **No tie-in with saved lexical state**. Lexical state is updated in the post model via normal API requests from Admin which can mean the multiplayer doc and the saved lexical state become out of sync but there's no detection/indication of that state at present. Will also trigger the "someone else is editing" errors because multiplayer doesn't yet override the default post update collision detection - **New posts don't start in multiplayer**. New posts don't have an ID and so can't have a respective YJS doc, after initial save we don't transition to multiplayer because the React component in Ember doesn't re-render on prop changes yet - **No tests**. Experimental code just to get something working and help answer questions for what's next Changes: - added `lexicalMultiplayer` labs flag - updated `<KoenigLexicalEditor>` to pass through the required `<KoenigComposer>` props for multiplayer when enabled - added `lexical-multiplayer` service - `init()` called during boot, used to set up the `enable()` and `disable()` methods so the flag can be toggled without restarts - when enabled it adds `upgrade` request handling to the base Ghost server - returns 404 if the URL doesn't match `/ghost/api/admin/posts/multiplayer/*` - returns 401 if a valid session cookie is not present - if everything is good, hands off to code in `y-websocket.js` that handles YJS doc creation, awareness, keepalive, etc - uses doc names in the format `${post.id}/${docId}` where `docId` is `main` for the primary document and a GUID for any sub-documents like captions and nested editors in cards - updated `SettingsBREADService` to check if the `labs` setting is changed, and enables/disables the `lexical-multiplayer` service as needed so the websockets server can be started and shutdown when toggling without requiring a restart
2023-04-12 22:24:02 +03:00
@cardConfig={{@cardOptions}}
@onChange={{@onBodyChange}}
@registerAPI={{this.registerEditorAPI}}
@cursorDidExitAtTop={{this.focusTitle}}
@updateWordCount={{@updateWordCount}}
/>
{{!-- <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>