Merge pull request #44 from kommitters/v0.1.7

* Set event listeners in holder element instead of the document (#42)

* Test undo and redo events fired inside and outside EditorJS holder element

* Bump library version

Co-authored-by: Diego Lao Tebar <howarto@ymail.com>

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 0.1.7 (16.06.2021)
+
+* Set the undo/redo event listeners in the holder element instead of the whole document.
+
 ## 0.1.6 (04.05.2021)
 
 * Read-only mode support added.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "editorjs-undo",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "keywords": [
     "undo",
     "redo",

src/index.js

@@ -190,7 +190,9 @@ export default class Undo {
    * Sets events listeners to allow keyboard actions support.
    */
   setEventListeners() {
+    const { holder } = this.editor.configuration;
     const buttonKey = /(Mac)/i.test(navigator.platform) ? 'metaKey' : 'ctrlKey';
+
     const handleUndo = (e) => {
       if (e[buttonKey] && e.key === 'z') {
         e.preventDefault();
@@ -206,12 +208,13 @@ export default class Undo {
     };
 
     const handleDestroy = () => {
-      document.removeEventListener('keydown', handleUndo);
-      document.removeEventListener('keydown', handleRedo);
+      holder.removeEventListener('keydown', handleUndo);
+      holder.removeEventListener('keydown', handleRedo);
     };
 
-    document.addEventListener('keydown', handleUndo);
-    document.addEventListener('keydown', handleRedo);
-    document.addEventListener('destroy', handleDestroy);
+    holder.addEventListener('keydown', handleUndo);
+    holder.addEventListener('keydown', handleRedo);
+    holder.addEventListener('destroy', handleDestroy);
   }
+
 }

test/fixtures/editor.js

@@ -12,9 +12,7 @@ const editor = {
   caret: {
     setToBlock() {},
   },
-  configuration: {
-    holder: 'editorjs',
-  },
+  configuration: {},
 };
 
 const readOnlyEditor = {
@@ -27,7 +25,6 @@ const readOnlyEditor = {
     setToBlock() {},
   },
   configuration: {
-    holder: 'editorjs',
     readOnly: true,
   },
 };

test/undo.test.js

@@ -10,6 +10,10 @@ import { editor, readOnlyEditor } from './fixtures/editor';
 describe('Undo', () => {
   beforeEach(() => {
     document.body.innerHTML = '<div id="editorjs"></div>';
+    // EditorJS uses as a holder an HTMLElement instead of a query selector.
+    // This has to be assigned each time that DOM is reset.
+    editor.configuration.holder = document.querySelector('#editorjs');
+    readOnlyEditor.configuration.holder = document.querySelector('#editorjs');
   });
 
   describe('Read-only mode active', () => {
@@ -119,4 +123,80 @@ describe('Undo', () => {
       expect(state).toEqual(newChange.blocks);
     });
   });
+
+  describe('Undo/redo events fired inside and outside Editor\'s holder', () => {
+    let undo;
+
+    beforeEach(() => {
+      undo = new Undo({ editor });
+      undo.initialize(initialData.blocks);
+      undo.save(firstChange.blocks);
+      undo.save(secondChange.blocks);
+    });
+
+    it('undo event outside Editor\'s holder has not to cause changes in Undo Plugin stack', () => {
+      // Set metaKey and ctrlKey to true in order to work in Mac and other OSs.
+      const keyboardEvent = new KeyboardEvent('keydown', {
+        key: 'z',
+        metaKey: true,
+        ctrlKey: true,
+      });
+
+      document.dispatchEvent(keyboardEvent);
+
+      expect(undo.count()).toEqual(2);
+      expect(undo.position).toEqual(2);
+      const { state } = undo.stack[2];
+      expect(state).toEqual(secondChange.blocks);
+    });
+
+    it('undo event inside Editor\'s holder has to cause changes in Undo Plugin stack', () => {
+      const keyboardEvent = new KeyboardEvent('keydown', {
+        key: 'z',
+        metaKey: true,
+        ctrlKey: true,
+      });
+
+      editor.configuration.holder.dispatchEvent(keyboardEvent);
+
+      expect(undo.count()).toEqual(2);
+      expect(undo.position).toEqual(1);
+      const { state } = undo.stack[1];
+      expect(state).toEqual(firstChange.blocks);
+    });
+
+    it('redo event outside Editor\'s holder has not to cause changes in Undo Plugin stack', () => {
+      undo.undo();
+
+      const keyboardEvent = new KeyboardEvent('keydown', {
+        key: 'y',
+        metaKey: true,
+        ctrlKey: true,
+      });
+
+      document.dispatchEvent(keyboardEvent);
+
+      expect(undo.count()).toEqual(2);
+      expect(undo.position).toEqual(1);
+      const { state } = undo.stack[1];
+      expect(state).toEqual(firstChange.blocks);
+    });
+
+    it('redo event inside Editor\'s holder has to cause changes in Undo Plugin stack', () => {
+      undo.undo();
+
+      const keyboardEvent = new KeyboardEvent('keydown', {
+        key: 'y',
+        metaKey: true,
+        ctrlKey: true,
+      });
+
+      editor.configuration.holder.dispatchEvent(keyboardEvent);
+
+      expect(undo.count()).toEqual(2);
+      expect(undo.position).toEqual(2);
+      const { state } = undo.stack[2];
+      expect(state).toEqual(secondChange.blocks);
+    });
+  });
 });