Ghost/ghost/admin/app/components/gh-koenig-editor-lexical.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

107 lines
4.8 KiB
Handlebars

<div class="gh-koenig-editor relative 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}}
{{on "dragover" this.editorPaneDragover}}
{{on "drop" this.editorPaneDrop}}
>
<GhEditorFeatureImage
@image={{@featureImage}}
@updateImage={{@setFeatureImage}}
@clearImage={{@clearFeatureImage}}
@alt={{@featureImageAlt}}
@updateAlt={{@setFeatureImageAlt}}
@caption={{@featureImageCaption}}
@updateCaption={{@setFeatureImageCaption}}
@handleCaptionBlur={{@handleFeatureImageCaptionBlur}}
@forceButtonDisplay={{or (not @title) (eq @title "(Untitled)") this.titleIsHovered this.titleIsFocused}}
@isHidden={{or (not @cardOptions.post.showTitleAndFeatureImage) false}}
@onTKCountChange={{@updateFeatureImageTkCount}}
/>
<div class="gh-editor-title-container">
{{#if (and (not @cardOptions.post.showTitleAndFeatureImage) (not @featureImage))}}
<span class="gh-editor-hidden-indicator" data-tooltip="Post title is hidden on page">
{{svg-jar "eye-closed"}}
</span>
{{/if}}
{{#if @titleHasTk}}
<div
class="tk-indicator" data-testid="tk-indicator"
{{on "click" this.focusTitle}}
>
TK
</div>
{{/if}}
<GhTextarea
@class="gh-editor-title {{if (and (not @cardOptions.post.showTitleAndFeatureImage) (not this.titleIsFocused)) "faded"}}"
@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}}
/>
{{#if (feature 'editorExcerpt')}}
<div class="relative">
<GhTextarea
@class={{concat "gh-editor-excerpt " (if @excerptErrorMessage "red")}}
@placeholder="Add an excerpt"
@shouldFocus={{false}}
@tabindex="1"
@autoExpand=".gh-koenig-editor"
@value={{readonly this.excerpt}}
@input={{this.onExcerptInput}}
@keyDown={{this.onExcerptKeydown}}
@didCreateTextarea={{this.registerExcerptElement}}
data-test-textarea="excerpt"
/>
{{#if @excerptHasTk}}
<div
class="tk-indicator tk-indicator-excerpt"
data-testid="tk-indicator-excerpt"
{{on "click" this.focusExcerpt}}
>
TK
</div>
{{/if}}
<hr class="gh-editor-title-divider {{if @excerptErrorMessage "gh-editor-title-divider-error" ""}}">
{{#if @excerptErrorMessage}}
<div class="gh-editor-excerpt-error" data-test-error="excerpt">
{{@excerptErrorMessage}}
</div>
{{/if}}
</div>
{{/if}}
</div>
<KoenigLexicalEditor
@lexical={{@body}}
@placeholder={{@bodyPlaceholder}}
@cardConfig={{@cardOptions}}
@onChange={{@onBodyChange}}
@updateSecondaryInstanceModel={{@updateSecondaryInstanceModel}}
@registerAPI={{this.registerEditorAPI}}
@registerSecondaryAPI={{this.registerSecondaryEditorAPI}}
@cursorDidExitAtTop={{if this.feature.editorExcerpt this.focusExcerpt this.focusTitle}}
@updateWordCount={{@updateWordCount}}
@updatePostTkCount={{@updatePostTkCount}}
/>
</div>
</div>