136 lines
4.1 KiB
JavaScript
136 lines
4.1 KiB
JavaScript
import ModalComponent from 'ghost-admin/components/modal-base';
|
|
import diff from 'node-htmldiff';
|
|
import {action, computed} from '@ember/object';
|
|
|
|
function checkFinishedRendering(element, done) {
|
|
let last = element.innerHTML;
|
|
|
|
function check() {
|
|
let html = element.innerHTML;
|
|
if (html === last) {
|
|
done();
|
|
} else {
|
|
last = html;
|
|
setTimeout(check, 50);
|
|
}
|
|
}
|
|
|
|
setTimeout(check, 50);
|
|
}
|
|
|
|
export default ModalComponent.extend({
|
|
selectedHTML: null,
|
|
diffHtml: null,
|
|
showDifferences: true,
|
|
selectedRevisionIndex: 0,
|
|
|
|
selectedRevision: computed('selectedRevisionIndex', 'revisionList.[]', function () {
|
|
return this.revisionList[this.selectedRevisionIndex];
|
|
}),
|
|
|
|
comparisonRevision: computed('selectedRevisionIndex', 'revisionList.[]', function () {
|
|
return this.revisionList[this.selectedRevisionIndex + 1] || this.selectedRevision;
|
|
}),
|
|
|
|
previousTitle: computed('comparisonRevision.title', 'post.title', function () {
|
|
return this.comparisonRevision.title || this.post.get('title');
|
|
}),
|
|
|
|
currentTitle: computed('selectedRevision.title', 'post.title', function () {
|
|
return this.selectedRevision.title || this.post.get('title');
|
|
}),
|
|
|
|
revisionList: computed('post.postRevisions.[]', 'selectedRevisionIndex', function () {
|
|
return this.post.get('postRevisions').toArray().reverse().map((revision, index) => {
|
|
return {
|
|
lexical: revision.get('lexical'),
|
|
selected: index === this.selectedRevisionIndex,
|
|
latest: index === 0,
|
|
createdAt: revision.get('createdAt'),
|
|
title: revision.get('title'),
|
|
author: {
|
|
name: revision.get('author.name')
|
|
}
|
|
};
|
|
});
|
|
}),
|
|
|
|
init() {
|
|
this._super(...arguments);
|
|
this.post = this.model;
|
|
},
|
|
|
|
didInsertElement() {
|
|
this._super(...arguments);
|
|
this.updateDiff();
|
|
},
|
|
|
|
actions: {
|
|
handleClick(index) {
|
|
this.set('selectedRevisionIndex', index);
|
|
this.updateDiff();
|
|
},
|
|
|
|
registerSelectedEditorApi(api) {
|
|
this.selectedEditor = api;
|
|
},
|
|
|
|
registerComparisonEditorApi(api) {
|
|
this.comparisonEditor = api;
|
|
}
|
|
|
|
// toggleDifferences() {
|
|
// this.toggleProperty('showDifferences');
|
|
// }
|
|
},
|
|
|
|
toggleDifferences: action(function () {
|
|
this.toggleProperty('showDifferences');
|
|
}),
|
|
|
|
get cardConfig() {
|
|
return {
|
|
post: this.model
|
|
};
|
|
},
|
|
|
|
updateDiff() {
|
|
if (this.comparisonEditor && this.selectedEditor) {
|
|
let comparisonState = this.comparisonEditor.editorInstance.parseEditorState(this.comparisonRevision.lexical);
|
|
let selectedState = this.selectedEditor.editorInstance.parseEditorState(this.selectedRevision.lexical);
|
|
|
|
this.comparisonEditor.editorInstance.setEditorState(comparisonState);
|
|
this.selectedEditor.editorInstance.setEditorState(selectedState);
|
|
}
|
|
|
|
let previous = document.querySelector('.gh-post-history-hidden-lexical.previous');
|
|
let current = document.querySelector('.gh-post-history-hidden-lexical.current');
|
|
|
|
let previousDone = false;
|
|
let currentDone = false;
|
|
|
|
let updateIfBothDone = () => {
|
|
if (previousDone && currentDone) {
|
|
this.set('diffHtml', diff(previous.innerHTML, current.innerHTML));
|
|
this.set('selectedHTML', current.innerHTML);
|
|
}
|
|
};
|
|
|
|
checkFinishedRendering(previous, () => {
|
|
previous.querySelectorAll('[contenteditable]').forEach((el) => {
|
|
el.setAttribute('contenteditable', false);
|
|
});
|
|
previousDone = true;
|
|
updateIfBothDone();
|
|
});
|
|
|
|
checkFinishedRendering(current, () => {
|
|
current.querySelectorAll('[contenteditable]').forEach((el) => {
|
|
el.setAttribute('contenteditable', false);
|
|
});
|
|
currentDone = true;
|
|
updateIfBothDone();
|
|
});
|
|
}
|
|
});
|