Ghost/ghost/admin/app/templates/lexical-editor.hbs

{{#if this.post}}
    <div class="flex flex-row">
        <GhEditor
            @tagName="section"
            @class="gh-editor gh-view relative"
            as |editor|
        >
            <header class="gh-editor-header br2 pe-none">
                <Editor::PublishManagement
                    @post={{this.post}}
                    @hasUnsavedChanges={{this.hasDirtyAttributes}}
                    @beforePublish={{perform this.beforeSaveTask}}
                    @afterPublish={{this.afterSave}}
                    @saveTask={{this.saveTask}}
                    as |publishManagement|
                >
                    <div class="flex items-center pe-auto h-100">
                        {{#if this.ui.isFullScreen}}
                            {{#if this.fromAnalytics }}
                                <LinkTo @route="posts.analytics" @model={{this.post}} class="gh-btn-editor gh-editor-back-button">
                                    <span>
                                        {{svg-jar "arrow-left"}}
                                        Analytics
                                    </span>
                                </LinkTo>
                            {{else}}
                                <LinkTo @route={{pluralize this.post.displayName }} class="gh-btn-editor gh-editor-back-button" data-test-link={{pluralize this.post.displayName}}>
                                    <span>
                                        {{svg-jar "arrow-left"}}
                                        {{capitalize (pluralize this.post.displayName)}}
                                    </span>
                                </LinkTo>
                            {{/if}}
                        {{/if}}
                        {{#if (or (not this.ui.isFullScreen) (not this.fromAnalytics) this.post.didEmailFail) }}
                            <div class="gh-editor-post-status">
                                <span>
                                    <GhEditorPostStatus
                                        @post={{this.post}}
                                        @publishManagement={{publishManagement}}
                                        @hasDirtyAttributes={{this.hasDirtyAttributes}}
                                        @isSaving={{or this.autosaveTask.isRunning this.saveTasks.isRunning}}
                                        @openUpdateFlow={{publishManagement.openUpdateFlow}}
                                    />
                                </span>
                            </div>
                        {{/if}}
                    </div>

                    <section class="flex items-center pe-auto h-100">
                        {{#unless this.post.isNew}}
                            <Editor::PublishButtons @publishManagement={{publishManagement}} />
                            {{#unless this.showSettingsMenu}}
                                <div class="settings-menu-toggle-spacer"></div>
                            {{/unless}}
                        {{/unless}}
                    </section>
                </Editor::PublishManagement>
            </header>

            {{!--
                gh-koenig-editor acts as a wrapper around the title input and
                koenig editor canvas to support Ghost-specific editor behaviour
            --}}
            <GhKoenigEditorLexical
                @title={{readonly this.post.titleScratch}}
                @titleAutofocus={{this.shouldFocusTitle}}
                @titlePlaceholder={{concat (capitalize this.post.displayName) " title"}}
                @onTitleChange={{this.updateTitleScratch}}
                @onTitleBlur={{perform this.saveTitleTask}}
                @body={{readonly this.post.lexicalScratch}}
                @bodyPlaceholder={{concat "Begin writing your " this.post.displayName "..."}}
                @onBodyChange={{this.updateScratch}}
                @headerOffset={{editor.headerHeight}}
                @scrollContainerSelector=".gh-koenig-editor"
                @scrollOffsetBottomSelector=".gh-mobile-nav-bar"
                @onEditorCreated={{this.setKoenigEditor}}
                @onWordCountChange={{this.updateWordCount}}
                @featureImage={{this.post.featureImage}}
                @featureImageAlt={{this.post.featureImageAlt}}
                @featureImageCaption={{this.post.featureImageCaption}}
                @setFeatureImage={{this.setFeatureImage}}
                @setFeatureImageAlt={{this.setFeatureImageAlt}}
                @setFeatureImageCaption={{this.setFeatureImageCaption}}
                @clearFeatureImage={{this.clearFeatureImage}}
                @cardOptions={{hash
                    post=this.post
                    snippets=this.snippets
                    deleteSnippet=(if this.canManageSnippets this.confirmDeleteSnippet)
                    createSnippet=(if this.canManageSnippets this.createSnippet)
                }}
                @postType={{this.post.displayName}}
                @registerAPI={{this.registerEditorAPI}}
            />

            {{#if (feature 'lexicalEditor')}}
                <GhBasicDropdown
                    @verticalPosition="above"
                    @horizontalPosition="left" as |dd|
                >
                    <dd.Trigger
                        class="gh-editor-feedback-container"
                        data-test-button="lexical-editor-feedback"
                    >
                        <span class="gh-editor-feedback">
                            Feedback?
                        </span>
                    </dd.Trigger>

                    <dd.Content>
                        <div {{css-transition "anim-fade-in-scale"}}>
                            <ModalFeedbackLexical @class="gh-editor-feedback-dropdown" @close={{dd.actions.close}} />
                        </div>
                    </dd.Content>
                </GhBasicDropdown>
            {{/if}}

            <div class="gh-editor-wordcount-container">
                <div class="gh-editor-wordcount">
                    {{gh-pluralize this.wordCount.wordCount "word"}}
                </div>
                <a href="https://github.com/TryGhost/Koenig/tree/main/packages/koenig-lexical" target="_blank" rel="noopener noreferrer" class="gh-lexical-indicator">Lexical</a>
                {{!-- <a href="https://ghost.org/help/using-the-editor/" class="flex" target="_blank" rel="noopener noreferrer">{{svg-jar "help"}}</a> --}}
            </div>

        </GhEditor>

        {{#if this.showSettingsMenu}}
            <GhPostSettingsMenu
                @post={{this.post}}
                @deletePost={{this.openDeletePostModal}}
                @updateSlugTask={{this.updateSlugTask}}
                @savePostTask={{this.savePostTask}}
                @editorAPI={{this.editorAPI}}
                @toggleSettingsMenu={{this.toggleSettingsMenu}}
            />
        {{/if}}
    </div>

    <button type="button" class="settings-menu-toggle gh-btn gh-btn-editor gh-btn-icon icon-only gh-btn-action-icon" title="Settings" {{on "click" this.toggleSettingsMenu}} data-test-psm-trigger>
        {{#if this.showSettingsMenu}}
            <span class="settings-menu-open">{{svg-jar "sidemenu-open"}}</span>
        {{else}}
            <span>{{svg-jar "sidemenu"}}</span>
        {{/if}}
    </button>

    {{#if this.showReAuthenticateModal}}
        <GhFullscreenModal @modal="re-authenticate"
            @close={{this.toggleReAuthenticateModal}}
            @modifier="action wide" />
    {{/if}}
    {{#if (feature 'postHistory')}}
        {{#if this.showPostHistory}}
            <GhFullscreenModal
                @modal="post-history"
                @model={{this.post}}
                @close={{this.closePostHistory}}
                @modifier="total-overlay post-history" />
        {{/if}}
    {{/if}}
{{/if}}

{{outlet}}