Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-01-06 22:40:14 -05:00
Code Issues Activity

Updated diff generation to treat cards atomically

Browse source 
Rather than displaying changes inside cards, we want to show a complete
replacement of the card. The current html diffing library is not capable of
supporting this so we have to use the approach here. First we find all cards
with changes in them, and then pull out the changes into two duplicated version
of the card, once for removals and one for additions.
This commit is contained in:
Fabien "egg" O'Carroll 2023-04-20 10:19:55 +01:00
parent f2f3f5cf79
commit f9e3813b08
1 changed files with 41 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
ghost/admin/app/components/modal-post-history.js
View file

@ -94,6 +94,46 @@ export default ModalComponent.extend({
};
},
calculateHTMLDiff(previousHTML, currentHTML) {
const result = diff(previousHTML, currentHTML);
const div = document.createElement('div');
div.innerHTML = result;
const cards = div.querySelectorAll('div[data-kg-card]');
for (const card of cards) {
const hasChanges = !!card.querySelectorAll('del').length || !!card.querySelectorAll('ins').length;
if (hasChanges) {
const delCard = card.cloneNode(true);
const insCard = card.cloneNode(true);
const ins = document.createElement('ins');
const del = document.createElement('del');
delCard.querySelectorAll('ins').forEach((el) => {
el.remove();
});
insCard.querySelectorAll('del').forEach((el) => {
el.remove();
});
delCard.querySelectorAll('del').forEach((el) => {
el.parentNode.appendChild(el.firstChild);
el.remove();
});
insCard.querySelectorAll('ins').forEach((el) => {
el.parentNode.appendChild(el.firstChild);
el.remove();
});
ins.appendChild(insCard);
del.appendChild(delCard);
card.parentNode.appendChild(del);
card.parentNode.appendChild(ins);
card.remove();
}
}
return div.innerHTML;
},
updateDiff() {
if (this.comparisonEditor && this.selectedEditor) {
let comparisonState = this.comparisonEditor.editorInstance.parseEditorState(this.comparisonRevision.lexical);
@ -111,7 +151,7 @@ export default ModalComponent.extend({
let updateIfBothDone = () => {
if (previousDone && currentDone) {
this.set('diffHtml', diff(previous.innerHTML, current.innerHTML));
this.set('diffHtml', this.calculateHTMLDiff(previous.innerHTML, current.innerHTML));
this.set('selectedHTML', current.innerHTML);
}
};