c8ba9e8027
refs ENG-661 Fixes a long-standing issue where an outdated Lexical schema in the database triggered the unsaved changes confirmation dialog incorrectly. Implemented a secondary hidden Lexical instance that loads the state from the database, renders it, and uses this updated state to compare with the live editor's scratch. This ensures the unsaved changes prompt appears only when there are real changes from the user.
165 lines
8.0 KiB
Handlebars
165 lines
8.0 KiB
Handlebars
{{#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}}
|
|
@tkCount={{this.tkCount}}
|
|
@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" data-test-breadcrumb>
|
|
{{svg-jar "arrow-left"}}
|
|
<span>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}} data-test-breadcrumb>
|
|
{{svg-jar "arrow-left"}}
|
|
<span>{{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="gh-editor-publish-buttons">
|
|
{{#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}}
|
|
@titlePlaceholder={{concat (capitalize this.post.displayName) " title"}}
|
|
@titleAutofocus={{this.shouldFocusTitle}}
|
|
@titleHasTk={{this.titleHasTk}}
|
|
@onTitleChange={{this.updateTitleScratch}}
|
|
@onTitleBlur={{perform this.saveTitleTask}}
|
|
@excerpt={{readonly this.post.customExcerpt}}
|
|
@excerptHasTk={{this.excerptHasTk}}
|
|
@setExcerpt={{this.updateExcerpt}}
|
|
@excerptErrorMessage={{this.excerptErrorMessage}}
|
|
@body={{readonly this.post.lexicalScratch}}
|
|
@bodyPlaceholder={{concat "Begin writing your " this.post.displayName "..."}}
|
|
@onBodyChange={{this.updateScratch}}
|
|
@updateSecondaryInstanceModel={{this.updateSecondaryInstanceModel}}
|
|
@headerOffset={{editor.headerHeight}}
|
|
@scrollContainerSelector=".gh-koenig-editor"
|
|
@scrollOffsetBottomSelector=".gh-mobile-nav-bar"
|
|
@onEditorCreated={{this.setKoenigEditor}}
|
|
@updateWordCount={{this.updateWordCount}}
|
|
@updatePostTkCount={{this.updatePostTkCount}}
|
|
@updateFeatureImageTkCount={{this.updateFeatureImageTkCount}}
|
|
@featureImage={{this.post.featureImage}}
|
|
@featureImageAlt={{this.post.featureImageAlt}}
|
|
@featureImageCaption={{this.post.featureImageCaption}}
|
|
@setFeatureImage={{this.setFeatureImage}}
|
|
@setFeatureImageAlt={{this.setFeatureImageAlt}}
|
|
@setFeatureImageCaption={{this.setFeatureImageCaption}}
|
|
@handleFeatureImageCaptionBlur={{this.handleFeatureImageCaptionBlur}}
|
|
@clearFeatureImage={{this.clearFeatureImage}}
|
|
@cardOptions={{hash
|
|
post=this.post
|
|
snippets=this.snippets
|
|
collections=this.collections
|
|
deleteSnippet=(if this.canManageSnippets this.confirmDeleteSnippet)
|
|
createSnippet=(if this.canManageSnippets this.createSnippet)
|
|
}}
|
|
@postType={{this.post.displayName}}
|
|
@registerAPI={{this.registerEditorAPI}}
|
|
@registerSecondaryAPI={{this.registerSecondaryEditorAPI}}
|
|
@savePostTask={{this.savePostTask}}
|
|
/>
|
|
|
|
<div class="gh-editor-wordcount-container">
|
|
<div class="gh-editor-wordcount">
|
|
{{gh-pluralize this.wordCount "word"}}
|
|
</div>
|
|
<a href="https://ghost.org/help/using-the-editor/" class="flex" target="_blank" rel="noopener noreferrer">{{svg-jar "help"}}</a>
|
|
</div>
|
|
|
|
<div class="gh-editor-mobile-menu">
|
|
<Editor::PublishManagement
|
|
@post={{this.post}}
|
|
@hasUnsavedChanges={{this.hasDirtyAttributes}}
|
|
@beforePublish={{perform this.beforeSaveTask}}
|
|
@afterPublish={{this.afterSave}}
|
|
@saveTask={{this.saveTask}}
|
|
as |publishManagement|
|
|
>
|
|
<div class="gh-editor-wordcount">
|
|
{{gh-pluralize this.wordCount "word"}}
|
|
</div>
|
|
<section class="gh-editor-publish-buttons">
|
|
{{#unless this.post.isNew}}
|
|
<Editor::PublishButtons @publishManagement={{publishManagement}} />
|
|
{{/unless}}
|
|
</section>
|
|
</Editor::PublishManagement>
|
|
</div>
|
|
|
|
</GhEditor>
|
|
|
|
{{#if this.showSettingsMenu}}
|
|
<GhPostSettingsMenu
|
|
@post={{this.post}}
|
|
@deletePost={{this.openDeletePostModal}}
|
|
@updateSlugTask={{this.updateSlugTask}}
|
|
@savePostTask={{this.savePostTask}}
|
|
@editorAPI={{this.editorAPI}}
|
|
@secondaryEditorAPI={{this.secondaryEditorAPI}}
|
|
@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.showPostHistory}}
|
|
<GhFullscreenModal
|
|
@modal="post-history"
|
|
@model={{this.post}}
|
|
@close={{this.closePostHistory}}
|
|
@modifier="total-overlay post-history" />
|
|
{{/if}}
|
|
{{/if}}
|
|
|
|
{{outlet}}
|