feat: added native undo feature for editor

cypress.config.ts

@@ -12,7 +12,7 @@ export default defineConfig({
   videosFolder: 'test/cypress/videos',
   e2e: {
     // We've imported your old cypress plugins here.
-    // You may want to clean this up later by importing these.
+    // You may want to clean this up later by importing new cypress plugins here.
     setupNodeEvents(on, config) {
       on('file:preprocessor', vitePreprocessor({
         configFile: path.resolve(__dirname, './vite.config.test.js'),

package.json

@@ -66,6 +66,7 @@
   "dependencies": {
     "@editorjs/caret": "^1.0.1",
     "codex-notifier": "^1.1.2",
-    "codex-tooltip": "^1.0.5"
+    "codex-tooltip": "^1.0.5",
+    "vanilla-caret-js": "^1.1.0"
   }
-}
+}

src/components/block/index.ts

@@ -67,7 +67,7 @@
 /**
  * @class Block
  * @classdesc This class describes editor`s block, including block`s HTMLElement, data and tool
  * @property {BlockTool} tool — current block tool (Paragraph, for example)
  * @property {object} CSS — block`s css classes
  */
 
@@ -98,7 +98,7 @@
 
 /**
  * @classdesc Abstract Block class that contains Block information, Tool name and Tool class instance
  * @property {BlockTool} tool - Tool instance
  * @property {HTMLElement} holder - Div element that wraps block content with Tool's content. Has `ce-block` CSS class
  * @property {HTMLElement} pluginsContent - HTML content that returns by Tool's render function
  */
@@ -226,7 +226,7 @@
     this.name = tool.name;
     this.id = id;
     this.settings = tool.settings;
     this.config = tool.settings.config || {};
     this.editorEventBus = eventBus || null;
     this.blockAPI = new BlockAPI(this);
 
@@ -867,15 +867,12 @@
    *   - undefined — manual triggering of block.dispatchChange()
    */
   private readonly didMutated = (mutationsOrInputEvent: MutationRecord[] | InputEvent = undefined): void => {
-    /**
-     * Block API have dispatchChange() method. In this case, mutations list will be undefined.
-     */
     const isManuallyDispatched = mutationsOrInputEvent === undefined;
+    const isInputEventHandler = mutationsOrInputEvent instanceof InputEvent;
 
     /**
-     * True if didMutated has been called as "input" event handler
+     * Block API have dispatchChange() method. In this case, mutations list will be undefined.
      */
-    const isInputEventHandler = mutationsOrInputEvent instanceof InputEvent;
 
     /**
      * If tool updates its own root element, we need to renew it in our memory
@@ -917,7 +914,7 @@
             node = node.parentElement;
           }
 
           return node && (node as HTMLElement).closest('[data-mutation-free="true"]') !== null;
         });
       });
 

src/components/core.ts

@@ -105,8 +105,8 @@
     /**
      * If holderId is preset, assign him to holder property and work next only with holder
      */
     _.deprecationAssert(!!this.config.holderId, 'config.holderId', 'config.holder');
     if (this.config.holderId && !this.config.holder) {
       this.config.holder = this.config.holderId;
       this.config.holderId = null;
     }
@@ -118,7 +118,7 @@
       this.config.holder = 'editorjs';
     }
 
     if (!this.config.logLevel) {
       this.config.logLevel = _.LogLevels.VERBOSE;
     }
 
@@ -128,7 +128,7 @@
      * If default Block's Tool was not passed, use the Paragraph Tool
      */
     _.deprecationAssert(Boolean(this.config.initialBlock), 'config.initialBlock', 'config.defaultBlock');
     this.config.defaultBlock = this.config.defaultBlock || this.config.initialBlock || 'paragraph';
 
     /**
      * Height of Editor's bottom area that allows to set focus on the last Block
@@ -253,6 +253,7 @@
       'RectangleSelection',
       'CrossBlockSelection',
       'ReadOnly',
+      'History',
     ];
 
     await modulesToPrepare.reduce(

src/components/dom.ts

@@ -568,12 +568,12 @@ export default class Dom {
 
   /**
    * Returns the closest ancestor anchor (A tag) of the given element (including itself)
-   * 
+   *
    * @param element - element to check
    * @returns {HTMLAnchorElement | null}
    */
   public static getClosestAnchor(element: Element): HTMLAnchorElement | null {
-    return element.closest("a");
+    return element.closest('a');
   }
 
   /**

src/components/modules/api/history.ts

@@ -0,0 +1,56 @@
+import type { History as HistoryInterface } from '../../../../types/api';
+import Module from '../../__module';
+
+/**
+ * @class HistoryAPI
+ * @classdesc Public API for undo/redo operations
+ */
+export default class HistoryAPI extends Module {
+  /**
+   * Available methods exposed on editor.history
+   */
+  public get methods(): HistoryInterface {
+    return {
+      undo: (): Promise<void> => this.undo(),
+      redo: (): Promise<void> => this.redo(),
+      canUndo: (): boolean => this.canUndo(),
+      canRedo: (): boolean => this.canRedo(),
+      clear: (): Promise<void> => this.clear(),
+    };
+  }
+
+  /**
+   * Undo the last change
+   */
+  public undo(): Promise<void> {
+    return this.Editor.History.undo();
+  }
+
+  /**
+   * Redo the last undone change
+   */
+  public redo(): Promise<void> {
+    return this.Editor.History.redo();
+  }
+
+  /**
+   * Returns true if undo is possible
+   */
+  public canUndo(): boolean {
+    return this.Editor.History.canUndo();
+  }
+
+  /**
+   * Returns true if redo is possible
+   */
+  public canRedo(): boolean {
+    return this.Editor.History.canRedo();
+  }
+
+  /**
+   * Clear the history stack
+   */
+  public async clear(): Promise<void> {
+    await this.Editor.History.clear();
+  }
+}

src/components/modules/api/index.ts

@@ -33,6 +33,7 @@ export default class API extends Module {
       i18n: this.Editor.I18nAPI.methods,
       readOnly: this.Editor.ReadOnlyAPI.methods,
       ui: this.Editor.UiAPI.methods,
+      history: this.Editor.HistoryAPI.methods,
     };
   }
 

src/components/modules/blockManager.ts

@@ -895,8 +895,8 @@ export default class BlockManager extends Module {
     const queue = new PromiseQueue();
 
     // Create a copy of the blocks array to avoid issues with array modification during iteration
-    const blocksToRemove = [...this.blocks];
-    
+    const blocksToRemove = [ ...this.blocks ];
+
     blocksToRemove.forEach((block) => {
       queue.add(async () => {
         await this.removeBlock(block, false);