quill-table-up 3.1.2 → 3.2.1

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "quill-table-up",
   "type": "module",
-  "version": "3.1.2",
-  "packageManager": "pnpm@10.17.1",
+  "version": "3.2.1",
+  "packageManager": "pnpm@10.20.0",
   "description": "A table module for quill2.x",
   "author": "zzxming",
   "license": "MIT",
@@ -30,15 +30,12 @@
     "src"
   ],
   "scripts": {
-    "lint": "eslint . --cache",
-    "lint:fix": "eslint . --fix",
+    "lint": "eslint",
     "build": "tsx ./scripts/build.ts",
     "dev": "tsx ./scripts/build.ts watch",
     "server": "tsx ./scripts/start-server.ts",
     "test:unit": "vitest",
-    "test:unit-ui": "vitest --ui",
-    "test:e2e": "playwright test",
-    "test:e2e-ui": "playwright test --ui"
+    "test:e2e": "playwright test"
   },
   "peerDependencies": {
     "quill": "^2.0.3"
@@ -47,38 +44,39 @@
     "@floating-ui/dom": "^1.7.4"
   },
   "devDependencies": {
-    "@babel/preset-env": "^7.28.3",
-    "@oxc-project/runtime": "^0.92.0",
-    "@playwright/test": "^1.55.1",
+    "@babel/preset-env": "^7.28.5",
+    "@oxc-project/runtime": "^0.96.0",
+    "@playwright/test": "^1.56.1",
     "@prettier/plugin-xml": "^3.4.2",
-    "@rollup/plugin-babel": "^6.0.4",
-    "@rollup/plugin-typescript": "^12.1.4",
-    "@types/gulp": "^4.0.17",
+    "@rollup/plugin-babel": "^6.1.0",
+    "@rollup/plugin-typescript": "^12.3.0",
+    "@types/gulp": "^4.0.18",
     "@types/gulp-clean-css": "^4.3.4",
     "@types/gulp-less": "^0.0.36",
     "@types/gulp-postcss": "^8.0.6",
-    "@types/node": "^24.5.2",
+    "@types/node": "^24.9.2",
     "@types/postcss-pxtorem": "^6.1.0",
-    "@typescript-eslint/eslint-plugin": "^8.44.1",
-    "@typescript-eslint/parser": "^8.44.1",
-    "@vitest/coverage-v8": "^3.2.4",
-    "@vitest/ui": "^3.2.4",
-    "@zzxming/eslint-config": "0.5.8",
+    "@types/ws": "^8.18.1",
+    "@typescript-eslint/eslint-plugin": "^8.46.2",
+    "@typescript-eslint/parser": "^8.46.2",
+    "@vitest/coverage-v8": "^4.0.6",
+    "@vitest/ui": "^4.0.6",
+    "@zzxming/eslint-config": "0.6.0",
     "autoprefixer": "^10.4.21",
-    "eslint": "^9.36.0",
+    "eslint": "^9.39.0",
     "gulp": "^5.0.1",
     "gulp-clean-css": "^4.3.0",
     "gulp-less": "^5.0.0",
     "gulp-postcss": "^10.0.0",
-    "jsdom": "^27.0.0",
+    "jsdom": "^27.1.0",
     "parchment": "^3.0.0",
     "postcss-pxtorem": "^6.1.0",
     "resize-observer-polyfill": "^1.5.1",
-    "tsdown": "^0.15.5",
+    "tsdown": "^0.15.12",
     "tslib": "^2.8.1",
     "tsx": "^4.20.6",
-    "typescript": "~5.9.2",
-    "vitest": "^3.2.4",
+    "typescript": "~5.9.3",
+    "vitest": "^4.0.6",
     "ws": "^8.18.3"
   }
 }

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

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

package/src/__tests__/e2e/editor-page.ts

@@ -1,77 +1,77 @@
-import type { Page } from '@playwright/test';
-import type { Delta, Op } from 'quill';
-
-// Specify the index of the editor before use.
-export class EditorPage {
-  public index: number = 0;
-  constructor(public page: Page) {}
-
-  get root() {
-    return this.page.locator('.ql-editor');
-  }
-
-  async html(content: string) {
-    await this.page.evaluate(({ index, content: html }) => {
-      const contents = window.quills[index].clipboard.convert({ html, text: '\n' });
-      return window.quills[index].setContents(contents);
-    }, { index: this.index, content });
-  }
-
-  getSelection() {
-    return this.page.evaluate(({ index }) => {
-      return window.quills[index].getSelection();
-    }, { index: this.index });
-  }
-
-  async setSelection(index: null): Promise<void>;
-  async setSelection(index: number, length: number): Promise<void>;
-  async setSelection(range: { index: number; length: number }): Promise<void>;
-  async setSelection(
-    range: { index: number; length: number } | number | null,
-    length?: number,
-  ) {
-    await this.page.evaluate(
-      ({ index, range }) => window.quills[index].setSelection(range),
-      { index: this.index, range: typeof range === 'number' ? { index: range, length: length || 0 } : range },
-    );
-  }
-
-  async updateContents(delta: Op[], source: 'api' | 'user' = 'api') {
-    await this.page.evaluate(
-      ({ index, delta, source }) => {
-        window.quills[index].updateContents(delta, source);
-      },
-      { index: this.index, delta, source },
-    );
-  }
-
-  async setContents(delta: Op[]) {
-    await this.page.evaluate(({ index, delta }) => {
-      window.quills[index].setContents(delta);
-    }, { index: this.index, delta });
-  }
-
-  getContents(): Promise<Delta> {
-    return this.page.evaluate(({ index }) => {
-      return window.quills[index].getContents();
-    }, { index: this.index });
-  }
-
-  focus(): Promise<void> {
-    return this.page.evaluate(({ index }) => {
-      return window.quills[index].focus();
-    }, { index: this.index });
-  }
-
-  blur(): Promise<void> {
-    return this.page.evaluate(({ index }) => {
-      return window.quills[index].blur();
-    }, { index: this.index });
-  }
-
-  enable(enabled: boolean) {
-    return this.page.evaluate(({ index, enabled }) => {
-      return window.quills[index].enable(enabled);
-    }, { index: this.index, enabled });
-  }
-}
+import type { Page } from '@playwright/test';
+import type { Delta, Op } from 'quill';
+
+// Specify the index of the editor before use.
+export class EditorPage {
+  public index: number = 0;
+  constructor(public page: Page) {}
+
+  get root() {
+    return this.page.locator('.ql-editor');
+  }
+
+  async html(content: string) {
+    await this.page.evaluate(({ index, content: html }) => {
+      const contents = window.quills[index].clipboard.convert({ html, text: '\n' });
+      return window.quills[index].setContents(contents);
+    }, { index: this.index, content });
+  }
+
+  getSelection() {
+    return this.page.evaluate(({ index }) => {
+      return window.quills[index].getSelection();
+    }, { index: this.index });
+  }
+
+  async setSelection(index: null): Promise<void>;
+  async setSelection(index: number, length: number): Promise<void>;
+  async setSelection(range: { index: number; length: number }): Promise<void>;
+  async setSelection(
+    range: { index: number; length: number } | number | null,
+    length?: number,
+  ) {
+    await this.page.evaluate(
+      ({ index, range }) => window.quills[index].setSelection(range),
+      { index: this.index, range: typeof range === 'number' ? { index: range, length: length || 0 } : range },
+    );
+  }
+
+  async updateContents(delta: Op[], source: 'api' | 'user' = 'api') {
+    await this.page.evaluate(
+      ({ index, delta, source }) => {
+        window.quills[index].updateContents(delta, source);
+      },
+      { index: this.index, delta, source },
+    );
+  }
+
+  async setContents(delta: Op[]) {
+    await this.page.evaluate(({ index, delta }) => {
+      window.quills[index].setContents(delta);
+    }, { index: this.index, delta });
+  }
+
+  getContents(): Promise<Delta> {
+    return this.page.evaluate(({ index }) => {
+      return window.quills[index].getContents();
+    }, { index: this.index });
+  }
+
+  focus(): Promise<void> {
+    return this.page.evaluate(({ index }) => {
+      return window.quills[index].focus();
+    }, { index: this.index });
+  }
+
+  blur(): Promise<void> {
+    return this.page.evaluate(({ index }) => {
+      return window.quills[index].blur();
+    }, { index: this.index });
+  }
+
+  enable(enabled: boolean) {
+    return this.page.evaluate(({ index, enabled }) => {
+      return window.quills[index].enable(enabled);
+    }, { index: this.index, enabled });
+  }
+}

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

@@ -1,104 +1,104 @@
-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 TableAlign should functional', async ({ page }) => {
-  await createTableBySelect(page, 'container1', 3, 3);
-  const centerCell = page.locator('#editor1').getByRole('cell').nth(4);
-  await centerCell.click();
-  const cellBounding = (await centerCell.boundingBox())!;
-  expect(cellBounding).not.toBeNull();
-  await page.mouse.move(cellBounding.x, cellBounding.y);
-  const colBoundingBox = (await page.locator('#editor1 .table-up-resize-line__col').boundingBox())!;
-  expect(colBoundingBox).not.toBeNull();
-  await page.mouse.move(colBoundingBox.x + colBoundingBox.width / 2, colBoundingBox.y + colBoundingBox.height / 2);
-  await page.mouse.down();
-  await page.mouse.move(colBoundingBox.x + colBoundingBox.width / 2 - 200, colBoundingBox.y + colBoundingBox.height / 2);
-  await page.mouse.up();
-
-  expect(await page.locator('#editor1 .table-up-align').isVisible()).toBeTruthy();
-
-  const table = page.locator('#editor1 .ql-editor .ql-table');
-  await page.locator('#editor1 .table-up-align .table-up-align__item[data-align="center"]').click();
-  await expect(table).toHaveCSS('margin-left', `100px`);
-  await expect(table).toHaveCSS('margin-right', `100px`);
-
-  await page.locator('#editor1 .table-up-align .table-up-align__item[data-align="right"]').click();
-  await expect(table).toHaveCSS('margin-left', `200px`);
-  await expect(table).toHaveCSS('margin-right', '0px');
-
-  await page.locator('#editor1 .table-up-align .table-up-align__item[data-align="left"]').click();
-  await expect(table).toHaveCSS('margin-left', '0px');
-  await expect(table).toHaveCSS('margin-right', '200px');
-});
-
-extendTest('test TableAlign should update after resize', async ({ page }) => {
-  await createTableBySelect(page, 'container1', 3, 3);
-  const centerCell = page.locator('#editor1').getByRole('cell').nth(4);
-  await centerCell.click();
-  const cellBounding = (await centerCell.boundingBox())!;
-  expect(cellBounding).not.toBeNull();
-  const alignToolbar = page.locator('#editor1 .table-up-align');
-  expect(await alignToolbar.isVisible()).toBeTruthy();
-  const alignToolbarBoundingBox = (await alignToolbar.boundingBox())!;
-  expect(alignToolbarBoundingBox).not.toBeNull();
-
-  await page.mouse.move(cellBounding.x + cellBounding.width / 2, cellBounding.y + cellBounding.height / 2);
-  const rowBoundingBox = (await page.locator('#editor1 .table-up-resize-line__row').boundingBox())!;
-  expect(rowBoundingBox).not.toBeNull();
-
-  await page.mouse.move(rowBoundingBox.x + rowBoundingBox.width / 2, rowBoundingBox.y + rowBoundingBox.height / 2);
-  await page.mouse.down();
-  await page.mouse.move(rowBoundingBox.x + rowBoundingBox.width / 2, rowBoundingBox.y + rowBoundingBox.height / 2 + 200);
-  await page.mouse.up();
-
-  expect(await alignToolbar.isVisible()).toBeTruthy();
-  const newAlignToolbarBoundingBox = (await alignToolbar.boundingBox())!;
-  expect(newAlignToolbarBoundingBox).not.toBeNull();
-  // resize used Math.round, numDigits is 1 but not 0.1
-  expect(newAlignToolbarBoundingBox.y - alignToolbarBoundingBox.y).toBeCloseTo(200, -1);
-});
-
-extendTest('test TableAlign should update when text change', async ({ page, editorPage }) => {
-  editorPage.index = 0;
-  await editorPage.setContents([
-    { insert: '\n' },
-    { insert: '\n' },
-    { insert: '\n' },
-    { insert: '\n' },
-    { insert: '\n' },
-    { insert: { 'table-up-col': { tableId: '2y50yzsqukx', colId: '7jwlegz1wcx', full: false, width: 50 } } },
-    { insert: { 'table-up-col': { tableId: '2y50yzsqukx', colId: 'jzkt5xg4uoe', full: false, width: 50 } } },
-    { insert: { 'table-up-col': { tableId: '2y50yzsqukx', colId: 'ya1np2wbu5f', full: false, width: 50 } } },
-    { attributes: { 'table-up-cell-inner': { tableId: '2y50yzsqukx', rowId: 'q5927gxiii', colId: '7jwlegz1wcx', rowspan: 1, colspan: 1 } }, insert: '\n' },
-    { attributes: { 'table-up-cell-inner': { tableId: '2y50yzsqukx', rowId: 'q5927gxiii', colId: 'jzkt5xg4uoe', rowspan: 1, colspan: 1 } }, insert: '\n' },
-    { attributes: { 'table-up-cell-inner': { tableId: '2y50yzsqukx', rowId: 'q5927gxiii', colId: 'ya1np2wbu5f', rowspan: 1, colspan: 1 } }, insert: '\n' },
-    { attributes: { 'table-up-cell-inner': { tableId: '2y50yzsqukx', rowId: '269nnst8unz', colId: '7jwlegz1wcx', rowspan: 1, colspan: 1 } }, insert: '\n' },
-    { attributes: { 'table-up-cell-inner': { tableId: '2y50yzsqukx', rowId: '269nnst8unz', colId: 'jzkt5xg4uoe', rowspan: 1, colspan: 1 } }, insert: '\n' },
-    { attributes: { 'table-up-cell-inner': { tableId: '2y50yzsqukx', rowId: '269nnst8unz', colId: 'ya1np2wbu5f', rowspan: 1, colspan: 1 } }, insert: '\n' },
-    { attributes: { 'table-up-cell-inner': { tableId: '2y50yzsqukx', rowId: 'xpwngzum4e', colId: '7jwlegz1wcx', rowspan: 1, colspan: 1 } }, insert: '\n' },
-    { attributes: { 'table-up-cell-inner': { tableId: '2y50yzsqukx', rowId: 'xpwngzum4e', colId: 'jzkt5xg4uoe', rowspan: 1, colspan: 1 } }, insert: '\n' },
-    { attributes: { 'table-up-cell-inner': { tableId: '2y50yzsqukx', rowId: 'xpwngzum4e', colId: 'ya1np2wbu5f', rowspan: 1, colspan: 1 } }, insert: '\n' },
-    { insert: '\n' },
-  ]);
-
-  const lineBound = (await page.locator('#editor1 .ql-editor > p').first().boundingBox())!;
-  expect(lineBound).not.toBeNull();
-  await page.locator('#editor1 .ql-table .ql-table-cell').nth(0).click();
-  const alignToolbar = page.locator('#container1 .table-up-align');
-  await expect(alignToolbar).toBeVisible();
-  const toolbarBound = (await alignToolbar.boundingBox())!;
-  expect(toolbarBound).not.toBeNull();
-
-  await editorPage.updateContents([{ insert: '12345\n12345' }], 'user');
-
-  await expect(alignToolbar).toBeVisible();
-  const newToolbarBound = (await alignToolbar.boundingBox())!;
-  expect(toolbarBound).not.toBeNull();
-
-  expect(newToolbarBound.y - toolbarBound.y).toBeCloseTo(lineBound.height, 5);
-});
+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 TableAlign should functional', async ({ page }) => {
+  await createTableBySelect(page, 'container1', 3, 3);
+  const centerCell = page.locator('#editor1').getByRole('cell').nth(4);
+  await centerCell.click();
+  const cellBounding = (await centerCell.boundingBox())!;
+  expect(cellBounding).not.toBeNull();
+  await page.mouse.move(cellBounding.x, cellBounding.y);
+  const colBoundingBox = (await page.locator('#editor1 .table-up-resize-line__col').boundingBox())!;
+  expect(colBoundingBox).not.toBeNull();
+  await page.mouse.move(colBoundingBox.x + colBoundingBox.width / 2, colBoundingBox.y + colBoundingBox.height / 2);
+  await page.mouse.down();
+  await page.mouse.move(colBoundingBox.x + colBoundingBox.width / 2 - 200, colBoundingBox.y + colBoundingBox.height / 2);
+  await page.mouse.up();
+
+  expect(await page.locator('#editor1 .table-up-align').isVisible()).toBeTruthy();
+
+  const table = page.locator('#editor1 .ql-editor .ql-table');
+  await page.locator('#editor1 .table-up-align .table-up-align__item[data-align="center"]').click();
+  await expect(table).toHaveCSS('margin-left', `100px`);
+  await expect(table).toHaveCSS('margin-right', `100px`);
+
+  await page.locator('#editor1 .table-up-align .table-up-align__item[data-align="right"]').click();
+  await expect(table).toHaveCSS('margin-left', `200px`);
+  await expect(table).toHaveCSS('margin-right', '0px');
+
+  await page.locator('#editor1 .table-up-align .table-up-align__item[data-align="left"]').click();
+  await expect(table).toHaveCSS('margin-left', '0px');
+  await expect(table).toHaveCSS('margin-right', '200px');
+});
+
+extendTest('test TableAlign should update after resize', async ({ page }) => {
+  await createTableBySelect(page, 'container1', 3, 3);
+  const centerCell = page.locator('#editor1').getByRole('cell').nth(4);
+  await centerCell.click();
+  const cellBounding = (await centerCell.boundingBox())!;
+  expect(cellBounding).not.toBeNull();
+  const alignToolbar = page.locator('#editor1 .table-up-align');
+  expect(await alignToolbar.isVisible()).toBeTruthy();
+  const alignToolbarBoundingBox = (await alignToolbar.boundingBox())!;
+  expect(alignToolbarBoundingBox).not.toBeNull();
+
+  await page.mouse.move(cellBounding.x + cellBounding.width / 2, cellBounding.y + cellBounding.height / 2);
+  const rowBoundingBox = (await page.locator('#editor1 .table-up-resize-line__row').boundingBox())!;
+  expect(rowBoundingBox).not.toBeNull();
+
+  await page.mouse.move(rowBoundingBox.x + rowBoundingBox.width / 2, rowBoundingBox.y + rowBoundingBox.height / 2);
+  await page.mouse.down();
+  await page.mouse.move(rowBoundingBox.x + rowBoundingBox.width / 2, rowBoundingBox.y + rowBoundingBox.height / 2 + 200);
+  await page.mouse.up();
+
+  expect(await alignToolbar.isVisible()).toBeTruthy();
+  const newAlignToolbarBoundingBox = (await alignToolbar.boundingBox())!;
+  expect(newAlignToolbarBoundingBox).not.toBeNull();
+  // resize used Math.round, numDigits is 1 but not 0.1
+  expect(newAlignToolbarBoundingBox.y - alignToolbarBoundingBox.y).toBeCloseTo(200, -1);
+});
+
+extendTest('test TableAlign should update when text change', async ({ page, editorPage }) => {
+  editorPage.index = 0;
+  await editorPage.setContents([
+    { insert: '\n' },
+    { insert: '\n' },
+    { insert: '\n' },
+    { insert: '\n' },
+    { insert: '\n' },
+    { insert: { 'table-up-col': { tableId: '2y50yzsqukx', colId: '7jwlegz1wcx', full: false, width: 50 } } },
+    { insert: { 'table-up-col': { tableId: '2y50yzsqukx', colId: 'jzkt5xg4uoe', full: false, width: 50 } } },
+    { insert: { 'table-up-col': { tableId: '2y50yzsqukx', colId: 'ya1np2wbu5f', full: false, width: 50 } } },
+    { attributes: { 'table-up-cell-inner': { tableId: '2y50yzsqukx', rowId: 'q5927gxiii', colId: '7jwlegz1wcx', rowspan: 1, colspan: 1 } }, insert: '\n' },
+    { attributes: { 'table-up-cell-inner': { tableId: '2y50yzsqukx', rowId: 'q5927gxiii', colId: 'jzkt5xg4uoe', rowspan: 1, colspan: 1 } }, insert: '\n' },
+    { attributes: { 'table-up-cell-inner': { tableId: '2y50yzsqukx', rowId: 'q5927gxiii', colId: 'ya1np2wbu5f', rowspan: 1, colspan: 1 } }, insert: '\n' },
+    { attributes: { 'table-up-cell-inner': { tableId: '2y50yzsqukx', rowId: '269nnst8unz', colId: '7jwlegz1wcx', rowspan: 1, colspan: 1 } }, insert: '\n' },
+    { attributes: { 'table-up-cell-inner': { tableId: '2y50yzsqukx', rowId: '269nnst8unz', colId: 'jzkt5xg4uoe', rowspan: 1, colspan: 1 } }, insert: '\n' },
+    { attributes: { 'table-up-cell-inner': { tableId: '2y50yzsqukx', rowId: '269nnst8unz', colId: 'ya1np2wbu5f', rowspan: 1, colspan: 1 } }, insert: '\n' },
+    { attributes: { 'table-up-cell-inner': { tableId: '2y50yzsqukx', rowId: 'xpwngzum4e', colId: '7jwlegz1wcx', rowspan: 1, colspan: 1 } }, insert: '\n' },
+    { attributes: { 'table-up-cell-inner': { tableId: '2y50yzsqukx', rowId: 'xpwngzum4e', colId: 'jzkt5xg4uoe', rowspan: 1, colspan: 1 } }, insert: '\n' },
+    { attributes: { 'table-up-cell-inner': { tableId: '2y50yzsqukx', rowId: 'xpwngzum4e', colId: 'ya1np2wbu5f', rowspan: 1, colspan: 1 } }, insert: '\n' },
+    { insert: '\n' },
+  ]);
+
+  const lineBound = (await page.locator('#editor1 .ql-editor > p').first().boundingBox())!;
+  expect(lineBound).not.toBeNull();
+  await page.locator('#editor1 .ql-table .ql-table-cell').nth(0).click();
+  const alignToolbar = page.locator('#container1 .table-up-align');
+  await expect(alignToolbar).toBeVisible();
+  const toolbarBound = (await alignToolbar.boundingBox())!;
+  expect(toolbarBound).not.toBeNull();
+
+  await editorPage.updateContents([{ insert: '12345\n12345' }], 'user');
+
+  await expect(alignToolbar).toBeVisible();
+  const newToolbarBound = (await alignToolbar.boundingBox())!;
+  expect(toolbarBound).not.toBeNull();
+
+  expect(newToolbarBound.y - toolbarBound.y).toBeCloseTo(lineBound.height, 5);
+});