quill-table-up 3.0.2 → 3.1.0

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

@@ -88,7 +88,6 @@ extendTest('test TableMenuSelect should update when text change', async ({ page,
   await expect(menuWrapper).toBeVisible();
   const newMenuWrapper = (await menuWrapper.boundingBox())!;
   expect(newMenuWrapper).not.toBeNull();
-  console.log(newMenuWrapper.y, menuBound.y, lineBound.height);
   expect(newMenuWrapper.y - menuBound.y).toBeCloseTo(lineBound.height, 0);
 });
 
@@ -171,26 +170,3 @@ extendTest('table width switch should work', async ({ page }) => {
   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);
 });
-
-extendTest('TableSelection should have same boundbox with merge cell', async ({ page, editorPage }) => {
-  editorPage.index = 0;
-  await createTableBySelect(page, 'container1', 5, 5);
-  const cellBoundbox = (await page.locator('#editor1 .ql-editor .ql-table td').nth(0).boundingBox())!;
-  expect(cellBoundbox).not.toBeNull();
-  await page.locator('#editor1 .ql-editor .ql-table td').nth(0).click();
-
-  await page.mouse.move(cellBoundbox.x + cellBoundbox.width * 1.5, cellBoundbox.y + cellBoundbox.height * 1.5);
-  await page.mouse.down();
-  await page.mouse.move(cellBoundbox.x + cellBoundbox.width * 3.5, cellBoundbox.y + cellBoundbox.height * 3.5);
-  await page.mouse.up();
-
-  await page.locator('#editor1 .ql-editor .ql-table td').nth(6).click({ button: 'right' });
-  await page.locator('.table-up-menu.is-contextmenu .table-up-menu__item').filter({ hasText: 'Merge Cell' }).first().click();
-
-  const selectionBoundbox = (await page.locator('#container1 .table-up-toolbox .table-up-selection .table-up-selection__line').boundingBox())!;
-  expect(selectionBoundbox).not.toBeNull();
-  const mergeCellBoundbox = (await page.locator('#editor1 .ql-editor .ql-table td').nth(6).boundingBox())!;
-  expect(mergeCellBoundbox).not.toBeNull();
-
-  expect(selectionBoundbox).toEqual(mergeCellBoundbox);
-});

package/src/__tests__/e2e/utils.ts

@@ -1,12 +1,48 @@
-import type { Page } from '@playwright/test';
+import type { Page, PlaywrightWorkerOptions } from '@playwright/test';
 import { test } from '@playwright/test';
 import { EditorPage } from './editor-page';
 
+declare global {
+  interface Window {
+    pasteEventTriggered: boolean;
+  }
+}
+
 export async function createTableBySelect(page: Page, container: string, row: number, col: number) {
   await page.locator(`#${container} .ql-toolbar .ql-table-up.ql-picker`).click();
   await page.locator(`#${container} .ql-toolbar .ql-custom-select .table-up-select-box__item[data-row="${row}"][data-col="${col}"]`).click();
 }
 
+export async function pasteHTML(page: Page, html: string, { browserName = 'chromium' }: { browserName: PlaywrightWorkerOptions['browserName'] }) {
+  await page.evaluate(() => {
+    window.pasteEventTriggered = false;
+    document.addEventListener('paste', () => {
+      window.pasteEventTriggered = true;
+    });
+  });
+
+  await page.evaluate(async ({ html, browserName }) => {
+    if (browserName === 'firefox') {
+      const clipboardItem = new ClipboardItem({ 'text/html': new Blob([html], { type: 'text/html' }) });
+      await navigator.clipboard.write([clipboardItem]);
+    }
+    else {
+      const clipboardData = new DataTransfer();
+      clipboardData.setData('text/html', html);
+      const pasteEvent = new ClipboardEvent('paste', {
+        bubbles: true,
+        cancelable: true,
+        clipboardData,
+      });
+      document.dispatchEvent(pasteEvent);
+    }
+  }, { html, browserName });
+  if (browserName === 'firefox') {
+    await page.keyboard.press('Control+v');
+  }
+  await page.waitForFunction(() => window.pasteEventTriggered);
+}
+
 export const extendTest = test.extend<{
   editorPage: EditorPage;
 }>({

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

@@ -1,8 +1,10 @@
+import type { ToolOption } from '../../utils';
 import Quill from 'quill';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-import { TableCellFormat } from '../../formats';
+import { TableCellFormat, TableCellInnerFormat } from '../../formats';
+import { tableMenuTools } from '../../modules';
 import { TableUp } from '../../table-up';
-import { createQuillWithTableModule, createTableBodyHTML, createTableCaptionHTML, createTableDeltaOps, createTaleColHTML, expectDelta } from './utils';
+import { createQuillWithTableModule, createTable, createTableBodyHTML, createTableCaptionHTML, createTableDeltaOps, createTaleColHTML, datasetWrapTag, expectDelta, replaceAttrEmptyRow } from './utils';
 
 const Delta = Quill.import('delta');
 
@@ -379,3 +381,340 @@ describe('test table around line', () => {
     );
   });
 });
+
+describe('test table body convert', () => {
+  it('table convert body should work correctly', async () => {
+    const quill = await createTable(3, 3, { full: false }, {}, { isEmpty: false });
+    const table = quill.root.querySelector('table')!;
+    const tableModule = quill.getModule(TableUp.moduleName) as TableUp;
+    const tds = quill.scroll.descendants(TableCellInnerFormat, 0);
+    (tableMenuTools.ConvertTothead as ToolOption).handle.call({ quill, table } as any, tableModule, tds.slice(0, 1), null);
+    await vi.runAllTimersAsync();
+
+    expectDelta(
+      quill.getContents(),
+      new Delta([
+        { 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, tag: 'td', wrapTag: 'thead' } }, insert: '\n' },
+        { insert: '2' },
+        { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '2', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'thead' } }, insert: '\n' },
+        { insert: '3' },
+        { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '3', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'thead' } }, insert: '\n' },
+        { insert: '4' },
+        { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '1', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
+        { insert: '5' },
+        { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '2', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
+        { insert: '6' },
+        { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '3', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
+        { insert: '7' },
+        { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '3', colId: '1', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
+        { insert: '8' },
+        { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '3', colId: '2', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
+        { insert: '9' },
+        { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '3', colId: '3', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
+        { insert: '\n' },
+      ]),
+    );
+  });
+
+  it('table convert body with multi body', async () => {
+    const quill = createQuillWithTableModule(`<p><br></p>`);
+    quill.setContents([
+      { insert: '\n' },
+      { insert: { 'table-up-col': { tableId: '1', colId: '1', width: 100 } } },
+      { insert: { 'table-up-col': { tableId: '1', colId: '2', width: 100 } } },
+      { insert: { 'table-up-col': { tableId: '1', colId: '3', width: 100 } } },
+      { insert: { 'table-up-col': { tableId: '1', colId: '4', width: 100 } } },
+      { insert: { 'table-up-col': { tableId: '1', colId: '5', width: 100 } } },
+      { insert: '1' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', wrapTag: 'thead', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
+      { insert: '2' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', wrapTag: 'thead', colId: '2', rowspan: 1, colspan: 1 } }, insert: '\n' },
+      { insert: '3' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', wrapTag: 'thead', colId: '3', rowspan: 1, colspan: 1 } }, insert: '\n' },
+      { insert: '4' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', wrapTag: 'thead', colId: '4', rowspan: 1, colspan: 1 } }, insert: '\n' },
+      { insert: '5' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', wrapTag: 'thead', colId: '5', rowspan: 1, colspan: 1 } }, insert: '\n' },
+      { insert: '6' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', wrapTag: 'thead', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
+      { insert: '7' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', wrapTag: 'thead', colId: '2', rowspan: 1, colspan: 1 } }, insert: '\n' },
+      { insert: '8' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', wrapTag: 'thead', colId: '3', rowspan: 1, colspan: 1 } }, insert: '\n' },
+      { insert: '9' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', wrapTag: 'thead', colId: '4', rowspan: 1, colspan: 1 } }, insert: '\n' },
+      { insert: '10' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', wrapTag: 'thead', colId: '5', rowspan: 1, colspan: 1 } }, insert: '\n' },
+      { insert: '11' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '3', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
+      { insert: '12' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '3', colId: '2', rowspan: 1, colspan: 1 } }, insert: '\n' },
+      { insert: '13' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '3', colId: '3', rowspan: 1, colspan: 1 } }, insert: '\n' },
+      { insert: '14' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '3', colId: '4', rowspan: 1, colspan: 1 } }, insert: '\n' },
+      { insert: '15' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '3', colId: '5', rowspan: 1, colspan: 1 } }, insert: '\n' },
+      { insert: '16' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '4', wrapTag: 'tfoot', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
+      { insert: '17' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '4', wrapTag: 'tfoot', colId: '2', rowspan: 1, colspan: 1 } }, insert: '\n' },
+      { insert: '18' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '4', wrapTag: 'tfoot', colId: '3', rowspan: 1, colspan: 1 } }, insert: '\n' },
+      { insert: '19' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '4', wrapTag: 'tfoot', colId: '4', rowspan: 1, colspan: 1 } }, insert: '\n' },
+      { insert: '20' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '4', wrapTag: 'tfoot', colId: '5', rowspan: 1, colspan: 1 } }, insert: '\n' },
+      { insert: '21' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '5', wrapTag: 'tfoot', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
+      { insert: '22' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '5', wrapTag: 'tfoot', colId: '2', rowspan: 1, colspan: 1 } }, insert: '\n' },
+      { insert: '23' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '5', wrapTag: 'tfoot', colId: '3', rowspan: 1, colspan: 1 } }, insert: '\n' },
+      { insert: '24' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '5', wrapTag: 'tfoot', colId: '4', rowspan: 1, colspan: 1 } }, insert: '\n' },
+      { insert: '25' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '5', wrapTag: 'tfoot', colId: '5', rowspan: 1, colspan: 1 } }, insert: '\n' },
+      { insert: '\n' },
+    ]);
+    await vi.runAllTimersAsync();
+
+    const table = quill.root.querySelector('table')!;
+    const tableModule = quill.getModule(TableUp.moduleName) as TableUp;
+    const tds = quill.scroll.descendants(TableCellInnerFormat, 0);
+    (tableMenuTools.ConvertTothead as ToolOption).handle.call({ quill, table } as any, tableModule, tds.slice(5, 20), null);
+    await vi.runAllTimersAsync();
+
+    expectDelta(
+      quill.getContents(),
+      new Delta([
+        { 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 } } },
+        { insert: { 'table-up-col': { tableId: '1', colId: '5', full: false, width: 100 } } },
+        { insert: '1' },
+        { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', tag: 'td', wrapTag: 'thead', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
+        { insert: '2' },
+        { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', tag: 'td', wrapTag: 'thead', colId: '2', rowspan: 1, colspan: 1 } }, insert: '\n' },
+        { insert: '3' },
+        { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', tag: 'td', wrapTag: 'thead', colId: '3', rowspan: 1, colspan: 1 } }, insert: '\n' },
+        { insert: '4' },
+        { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', tag: 'td', wrapTag: 'thead', colId: '4', rowspan: 1, colspan: 1 } }, insert: '\n' },
+        { insert: '5' },
+        { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', tag: 'td', wrapTag: 'thead', colId: '5', rowspan: 1, colspan: 1 } }, insert: '\n' },
+        { insert: '6' },
+        { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', tag: 'td', wrapTag: 'thead', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
+        { insert: '7' },
+        { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', tag: 'td', wrapTag: 'thead', colId: '2', rowspan: 1, colspan: 1 } }, insert: '\n' },
+        { insert: '8' },
+        { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', tag: 'td', wrapTag: 'thead', colId: '3', rowspan: 1, colspan: 1 } }, insert: '\n' },
+        { insert: '9' },
+        { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', tag: 'td', wrapTag: 'thead', colId: '4', rowspan: 1, colspan: 1 } }, insert: '\n' },
+        { insert: '10' },
+        { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', tag: 'td', wrapTag: 'thead', colId: '5', rowspan: 1, colspan: 1 } }, insert: '\n' },
+        { insert: '11' },
+        { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '3', tag: 'td', wrapTag: 'thead', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
+        { insert: '12' },
+        { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '3', tag: 'td', wrapTag: 'thead', colId: '2', rowspan: 1, colspan: 1 } }, insert: '\n' },
+        { insert: '13' },
+        { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '3', tag: 'td', wrapTag: 'thead', colId: '3', rowspan: 1, colspan: 1 } }, insert: '\n' },
+        { insert: '14' },
+        { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '3', tag: 'td', wrapTag: 'thead', colId: '4', rowspan: 1, colspan: 1 } }, insert: '\n' },
+        { insert: '15' },
+        { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '3', tag: 'td', wrapTag: 'thead', colId: '5', rowspan: 1, colspan: 1 } }, insert: '\n' },
+        { insert: '16' },
+        { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '4', tag: 'td', wrapTag: 'thead', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
+        { insert: '17' },
+        { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '4', tag: 'td', wrapTag: 'thead', colId: '2', rowspan: 1, colspan: 1 } }, insert: '\n' },
+        { insert: '18' },
+        { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '4', tag: 'td', wrapTag: 'thead', colId: '3', rowspan: 1, colspan: 1 } }, insert: '\n' },
+        { insert: '19' },
+        { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '4', tag: 'td', wrapTag: 'thead', colId: '4', rowspan: 1, colspan: 1 } }, insert: '\n' },
+        { insert: '20' },
+        { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '4', tag: 'td', wrapTag: 'thead', colId: '5', rowspan: 1, colspan: 1 } }, insert: '\n' },
+        { insert: '21' },
+        { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '5', tag: 'td', wrapTag: 'tfoot', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
+        { insert: '22' },
+        { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '5', tag: 'td', wrapTag: 'tfoot', colId: '2', rowspan: 1, colspan: 1 } }, insert: '\n' },
+        { insert: '23' },
+        { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '5', tag: 'td', wrapTag: 'tfoot', colId: '3', rowspan: 1, colspan: 1 } }, insert: '\n' },
+        { insert: '24' },
+        { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '5', tag: 'td', wrapTag: 'tfoot', colId: '4', rowspan: 1, colspan: 1 } }, insert: '\n' },
+        { insert: '25' },
+        { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '5', tag: 'td', wrapTag: 'tfoot', colId: '5', rowspan: 1, colspan: 1 } }, insert: '\n' },
+        { insert: '\n' },
+      ]),
+    );
+  });
+
+  it('table convert body with emptyRow', async () => {
+    const quill = createQuillWithTableModule(`<p><br></p>`, { autoMergeCell: false });
+    quill.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 } } },
+      { insert: { 'table-up-col': { tableId: '1', colId: '5', full: false, width: 100 } } },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 5, colspan: 5, emptyRow: ['2', '3', '4', '5'] } }, insert: '\n' },
+      { insert: '\n' },
+    ]);
+    await vi.runAllTimersAsync();
+
+    const table = quill.root.querySelector('table')!;
+    const tableModule = quill.getModule(TableUp.moduleName) as TableUp;
+    const tds = quill.scroll.descendants(TableCellInnerFormat, 0);
+    (tableMenuTools.ConvertTothead as ToolOption).handle.call({ quill, table } as any, tableModule, tds.slice(0, 1), null);
+    await vi.runAllTimersAsync();
+
+    expectDelta(
+      quill.getContents(),
+      new Delta([
+        { 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 } } },
+        { insert: { 'table-up-col': { tableId: '1', colId: '5', full: false, width: 100 } } },
+        { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 5, colspan: 5, tag: 'td', wrapTag: 'thead', emptyRow: ['2', '3', '4', '5'] } }, insert: '\n' },
+        { insert: '\n' },
+      ]),
+    );
+  });
+
+  it('table convert body with next emptyRow', async () => {
+    const quill = createQuillWithTableModule(`<p><br></p>`, { autoMergeCell: false });
+    quill.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 } } },
+      { insert: { 'table-up-col': { tableId: '1', colId: '5', 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: '1', colId: '4', rowspan: 1, colspan: 1 } }, insert: '\n' },
+      { insert: '5' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '5', rowspan: 1, colspan: 1 } }, insert: '\n' },
+      { insert: 'merge' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '1', rowspan: 3, colspan: 5, emptyRow: ['3', '4'] } }, insert: '\n' },
+      { insert: '6' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '5', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
+      { insert: '7' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '5', colId: '2', rowspan: 1, colspan: 1 } }, insert: '\n' },
+      { insert: '8' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '5', colId: '3', rowspan: 1, colspan: 1 } }, insert: '\n' },
+      { insert: '9' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '5', colId: '4', rowspan: 1, colspan: 1 } }, insert: '\n' },
+      { insert: '10' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '5', colId: '5', rowspan: 1, colspan: 1 } }, insert: '\n' },
+      { insert: '\n' },
+    ]);
+    await vi.runAllTimersAsync();
+
+    const table = quill.root.querySelector('table')!;
+    const tableModule = quill.getModule(TableUp.moduleName) as TableUp;
+    const tds = quill.scroll.descendants(TableCellInnerFormat, 0);
+    (tableMenuTools.ConvertTothead as ToolOption).handle.call({ quill, table } as any, tableModule, tds.slice(0, 6), null);
+    await vi.runAllTimersAsync();
+
+    expect(quill.root).toEqualHTML(
+      `
+        <p><br></p>
+        <div>
+          <table cellpadding="0" cellspacing="0" style="margin-right: auto; width: 500px;">
+            ${createTaleColHTML(5, { full: false, width: 100 })}
+            <thead>
+              <tr ${datasetWrapTag('thead')}>
+                ${
+                  new Array(5).fill(0).map((_, i) => `<td rowspan="1" colspan="1" ${datasetWrapTag('thead')}>
+                    <div ${datasetWrapTag('thead')}>
+                      <p>
+                        ${i + 1}
+                      </p>
+                    </div>
+                  </td>`).join('\n')
+                }
+              </tr>
+              <tr ${datasetWrapTag('thead')}>
+                <td rowspan="3" colspan="5" ${datasetWrapTag('thead')} data-empty-row="length:2">
+                  <div ${datasetWrapTag('thead')} data-empty-row="length:2">
+                    <p>merge</p>
+                  </div>
+                </td>
+              </tr>
+              <tr ${datasetWrapTag('thead')}></tr>
+              <tr ${datasetWrapTag('thead')}></tr>
+            </thead>
+            <tbody>
+              <tr ${datasetWrapTag('tbody')}>
+                ${
+                  new Array(5).fill(0).map((_, i) => `<td rowspan="1" colspan="1" ${datasetWrapTag('tbody')}>
+                    <div ${datasetWrapTag('tbody')}>
+                      <p>
+                        ${5 + i + 1}
+                      </p>
+                    </div>
+                  </td>`).join('\n')
+                }
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <p><br></p>
+      `,
+      {
+        ignoreAttrs: ['data-tag', 'class', 'data-table-id', 'data-row-id', 'data-col-id', 'data-rowspan', 'data-colspan', 'contenteditable'],
+        replaceAttrs: {
+          'data-empty-row': replaceAttrEmptyRow,
+        },
+      },
+    );
+    expectDelta(
+      quill.getContents(),
+      new Delta([
+        { 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 } } },
+        { insert: { 'table-up-col': { tableId: '1', colId: '5', full: false, width: 100 } } },
+        { insert: '1' },
+        { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'thead' } }, insert: '\n' },
+        { insert: '2' },
+        { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '2', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'thead' } }, insert: '\n' },
+        { insert: '3' },
+        { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '3', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'thead' } }, insert: '\n' },
+        { insert: '4' },
+        { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '4', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'thead' } }, insert: '\n' },
+        { insert: '5' },
+        { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '5', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'thead' } }, insert: '\n' },
+        { insert: 'merge' },
+        { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '1', rowspan: 3, colspan: 5, tag: 'td', wrapTag: 'thead', emptyRow: ['3', '4'] } }, insert: '\n' },
+        { insert: '6' },
+        { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '5', colId: '1', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
+        { insert: '7' },
+        { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '5', colId: '2', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
+        { insert: '8' },
+        { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '5', colId: '3', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
+        { insert: '9' },
+        { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '5', colId: '4', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
+        { insert: '10' },
+        { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '5', colId: '5', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
+        { insert: '\n' },
+      ]),
+    );
+  });
+});

package/src/__tests__/unit/table-cell-merge.test.ts

@@ -1,6 +1,6 @@
 import Quill from 'quill';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-import { TableCellInnerFormat } from '../../formats';
+import { TableCellInnerFormat, TableMainFormat } from '../../formats';
 import { TableUp } from '../../table-up';
 import { createQuillWithTableModule, createTable, createTableDeltaOps, createTaleColHTML, expectDelta } from './utils';
 
@@ -700,4 +700,25 @@ describe('disable auto merge', () => {
       ]),
     );
   });
+
+  it('`emptyRow` should have same order with tr', async () => {
+    const quill = createQuillWithTableModule(`<p><br></p>`, { autoMergeCell: false });
+    quill.setContents(createTableDeltaOps(5, 3, { full: false }, {}, { isEmpty: false }));
+    const tableModule = quill.getModule(TableUp.moduleName) as TableUp;
+    const tds = quill.scroll.descendants(TableCellInnerFormat, 0);
+    tableModule.mergeCells([tds[3], tds[4], tds[5], tds[6], tds[7], tds[8], tds[9], tds[10], tds[11]]);
+    await vi.runAllTimersAsync();
+
+    const tableBlot = quill.scroll.descendants(TableMainFormat, 0)[0];
+    const emptyRowIds = tds[3].emptyRow;
+    const rowIds = tableBlot.getRowIds();
+    const startRowIndex = rowIds.indexOf(tds[3].rowId);
+
+    expect(emptyRowIds.length).toEqual(2);
+    expect(tds[3].rowspan).toEqual(3);
+    expect(startRowIndex).toEqual(1);
+    for (let i = startRowIndex + 1; i < startRowIndex + emptyRowIds.length; i++) {
+      expect(rowIds[i]).toEqual(emptyRowIds[i - startRowIndex - 1]);
+    }
+  });
 });