🐛 Fixed editor undo states for card contents (#1064)

refs TryGhost/Ghost#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
TryGhost · Nov 6, 2018 · a3c41f9 · a3c41f9
1 parent 9b9944b
commit a3c41f9
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -3,13 +3,15 @@
     class=(concat (kg-style "container-card") " koenig-card-markdown-rendered")
     headerOffset=headerOffset
     toolbar=toolbar
+    payload=payload
     isSelected=isSelected
     isEditing=isEditing
     onEnterEdit=(action "enterEditMode")
     onLeaveEdit=(action "leaveEditMode")
     selectCard=(action selectCard)
     deselectCard=(action deselectCard)
     editCard=(action editCard)
+    saveCard=(action saveCard)
     editor=editor
 }}
     {{#if isEditing}}