Ghost/ghost/admin/app/components/gh-koenig-editor-lexical.hbs
Kevin Ansfield 887f4d3ac2
🐛 Fixed editor unsaved changes modal showing too often (#20787)
ref [ENG-661](https://linear.app/tryghost/issue/ENG-661/) 
ref [ONC-253](https://linear.app/tryghost/issue/ONC-253/)
ref [PLG-174](https://linear.app/tryghost/issue/PLG-174/)

- restored the original but reverted fix for unsaved changes modal from https://github.com/TryGhost/Ghost/pull/20687
- updated code to remove some incorrect early-falsy-return logic in `editorController.hasDirtyAttributes` that prevented save of unsaved changes on the underlying model (e.g. excerpt)
- updated unit tests so they are testing real post model instances and therefore are testing what we expect them to test
- added acceptance tests to ensure autosave is working for title and excerpt fields

---------

Co-authored-by: Ronald Langeveld <hi@ronaldlangeveld.com>
2024-08-19 18:03:13 +00:00

108 lines
4.9 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}}
{{on "blur" @onExcerptBlur}}
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>