mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-12-22 10:21:36 +03:00
b286faf011
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
69 lines
2.9 KiB
Handlebars
69 lines
2.9 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-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)}}
|
|
{{on "paste" this.cleanPastedTitle}}
|
|
data-test-editor-title-input={{true}}
|
|
/>
|
|
|
|
<KoenigLexicalEditor
|
|
@lexical={{@body}}
|
|
@cardConfig={{@cardOptions}}
|
|
@onChange={{@onBodyChange}}
|
|
@registerAPI={{this.registerEditorAPI}}
|
|
@cursorDidExitAtTop={{this.focusTitle}}
|
|
/>
|
|
|
|
{{!-- <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>
|