quill-table-up 2.4.2 → 3.0.0

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

@@ -28,7 +28,7 @@ export const tableMenuTools: Record<string, Tool> = {
     name: 'CopyCell',
     tip: 'Copy cell',
     icon: Copy,
-    handle: (tableModule, selectedTds) => {
+    handle(tableModule, selectedTds) {
       const text = tableModule.getTextByCell(selectedTds);
       const html = tableModule.getHTMLByCell(selectedTds);
 
@@ -37,14 +37,13 @@ export const tableMenuTools: Record<string, Tool> = {
         'text/html': new Blob([html], { type: 'text/html' }),
       });
       navigator.clipboard.write([clipboardItem]);
-      tableModule.hideTableTools();
     },
   },
   CutCell: {
     name: 'CutCell',
     tip: 'Cut cell',
     icon: Cut,
-    handle: (tableModule, selectedTds) => {
+    handle(tableModule, selectedTds) {
       const text = tableModule.getTextByCell(selectedTds);
       const html = tableModule.getHTMLByCell(selectedTds, true);
 
@@ -53,86 +52,77 @@ export const tableMenuTools: Record<string, Tool> = {
         'text/html': new Blob([html], { type: 'text/html' }),
       });
       navigator.clipboard.write([clipboardItem]);
-      tableModule.hideTableTools();
     },
   },
   InsertTop: {
     name: 'InsertTop',
     icon: InsertTop,
     tip: 'Insert row above',
-    handle: (tableModule, selectedTds) => {
+    handle(tableModule, selectedTds) {
       tableModule.appendRow(selectedTds, false);
-      tableModule.hideTableTools();
     },
   },
   InsertRight: {
     name: 'InsertRight',
     icon: InsertRight,
     tip: 'Insert column right',
-    handle: (tableModule, selectedTds) => {
+    handle(tableModule, selectedTds) {
       tableModule.appendCol(selectedTds, true);
-      tableModule.hideTableTools();
     },
   },
   InsertBottom: {
     name: 'InsertBottom',
     icon: InsertBottom,
     tip: 'Insert row below',
-    handle: (tableModule, selectedTds) => {
+    handle(tableModule, selectedTds) {
       tableModule.appendRow(selectedTds, true);
-      tableModule.hideTableTools();
     },
   },
   InsertLeft: {
     name: 'InsertLeft',
     icon: InsertLeft,
     tip: 'Insert column Left',
-    handle: (tableModule, selectedTds) => {
+    handle(tableModule, selectedTds) {
       tableModule.appendCol(selectedTds, false);
-      tableModule.hideTableTools();
     },
   },
   MergeCell: {
     name: 'MergeCell',
     icon: MergeCell,
     tip: 'Merge Cell',
-    handle: (tableModule, selectedTds) => {
+    handle(tableModule, selectedTds) {
       tableModule.mergeCells(selectedTds);
-      tableModule.hideTableTools();
     },
   },
   SplitCell: {
     name: 'SplitCell',
     icon: SplitCell,
     tip: 'Split Cell',
-    handle: (tableModule, selectedTds) => {
+    handle(tableModule, selectedTds) {
       tableModule.splitCell(selectedTds);
-      tableModule.hideTableTools();
     },
   },
   DeleteRow: {
     name: 'DeleteRow',
     icon: RemoveRow,
     tip: 'Delete Row',
-    handle: (tableModule, selectedTds) => {
+    handle(tableModule, selectedTds) {
       tableModule.removeRow(selectedTds);
-      tableModule.hideTableTools();
     },
   },
   DeleteColumn: {
     name: 'DeleteColumn',
     icon: RemoveColumn,
     tip: 'Delete Column',
-    handle: (tableModule, selectedTds) => {
+    handle(tableModule, selectedTds) {
       tableModule.removeCol(selectedTds);
-      tableModule.hideTableTools();
     },
   },
   DeleteTable: {
     name: 'DeleteTable',
     icon: RemoveTable,
     tip: 'Delete table',
-    handle: (tableModule, selectedTds) => {
+    handle(tableModule, selectedTds) {
       tableModule.deleteTable(selectedTds);
     },
   },
@@ -142,7 +132,7 @@ export const tableMenuTools: Record<string, Tool> = {
     isColorChoose: true,
     tip: 'Set background color',
     key: 'background-color',
-    handle: (tableModule, selectedTds, color) => {
+    handle(tableModule, selectedTds, color) {
       tableModule.setCellAttrs(selectedTds, 'background-color', color, true);
     },
   },
@@ -152,7 +142,7 @@ export const tableMenuTools: Record<string, Tool> = {
     isColorChoose: true,
     tip: 'Set border color',
     key: 'border-color',
-    handle: (tableModule, selectedTds, color) => {
+    handle(tableModule, selectedTds, color) {
       tableModule.setCellAttrs(selectedTds, 'border-color', color, true);
     },
   },
@@ -160,9 +150,9 @@ export const tableMenuTools: Record<string, Tool> = {
     name: 'SwitchWidth',
     icon: AutoFull,
     tip: 'Switch table width',
-    handle: (tableModule) => {
-      if (!tableModule.table) return;
-      const tableMainBlot = Quill.find(tableModule.table) as TableMainFormat;
+    handle() {
+      if (!this.table) return;
+      const tableMainBlot = Quill.find(this.table) as TableMainFormat;
       if (!tableMainBlot) return;
 
       if (tableMainBlot.full) {
@@ -177,12 +167,12 @@ export const tableMenuTools: Record<string, Tool> = {
     name: 'InsertCaption',
     icon: TableHead,
     tip: 'Insert table caption',
-    handle: (tableModule) => {
-      if (!tableModule.table) return;
-      const tableMainBlot = Quill.find(tableModule.table) as TableMainFormat;
+    handle() {
+      if (!this.table) return;
+      const tableMainBlot = Quill.find(this.table) as TableMainFormat;
       if (!tableMainBlot) return;
 
-      const tableCaption = tableModule.quill.scroll.create('text', 'Table Caption').wrap(blotName.tableCaption, {
+      const tableCaption = this.quill.scroll.create('text', 'Table Caption').wrap(blotName.tableCaption, {
         tableId: tableMainBlot.tableId,
       });
       tableMainBlot.insertBefore(tableCaption, tableMainBlot.children.head);
@@ -192,7 +182,7 @@ export const tableMenuTools: Record<string, Tool> = {
     name: 'ToggleTdBetweenTh',
     icon: ConvertCell,
     tip: 'Toggle td between th',
-    handle: (tableModule, selectedTds) => {
+    handle(tableModule, selectedTds) {
       for (const td of selectedTds) {
         td.convertTableCell();
       }

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

@@ -1,20 +1,23 @@
 import type { TableUp } from '../../table-up';
 import type { TableMenuOptions, ToolOption, TooltipInstance, ToolTipOptions } from '../../utils';
+import type { TableSelection } from '../table-selection';
 import Quill from 'quill';
-import { createBEM, createColorPicker, createTooltip, debounce, defaultColorMap, isArray, isFunction, randomId } from '../../utils';
+import { createBEM, createColorPicker, createTooltip, debounce, defaultColorMap, isArray, isFunction, randomId, tableUpEvent } from '../../utils';
+import { TableDomSelector } from '../table-dom-selector';
 import { colorClassName, maxSaveColorCount, menuColorSelectClassName, tableMenuTools } from './constants';
 
 export type TableMenuOptionsInput = Partial<Omit<TableMenuOptions, 'texts'>>;
 export interface MenuTooltipInstance extends TooltipInstance {
   isColorPick?: boolean;
 }
-export class TableMenuCommon {
+export class TableMenuCommon extends TableDomSelector {
+  static moduleName = 'table-menu';
+
   usedColors = new Set<string>();
   options: TableMenuOptions;
   menu: HTMLElement | null = null;
   isMenuDisplay: boolean = false;
   isColorPicking: boolean = false;
-  updateUsedColor: (this: any, color?: string) => void;
   tooltipItem: MenuTooltipInstance[] = [];
   activeTooltip: MenuTooltipInstance | null = null;
   bem = createBEM('menu');
@@ -24,8 +27,9 @@ export class TableMenuCommon {
   };
 
   constructor(public tableModule: TableUp, public quill: Quill, options: TableMenuOptionsInput) {
-    this.options = this.resolveOptions(options);
+    super(tableModule, quill);
 
+    this.options = this.resolveOptions(options);
     try {
       const storageValue = localStorage.getItem(this.options.localstorageKey) || '[]';
       let colorValue = JSON.parse(storageValue);
@@ -36,38 +40,44 @@ export class TableMenuCommon {
     }
     catch {}
 
-    this.updateUsedColor = debounce((color?: string) => {
-      if (!color) return;
-      this.usedColors.add(color);
-      if (this.usedColors.size > maxSaveColorCount) {
-        const saveColors = Array.from(this.usedColors).slice(-1 * maxSaveColorCount);
-        this.usedColors.clear();
-        saveColors.map(v => this.usedColors.add(v));
-      }
+    this.quill.on(Quill.events.EDITOR_CHANGE, this.updateWhenTextChange);
+    this.quill.on(tableUpEvent.TABLE_SELECTION_DRAG_START, this.hideWhenSelectionDragStart);
+  }
 
-      localStorage.setItem(this.options.localstorageKey, JSON.stringify(Array.from(this.usedColors)));
-      const usedColorWrappers = Array.from(document.querySelectorAll(`.${this.colorItemClass}.${colorClassName.used}`));
-      for (const usedColorWrapper of usedColorWrappers) {
-        const newColorItem = document.createElement('div');
-        newColorItem.classList.add(colorClassName.item);
-        newColorItem.style.backgroundColor = String(color);
-        // if already have same color item. doesn't need insert
-        const sameColorItem = Array.from(usedColorWrapper.querySelectorAll(`.${colorClassName.item}[style*="background-color: ${newColorItem.style.backgroundColor}"]`));
-        if (sameColorItem.length <= 0) {
-          usedColorWrapper.appendChild(newColorItem);
-        }
+  updateUsedColor = debounce((color?: string) => {
+    if (!color) return;
+    this.usedColors.add(color);
+    if (this.usedColors.size > maxSaveColorCount) {
+      const saveColors = Array.from(this.usedColors).slice(-1 * maxSaveColorCount);
+      this.usedColors.clear();
+      saveColors.map(v => this.usedColors.add(v));
+    }
 
-        const colorItem = Array.from(usedColorWrapper.querySelectorAll(`.${colorClassName.item}`)).slice(0, -1 * maxSaveColorCount);
-        for (const item of colorItem) {
-          item.remove();
-        }
+    localStorage.setItem(this.options.localstorageKey, JSON.stringify(Array.from(this.usedColors)));
+    const usedColorWrappers = Array.from(document.querySelectorAll(`.${this.colorItemClass}.${colorClassName.used}`));
+    for (const usedColorWrapper of usedColorWrappers) {
+      const newColorItem = document.createElement('div');
+      newColorItem.classList.add(colorClassName.item);
+      newColorItem.style.backgroundColor = String(color);
+      // if already have same color item. doesn't need insert
+      const sameColorItem = Array.from(usedColorWrapper.querySelectorAll(`.${colorClassName.item}[style*="background-color: ${newColorItem.style.backgroundColor}"]`));
+      if (sameColorItem.length <= 0) {
+        usedColorWrapper.appendChild(newColorItem);
       }
-    }, 1000);
-    this.quill.on(Quill.events.TEXT_CHANGE, this.updateWhenTextChange);
-  }
 
-  updateWhenTextChange = () => {
-    if (this.isMenuDisplay) {
+      const colorItem = Array.from(usedColorWrapper.querySelectorAll(`.${colorClassName.item}`)).slice(0, -1 * maxSaveColorCount);
+      for (const item of colorItem) {
+        item.remove();
+      }
+    }
+  }, 1000);
+
+  hideWhenSelectionDragStart = () => {
+    this.hide();
+  };
+
+  updateWhenTextChange = (eventName: string) => {
+    if (eventName === Quill.events.TEXT_CHANGE && this.isMenuDisplay) {
       this.update();
     }
   };
@@ -128,7 +138,7 @@ export class TableMenuCommon {
         else {
           isFunction(handle) && item.addEventListener('click', (e) => {
             this.quill.focus();
-            handle(this.tableModule, this.getSelectedTds(), e);
+            handle.call(this, this.tableModule, this.getSelectedTds(), e);
           }, false);
         }
 
@@ -173,20 +183,20 @@ export class TableMenuCommon {
     transparentColor.classList.add(colorClassName.btn, 'transparent');
     transparentColor.textContent = this.tableModule.options.texts.transparent;
     transparentColor.addEventListener('click', () => {
-      handle(this.tableModule, this.getSelectedTds(), 'transparent');
+      handle.call(this, this.tableModule, this.getSelectedTds(), 'transparent');
     });
     const clearColor = document.createElement('div');
     clearColor.classList.add(colorClassName.btn, 'clear');
     clearColor.textContent = this.tableModule.options.texts.clear;
     clearColor.addEventListener('click', () => {
-      handle(this.tableModule, this.getSelectedTds(), null);
+      handle.call(this, this.tableModule, this.getSelectedTds(), null);
     });
     const customColor = document.createElement('div');
     customColor.classList.add(colorClassName.btn, 'custom');
     customColor.textContent = this.tableModule.options.texts.custom;
     const colorPicker = createColorPicker({
       onChange: (color) => {
-        handle(this.tableModule, this.getSelectedTds(), color);
+        handle.call(this, this.tableModule, this.getSelectedTds(), color);
         this.updateUsedColor(color);
       },
     });
@@ -230,16 +240,18 @@ export class TableMenuCommon {
       type: 'click',
       content: colorSelectWrapper,
       onOpen: () => {
-        if (this.isMenuDisplay && this.tableModule.tableSelection) {
-          this.tableModule.tableSelection.hideDisplay();
+        const tableSelection = this.tableModule.getModule<TableSelection>('table-selection');
+        if (this.isMenuDisplay && tableSelection) {
+          tableSelection.hideDisplay();
         }
         this.setActiveTooltip(tooltip);
         return false;
       },
       onClose: () => {
-        if (this.isMenuDisplay && this.tableModule.tableSelection) {
-          this.tableModule.tableSelection.updateWithSelectedTds();
-          this.tableModule.tableSelection.showDisplay();
+        const tableSelection = this.tableModule.getModule<TableSelection>('table-selection');
+        if (this.isMenuDisplay && tableSelection) {
+          tableSelection.updateWithSelectedTds();
+          tableSelection.showDisplay();
         }
         const isChild = colorSelectWrapper.contains(colorPicker);
         if (isChild) {
@@ -270,7 +282,8 @@ export class TableMenuCommon {
   }
 
   getSelectedTds() {
-    return this.tableModule.tableSelection?.selectedTds || [];
+    const tableSelection = this.tableModule.getModule<TableSelection>('table-selection');
+    return tableSelection?.selectedTds || [];
   }
 
   createTipText(item: HTMLElement, text: string) {
@@ -279,17 +292,24 @@ export class TableMenuCommon {
   }
 
   show() {
-    if (!this.menu || !this.tableModule.tableSelection || !this.tableModule.tableSelection.boundary) return;
-    Object.assign(this.menu.style, { display: 'flex' });
-    this.isMenuDisplay = true;
-    this.update();
+    if (!this.table) return;
+    if (this.menu) {
+      this.hide();
+    }
+    this.menu = this.buildTools();
   }
 
   update() {
+    if (this.table && !this.quill.root.contains(this.table)) {
+      this.setSelectionTable(undefined);
+    }
   }
 
   hide() {
-    this.menu && Object.assign(this.menu.style, { display: 'none' });
+    if (this.menu) {
+      this.menu.remove();
+      this.menu = null;
+    }
     for (const tooltip of this.tooltipItem) {
       tooltip.hide(true);
     }
@@ -298,11 +318,12 @@ export class TableMenuCommon {
 
   destroy() {
     this.quill.off(Quill.events.TEXT_CHANGE, this.updateWhenTextChange);
+    this.quill.off(tableUpEvent.TABLE_SELECTION_DRAG_START, this.hideWhenSelectionDragStart);
     this.activeTooltip = null;
-    for (const tooltip of this.tooltipItem) tooltip.destroy();
-    if (!this.menu) return;
+    for (const tooltip of this.tooltipItem) {
+      tooltip.destroy();
+    }
+    this.tooltipItem = [];
     this.hide();
-    this.menu.remove();
-    this.menu = null;
   }
 }

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

@@ -1,7 +1,8 @@
 import type Quill from 'quill';
 import type { TableUp } from '../../table-up';
-import type { TableMenuOptions, ToolTipOptions } from '../../utils';
-import { limitDomInViewPort } from '../../utils';
+import type { InternalTableSelectionModule, TableMenuOptions, ToolTipOptions } from '../../utils';
+import type { TableSelection } from '../table-selection';
+import { limitDomInViewPort, tableUpEvent } from '../../utils';
 import { menuColorSelectClassName } from './constants';
 import { TableMenuCommon } from './table-menu-common';
 
@@ -15,8 +16,16 @@ export class TableMenuContextmenu extends TableMenuCommon {
     super(tableModule, quill, options);
 
     this.quill.root.addEventListener('contextmenu', this.listenContextmenu);
+    this.quill.on(tableUpEvent.TABLE_SELECTION_CHANGE, this.tableSelectioChange);
+    this.quill.on(tableUpEvent.TABLE_SELECTION_DISPLAY_CHANGE, this.tableSelectioChange);
   }
 
+  tableSelectioChange = (tableSelection: InternalTableSelectionModule) => {
+    if (tableSelection.selectedTds.length <= 0) {
+      this.hide();
+    }
+  };
+
   listenContextmenu = (e: MouseEvent) => {
     e.preventDefault();
 
@@ -25,7 +34,8 @@ export class TableMenuContextmenu extends TableMenuCommon {
 
     const tableNode = path.find(node => node.tagName && node.tagName.toUpperCase() === 'TABLE' && node.classList.contains('ql-table'));
 
-    if (tableNode && this.tableModule.tableSelection?.selectedTds?.length) {
+    const tableSelection = this.tableModule.getModule<TableSelection>('table-selection');
+    if (tableNode && tableSelection?.selectedTds?.length) {
       if (!this.menu) {
         this.menu = this.buildTools();
       }
@@ -64,12 +74,16 @@ export class TableMenuContextmenu extends TableMenuCommon {
   show() {}
 
   update(position?: { x: number; y: number }) {
-    if (!this.isMenuDisplay || !this.menu || !this.tableModule.tableSelection || !this.tableModule.tableSelection.isDisplaySelection) return;
-    if (!position) {
+    super.update();
+    const tableSelection = this.tableModule.getModule<TableSelection>('table-selection');
+    if (!this.table || !this.isMenuDisplay || !this.menu) {
+      this.hide();
+      return;
+    }
+    if (!position || !tableSelection?.isDisplaySelection) {
       return;
     }
 
-    super.update();
     const style: Record<string, any> = {
       display: 'flex',
       left: 0,
@@ -98,5 +112,7 @@ export class TableMenuContextmenu extends TableMenuCommon {
   destroy() {
     this.quill.root.removeEventListener('contextmenu', this.listenContextmenu);
     super.destroy();
+    this.quill.off(tableUpEvent.TABLE_SELECTION_CHANGE, this.tableSelectioChange);
+    this.quill.off(tableUpEvent.TABLE_SELECTION_DISPLAY_CHANGE, this.tableSelectioChange);
   }
 }

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

@@ -1,31 +1,94 @@
 import type Quill from 'quill';
+import type { TableCellInnerFormat } from '../../formats';
 import type { TableUp } from '../../table-up';
+import type { InternalTableSelectionModule } from '../../utils';
+import type { TableSelection } from '../table-selection';
 import type { TableMenuOptionsInput } from './table-menu-common';
 import { computePosition, flip, limitShift, offset, shift } from '@floating-ui/dom';
+import { tableUpEvent } from '../../utils';
 import { TableMenuCommon } from './table-menu-common';
 
 export class TableMenuSelect extends TableMenuCommon {
   constructor(public tableModule: TableUp, public quill: Quill, options: TableMenuOptionsInput) {
     super(tableModule, quill, options);
 
-    this.menu = this.buildTools();
-    this.tableModule.addContainer(this.menu);
-    this.show();
+    this.quill.on(tableUpEvent.TABLE_SELECTION_DRAG_START, this.tableSelectionDragStart);
+    this.quill.on(tableUpEvent.TABLE_SELECTION_DRAG_END, this.tableSelectionDragEnd);
+    this.quill.on(tableUpEvent.TABLE_SELECTION_CHANGE, this.tableSelectioChange);
+    this.quill.on(tableUpEvent.TABLE_SELECTION_DISPLAY_CHANGE, this.tableSelectionDisplayChange);
+  }
+
+  tableSelectionDragStart = () => {
+    this.hide();
+  };
+
+  tableSelectionDragEnd = (tableSelection: InternalTableSelectionModule) => {
+    if (tableSelection.selectedTds.length > 0) {
+      this.show();
+    }
+  };
+
+  tableSelectioChange = (tableSelection: InternalTableSelectionModule, selectedTds: TableCellInnerFormat[]) => {
+    if (selectedTds.length <= 0) {
+      this.hide();
+    }
+  };
+
+  tableSelectionDisplayChange = (tableSelection: InternalTableSelectionModule) => {
+    if (!tableSelection.dragging) {
+      this.update();
+    }
+  };
+
+  buildTools(): HTMLElement {
+    const menu = super.buildTools();
+    this.tableModule.addContainer(menu);
+    return menu;
+  }
+
+  show() {
+    super.show();
     this.update();
   }
 
   update() {
-    if (!this.isMenuDisplay || !this.menu || !this.tableModule.tableSelection || !this.tableModule.tableSelection.isDisplaySelection) return;
     super.update();
+    if (!this.menu && this.table) {
+      this.show();
+      return;
+    }
+    const selectedTds = this.getSelectedTds();
+    if (!this.menu || !this.table || selectedTds.length === 0) {
+      if (this.menu || !this.table) {
+        this.isMenuDisplay = false;
+        this.menu && this.menu.classList.add(this.bem.is('hidden'));
+        this.hide();
+      }
+      return;
+    }
+    this.isMenuDisplay = true;
+    this.menu.classList.remove(this.bem.is('hidden'));
 
-    computePosition(this.tableModule.tableSelection.cellSelect, this.menu, {
-      placement: 'bottom',
-      middleware: [flip(), shift({ limiter: limitShift() }), offset(20)],
-    }).then(({ x, y }) => {
-      Object.assign(this.menu!.style, {
-        left: `${x}px`,
-        top: `${y}px`,
+    const tableSelection = this.tableModule.getModule<TableSelection>('table-selection');
+    if (tableSelection?.isDisplaySelection) {
+      computePosition(tableSelection.cellSelect, this.menu, {
+        placement: 'bottom',
+        middleware: [flip(), shift({ limiter: limitShift() }), offset(20)],
+      }).then(({ x, y }) => {
+        if (this.menu) {
+          Object.assign(this.menu.style, {
+            left: `${x}px`,
+            top: `${y}px`,
+          });
+        }
       });
-    });
+    }
+  }
+
+  destroy(): void {
+    super.destroy();
+
+    this.quill.off(tableUpEvent.TABLE_SELECTION_DRAG_START, this.tableSelectionDragStart);
+    this.quill.off(tableUpEvent.TABLE_SELECTION_DRAG_END, this.tableSelectionDragEnd);
   }
 }