fix: table selection event clear and display update (#69)

zzxming · Feb 16, 2025 · 6784711 · 6784711
1 parent a2ae16a
commit 6784711
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 37 deletions.
diff --git a/src/index.ts b/src/index.ts
@@ -277,7 +277,7 @@ export class TableUp {
       false,
     );
     this.quill.on(tableUpEvent.AFTER_TABLE_RESIZE, () => {
-      this.tableSelection && this.tableSelection.hide();
+      this.tableSelection && this.tableSelection.updateWithSelectedTds();
     });
 
     this.pasteTableHandler();
@@ -602,6 +602,7 @@ export class TableUp {
       isFulllLabel.appendChild(isFullCheckboxText);
       dom.appendChild(isFulllLabel);
     }
+    picker.options.innerHTML = '';
     picker.options.appendChild(dom);
   }
 

diff --git a/src/modules/table-selection.ts b/src/modules/table-selection.ts
@@ -64,35 +64,11 @@ export class TableSelection {
     });
     this.resizeObserver.observe(this.quill.root);
 
-    this.quill.root.addEventListener('mousedown', this.mouseDownHandler, false);
-    this.quill.root.addEventListener('keydown', (event) => {
-      const selectionKey = new Set(['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'End', 'Home', 'PageDown', 'PageUp']);
-      if (event.shiftKey) {
-        this.shiftKeyDown = true;
-        if (selectionKey.has(event.key)) {
-          this.keySelectionChange = true;
-        }
-      }
-    });
-    this.quill.root.addEventListener('keyup', (event) => {
-      if (event.key === 'Shift') {
-        this.shiftKeyDown = false;
-      }
-    });
-    document.addEventListener('selectionchange', this.selectionChangeHandler);
-    this.quill.on(Quill.events.SELECTION_CHANGE, (range: TypeRange | null) => {
-      if (range && this.isDisplaySelection) {
-        const formats = this.quill.getFormat(range);
-        const [line] = this.quill.getLine(range.index);
-        let isInChildren = !!formats[blotName.tableCellInner] && !!line;
-        if (isInChildren) {
-          isInChildren &&= this.selectedTds.some(td => td.children.contains(line!));
-        }
-        if (!isInChildren) {
-          this.hide();
-        }
-      }
-    });
+    this.quill.root.addEventListener('mousedown', this.mouseDownHandler, { passive: false });
+    this.quill.root.addEventListener('keydown', this.keydownHandler, { passive: false });
+    this.quill.root.addEventListener('keyup', this.keyupHandler, { passive: false });
+    document.addEventListener('selectionchange', this.selectionChangeHandler, { passive: false });
+    this.quill.on(Quill.events.SELECTION_CHANGE, this.quillSelectionChangeHandler);
     if (this.options.tableMenu) {
       this.tableMenu = new this.options.tableMenu(tableModule, quill, this.options.tableMenuOptions);
     }
@@ -125,6 +101,36 @@ export class TableSelection {
     return tempRange.startOffset;
   }
 
+  quillSelectionChangeHandler = (range: TypeRange | null) => {
+    if (range && this.isDisplaySelection) {
+      const formats = this.quill.getFormat(range);
+      const [line] = this.quill.getLine(range.index);
+      let isInChildren = !!formats[blotName.tableCellInner] && !!line;
+      if (isInChildren) {
+        isInChildren &&= this.selectedTds.some(td => td.children.contains(line!));
+      }
+      if (!isInChildren) {
+        this.hide();
+      }
+    }
+  };
+
+  keyupHandler = (event: KeyboardEvent) => {
+    if (event.key === 'Shift') {
+      this.shiftKeyDown = false;
+    }
+  };
+
+  keydownHandler = (event: KeyboardEvent) => {
+    const selectionKey = new Set(['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'End', 'Home', 'PageDown', 'PageUp']);
+    if (event.shiftKey) {
+      this.shiftKeyDown = true;
+      if (selectionKey.has(event.key)) {
+        this.keySelectionChange = true;
+      }
+    }
+  };
+
   setSelectionData(selection: Selection, selectionData: SelectionData) {
     const { anchorNode, anchorOffset, focusNode, focusOffset } = selectionData;
     if (!anchorNode || !focusNode) return;
@@ -506,14 +512,14 @@ export class TableSelection {
     this.selectedTds = this.computeSelectedTds(startPoint, startPoint);
     this.dragging = true;
     this.show();
-    if (this.tableMenu) {
-      this.tableMenu.hide();
-    }
-    if (this.tableModule.tableResize) {
-      this.tableModule.tableResize.hide();
-    }
 
     const mouseMoveHandler = (mousemoveEvent: MouseEvent) => {
+      if (this.tableMenu) {
+        this.tableMenu.hide();
+      }
+      if (this.tableModule.tableResize) {
+        this.tableModule.tableResize.hide();
+      }
       const { button, target, clientX, clientY } = mousemoveEvent;
       const closestTable = (target as HTMLElement).closest('.ql-table') as HTMLElement;
       if (
@@ -678,7 +684,10 @@ export class TableSelection {
     }
     clearScrollEvent.call(this);
 
-    this.quill.root.removeEventListener('mousedown', this.mouseDownHandler, false);
+    this.quill.root.removeEventListener('mousedown', this.mouseDownHandler);
+    this.quill.root.removeEventListener('keydown', this.keydownHandler);
+    this.quill.root.removeEventListener('keyup', this.keyupHandler);
     document.removeEventListener('selectionchange', this.selectionChangeHandler);
+    this.quill.off(Quill.events.SELECTION_CHANGE, this.quillSelectionChangeHandler);
   }
 }