quill-table-up 2.1.0 → 2.1.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "quill-table-up",
   "type": "module",
-  "version": "2.1.0",
+  "version": "2.1.2",
   "packageManager": "pnpm@9.9.0",
   "description": "A table module for quill2.x",
   "author": "zzxming",
@@ -57,7 +57,7 @@
     "@typescript-eslint/parser": "^8.18.2",
     "@vitest/coverage-v8": "^2.0.5",
     "@vitest/ui": "^2.0.5",
-    "@zzxming/eslint-config": "^0.3.5",
+    "@zzxming/eslint-config": "^0.4.0",
     "autoprefixer": "^10.4.19",
     "eslint": "^9.17.0",
     "gulp": "^4.0.0",

package/src/__tests__/unit/utils.ts

@@ -91,7 +91,7 @@ expect.extend({
 interface TableColDeltaValue extends Omit<TableColValue, 'width' | 'full'> {
   width: number;
   full?: 'true';
-};
+}
 interface TableCreatorOptions {
   isEmpty: boolean;
   tableId: string;

package/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();
@@ -312,7 +312,7 @@ export class TableUp {
       resizeOptions: {},
       resizeScaleOptions: {},
     } as TableUpOptions, options);
-  };
+  }
 
   resolveTexts(options: Partial<TableTextOptions>) {
     return Object.assign({
@@ -327,8 +327,21 @@ export class TableUp {
       clear: 'Clear',
       transparent: 'Transparent',
       perWidthInsufficient: 'The percentage width is insufficient. To complete the operation, the table needs to be converted to a fixed width. Do you want to continue?',
+      CopyCell: 'Copy cell',
+      CutCell: 'Cut cell',
+      InsertTop: 'Insert row above',
+      InsertRight: 'Insert column right',
+      InsertBottom: 'Insert row below',
+      InsertLeft: 'Insert column Left',
+      MergeCell: 'Merge Cell',
+      SplitCell: 'Split Cell',
+      DeleteRow: 'Delete Row',
+      DeleteColumn: 'Delete Column',
+      DeleteTable: 'Delete table',
+      BackgroundColor: 'Set background color',
+      BorderColor: 'Set border color',
     }, options);
-  };
+  }
 
   pasteTableHandler() {
     let tableId = randomId();
@@ -589,8 +602,9 @@ export class TableUp {
       isFulllLabel.appendChild(isFullCheckboxText);
       dom.appendChild(isFulllLabel);
     }
+    picker.options.innerHTML = '';
     picker.options.appendChild(dom);
-  };
+  }
 
   setCellAttrs(selectedTds: TableCellInnerFormat[], attr: string, value?: any, isStyle: boolean = false) {
     if (selectedTds.length === 0) return;
@@ -1248,7 +1262,7 @@ export function updateTableConstants(data: Partial<TableConstantsData>) {
   TableRowFormat.blotName = blotName.tableRow;
   TableCellFormat.blotName = blotName.tableCell;
   TableCellInnerFormat.blotName = blotName.tableCellInner;
-};
+}
 export function defaultCustomSelect(tableModule: TableUp, picker: QuillThemePicker) {
   return createSelectBox({
     onSelect: (row: number, col: number) => {

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

@@ -66,7 +66,7 @@ export class TableMenuCommon {
       defaultColorMap,
     }, options);
     return value as TableMenuOptions;
-  };
+  }
 
   getUsedColors() {
     return usedColors;
@@ -116,7 +116,7 @@ export class TableMenuCommon {
       toolBox.appendChild(item);
     }
     return toolBox;
-  };
+  }
 
   createColorChoose(item: HTMLElement, { handle, key }: ToolOption) {
     const colorSelectWrapper = document.createElement('div');

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

@@ -1,6 +1,7 @@
 import type { Parchment as TypeParchment } from 'quill';
 import type TableUp from '../..';
 import type { TableColFormat, TableMainFormat, TableRowFormat } from '../..';
+import type { sizeChangeValue } from './table-resize-common';
 import Quill from 'quill';
 import { TableBodyFormat, TableCellInnerFormat } from '../../formats';
 import { addScrollEvent, clearScrollEvent, createBEM } from '../../utils';
@@ -10,7 +11,7 @@ import { isTableAlignRight } from './utils';
 interface Point {
   x: number;
   y: number;
-};
+}
 export class TableResizeBox extends TableResizeCommon {
   root!: HTMLElement;
   tableMain: TableMainFormat;
@@ -70,15 +71,15 @@ export class TableResizeBox extends TableResizeCommon {
       tableSelection.selectedTds = tableSelection.computeSelectedTds(...currentBoundary);
       tableSelection.show();
     }
-  };
+  }
 
   findCurrentColIndex(e: MouseEvent): number {
     return Array.from(this.root.getElementsByClassName(this.bem.be('col-separator'))).indexOf(e.target as HTMLElement);
   }
 
-  colWidthChange(i: number, w: number, _isFull: boolean) {
+  colWidthChange(i: number, w: sizeChangeValue, isFull: boolean) {
     const tableColHeads = Array.from(this.root.getElementsByClassName(this.bem.be('col-header'))) as HTMLElement[];
-    tableColHeads[i].style.width = `${w}px`;
+    tableColHeads[i].style.width = isFull ? `${w.pre}%` : `${w.px}px`;
   }
 
   handleColMouseDownFunc = function (this: TableResizeBox, e: MouseEvent) {

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

@@ -4,6 +4,10 @@ import type { TableMainFormat } from '../../formats';
 import { createBEM, createButton, createDialog, tableUpEvent, tableUpSize } from '../../utils';
 import { isTableAlignRight } from './utils';
 
+export interface sizeChangeValue {
+  px: number;
+  pre: number;
+}
 export class TableResizeCommon {
   colIndex: number = -1;
   tableMain?: TableMainFormat;
@@ -27,7 +31,7 @@ export class TableResizeCommon {
     return -1;
   }
 
-  colWidthChange(_i: number, _w: number, _isFull: boolean) {}
+  colWidthChange(_i: number, _w: sizeChangeValue, _isFull: boolean) {}
 
   async createConfirmDialog({ message, confirm, cancel }: {
     message: string;
@@ -162,12 +166,19 @@ export class TableResizeCommon {
 
       for (const { index, width } of updateInfo) {
         cols[index].width = `${Math.round(width)}${isFull ? '%' : 'px'}`;
-        this.colWidthChange(index, isFull ? width / 100 * tableWidth : width, isFull);
+        this.colWidthChange(
+          index,
+          {
+            px: Math.round(width / 100 * tableWidth),
+            pre: Math.round(width),
+          },
+          isFull,
+        );
       }
     }
 
     this.quill.emitter.emit(tableUpEvent.AFTER_TABLE_RESIZE);
-  };
+  }
 
   handleColMouseMove(e: MouseEvent): { left: number; width: number } | undefined {
     e.preventDefault();
@@ -213,7 +224,7 @@ export class TableResizeCommon {
       left: resX,
       width,
     };
-  };
+  }
 
   handleColMouseDown(e: MouseEvent): { top: number; left: number; height: number } | undefined {
     if (e.button !== 0) return;
@@ -255,7 +266,7 @@ export class TableResizeCommon {
     this.dragColBreak = divDom;
 
     return styleValue;
-  };
+  }
 
   findCurrentRowIndex(_e: MouseEvent) {
     return -1;
@@ -336,7 +347,7 @@ export class TableResizeCommon {
     this.dragRowBreak = divDom;
 
     return styleValue;
-  };
+  }
 
   update() {}
   destroy() {}

package/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);
   }
 }

package/src/svg/copy.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><defs><mask id="ipTCopy0"><g fill="none" stroke="#fff" stroke-linejoin="round" stroke-width="4"><path stroke-linecap="round" d="M13 12.432v-4.62A2.813 2.813 0 0 1 15.813 5h24.374A2.813 2.813 0 0 1 43 7.813v24.375A2.813 2.813 0 0 1 40.188 35h-4.672"/><path fill="#555" d="M32.188 13H7.811A2.813 2.813 0 0 0 5 15.813v24.374A2.813 2.813 0 0 0 7.813 43h24.375A2.813 2.813 0 0 0 35 40.188V15.811A2.813 2.813 0 0 0 32.188 13Z"/></g></mask></defs><path fill="currentColor" d="M0 0h48v48H0z" mask="url(#ipTCopy0)"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><g fill="currentColor"><path d="M216 40v128h-48V88H88V40Z" opacity=".2"/><path d="M216 32H88a8 8 0 0 0-8 8v40H40a8 8 0 0 0-8 8v128a8 8 0 0 0 8 8h128a8 8 0 0 0 8-8v-40h40a8 8 0 0 0 8-8V40a8 8 0 0 0-8-8m-56 176H48V96h112Zm48-48h-32V88a8 8 0 0 0-8-8H96V48h112Z"/></g></svg>

package/src/svg/cut.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="m19 3l-6 6l2 2l7-7V3zm-9 3c0-2.21-1.79-4-4-4S2 3.79 2 6s1.79 4 4 4c.59 0 1.14-.13 1.64-.36L10 12l-2.36 2.36C7.14 14.13 6.59 14 6 14c-2.21 0-4 1.79-4 4s1.79 4 4 4s4-1.79 4-4c0-.59-.13-1.14-.36-1.64L12 14l7 7h3v-1L9.64 7.64c.23-.5.36-1.05.36-1.64M6 8c-1.1 0-2-.89-2-2s.9-2 2-2s2 .89 2 2s-.9 2-2 2m0 12c-1.1 0-2-.89-2-2s.9-2 2-2s2 .89 2 2s-.9 2-2 2m6-8.5c.28 0 .5.22.5.5s-.22.5-.5.5s-.5-.22-.5-.5s.22-.5.5-.5"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="m19.05 13.733l-1-1.733l-10.122 5.846l-.997-.576a3 3 0 0 0 .667-.769A3 3 0 1 0 3.5 17.599L5.928 19L3.5 20.402a3.034 3.034 0 1 0 3.44.323l.988-.57L14.59 24l1-1.73L9.928 19zM4.034 15.26a1 1 0 1 1 .466.607a1 1 0 0 1-.466-.607M5 22a1 1 0 1 1-.865 1.5A1 1 0 0 1 5 22m12 4h4v2h-4zm-7 0h4v2h-4z"/><path fill="currentColor" d="M28 28h-4v-2h4V4H7v4H5V4a2 2 0 0 1 2-2h21a2 2 0 0 1 2 2v22a2 2 0 0 1-2 2"/></svg>

package/src/utils/color.ts

@@ -3,13 +3,13 @@ export interface HSB {
   s: number;
   b: number;
   a: number;
-};
+}
 export interface RGB {
   r: number;
   g: number;
   b: number;
   a: number;
-};
+}
 const normalizeValue = function (value: number | string, max: number | string) {
   value = Math.min(max as number, Math.max(0, Number.parseFloat(`${value}`)));
 

package/src/utils/components/button.ts

@@ -4,7 +4,7 @@ import { isString } from '../is';
 interface ButtonOptions {
   type: 'confirm' | 'default';
   content: HTMLElement | string;
-};
+}
 export const createButton = (options?: Partial<ButtonOptions>) => {
   const { type = 'default', content } = options || {};
   const bem = createBEM('button');

package/src/utils/components/color-picker.ts

@@ -5,7 +5,7 @@ import { HEXtoRGB, HSBtoHEX, HSBtoRGB, RGBtoHEX, RGBtoHSB, validateHSB } from '.
 interface ColorPickerOptions {
   color: string;
   onChange: (color: string) => void;
-};
+}
 export const createColorPicker = (options: Partial<ColorPickerOptions> = {}) => {
   const contentWidth = 230;
   const contentHeight = 150;

package/src/utils/components/input.ts

@@ -6,7 +6,7 @@ interface InputOptions {
   max?: number;
   min?: number;
   [key: string]: any;
-};
+}
 export const createInputItem = (label: string, options: InputOptions) => {
   const bem = createBEM('input');
   options.type || (options.type = 'text');

package/src/utils/components/tooltip.ts

@@ -38,7 +38,7 @@ export interface TooltipInstance {
   destroy: () => void;
   show: (force?: boolean) => void;
   hide: (force?: boolean) => void;
-};
+}
 export const createTooltip = (target: HTMLElement, options: ToolTipOptions = {}): TooltipInstance | null => {
   const { msg = '', delay = 150, content, direction = 'bottom', type = 'hover', container, onOpen, onClose, closed, onDestroy } = options;
   const bem = createBEM('tooltip');

package/src/utils/types.ts

@@ -25,7 +25,7 @@ export interface TableMenuOptions {
   tools: Tool[];
   localstorageKey: string;
   defaultColorMap: string[];
-};
+}
 export interface TableSelectionOptions {
   selectColor: string;
   tableMenu?: Constructor<InternalModule, [TableUp, Quill, Partial<TableMenuOptions>]>;
@@ -43,7 +43,7 @@ export interface TableCreatorTextOptions {
   colText: string;
   notPositiveNumberError: string;
   perWidthInsufficient: string;
-};
+}
 export type TableMenuTexts = Record<string, string>;
 export interface TableTextOptions extends TableCreatorTextOptions, TableMenuTexts {
   custom: string;
@@ -75,7 +75,7 @@ export interface TableColValue {
   width: string;
   full?: boolean;
   align?: string;
-};
+}
 export interface TableCellValue {
   tableId: string;
   rowId: string;
@@ -83,7 +83,7 @@ export interface TableCellValue {
   rowspan: number;
   colspan: number;
   style?: string;
-};
+}
 export interface TableRowValue {
   tableId: string;
   rowId: string;
@@ -92,7 +92,7 @@ export interface TableValue {
   tableId: string;
   full?: boolean;
   align?: string;
-};
+}
 
 export interface RelactiveRect {
   x: number;
@@ -108,7 +108,7 @@ export interface InternalModule {
   hide: () => void;
   update: () => void;
   destroy: () => void;
-};
+}
 export type Constructor<T = any, U extends Array<any> = any[]> = new (...args: U) => T;
 export interface InternalTableSelectionModule extends InternalModule {
   dragging: boolean;
@@ -132,4 +132,4 @@ export interface TableConstantsData {
   blotName: Record<string, string>;
   tableUpSize: Record<string, number>;
   tableUpEvent: Record<string, string>;
-};
+}

package/src/utils/utils.ts

@@ -25,7 +25,7 @@ interface ParentBlotReturnMap {
   [blotName.tableRow]: TableRowFormat;
   [blotName.tableCell]: TableCellFormat;
   [blotName.tableCellInner]: TableCellInnerFormat;
-};
+}
 type ParentBlotReturn = {
   [key: string]: TypeParchment.Parent;
 } & ParentBlotReturnMap;
@@ -82,7 +82,7 @@ function mixinProps<T = any, U = any>(target: T, source: U) {
     Object.defineProperty(target, prop, Object.getOwnPropertyDescriptor(source, prop)!);
   }
   return target as typeof target & Omit<typeof source, 'constructor'>;
-};
+}
 export function mixinClass<
   T extends Constructor,
   U extends Constructor[],
@@ -100,7 +100,7 @@ export function mixinClass<
   }
 
   return targetClass;
-};
+}
 
 const viewportPadding = 8;
 export const limitDomInViewPort = (rect: { left: number; top: number; width: number; height: number }) => {
@@ -134,7 +134,7 @@ export const limitDomInViewPort = (rect: { left: number; top: number; width: num
 
 interface ScrollHandle {
   scrollHandler: [HTMLElement, (e: Event) => void][];
-};
+}
 export function addScrollEvent(this: ScrollHandle, dom: HTMLElement, handle: (e: Event) => void) {
   dom.addEventListener('scroll', handle);
   this.scrollHandler.push([dom, handle]);