quill-table-up 3.1.2 → 3.2.1

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

@@ -1,118 +1,111 @@
-import type Quill from 'quill';
-import type { TableUp } from '../../table-up';
-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';
-
-type TableMenuOptionsInput = Partial<Omit<TableMenuOptions, 'texts'>>;
-export class TableMenuContextmenu extends TableMenuCommon {
-  colorChooseTooltipOption: ToolTipOptions = {
-    direction: 'right',
-  };
-
-  constructor(public tableModule: TableUp, public quill: Quill, options: TableMenuOptionsInput) {
-    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();
-
-    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 tableSelection = this.tableModule.getModule<TableSelection>('table-selection');
-    if (tableNode && tableSelection?.selectedTds?.length) {
-      if (!this.menu) {
-        this.menu = this.buildTools();
-      }
-      // manual call menu show
-      Object.assign(this.menu.style, { display: 'flex' });
-      this.isMenuDisplay = true;
-
-      this.update({ x: e.clientX, y: e.clientY });
-      document.addEventListener('click', () => {
-        this.hide();
-      }, { once: true });
-    }
-    else {
-      this.hide();
-    }
-  };
-
-  buildTools(): HTMLElement {
-    const menu = super.buildTools();
-    menu.classList.add(this.bem.is('contextmenu'));
-    const items = menu.getElementsByClassName(menuColorSelectClassName);
-    for (const item of Array.from(items)) {
-      item.addEventListener('click', e => e.stopPropagation());
-    }
-    document.body.appendChild(menu);
-    return menu;
-  }
-
-  createTipText(item: HTMLElement, text: string): void {
-    const tipTextDom = document.createElement('span');
-    tipTextDom.textContent = text;
-    item.appendChild(tipTextDom);
-  }
-
-  // override show. because TableSelection will call tableMenu.show() after select td
-  show() {}
-
-  update(position?: { x: number; y: number }) {
-    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;
-    }
-
-    const style: Record<string, any> = {
-      display: 'flex',
-      left: 0,
-      top: 0,
-    };
-
-    const { x, y } = position;
-    style.left = x;
-    style.top = y;
-
-    Object.assign(this.menu.style, {
-      ...style,
-      left: `${style.left + window.scrollX}px`,
-      top: `${style.top + window.scrollY}px`,
-    });
-
-    // limit menu in viewport
-    const menuRect = this.menu.getBoundingClientRect();
-    const { left: limitLeft, top: limitTop } = limitDomInViewPort(menuRect);
-    Object.assign(this.menu.style, {
-      left: `${limitLeft + window.scrollX}px`,
-      top: `${limitTop + window.scrollY}px`,
-    });
-  }
-
-  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);
-  }
-}
+import type Quill from 'quill';
+import type { TableUp } from '../../table-up';
+import type { InternalTableSelectionModule, Position, TableMenuOptions } from '../../utils';
+import type { TableSelection } from '../table-selection';
+import { addScrollEvent, clearScrollEvent, limitDomInViewPort, tableUpEvent, tableUpInternal } from '../../utils';
+import { menuColorSelectClassName } from './constants';
+import { TableMenuCommon } from './table-menu-common';
+
+type TableMenuOptionsInput = Partial<Omit<TableMenuOptions, 'texts'>>;
+export class TableMenuContextmenu extends TableMenuCommon {
+  static moduleName = 'table-menu-contextmenu';
+
+  scrollHandler: [HTMLElement, (e: Event) => void][] = [];
+
+  constructor(public tableModule: TableUp, public quill: Quill, options: TableMenuOptionsInput) {
+    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();
+
+    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 tableSelection = this.tableModule.getModule<TableSelection>(tableUpInternal.tableSelectionName);
+    if (tableNode && tableSelection?.selectedTds?.length) {
+      if (!this.menu) {
+        this.menu = this.buildTools();
+      }
+      // manual call menu show
+      this.isMenuDisplay = true;
+      this.update({ x: e.clientX, y: e.clientY });
+      const tempHide = () => {
+        this.hide();
+        clearScrollEvent.call(this);
+      };
+      addScrollEvent.call(this, this.quill.root, tempHide);
+      document.addEventListener('click', tempHide, { once: true });
+    }
+    else {
+      this.hide();
+    }
+  };
+
+  buildTools(): HTMLElement {
+    const menu = super.buildTools();
+    menu.classList.add(this.bem.is('contextmenu'));
+    const items = menu.getElementsByClassName(menuColorSelectClassName);
+    for (const item of Array.from(items)) {
+      item.addEventListener('click', e => e.stopPropagation());
+    }
+    this.quill.container.appendChild(menu);
+    return menu;
+  }
+
+  createTipText(item: HTMLElement, text: string): void {
+    const tipTextDom = document.createElement('span');
+    tipTextDom.textContent = text;
+    item.appendChild(tipTextDom);
+  }
+
+  // override show. because TableSelection will call tableMenu.show() after select td
+  show() {}
+
+  update(position?: Position) {
+    super.update();
+    const tableSelection = this.tableModule.getModule<TableSelection>(tableUpInternal.tableSelectionName);
+    if (!this.table || !this.isMenuDisplay || !this.menu) {
+      this.hide();
+      return;
+    }
+    if (!position || !tableSelection?.isDisplaySelection) {
+      return;
+    }
+
+    const rootRect = this.quill.container.getBoundingClientRect();
+    Object.assign(this.menu.style, {
+      left: `${position.x - rootRect.x}px`,
+      top: `${position.y - rootRect.y}px`,
+    });
+
+    // limit menu in viewport
+    const menuRect = this.menu.getBoundingClientRect();
+    const { left: limitLeft, top: limitTop } = limitDomInViewPort(menuRect);
+    const diffX = menuRect.left - limitLeft;
+    const diffY = menuRect.top - limitTop;
+    Object.assign(this.menu.style, {
+      left: `${position.x - rootRect.x - diffX}px`,
+      top: `${position.y - rootRect.y - diffY}px`,
+    });
+  }
+
+  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,94 +1,96 @@
-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.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() {
-    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'));
-
-    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);
-  }
-}
+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, tableUpInternal } from '../../utils';
+import { TableMenuCommon } from './table-menu-common';
+
+export class TableMenuSelect extends TableMenuCommon {
+  static moduleName = 'table-menu-select';
+
+  constructor(public tableModule: TableUp, public quill: Quill, options: TableMenuOptionsInput) {
+    super(tableModule, quill, options);
+
+    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() {
+    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?.classList.add(this.bem.is('hidden'));
+        this.hide();
+      }
+      return;
+    }
+    this.isMenuDisplay = true;
+    this.menu.classList.remove(this.bem.is('hidden'));
+
+    const tableSelection = this.tableModule.getModule<TableSelection>(tableUpInternal.tableSelectionName);
+    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);
+  }
+}

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

@@ -1,5 +1,5 @@
-export * from './table-resize-box';
-export * from './table-resize-common';
-export * from './table-resize-line';
-export * from './table-resize-scale';
-export * from './utils';
+export * from './table-resize-box';
+export * from './table-resize-common';
+export * from './table-resize-line';
+export * from './table-resize-scale';
+export * from './utils';