feat: add debounce clear batch timer

Author: e11sy

packages/collaboration-manager/src/CollaborationManager.ts

@@ -14,6 +14,8 @@ import { BatchedOperation } from './BatchedOperation.js';
 import { type ModifyOperationData, Operation, OperationType } from './Operation.js';
 import { UndoRedoManager } from './UndoRedoManager.js';
 
+const DEBOUCE_TIMEOUT = 500;
+
 /**
  * CollaborationManager listens to EditorJSModel events and applies operations
  */
@@ -48,6 +50,11 @@ export class CollaborationManager {
    */
   #client: OTClient | null = null;
 
+  /**
+   * Debounce timer to move current batch to undo stack after a delay
+   */
+  #debounceTimer?: ReturnType<typeof setTimeout>;
+
   /**
    * Creates an instance of CollaborationManager
    *
@@ -249,24 +256,25 @@ export class CollaborationManager {
      */
     if (this.#currentBatch === null) {
       this.#currentBatch = new BatchedOperation(operation);
+      this.#debounce();
 
       return;
     }
 
     /**
      * If current operation could not be added to the batch, then terminate current batch and create a new one with current operation
-     *
-     * @todo - add debounce timeout 500ms
      */
     if (!this.#currentBatch.canAdd(operation)) {
       this.#moveBatchToUndo();
 
       this.#currentBatch = new BatchedOperation(operation);
+      this.#debounce();
 
       return;
     }
 
     this.#currentBatch.add(operation);
+    this.#debounce();
   }
 
   /**
@@ -279,4 +287,15 @@ export class CollaborationManager {
       this.#currentBatch = null;
     }
   }
+
+  /**
+   * Debouneces timer of #moveBatchToUndo method
+   */
+  #debounce(): void {
+    clearTimeout(this.#debounceTimer);
+
+    this.#debounceTimer = setTimeout(() => {
+      this.#moveBatchToUndo();
+    }, DEBOUCE_TIMEOUT);
+  }
 }

packages/collaboration-manager/src/UndoRedoManager.ts

@@ -14,17 +14,6 @@ export class UndoRedoManager {
    */
   #redoStack: Operation[] = [];
 
-  /**
-   * Transforms passed operations stack against the operation
-   *
-   * @param operation - operation to transform against
-   * @param stack - stack to transform
-   * @returns - new transformed list of operations
-   */
-  private transformStack(operation: Operation, stack: Operation[]): Operation[] {
-    return stack.map((op: Operation) => op.transform(operation));
-  }
-
   /**
    * Returns operation to undo (if any)
    */
@@ -79,4 +68,15 @@ export class UndoRedoManager {
     this.#undoStack = this.transformStack(operation, this.#undoStack);
     this.#redoStack = this.transformStack(operation, this.#redoStack);
   }
+
+  /**
+   * Transforms passed operations stack against the operation
+   *
+   * @param operation - operation to transform against
+   * @param stack - stack to transform
+   * @returns - new transformed list of operations
+   */
+  private transformStack(operation: Operation, stack: Operation[]): Operation[] {
+    return stack.map((op: Operation) => op.transform(operation));
+  }
 }