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

View File

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