Ghost/ghost/admin/app/components/modal-post-history.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

101 lines
5.3 KiB
Handlebars

{{!-- template-lint-disable no-invalid-interactive --}}
<div class="gh-post-history" {{did-insert this.onInsert}}>
<div class="gh-post-history-main" data-test-post-history-preview>
<div class="gh-koenig-editor-pane flex flex-column mih-100">
{{#if this.selectedHTML}}
{{{this.selectedHTML}}}
{{/if}}
<div class="gh-post-history-hidden-lexical current">
<div class="gh-editor-feature-image-container">
<div class="gh-editor-feature-image">
{{#if this.selectedRevision.feature_image}}
<img
src={{this.selectedRevision.feature_image}}
alt={{this.selectedRevision.feature_image_alt}}
data-test-post-history-preview-feature-image
>
{{/if}}
{{#if this.selectedRevision.feature_image_caption}}
<p data-test-post-history-preview-feature-image-caption>{{{this.selectedRevision.feature_image_caption}}}</p>
{{/if}}
</div>
</div>
<div class="gh-editor-title" data-test-post-history-preview-title>
{{this.currentTitle}}
</div>
{{#if (feature "editorExcerpt")}}
<div class="gh-editor-excerpt" data-test-post-history-preview-excerpt>
{{this.selectedRevision.custom_excerpt}}
</div>
<hr class="gh-editor-title-divider">
{{/if}}
<KoenigLexicalEditor
@lexical={{this.selectedRevision.lexical}}
@cardConfig={{this.cardConfig}}
@registerAPI={{this.registerSelectedEditorApi}}
@registerSecondaryAPI={{this.registerSecondarySelectedEditorApi}}
/>
</div>
</div>
</div>
<div class="settings-menu-container">
<div class="settings-menu settings-menu-pane settings-menu-pane-main">
<div class="settings-menu-header subview">
<button
aria-label="Close meta data panel"
class="back settings-menu-header-action"
data-test-button="close-psm-subview"
type="button"
{{on "click" this.closeModal}}
{{on "mousedown" (optional this.noop)}}
>
{{svg-jar "arrow-left"}}
<span class="hidden">Back</span>
</button>
<h4>{{capitalize this.post.displayName}} history</h4>
</div>
<div class="settings-menu-content">
<ul class="nav-list">
{{#each this.revisionList as |revision index|}}
<li class="nav-list-item {{if revision.selected "selected" ""}}" data-test-revision-item={{index}}>
<button type="button" {{on "click" (fn this.handleClick index)}} data-test-button="preview-revision">
<div class="flex items-center">
<span class="gh-post-history-version">{{gh-format-post-time revision.createdAt format="D MMM YYYY, HH:mm"}}{{this.timezone}}</span>
{{#if revision.latest}}
<span class="gh-post-history-version-tag current" data-test-revision-latest>Latest</span>
{{/if}}
{{#if revision.new_publish}}
<span class="gh-post-history-version-tag published" data-test-revision-published>Published</span>
{{/if}}
{{#if (eq revision.reason "unpublished")}}
<span class="gh-post-history-version-tag unpublished" data-test-revision-unpublished>Unpublished</span>
{{/if}}
</div>
<div class="flex items-center mt2">
<span class="user-list-item-figure" style={{background-image-style revision.author.profile_image_url}}>
<span class="hidden">Photo of {{revision.author.name}}</span>
</span>
<span class="gh-post-history-version-meta {{if (eq revision.author.name "Deleted staff user") "deleted-user"}}">{{revision.author.name}}</span>
</div>
</button>
{{#if (and revision.selected (not revision.latest))}}
<button
type="button"
class="gh-post-history-version-restore"
{{on "click" (fn this.restoreRevision index)}}
data-test-button="restore-revision"
>
<span>Restore</span>
</button>
{{/if}}
</li>
{{/each}}
</ul>
</div>
</div>
</div>
</div>
{{this.didInsert}}