quill-table-up 2.4.2 → 3.0.0

package/src/modules/table-selection.ts

@@ -1,10 +1,11 @@
 import type { EmitterSource, Parchment as TypeParchment, Range as TypeRange } from 'quill';
 import type { TableMainFormat, TableWrapperFormat } from '../formats';
 import type { TableUp } from '../table-up';
-import type { InternalTableMenuModule, RelactiveRect, TableSelectionOptions } from '../utils';
+import type { RelactiveRect, TableSelectionOptions } from '../utils';
 import Quill from 'quill';
-import { getTableMainRect, TableBodyFormat, TableCellFormat, TableCellInnerFormat } from '../formats';
-import { addScrollEvent, blotName, clearScrollEvent, createBEM, createResizeObserver, findAllParentBlot, findParentBlot, getElementScroll, getRelativeRect, isRectanglesIntersect, tableUpEvent } from '../utils';
+import { getTableMainRect, TableCellFormat, TableCellInnerFormat } from '../formats';
+import { addScrollEvent, blotName, clearScrollEvent, createBEM, createResizeObserver, findAllParentBlot, findParentBlot, getElementScrollPosition, getRelativeRect, isRectanglesIntersect, tableUpEvent } from '../utils';
+import { TableDomSelector } from './table-dom-selector';
 
 const ERROR_LIMIT = 0;
 
@@ -15,7 +16,9 @@ export interface SelectionData {
   focusOffset: number;
 }
 
-export class TableSelection {
+export class TableSelection extends TableDomSelector {
+  static moduleName: string = 'table-selection';
+
   options: TableSelectionOptions;
   boundary: RelactiveRect | null = null;
   scrollRecordEls: HTMLElement[] = [];
@@ -27,11 +30,8 @@ export class TableSelection {
   selectedTds: TableCellInnerFormat[] = [];
   cellSelectWrap: HTMLElement;
   cellSelect: HTMLElement;
-  dragging: boolean = false;
   scrollHandler: [HTMLElement, (...args: any[]) => void][] = [];
-  tableMenu?: InternalTableMenuModule;
   resizeObserver: ResizeObserver;
-  table?: HTMLTableElement;
   isDisplaySelection = false;
   bem = createBEM('selection');
   lastSelection: SelectionData = {
@@ -41,31 +41,87 @@ export class TableSelection {
     focusOffset: 0,
   };
 
+  _dragging: boolean = false;
+  set dragging(val: boolean) {
+    if (this._dragging === val) return;
+    this._dragging = val;
+    this.quill.emitter.emit(val ? tableUpEvent.TABLE_SELECTION_DRAG_START : tableUpEvent.TABLE_SELECTION_DRAG_END, this);
+  }
+
+  get dragging() {
+    return this._dragging;
+  }
+
   constructor(public tableModule: TableUp, public quill: Quill, options: Partial<TableSelectionOptions> = {}) {
+    super(tableModule, quill);
     this.options = this.resolveOptions(options);
     this.scrollRecordEls = [this.quill.root, document.documentElement];
 
     this.cellSelectWrap = tableModule.addContainer(this.bem.b());
     this.cellSelect = this.helpLinesInitial();
 
-    this.resizeObserver = createResizeObserver(() => this.updateAfterEvent(), { ignoreFirstBind: true });
+    this.resizeObserver = createResizeObserver(this.updateAfterEvent, { ignoreFirstBind: true });
     this.resizeObserver.observe(this.quill.root);
 
-    this.quill.root.addEventListener('mousedown', this.mouseDownHandler, { passive: false });
-    document.addEventListener('selectionchange', this.selectionChangeHandler, { passive: false });
+    this.quill.emitter.listenDOM('selectionchange', document, this.selectionChangeHandler.bind(this));
     this.quill.on(tableUpEvent.AFTER_TABLE_RESIZE, this.updateAfterEvent);
     this.quill.on(Quill.events.SELECTION_CHANGE, this.quillSelectionChangeHandler);
-    this.quill.on(Quill.events.TEXT_CHANGE, this.updateAfterEvent);
-    if (this.options.tableMenu) {
-      this.tableMenu = new this.options.tableMenu(tableModule, quill, this.options.tableMenuOptions);
-    }
+    this.quill.on(Quill.events.EDITOR_CHANGE, this.updateWhenTextChange);
     this.hide();
   }
 
+  updateWhenTextChange = (eventName: string) => {
+    if (eventName === Quill.events.TEXT_CHANGE) {
+      if (this.table && !this.quill.root.contains(this.table)) {
+        this.setSelectionTable(undefined);
+      }
+      else {
+        this.updateAfterEvent();
+      }
+    }
+  };
+
   updateAfterEvent = () => {
+    // if cell already remove from the editor. need remove it
+    const existCells: TableCellInnerFormat[] = [];
+    for (let i = 0; i < this.selectedTds.length; i++) {
+      const td = this.selectedTds[i];
+      if (this.quill.root.contains(td.domNode)) {
+        existCells.push(td);
+      }
+    }
+    this.selectedTds = existCells;
     this.updateWithSelectedTds();
   };
 
+  removeCell = (e: KeyboardEvent) => {
+    const range = this.quill.getSelection();
+    const activeElement = document.activeElement;
+    if (range || (e.key !== 'Backspace' && e.key !== 'Delete') || !this.quill.root.contains(activeElement)) return;
+
+    if (this.table) {
+      const tableMain = Quill.find(this.table) as TableMainFormat;
+      const cells = tableMain.descendants(TableCellInnerFormat);
+      if (this.selectedTds.length === cells.length) {
+        tableMain.remove();
+        return;
+      }
+    }
+    for (const td of this.selectedTds) {
+      td.deleteAt(0, td.length() - 1);
+    }
+  };
+
+  setSelectedTds(tds: TableCellInnerFormat[]) {
+    const currentSelectedTds = new Set(this.selectedTds);
+    const isSame = this.selectedTds.length === tds.length && tds.every(td => currentSelectedTds.has(td));
+
+    this.selectedTds = tds;
+    if (!isSame) {
+      this.quill.emitter.emit(tableUpEvent.TABLE_SELECTION_CHANGE, this, this.selectedTds);
+    }
+  }
+
   getFirstTextNode(dom: HTMLElement | Node): Node {
     for (const node of Array.from(dom.childNodes)) {
       if (node.nodeType === Node.TEXT_NODE) {
@@ -103,7 +159,7 @@ export class TableSelection {
       if (isInCell && !containsLine) {
         try {
           const cellInner = findParentBlot(line!, blotName.tableCellInner) as TableCellInnerFormat;
-          this.selectedTds = [cellInner];
+          this.setSelectedTds([cellInner]);
           this.updateWithSelectedTds();
         }
         catch {
@@ -203,11 +259,10 @@ export class TableSelection {
   resolveOptions(options: Partial<TableSelectionOptions>): TableSelectionOptions {
     return Object.assign({
       selectColor: '#0589f340',
-      tableMenuOptions: {},
     } as TableSelectionOptions, options);
   }
 
-  selectionChangeHandler = () => {
+  selectionChangeHandler() {
     const selection = window.getSelection();
     if (!selection) return;
     const { anchorNode, focusNode, anchorOffset, focusOffset } = selection;
@@ -281,7 +336,7 @@ export class TableSelection {
       focusNode,
       focusOffset,
     };
-  };
+  }
 
   helpLinesInitial() {
     this.cellSelectWrap.style.setProperty('--select-color', this.options.selectColor);
@@ -297,15 +352,13 @@ export class TableSelection {
 
     const tableMainBlot = Quill.find(this.table) as TableMainFormat;
     if (!tableMainBlot) return [];
-    const tableBodyBlot = tableMainBlot.descendants(TableBodyFormat)[0];
-    if (!tableBodyBlot) return [];
     // Use TableCell to calculation selected range, because TableCellInner is scrollable, the width will effect calculate
     const tableCells = new Set(
       // reverse cell. search from bottom.
       // when mouse click on the cell border. the selection will be in the lower cell.
       // but `isRectanglesIntersect` judge intersect include border. the upper cell bottom border will intersect with boundary
       // so need to search the cell from bottom
-      (tableBodyBlot.descendants(TableCellFormat) as TempSortedTableCellFormat[]).map((cell, i) => {
+      (tableMainBlot.descendants(TableCellFormat) as TempSortedTableCellFormat[]).map((cell, i) => {
         cell.index = i;
         return cell;
       }),
@@ -377,14 +430,14 @@ export class TableSelection {
 
   getScrollPositionDiff() {
     const { x: tableScrollX, y: tableScrollY } = this.getTableViewScroll();
-    const { x: editorScrollX, y: editorScrollY } = getElementScroll(this.quill.root);
+    const { x: editorScrollX, y: editorScrollY } = getElementScrollPosition(this.quill.root);
     this.selectedTableScrollX = tableScrollX;
     this.selectedTableScrollY = tableScrollY;
     this.selectedEditorScrollX = editorScrollX;
     this.selectedEditorScrollY = editorScrollY;
 
     return this.startScrollRecordPosition.reduce((pre, { x, y }, i) => {
-      const { x: currentX, y: currentY } = getElementScroll(this.scrollRecordEls[i]);
+      const { x: currentX, y: currentY } = getElementScrollPosition(this.scrollRecordEls[i]);
       pre.x += x - currentX;
       pre.y += y - currentY;
       return pre;
@@ -394,7 +447,7 @@ export class TableSelection {
   recordScrollPosition() {
     this.clearRecordScrollPosition();
     for (const el of this.scrollRecordEls) {
-      this.startScrollRecordPosition.push(getElementScroll(el));
+      this.startScrollRecordPosition.push(getElementScrollPosition(el));
     }
   }
 
@@ -402,9 +455,9 @@ export class TableSelection {
     this.startScrollRecordPosition = [];
   }
 
-  mouseDownHandler = (mousedownEvent: MouseEvent) => {
+  tableSelectHandler(mousedownEvent: MouseEvent) {
     const { button, target, clientX, clientY } = mousedownEvent;
-    const closestTable = (target as HTMLElement).closest<HTMLTableElement>('.ql-table');
+    const closestTable = (target as HTMLElement).closest<HTMLTableElement>('table');
     const closestTableCaption = (target as HTMLElement).closest('caption');
     if (button !== 0 || !closestTable || closestTableCaption) return;
 
@@ -413,17 +466,11 @@ export class TableSelection {
     const startPoint = { x: clientX, y: clientY };
 
     this.recordScrollPosition();
-    this.selectedTds = this.computeSelectedTds(startPoint, startPoint);
-    this.dragging = true;
+    this.setSelectedTds(this.computeSelectedTds(startPoint, startPoint));
     this.show();
 
     const mouseMoveHandler = (mousemoveEvent: MouseEvent) => {
-      if (this.tableMenu) {
-        this.tableMenu.hide();
-      }
-      if (this.tableModule.tableResize) {
-        this.tableModule.tableResize.hide();
-      }
+      this.dragging = true;
       const { button, target, clientX, clientY } = mousemoveEvent;
       const closestTable = (target as HTMLElement).closest<HTMLTableElement>('.ql-table');
       const closestTableCaption = (target as HTMLElement).closest('caption');
@@ -436,7 +483,7 @@ export class TableSelection {
       }
 
       const movePoint = { x: clientX, y: clientY };
-      this.selectedTds = this.computeSelectedTds(startPoint, movePoint);
+      this.setSelectedTds(this.computeSelectedTds(startPoint, movePoint));
       if (this.selectedTds.length > 1) {
         this.quill.blur();
       }
@@ -447,17 +494,17 @@ export class TableSelection {
       document.body.removeEventListener('mouseup', mouseUpHandler, false);
       this.dragging = false;
       this.clearRecordScrollPosition();
-      if (this.tableMenu && this.selectedTds.length > 0) {
-        this.tableMenu.show();
-      }
     };
 
     document.body.addEventListener('mousemove', mouseMoveHandler, false);
     document.body.addEventListener('mouseup', mouseUpHandler, false);
-  };
+  }
 
   updateWithSelectedTds() {
-    if (this.selectedTds.length <= 0) return;
+    if (this.selectedTds.length <= 0) {
+      this.hide();
+      return;
+    }
     const startPoint = { x: Infinity, y: Infinity };
     const endPoint = { x: -Infinity, y: -Infinity };
     for (const td of this.selectedTds) {
@@ -467,7 +514,7 @@ export class TableSelection {
       endPoint.x = Math.max(endPoint.x, rect.right);
       endPoint.y = Math.max(endPoint.y, rect.bottom);
     }
-    this.selectedTds = this.computeSelectedTds(startPoint, endPoint);
+    this.setSelectedTds(this.computeSelectedTds(startPoint, endPoint));
     if (this.selectedTds.length > 0) {
       this.update();
     }
@@ -477,8 +524,12 @@ export class TableSelection {
   }
 
   update() {
-    if (this.selectedTds.length === 0 || !this.boundary || !this.table) return;
-    const { x: editorScrollX, y: editorScrollY } = getElementScroll(this.quill.root);
+    if (!this.table) {
+      this.hide();
+      return;
+    }
+    if (this.selectedTds.length === 0 || !this.boundary) return;
+    const { x: editorScrollX, y: editorScrollY } = getElementScrollPosition(this.quill.root);
     const { x: tableScrollX, y: tableScrollY } = this.getTableViewScroll();
     const tableWrapperRect = this.table.parentElement!.getBoundingClientRect();
     const rootRect = this.quill.root.getBoundingClientRect();
@@ -497,9 +548,7 @@ export class TableSelection {
       width: `${tableWrapperRect.width}px`,
       height: `${tableWrapperRect.height}px`,
     });
-    if (!this.dragging && this.tableMenu) {
-      this.tableMenu.update();
-    }
+    this.quill.emitter.emit(tableUpEvent.TABLE_SELECTION_DISPLAY_CHANGE, this);
   }
 
   getTableViewScroll() {
@@ -509,7 +558,7 @@ export class TableSelection {
         y: 0,
       };
     }
-    return getElementScroll(this.table.parentElement!);
+    return getElementScrollPosition(this.table.parentElement!);
   }
 
   setSelectionTable(table: HTMLTableElement | undefined) {
@@ -523,24 +572,6 @@ export class TableSelection {
     }
   }
 
-  removeCell = (e: KeyboardEvent) => {
-    const range = this.quill.getSelection();
-    const activeElement = document.activeElement;
-    if (range || (e.key !== 'Backspace' && e.key !== 'Delete') || !this.quill.root.contains(activeElement)) return;
-
-    if (this.table) {
-      const tableMain = Quill.find(this.table) as TableMainFormat;
-      const cells = tableMain.descendants(TableCellInnerFormat);
-      if (this.selectedTds.length === cells.length) {
-        tableMain.remove();
-        return;
-      }
-    }
-    for (const td of this.selectedTds) {
-      td.deleteAt(0, td.length() - 1);
-    }
-  };
-
   showDisplay() {
     Object.assign(this.cellSelectWrap.style, { display: 'block' });
     this.isDisplaySelection = true;
@@ -552,9 +583,9 @@ export class TableSelection {
     if (!this.table) return;
     clearScrollEvent.call(this);
 
-    this.update();
     this.showDisplay();
-    document.addEventListener('keydown', this.removeCell);
+    this.update();
+    this.quill.root.addEventListener('keydown', this.removeCell);
     addScrollEvent.call(this, this.quill.root, () => {
       this.update();
     });
@@ -572,14 +603,11 @@ export class TableSelection {
 
   hide() {
     clearScrollEvent.call(this);
-    document.removeEventListener('keydown', this.removeCell);
+    this.quill.root.removeEventListener('keydown', this.removeCell);
     this.hideDisplay();
     this.boundary = null;
-    this.selectedTds = [];
+    this.setSelectedTds([]);
     this.setSelectionTable(undefined);
-    if (this.tableMenu) {
-      this.tableMenu.hide();
-    }
   }
 
   destroy() {
@@ -587,15 +615,10 @@ export class TableSelection {
 
     this.hide();
     this.cellSelectWrap.remove();
-    if (this.tableMenu) {
-      this.tableMenu.destroy();
-    }
     clearScrollEvent.call(this);
 
-    this.quill.root.removeEventListener('mousedown', this.mouseDownHandler);
-    document.removeEventListener('selectionchange', this.selectionChangeHandler);
+    this.quill.off(tableUpEvent.AFTER_TABLE_RESIZE, this.updateAfterEvent);
+    this.quill.off(Quill.events.EDITOR_CHANGE, this.updateWhenTextChange);
     this.quill.off(Quill.events.SELECTION_CHANGE, this.quillSelectionChangeHandler);
-    this.quill.off(Quill.events.TEXT_CHANGE, this.updateAfterEvent);
-    this.quill.on(tableUpEvent.AFTER_TABLE_RESIZE, this.updateAfterEvent);
   }
 }

package/src/node_modules/.vite/vitest/da39a3ee5e6b4b0d3255bfef95601890afd80709/results.json

@@ -1 +1 @@
-{"version":"3.2.3","results":[[":__tests__/unit/utils.test-d.ts",{"duration":0,"failed":false}],[":__tests__/unit/table-clipboard.test.ts",{"duration":7348.2325000000055,"failed":false}],[":__tests__/unit/table-redo-undo.test.ts",{"duration":7314.907299999999,"failed":false}],[":__tests__/unit/table-hack.test.ts",{"duration":2628.3711000000003,"failed":false}],[":__tests__/unit/table-cell-merge.test.ts",{"duration":2576.8806999999997,"failed":false}],[":__tests__/unit/table-insert.test.ts",{"duration":4933.0411,"failed":false}],[":__tests__/unit/table-blots.test.ts",{"duration":2238.9622,"failed":false}],[":__tests__/unit/utils.test.ts",{"duration":1362.8192000000004,"failed":false}],[":__tests__/unit/table-remove.test.ts",{"duration":1996.3753999999994,"failed":false}],[":__tests__/unit/table-caption.test.ts",{"duration":1237.1392,"failed":false}]]}
+{"version":"3.2.3","results":[[":__tests__/unit/utils.test-d.ts",{"duration":0,"failed":false}],[":__tests__/unit/table-clipboard.test.ts",{"duration":242.66079999999783,"failed":false}],[":__tests__/unit/table-redo-undo.test.ts",{"duration":7058.3453,"failed":false}],[":__tests__/unit/table-hack.test.ts",{"duration":2378.3323,"failed":false}],[":__tests__/unit/table-cell-merge.test.ts",{"duration":2717.3857000000003,"failed":false}],[":__tests__/unit/table-insert.test.ts",{"duration":2047.901899999939,"failed":false}],[":__tests__/unit/table-blots.test.ts",{"duration":1673.0519000000004,"failed":false}],[":__tests__/unit/utils.test.ts",{"duration":658.0781999999999,"failed":false}],[":__tests__/unit/table-remove.test.ts",{"duration":2390.7156,"failed":false}],[":__tests__/unit/table-caption.test.ts",{"duration":991.8278,"failed":false}]]}

package/src/style/index.less

@@ -27,7 +27,6 @@
       &-wrapper {
         width: 100%;
         overflow: auto;
-        scrollbar-width: none;
       }
       &-caption {
         position: relative;

package/src/style/select-box.less

@@ -32,6 +32,7 @@
     height: 16px;
     width: 16px;
     border: .getCssVar(select-box-border) [];
+    cursor: pointer;
     &.active {
       border-color: .getCssVar(select-box-color-active) [];
       background-color: .getCssVar(select-box-color-bg-active) [];

package/src/style/table-menu.less

@@ -5,7 +5,7 @@
   &-align {
     position: absolute;
     z-index: 1;
-    display: none;
+    display: flex;
     align-items: center;
     padding: 4px;
     border-radius: 6px;
@@ -32,6 +32,9 @@
         cursor: default;
       }
     }
+    &.is-hidden {
+      display: none;
+    }
     .icon {
       display: flex;
       flex-shrink: 0;
@@ -65,9 +68,6 @@
     }
   }
   &-align {
-    &--active {
-      display: flex;
-    }
     .icon {
       width: 20px;
       height: 20px;

package/src/style/table-resize.less

@@ -81,6 +81,7 @@
     top: 0px;
     left: 0px;
     overflow: hidden;
+    display: flex;
   }
   &__col,
   &__row {

package/src/style/table-scrollbar.less

@@ -37,11 +37,11 @@
       background-color: #a1a1aa;
     }
   }
-  &--origin.ql-container {
+  &--virtual.ql-container {
     .ql {
       &-table {
         &-wrapper {
-          scrollbar-width: inherit;
+          scrollbar-width: none;
         }
       }
     }