From ef92028b222eb6a0366446fe5b1363f04f9205de Mon Sep 17 00:00:00 2001 From: Michael Barrett <991592+mike182uk@users.noreply.github.com> Date: Thu, 1 Jun 2023 13:22:51 +0100 Subject: [PATCH] Removed post diffing from post history feature (#16904) refs https://github.com/TryGhost/Team/issues/3337 Removed post diffing from post history feature as this functionality is likely to be reworked in a future cycle --- ghost/admin/.lint-todo | 2 + .../app/components/modal-post-history.hbs | 37 +------- .../app/components/modal-post-history.js | 90 ++----------------- ghost/admin/app/services/feature.js | 1 - .../admin/app/styles/layouts/post-history.css | 46 ---------- ghost/admin/app/templates/settings/labs.hbs | 14 --- ghost/admin/package.json | 1 - ghost/core/core/shared/labs.js | 1 - yarn.lock | 5 -- 9 files changed, 13 insertions(+), 184 deletions(-) diff --git a/ghost/admin/.lint-todo b/ghost/admin/.lint-todo index 6f4dddd64f..a390d3f602 100644 --- a/ghost/admin/.lint-todo +++ b/ghost/admin/.lint-todo @@ -585,3 +585,5 @@ remove|ember-template-lint|require-iframe-title|6|4|6|4|62bc251294f2cbea568fcc8d remove|ember-template-lint|require-iframe-title|7|4|7|4|62bc251294f2cbea568fcc8d8e46bb5fe1915bc9|1675296000000|1685660400000|1690844400000|app/components/gh-html-iframe.hbs add|ember-template-lint|no-invalid-interactive|3|4|3|4|1e038cea298e74d9c774ed441ca6daf50060a8ec|1685318400000|1695686400000|1700874000000|app/components/gh-editor-feature-image.hbs remove|ember-template-lint|no-invalid-interactive|3|4|3|4|8e05ced79d8f5f5e13cd43033670b3b1e14db3ab|1681776000000|1692144000000|1697328000000|app/components/gh-editor-feature-image.hbs +remove|ember-template-lint|no-action|21|127|21|127|7233183d00299a45a813392b99c8442210cdaeb3|1681862400000|1692230400000|1697414400000|app/components/modal-post-history.hbs +remove|ember-template-lint|require-valid-alt-text|13|20|13|20|41dff435a7aba8088be689c6d9b1e76bef081d17|1682035200000|1692403200000|1697587200000|app/components/modal-post-history.hbs diff --git a/ghost/admin/app/components/modal-post-history.hbs b/ghost/admin/app/components/modal-post-history.hbs index ae1a4a6dc1..562ac674ad 100644 --- a/ghost/admin/app/components/modal-post-history.hbs +++ b/ghost/admin/app/components/modal-post-history.hbs @@ -1,26 +1,10 @@ {{!-- template-lint-disable no-invalid-interactive --}}
-
- {{#if (and this.diffHtml this.showDifferences (feature 'postDiffing'))}} - {{{this.diffHtml}}} - {{else if this.selectedHTML}} +
+ {{#if this.selectedHTML}} {{{this.selectedHTML}}} {{/if}} -
@@ -69,7 +53,7 @@ {{#if (eq revision.reason "unpublished")}} Unpublished {{/if}} - +
@@ -90,21 +74,6 @@ {{/each}} - {{#if (feature 'postDiffing')}} -
-
-
- -
-
-
- {{/if}}
diff --git a/ghost/admin/app/components/modal-post-history.js b/ghost/admin/app/components/modal-post-history.js index 07c3967de2..7e22998d8a 100644 --- a/ghost/admin/app/components/modal-post-history.js +++ b/ghost/admin/app/components/modal-post-history.js @@ -1,6 +1,5 @@ import Component from '@glimmer/component'; import RestoreRevisionModal from '../components/modals/restore-revision'; -import diff from 'node-htmldiff'; import {action, set} from '@ember/object'; import {inject as service} from '@ember/service'; import {tracked} from '@glimmer/tracking'; @@ -23,11 +22,8 @@ function checkFinishedRendering(element, done) { export default class ModalPostHistory extends Component { @service notifications; @service modals; - @service feature; @service ghostPaths; @tracked selectedHTML = null; - @tracked diffHtml = null; - @tracked showDifferences = this.feature.get('postDiffing'); // should default to true in future @tracked selectedRevisionIndex = 0; constructor() { @@ -41,20 +37,12 @@ export default class ModalPostHistory extends Component { return this.revisionList[this.selectedRevisionIndex]; } - get comparisonRevision() { - return this.revisionList[this.selectedRevisionIndex + 1] || this.selectedRevision; - } - - get previousTitle() { - return this.comparisonRevision.title || this.post.get('title'); - } - get currentTitle() { return this.selectedRevision.title || this.post.get('title'); } get revisionList() { - const revisions = this.post.get('postRevisions').toArray().sort((a, b) => b.get('createdAt') - a.get('createdAt')); + const revisions = this.post.get('postRevisions').toArray().sort((a, b) => b.get('createdAt') - a.get('createdAt')); return revisions.map((revision, index) => { return { lexical: revision.get('lexical'), @@ -78,7 +66,7 @@ export default class ModalPostHistory extends Component { @action onInsert() { - this.updateDiff(); + this.updateSelectedHTML(); window.addEventListener('keydown', this.handleKeyDown); } @@ -98,7 +86,7 @@ export default class ModalPostHistory extends Component { @action handleClick(index) { this.selectedRevisionIndex = index; - this.updateDiff(); + this.updateSelectedHTML(); } @action @@ -143,97 +131,35 @@ export default class ModalPostHistory extends Component { }); } - @action - toggleDifferences() { - this.showDifferences = !this.showDifferences; - } - get cardConfig() { return { post: this.args.model }; } - calculateHTMLDiff(previousHTML, currentHTML) { - const result = diff(previousHTML, currentHTML); - const div = document.createElement('div'); - div.innerHTML = result; - this.diffCards(div); - return div.innerHTML; - } - - diffCards(div) { - 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(); - } - } - } - - updateDiff() { - if (this.comparisonEditor && this.selectedEditor) { - let comparisonState = this.comparisonEditor.editorInstance.parseEditorState(this.comparisonRevision.lexical); + updateSelectedHTML() { + if (this.selectedEditor) { 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.diffHtml = this.calculateHTMLDiff(this.stripInitialPlaceholder(previous.innerHTML), this.stripInitialPlaceholder(current.innerHTML)); + let updateIfDone = () => { + if (currentDone) { this.selectedHTML = this.stripInitialPlaceholder(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(); + updateIfDone(); }); } } diff --git a/ghost/admin/app/services/feature.js b/ghost/admin/app/services/feature.js index 7c6e33806f..b30789b2a6 100644 --- a/ghost/admin/app/services/feature.js +++ b/ghost/admin/app/services/feature.js @@ -68,7 +68,6 @@ export default class FeatureService extends Service { @feature('stripeAutomaticTax') stripeAutomaticTax; @feature('emailCustomization') emailCustomization; @feature('i18n') i18n; - @feature('postDiffing') postDiffing; @feature('announcementBar') announcementBar; @feature('imageEditor') imageEditor; @feature('signupCard') signupCard; diff --git a/ghost/admin/app/styles/layouts/post-history.css b/ghost/admin/app/styles/layouts/post-history.css index f3242bf5a0..807bd1065f 100644 --- a/ghost/admin/app/styles/layouts/post-history.css +++ b/ghost/admin/app/styles/layouts/post-history.css @@ -175,52 +175,6 @@ color: var(--black); } -.gh-post-history .show-diff .gh-editor-feature-image img { - opacity: .5; -} - -.gh-post-history .show-diff .gh-editor-feature-image del img { - opacity: 1; - border: 3px solid var(--white); - box-shadow: 0 0 0 2px var(--red); -} - -.gh-post-history .show-diff .gh-editor-feature-image ins img { - opacity: 1; - border: 3px solid var(--white); - box-shadow: 0 0 0 2px var(--green); -} - -.gh-post-history .show-diff .gh-editor-title { - opacity: .4; -} - -.gh-post-history-main .show-diff .koenig-lexical h1, -.gh-post-history-main .show-diff .koenig-lexical h2, -.gh-post-history-main .show-diff .koenig-lexical h3, -.gh-post-history-main .show-diff .koenig-lexical h4, -.gh-post-history-main .show-diff .koenig-lexical h5, -.gh-post-history-main .show-diff .koenig-lexical h6, -.gh-post-history-main .show-diff .koenig-lexical p, -.gh-post-history-main .show-diff .koenig-lexical blockquote, -.gh-post-history-main .show-diff .koenig-lexical aside { - color: rgba(21, 23, 26, 0.4); -} - -.gh-post-history-main .show-diff .koenig-lexical a:not(.gh-post-history-main .koenig-lexical del a):not(.gh-post-history-main .koenig-lexical ins a) { - opacity: .4; -} - -.gh-post-history-main .koenig-lexical del { - color: var(--red-d1) !important; -} - -.gh-post-history-main .koenig-lexical ins { - color: var(--black) !important; - text-decoration: none !important; - background-color: rgba(48, 207, 67, 0.15) !important; -} - .gh-post-history-hidden-lexical { display: none; } diff --git a/ghost/admin/app/templates/settings/labs.hbs b/ghost/admin/app/templates/settings/labs.hbs index 4a1d42fe4b..57e5e6305c 100644 --- a/ghost/admin/app/templates/settings/labs.hbs +++ b/ghost/admin/app/templates/settings/labs.hbs @@ -268,20 +268,6 @@
-
-
-
-

Revision Diffing

-

- Enables showing post history differences within the editor -

-
-
- -
-
-
-
diff --git a/ghost/admin/package.json b/ghost/admin/package.json index a27781a4a1..7f955d7f9d 100644 --- a/ghost/admin/package.json +++ b/ghost/admin/package.json @@ -182,7 +182,6 @@ }, "dependencies": { "jose": "4.13.1", - "node-htmldiff": "^0.9.4", "path-browserify": "1.0.1", "webpack": "5.77.0" } diff --git a/ghost/core/core/shared/labs.js b/ghost/core/core/shared/labs.js index 293b487f78..0dcaf81c13 100644 --- a/ghost/core/core/shared/labs.js +++ b/ghost/core/core/shared/labs.js @@ -36,7 +36,6 @@ const ALPHA_FEATURES = [ 'websockets', 'stripeAutomaticTax', 'emailCustomization', - 'postDiffing', 'imageEditor', 'signupCard', 'collections', diff --git a/yarn.lock b/yarn.lock index ca8e16a4a4..0dfa2bd26d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -24596,11 +24596,6 @@ node-gyp@^9.0.0, node-gyp@^9.3.0: tar "^6.1.2" which "^2.0.2" -node-htmldiff@^0.9.4: - version "0.9.4" - resolved "https://registry.yarnpkg.com/node-htmldiff/-/node-htmldiff-0.9.4.tgz#d8fec52fbe736780afff28d2c8476ec106520887" - integrity sha512-Nvnv0bcehOFsH/TD+bi4ls3iWTRQiytqII5+I1iBUypO+GFMYLcyBJfS2U3DMRSIYzfZHysaYLYoCXx6Q148Hg== - node-int64@^0.4.0: version "0.4.0" resolved "https://registry.yarnpkg.com/node-int64/-/node-int64-0.4.0.tgz#87a9065cdb355d3182d8f94ce11188b825c68a3b"