quill-table-up 3.2.1 → 3.3.0

package/src/__tests__/unit/table-contenteditable.test.ts

@@ -0,0 +1,222 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { TableDomSelector, TableSelection } from '../../modules';
+import { TableUp } from '../../table-up';
+import { createQuillWithTableModule } from './utils';
+
+beforeEach(() => {
+  vi.useFakeTimers();
+});
+afterEach(() => {
+  vi.useRealTimers();
+});
+
+describe('TableUp - contenteditable change', () => {
+  describe('when contenteditable becomes false', () => {
+    it('should destroy all table modules', async () => {
+      const quill = createQuillWithTableModule(`<p><br></p>`, {
+        modules: [{ module: TableSelection }],
+      });
+
+      const tableUp = quill.getModule(TableUp.moduleName) as TableUp;
+      const module = tableUp.getModule<TableSelection>(TableSelection.moduleName);
+
+      expect(module).toBeDefined();
+
+      // Disable editor
+      quill.enable(false);
+
+      // Wait for MutationObserver callback
+      await vi.runAllTimersAsync();
+
+      // Verify modules are cleared
+      expect(tableUp.modules).not.toBeNullable();
+      expect(Object.keys(tableUp.modules).length).toEqual(0);
+    });
+
+    it('should handle modules without destroy method gracefully', async () => {
+      // Create a module without destroy method
+      class MockModuleWithoutDestroy extends TableDomSelector {
+        static moduleName = 'mock-module-without-destroy';
+      }
+
+      const quill = createQuillWithTableModule(`<p><br></p>`, {
+        modules: [{ module: MockModuleWithoutDestroy }],
+      });
+
+      const tableUp = quill.getModule(TableUp.moduleName) as TableUp;
+
+      // Should not throw error
+      await expect(() => quill.enable(false)).not.toThrow();
+
+      // Modules should be cleared
+      expect(tableUp.modules).not.toBeNullable();
+      expect(Object.keys(tableUp.modules).length).toEqual(0);
+    });
+  });
+
+  describe('when contenteditable becomes true', () => {
+    it('should create new module instances', async () => {
+      const quill = createQuillWithTableModule(`<p><br></p>`, {
+        modules: [{ module: TableSelection }],
+      });
+
+      const tableUp = quill.getModule(TableUp.moduleName) as TableUp;
+      const oldModule = tableUp.getModule<TableSelection>(TableSelection.moduleName);
+
+      expect(oldModule).toBeDefined();
+
+      // Disable editor
+      quill.enable(false);
+      await vi.runAllTimersAsync();
+
+      // Re-enable editor
+      quill.enable(true);
+      await vi.runAllTimersAsync();
+
+      // Get new module instance
+      const newModule = tableUp.getModule<TableSelection>(TableSelection.moduleName);
+
+      // Verify new instance is created
+      expect(newModule).toBeDefined();
+      expect(newModule).not.toBe(oldModule);
+    });
+
+    it('should work with multiple enable/disable cycles', async () => {
+      const quill = createQuillWithTableModule(`<p><br></p>`, {
+        modules: [{ module: TableSelection }],
+      });
+
+      const tableUp = quill.getModule(TableUp.moduleName) as TableUp;
+
+      // Multiple toggle cycles
+      quill.enable(false);
+      await vi.runAllTimersAsync();
+
+      quill.enable(true);
+      await vi.runAllTimersAsync();
+
+      quill.enable(false);
+      await vi.runAllTimersAsync();
+
+      quill.enable(true);
+      await vi.runAllTimersAsync();
+
+      // Verify modules still work
+      const module = tableUp.getModule<TableSelection>(TableSelection.moduleName);
+      expect(module).toBeDefined();
+      expect(module).toBeInstanceOf(TableSelection);
+    });
+  });
+
+  describe('error handling', () => {
+    it('should continue working if module destroy throws error', async () => {
+      // Create a module that throws error on destroy
+      class BadModule extends TableDomSelector {
+        static moduleName = 'bad-module';
+
+        destroy() {
+          throw new Error('Destroy failed');
+        }
+      }
+
+      const consoleWarnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
+
+      const quill = createQuillWithTableModule(`<p><br></p>`, {
+        modules: [{ module: BadModule }],
+      });
+
+      const tableUp = quill.getModule(TableUp.moduleName) as TableUp;
+
+      // Should not throw error
+      await expect(() => quill.enable(false)).not.toThrow();
+
+      // Should output warning
+      expect(consoleWarnSpy).toHaveBeenCalledWith(
+        expect.stringContaining('Failed to destroy module'),
+        expect.any(Error),
+      );
+
+      consoleWarnSpy.mockRestore();
+
+      // Modules should be cleared
+      expect(tableUp.modules).toEqual({});
+    });
+
+    it('should handle partial destroy failures', async () => {
+      class BadModule extends TableDomSelector {
+        static moduleName = 'bad-module';
+
+        destroy() {
+          throw new Error('Bad module destroy failed');
+        }
+      }
+
+      class GoodModule extends TableDomSelector {
+        static moduleName = 'good-module';
+
+        destroy() {
+          // Normal destroy
+        }
+      }
+
+      const consoleWarnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
+
+      const quill = createQuillWithTableModule(`<p><br></p>`, {
+        modules: [
+          { module: BadModule },
+          { module: GoodModule },
+        ],
+      });
+
+      const tableUp = quill.getModule(TableUp.moduleName) as TableUp;
+
+      quill.enable(false);
+      await vi.runAllTimersAsync();
+
+      // Should have warning
+      expect(consoleWarnSpy).toHaveBeenCalled();
+
+      consoleWarnSpy.mockRestore();
+
+      // All modules should be cleared
+      expect(tableUp.modules).toEqual({});
+    });
+  });
+
+  describe('MutationObserver behavior', () => {
+    it('should only respond to contenteditable attribute changes', async () => {
+      const quill = createQuillWithTableModule(`<p><br></p>`, {
+        modules: [{ module: TableSelection }],
+      });
+
+      const tableUp = quill.getModule(TableUp.moduleName) as TableUp;
+      const initialModuleCount = Object.keys(tableUp.modules).length;
+
+      // Change other attributes, should not trigger destroy
+      quill.root.setAttribute('data-test', 'value');
+      await vi.runAllTimersAsync();
+
+      expect(Object.keys(tableUp.modules).length).toBe(initialModuleCount);
+
+      // Change contenteditable should trigger
+      quill.enable(false);
+      await vi.runAllTimersAsync();
+
+      expect(tableUp.modules).toEqual({});
+    });
+
+    it('should handle direct contenteditable attribute changes', async () => {
+      const quill = createQuillWithTableModule(`<p><br></p>`, {
+        modules: [{ module: TableSelection }],
+      });
+
+      const tableUp = quill.getModule(TableUp.moduleName) as TableUp;
+
+      // Directly set contenteditable attribute (instead of using enable method)
+      quill.root.setAttribute('contenteditable', 'false');
+      await vi.runAllTimersAsync();
+
+      expect(Object.keys(tableUp.modules).length).toEqual(0);
+    });
+  });
+});

package/src/__tests__/unit/utils.ts

@@ -187,8 +187,7 @@ export function createTableDeltaOps(row: number, col: number, colOptions?: ColOp
     );
   }
   for (const [i, _] of new Array(col).fill(0).entries()) {
-    const value: TableColDeltaValue = { tableId, colId: `${i + 1}`, width: 1 / col * 100 };
-    value.full = full;
+    const value: TableColDeltaValue = { tableId, colId: `${i + 1}`, width: 1 / col * 100, full };
     if (!full) {
       value.width = width;
     }

package/src/formats/container-format.ts

@@ -15,8 +15,8 @@ export class ContainerFormat extends Container {
   static requiredContainer: TypeParchment.BlotConstructor;
   static defaultChild?: TypeParchment.BlotConstructor;
 
-  static allowAttrs = new Set<string>([]);
-  static allowDataAttrs = new Set<string>([]);
+  static allowAttrs = new Set<string>();
+  static allowDataAttrs = new Set<string>();
   // handle the attribute change when use `setFormatValue`
   static allowDataAttrsChangeHandler: Record<string, string> = {};
 

package/src/formats/table-body-format.ts

@@ -40,7 +40,7 @@ export class TableBodyFormat extends ContainerFormat {
   convertBody(tag: TableBodyTag) {
     const blots = this.descendants(TableCellInnerFormat);
     for (const blot of blots) {
-      (blot as any).wrapTag = tag;
+      blot.wrapTag = tag;
     }
   }
 

package/src/formats/table-caption-format.ts

@@ -31,7 +31,7 @@ export class TableCaptionFormat extends BlockOverride {
   static formats(domNode: HTMLElement) {
     const { tableId } = domNode.dataset;
     const value: TableCaptionValue = {
-      tableId: String(tableId),
+      tableId: tableId!,
       side: domNode.style.captionSide === 'bottom' ? 'bottom' : 'top',
     };
     return value;

package/src/formats/table-cell-format.ts

@@ -87,7 +87,7 @@ export class TableCellFormat extends ContainerFormat {
 
   isChildHeadTableCellInner() {
     const headChild = this.children.head;
-    return headChild && headChild.statics.blotName === blotName.tableCellInner;
+    return headChild?.statics.blotName === blotName.tableCellInner;
   }
 
   setFormatValue(name: string, value?: any) {
@@ -122,7 +122,7 @@ export class TableCellFormat extends ContainerFormat {
       (headChild.domNode as HTMLElement).dataset.style = this.domNode.style.cssText;
     }
 
-    if (this.parent && this.parent.statics.blotName === blotName.tableRow) {
+    if (this.parent?.statics.blotName === blotName.tableRow) {
       (this.parent as TableRowFormat).setFormatValue(name, value);
     }
   }

package/src/formats/table-cell-inner-format.ts

@@ -105,7 +105,7 @@ export class TableCellInnerFormat extends ContainerFormat {
     else {
       super.setFormatValue(name, value);
     }
-    if (this.parent && this.parent.statics.blotName === blotName.tableCell) {
+    if (this.parent?.statics.blotName === blotName.tableCell) {
       this.parent.setFormatValue(name, value);
     }
 

package/src/formats/table-row-format.ts

@@ -64,7 +64,7 @@ export class TableRowFormat extends ContainerFormat {
       }
     }
     // Not found in current row. Means cell is rowspan. Find in prev or next row.
-    if (this[direction] && this[direction]!.statics.blotName === blotName.tableRow) {
+    if (this[direction]?.statics.blotName === blotName.tableRow) {
       return (this[direction] as TableRowFormat).getCellByColId(colId, direction);
     }
     return null;

package/src/modules/table-align.ts

@@ -117,6 +117,7 @@ export class TableAlign extends TableDomSelector {
   }
 
   destroy() {
+    super.destroy();
     this.hide();
     if (this.resizeObserver) {
       this.resizeObserver.disconnect();

package/src/modules/table-clipboard/paste-cell-into-cell.ts

@@ -17,8 +17,8 @@ interface CellUpdate {
   length: number;
   insertDelta: TypeDelta;
   cell: TableCellInnerFormat;
-  rowspan?: number;
-  colspan?: number;
+  rowspan: number;
+  colspan: number;
   emptyRow?: string[];
 }
 interface TableCellValueLike {

package/src/modules/table-dom-selector.ts

@@ -1,17 +1,26 @@
 import type Quill from 'quill';
 import type { TableUp } from '../table-up';
 
-export class TableDomSelector {
+export interface TableModuleLifecycle {
+  hide: () => void;
+  show: () => void;
+  update: () => void;
+  destroy: () => void;
+}
+
+export class TableDomSelector implements TableModuleLifecycle {
   table?: HTMLTableElement;
+  tableSelectMouseDownHandler: (event: MouseEvent) => void;
 
   constructor(public tableModule: TableUp, public quill: Quill) {
-    this.quill.root.addEventListener('mousedown', this.tableSelectHandler.bind(this));
+    this.tableSelectMouseDownHandler = this.tableSelectHandler.bind(this);
+    this.quill.root.addEventListener('mousedown', this.tableSelectMouseDownHandler);
   }
 
   tableSelectHandler(event: MouseEvent) {
     const path = event.composedPath() as HTMLElement[];
     if (event.button !== 0 || !path || path.length <= 0) return;
-    const tableNode = path.find(node => node.tagName && node.tagName.toUpperCase() === 'TABLE');
+    const tableNode = path.find(node => node.tagName?.toUpperCase() === 'TABLE');
     this.setSelectionTable(tableNode as HTMLTableElement);
   }
 
@@ -30,4 +39,10 @@ export class TableDomSelector {
   show() {}
 
   update() {}
+
+  destroy() {
+    this.quill.root.removeEventListener('mousedown', this.tableSelectMouseDownHandler);
+    this.hide();
+    this.table = undefined;
+  }
 }

package/src/modules/table-menu/table-menu-common.ts

@@ -318,6 +318,7 @@ export class TableMenuCommon extends TableDomSelector {
   }
 
   destroy() {
+    super.destroy();
     this.quill.off(Quill.events.TEXT_CHANGE, this.updateWhenTextChange);
     this.quill.off(tableUpEvent.TABLE_SELECTION_DRAG_START, this.hideWhenSelectionDragStart);
     this.activeTooltip = null;

package/src/modules/table-menu/table-menu-contextmenu.ts

@@ -27,15 +27,14 @@ export class TableMenuContextmenu extends TableMenuCommon {
   };
 
   listenContextmenu = (e: MouseEvent) => {
-    e.preventDefault();
-
     const path = e.composedPath() as HTMLElement[];
     if (!path || path.length <= 0) return;
 
-    const tableNode = path.find(node => node.tagName && node.tagName.toUpperCase() === 'TABLE' && node.classList.contains('ql-table'));
+    const tableNode = path.find(node => node.tagName?.toUpperCase() === 'TABLE' && node.classList.contains('ql-table'));
 
     const tableSelection = this.tableModule.getModule<TableSelection>(tableUpInternal.tableSelectionName);
     if (tableNode && tableSelection?.selectedTds?.length) {
+      e.preventDefault();
       if (!this.menu) {
         this.menu = this.buildTools();
       }

package/src/modules/table-menu/table-menu-select.ts

@@ -44,7 +44,7 @@ export class TableMenuSelect extends TableMenuCommon {
 
   buildTools(): HTMLElement {
     const menu = super.buildTools();
-    this.tableModule.addContainer(menu);
+    this.quill.container.appendChild(menu);
     return menu;
   }
 
@@ -87,10 +87,12 @@ export class TableMenuSelect extends TableMenuCommon {
     }
   }
 
-  destroy(): void {
+  destroy() {
     super.destroy();
 
     this.quill.off(tableUpEvent.TABLE_SELECTION_DRAG_START, this.tableSelectionDragStart);
     this.quill.off(tableUpEvent.TABLE_SELECTION_DRAG_END, this.tableSelectionDragEnd);
+    this.quill.off(tableUpEvent.TABLE_SELECTION_CHANGE, this.tableSelectioChange);
+    this.quill.off(tableUpEvent.TABLE_SELECTION_DISPLAY_CHANGE, this.tableSelectionDisplayChange);
   }
 }

package/src/modules/table-resize/table-resize-box.ts

@@ -703,6 +703,7 @@ export class TableResizeBox extends TableResizeCommon {
   }
 
   destroy() {
+    super.destroy();
     this.hide();
     clearScrollEvent.call(this);
     this.quill.off(Quill.events.EDITOR_CHANGE, this.updateWhenTextChange);

package/src/modules/table-resize/table-resize-line.ts

@@ -137,6 +137,12 @@ export class TableResizeLine extends TableResizeCommon {
       },
       onEnd: ({ position }) => {
         this.dragging = false;
+        // update the resizer position to the final position
+        if (this.colResizer) {
+          const resultX = this.dragXCommon.limitRange(this.tableBlot, position.x, true);
+          const rootRect = this.quill.root.getBoundingClientRect();
+          this.colResizer.style.left = `${resultX - rootRect.x}px`;
+        }
 
         this.updateTableCol(position.x);
         this.removeBreak();
@@ -198,6 +204,12 @@ export class TableResizeLine extends TableResizeCommon {
       },
       onEnd: ({ position }) => {
         this.dragging = false;
+        // update the resizer position to the final position
+        if (this.rowResizer) {
+          const resultY = this.dragYCommon.limitRange(this.tableBlot, position.y, true);
+          const rootRect = this.quill.root.getBoundingClientRect();
+          this.rowResizer.style.left = `${resultY - rootRect.y}px`;
+        }
 
         this.updateTableRow(position.y);
         this.removeBreak();
@@ -230,7 +242,8 @@ export class TableResizeLine extends TableResizeCommon {
     this.table.removeEventListener('pointermove', this.pointermoveHandler);
   }
 
-  destroy(): void {
+  destroy() {
+    super.destroy();
     if (this.colResizer) {
       this.colResizer.remove();
       this.colResizer = undefined;

package/src/modules/table-resize/table-resize-scale.ts

@@ -3,7 +3,7 @@ import type { TableUp } from '../../table-up';
 import type { TableResizeScaleOptions } from '../../utils';
 import Quill from 'quill';
 import { getTableMainRect } from '../../formats';
-import { addScrollEvent, clearScrollEvent, createBEM, tableUpSize } from '../../utils';
+import { addScrollEvent, clearScrollEvent, createBEM, dragElement, tableUpSize } from '../../utils';
 import { TableDomSelector } from '../table-dom-selector';
 import { isTableAlignRight } from './utils';
 
@@ -14,9 +14,6 @@ export class TableResizeScale extends TableDomSelector {
   tableMainBlot?: TableMainFormat;
   tableWrapperBlot?: TableWrapperFormat;
   bem = createBEM('scale');
-  startX: number = 0;
-  startY: number = 0;
-  offset: number = 6;
   options: TableResizeScaleOptions;
   root?: HTMLElement;
   block?: HTMLElement;
@@ -42,6 +39,7 @@ export class TableResizeScale extends TableDomSelector {
   resolveOptions(options: Partial<TableResizeScaleOptions>) {
     return Object.assign({
       blockSize: 12,
+      offset: 6,
     }, options);
   }
 
@@ -58,57 +56,38 @@ export class TableResizeScale extends TableDomSelector {
 
     let originColWidth: { blot: TableColFormat; width: number }[] = [];
     let originRowHeight: { blot: TableRowFormat; height: number }[] = [];
-    const handleMouseMove = (e: MouseEvent) => {
-      if (!this.tableMainBlot) return;
-      // divide equally by col count/row count
-      const isRight = isTableAlignRight(this.tableMainBlot) ? -1 : 1;
-      const diffX = (e.clientX - this.startX) * isRight;
-      const diffY = e.clientY - this.startY;
-      const itemWidth = Math.floor(diffX / originColWidth.length);
-      const itemHeight = Math.floor(diffY / originRowHeight.length);
 
-      for (const { blot, width } of originColWidth) {
-        blot.width = Math.max(width + itemWidth, tableUpSize.colMinWidthPx);
-      }
-      for (const { blot, height } of originRowHeight) {
-        blot.setHeight(`${Math.max(height + itemHeight, tableUpSize.rowMinHeightPx)}px`);
-      }
-    };
-    const handleMouseUp = () => {
-      originColWidth = [];
-      originRowHeight = [];
-      document.removeEventListener('mousemove', handleMouseMove);
-      document.removeEventListener('mouseup', handleMouseUp);
-    };
-    this.block.addEventListener('mousedown', (e) => {
-      if (!this.tableMainBlot || this.isTableOutofEditor()) return;
-      this.startX = e.clientX;
-      this.startY = e.clientY;
-      // save the origin width and height to calculate result width and height
-      originColWidth = this.tableMainBlot.getCols().map(col => ({ blot: col, width: Math.floor(col.width) }));
-      originRowHeight = this.tableMainBlot.getRows().map(row => ({ blot: row, height: Math.floor(row.domNode.getBoundingClientRect().height) }));
-      document.addEventListener('mousemove', handleMouseMove);
-      document.addEventListener('mouseup', handleMouseUp);
+    dragElement(this.block, {
+      onStart: () => {
+        if (!this.tableMainBlot) return;
+        // save the origin width and height to calculate result width and height
+        originColWidth = this.tableMainBlot.getCols().map(col => ({ blot: col, width: Math.floor(col.width) }));
+        originRowHeight = this.tableMainBlot.getRows().map(row => ({ blot: row, height: Math.floor(row.domNode.getBoundingClientRect().height) }));
+      },
+      onMove: ({ movePosition }) => {
+        if (!this.tableMainBlot) return;
+        // divide equally by col count/row count
+        const isRight = isTableAlignRight(this.tableMainBlot) ? -1 : 1;
+        const diffX = movePosition.x * isRight;
+        const diffY = movePosition.y;
+        const itemWidth = Math.floor(diffX / originColWidth.length);
+        const itemHeight = Math.floor(diffY / originRowHeight.length);
+
+        for (const { blot, width } of originColWidth) {
+          blot.width = Math.max(width + itemWidth, tableUpSize.colMinWidthPx);
+        }
+        for (const { blot, height } of originRowHeight) {
+          blot.setHeight(`${Math.max(height + itemHeight, tableUpSize.rowMinHeightPx)}px`);
+        }
+      },
+      onEnd: () => {
+        originColWidth = [];
+        originRowHeight = [];
+      },
     });
     this.block.addEventListener('dragstart', e => e.preventDefault());
   }
 
-  isTableOutofEditor(): boolean {
-    if (!this.tableMainBlot || !this.tableWrapperBlot || this.tableMainBlot.full) return false;
-    // if tableMain width larger than tableWrapper. reset tableMain width equal editor width
-    const tableRect = this.tableMainBlot.domNode.getBoundingClientRect();
-    const tableWrapperRect = this.tableWrapperBlot.domNode.getBoundingClientRect();
-    // equal scale
-    if (tableRect.width > tableWrapperRect.width) {
-      for (const col of this.tableMainBlot.getCols()) {
-        col.width = Math.floor((col.width / tableRect.width) * tableWrapperRect.width);
-      }
-      this.tableMainBlot.colWidthFillTable();
-      return true;
-    }
-    return false;
-  }
-
   update() {
     if (!this.block || !this.root || !this.tableMainBlot || !this.tableWrapperBlot) return;
     if (this.tableMainBlot.full) {
@@ -120,7 +99,7 @@ export class TableResizeScale extends TableDomSelector {
     const tableWrapperRect = this.tableWrapperBlot.domNode.getBoundingClientRect();
     const editorRect = this.quill.root.getBoundingClientRect();
     const { scrollTop, scrollLeft } = this.tableWrapperBlot.domNode;
-    const blockSize = this.options.blockSize * 2 + this.offset;
+    const blockSize = this.options.blockSize * 2 + this.options.offset;
     const rootWidth = Math.min(tableRect.width, tableWrapperRect.width) + blockSize;
     const rootHeight = Math.min(tableRect.height, tableWrapperRect.height) + blockSize;
     Object.assign(this.root.style, {
@@ -151,6 +130,7 @@ export class TableResizeScale extends TableDomSelector {
 
       this.resizeobserver.observe(this.tableMainBlot.domNode);
       addScrollEvent.call(this, this.quill.root, () => this.update());
+      addScrollEvent.call(this, this.tableWrapperBlot.domNode, () => this.update());
     }
     this.buildResizer();
   }
@@ -163,12 +143,13 @@ export class TableResizeScale extends TableDomSelector {
       this.root = undefined;
       this.block = undefined;
     }
+    clearScrollEvent.call(this);
   }
 
   destroy() {
+    super.destroy();
     this.hide();
-    this.quill.off(Quill.events.TEXT_CHANGE, this.updateWhenTextChange);
+    this.quill.off(Quill.events.EDITOR_CHANGE, this.updateWhenTextChange);
     this.resizeobserver.disconnect();
-    clearScrollEvent.call(this);
   }
 }