{{#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}} @snippets={{this.snippets}} @saveSnippet={{if this.canManageSnippets this.saveSnippet}} @updateSnippet={{if this.canManageSnippets this.toggleUpdateSnippetModal}} @deleteSnippet={{if this.canManageSnippets this.confirmDeleteSnippet}} @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 }} @postType={{this.post.displayName}} /> <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}} /> {{/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 this.snippetToUpdate}} <GhFullscreenModal @modal="update-snippet" @model={{this.snippetToUpdate}} @confirm={{this.updateSnippet}} @close={{this.toggleUpdateSnippetModal}} @modifier="action wide" /> {{/if}} {{/if}} {{outlet}}