From a3c41f92f442b32eb3c7ecc1560c9852f3dcde8c Mon Sep 17 00:00:00 2001 From: Kevin Ansfield Date: Tue, 6 Nov 2018 14:43:19 +0000 Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Fixed=20editor=20undo=20states?= =?UTF-8?q?=20for=20card=20contents=20(#1064)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit refs https://github.com/TryGhost/Ghost/issues/10049 - update `{{koenig-card}}` component to compare payload values and create a snapshot when exiting edit mode for container cards (markdown, html, code) - update image card to trigger snapshots on image upload/selection and width change --- .../addon/components/koenig-card-image.js | 23 +++++++++++++++---- .../addon/components/koenig-card.js | 16 +++++++++++++ .../templates/components/koenig-card-code.hbs | 2 ++ .../templates/components/koenig-card-html.hbs | 2 ++ .../components/koenig-card-markdown.hbs | 2 ++ 5 files changed, 41 insertions(+), 4 deletions(-) diff --git a/lib/koenig-editor/addon/components/koenig-card-image.js b/lib/koenig-editor/addon/components/koenig-card-image.js index e3e47b68b6..7a4596c19f 100644 --- a/lib/koenig-editor/addon/components/koenig-card-image.js +++ b/lib/koenig-editor/addon/components/koenig-card-image.js @@ -17,6 +17,7 @@ export default Component.extend({ layout, // attrs + editor: null, files: null, payload: null, isSelected: false, @@ -145,7 +146,11 @@ export default Component.extend({ actions: { updateSrc(images) { let [image] = images; - this._updatePayloadAttr('src', image.url); + + // create undo snapshot when image finishes uploading + this.editor.run(() => { + this._updatePayloadAttr('src', image.url); + }); }, updateCaption(caption) { @@ -177,7 +182,11 @@ export default Component.extend({ resetSrcs() { this.set('previewSrc', null); - this._updatePayloadAttr('src', null); + + // create undo snapshot when clearing + this.editor.run(() => { + this._updatePayloadAttr('src', null); + }); }, selectFromImageSelector({src, caption, alt}) { @@ -188,7 +197,10 @@ export default Component.extend({ this.send('closeImageSelector'); - saveCard(payload, false); + // create undo snapshot when selecting an image + this.editor.run(() => { + saveCard(payload, false); + }); }, closeImageSelector() { @@ -237,7 +249,10 @@ export default Component.extend({ }, _changeCardWidth(cardWidth) { - this._updatePayloadAttr('cardWidth', cardWidth); + // create undo snapshot when changing image size + this.editor.run(() => { + this._updatePayloadAttr('cardWidth', cardWidth); + }); }, _updatePayloadAttr(attr, value) { diff --git a/lib/koenig-editor/addon/components/koenig-card.js b/lib/koenig-editor/addon/components/koenig-card.js index 512ddfa12c..94644a67e7 100644 --- a/lib/koenig-editor/addon/components/koenig-card.js +++ b/lib/koenig-editor/addon/components/koenig-card.js @@ -13,6 +13,7 @@ export default Component.extend({ classNameBindings: ['selectedClass'], // attrs + editor: null, icon: null, iconClass: 'ih5 absolute stroke-midgrey-l2 mt1 nl16 kg-icon', toolbar: null, @@ -200,11 +201,26 @@ export default Component.extend({ _onEnterEdit() { this._onKeydownHandler = run.bind(this, this._handleKeydown); window.addEventListener('keydown', this._onKeydownHandler); + + // store a copy of the payload for later comparison + this._snapshotPayload = JSON.stringify(this.payload); + this.onEnterEdit(); }, _onLeaveEdit() { window.removeEventListener('keydown', this._onKeydownHandler); + + // if the payload has changed since entering edit mode then store a snapshot + let newPayload = JSON.stringify(this.payload); + if (newPayload !== this._snapshotPayload) { + this.editor.run(() => { + this.saveCard(this.payload); + }); + } + + delete this._snapshotPayload; + this.onLeaveEdit(); }, diff --git a/lib/koenig-editor/addon/templates/components/koenig-card-code.hbs b/lib/koenig-editor/addon/templates/components/koenig-card-code.hbs index 2cd685390c..bd41a1bb9a 100644 --- a/lib/koenig-editor/addon/templates/components/koenig-card-code.hbs +++ b/lib/koenig-editor/addon/templates/components/koenig-card-code.hbs @@ -2,11 +2,13 @@ class=(concat "ba b--white relative kg-card-hover miw-100 relative" (if isEditing "pt1 pb1 pl6 nl6 pr6 nr6")) headerOffset=headerOffset toolbar=toolbar + payload=payload isSelected=isSelected isEditing=isEditing selectCard=(action selectCard) deselectCard=(action deselectCard) editCard=(action editCard) + saveCard=(action saveCard) onLeaveEdit=(action "leaveEditMode") editor=editor }} diff --git a/lib/koenig-editor/addon/templates/components/koenig-card-html.hbs b/lib/koenig-editor/addon/templates/components/koenig-card-html.hbs index 574344ffc5..cc731365b0 100644 --- a/lib/koenig-editor/addon/templates/components/koenig-card-html.hbs +++ b/lib/koenig-editor/addon/templates/components/koenig-card-html.hbs @@ -3,11 +3,13 @@ class=(concat (kg-style "container-card") " mih10 miw-100 relative") headerOffset=headerOffset toolbar=toolbar + payload=payload isSelected=isSelected isEditing=isEditing selectCard=(action selectCard) deselectCard=(action deselectCard) editCard=(action editCard) + saveCard=(action saveCard) onLeaveEdit=(action "leaveEditMode") editor=editor }} diff --git a/lib/koenig-editor/addon/templates/components/koenig-card-markdown.hbs b/lib/koenig-editor/addon/templates/components/koenig-card-markdown.hbs index 0c7ef04676..509935d962 100644 --- a/lib/koenig-editor/addon/templates/components/koenig-card-markdown.hbs +++ b/lib/koenig-editor/addon/templates/components/koenig-card-markdown.hbs @@ -3,6 +3,7 @@ class=(concat (kg-style "container-card") " koenig-card-markdown-rendered") headerOffset=headerOffset toolbar=toolbar + payload=payload isSelected=isSelected isEditing=isEditing onEnterEdit=(action "enterEditMode") @@ -10,6 +11,7 @@ selectCard=(action selectCard) deselectCard=(action deselectCard) editCard=(action editCard) + saveCard=(action saveCard) editor=editor }} {{#if isEditing}}