quill-table-up 3.2.1 → 3.2.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "quill-table-up",
   "type": "module",
-  "version": "3.2.1",
+  "version": "3.2.2",
   "packageManager": "pnpm@10.20.0",
   "description": "A table module for quill2.x",
   "author": "zzxming",
@@ -61,7 +61,7 @@
     "@typescript-eslint/parser": "^8.46.2",
     "@vitest/coverage-v8": "^4.0.6",
     "@vitest/ui": "^4.0.6",
-    "@zzxming/eslint-config": "0.6.0",
+    "@zzxming/eslint-config": "0.6.2",
     "autoprefixer": "^10.4.21",
     "eslint": "^9.39.0",
     "gulp": "^5.0.1",

package/src/__tests__/e2e/table-resize.test.ts

@@ -169,73 +169,122 @@ extendTest('TableResize on full width should not outer 100%', async ({ page, edi
   expect(width).toBeCloseTo(100, 3);
 });
 
-test('test TableResizeScale functional', async ({ page }) => {
-  await createTableBySelect(page, 'container1', 3, 3);
-  const centerCell = page.locator('#editor1').getByRole('cell').nth(4);
-  await centerCell.click();
-  const cellBounding = (await centerCell.boundingBox())!;
-  const scaleBtnBounding = (await page.locator('#editor1 .table-up-scale__block').boundingBox())!;
-  expect(cellBounding).not.toBeNull();
-  expect(scaleBtnBounding).not.toBeNull();
-  await page.mouse.move(scaleBtnBounding.x + scaleBtnBounding.width / 2, scaleBtnBounding.y + scaleBtnBounding.height / 2);
-  await page.mouse.down();
-  await page.mouse.move(scaleBtnBounding.x + scaleBtnBounding.width / 2 - 90, scaleBtnBounding.y + scaleBtnBounding.height / 2 + 90);
-  await page.mouse.up();
-  const cols = page.locator('#editor1 .ql-table-wrapper col');
-  for (const col of await cols.all()) {
-    await expect(col).toHaveAttribute('width', `${Math.floor(cellBounding.width - 30)}px`);
-  }
-
-  const cells = page.locator('#editor1 .ql-table-wrapper td');
-  for (const cell of await cells.all()) {
-    await expect(cell).toHaveCSS('height', `${Math.floor(cellBounding.height + 30)}px`);
-  }
-});
-
-extendTest('test TableResizeBox and TableResizeScale should update when text change', async ({ page, editorPage }) => {
-  editorPage.index = 1;
-  await createTableBySelect(page, 'container2', 3, 3);
-
-  const lineBound = (await page.locator('#editor2 .ql-editor > p').first().boundingBox())!;
-  expect(lineBound).not.toBeNull();
-  await page.locator('#editor2 .ql-table .ql-table-cell').nth(0).click();
-  const scale = page.locator('#container2 .table-up-scale');
-  const boxTop = await page.locator('#container2 .table-up-resize-box').evaluate((element) => {
-    return Number.parseFloat(window.getComputedStyle(element).top);
-  });
-  const scaleTop = await scale.evaluate((element) => {
-    return Number.parseFloat(window.getComputedStyle(element).top);
+extendTest.describe('TableResizeScale functional', () => {
+  extendTest('test TableResizeScale functional', async ({ page }) => {
+    await createTableBySelect(page, 'container1', 3, 3);
+    const centerCell = page.locator('#editor1').getByRole('cell').nth(4);
+    await centerCell.click();
+    const cellBounding = (await centerCell.boundingBox())!;
+    const scaleBtnBounding = (await page.locator('#editor1 .table-up-scale__block').boundingBox())!;
+    expect(cellBounding).not.toBeNull();
+    expect(scaleBtnBounding).not.toBeNull();
+    await page.mouse.move(scaleBtnBounding.x + scaleBtnBounding.width / 2, scaleBtnBounding.y + scaleBtnBounding.height / 2);
+    await page.mouse.down();
+    await page.mouse.move(scaleBtnBounding.x + scaleBtnBounding.width / 2 - 90, scaleBtnBounding.y + scaleBtnBounding.height / 2 + 90);
+    await page.mouse.up();
+    const cols = page.locator('#editor1 .ql-table-wrapper col');
+    for (const col of await cols.all()) {
+      await expect(col).toHaveAttribute('width', `${Math.floor(cellBounding.width - 30)}px`);
+    }
+
+    const cells = page.locator('#editor1 .ql-table-wrapper td');
+    for (const cell of await cells.all()) {
+      await expect(cell).toHaveCSS('height', `${Math.floor(cellBounding.height + 30)}px`);
+    }
   });
-  await expect(scale).toBeVisible();
-  await expect(page.locator('#container2 .table-up-resize-box .table-up-resize-box__corner')).toBeVisible();
 
-  await editorPage.updateContents([{ insert: '12345\n12345\n12345' }], 'user');
-  await page.evaluate(() => {
-    window.scrollTo(0, 0);
+  extendTest('test TableResizeBox and TableResizeScale should update when text change', async ({ page, editorPage }) => {
+    editorPage.index = 1;
+    await createTableBySelect(page, 'container2', 3, 3);
+
+    const lineBound = (await page.locator('#editor2 .ql-editor > p').first().boundingBox())!;
+    expect(lineBound).not.toBeNull();
+    await page.locator('#editor2 .ql-table .ql-table-cell').nth(0).click();
+    const scale = page.locator('#container2 .table-up-scale');
+    const boxTop = await page.locator('#container2 .table-up-resize-box').evaluate((element) => {
+      return Number.parseFloat(window.getComputedStyle(element).top);
+    });
+    const scaleTop = await scale.evaluate((element) => {
+      return Number.parseFloat(window.getComputedStyle(element).top);
+    });
+    await expect(scale).toBeVisible();
+    await expect(page.locator('#container2 .table-up-resize-box .table-up-resize-box__corner')).toBeVisible();
+
+    await editorPage.updateContents([{ insert: '12345\n12345\n12345' }], 'user');
+    await page.evaluate(() => {
+      window.scrollTo(0, 0);
+    });
+
+    await expect(scale).toBeVisible();
+    await expect(page.locator('#container2 .table-up-resize-box .table-up-resize-box__corner')).toBeVisible();
+    const newScaleTop = await scale.evaluate((element) => {
+      return Number.parseFloat(window.getComputedStyle(element).top);
+    });
+    expect(newScaleTop).toBeCloseTo(scaleTop + lineBound.height * 2, 4);
+    const newBoxTop = await page.locator('#container2 .table-up-resize-box').evaluate((element) => {
+      return Number.parseFloat(window.getComputedStyle(element).top);
+    });
+    expect(newBoxTop).toBeCloseTo(boxTop + lineBound.height * 2, 4);
   });
 
-  await expect(scale).toBeVisible();
-  await expect(page.locator('#container2 .table-up-resize-box .table-up-resize-box__corner')).toBeVisible();
-  const newScaleTop = await scale.evaluate((element) => {
-    return Number.parseFloat(window.getComputedStyle(element).top);
-  });
-  expect(newScaleTop).toBeCloseTo(scaleTop + lineBound.height * 2, 4);
-  const newBoxTop = await page.locator('#container2 .table-up-resize-box').evaluate((element) => {
-    return Number.parseFloat(window.getComputedStyle(element).top);
-  });
-  expect(newBoxTop).toBeCloseTo(boxTop + lineBound.height * 2, 4);
-});
+  extendTest('test TableResizeScale should hide when table width switch full', async ({ page }) => {
+    await createTableBySelect(page, 'container1', 3, 3);
 
-extendTest('test TableResizeScale should hide when table width switch full', async ({ page }) => {
-  await createTableBySelect(page, 'container1', 3, 3);
+    const cell = page.locator('#editor1 .ql-editor .ql-table td').nth(0);
+    await cell.click();
+    await expect(page.locator('#container1 .table-up-scale')).toBeVisible();
+
+    await cell.click({ button: 'right' });
+    await page.locator('.table-up-menu.is-contextmenu .table-up-menu__item').filter({ hasText: 'Switch table width' }).first().click();
+    await expect(page.locator('#container1 .table-up-scale')).not.toBeVisible();
+  });
 
-  const cell = page.locator('#editor1 .ql-editor .ql-table td').nth(0);
-  await cell.click();
-  await expect(page.locator('#container1 .table-up-scale')).toBeVisible();
+  extendTest('TableResizeScale block should scroll with table wrapper', async ({ page, editorPage }) => {
+    editorPage.index = 0;
+    await editorPage.setContents([
+      { insert: '\n' },
+      { insert: { 'table-up-col': { tableId: '1', colId: '1', width: 500 } } },
+      { insert: { 'table-up-col': { tableId: '1', colId: '2', width: 500 } } },
+      { insert: { 'table-up-col': { tableId: '1', colId: '3', width: 500 } } },
+      { insert: '1' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
+      { insert: '2' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '2', rowspan: 1, colspan: 1 } }, insert: '\n' },
+      { insert: '3' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '3', rowspan: 1, colspan: 1 } }, insert: '\n' },
+      { insert: '4' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
+      { insert: '5' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '2', rowspan: 1, colspan: 1 } }, insert: '\n' },
+      { insert: '6' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '3', rowspan: 1, colspan: 1 } }, insert: '\n' },
+      { insert: '7' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '3', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
+      { insert: '8' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '3', colId: '2', rowspan: 1, colspan: 1 } }, insert: '\n' },
+      { insert: '9' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '3', colId: '3', rowspan: 1, colspan: 1 } }, insert: '\n' },
+      { insert: '\n' },
+    ]);
 
-  await cell.click({ button: 'right' });
-  await page.locator('.table-up-menu.is-contextmenu .table-up-menu__item').filter({ hasText: 'Switch table width' }).first().click();
-  await expect(page.locator('#container1 .table-up-scale')).not.toBeVisible();
+    const cell = page.locator('#container1 .ql-editor .ql-table td').nth(0);
+    await cell.click();
+
+    const scaleWrapper = page.locator('#container1 .table-up-scale');
+    const block = page.locator('#container1 .table-up-scale .table-up-scale__block');
+    await expect(block).toBeVisible();
+    const scaleWrapperBounding = (await scaleWrapper.boundingBox())!;
+    const blockBounding = (await block.boundingBox())!;
+    expect(scaleWrapperBounding).not.toBeNull();
+    expect(blockBounding).not.toBeNull();
+    expect(blockBounding.x + blockBounding.width).toBeGreaterThan(scaleWrapperBounding.x + scaleWrapperBounding.width);
+
+    await page.locator('#editor1 .ql-table-wrapper').evaluate((el) => {
+      el.scrollLeft = el.scrollWidth;
+    });
+    const scrollBlockBounding = (await block.boundingBox())!;
+    expect(scrollBlockBounding.x + scrollBlockBounding.width).toBeLessThanOrEqual(scaleWrapperBounding.x + scaleWrapperBounding.width);
+  });
 });
 
 extendTest('test TableResizeBox head click and shift click (column)', async ({ page }) => {

package/src/__tests__/unit/utils.ts

@@ -187,8 +187,7 @@ export function createTableDeltaOps(row: number, col: number, colOptions?: ColOp
     );
   }
   for (const [i, _] of new Array(col).fill(0).entries()) {
-    const value: TableColDeltaValue = { tableId, colId: `${i + 1}`, width: 1 / col * 100 };
-    value.full = full;
+    const value: TableColDeltaValue = { tableId, colId: `${i + 1}`, width: 1 / col * 100, full };
     if (!full) {
       value.width = width;
     }

package/src/formats/container-format.ts

@@ -15,8 +15,8 @@ export class ContainerFormat extends Container {
   static requiredContainer: TypeParchment.BlotConstructor;
   static defaultChild?: TypeParchment.BlotConstructor;
 
-  static allowAttrs = new Set<string>([]);
-  static allowDataAttrs = new Set<string>([]);
+  static allowAttrs = new Set<string>();
+  static allowDataAttrs = new Set<string>();
   // handle the attribute change when use `setFormatValue`
   static allowDataAttrsChangeHandler: Record<string, string> = {};
 

package/src/formats/table-body-format.ts

@@ -40,7 +40,7 @@ export class TableBodyFormat extends ContainerFormat {
   convertBody(tag: TableBodyTag) {
     const blots = this.descendants(TableCellInnerFormat);
     for (const blot of blots) {
-      (blot as any).wrapTag = tag;
+      blot.wrapTag = tag;
     }
   }
 

package/src/formats/table-caption-format.ts

@@ -31,7 +31,7 @@ export class TableCaptionFormat extends BlockOverride {
   static formats(domNode: HTMLElement) {
     const { tableId } = domNode.dataset;
     const value: TableCaptionValue = {
-      tableId: String(tableId),
+      tableId: tableId!,
       side: domNode.style.captionSide === 'bottom' ? 'bottom' : 'top',
     };
     return value;

package/src/modules/table-clipboard/paste-cell-into-cell.ts

@@ -17,8 +17,8 @@ interface CellUpdate {
   length: number;
   insertDelta: TypeDelta;
   cell: TableCellInnerFormat;
-  rowspan?: number;
-  colspan?: number;
+  rowspan: number;
+  colspan: number;
   emptyRow?: string[];
 }
 interface TableCellValueLike {

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

@@ -137,6 +137,12 @@ export class TableResizeLine extends TableResizeCommon {
       },
       onEnd: ({ position }) => {
         this.dragging = false;
+        // update the resizer position to the final position
+        if (this.colResizer) {
+          const resultX = this.dragXCommon.limitRange(this.tableBlot, position.x, true);
+          const rootRect = this.quill.root.getBoundingClientRect();
+          this.colResizer.style.left = `${resultX - rootRect.x}px`;
+        }
 
         this.updateTableCol(position.x);
         this.removeBreak();
@@ -198,6 +204,12 @@ export class TableResizeLine extends TableResizeCommon {
       },
       onEnd: ({ position }) => {
         this.dragging = false;
+        // update the resizer position to the final position
+        if (this.rowResizer) {
+          const resultY = this.dragYCommon.limitRange(this.tableBlot, position.y, true);
+          const rootRect = this.quill.root.getBoundingClientRect();
+          this.rowResizer.style.left = `${resultY - rootRect.y}px`;
+        }
 
         this.updateTableRow(position.y);
         this.removeBreak();

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

@@ -3,7 +3,7 @@ import type { TableUp } from '../../table-up';
 import type { TableResizeScaleOptions } from '../../utils';
 import Quill from 'quill';
 import { getTableMainRect } from '../../formats';
-import { addScrollEvent, clearScrollEvent, createBEM, tableUpSize } from '../../utils';
+import { addScrollEvent, clearScrollEvent, createBEM, dragElement, tableUpSize } from '../../utils';
 import { TableDomSelector } from '../table-dom-selector';
 import { isTableAlignRight } from './utils';
 
@@ -14,9 +14,6 @@ export class TableResizeScale extends TableDomSelector {
   tableMainBlot?: TableMainFormat;
   tableWrapperBlot?: TableWrapperFormat;
   bem = createBEM('scale');
-  startX: number = 0;
-  startY: number = 0;
-  offset: number = 6;
   options: TableResizeScaleOptions;
   root?: HTMLElement;
   block?: HTMLElement;
@@ -42,6 +39,7 @@ export class TableResizeScale extends TableDomSelector {
   resolveOptions(options: Partial<TableResizeScaleOptions>) {
     return Object.assign({
       blockSize: 12,
+      offset: 6,
     }, options);
   }
 
@@ -58,57 +56,38 @@ export class TableResizeScale extends TableDomSelector {
 
     let originColWidth: { blot: TableColFormat; width: number }[] = [];
     let originRowHeight: { blot: TableRowFormat; height: number }[] = [];
-    const handleMouseMove = (e: MouseEvent) => {
-      if (!this.tableMainBlot) return;
-      // divide equally by col count/row count
-      const isRight = isTableAlignRight(this.tableMainBlot) ? -1 : 1;
-      const diffX = (e.clientX - this.startX) * isRight;
-      const diffY = e.clientY - this.startY;
-      const itemWidth = Math.floor(diffX / originColWidth.length);
-      const itemHeight = Math.floor(diffY / originRowHeight.length);
 
-      for (const { blot, width } of originColWidth) {
-        blot.width = Math.max(width + itemWidth, tableUpSize.colMinWidthPx);
-      }
-      for (const { blot, height } of originRowHeight) {
-        blot.setHeight(`${Math.max(height + itemHeight, tableUpSize.rowMinHeightPx)}px`);
-      }
-    };
-    const handleMouseUp = () => {
-      originColWidth = [];
-      originRowHeight = [];
-      document.removeEventListener('mousemove', handleMouseMove);
-      document.removeEventListener('mouseup', handleMouseUp);
-    };
-    this.block.addEventListener('mousedown', (e) => {
-      if (!this.tableMainBlot || this.isTableOutofEditor()) return;
-      this.startX = e.clientX;
-      this.startY = e.clientY;
-      // save the origin width and height to calculate result width and height
-      originColWidth = this.tableMainBlot.getCols().map(col => ({ blot: col, width: Math.floor(col.width) }));
-      originRowHeight = this.tableMainBlot.getRows().map(row => ({ blot: row, height: Math.floor(row.domNode.getBoundingClientRect().height) }));
-      document.addEventListener('mousemove', handleMouseMove);
-      document.addEventListener('mouseup', handleMouseUp);
+    dragElement(this.block, {
+      onStart: () => {
+        if (!this.tableMainBlot) return;
+        // save the origin width and height to calculate result width and height
+        originColWidth = this.tableMainBlot.getCols().map(col => ({ blot: col, width: Math.floor(col.width) }));
+        originRowHeight = this.tableMainBlot.getRows().map(row => ({ blot: row, height: Math.floor(row.domNode.getBoundingClientRect().height) }));
+      },
+      onMove: ({ movePosition }) => {
+        if (!this.tableMainBlot) return;
+        // divide equally by col count/row count
+        const isRight = isTableAlignRight(this.tableMainBlot) ? -1 : 1;
+        const diffX = movePosition.x * isRight;
+        const diffY = movePosition.y;
+        const itemWidth = Math.floor(diffX / originColWidth.length);
+        const itemHeight = Math.floor(diffY / originRowHeight.length);
+
+        for (const { blot, width } of originColWidth) {
+          blot.width = Math.max(width + itemWidth, tableUpSize.colMinWidthPx);
+        }
+        for (const { blot, height } of originRowHeight) {
+          blot.setHeight(`${Math.max(height + itemHeight, tableUpSize.rowMinHeightPx)}px`);
+        }
+      },
+      onEnd: () => {
+        originColWidth = [];
+        originRowHeight = [];
+      },
     });
     this.block.addEventListener('dragstart', e => e.preventDefault());
   }
 
-  isTableOutofEditor(): boolean {
-    if (!this.tableMainBlot || !this.tableWrapperBlot || this.tableMainBlot.full) return false;
-    // if tableMain width larger than tableWrapper. reset tableMain width equal editor width
-    const tableRect = this.tableMainBlot.domNode.getBoundingClientRect();
-    const tableWrapperRect = this.tableWrapperBlot.domNode.getBoundingClientRect();
-    // equal scale
-    if (tableRect.width > tableWrapperRect.width) {
-      for (const col of this.tableMainBlot.getCols()) {
-        col.width = Math.floor((col.width / tableRect.width) * tableWrapperRect.width);
-      }
-      this.tableMainBlot.colWidthFillTable();
-      return true;
-    }
-    return false;
-  }
-
   update() {
     if (!this.block || !this.root || !this.tableMainBlot || !this.tableWrapperBlot) return;
     if (this.tableMainBlot.full) {
@@ -120,7 +99,7 @@ export class TableResizeScale extends TableDomSelector {
     const tableWrapperRect = this.tableWrapperBlot.domNode.getBoundingClientRect();
     const editorRect = this.quill.root.getBoundingClientRect();
     const { scrollTop, scrollLeft } = this.tableWrapperBlot.domNode;
-    const blockSize = this.options.blockSize * 2 + this.offset;
+    const blockSize = this.options.blockSize * 2 + this.options.offset;
     const rootWidth = Math.min(tableRect.width, tableWrapperRect.width) + blockSize;
     const rootHeight = Math.min(tableRect.height, tableWrapperRect.height) + blockSize;
     Object.assign(this.root.style, {
@@ -151,6 +130,7 @@ export class TableResizeScale extends TableDomSelector {
 
       this.resizeobserver.observe(this.tableMainBlot.domNode);
       addScrollEvent.call(this, this.quill.root, () => this.update());
+      addScrollEvent.call(this, this.tableWrapperBlot.domNode, () => this.update());
     }
     this.buildResizer();
   }
@@ -163,12 +143,12 @@ export class TableResizeScale extends TableDomSelector {
       this.root = undefined;
       this.block = undefined;
     }
+    clearScrollEvent.call(this);
   }
 
   destroy() {
     this.hide();
     this.quill.off(Quill.events.TEXT_CHANGE, this.updateWhenTextChange);
     this.resizeobserver.disconnect();
-    clearScrollEvent.call(this);
   }
 }

package/src/modules/table-scrollbar.ts

@@ -1,10 +1,29 @@
 import type { TableMainFormat } from '../formats';
 import type { TableUp } from '../table-up';
+import type { Position } from '../utils';
 import Quill from 'quill';
 import { getTableMainRect } from '../formats';
 import { addScrollEvent, clearScrollEvent, createBEM, debounce } from '../utils';
 import { TableDomSelector } from './table-dom-selector';
 
+const propertyMapY = {
+  size: 'height',
+  offset: 'offsetHeight',
+  scrollDirection: 'scrollTop',
+  scrollSize: 'scrollHeight',
+  axis: 'y',
+  direction: 'top',
+  client: 'clientY',
+} as const;
+const propertyMapX = {
+  size: 'width',
+  offset: 'offsetWidth',
+  scrollDirection: 'scrollLeft',
+  scrollSize: 'scrollWidth',
+  axis: 'x',
+  direction: 'left',
+  client: 'clientX',
+} as const;
 export class Scrollbar {
   minSize: number = 20;
   gap: number = 4;
@@ -16,22 +35,15 @@ export class Scrollbar {
   sizeWidth: string = '';
   sizeHeight: string = '';
   size: string = '';
-  thumbState: {
-    X: number;
-    Y: number;
-  } = {
-    X: 0,
-    Y: 0,
-  };
-
+  bem = createBEM('scrollbar');
+  tableMainBlot: TableMainFormat;
   ob: ResizeObserver;
   container: HTMLElement;
   scrollbar: HTMLElement;
   thumb: HTMLElement = document.createElement('div');
   scrollHandler: [HTMLElement, (e: Event) => void][] = [];
-  propertyMap: { readonly size: 'height'; readonly offset: 'offsetHeight'; readonly scrollDirection: 'scrollTop'; readonly scrollSize: 'scrollHeight'; readonly axis: 'Y'; readonly direction: 'top'; readonly client: 'clientY' } | { readonly size: 'width'; readonly offset: 'offsetWidth'; readonly scrollDirection: 'scrollLeft'; readonly scrollSize: 'scrollWidth'; readonly axis: 'X'; readonly direction: 'left'; readonly client: 'clientX' };
-  bem = createBEM('scrollbar');
-  tableMainBlot: TableMainFormat;
+  propertyMap: typeof propertyMapY | typeof propertyMapX;
+  thumbState: Position = { x: 0, y: 0 };
 
   get isVertical() {
     return this.options.isVertical;
@@ -40,25 +52,7 @@ export class Scrollbar {
   constructor(public quill: Quill, public table: HTMLElement, public options: { isVertical: boolean }) {
     this.tableMainBlot = Quill.find(this.table) as TableMainFormat;
     this.container = table.parentElement!;
-    this.propertyMap = this.isVertical
-      ? {
-          size: 'height',
-          offset: 'offsetHeight',
-          scrollDirection: 'scrollTop',
-          scrollSize: 'scrollHeight',
-          axis: 'Y',
-          direction: 'top',
-          client: 'clientY',
-        } as const
-      : {
-          size: 'width',
-          offset: 'offsetWidth',
-          scrollDirection: 'scrollLeft',
-          scrollSize: 'scrollWidth',
-          axis: 'X',
-          direction: 'left',
-          client: 'clientX',
-        } as const;
+    this.propertyMap = this.isVertical ? propertyMapY : propertyMapX;
     this.calculateSize();
     this.ob = new ResizeObserver(() => this.update());
     this.ob.observe(table);
@@ -189,7 +183,7 @@ export class Scrollbar {
     this.move = wrap[this.propertyMap.scrollDirection] * 100 / offset * (this.isVertical ? this.ratioY : this.ratioX);
     Object.assign(this.thumb.style, {
       [this.propertyMap.size]: this.size,
-      transform: `translate${this.propertyMap.axis}(${this.move}%)`,
+      transform: `translate${this.propertyMap.axis.toUpperCase()}(${this.move}%)`,
     });
   }
 

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":5764.352499999999,"failed":true}],[":__tests__/unit/table-redo-undo.test.ts",{"duration":7413.697700000001,"failed":true}],[":__tests__/unit/table-hack.test.ts",{"duration":2512.8070000000002,"failed":false}],[":__tests__/unit/table-cell-merge.test.ts",{"duration":3206.3629,"failed":false}],[":__tests__/unit/table-insert.test.ts",{"duration":4597.281199999999,"failed":true}],[":__tests__/unit/table-blots.test.ts",{"duration":2687.4262,"failed":true}],[":__tests__/unit/utils.test.ts",{"duration":732.1670999999997,"failed":false}],[":__tests__/unit/table-caption.test.ts",{"duration":1031.1293,"failed":true}],[":__tests__/unit/table-remove.test.ts",{"duration":2594.6331,"failed":true}]]}
+{"version":"3.2.3","results":[[":__tests__/unit/utils.test-d.ts",{"duration":0,"failed":false}],[":__tests__/unit/table-clipboard.test.ts",{"duration":5764.352499999999,"failed":true}],[":__tests__/unit/table-redo-undo.test.ts",{"duration":7413.697700000001,"failed":true}],[":__tests__/unit/table-hack.test.ts",{"duration":2512.8070000000002,"failed":false}],[":__tests__/unit/table-cell-merge.test.ts",{"duration":3206.3629,"failed":false}],[":__tests__/unit/table-insert.test.ts",{"duration":4597.281199999999,"failed":true}],[":__tests__/unit/table-blots.test.ts",{"duration":2687.4262,"failed":true}],[":__tests__/unit/utils.test.ts",{"duration":732.1670999999997,"failed":false}],[":__tests__/unit/table-caption.test.ts",{"duration":0,"failed":true}],[":__tests__/unit/table-remove.test.ts",{"duration":2594.6331,"failed":true}]]}

package/src/style/table-selection.less

@@ -14,10 +14,5 @@
       background-color: .getCssVar(select-color) [];
       pointer-events: none;
     }
-    // &--selected {
-    //   ::selection {
-    //     background-color: initial !important;
-    //   }
-    // }
   }
 }

package/src/utils/types.ts

@@ -34,6 +34,7 @@ export interface TableSelectionOptions {
 }
 export interface TableResizeScaleOptions {
   blockSize: number;
+  offset: number;
 }
 export interface TableResizeBoxOptions {
   size: number;