Ghost/ghost/admin/app/templates/lexical-editor.hbs
Ronald Langeveld c8ba9e8027
🐛 Fixed unsaved changes confirmation on Lexical schema change (#20687)
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.
2024-08-05 12:58:58 +00:00

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}}