quill-table-up 2.1.9 → 2.2.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "quill-table-up",
   "type": "module",
-  "version": "2.1.9",
+  "version": "2.2.0",
   "packageManager": "pnpm@9.9.0",
   "description": "A table module for quill2.x",
   "author": "zzxming",
@@ -48,30 +48,30 @@
   },
   "devDependencies": {
     "@esbuild-kit/cjs-loader": "^2.4.4",
-    "@playwright/test": "^1.50.1",
-    "@rollup/plugin-node-resolve": "^15.3.1",
+    "@playwright/test": "^1.52.0",
+    "@rollup/plugin-node-resolve": "^16.0.1",
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^11.1.6",
-    "@types/node": "^20.17.22",
-    "@typescript-eslint/eslint-plugin": "^8.25.0",
-    "@typescript-eslint/parser": "^8.25.0",
-    "@vitest/coverage-v8": "^2.1.9",
-    "@vitest/ui": "^2.1.9",
-    "@zzxming/eslint-config": "^0.4.0",
-    "autoprefixer": "^10.4.20",
-    "eslint": "^9.21.0",
+    "@types/node": "^20.17.23",
+    "@typescript-eslint/eslint-plugin": "^8.31.1",
+    "@typescript-eslint/parser": "^8.31.1",
+    "@vitest/coverage-v8": "^3.1.2",
+    "@vitest/ui": "^3.1.2",
+    "@zzxming/eslint-config": "0.4.5",
+    "autoprefixer": "^10.4.21",
+    "eslint": "^9.25.0",
     "gulp": "^4.0.2",
     "gulp-clean-css": "^4.3.0",
     "gulp-less": "^5.0.0",
     "gulp-postcss": "^10.0.0",
-    "jsdom": "^25.0.1",
+    "jsdom": "^26.1.0",
     "parchment": "^3.0.0",
     "postcss-pxtorem": "^6.1.0",
     "resize-observer-polyfill": "^1.5.1",
-    "rollup": "^4.34.9",
-    "rollup-plugin-dts": "^6.1.1",
+    "rollup": "^4.40.1",
+    "rollup-plugin-dts": "^6.2.1",
     "rollup-plugin-svg-import": "^3.0.0",
-    "typescript": "^5.7.3",
-    "vitest": "^2.1.9"
+    "typescript": "~5.7.3",
+    "vitest": "^3.1.2"
   }
 }

package/src/__tests__/e2e/editor-page.ts

@@ -67,4 +67,10 @@ export class EditorPage {
       return window.quills[index].blur();
     }, { index: this.index });
   }
+
+  enable(enabled: boolean) {
+    return this.page.evaluate(({ index, enabled }) => {
+      return window.quills[index].enable(enabled);
+    }, { index: this.index, enabled });
+  }
 }

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

@@ -0,0 +1,52 @@
+import { expect, test } from '@playwright/test';
+import { extendTest } from './utils';
+
+test.beforeEach(async ({ page }) => {
+  await page.goto('http://127.0.0.1:5500/docs/test.html');
+  page.locator('.ql-container.ql-snow');
+});
+
+extendTest('test table full width switch redo and undo', async ({ page, editorPage }) => {
+  editorPage.index = 0;
+  await editorPage.setContents([
+    { insert: '\n' },
+    { insert: { 'table-up-col': { tableId: '1', colId: '1', full: false, width: 100 } } },
+    { insert: { 'table-up-col': { tableId: '1', colId: '2', full: false, width: 100 } } },
+    { insert: { 'table-up-col': { tableId: '1', colId: '3', full: false, width: 100 } } },
+    { insert: { 'table-up-col': { tableId: '1', colId: '4', full: false, width: 100 } } },
+    { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
+    { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '2', rowspan: 1, colspan: 1 } }, insert: '\n' },
+    { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '3', rowspan: 1, colspan: 1 } }, insert: '\n' },
+    { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '4', rowspan: 1, colspan: 1 } }, insert: '\n' },
+    { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
+    { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '2', rowspan: 1, colspan: 1 } }, insert: '\n' },
+    { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '3', rowspan: 1, colspan: 1 } }, insert: '\n' },
+    { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '4', rowspan: 1, colspan: 1 } }, insert: '\n' },
+    { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '3', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
+    { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '3', colId: '2', rowspan: 1, colspan: 1 } }, insert: '\n' },
+    { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '3', colId: '3', rowspan: 1, colspan: 1 } }, insert: '\n' },
+    { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '3', colId: '4', rowspan: 1, colspan: 1 } }, insert: '\n' },
+    { insert: '\n' },
+  ]);
+  await page.waitForTimeout(1000);
+
+  const cell = page.locator('#editor1 .ql-editor .ql-table td').nth(0);
+  await cell.click();
+  await cell.click({ button: 'right' });
+  await page.locator('.table-up-menu.is-contextmenu .table-up-menu__item').filter({ hasText: 'Switch table width' }).first().click();
+  expect(await page.locator('#editor1 .ql-editor .ql-table[data-full="true"]').count()).toBe(1);
+  expect(await page.locator('#editor1 .ql-editor .ql-table colgroup[data-full="true"]').count()).toBe(1);
+  expect(await page.locator('#editor1 .ql-editor .ql-table col[data-full="true"]').count()).toBe(4);
+  await page.waitForTimeout(1000);
+
+  await page.keyboard.press('Control+z');
+  expect(await page.locator('#editor1 .ql-editor .ql-table[data-full="true"]').count()).toBe(0);
+  expect(await page.locator('#editor1 .ql-editor .ql-table colgroup[data-full="true"]').count()).toBe(0);
+  expect(await page.locator('#editor1 .ql-editor .ql-table col[width="100px"]').count()).toBe(4);
+  await page.waitForTimeout(1000);
+
+  await page.keyboard.press('Control+Shift+z');
+  expect(await page.locator('#editor1 .ql-editor .ql-table[data-full="true"]').count()).toBe(1);
+  expect(await page.locator('#editor1 .ql-editor .ql-table colgroup[data-full="true"]').count()).toBe(1);
+  expect(await page.locator('#editor1 .ql-editor .ql-table col[data-full="true"]').count()).toBe(4);
+});

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

@@ -0,0 +1,93 @@
+import { expect, test } from '@playwright/test';
+import { extendTest } from './utils';
+
+test.beforeEach(async ({ page }) => {
+  await page.goto('http://127.0.0.1:5500/docs/test.html');
+  page.locator('.ql-container.ql-snow');
+});
+
+extendTest('text tableCaption insert', async ({ page, editorPage }) => {
+  editorPage.index = 0;
+  await editorPage.setContents([
+    { insert: '\n' },
+    { insert: { 'table-up-col': { tableId: '1', colId: '1', full: false, width: 100 } } },
+    { insert: { 'table-up-col': { tableId: '1', colId: '2', full: false, width: 100 } } },
+    { insert: { 'table-up-col': { tableId: '1', colId: '3', full: false, width: 100 } } },
+    { insert: { 'table-up-col': { tableId: '1', colId: '4', full: false, width: 100 } } },
+    { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
+    { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '2', rowspan: 1, colspan: 1 } }, insert: '\n' },
+    { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '3', rowspan: 1, colspan: 1 } }, insert: '\n' },
+    { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '4', rowspan: 1, colspan: 1 } }, insert: '\n' },
+    { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
+    { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '2', rowspan: 1, colspan: 1 } }, insert: '\n' },
+    { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '3', rowspan: 1, colspan: 1 } }, insert: '\n' },
+    { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '4', rowspan: 1, colspan: 1 } }, insert: '\n' },
+    { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '3', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
+    { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '3', colId: '2', rowspan: 1, colspan: 1 } }, insert: '\n' },
+    { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '3', colId: '3', rowspan: 1, colspan: 1 } }, insert: '\n' },
+    { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '3', colId: '4', rowspan: 1, colspan: 1 } }, insert: '\n' },
+    { insert: '\n' },
+  ]);
+  await page.waitForTimeout(1000);
+
+  const cell = page.locator('#editor1 .ql-editor .ql-table td').nth(0);
+  await cell.click();
+  await expect(page.locator('#container1 .table-up-toolbox .table-up-selection .table-up-selection__line')).toBeVisible();
+  await cell.click({ button: 'right' });
+  await page.locator('.table-up-menu.is-contextmenu .table-up-menu__item').filter({ hasText: 'Insert table caption' }).first().click();
+
+  const caption = page.locator('#container1 .ql-table caption');
+  const tbody = page.locator('#container1 .ql-table tbody');
+  await expect(caption).toBeVisible();
+  expect(await caption.textContent()).toContain('Table Caption');
+  const captionBox = (await caption.boundingBox())!;
+  const tbodyBox = (await tbody.boundingBox())!;
+  expect(captionBox).not.toBeNull();
+  expect(tbodyBox).not.toBeNull();
+  expect(captionBox.y).toBeLessThan(tbodyBox.y);
+});
+
+extendTest('tableCaption side switch', async ({ page, editorPage }) => {
+  editorPage.index = 0;
+  await editorPage.setContents([
+    { insert: '\nTable Caption' },
+    { attributes: { 'table-up-caption': { tableId: '1', side: 'top' } }, insert: '\n' },
+    { insert: { 'table-up-col': { tableId: '1', colId: '1', full: false, width: 100 } } },
+    { insert: { 'table-up-col': { tableId: '1', colId: '2', full: false, width: 100 } } },
+    { insert: { 'table-up-col': { tableId: '1', colId: '3', full: false, width: 100 } } },
+    { 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' },
+  ]);
+
+  const captionUINode = page.locator('#container1 .ql-table caption .ql-ui');
+  expect(captionUINode).not.toBeNull();
+
+  const caption = page.locator('#container1 .ql-table caption');
+  const boundingBox = (await caption.boundingBox())!;
+  expect(caption).not.toBeNull();
+  await page.mouse.move(boundingBox.x + boundingBox.width / 2, boundingBox.y + boundingBox.height / 2);
+  await expect(captionUINode).toBeVisible();
+  await page.mouse.move(0, 0);
+  await expect(captionUINode).not.toBeVisible();
+
+  editorPage.enable(false);
+  await page.mouse.move(boundingBox.x + boundingBox.width / 2, boundingBox.y + boundingBox.height / 2);
+  await expect(captionUINode).not.toBeVisible();
+});

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

@@ -106,3 +106,46 @@ extendTest('toolbar item handler should trigger source USER', async ({ page, edi
   const result = await textChangePromise;
   expect(result).toBe('user');
 });
+
+extendTest('getSemanticHTML should not effect editable when manual copy or cut', async ({ page, editorPage }) => {
+  editorPage.index = 0;
+  await editorPage.setContents([
+    { insert: '\nTable Caption' },
+    { attributes: { 'table-up-caption': { tableId: '1', side: 'top' } }, insert: '\n' },
+    { insert: { 'table-up-col': { tableId: '1', colId: '1', full: false, width: 100 } } },
+    { insert: { 'table-up-col': { tableId: '1', colId: '2', full: false, width: 100 } } },
+    { 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: '2', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
+    { insert: '4' },
+    { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '2', rowspan: 1, colspan: 1 } }, insert: '\n' },
+    { insert: '\n' },
+  ]);
+  const tableCaption = page.locator('#container1 .ql-table .ql-table-caption');
+  const td = page.locator('#container1 .ql-table td .ql-table-cell-inner').nth(0);
+  await expect(tableCaption).toHaveAttribute('contenteditable', 'true');
+  await expect(td).toHaveAttribute('contenteditable', 'true');
+
+  await editorPage.setSelection(2, 4);
+  await page.keyboard.press('Control+C');
+  await expect(tableCaption).toHaveAttribute('contenteditable', 'true');
+  await expect(tableCaption).toContainText('Table Caption');
+
+  await editorPage.setSelection(2, 4);
+  await page.keyboard.press('Control+X');
+  await expect(tableCaption).toHaveAttribute('contenteditable', 'true');
+  await expect(tableCaption).toContainText('T Caption');
+
+  await editorPage.setSelection(14, 1);
+  await page.keyboard.press('Control+C');
+  await expect(td).toHaveAttribute('contenteditable', 'true');
+  await expect(td).toContainText('1');
+
+  await editorPage.setSelection(14, 1);
+  await page.keyboard.press('Control+X');
+  await expect(td).toHaveAttribute('contenteditable', 'true');
+  await expect(td).toContainText('');
+});

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

@@ -83,12 +83,12 @@ test('test TableResizeLine full width', async ({ page }) => {
   expect(cellBounding).not.toBeNull();
   expect(tableBounding).not.toBeNull();
 
-  await page.mouse.move(cellBounding.x + 10, cellBounding.y + 10);
+  await page.mouse.move(cellBounding.x + cellBounding.width / 2, cellBounding.y + cellBounding.height / 2);
   const colBoundingBox = (await page.locator('#editor3 .table-up-resize-line__col').boundingBox())!;
   expect(colBoundingBox).not.toBeNull();
-  await page.mouse.move(colBoundingBox.x + colBoundingBox.width / 2, colBoundingBox.y + colBoundingBox.height / 2);
+  await page.mouse.move(colBoundingBox.x + colBoundingBox.width / 2, colBoundingBox.y + cellBounding.height / 2);
   await page.mouse.down();
-  await page.mouse.move(colBoundingBox.x + colBoundingBox.width / 2 + tableBounding.width * 0.05, colBoundingBox.y + colBoundingBox.height / 2);
+  await page.mouse.move(colBoundingBox.x + colBoundingBox.width / 2 + tableBounding.width * 0.05, colBoundingBox.y + cellBounding.height / 2);
   await page.mouse.up();
   const cols = page.locator('#editor3 .ql-table-wrapper col');
   await expect(cols.nth(1)).toHaveAttribute('width', '30%');
@@ -162,19 +162,150 @@ extendTest('test TableResizeBox and TableResizeScale should update when text cha
   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 scaleTop = await scale.evaluate((element) => {
+  const newScaleTop = await scale.evaluate((element) => {
     return Number.parseFloat(window.getComputedStyle(element).top);
   });
-  expect(scaleTop).toBeCloseTo(lineBound.height * 3, 4);
+  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);
+
+  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();
+});
+
+extendTest('test TableResizeBox head click and shift click (column)', async ({ page }) => {
+  await createTableBySelect(page, 'container2', 3, 3);
+
+  const firstCell = page.locator('#editor2').getByRole('cell').nth(0);
+  await firstCell.click();
+  expect(page.locator('#editor2 .table-up-resize-box .table-up-resize-box__corner')).toBeVisible();
+
+  await page.locator('#editor2 .table-up-resize-box__col-header').nth(0).click();
+  const selection = page.locator('#editor2 .table-up-selection .table-up-selection__line');
+  const selectionBounding = (await selection.boundingBox())!;
+  expect(selectionBounding).not.toBeNull();
+
+  const tableBounding = (await page.locator('#editor2 .ql-table').boundingBox())!;
+  expect(tableBounding).not.toBeNull();
+  // minus beacuse `border-collapse: collapse;`
+  expect(selectionBounding.height).toBe(tableBounding.height - 1);
+
+  await page.keyboard.down('Shift');
+  await page.locator('#editor2 .table-up-resize-box__col-header').nth(2).click();
+
+  const selectionBounding2 = (await selection.boundingBox())!;
+  expect(selectionBounding2).not.toBeNull();
+  expect(selectionBounding2.height).toBe(tableBounding.height - 1);
+  expect(selectionBounding2.width).toBe(tableBounding.width - 1);
+});
+
+extendTest('test TableResizeBox head click and shift click (row)', async ({ page }) => {
+  await createTableBySelect(page, 'container2', 3, 3);
+
+  const firstCell = page.locator('#editor2').getByRole('cell').nth(0);
+  await firstCell.click();
+  expect(page.locator('#editor2 .table-up-resize-box .table-up-resize-box__corner')).toBeVisible();
+
+  await page.locator('#editor2 .table-up-resize-box__row-header').nth(0).click();
+  const selection = page.locator('#editor2 .table-up-selection .table-up-selection__line');
+  const selectionBounding = (await selection.boundingBox())!;
+  expect(selectionBounding).not.toBeNull();
+
+  const tableBounding = (await page.locator('#editor2 .ql-table').boundingBox())!;
+  expect(tableBounding).not.toBeNull();
+  // minus beacuse `border-collapse: collapse;`
+  expect(selectionBounding.width).toBe(tableBounding.width - 1);
+
+  await page.keyboard.down('Shift');
+  await page.locator('#editor2 .table-up-resize-box__row-header').nth(2).click();
+
+  const selectionBounding2 = (await selection.boundingBox())!;
+  expect(selectionBounding2).not.toBeNull();
+  expect(selectionBounding2.height).toBe(tableBounding.height - 1);
+  expect(selectionBounding2.width).toBe(tableBounding.width - 1);
+});
+
+extendTest('test TableResizeBox head click and shift click (row mixin column)', async ({ page }) => {
+  await createTableBySelect(page, 'container2', 3, 3);
+  const firstCell = page.locator('#editor2').getByRole('cell').nth(0);
+  await firstCell.click();
+  expect(page.locator('#editor2 .table-up-resize-box .table-up-resize-box__corner')).toBeVisible();
+
+  await page.locator('#editor2 .table-up-resize-box__row-header').nth(1).click();
+  await page.keyboard.down('Shift');
+  await page.locator('#editor2 .table-up-resize-box__col-header').nth(1).click();
+
+  const selectionBounding = (await page.locator('#editor2 .table-up-selection .table-up-selection__line').boundingBox())!;
+  expect(selectionBounding).not.toBeNull();
+  const cellBounding = (await page.locator('#editor2 .ql-editor .ql-table td').nth(0).boundingBox())!;
+  expect(cellBounding).not.toBeNull();
+  expect(selectionBounding.height).toBe(cellBounding.height * 2);
+  expect(selectionBounding.width).toBe(cellBounding.width * 2);
+});
+
+extendTest('test TableResizeBox head click and shift click (scroll table wrapper)', async ({ page, editorPage }) => {
+  editorPage.index = 1;
+  editorPage.setContents([
+    { insert: '\n' },
+    { insert: { 'table-up-col': { tableId: '1', colId: '1', full: false, width: 500 } } },
+    { insert: { 'table-up-col': { tableId: '1', colId: '2', full: false, width: 500 } } },
+    { insert: { 'table-up-col': { tableId: '1', colId: '3', full: false, width: 500 } } },
+    { insert: { 'table-up-col': { tableId: '1', colId: '4', full: false, width: 500 } } },
+    { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
+    { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '2', rowspan: 1, colspan: 1 } }, insert: '\n' },
+    { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '3', rowspan: 1, colspan: 1 } }, insert: '\n' },
+    { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '4', rowspan: 1, colspan: 1 } }, insert: '\n' },
+    { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
+    { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '2', rowspan: 1, colspan: 1 } }, insert: '\n' },
+    { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '3', rowspan: 1, colspan: 1 } }, insert: '\n' },
+    { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '4', rowspan: 1, colspan: 1 } }, insert: '\n' },
+    { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '3', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
+    { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '3', colId: '2', rowspan: 1, colspan: 1 } }, insert: '\n' },
+    { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '3', colId: '3', rowspan: 1, colspan: 1 } }, insert: '\n' },
+    { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '3', colId: '4', rowspan: 1, colspan: 1 } }, insert: '\n' },
+    { insert: '\n' },
+  ]);
+
+  const firstCell = page.locator('#editor2').getByRole('cell').nth(0);
+  await firstCell.click();
+  expect(page.locator('#editor2 .table-up-resize-box .table-up-resize-box__corner')).toBeVisible();
+  await page.locator('#editor2 .ql-table-wrapper').evaluate((el) => {
+    el.scrollLeft = el.scrollWidth;
+  });
+
+  await page.locator('#editor2 .table-up-resize-box__col-header').nth(2).click();
+  await page.locator('#editor2 .ql-table-wrapper').evaluate((el) => {
+    el.scrollLeft = 0;
+  });
+  await page.keyboard.down('Shift');
+  await page.locator('#editor2 .table-up-resize-box__col-header').nth(0).click();
+
+  const selectionBounding = (await page.locator('#editor2 .table-up-selection .table-up-selection__line').boundingBox())!;
+  const cellBounding = (await page.locator('#editor2 .ql-editor .ql-table td').nth(0).boundingBox())!;
+  expect(cellBounding).not.toBeNull();
+  expect(selectionBounding.width).toBe(cellBounding.width * 3);
+});

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

@@ -54,31 +54,28 @@ test('test TableSelection vertical', async ({ page }) => {
   const cellBounding = (await cell.boundingBox())!;
   expect(cellBounding).not.toBeNull();
   await cell.click();
-  await cell.click();
-  const selectionLine = page.locator('#editor1 .table-up-selection__line');
-  await expect(selectionLine).toBeVisible();
+  await expect(page.locator('#editor1 .table-up-selection__line')).toBeVisible();
 
   await page.locator('#editor1 .ql-editor .ql-table td').nth(0).click();
   await page.locator('#editor1 .ql-editor .ql-table td').nth(0).click();
-  await expect(selectionLine).toBeVisible();
+  await expect(page.locator('#editor1 .table-up-selection__line')).toBeVisible();
   await page.mouse.down();
-  await page.mouse.move(cellBounding.x, cellBounding.y + cellBounding.height * 3);
+  await page.mouse.move(cellBounding.x + cellBounding.width * 0.5, cellBounding.y + cellBounding.height * 3);
   await page.mouse.up();
   await cell.click({ button: 'right' });
   await page.locator('.table-up-menu.is-contextmenu .table-up-menu__item').filter({ hasText: 'Merge Cell' }).first().click();
 
   await page.locator('#editor1 .ql-editor .ql-table td').nth(0).click();
-  await page.locator('#editor1 .ql-editor .ql-table td').nth(0).click();
-  await expect(selectionLine).toBeVisible();
+  await expect(page.locator('#editor1 .table-up-selection__line')).toBeVisible();
   await page.mouse.down();
-  await page.mouse.move(cellBounding.x + cellBounding.width * 2 - 10, cellBounding.y + 10);
+  await page.mouse.move(cellBounding.x + cellBounding.width * 1.5, cellBounding.y + cellBounding.height * 0.5);
   await page.mouse.up();
 
   expect(
-    Number.parseFloat(await selectionLine.evaluate(el => getComputedStyle(el).width)),
+    Number.parseFloat(await page.locator('#editor1 .table-up-selection__line').evaluate(el => getComputedStyle(el).width)),
   ).toBeCloseTo(cellBounding.width * 2, -1);
   expect(
-    Number.parseFloat(await selectionLine.evaluate(el => getComputedStyle(el).height)),
+    Number.parseFloat(await page.locator('#editor1 .table-up-selection__line').evaluate(el => getComputedStyle(el).height)),
   ).toBeCloseTo(cellBounding.height * 3, -1);
 });
 

package/src/__tests__/e2e/utils.ts

@@ -2,10 +2,10 @@ import type { Page } from '@playwright/test';
 import { test } from '@playwright/test';
 import { EditorPage } from './editor-page';
 
-export const createTableBySelect = async (page: Page, container: string, row: number, col: number) => {
+export async function createTableBySelect(page: Page, container: string, row: number, col: number) {
   await page.locator(`#${container} .ql-toolbar .ql-table-up.ql-picker`).click();
   await page.locator(`#${container} .ql-toolbar .ql-custom-select .table-up-select-box__item[data-row="${row}"][data-col="${col}"]`).click();
-};
+}
 
 export const extendTest = test.extend<{
   editorPage: EditorPage;