quill-table-up 2.2.0 → 2.2.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "quill-table-up",
   "type": "module",
-  "version": "2.2.0",
+  "version": "2.2.2",
   "packageManager": "pnpm@9.9.0",
   "description": "A table module for quill2.x",
   "author": "zzxming",
@@ -47,8 +47,10 @@
     "@floating-ui/dom": "^1.6.13"
   },
   "devDependencies": {
+    "@babel/preset-env": "^7.27.1",
     "@esbuild-kit/cjs-loader": "^2.4.4",
     "@playwright/test": "^1.52.0",
+    "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-node-resolve": "^16.0.1",
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^11.1.6",
@@ -71,6 +73,7 @@
     "rollup": "^4.40.1",
     "rollup-plugin-dts": "^6.2.1",
     "rollup-plugin-svg-import": "^3.0.0",
+    "tslib": "^2.8.1",
     "typescript": "~5.7.3",
     "vitest": "^3.1.2"
   }

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

@@ -6,6 +6,47 @@ test.beforeEach(async ({ page }) => {
   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([

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

@@ -107,3 +107,38 @@ extendTest('test TableScrollbar should not effect selection', async ({ page, edi
     return !document.onselectstart || (document.onselectstart && document.onselectstart(new Event('selectstart')) === true);
   })).toBe(true);
 });
+
+extendTest('scrollbar should be no offset when container have padding', async ({ page, editorPage, browserName }) => {
+  editorPage.index = 4;
+  await editorPage.setContents([
+    { insert: '\n' },
+    { insert: { 'table-up-col': { tableId: '1', colId: '1', full: false, width: 500 } } },
+    { insert: { 'table-up-col': { tableId: '1', colId: '2', full: false, width: 500 } } },
+    { insert: { 'table-up-col': { tableId: '1', colId: '3', full: false, width: 500 } } },
+    { 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: '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' },
+    { insert: '\n' },
+  ]);
+
+  const toolbox = page.locator('#editor5 .table-up-toolbox').nth(0);
+  await expect(toolbox).toHaveCSS('left', '20px');
+  await expect(toolbox).toHaveCSS('top', '20px');
+
+  await page.locator('#editor5 .ql-editor td').nth(0).click();
+  await page.waitForTimeout(1000);
+  const selectionBounding = (await page.locator('#editor5 .table-up-selection').boundingBox())!;
+  const scrollHorizontalScroll = (await page.locator('#editor5 .table-up-scrollbar.is-horizontal').boundingBox())!;
+  expect(scrollHorizontalScroll).not.toBeNull();
+  expect(selectionBounding).not.toBeNull();
+  if (browserName === 'firefox') {
+    // extra 1px for broder
+    expect(scrollHorizontalScroll.x).toBe(selectionBounding.x + 3);
+  }
+  else {
+    expect(scrollHorizontalScroll.x).toBe(selectionBounding.x + 2);
+  }
+});

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

@@ -515,3 +515,64 @@ extendTest('should delete tablewhen selected all cells and press delete', async
 
   expect(await page.locator('#editor1 .ql-table').count()).toBe(0);
 });
+
+extendTest('selection should be no offset when container have padding', async ({ page, editorPage }) => {
+  editorPage.index = 4;
+  await editorPage.setContents([
+    { insert: '\n' },
+    { insert: { 'table-up-col': { tableId: '1', colId: '1', full: false, width: 300 } } },
+    { insert: { 'table-up-col': { tableId: '1', colId: '2', full: false, width: 300 } } },
+    { insert: { 'table-up-col': { tableId: '1', colId: '3', full: false, width: 300 } } },
+    { 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: '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' },
+    { insert: '\n' },
+  ]);
+
+  const toolbox = page.locator('#editor5 .table-up-toolbox').nth(0);
+  await expect(toolbox).toHaveCSS('left', '20px');
+  await expect(toolbox).toHaveCSS('top', '20px');
+
+  await page.locator('#editor5 .ql-editor td').nth(0).click();
+
+  const tableBounding = (await page.locator('#editor5 .ql-editor .ql-table-wrapper').boundingBox())!;
+  const selectionBounding = (await page.locator('#editor5 .table-up-selection').boundingBox())!;
+  expect(tableBounding).not.toBeNull();
+  expect(selectionBounding).not.toBeNull();
+  expect(tableBounding.x).toBe(selectionBounding.x);
+  expect(tableBounding.y).toBe(selectionBounding.y);
+});
+
+extendTest('toolbox bounds should same with quill.root', async ({ page, editorPage }) => {
+  editorPage.index = 4;
+  const toolbox = page.locator('#editor5 .table-up-toolbox').nth(0);
+  const quillRoot = page.locator('#editor5 .ql-editor').nth(0);
+  const toolboxBoundingBefore = (await toolbox.boundingBox())!;
+  const quillRootBoundingBefore = (await quillRoot.boundingBox())!;
+  expect(toolboxBoundingBefore).not.toBeNull();
+  expect(quillRootBoundingBefore).not.toBeNull();
+  expect(toolboxBoundingBefore).toEqual(quillRootBoundingBefore);
+
+  await editorPage.setContents([
+    { insert: '\n' },
+    { insert: { 'table-up-col': { tableId: '1', colId: '1', full: false, width: 300 } } },
+    { insert: { 'table-up-col': { tableId: '1', colId: '2', full: false, width: 300 } } },
+    { insert: { 'table-up-col': { tableId: '1', colId: '3', full: false, width: 300 } } },
+    { 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: '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' },
+    { insert: '\n' },
+  ]);
+
+  const toolboxBoundingAfter = (await toolbox.boundingBox())!;
+  const quillRootBoundingAfter = (await quillRoot.boundingBox())!;
+  expect(toolboxBoundingAfter).not.toBeNull();
+  expect(quillRootBoundingAfter).not.toBeNull();
+  expect(toolboxBoundingAfter).toEqual(quillRootBoundingAfter);
+});