quill-table-up 3.1.2 → 3.2.0

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

@@ -1,134 +1,134 @@
-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('tableCaption switch visiable', 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' },
-  ]);
-  await page.waitForTimeout(1000);
-
-  const captionSwitch = page.locator('#editor1 .ql-editor .ql-table caption.ql-table-caption .ql-table-caption--switch').nth(0);
-  await expect(captionSwitch).not.toBeVisible();
-
-  const boundingBox = (await page.locator('#editor1 .ql-editor .ql-table caption.ql-table-caption').boundingBox())!;
-  expect(boundingBox).not.toBeNull();
-  await page.mouse.move(boundingBox.x + boundingBox.width / 2, boundingBox.y + boundingBox.height / 2);
-  await expect(captionSwitch).toBeVisible();
-  await page.mouse.move(0, 0);
-  await expect(captionSwitch).not.toBeVisible();
-});
-
-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();
-});
+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('tableCaption switch visiable', 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' },
+  ]);
+  await page.waitForTimeout(1000);
+
+  const captionSwitch = page.locator('#editor1 .ql-editor .ql-table caption.ql-table-caption .ql-table-caption--switch').nth(0);
+  await expect(captionSwitch).not.toBeVisible();
+
+  const boundingBox = (await page.locator('#editor1 .ql-editor .ql-table caption.ql-table-caption').boundingBox())!;
+  expect(boundingBox).not.toBeNull();
+  await page.mouse.move(boundingBox.x + boundingBox.width / 2, boundingBox.y + boundingBox.height / 2);
+  await expect(captionSwitch).toBeVisible();
+  await page.mouse.move(0, 0);
+  await expect(captionSwitch).not.toBeVisible();
+});
+
+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-clipboard.test.ts

@@ -1,20 +1,20 @@
-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('clipboard convert cell border style with css properties', async ({ page, editorPage }) => {
-  editorPage.index = 0;
-  await editorPage.html(`<table><tbody><tr><td style="border-color: rgb(var(--color-red));">123</td></tr></tbody></table>`);
-
-  const tdBorderCssText = await page.locator('#container1 .ql-table-wrapper td').nth(0).evaluate(el => el.style.cssText);
-  expect(tdBorderCssText).toBe('border-color: rgb(var(--color-red));');
-
-  await editorPage.html(`<table><tbody><tr><td style="background-color: rgb(var(--color-red));">123</td></tr></tbody></table>`);
-
-  const tdBgCssText = await page.locator('#container1 .ql-table-wrapper td').nth(0).evaluate(el => el.style.cssText);
-  expect(tdBgCssText).toBe('background-color: rgb(var(--color-red));');
-});
+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('clipboard convert cell border style with css properties', async ({ page, editorPage }) => {
+  editorPage.index = 0;
+  await editorPage.html(`<table><tbody><tr><td style="border-color: rgb(var(--color-red));">123</td></tr></tbody></table>`);
+
+  const tdBorderCssText = await page.locator('#container1 .ql-table-wrapper td').nth(0).evaluate(el => el.style.cssText);
+  expect(tdBorderCssText).toBe('border-color: rgb(var(--color-red));');
+
+  await editorPage.html(`<table><tbody><tr><td style="background-color: rgb(var(--color-red));">123</td></tr></tbody></table>`);
+
+  const tdBgCssText = await page.locator('#container1 .ql-table-wrapper td').nth(0).evaluate(el => el.style.cssText);
+  expect(tdBgCssText).toBe('background-color: rgb(var(--color-red));');
+});

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

@@ -1,151 +1,151 @@
-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('clean handler should not clean insert text format', 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: '12345', attributes: { bold: true } },
-    { attributes: { 'list': 'bullet', 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
-    { insert: '12345', attributes: { bold: true } },
-    { attributes: { 'list': 'bullet', 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
-    { insert: '22345', attributes: { bold: true } },
-    { 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' },
-  ]);
-  await editorPage.setSelection(8, 0);
-
-  await page.locator('#container1 .ql-toolbar .ql-clean').click();
-  await editorPage.focus();
-  await page.keyboard.type('text');
-
-  const delta = await editorPage.getContents();
-  const contents = [
-    { 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: '12345', attributes: { bold: true } },
-    { insert: 'text' },
-    { attributes: { 'list': 'bullet', 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
-    { insert: '12345', attributes: { bold: true } },
-    { attributes: { 'list': 'bullet', 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
-    { insert: '22345', attributes: { bold: true } },
-    { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '2', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
-    { insert: '3' },
-    { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '1', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
-    { insert: '4' },
-    { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '2', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
-    { insert: '\n' },
-  ];
-  for (const [i, op] of delta.ops.entries()) {
-    expect(op).toStrictEqual(contents[i]);
-  }
-});
-
-extendTest('clean handler should not keep table format when have two empty line after block format(like header)', async ({ page, editorPage }) => {
-  editorPage.index = 0;
-  await editorPage.setContents([
-    { insert: '\n' },
-    { insert: { 'table-up-col': { tableId: '1', colId: '1', full: false, width: 100 } } },
-    { insert: 'header' },
-    { attributes: { 'header': 1, '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: '1', rowspan: 1, colspan: 1 } }, insert: '\n\n' },
-    { insert: '\n' },
-  ]);
-
-  await editorPage.setSelection(0, 11);
-  await page.locator('#container1 .ql-toolbar .ql-clean').click();
-  const delta = await editorPage.getContents();
-  const contents = [{ insert: '\nheader\n\n\n\n' }];
-  for (const [i, op] of delta.ops.entries()) {
-    expect(op).toStrictEqual(contents[i]);
-  }
-  expect(await editorPage.getSelection()).toEqual({ index: 0, length: 10 });
-});
-
-extendTest('toolbar item handler should trigger source USER', 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: '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 textChangePromise = page.evaluate(() => {
-    return new Promise<string>((resolve) => {
-      window.quills[0].on('text-change', (delta, oldDelta, source) => {
-        if (source === 'user') {
-          resolve(source);
-        }
-      });
-    });
-  });
-
-  await editorPage.setSelection(3, 1);
-  await page.locator('#container1 .ql-toolbar .ql-bold').click();
-  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('');
-});
+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('clean handler should not clean insert text format', 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: '12345', attributes: { bold: true } },
+    { attributes: { 'list': 'bullet', 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
+    { insert: '12345', attributes: { bold: true } },
+    { attributes: { 'list': 'bullet', 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
+    { insert: '22345', attributes: { bold: true } },
+    { 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' },
+  ]);
+  await editorPage.setSelection(8, 0);
+
+  await page.locator('#container1 .ql-toolbar .ql-clean').click();
+  await editorPage.focus();
+  await page.keyboard.type('text');
+
+  const delta = await editorPage.getContents();
+  const contents = [
+    { 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: '12345', attributes: { bold: true } },
+    { insert: 'text' },
+    { attributes: { 'list': 'bullet', 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
+    { insert: '12345', attributes: { bold: true } },
+    { attributes: { 'list': 'bullet', 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
+    { insert: '22345', attributes: { bold: true } },
+    { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '2', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
+    { insert: '3' },
+    { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '1', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
+    { insert: '4' },
+    { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '2', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
+    { insert: '\n' },
+  ];
+  for (const [i, op] of delta.ops.entries()) {
+    expect(op).toStrictEqual(contents[i]);
+  }
+});
+
+extendTest('clean handler should not keep table format when have two empty line after block format(like header)', async ({ page, editorPage }) => {
+  editorPage.index = 0;
+  await editorPage.setContents([
+    { insert: '\n' },
+    { insert: { 'table-up-col': { tableId: '1', colId: '1', full: false, width: 100 } } },
+    { insert: 'header' },
+    { attributes: { 'header': 1, '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: '1', rowspan: 1, colspan: 1 } }, insert: '\n\n' },
+    { insert: '\n' },
+  ]);
+
+  await editorPage.setSelection(0, 11);
+  await page.locator('#container1 .ql-toolbar .ql-clean').click();
+  const delta = await editorPage.getContents();
+  const contents = [{ insert: '\nheader\n\n\n\n' }];
+  for (const [i, op] of delta.ops.entries()) {
+    expect(op).toStrictEqual(contents[i]);
+  }
+  expect(await editorPage.getSelection()).toEqual({ index: 0, length: 10 });
+});
+
+extendTest('toolbar item handler should trigger source USER', 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: '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 textChangePromise = page.evaluate(() => {
+    return new Promise<string>((resolve) => {
+      window.quills[0].on('text-change', (delta, oldDelta, source) => {
+        if (source === 'user') {
+          resolve(source);
+        }
+      });
+    });
+  });
+
+  await editorPage.setSelection(3, 1);
+  await page.locator('#container1 .ql-toolbar .ql-bold').click();
+  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('');
+});