quill-table-up 2.3.1 → 2.4.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "quill-table-up",
   "type": "module",
-  "version": "2.3.1",
+  "version": "2.4.1",
   "packageManager": "pnpm@10.12.1",
   "description": "A table module for quill2.x",
   "author": "zzxming",
@@ -58,7 +58,7 @@
     "@typescript-eslint/parser": "^8.34.0",
     "@vitest/coverage-v8": "^3.2.3",
     "@vitest/ui": "^3.2.3",
-    "@zzxming/eslint-config": "0.4.5",
+    "@zzxming/eslint-config": "^0.5.0",
     "autoprefixer": "^10.4.21",
     "eslint": "^9.29.0",
     "gulp": "^5.0.1",

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

@@ -88,3 +88,25 @@ extendTest('test table tools should hide after table removed', async ({ page, ed
   await expect(page.locator('#container2 .table-up-toolbox .table-up-resize-box')).not.toBeAttached();
   await expect(page.locator('#container2 .table-up-toolbox .table-up-scale')).not.toBeAttached();
 });
+
+extendTest('remove list in cell should work correctly', async ({ page, editorPage }) => {
+  editorPage.index = 0;
+  await editorPage.setContents([
+    { insert: '\n' },
+    { insert: { 'table-up-col': { tableId: 'dg216cyh1hh', colId: 'rbeybfr14n', full: false, width: 373 } } },
+    { insert: { 'table-up-col': { tableId: 'dg216cyh1hh', colId: '4yqh0essvp3', full: false, width: 373 } } },
+    { insert: '123' },
+    { attributes: { 'list': 'ordered', 'table-up-cell-inner': { tableId: 'dg216cyh1hh', rowId: '2lreudvqubb', colId: 'rbeybfr14n', rowspan: 1, colspan: 1 } }, insert: '\n' },
+    { insert: '123' },
+    { attributes: { 'list': 'ordered', 'table-up-cell-inner': { tableId: 'dg216cyh1hh', rowId: '2lreudvqubb', colId: 'rbeybfr14n', rowspan: 1, colspan: 1 } }, insert: '\n\n' },
+    { attributes: { 'table-up-cell-inner': { tableId: 'dg216cyh1hh', rowId: '2lreudvqubb', colId: '4yqh0essvp3', rowspan: 1, colspan: 1 } }, insert: '\n' },
+    { insert: '\n' },
+  ]);
+  await page.waitForTimeout(1000);
+  await editorPage.setSelection(11, 0);
+
+  await page.keyboard.press('Backspace');
+  await page.keyboard.press('Backspace');
+
+  expect(await page.locator('#editor1 .ql-editor .ql-table li').count()).toBe(2);
+});

package/src/__tests__/e2e/table-keyboard-handler.test.ts

@@ -0,0 +1,218 @@
+import { expect, test } from '@playwright/test';
+import { createTableBySelect, 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.describe('table cell keyboard handler enter', () => {
+  extendTest('cursor at the start of BlockEmbed', async ({ page, editorPage }) => {
+    editorPage.index = 0;
+    await editorPage.setContents([
+      { insert: '\n' },
+      { insert: { 'table-up-col': { tableId: '1', colId: '1', full: true, width: 100 } } },
+      { insert: { video: 'https://quilljs.com/' } },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
+      { insert: '\n' },
+    ]);
+    await page.waitForTimeout(1000);
+
+    await editorPage.setSelection(2, 0);
+    await page.keyboard.press('Enter');
+    await expect(page.locator('#editor1 .ql-table-wrapper .ql-table-cell-inner iframe').nth(0)).toBeVisible();
+    await expect(page.locator('#editor1 .ql-table-wrapper .ql-table-cell-inner p').nth(0)).toBeVisible();
+    const delta = await editorPage.getContents();
+    const contents = [
+      { insert: '\n' },
+      { insert: { 'table-up-col': { tableId: '1', colId: '1', full: true, width: 100 } } },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
+      { insert: { video: 'https://quilljs.com/' } },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
+      { insert: '\n' },
+    ];
+    for (const [i, op] of delta.ops.entries()) {
+      expect(op).toStrictEqual(contents[i]);
+    }
+  });
+
+  extendTest('cursor at the end of BlockEmbed', async ({ page, editorPage }) => {
+    editorPage.index = 0;
+    await editorPage.setContents([
+      { insert: '\n' },
+      { insert: { 'table-up-col': { tableId: '1', colId: '1', full: true, width: 100 } } },
+      { insert: { video: 'https://quilljs.com/' } },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
+      { insert: '\n' },
+    ]);
+    await page.waitForTimeout(1000);
+
+    await editorPage.setSelection(3, 0);
+    await page.keyboard.press('Enter');
+    await expect(page.locator('#editor1 .ql-table-wrapper .ql-table-cell-inner p').nth(0)).toBeVisible();
+    await expect(page.locator('#editor1 .ql-table-wrapper .ql-table-cell-inner iframe').nth(0)).toBeVisible();
+    const delta = await editorPage.getContents();
+    const contents = [
+      { insert: '\n' },
+      { insert: { 'table-up-col': { tableId: '1', colId: '1', full: true, width: 100 } } },
+      { insert: { video: 'https://quilljs.com/' } },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n\n' },
+      { insert: '\n' },
+    ];
+    for (const [i, op] of delta.ops.entries()) {
+      expect(op).toStrictEqual(contents[i]);
+    }
+  });
+
+  extendTest('selection multiple line', async ({ page, editorPage }) => {
+    editorPage.index = 0;
+    await editorPage.setContents([
+      { insert: '\n' },
+      { insert: { 'table-up-col': { tableId: '1', colId: '1', full: true, width: 100 } } },
+      { insert: { video: 'https://quilljs.com/' } },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
+      { insert: '123' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
+      { insert: '123' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
+    ]);
+    await page.waitForTimeout(1000);
+
+    await editorPage.setSelection(3, 7);
+    await page.keyboard.press('Enter');
+    await expect(page.locator('#editor1 .ql-table-wrapper .ql-table-cell-inner p')).toHaveCount(1);
+  });
+});
+
+extendTest.describe('table cell keyboard handler ArrowUp and ArrowDown', () => {
+  extendTest('test TableSelection should update when selection change', async ({ page, editorPage }) => {
+    editorPage.index = 0;
+    await createTableBySelect(page, 'container1', 3, 3);
+
+    await page.locator('#editor1 .ql-table .ql-table-cell').nth(0).click();
+    const selectionLine = page.locator('#container1 .table-up-selection .table-up-selection__line');
+    await expect(selectionLine).toBeVisible();
+
+    await page.keyboard.press('ArrowRight');
+    await expect(selectionLine).toBeVisible();
+    const newSelectionWrapper = (await selectionLine.boundingBox())!;
+    expect(newSelectionWrapper).not.toBeNull();
+    const cell1Bound = (await page.locator('#editor1 .ql-editor td').nth(1).boundingBox())!;
+    expect(cell1Bound).not.toBeNull();
+    expect(cell1Bound).toEqual(newSelectionWrapper);
+  });
+
+  extendTest('test TableSelection and TableMenuSelect should hide when selection out table', async ({ page }) => {
+    await createTableBySelect(page, 'container1', 3, 3);
+    const firstCell1 = page.locator('#editor1').getByRole('cell').nth(0);
+    await firstCell1.click();
+    expect(page.locator('#container1 .table-up-selection')).toBeVisible();
+
+    await page.keyboard.down('ArrowUp');
+    expect(page.locator('#container1 .table-up-selection')).not.toBeVisible();
+
+    await firstCell1.click();
+    await firstCell1.click({ button: 'right' });
+    await expect(page.locator('#container1 .table-up-selection')).toBeVisible();
+    await expect(page.locator('.table-up-menu.is-contextmenu')).toBeVisible();
+
+    await page.keyboard.down('ArrowUp');
+    await expect(page.locator('#container1 .table-up-selection')).not.toBeVisible();
+    await expect(page.locator('.table-up-menu.is-contextmenu')).not.toBeVisible();
+
+    await createTableBySelect(page, 'container2', 3, 3);
+    const firstCell2 = page.locator('#editor2').getByRole('cell').nth(0);
+    await firstCell2.click();
+    await expect(page.locator('#container2 .table-up-selection')).toBeVisible();
+
+    await page.keyboard.down('ArrowUp');
+    await expect(page.locator('#container2 .table-up-selection')).not.toBeVisible();
+
+    await firstCell2.click();
+    await expect(page.locator('#container2 .table-up-selection')).toBeVisible();
+    await expect(page.locator('#container2 .table-up-menu')).toBeVisible();
+
+    await page.keyboard.down('ArrowUp');
+    await expect(page.locator('#container2 .table-up-selection')).not.toBeVisible();
+    await expect(page.locator('#container2 .table-up-menu')).not.toBeVisible();
+  });
+
+  extendTest('test table keyboard ArrowUp and ArrowDown should work', async ({ page, editorPage }) => {
+    editorPage.index = 0;
+    editorPage.setContents([
+      { insert: '123456\n' },
+      { insert: { 'table-up-col': { tableId: 'njo6syk0zqb', colId: 'mnpytyt1cno', full: false, width: 291 } } },
+      { insert: { 'table-up-col': { tableId: 'njo6syk0zqb', colId: '6ihx044tflt', full: false, width: 291 } } },
+      { insert: { 'table-up-col': { tableId: 'njo6syk0zqb', colId: 'raiomwr9yuc', full: false, width: 291 } } },
+      { insert: { 'table-up-col': { tableId: 'njo6syk0zqb', colId: 'qiuz7k09q6r', full: false, width: 291 } } },
+      { insert: '123' },
+      { attributes: { 'table-up-cell-inner': { tableId: 'njo6syk0zqb', rowId: 'rvwpsb2pky', colId: 'mnpytyt1cno', rowspan: 2, colspan: 2 } }, insert: '\n' },
+      { insert: '123456' },
+      { attributes: { 'table-up-cell-inner': { tableId: 'njo6syk0zqb', rowId: 'rvwpsb2pky', colId: 'mnpytyt1cno', rowspan: 2, colspan: 2 } }, insert: '\n' },
+      { insert: '123' },
+      { attributes: { 'table-up-cell-inner': { tableId: 'njo6syk0zqb', rowId: 'rvwpsb2pky', colId: 'mnpytyt1cno', rowspan: 2, colspan: 2 } }, insert: '\n' },
+      { attributes: { 'table-up-cell-inner': { tableId: 'njo6syk0zqb', rowId: 'rvwpsb2pky', colId: 'raiomwr9yuc', rowspan: 1, colspan: 1 } }, insert: '\n' },
+      { attributes: { 'table-up-cell-inner': { tableId: 'njo6syk0zqb', rowId: 'rvwpsb2pky', colId: 'qiuz7k09q6r', rowspan: 1, colspan: 1 } }, insert: '\n' },
+      { insert: '123' },
+      { attributes: { 'table-up-cell-inner': { tableId: 'njo6syk0zqb', rowId: 'vhg5x933cs', colId: 'raiomwr9yuc', rowspan: 1, colspan: 2 } }, insert: '\n' },
+      { insert: '123456' },
+      { attributes: { 'table-up-cell-inner': { tableId: 'njo6syk0zqb', rowId: 'vhg5x933cs', colId: 'raiomwr9yuc', rowspan: 1, colspan: 2 } }, insert: '\n' },
+      { insert: '123' },
+      { attributes: { 'table-up-cell-inner': { tableId: 'njo6syk0zqb', rowId: 'vhg5x933cs', colId: 'raiomwr9yuc', rowspan: 1, colspan: 2 } }, insert: '\n' },
+      { insert: '12345' },
+      { attributes: { 'table-up-cell-inner': { tableId: 'njo6syk0zqb', rowId: 'nsb7mrygbk9', colId: 'mnpytyt1cno', rowspan: 1, colspan: 1 } }, insert: '\n' },
+      { attributes: { 'table-up-cell-inner': { tableId: 'njo6syk0zqb', rowId: 'nsb7mrygbk9', colId: '6ihx044tflt', rowspan: 1, colspan: 1 } }, insert: '\n' },
+      { attributes: { 'table-up-cell-inner': { tableId: 'njo6syk0zqb', rowId: 'nsb7mrygbk9', colId: 'raiomwr9yuc', rowspan: 1, colspan: 1 } }, insert: '\n' },
+      { attributes: { 'table-up-cell-inner': { tableId: 'njo6syk0zqb', rowId: 'nsb7mrygbk9', colId: 'qiuz7k09q6r', rowspan: 1, colspan: 1 } }, insert: '\n' },
+      { insert: '123456\n' },
+    ]);
+
+    await editorPage.setSelection(50, 0);
+    await page.keyboard.press('ArrowUp');
+    expect((await editorPage.getSelection())!.index).toBe(39);
+
+    await editorPage.setSelection(48, 0);
+    await page.keyboard.press('ArrowUp');
+    expect((await editorPage.getSelection())!.index).toBe(25);
+
+    await editorPage.setSelection(14, 0);
+    await page.keyboard.press('ArrowUp');
+    expect((await editorPage.getSelection())!.index).toBe(6);
+
+    await editorPage.setSelection(25, 0);
+    await page.keyboard.press('ArrowDown');
+    expect((await editorPage.getSelection())!.index).toBe(46);
+
+    await editorPage.setSelection(26, 0);
+    await page.keyboard.press('ArrowDown');
+    expect((await editorPage.getSelection())!.index).toBe(28);
+
+    await editorPage.setSelection(48, 0);
+    await page.keyboard.press('ArrowDown');
+    expect((await editorPage.getSelection())!.index).toBe(52);
+
+    await editorPage.setSelection(50, 0);
+    await page.keyboard.press('ArrowDown');
+    expect((await editorPage.getSelection())!.index).toBe(52);
+  });
+
+  extendTest('test TableSelection should update when selection change and menu display', async ({ page, editorPage }) => {
+    editorPage.index = 0;
+    await createTableBySelect(page, 'container1', 3, 3);
+
+    await page.locator('#editor1 .ql-table .ql-table-cell').nth(0).click();
+    const selectionLine = page.locator('#container1 .table-up-selection .table-up-selection__line');
+    await expect(selectionLine).toBeVisible();
+
+    await page.locator('#editor1 .ql-table .ql-table-cell').nth(0).click({ button: 'right' });
+    await expect(page.locator('.table-up-menu.is-contextmenu')).toBeVisible();
+
+    await page.locator('.table-up-menu.is-contextmenu .table-up-menu__item').filter({ hasText: 'Set background color' }).first().click();
+    await page.waitForTimeout(1000);
+    await expect(selectionLine).not.toBeVisible();
+
+    await page.keyboard.press('ArrowDown');
+    await expect(selectionLine).not.toBeVisible();
+    await expect(page.locator('.table-up-menu.is-contextmenu')).toBeVisible();
+  });
+});

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

@@ -347,137 +347,6 @@ extendTest('table resize should update TableSelection', async ({ page, editorPag
   expect(newThirdCellSelectionBound).toEqual(newCellBound);
 });
 
-extendTest('test TableSelection should update when selection change', async ({ page, editorPage }) => {
-  editorPage.index = 0;
-  await createTableBySelect(page, 'container1', 3, 3);
-
-  await page.locator('#editor1 .ql-table .ql-table-cell').nth(0).click();
-  const selectionLine = page.locator('#container1 .table-up-selection .table-up-selection__line');
-  await expect(selectionLine).toBeVisible();
-
-  await page.keyboard.press('ArrowRight');
-  await expect(selectionLine).toBeVisible();
-  const newSelectionWrapper = (await selectionLine.boundingBox())!;
-  expect(newSelectionWrapper).not.toBeNull();
-  const cell1Bound = (await page.locator('#editor1 .ql-editor td').nth(1).boundingBox())!;
-  expect(cell1Bound).not.toBeNull();
-  expect(cell1Bound).toEqual(newSelectionWrapper);
-});
-
-extendTest('test TableSelection and TableMenuSelect should hide when selection out table', async ({ page }) => {
-  await createTableBySelect(page, 'container1', 3, 3);
-  const firstCell1 = page.locator('#editor1').getByRole('cell').nth(0);
-  await firstCell1.click();
-  expect(page.locator('#container1 .table-up-selection')).toBeVisible();
-
-  await page.keyboard.down('ArrowUp');
-  expect(page.locator('#container1 .table-up-selection')).not.toBeVisible();
-
-  await firstCell1.click();
-  await firstCell1.click({ button: 'right' });
-  await expect(page.locator('#container1 .table-up-selection')).toBeVisible();
-  await expect(page.locator('.table-up-menu.is-contextmenu')).toBeVisible();
-
-  await page.keyboard.down('ArrowUp');
-  await expect(page.locator('#container1 .table-up-selection')).not.toBeVisible();
-  await expect(page.locator('.table-up-menu.is-contextmenu')).not.toBeVisible();
-
-  await createTableBySelect(page, 'container2', 3, 3);
-  const firstCell2 = page.locator('#editor2').getByRole('cell').nth(0);
-  await firstCell2.click();
-  await expect(page.locator('#container2 .table-up-selection')).toBeVisible();
-
-  await page.keyboard.down('ArrowUp');
-  await expect(page.locator('#container2 .table-up-selection')).not.toBeVisible();
-
-  await firstCell2.click();
-  await expect(page.locator('#container2 .table-up-selection')).toBeVisible();
-  await expect(page.locator('#container2 .table-up-menu')).toBeVisible();
-
-  await page.keyboard.down('ArrowUp');
-  await expect(page.locator('#container2 .table-up-selection')).not.toBeVisible();
-  await expect(page.locator('#container2 .table-up-menu')).not.toBeVisible();
-});
-
-extendTest('test table keyboard ArrowUp and ArrowDown should work', async ({ page, editorPage }) => {
-  editorPage.index = 0;
-  editorPage.setContents([
-    { insert: '123456\n' },
-    { insert: { 'table-up-col': { tableId: 'njo6syk0zqb', colId: 'mnpytyt1cno', full: false, width: 291 } } },
-    { insert: { 'table-up-col': { tableId: 'njo6syk0zqb', colId: '6ihx044tflt', full: false, width: 291 } } },
-    { insert: { 'table-up-col': { tableId: 'njo6syk0zqb', colId: 'raiomwr9yuc', full: false, width: 291 } } },
-    { insert: { 'table-up-col': { tableId: 'njo6syk0zqb', colId: 'qiuz7k09q6r', full: false, width: 291 } } },
-    { insert: '123' },
-    { attributes: { 'table-up-cell-inner': { tableId: 'njo6syk0zqb', rowId: 'rvwpsb2pky', colId: 'mnpytyt1cno', rowspan: 2, colspan: 2 } }, insert: '\n' },
-    { insert: '123456' },
-    { attributes: { 'table-up-cell-inner': { tableId: 'njo6syk0zqb', rowId: 'rvwpsb2pky', colId: 'mnpytyt1cno', rowspan: 2, colspan: 2 } }, insert: '\n' },
-    { insert: '123' },
-    { attributes: { 'table-up-cell-inner': { tableId: 'njo6syk0zqb', rowId: 'rvwpsb2pky', colId: 'mnpytyt1cno', rowspan: 2, colspan: 2 } }, insert: '\n' },
-    { attributes: { 'table-up-cell-inner': { tableId: 'njo6syk0zqb', rowId: 'rvwpsb2pky', colId: 'raiomwr9yuc', rowspan: 1, colspan: 1 } }, insert: '\n' },
-    { attributes: { 'table-up-cell-inner': { tableId: 'njo6syk0zqb', rowId: 'rvwpsb2pky', colId: 'qiuz7k09q6r', rowspan: 1, colspan: 1 } }, insert: '\n' },
-    { insert: '123' },
-    { attributes: { 'table-up-cell-inner': { tableId: 'njo6syk0zqb', rowId: 'vhg5x933cs', colId: 'raiomwr9yuc', rowspan: 1, colspan: 2 } }, insert: '\n' },
-    { insert: '123456' },
-    { attributes: { 'table-up-cell-inner': { tableId: 'njo6syk0zqb', rowId: 'vhg5x933cs', colId: 'raiomwr9yuc', rowspan: 1, colspan: 2 } }, insert: '\n' },
-    { insert: '123' },
-    { attributes: { 'table-up-cell-inner': { tableId: 'njo6syk0zqb', rowId: 'vhg5x933cs', colId: 'raiomwr9yuc', rowspan: 1, colspan: 2 } }, insert: '\n' },
-    { insert: '12345' },
-    { attributes: { 'table-up-cell-inner': { tableId: 'njo6syk0zqb', rowId: 'nsb7mrygbk9', colId: 'mnpytyt1cno', rowspan: 1, colspan: 1 } }, insert: '\n' },
-    { attributes: { 'table-up-cell-inner': { tableId: 'njo6syk0zqb', rowId: 'nsb7mrygbk9', colId: '6ihx044tflt', rowspan: 1, colspan: 1 } }, insert: '\n' },
-    { attributes: { 'table-up-cell-inner': { tableId: 'njo6syk0zqb', rowId: 'nsb7mrygbk9', colId: 'raiomwr9yuc', rowspan: 1, colspan: 1 } }, insert: '\n' },
-    { attributes: { 'table-up-cell-inner': { tableId: 'njo6syk0zqb', rowId: 'nsb7mrygbk9', colId: 'qiuz7k09q6r', rowspan: 1, colspan: 1 } }, insert: '\n' },
-    { insert: '123456\n' },
-  ]);
-
-  await editorPage.setSelection(50, 0);
-  await page.keyboard.press('ArrowUp');
-  expect((await editorPage.getSelection())!.index).toBe(39);
-
-  await editorPage.setSelection(48, 0);
-  await page.keyboard.press('ArrowUp');
-  expect((await editorPage.getSelection())!.index).toBe(25);
-
-  await editorPage.setSelection(14, 0);
-  await page.keyboard.press('ArrowUp');
-  expect((await editorPage.getSelection())!.index).toBe(6);
-
-  await editorPage.setSelection(25, 0);
-  await page.keyboard.press('ArrowDown');
-  expect((await editorPage.getSelection())!.index).toBe(46);
-
-  await editorPage.setSelection(26, 0);
-  await page.keyboard.press('ArrowDown');
-  expect((await editorPage.getSelection())!.index).toBe(28);
-
-  await editorPage.setSelection(48, 0);
-  await page.keyboard.press('ArrowDown');
-  expect((await editorPage.getSelection())!.index).toBe(52);
-
-  await editorPage.setSelection(50, 0);
-  await page.keyboard.press('ArrowDown');
-  expect((await editorPage.getSelection())!.index).toBe(52);
-});
-
-extendTest('test TableSelection should update when selection change and menu display', async ({ page, editorPage }) => {
-  editorPage.index = 0;
-  await createTableBySelect(page, 'container1', 3, 3);
-
-  await page.locator('#editor1 .ql-table .ql-table-cell').nth(0).click();
-  const selectionLine = page.locator('#container1 .table-up-selection .table-up-selection__line');
-  await expect(selectionLine).toBeVisible();
-
-  await page.locator('#editor1 .ql-table .ql-table-cell').nth(0).click({ button: 'right' });
-  await expect(page.locator('.table-up-menu.is-contextmenu')).toBeVisible();
-
-  await page.locator('.table-up-menu.is-contextmenu .table-up-menu__item').filter({ hasText: 'Set background color' }).first().click();
-  await page.waitForTimeout(1000);
-  await expect(selectionLine).not.toBeVisible();
-
-  await page.keyboard.press('ArrowDown');
-  await expect(selectionLine).not.toBeVisible();
-  await expect(page.locator('.table-up-menu.is-contextmenu')).toBeVisible();
-});
-
 extendTest('should handle delete table cell text when selected tds', async ({ page, editorPage, browserName }) => {
   editorPage.index = 0;
   await editorPage.setContents([
@@ -664,3 +533,140 @@ extendTest('TableSelection should not update when input composition', async ({ p
   const composingBounding = (await selectionLine.boundingBox())!;
   expect(composingBounding).toEqual(bounding);
 });
+
+extendTest.describe('TableSelection should work correct when wrapper scroll', () => {
+  extendTest('TableSelection in quill root scroll', async ({ page, editorPage }) => {
+    editorPage.index = 0;
+    await editorPage.setContents([
+      { insert: '\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n' },
+      { insert: { 'table-up-col': { tableId: 'q9rcu2l5en', colId: 'odojvz7psp8', full: false, width: 400 } } },
+      { insert: { 'table-up-col': { tableId: 'q9rcu2l5en', colId: 'thtn1vm1a0l', full: false, width: 400 } } },
+      { insert: { 'table-up-col': { tableId: 'q9rcu2l5en', colId: '6ci2o6ophk8', full: false, width: 400 } } },
+      { insert: { 'table-up-col': { tableId: 'q9rcu2l5en', colId: 'k7jzkt8ede8', full: false, width: 400 } } },
+      { insert: { 'table-up-col': { tableId: 'q9rcu2l5en', colId: '6nj5cy7mrat', full: false, width: 400 } } },
+      { attributes: { 'table-up-cell-inner': { tableId: 'q9rcu2l5en', rowId: '1zdvvq78kqa', colId: 'odojvz7psp8', rowspan: 1, colspan: 1, style: 'height: 100px;' } }, insert: '\n' },
+      { attributes: { 'table-up-cell-inner': { tableId: 'q9rcu2l5en', rowId: '1zdvvq78kqa', colId: 'thtn1vm1a0l', rowspan: 1, colspan: 1, style: 'height: 100px;' } }, insert: '\n' },
+      { attributes: { 'table-up-cell-inner': { tableId: 'q9rcu2l5en', rowId: '1zdvvq78kqa', colId: '6ci2o6ophk8', rowspan: 1, colspan: 1, style: 'height: 100px;' } }, insert: '\n' },
+      { attributes: { 'table-up-cell-inner': { tableId: 'q9rcu2l5en', rowId: '1zdvvq78kqa', colId: 'k7jzkt8ede8', rowspan: 1, colspan: 1, style: 'height: 100px;' } }, insert: '\n' },
+      { attributes: { 'table-up-cell-inner': { tableId: 'q9rcu2l5en', rowId: '1zdvvq78kqa', colId: '6nj5cy7mrat', rowspan: 1, colspan: 1, style: 'height: 100px;' } }, insert: '\n' },
+      { attributes: { 'table-up-cell-inner': { tableId: 'q9rcu2l5en', rowId: 'kkyehoxutvs', colId: 'odojvz7psp8', rowspan: 1, colspan: 1, style: 'height: 100px;' } }, insert: '\n' },
+      { attributes: { 'table-up-cell-inner': { tableId: 'q9rcu2l5en', rowId: 'kkyehoxutvs', colId: 'thtn1vm1a0l', rowspan: 1, colspan: 1, style: 'height: 100px;' } }, insert: '\n' },
+      { attributes: { 'table-up-cell-inner': { tableId: 'q9rcu2l5en', rowId: 'kkyehoxutvs', colId: '6ci2o6ophk8', rowspan: 1, colspan: 1, style: 'height: 100px;' } }, insert: '\n' },
+      { attributes: { 'table-up-cell-inner': { tableId: 'q9rcu2l5en', rowId: 'kkyehoxutvs', colId: 'k7jzkt8ede8', rowspan: 1, colspan: 1, style: 'height: 100px;' } }, insert: '\n' },
+      { attributes: { 'table-up-cell-inner': { tableId: 'q9rcu2l5en', rowId: 'kkyehoxutvs', colId: '6nj5cy7mrat', rowspan: 1, colspan: 1, style: 'height: 100px;' } }, insert: '\n' },
+      { attributes: { 'table-up-cell-inner': { tableId: 'q9rcu2l5en', rowId: 'ife4q2in0se', colId: 'odojvz7psp8', rowspan: 1, colspan: 1, style: 'height: 100px;' } }, insert: '\n' },
+      { attributes: { 'table-up-cell-inner': { tableId: 'q9rcu2l5en', rowId: 'ife4q2in0se', colId: 'thtn1vm1a0l', rowspan: 1, colspan: 1, style: 'height: 100px;' } }, insert: '\n' },
+      { attributes: { 'table-up-cell-inner': { tableId: 'q9rcu2l5en', rowId: 'ife4q2in0se', colId: '6ci2o6ophk8', rowspan: 1, colspan: 1, style: 'height: 100px;' } }, insert: '\n' },
+      { attributes: { 'table-up-cell-inner': { tableId: 'q9rcu2l5en', rowId: 'ife4q2in0se', colId: 'k7jzkt8ede8', rowspan: 1, colspan: 1, style: 'height: 100px;' } }, insert: '\n' },
+      { attributes: { 'table-up-cell-inner': { tableId: 'q9rcu2l5en', rowId: 'ife4q2in0se', colId: '6nj5cy7mrat', rowspan: 1, colspan: 1, style: 'height: 100px;' } }, insert: '\n' },
+      { attributes: { 'table-up-cell-inner': { tableId: 'q9rcu2l5en', rowId: 'waafccgk7yk', colId: 'odojvz7psp8', rowspan: 1, colspan: 1, style: 'height: 100px;' } }, insert: '\n' },
+      { attributes: { 'table-up-cell-inner': { tableId: 'q9rcu2l5en', rowId: 'waafccgk7yk', colId: 'thtn1vm1a0l', rowspan: 1, colspan: 1, style: 'height: 100px;' } }, insert: '\n' },
+      { attributes: { 'table-up-cell-inner': { tableId: 'q9rcu2l5en', rowId: 'waafccgk7yk', colId: '6ci2o6ophk8', rowspan: 1, colspan: 1, style: 'height: 100px;' } }, insert: '\n' },
+      { attributes: { 'table-up-cell-inner': { tableId: 'q9rcu2l5en', rowId: 'waafccgk7yk', colId: 'k7jzkt8ede8', rowspan: 1, colspan: 1, style: 'height: 100px;' } }, insert: '\n' },
+      { attributes: { 'table-up-cell-inner': { tableId: 'q9rcu2l5en', rowId: 'waafccgk7yk', colId: '6nj5cy7mrat', rowspan: 1, colspan: 1, style: 'height: 100px;' } }, insert: '\n' },
+      { attributes: { 'table-up-cell-inner': { tableId: 'q9rcu2l5en', rowId: 'lb7s1smtyh', colId: 'odojvz7psp8', rowspan: 1, colspan: 1, style: 'height: 100px;' } }, insert: '\n' },
+      { attributes: { 'table-up-cell-inner': { tableId: 'q9rcu2l5en', rowId: 'lb7s1smtyh', colId: 'thtn1vm1a0l', rowspan: 1, colspan: 1, style: 'height: 100px;' } }, insert: '\n' },
+      { attributes: { 'table-up-cell-inner': { tableId: 'q9rcu2l5en', rowId: 'lb7s1smtyh', colId: '6ci2o6ophk8', rowspan: 1, colspan: 1, style: 'height: 100px;' } }, insert: '\n' },
+      { attributes: { 'table-up-cell-inner': { tableId: 'q9rcu2l5en', rowId: 'lb7s1smtyh', colId: 'k7jzkt8ede8', rowspan: 1, colspan: 1, style: 'height: 100px;' } }, insert: '\n' },
+      { attributes: { 'table-up-cell-inner': { tableId: 'q9rcu2l5en', rowId: 'lb7s1smtyh', colId: '6nj5cy7mrat', rowspan: 1, colspan: 1, style: 'height: 100px;' } }, insert: '\n' },
+      { attributes: { 'table-up-cell-inner': { tableId: 'q9rcu2l5en', rowId: 'jgvhoknv7tf', colId: 'odojvz7psp8', rowspan: 1, colspan: 1, style: 'height: 100px;' } }, insert: '\n' },
+      { attributes: { 'table-up-cell-inner': { tableId: 'q9rcu2l5en', rowId: 'jgvhoknv7tf', colId: 'thtn1vm1a0l', rowspan: 1, colspan: 1, style: 'height: 100px;' } }, insert: '\n' },
+      { attributes: { 'table-up-cell-inner': { tableId: 'q9rcu2l5en', rowId: 'jgvhoknv7tf', colId: '6ci2o6ophk8', rowspan: 1, colspan: 1, style: 'height: 100px;' } }, insert: '\n' },
+      { attributes: { 'table-up-cell-inner': { tableId: 'q9rcu2l5en', rowId: 'jgvhoknv7tf', colId: 'k7jzkt8ede8', rowspan: 1, colspan: 1, style: 'height: 100px;' } }, insert: '\n' },
+      { attributes: { 'table-up-cell-inner': { tableId: 'q9rcu2l5en', rowId: 'jgvhoknv7tf', colId: '6nj5cy7mrat', rowspan: 1, colspan: 1, style: 'height: 100px;' } }, insert: '\n' },
+      { attributes: { 'table-up-cell-inner': { tableId: 'q9rcu2l5en', rowId: 'bxqnf58tmfd', colId: 'odojvz7psp8', rowspan: 1, colspan: 1, style: 'height: 100px;' } }, insert: '\n' },
+      { attributes: { 'table-up-cell-inner': { tableId: 'q9rcu2l5en', rowId: 'bxqnf58tmfd', colId: 'thtn1vm1a0l', rowspan: 1, colspan: 1, style: 'height: 100px;' } }, insert: '\n' },
+      { attributes: { 'table-up-cell-inner': { tableId: 'q9rcu2l5en', rowId: 'bxqnf58tmfd', colId: '6ci2o6ophk8', rowspan: 1, colspan: 1, style: 'height: 100px;' } }, insert: '\n' },
+      { attributes: { 'table-up-cell-inner': { tableId: 'q9rcu2l5en', rowId: 'bxqnf58tmfd', colId: 'k7jzkt8ede8', rowspan: 1, colspan: 1, style: 'height: 100px;' } }, insert: '\n' },
+      { attributes: { 'table-up-cell-inner': { tableId: 'q9rcu2l5en', rowId: 'bxqnf58tmfd', colId: '6nj5cy7mrat', rowspan: 1, colspan: 1, style: 'height: 100px;' } }, insert: '\n' },
+      { attributes: { 'table-up-cell-inner': { tableId: 'q9rcu2l5en', rowId: 'dctaip1l39v', colId: 'odojvz7psp8', rowspan: 1, colspan: 1, style: 'height: 100px;' } }, insert: '\n' },
+      { attributes: { 'table-up-cell-inner': { tableId: 'q9rcu2l5en', rowId: 'dctaip1l39v', colId: 'thtn1vm1a0l', rowspan: 1, colspan: 1, style: 'height: 100px;' } }, insert: '\n' },
+      { attributes: { 'table-up-cell-inner': { tableId: 'q9rcu2l5en', rowId: 'dctaip1l39v', colId: '6ci2o6ophk8', rowspan: 1, colspan: 1, style: 'height: 100px;' } }, insert: '\n' },
+      { attributes: { 'table-up-cell-inner': { tableId: 'q9rcu2l5en', rowId: 'dctaip1l39v', colId: 'k7jzkt8ede8', rowspan: 1, colspan: 1, style: 'height: 100px;' } }, insert: '\n' },
+      { attributes: { 'table-up-cell-inner': { tableId: 'q9rcu2l5en', rowId: 'dctaip1l39v', colId: '6nj5cy7mrat', rowspan: 1, colspan: 1, style: 'height: 100px;' } }, insert: '\n' },
+      { insert: '\n\n\n\n\n\n\n\n\n\n\n\n\n' },
+    ]);
+    await page.waitForTimeout(1000);
+
+    await page.locator('#editor1 .ql-editor td').nth(0).click();
+    await page.mouse.down();
+    await page.mouse.wheel(0, 200);
+    await page.mouse.wheel(500, 0);
+    await page.waitForTimeout(1000);
+    const bounding = (await page.locator('#editor1 .ql-editor td').nth(12).boundingBox())!;
+    expect(bounding).not.toBeNull();
+    await page.mouse.move(bounding.x + bounding.width / 2, bounding.y + bounding.height / 2);
+
+    const selectedTds = await page.evaluate(() => {
+      return (window.quills[0].getModule('table-up') as any).tableSelection!.selectedTds;
+    });
+    expect(selectedTds.length).toBe(9);
+  });
+
+  extendTest('TableSelection in body scroll', async ({ page, editorPage }) => {
+    editorPage.index = 4;
+    await editorPage.setContents([
+      { insert: '\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n' },
+      { insert: { 'table-up-col': { tableId: 'q9rcu2l5en', colId: 'odojvz7psp8', full: false, width: 400 } } },
+      { insert: { 'table-up-col': { tableId: 'q9rcu2l5en', colId: 'thtn1vm1a0l', full: false, width: 400 } } },
+      { insert: { 'table-up-col': { tableId: 'q9rcu2l5en', colId: '6ci2o6ophk8', full: false, width: 400 } } },
+      { insert: { 'table-up-col': { tableId: 'q9rcu2l5en', colId: 'k7jzkt8ede8', full: false, width: 400 } } },
+      { insert: { 'table-up-col': { tableId: 'q9rcu2l5en', colId: '6nj5cy7mrat', full: false, width: 400 } } },
+      { attributes: { 'table-up-cell-inner': { tableId: 'q9rcu2l5en', rowId: '1zdvvq78kqa', colId: 'odojvz7psp8', rowspan: 1, colspan: 1, style: 'height: 100px;' } }, insert: '\n' },
+      { attributes: { 'table-up-cell-inner': { tableId: 'q9rcu2l5en', rowId: '1zdvvq78kqa', colId: 'thtn1vm1a0l', rowspan: 1, colspan: 1, style: 'height: 100px;' } }, insert: '\n' },
+      { attributes: { 'table-up-cell-inner': { tableId: 'q9rcu2l5en', rowId: '1zdvvq78kqa', colId: '6ci2o6ophk8', rowspan: 1, colspan: 1, style: 'height: 100px;' } }, insert: '\n' },
+      { attributes: { 'table-up-cell-inner': { tableId: 'q9rcu2l5en', rowId: '1zdvvq78kqa', colId: 'k7jzkt8ede8', rowspan: 1, colspan: 1, style: 'height: 100px;' } }, insert: '\n' },
+      { attributes: { 'table-up-cell-inner': { tableId: 'q9rcu2l5en', rowId: '1zdvvq78kqa', colId: '6nj5cy7mrat', rowspan: 1, colspan: 1, style: 'height: 100px;' } }, insert: '\n' },
+      { attributes: { 'table-up-cell-inner': { tableId: 'q9rcu2l5en', rowId: 'kkyehoxutvs', colId: 'odojvz7psp8', rowspan: 1, colspan: 1, style: 'height: 100px;' } }, insert: '\n' },
+      { attributes: { 'table-up-cell-inner': { tableId: 'q9rcu2l5en', rowId: 'kkyehoxutvs', colId: 'thtn1vm1a0l', rowspan: 1, colspan: 1, style: 'height: 100px;' } }, insert: '\n' },
+      { attributes: { 'table-up-cell-inner': { tableId: 'q9rcu2l5en', rowId: 'kkyehoxutvs', colId: '6ci2o6ophk8', rowspan: 1, colspan: 1, style: 'height: 100px;' } }, insert: '\n' },
+      { attributes: { 'table-up-cell-inner': { tableId: 'q9rcu2l5en', rowId: 'kkyehoxutvs', colId: 'k7jzkt8ede8', rowspan: 1, colspan: 1, style: 'height: 100px;' } }, insert: '\n' },
+      { attributes: { 'table-up-cell-inner': { tableId: 'q9rcu2l5en', rowId: 'kkyehoxutvs', colId: '6nj5cy7mrat', rowspan: 1, colspan: 1, style: 'height: 100px;' } }, insert: '\n' },
+      { attributes: { 'table-up-cell-inner': { tableId: 'q9rcu2l5en', rowId: 'ife4q2in0se', colId: 'odojvz7psp8', rowspan: 1, colspan: 1, style: 'height: 100px;' } }, insert: '\n' },
+      { attributes: { 'table-up-cell-inner': { tableId: 'q9rcu2l5en', rowId: 'ife4q2in0se', colId: 'thtn1vm1a0l', rowspan: 1, colspan: 1, style: 'height: 100px;' } }, insert: '\n' },
+      { attributes: { 'table-up-cell-inner': { tableId: 'q9rcu2l5en', rowId: 'ife4q2in0se', colId: '6ci2o6ophk8', rowspan: 1, colspan: 1, style: 'height: 100px;' } }, insert: '\n' },
+      { attributes: { 'table-up-cell-inner': { tableId: 'q9rcu2l5en', rowId: 'ife4q2in0se', colId: 'k7jzkt8ede8', rowspan: 1, colspan: 1, style: 'height: 100px;' } }, insert: '\n' },
+      { attributes: { 'table-up-cell-inner': { tableId: 'q9rcu2l5en', rowId: 'ife4q2in0se', colId: '6nj5cy7mrat', rowspan: 1, colspan: 1, style: 'height: 100px;' } }, insert: '\n' },
+      { attributes: { 'table-up-cell-inner': { tableId: 'q9rcu2l5en', rowId: 'waafccgk7yk', colId: 'odojvz7psp8', rowspan: 1, colspan: 1, style: 'height: 100px;' } }, insert: '\n' },
+      { attributes: { 'table-up-cell-inner': { tableId: 'q9rcu2l5en', rowId: 'waafccgk7yk', colId: 'thtn1vm1a0l', rowspan: 1, colspan: 1, style: 'height: 100px;' } }, insert: '\n' },
+      { attributes: { 'table-up-cell-inner': { tableId: 'q9rcu2l5en', rowId: 'waafccgk7yk', colId: '6ci2o6ophk8', rowspan: 1, colspan: 1, style: 'height: 100px;' } }, insert: '\n' },
+      { attributes: { 'table-up-cell-inner': { tableId: 'q9rcu2l5en', rowId: 'waafccgk7yk', colId: 'k7jzkt8ede8', rowspan: 1, colspan: 1, style: 'height: 100px;' } }, insert: '\n' },
+      { attributes: { 'table-up-cell-inner': { tableId: 'q9rcu2l5en', rowId: 'waafccgk7yk', colId: '6nj5cy7mrat', rowspan: 1, colspan: 1, style: 'height: 100px;' } }, insert: '\n' },
+      { attributes: { 'table-up-cell-inner': { tableId: 'q9rcu2l5en', rowId: 'lb7s1smtyh', colId: 'odojvz7psp8', rowspan: 1, colspan: 1, style: 'height: 100px;' } }, insert: '\n' },
+      { attributes: { 'table-up-cell-inner': { tableId: 'q9rcu2l5en', rowId: 'lb7s1smtyh', colId: 'thtn1vm1a0l', rowspan: 1, colspan: 1, style: 'height: 100px;' } }, insert: '\n' },
+      { attributes: { 'table-up-cell-inner': { tableId: 'q9rcu2l5en', rowId: 'lb7s1smtyh', colId: '6ci2o6ophk8', rowspan: 1, colspan: 1, style: 'height: 100px;' } }, insert: '\n' },
+      { attributes: { 'table-up-cell-inner': { tableId: 'q9rcu2l5en', rowId: 'lb7s1smtyh', colId: 'k7jzkt8ede8', rowspan: 1, colspan: 1, style: 'height: 100px;' } }, insert: '\n' },
+      { attributes: { 'table-up-cell-inner': { tableId: 'q9rcu2l5en', rowId: 'lb7s1smtyh', colId: '6nj5cy7mrat', rowspan: 1, colspan: 1, style: 'height: 100px;' } }, insert: '\n' },
+      { attributes: { 'table-up-cell-inner': { tableId: 'q9rcu2l5en', rowId: 'jgvhoknv7tf', colId: 'odojvz7psp8', rowspan: 1, colspan: 1, style: 'height: 100px;' } }, insert: '\n' },
+      { attributes: { 'table-up-cell-inner': { tableId: 'q9rcu2l5en', rowId: 'jgvhoknv7tf', colId: 'thtn1vm1a0l', rowspan: 1, colspan: 1, style: 'height: 100px;' } }, insert: '\n' },
+      { attributes: { 'table-up-cell-inner': { tableId: 'q9rcu2l5en', rowId: 'jgvhoknv7tf', colId: '6ci2o6ophk8', rowspan: 1, colspan: 1, style: 'height: 100px;' } }, insert: '\n' },
+      { attributes: { 'table-up-cell-inner': { tableId: 'q9rcu2l5en', rowId: 'jgvhoknv7tf', colId: 'k7jzkt8ede8', rowspan: 1, colspan: 1, style: 'height: 100px;' } }, insert: '\n' },
+      { attributes: { 'table-up-cell-inner': { tableId: 'q9rcu2l5en', rowId: 'jgvhoknv7tf', colId: '6nj5cy7mrat', rowspan: 1, colspan: 1, style: 'height: 100px;' } }, insert: '\n' },
+      { attributes: { 'table-up-cell-inner': { tableId: 'q9rcu2l5en', rowId: 'bxqnf58tmfd', colId: 'odojvz7psp8', rowspan: 1, colspan: 1, style: 'height: 100px;' } }, insert: '\n' },
+      { attributes: { 'table-up-cell-inner': { tableId: 'q9rcu2l5en', rowId: 'bxqnf58tmfd', colId: 'thtn1vm1a0l', rowspan: 1, colspan: 1, style: 'height: 100px;' } }, insert: '\n' },
+      { attributes: { 'table-up-cell-inner': { tableId: 'q9rcu2l5en', rowId: 'bxqnf58tmfd', colId: '6ci2o6ophk8', rowspan: 1, colspan: 1, style: 'height: 100px;' } }, insert: '\n' },
+      { attributes: { 'table-up-cell-inner': { tableId: 'q9rcu2l5en', rowId: 'bxqnf58tmfd', colId: 'k7jzkt8ede8', rowspan: 1, colspan: 1, style: 'height: 100px;' } }, insert: '\n' },
+      { attributes: { 'table-up-cell-inner': { tableId: 'q9rcu2l5en', rowId: 'bxqnf58tmfd', colId: '6nj5cy7mrat', rowspan: 1, colspan: 1, style: 'height: 100px;' } }, insert: '\n' },
+      { attributes: { 'table-up-cell-inner': { tableId: 'q9rcu2l5en', rowId: 'dctaip1l39v', colId: 'odojvz7psp8', rowspan: 1, colspan: 1, style: 'height: 100px;' } }, insert: '\n' },
+      { attributes: { 'table-up-cell-inner': { tableId: 'q9rcu2l5en', rowId: 'dctaip1l39v', colId: 'thtn1vm1a0l', rowspan: 1, colspan: 1, style: 'height: 100px;' } }, insert: '\n' },
+      { attributes: { 'table-up-cell-inner': { tableId: 'q9rcu2l5en', rowId: 'dctaip1l39v', colId: '6ci2o6ophk8', rowspan: 1, colspan: 1, style: 'height: 100px;' } }, insert: '\n' },
+      { attributes: { 'table-up-cell-inner': { tableId: 'q9rcu2l5en', rowId: 'dctaip1l39v', colId: 'k7jzkt8ede8', rowspan: 1, colspan: 1, style: 'height: 100px;' } }, insert: '\n' },
+      { attributes: { 'table-up-cell-inner': { tableId: 'q9rcu2l5en', rowId: 'dctaip1l39v', colId: '6nj5cy7mrat', rowspan: 1, colspan: 1, style: 'height: 100px;' } }, insert: '\n' },
+      { insert: '\n\n\n\n\n\n\n\n\n\n\n\n\n' },
+    ]);
+    await page.waitForTimeout(1000);
+
+    await page.locator('#editor5 .ql-editor td').nth(0).click();
+    await page.mouse.down();
+    await page.mouse.wheel(500, 200);
+    await page.waitForTimeout(1000);
+    const bounding = (await page.locator('#editor5 .ql-editor td').nth(12).boundingBox())!;
+    expect(bounding).not.toBeNull();
+    await page.mouse.move(bounding.x + bounding.width / 2, bounding.y + bounding.height / 2);
+
+    const selectedTds = await page.evaluate(() => {
+      return (window.quills[4].getModule('table-up') as any).tableSelection!.selectedTds;
+    });
+    expect(selectedTds.length).toBe(9);
+  });
+});