Added diff toggling for post history

no issue

- adds diff toggling inside the post history modal
This commit is contained in:
Ronald 2023-04-19 17:38:16 +01:00
parent ecb42a3680
commit 9b00411e3f
2 changed files with 24 additions and 5 deletions

View File

@ -10,8 +10,17 @@
</div>
</div>
{{#if this.diffHtml}}
{{#if this.showDifferences}}
{{{this.diffHtml}}}
{{/if}}
{{/if}}
{{#unless this.showDifferences}}
{{#if this.selectedHTML}}
{{{this.selectedHTML}}}
{{/if}}
{{/unless}}
<div class="gh-post-history-hidden-lexical previous">
<div class="gh-editor-title">{{this.previousTitle}}</div>
<KoenigLexicalEditor @lexical={{this.comparisonRevision.lexical}} @cardConfig={{this.cardConfig}} @registerAPI={{action "registerComparisonEditorApi"}}/>
@ -39,17 +48,17 @@
</div>
<div class="settings-menu-content">
<ul class="nav-list">
{{!-- <li class="nav-list-item">
<li class="nav-list-item">
<div class="for-switch x-small">
<label class="switch">
<span>Show changes to previous version</span>
<span class="gh-toggle-featured">
<input type="checkbox">
<input {{on "click" (fn this.toggleDifferences '')}} type="checkbox" checked={{this.showDifferences}}>
<span class="input-toggle-component"></span>
</span>
</label>
</div>
</li> --}}
</li>
{{#each this.revisionList as |revision index|}}
<li class="nav-list-item {{if revision.selected "selected" ""}}">
<button type="button" {{action "handleClick" index}}>

View File

@ -1,6 +1,6 @@
import ModalComponent from 'ghost-admin/components/modal-base';
import diff from 'node-htmldiff';
import {computed} from '@ember/object';
import {action, computed} from '@ember/object';
function checkFinishedRendering(element, done) {
let last = element.innerHTML;
@ -19,8 +19,9 @@ function checkFinishedRendering(element, done) {
}
export default ModalComponent.extend({
selectedHTML: null,
diffHtml: null,
showDifferences: true,
selectedRevisionIndex: 0,
selectedRevision: computed('selectedRevisionIndex', 'revisionList.[]', function () {
@ -77,8 +78,16 @@ export default ModalComponent.extend({
registerComparisonEditorApi(api) {
this.comparisonEditor = api;
}
// toggleDifferences() {
// this.toggleProperty('showDifferences');
// }
},
toggleDifferences: action(function () {
this.toggleProperty('showDifferences');
}),
get cardConfig() {
return {
post: this.model
@ -103,6 +112,7 @@ export default ModalComponent.extend({
let updateIfBothDone = () => {
if (previousDone && currentDone) {
this.set('diffHtml', diff(previous.innerHTML, current.innerHTML));
this.set('selectedHTML', current.innerHTML);
}
};