quill-table-up 2.0.1 → 2.0.3

package/dist/table-creator.css

@@ -1 +1 @@
-.table-up-input__item{--input-height:2rem;--input-inner-height:calc(var(--input-height) - 0.125rem);--input-color-text:#606266;--input-color-boxshaow:#dcdfe6;--input-color-focus:#409eff;--input-color-error:#f56c6c;--input-boxshaow:0 0 0 0.0625rem var(--input-color-boxshaow) inset;--input-boxshaow-focus:0 0 0 0.0625rem var(--input-color-focus) inset;--input-boxshaow-error:0 0 0 0.0625rem var(--input-color-error) inset;display:flex;align-items:center}.table-up-input__item+.table-up-input__item{margin-top:1.125rem}.table-up-input__label{width:5rem;flex-shrink:0}.table-up-input__input{box-sizing:border-box;position:relative;display:flex;flex-wrap:wrap;width:100%;height:var(--input-height);line-height:var(--input-height);padding:.0625rem .5rem;border-radius:.25rem;box-shadow:var(--input-boxshaow);transition:box-shadow .2s linear}.table-up-input__input.focus{box-shadow:var(--input-boxshaow-focus)}.table-up-input__input input{width:100%;height:var(--input-inner-height);line-height:var(--input-inner-height);flex-grow:1;font-size:.875rem;color:var(--input-color-text);outline:0;border:0;padding:0}.table-up-input__input.error{box-shadow:var(--input-boxshaow-error)}.table-up-input__error-tip{position:absolute;top:100%;left:0;font-size:.75rem;color:var(--input-color-error);line-height:1rem}.ql-snow .table-up-select-box{--select-box-color-bg-hover:#f5f5f5;--select-box-color-bg-active:#e0f2fe;--select-box-custom-color-text:#0d0d0d;--select-box-custom-color-bg:transparent;--select-box-custom-color-bg-hover:#ebebeb}.table-up-select-box{--select-box-color-border:#e5e7eb;--select-box-border:0.0625rem solid var(--select-box-color-border);--select-box-color-active:#0ea5e9;--select-box-color-bg-hover:#f5f5f5;--select-box-color-bg-active:transparent;--select-box-custom-color-text:#f5f5f5;--select-box-custom-color-bg:transparent;--select-box-custom-color-bg-hover:#2c2c2c}.table-up-select-box__block{display:flex;width:10rem;flex-wrap:wrap;align-items:center;justify-content:center}.table-up-select-box__item{margin:.125rem;height:1rem;width:1rem;border:var(--select-box-border)}.table-up-select-box__item.active{border-color:var(--select-box-color-active);background-color:var(--select-box-color-bg-active)}.table-up-select-box__custom{padding:.5rem;color:var(--select-box-custom-color-text);background-color:var(--select-box-custom-color-bg);font-size:1rem;text-align:center;cursor:pointer}.table-up-select-box__custom:hover{background-color:var(--select-box-custom-color-bg-hover)}.table-up-table-creator{padding:1.5rem}.table-up-table-creator__input{display:flex;flex-direction:column;width:100%}.table-up-table-creator__control{margin-top:1rem;text-align:right}
+.table-up-input__item{--input-height:2rem;--input-inner-height:calc(var(--input-height) - 0.125rem);--input-color-text:#606266;--input-color-boxshaow:#dcdfe6;--input-color-focus:#409eff;--input-color-error:#f56c6c;--input-boxshaow:0 0 0 0.0625rem var(--input-color-boxshaow) inset;--input-boxshaow-focus:0 0 0 0.0625rem var(--input-color-focus) inset;--input-boxshaow-error:0 0 0 0.0625rem var(--input-color-error) inset;display:flex;align-items:center}.table-up-input__item+.table-up-input__item{margin-top:1.125rem}.table-up-input__label{width:5rem;flex-shrink:0}.table-up-input__input{box-sizing:border-box;position:relative;display:flex;flex-wrap:wrap;width:100%;height:var(--input-height);line-height:var(--input-height);padding:.0625rem .5rem;border-radius:.25rem;box-shadow:var(--input-boxshaow);transition:box-shadow .2s linear}.table-up-input__input.focus{box-shadow:var(--input-boxshaow-focus)}.table-up-input__input input{width:100%;height:var(--input-inner-height);line-height:var(--input-inner-height);flex-grow:1;font-size:.875rem;color:var(--input-color-text);outline:0;border:0;padding:0}.table-up-input__input.error{box-shadow:var(--input-boxshaow-error)}.table-up-input__error-tip{position:absolute;top:100%;left:0;font-size:.75rem;color:var(--input-color-error);line-height:1rem}.ql-snow .table-up-select-box{--select-box-color-bg-hover:#f5f5f5;--select-box-color-bg-active:#e0f2fe;--select-box-custom-color-text:#0d0d0d;--select-box-custom-color-bg:transparent;--select-box-custom-color-bg-hover:#ebebeb}.table-up-select-box{--select-box-color-border:#e5e7eb;--select-box-border:0.0625rem solid var(--select-box-color-border);--select-box-color-active:#0ea5e9;--select-box-color-bg-hover:#f5f5f5;--select-box-color-bg-active:transparent;--select-box-custom-color-text:#f5f5f5;--select-box-custom-color-bg:transparent;--select-box-custom-color-bg-hover:#2c2c2c}.table-up-select-box__block{display:flex;width:10rem;flex-wrap:wrap;align-items:center;justify-content:center}.table-up-select-box__item{margin:.125rem;height:1rem;width:1rem;border:var(--select-box-border)}.table-up-select-box__item.active{border-color:var(--select-box-color-active);background-color:var(--select-box-color-bg-active)}.table-up-select-box__custom{padding:.5rem;color:var(--select-box-custom-color-text);background-color:var(--select-box-custom-color-bg);font-size:1rem;text-align:center;cursor:pointer}.table-up-select-box__custom:hover{background-color:var(--select-box-custom-color-bg-hover)}.table-up-creator{padding:1.5rem}.table-up-creator__input{display:flex;flex-direction:column;width:100%}.table-up-creator__control{margin-top:1rem;text-align:right}.table-up-creator__checkbox{--active-color:#506eec;--mark-bg-color:#fff;--mark-border-color:#212121;display:flex;align-items:center;margin-top:.25rem;position:relative;cursor:pointer;font-size:.75rem;-webkit-user-select:none;-moz-user-select:none;user-select:none}.table-up-creator__checkbox input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.table-up-creator__checkbox input:checked~.table-up-creator__mark{--mark-bg-color:var(--active-color);--mark-border-color:var(--active-color)}.table-up-creator__checkbox input:checked~.table-up-creator__mark:after{display:block}.table-up-creator__mark{position:relative;top:0;left:0;height:1.125rem;width:1.125rem;margin-right:.25rem;background:var(--mark-bg-color);border:.0625rem solid var(--mark-border-color);border-radius:.3125rem}.table-up-creator__mark::after{content:'';position:absolute;display:none;left:.3125rem;top:.125rem;width:.3125rem;height:.5625rem;border:solid #fff;border-width:0 .125rem .125rem 0;transform:rotate(45deg)}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "quill-table-up",
   "type": "module",
-  "version": "2.0.1",
+  "version": "2.0.3",
   "packageManager": "pnpm@9.9.0",
   "description": "A table module for quill2.x",
   "author": "zzxming",
@@ -26,7 +26,8 @@
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
   "scripts": {
     "lint": "eslint . --cache",
@@ -43,7 +44,8 @@
     "quill": "^2.0.0"
   },
   "dependencies": {
-    "@floating-ui/dom": "^1.6.12"
+    "@floating-ui/dom": "^1.6.12",
+    "@zzxming/eslint-config": "^0.3.5"
   },
   "devDependencies": {
     "@esbuild-kit/cjs-loader": "^2.4.4",
@@ -52,23 +54,17 @@
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^11.1.6",
     "@types/node": "^20.14.10",
-    "@typescript-eslint/eslint-plugin": "^8.0.0",
-    "@typescript-eslint/parser": "^8.0.0",
+    "@typescript-eslint/eslint-plugin": "^8.18.2",
+    "@typescript-eslint/parser": "^8.18.2",
     "@vitest/coverage-v8": "^2.0.5",
     "@vitest/ui": "^2.0.5",
-    "@zzxming/eslint-config": "^0.3.4",
     "autoprefixer": "^10.4.19",
-    "eslint": "^9.11.1",
-    "eslint-merge-processors": "^0.1.0",
-    "eslint-plugin-jsonc": "^2.16.0",
-    "eslint-plugin-markdown": "^5.1.0",
-    "eslint-plugin-yml": "^1.14.0",
+    "eslint": "^9.17.0",
     "gulp": "^4.0.0",
     "gulp-clean-css": "^4.3.0",
     "gulp-less": "^5.0.0",
     "gulp-postcss": "^10.0.0",
     "jsdom": "^25.0.0",
-    "jsonc-eslint-parser": "^2.4.0",
     "parchment": "^3.0.0",
     "postcss-pxtorem": "^6.1.0",
     "resize-observer-polyfill": "^1.5.1",
@@ -76,7 +72,6 @@
     "rollup-plugin-dts": "^6.1.1",
     "rollup-plugin-svg-import": "^3.0.0",
     "typescript": "^5.5.3",
-    "vitest": "^2.0.5",
-    "yaml-eslint-parser": "^1.2.3"
+    "vitest": "^2.0.5"
   }
 }

package/src/__tests__/e2e/custom-creator.test.ts

@@ -0,0 +1,44 @@
+import { expect, test } from '@playwright/test';
+import { createTableBySelect } from './utils';
+
+test.beforeEach(async ({ page }) => {
+  await page.goto('http://127.0.0.1:5500/docs/test.html');
+  page.locator('#editor1.ql-container.ql-snow');
+});
+
+test('custom selecor should work', async ({ page }) => {
+  await createTableBySelect(page, 'container1', 3, 3);
+
+  const isVisible = await page.locator('#editor1.ql-container .ql-table-wrapper').isVisible();
+  expect(isVisible).toBe(true);
+  const colCount = await page.locator('#editor1.ql-container .ql-table-wrapper col').count();
+  expect(colCount).toBe(3);
+  const rowCount = await page.locator('#editor1.ql-container .ql-table-wrapper tr').count();
+  expect(rowCount).toBe(3);
+  const cellCount = await page.locator('#editor1.ql-container .ql-table-wrapper td').count();
+  expect(cellCount).toBe(9);
+});
+
+test('custom button should work', async ({ page }) => {
+  await page.locator('#container1 .ql-toolbar .ql-table-up > .ql-picker-label').first().click();
+  await page.locator('#container1 .ql-toolbar .ql-table-up .ql-custom-select').getByText('Custom').click();
+
+  await page.locator('.table-up-dialog .table-up-button.confirm').click();
+  const rowInput = page.locator('.table-up-dialog .table-up-input__input').first();
+  expect(rowInput).toHaveClass(/error/);
+  const errorText = await page.locator('.table-up-dialog .table-up-input__input').first().locator('.table-up-input__error-tip').textContent();
+  expect(errorText).toBe('Please enter a positive integer');
+
+  await page.locator('.table-up-input__item').nth(0).locator('input').fill('3');
+  await page.locator('.table-up-input__item').nth(1).locator('input').fill('3');
+  await page.getByRole('button', { name: 'Confirm' }).click();
+
+  const isVisible = await page.locator('#editor1.ql-container .ql-table-wrapper').isVisible();
+  expect(isVisible).toBe(true);
+  const colCount = await page.locator('#editor1.ql-container .ql-table-wrapper col').count();
+  expect(colCount).toBe(3);
+  const rowCount = await page.locator('#editor1.ql-container .ql-table-wrapper tr').count();
+  expect(rowCount).toBe(3);
+  const cellCount = await page.locator('#editor1.ql-container .ql-table-wrapper td').count();
+  expect(cellCount).toBe(9);
+});

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

@@ -0,0 +1,39 @@
+import { expect, test } from '@playwright/test';
+import { createTableBySelect } from './utils';
+
+test.beforeEach(async ({ page }) => {
+  await page.goto('http://127.0.0.1:5500/docs/test.html');
+  page.locator('.ql-container.ql-snow');
+});
+
+test('test TableAlign', 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())!;
+  expect(cellBounding).not.toBeNull();
+  await page.mouse.move(cellBounding.x, cellBounding.y);
+  const colBoundingBox = (await page.locator('#editor1 .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.down();
+  await page.mouse.move(colBoundingBox.x + colBoundingBox.width / 2 - 200, colBoundingBox.y + colBoundingBox.height / 2);
+  await page.mouse.up();
+  await centerCell.click();
+
+  const isVisible = await page.locator('#editor1 .table-up-align.table-up-align--active').isVisible();
+  expect(isVisible).toBeTruthy();
+
+  const table = page.locator('#editor1 .ql-editor .ql-table');
+  await page.locator('#editor1 .table-up-align .table-up-align__item[data-align="center"]').click();
+  await expect(table).toHaveCSS('margin-left', `100px`);
+  await expect(table).toHaveCSS('margin-right', `100px`);
+
+  await page.locator('#editor1 .table-up-align .table-up-align__item[data-align="right"]').click();
+  await expect(table).toHaveCSS('margin-left', `200px`);
+  await expect(table).toHaveCSS('margin-right', '0px');
+
+  await page.locator('#editor1 .table-up-align .table-up-align__item[data-align="left"]').click();
+  await expect(table).toHaveCSS('margin-left', '0px');
+  await expect(table).toHaveCSS('margin-right', '200px');
+});

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

@@ -0,0 +1,152 @@
+import { expect, test } from '@playwright/test';
+import { createTableBySelect } from './utils';
+
+test.beforeEach(async ({ page }) => {
+  await page.goto('http://127.0.0.1:5500/docs/test.html');
+  page.locator('.ql-container.ql-snow');
+});
+
+test('test TableResizeLine fixed width', 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())!;
+  expect(cellBounding).not.toBeNull();
+
+  // col
+  await page.mouse.move(cellBounding.x + 10, cellBounding.y + 10);
+  const colBoundingBox = (await page.locator('#editor1 .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.down();
+  await page.mouse.move(colBoundingBox.x + colBoundingBox.width / 2 + 100, colBoundingBox.y + colBoundingBox.height / 2);
+  await page.mouse.up();
+  expect(page.locator('#editor1 .ql-table-wrapper col').nth(1)).toHaveAttribute('width', `${Math.floor(cellBounding.width) + 100}px`);
+  await page.mouse.move(cellBounding.x, cellBounding.y);
+
+  // row
+  await page.mouse.move(cellBounding.x + 10, cellBounding.y + 10);
+  const rowBoundingBox = (await page.locator('#editor1 .table-up-resize-line__row').boundingBox())!;
+  expect(rowBoundingBox).not.toBeNull();
+  await page.mouse.move(rowBoundingBox.x + rowBoundingBox.width / 2, rowBoundingBox.y + rowBoundingBox.height / 2);
+  await page.mouse.down();
+  await page.mouse.move(rowBoundingBox.x + rowBoundingBox.width / 2, rowBoundingBox.y + rowBoundingBox.height / 2 + 100);
+  await page.mouse.up();
+  const cells = await page.locator('#editor1 .ql-table-wrapper tr').nth(1).locator('td').all();
+  for (const cell of cells) {
+    await expect(cell).toHaveCSS('height', `${Math.floor(cellBounding.height) + 100}px`);
+  }
+});
+
+test('test TableResizeBox fixed width', async ({ page }) => {
+  await createTableBySelect(page, 'container2', 3, 3);
+  const centerCell = page.locator('#editor2').getByRole('cell').nth(4);
+  await centerCell.click();
+  const cellBounding = (await centerCell.boundingBox())!;
+  expect(cellBounding).not.toBeNull();
+
+  // col
+  const colBoundingBox = await page.locator('#editor2 .table-up-resize-box__col-separator').nth(1).boundingBox();
+  expect(colBoundingBox).not.toBeNull();
+  if (!colBoundingBox) {
+    throw new Error('colBoundingBox is null');
+  }
+  await page.mouse.move(colBoundingBox.x + colBoundingBox.width - 4, colBoundingBox.y + 4);
+  await page.mouse.down();
+  await page.mouse.move(colBoundingBox.x + colBoundingBox.width - 4 + 100, colBoundingBox.y + 4);
+  await page.mouse.up();
+  expect(page.locator('#editor2 .ql-table-wrapper col').nth(1)).toHaveAttribute('width', `${Math.floor(cellBounding.width - 4) + 100}px`);
+
+  // row
+  const rowBoundingBox = await page.locator('#editor2 .table-up-resize-box__row-separator').nth(1).boundingBox();
+  expect(rowBoundingBox).not.toBeNull();
+  if (!rowBoundingBox) {
+    throw new Error('rowBoundingBox is null');
+  }
+  await page.mouse.move(rowBoundingBox.x + 4, rowBoundingBox.y + rowBoundingBox.height - 4);
+  await page.mouse.down();
+  await page.mouse.move(rowBoundingBox.x + 4, rowBoundingBox.y + rowBoundingBox.height - 4 + 100);
+  await page.mouse.up();
+  const cells = await page.locator('#editor2 .ql-table-wrapper tr').nth(1).locator('td').all();
+  expect(cells.length).toEqual(3);
+  for (const cell of cells) {
+    await expect(cell).toHaveCSS('height', `${Math.floor(cellBounding.height - 4) + 100}px`);
+  }
+});
+
+test('test TableResizeLine full width', async ({ page }) => {
+  await createTableBySelect(page, 'container3', 4, 4);
+  const centerCell = page.locator('#editor3').getByRole('cell').nth(1);
+  await centerCell.click();
+  const cellBounding = (await centerCell.boundingBox())!;
+  const tableBounding = (await page.locator('#editor3 .ql-table').boundingBox())!;
+  expect(cellBounding).not.toBeNull();
+  expect(tableBounding).not.toBeNull();
+
+  await page.mouse.move(cellBounding.x + 10, cellBounding.y + 10);
+  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.down();
+  await page.mouse.move(colBoundingBox.x + colBoundingBox.width / 2 + tableBounding.width * 0.05, colBoundingBox.y + colBoundingBox.height / 2);
+  await page.mouse.up();
+  const cols = page.locator('#editor3 .ql-table-wrapper col');
+  await expect(cols.nth(1)).toHaveAttribute('width', '30%');
+  await expect(cols.nth(2)).toHaveAttribute('width', '20%');
+});
+
+test('test TableResizeBox full width', async ({ page }) => {
+  await createTableBySelect(page, 'container4', 4, 4);
+  const centerCell = page.locator('#editor4').getByRole('cell').nth(1);
+  await centerCell.click();
+  const cellBounding = (await centerCell.boundingBox())!;
+  const tableBounding = (await page.locator('#editor4 .ql-table').boundingBox())!;
+  expect(cellBounding).not.toBeNull();
+  expect(tableBounding).not.toBeNull();
+
+  const colBoundingBox = (await page.locator('#editor4 .table-up-resize-box__col-separator').nth(1).boundingBox())!;
+  expect(colBoundingBox).not.toBeNull();
+  await page.mouse.move(colBoundingBox.x + colBoundingBox.width - 4, colBoundingBox.y + 4);
+  await page.mouse.down();
+  await page.mouse.move(colBoundingBox.x + colBoundingBox.width - 4 + tableBounding.width * 0.05, colBoundingBox.y);
+  await page.mouse.up();
+  const cols = page.locator('#editor4 .ql-table-wrapper col');
+  await expect(cols.nth(1)).toHaveAttribute('width', '30%');
+  await expect(cols.nth(2)).toHaveAttribute('width', '20%');
+});
+
+test('test TableResizeBox position', async ({ page }) => {
+  await createTableBySelect(page, 'container2', 3, 3);
+
+  const firstCell = page.locator('#editor2').getByRole('cell').nth(0);
+  await firstCell.click();
+  const firstCellBounding = (await firstCell.boundingBox())!;
+  expect(firstCellBounding).not.toBeNull();
+  const toolBounding = (await page.locator('#editor2 .table-up-toolbox .table-up-resize-box').boundingBox())!;
+  expect(toolBounding).not.toBeNull();
+  expect(firstCellBounding.x).toEqual(toolBounding.x);
+  expect(firstCellBounding.y).toEqual(toolBounding.y);
+});
+
+test('test TableResizeScale', 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`);
+  }
+});

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

@@ -0,0 +1,31 @@
+import { expect, test } from '@playwright/test';
+import { createTableBySelect } from './utils';
+
+test.beforeEach(async ({ page }) => {
+  await page.goto('http://127.0.0.1:5500/docs/test.html');
+  page.locator('.ql-container.ql-snow');
+});
+
+test('test TableScrollbar', async ({ page }) => {
+  await createTableBySelect(page, 'container2', 3, 3);
+  const centerCell = page.locator('#editor2').getByRole('cell').nth(4);
+  await centerCell.click();
+  const cellBounding = (await centerCell.boundingBox())!;
+  expect(cellBounding).not.toBeNull();
+
+  await page.waitForTimeout(200);
+  expect(await page.locator('#editor2 .table-up-scrollbar.is-vertical').isVisible()).toBeFalsy();
+  expect(await page.locator('#editor2 .table-up-scrollbar.is-horizontal').isVisible()).toBeFalsy();
+
+  const colBoundingBox = (await page.locator('#editor2 .table-up-resize-box__col-separator').nth(1).boundingBox())!;
+  expect(colBoundingBox).not.toBeNull();
+  await page.mouse.move(colBoundingBox.x + colBoundingBox.width - 4, colBoundingBox.y + 4);
+  await page.mouse.down();
+  await page.mouse.move(colBoundingBox.x + colBoundingBox.width - 4 + 100, colBoundingBox.y + 4);
+  await page.mouse.up();
+
+  await page.mouse.move(cellBounding.x, cellBounding.y);
+  await page.waitForTimeout(200);
+  expect(await page.locator('#editor2 .table-up-scrollbar.is-vertical').isVisible()).toBeFalsy();
+  expect(await page.locator('#editor2 .table-up-scrollbar.is-horizontal').isVisible()).toBeTruthy();
+});

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

@@ -0,0 +1,83 @@
+import { expect, test } from '@playwright/test';
+import { createTableBySelect } from './utils';
+
+test.beforeEach(async ({ page }) => {
+  await page.goto('http://127.0.0.1:5500/docs/test.html');
+  page.locator('.ql-container.ql-snow');
+});
+
+test('test TableSelection horizontal', async ({ page }) => {
+  await createTableBySelect(page, 'container1', 5, 5);
+  const cell = page.locator('#editor1 .ql-editor .ql-table td').nth(0);
+  await cell.click();
+  const cellBounding = (await cell.boundingBox())!;
+  expect(cellBounding).not.toBeNull();
+
+  await cell.click();
+  const selectionLine = page.locator('#editor1 .table-up-selection__line');
+  await expect(selectionLine).toBeVisible();
+  await page.mouse.down();
+  await page.mouse.move(cellBounding.x + cellBounding.width * 3, cellBounding.y + cellBounding.height / 2);
+  await page.mouse.up();
+
+  await expect(selectionLine).toBeVisible();
+  expect(
+    Number.parseFloat(await selectionLine.evaluate(el => getComputedStyle(el).width)),
+  ).toBeCloseTo(cellBounding.width * 3, -1);
+  expect(
+    Number.parseFloat(await selectionLine.evaluate(el => getComputedStyle(el).height)),
+  ).toBeCloseTo(cellBounding.height, -1);
+
+  await page.locator('#editor1 .ql-editor .ql-table').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(3).click();
+  await page.locator('#editor1 .ql-editor .ql-table td').nth(3).click();
+  await expect(selectionLine).toBeVisible();
+  await page.mouse.down();
+  await page.mouse.move(cellBounding.x + 10, cellBounding.y + 10);
+  await page.mouse.up();
+
+  const mergeCellBounding = (await page.locator('#editor1 .ql-editor .ql-table td').nth(0).boundingBox())!;
+  expect(mergeCellBounding).not.toBeNull();
+  expect(
+    Number.parseFloat(await selectionLine.evaluate(el => getComputedStyle(el).width)),
+  ).toBeCloseTo(mergeCellBounding.width, -1);
+  expect(
+    Number.parseFloat(await selectionLine.evaluate(el => getComputedStyle(el).height)),
+  ).toBeCloseTo(mergeCellBounding.height + cellBounding.height, -1);
+});
+
+test('test TableSelection vertical', async ({ page }) => {
+  await createTableBySelect(page, 'container1', 5, 5);
+  const cell = page.locator('#editor1 .ql-editor .ql-table td').nth(0);
+  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 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 page.mouse.down();
+  await page.mouse.move(cellBounding.x, cellBounding.y + cellBounding.height * 3);
+  await page.mouse.up();
+  await page.locator('#editor1 .ql-editor .ql-table').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 page.mouse.down();
+  await page.mouse.move(cellBounding.x + cellBounding.width * 2 - 10, cellBounding.y + 10);
+  await page.mouse.up();
+
+  expect(
+    Number.parseFloat(await selectionLine.evaluate(el => getComputedStyle(el).width)),
+  ).toBeCloseTo(cellBounding.width * 2, -1);
+  expect(
+    Number.parseFloat(await selectionLine.evaluate(el => getComputedStyle(el).height)),
+  ).toBeCloseTo(cellBounding.height * 3, -1);
+});

package/src/__tests__/e2e/utils.ts

@@ -0,0 +1,6 @@
+import type { Page } from '@playwright/test';
+
+export const createTableBySelect = async (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();
+};