quill-table-up 3.1.2 → 3.2.0

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

@@ -1,3 +1,6 @@
+import type { TableCellInnerFormat } from '../../formats';
+import type { TableSelection } from '../../modules';
+import type { TableUp } from '../../table-up';
 import { expect, test } from '@playwright/test';
 import { createTableBySelect, extendTest, pasteHTML } from './utils';
 
@@ -402,9 +405,15 @@ extendTest.describe('TableSelection keyboard handler', () => {
     expect(cell1Bound).not.toBeNull();
 
     await page.locator('#container1 .ql-table-wrapper td').nth(0).click();
-    page.mouse.move(cell1Bound.x + cell1Bound.width * 0.5, cell1Bound.y + cell1Bound.height * 0.5);
-    page.mouse.down();
-    page.mouse.move(cell1Bound.x + cell1Bound.width * 1.5, cell1Bound.y + cell1Bound.height * 1.5);
+    // set table selection
+    await page.evaluate(() => {
+      const tableUp = window.quills[0].getModule('table-up') as TableUp;
+      const tableSelection = tableUp.getModule<TableSelection>('table-selection')!;
+      const doms = document.querySelectorAll('#container1 td .ql-table-cell-inner');
+      const cells = Array.from(doms).map(dom => (window as any).Quill.find(dom)) as TableCellInnerFormat[];
+      tableSelection.setSelectedTds([cells[0], cells[1], cells[3]]);
+      tableSelection.updateWithSelectedTds();
+    });
 
     const tableSelection = page.locator('#container1 .table-up-toolbox .table-up-selection__line');
     await expect(tableSelection).toBeVisible();

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

@@ -1,172 +1,172 @@
-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('test menu color picker should work correctly', async ({ page }) => {
-  await createTableBySelect(page, 'container1', 3, 3);
-  const container1Cell = page.locator('#editor1 .ql-table-cell').nth(0);
-  const cellBoundbox = (await container1Cell.boundingBox())!;
-  expect(cellBoundbox).not.toBeNull();
-  await container1Cell.click();
-  await page.mouse.down();
-  await page.mouse.move(cellBoundbox.x + cellBoundbox.width * 1.5, cellBoundbox.y + cellBoundbox.height * 1.5);
-  await page.mouse.up();
-  await container1Cell.click({ button: 'right' });
-  const selectionBoundbox = (await page.locator('#container1 .table-up-toolbox .table-up-selection .table-up-selection__line').boundingBox())!;
-  expect(selectionBoundbox).not.toBeNull();
-  expect(selectionBoundbox.x).toBeCloseTo(cellBoundbox.x, 0);
-  expect(selectionBoundbox.y).toBeCloseTo(cellBoundbox.y, 0);
-  expect(selectionBoundbox.width).toBeCloseTo(cellBoundbox.width * 2, 0);
-  expect(selectionBoundbox.height).toBeCloseTo(cellBoundbox.height * 2, 0);
-
-  await page.locator('.table-up-menu.is-contextmenu .table-up-menu__item').filter({ hasText: 'Set background color' }).first().click();
-  await page.locator('.table-up-tooltip .table-up-color-map .table-up-color-map__item[style="background-color: rgb(255, 255, 255);"]').first().click();
-  await expect(page.locator('.table-up-menu.is-contextmenu')).toBeVisible();
-  await expect(page.locator('#editor1 .ql-table-cell[style="background-color: rgb(255, 255, 255);"]')).toHaveCount(4);
-  await expect(page.locator('#editor1 .ql-table-cell').nth(0)).toHaveCSS('background-color', 'rgb(255, 255, 255)');
-  await expect(page.locator('#editor1 .ql-table-cell').nth(1)).toHaveCSS('background-color', 'rgb(255, 255, 255)');
-  await expect(page.locator('#editor1 .ql-table-cell').nth(3)).toHaveCSS('background-color', 'rgb(255, 255, 255)');
-  await expect(page.locator('#editor1 .ql-table-cell').nth(4)).toHaveCSS('background-color', 'rgb(255, 255, 255)');
-
-  await page.mouse.click(0, 0);
-
-  await createTableBySelect(page, 'container2', 3, 3);
-  await page.locator('#editor2 .ql-table-cell').nth(0).click();
-  await page.waitForTimeout(1000);
-
-  await page.locator('#editor2 .table-up-menu .color-selector').nth(0).click();
-  await page.waitForTimeout(1000);
-
-  await page.locator('.table-up-tooltip .table-up-color-map .table-up-color-map__item[style="background-color: rgb(255, 255, 255);"]').first().click();
-  await expect(page.locator('#editor2 .table-up-menu')).toBeVisible();
-  await expect(page.locator('#editor2 .ql-table-cell').nth(0)).toHaveCSS('background-color', 'rgb(255, 255, 255)');
-});
-
-extendTest('test menu color picker should not have two at the same time', async ({ page }) => {
-  await createTableBySelect(page, 'container2', 3, 3);
-  await page.locator('#editor2 .ql-table-cell').nth(0).click();
-  await page.waitForTimeout(1000);
-
-  await page.locator('#editor2 .table-up-menu .color-selector').nth(0).click();
-  await page.waitForTimeout(1000);
-
-  await page.locator('.table-up-tooltip .custom.table-up-color-map__btn').click();
-  const colorpicker = page.locator('.table-up-tooltip .custom.table-up-color-map__btn .table-up-color-picker');
-  await expect(colorpicker).toBeVisible();
-
-  await page.locator('#editor2 .table-up-menu .color-selector').nth(1).click();
-  await page.waitForTimeout(1000);
-  await expect(colorpicker).not.toBeVisible();
-  await expect(page.locator('.table-up-tooltip .table-up-color-map')).toBeVisible();
-});
-
-extendTest('test TableMenuSelect should update when text change', async ({ page, editorPage }) => {
-  editorPage.index = 1;
-  await createTableBySelect(page, 'container2', 3, 3);
-
-  await page.evaluate(() => {
-    window.scrollTo(0, 600);
-  });
-  const lineBound = (await page.locator('#editor2 .ql-editor > p').first().boundingBox())!;
-  expect(lineBound).not.toBeNull();
-
-  await page.locator('#editor2 .ql-table .ql-table-cell').nth(0).click();
-  const menuWrapper = page.locator('#container2 .table-up-menu');
-  await expect(menuWrapper).toBeVisible();
-  const menuBound = (await menuWrapper.boundingBox())!;
-  expect(menuBound).not.toBeNull();
-
-  await editorPage.updateContents([{ insert: '12345\n12345' }], 'user');
-  await page.evaluate(() => {
-    window.scrollTo(0, 600);
-  });
-
-  await expect(menuWrapper).toBeVisible();
-  const newMenuWrapper = (await menuWrapper.boundingBox())!;
-  expect(newMenuWrapper).not.toBeNull();
-  expect(newMenuWrapper.y - menuBound.y).toBeCloseTo(lineBound.height, 0);
-});
-
-extendTest('TableMenu color picker should trigger by click', async ({ page }) => {
-  await createTableBySelect(page, 'container1', 3, 3);
-  const cell = page.locator('#editor1 .ql-editor .ql-table td').nth(0);
-  await cell.click();
-  await expect(page.locator('#container1 .table-up-toolbox .table-up-selection .table-up-selection__line')).toBeVisible();
-  await cell.click({ button: 'right' });
-  const colorItem = page.locator('.table-up-menu.is-contextmenu .table-up-menu__item').filter({ hasText: 'Set background color' }).first();
-  await colorItem.hover();
-  await expect(page.locator('.table-up-tooltip .table-up-color-map')).not.toBeVisible();
-  await colorItem.click();
-  await expect(page.locator('.table-up-tooltip .table-up-color-map')).toBeVisible();
-});
-
-extendTest('TableMenu color picker display should blur editor', async ({ page }) => {
-  await createTableBySelect(page, 'container1', 3, 3);
-  const cell = page.locator('#editor1 .ql-editor .ql-table td').nth(0);
-  await cell.click();
-  await expect(page.locator('#container1 .table-up-toolbox .table-up-selection .table-up-selection__line')).toBeVisible();
-  await cell.click({ button: 'right' });
-
-  const qlEditor = await page.locator('#editor1 .ql-editor').elementHandle();
-  expect(qlEditor).not.toBeNull();
-  const isFocused = await page.evaluate((qlEditor) => {
-    const activeElement = document.activeElement;
-    return qlEditor.contains(activeElement);
-  }, qlEditor!);
-  expect(isFocused).toBe(true);
-
-  const colorItem = page.locator('.table-up-menu.is-contextmenu .table-up-menu__item').filter({ hasText: 'Set background color' }).first();
-  await colorItem.click();
-  await expect(page.locator('.table-up-tooltip .table-up-color-map')).toBeVisible();
-
-  const isFocusedAfterMenuDisplay = await page.evaluate((qlEditor) => {
-    const activeElement = document.activeElement;
-    return qlEditor.contains(activeElement);
-  }, qlEditor!);
-  expect(isFocusedAfterMenuDisplay).toBe(false);
-});
-
-extendTest('test TableSelection should not display when color pick display', async ({ page }) => {
-  await createTableBySelect(page, 'container1', 3, 3);
-  const cell = page.locator('#editor1 .ql-editor .ql-table td').nth(0);
-  await cell.click();
-  await expect(page.locator('#container1 .table-up-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: 'Set background color' }).first().click();
-  await page.waitForTimeout(1000);
-  await expect(page.locator('#container1 .table-up-toolbox .table-up-selection .table-up-selection__line')).not.toBeVisible();
-
-  await page.locator('#editor1 .ql-editor td').nth(0).click();
-  await expect(page.locator('#container1 .table-up-toolbox .table-up-selection .table-up-selection__line')).toBeVisible();
-
-  await cell.click();
-  await cell.click({ button: 'right' });
-  await page.locator('.table-up-menu.is-contextmenu .table-up-menu__item').filter({ hasText: 'Set background color' }).first().click();
-  await page.waitForTimeout(1000);
-  await page.locator('.table-up-tooltip .table-up-color-map .table-up-color-map__btn.custom').click();
-  await page.waitForTimeout(1000);
-  const bgPicker = page.locator('.table-up-tooltip .table-up-color-map .table-up-color-map__btn.custom .table-up-color-picker__background');
-  const bounding = (await bgPicker.boundingBox())!;
-  expect(bounding).not.toBeNull();
-  await page.mouse.click(bounding.x + bounding.width / 2, bounding.y + bounding.height / 2);
-  await page.waitForTimeout(1000);
-  await expect(page.locator('#container1 .table-up-toolbox .table-up-selection .table-up-selection__line')).not.toBeVisible();
-});
-
-extendTest('table width switch should work', async ({ page }) => {
-  await createTableBySelect(page, 'container1', 4, 4);
-  const cell = page.locator('#editor1 .ql-editor .ql-table td').nth(0);
-  await cell.click();
-  await cell.click({ button: 'right' });
-  await page.locator('.table-up-menu.is-contextmenu .table-up-menu__item').filter({ hasText: 'Switch table width' }).first().click();
-  expect(await page.locator('#editor1 .ql-editor .ql-table col[data-full="true"]').count()).toBe(4);
-
-  await cell.click({ button: 'right' });
-  await page.locator('.table-up-menu.is-contextmenu .table-up-menu__item').filter({ hasText: 'Switch table width' }).first().click();
-  expect(await page.locator('#editor1 .ql-editor .ql-table col:not([data-full])').count()).toBe(4);
-});
+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('test menu color picker should work correctly', async ({ page }) => {
+  await createTableBySelect(page, 'container1', 3, 3);
+  const container1Cell = page.locator('#editor1 .ql-table-cell').nth(0);
+  const cellBoundbox = (await container1Cell.boundingBox())!;
+  expect(cellBoundbox).not.toBeNull();
+  await container1Cell.click();
+  await page.mouse.down();
+  await page.mouse.move(cellBoundbox.x + cellBoundbox.width * 1.5, cellBoundbox.y + cellBoundbox.height * 1.5);
+  await page.mouse.up();
+  await container1Cell.click({ button: 'right' });
+  const selectionBoundbox = (await page.locator('#container1 .table-up-toolbox .table-up-selection .table-up-selection__line').boundingBox())!;
+  expect(selectionBoundbox).not.toBeNull();
+  expect(selectionBoundbox.x).toBeCloseTo(cellBoundbox.x, 0);
+  expect(selectionBoundbox.y).toBeCloseTo(cellBoundbox.y, 0);
+  expect(selectionBoundbox.width).toBeCloseTo(cellBoundbox.width * 2, 0);
+  expect(selectionBoundbox.height).toBeCloseTo(cellBoundbox.height * 2, 0);
+
+  await page.locator('.table-up-menu.is-contextmenu .table-up-menu__item').filter({ hasText: 'Set background color' }).first().click();
+  await page.locator('.table-up-tooltip .table-up-color-map .table-up-color-map__item[style="background-color: rgb(255, 255, 255);"]').first().click();
+  await expect(page.locator('.table-up-menu.is-contextmenu')).toBeVisible();
+  await expect(page.locator('#editor1 .ql-table-cell[style="background-color: rgb(255, 255, 255);"]')).toHaveCount(4);
+  await expect(page.locator('#editor1 .ql-table-cell').nth(0)).toHaveCSS('background-color', 'rgb(255, 255, 255)');
+  await expect(page.locator('#editor1 .ql-table-cell').nth(1)).toHaveCSS('background-color', 'rgb(255, 255, 255)');
+  await expect(page.locator('#editor1 .ql-table-cell').nth(3)).toHaveCSS('background-color', 'rgb(255, 255, 255)');
+  await expect(page.locator('#editor1 .ql-table-cell').nth(4)).toHaveCSS('background-color', 'rgb(255, 255, 255)');
+
+  await page.mouse.click(0, 0);
+
+  await createTableBySelect(page, 'container2', 3, 3);
+  await page.locator('#editor2 .ql-table-cell').nth(0).click();
+  await page.waitForTimeout(1000);
+
+  await page.locator('#editor2 .table-up-menu .color-selector').nth(0).click();
+  await page.waitForTimeout(1000);
+
+  await page.locator('.table-up-tooltip .table-up-color-map .table-up-color-map__item[style="background-color: rgb(255, 255, 255);"]').first().click();
+  await expect(page.locator('#editor2 .table-up-menu')).toBeVisible();
+  await expect(page.locator('#editor2 .ql-table-cell').nth(0)).toHaveCSS('background-color', 'rgb(255, 255, 255)');
+});
+
+extendTest('test menu color picker should not have two at the same time', async ({ page }) => {
+  await createTableBySelect(page, 'container2', 3, 3);
+  await page.locator('#editor2 .ql-table-cell').nth(0).click();
+  await page.waitForTimeout(1000);
+
+  await page.locator('#editor2 .table-up-menu .color-selector').nth(0).click();
+  await page.waitForTimeout(1000);
+
+  await page.locator('.table-up-tooltip .custom.table-up-color-map__btn').click();
+  const colorpicker = page.locator('.table-up-tooltip .custom.table-up-color-map__btn .table-up-color-picker');
+  await expect(colorpicker).toBeVisible();
+
+  await page.locator('#editor2 .table-up-menu .color-selector').nth(1).click();
+  await page.waitForTimeout(1000);
+  await expect(colorpicker).not.toBeVisible();
+  await expect(page.locator('.table-up-tooltip .table-up-color-map')).toBeVisible();
+});
+
+extendTest('test TableMenuSelect should update when text change', async ({ page, editorPage }) => {
+  editorPage.index = 1;
+  await createTableBySelect(page, 'container2', 3, 3);
+
+  await page.evaluate(() => {
+    window.scrollTo(0, 600);
+  });
+  const lineBound = (await page.locator('#editor2 .ql-editor > p').first().boundingBox())!;
+  expect(lineBound).not.toBeNull();
+
+  await page.locator('#editor2 .ql-table .ql-table-cell').nth(0).click();
+  const menuWrapper = page.locator('#container2 .table-up-menu');
+  await expect(menuWrapper).toBeVisible();
+  const menuBound = (await menuWrapper.boundingBox())!;
+  expect(menuBound).not.toBeNull();
+
+  await editorPage.updateContents([{ insert: '12345\n12345' }], 'user');
+  await page.evaluate(() => {
+    window.scrollTo(0, 600);
+  });
+
+  await expect(menuWrapper).toBeVisible();
+  const newMenuWrapper = (await menuWrapper.boundingBox())!;
+  expect(newMenuWrapper).not.toBeNull();
+  expect(newMenuWrapper.y - menuBound.y).toBeCloseTo(lineBound.height, 0);
+});
+
+extendTest('TableMenu color picker should trigger by click', async ({ page }) => {
+  await createTableBySelect(page, 'container1', 3, 3);
+  const cell = page.locator('#editor1 .ql-editor .ql-table td').nth(0);
+  await cell.click();
+  await expect(page.locator('#container1 .table-up-toolbox .table-up-selection .table-up-selection__line')).toBeVisible();
+  await cell.click({ button: 'right' });
+  const colorItem = page.locator('.table-up-menu.is-contextmenu .table-up-menu__item').filter({ hasText: 'Set background color' }).first();
+  await colorItem.hover();
+  await expect(page.locator('.table-up-tooltip .table-up-color-map')).not.toBeVisible();
+  await colorItem.click();
+  await expect(page.locator('.table-up-tooltip .table-up-color-map')).toBeVisible();
+});
+
+extendTest('TableMenu color picker display should blur editor', async ({ page }) => {
+  await createTableBySelect(page, 'container1', 3, 3);
+  const cell = page.locator('#editor1 .ql-editor .ql-table td').nth(0);
+  await cell.click();
+  await expect(page.locator('#container1 .table-up-toolbox .table-up-selection .table-up-selection__line')).toBeVisible();
+  await cell.click({ button: 'right' });
+
+  const qlEditor = await page.locator('#editor1 .ql-editor').elementHandle();
+  expect(qlEditor).not.toBeNull();
+  const isFocused = await page.evaluate((qlEditor) => {
+    const activeElement = document.activeElement;
+    return qlEditor.contains(activeElement);
+  }, qlEditor!);
+  expect(isFocused).toBe(true);
+
+  const colorItem = page.locator('.table-up-menu.is-contextmenu .table-up-menu__item').filter({ hasText: 'Set background color' }).first();
+  await colorItem.click();
+  await expect(page.locator('.table-up-tooltip .table-up-color-map')).toBeVisible();
+
+  const isFocusedAfterMenuDisplay = await page.evaluate((qlEditor) => {
+    const activeElement = document.activeElement;
+    return qlEditor.contains(activeElement);
+  }, qlEditor!);
+  expect(isFocusedAfterMenuDisplay).toBe(false);
+});
+
+extendTest('test TableSelection should not display when color pick display', async ({ page }) => {
+  await createTableBySelect(page, 'container1', 3, 3);
+  const cell = page.locator('#editor1 .ql-editor .ql-table td').nth(0);
+  await cell.click();
+  await expect(page.locator('#container1 .table-up-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: 'Set background color' }).first().click();
+  await page.waitForTimeout(1000);
+  await expect(page.locator('#container1 .table-up-toolbox .table-up-selection .table-up-selection__line')).not.toBeVisible();
+
+  await page.locator('#editor1 .ql-editor td').nth(0).click();
+  await expect(page.locator('#container1 .table-up-toolbox .table-up-selection .table-up-selection__line')).toBeVisible();
+
+  await cell.click();
+  await cell.click({ button: 'right' });
+  await page.locator('.table-up-menu.is-contextmenu .table-up-menu__item').filter({ hasText: 'Set background color' }).first().click();
+  await page.waitForTimeout(1000);
+  await page.locator('.table-up-tooltip .table-up-color-map .table-up-color-map__btn.custom').click();
+  await page.waitForTimeout(1000);
+  const bgPicker = page.locator('.table-up-tooltip .table-up-color-map .table-up-color-map__btn.custom .table-up-color-picker__background');
+  const bounding = (await bgPicker.boundingBox())!;
+  expect(bounding).not.toBeNull();
+  await page.mouse.click(bounding.x + bounding.width / 2, bounding.y + bounding.height / 2);
+  await page.waitForTimeout(1000);
+  await expect(page.locator('#container1 .table-up-toolbox .table-up-selection .table-up-selection__line')).not.toBeVisible();
+});
+
+extendTest('table width switch should work', async ({ page }) => {
+  await createTableBySelect(page, 'container1', 4, 4);
+  const cell = page.locator('#editor1 .ql-editor .ql-table td').nth(0);
+  await cell.click();
+  await cell.click({ button: 'right' });
+  await page.locator('.table-up-menu.is-contextmenu .table-up-menu__item').filter({ hasText: 'Switch table width' }).first().click();
+  expect(await page.locator('#editor1 .ql-editor .ql-table col[data-full="true"]').count()).toBe(4);
+
+  await cell.click({ button: 'right' });
+  await page.locator('.table-up-menu.is-contextmenu .table-up-menu__item').filter({ hasText: 'Switch table width' }).first().click();
+  expect(await page.locator('#editor1 .ql-editor .ql-table col:not([data-full])').count()).toBe(4);
+});