Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-03-04 02:01:58 -05:00
Code Issues Activity

Removed post diffing from post history feature (#16904)

Browse source 
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
This commit is contained in:
Michael Barrett 2023-06-01 13:22:51 +01:00 • committed by GitHub
parent 2a739cf248
commit ef92028b22
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 13 additions and 184 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
ghost/admin/.lint-todo
View file

@ -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

37
ghost/admin/app/components/modal-post-history.hbs
View file

@ -1,26 +1,10 @@
{{!-- template-lint-disable no-invalid-interactive --}}
<div class="gh-post-history" {{did-insert this.onInsert}}>
<div class="gh-post-history-main">
<div class="gh-koenig-editor-pane flex flex-column mih-100 {{if this.showDifferences "show-diff" ""}}">
{{#if (and this.diffHtml this.showDifferences (feature 'postDiffing'))}}
{{{this.diffHtml}}}
{{else if this.selectedHTML}}
<div class="gh-koenig-editor-pane flex flex-column mih-100">
{{#if this.selectedHTML}}
{{{this.selectedHTML}}}
{{/if}}
<div class="gh-post-history-hidden-lexical previous">
<div class="gh-editor-feature-image-container">
<div class="gh-editor-feature-image">
{{#if this.comparisonRevision.feature_image}}
<img src="{{this.comparisonRevision.feature_image}}">
{{/if}}
{{#if this.comparisonRevision.feature_image_caption}}
<p>{{{this.comparisonRevision.feature_image_caption}}}"</p>
{{/if}}
</div>
</div>
<div class="gh-editor-title">{{this.previousTitle}}</div>
<KoenigLexicalEditor @lexical={{this.comparisonRevision.lexical}} @cardConfig={{this.cardConfig}} @registerAPI={{action "registerComparisonEditorApi"}}/>
</div>
<div class="gh-post-history-hidden-lexical current">
<div class="gh-editor-feature-image-container">
<div class="gh-editor-feature-image">
@ -69,7 +53,7 @@
{{#if (eq revision.reason "unpublished")}}
<span class="gh-post-history-version-tag unpublished">Unpublished</span>
{{/if}}
</div>
<div class="flex items-center mt2">
<span class="user-list-item-figure" style={{background-image-style revision.author.profile_image_url}}>
@ -90,21 +74,6 @@
</li>
{{/each}}
</ul>
{{#if (feature 'postDiffing')}}
<div class="gh-post-history-footer">
<div class="gh-post-history-footer-inner">
<div class="for-switch x-small">
<label class="switch">
<span>Compare to previous version</span>
<span class="gh-toggle-featured">
<input {{on "click" (fn this.toggleDifferences '')}} type="checkbox" checked={{this.showDifferences}}>
<span class="input-toggle-component"></span>
</span>
</label>
</div>
</div>
</div>
{{/if}}
</div>
</div>
</div>

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

@ -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();
});
}
}

1
ghost/admin/app/services/feature.js
View file

@ -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;

46
ghost/admin/app/styles/layouts/post-history.css
View file

@ -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;
}

14
ghost/admin/app/templates/settings/labs.hbs
View file

@ -268,20 +268,6 @@
</div>
</div>
<div class="gh-expandable-block">
<div class="gh-expandable-header">
<div>
<h4 class="gh-expandable-title">Revision Diffing</h4>
<p class="gh-expandable-description">
Enables showing post history differences within the editor
</p>
</div>
<div class="for-switch">
<GhFeatureFlag @flag="postDiffing" />
</div>
</div>
</div>
<div class="gh-expandable-block">
<div class="gh-expandable-header">
<div>

1
ghost/admin/package.json
View file

@ -182,7 +182,6 @@
},
"dependencies": {
"jose": "4.13.1",
"node-htmldiff": "^0.9.4",
"path-browserify": "1.0.1",
"webpack": "5.77.0"
}

1
ghost/core/core/shared/labs.js
View file

@ -36,7 +36,6 @@ const ALPHA_FEATURES = [
'websockets',
'stripeAutomaticTax',
'emailCustomization',
'postDiffing',
'imageEditor',
'signupCard',
'collections',

5
yarn.lock
View file

@ -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"