quill-table-up 3.1.2 → 3.2.1

package/src/__tests__/unit/utils.test.ts

@@ -1,711 +1,711 @@
-import Quill from 'quill';
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-import { TableBodyFormat, TableCellFormat, TableCellInnerFormat, TableColFormat, TableMainFormat, TableRowFormat, TableWrapperFormat } from '../../formats';
-import { TableUp, updateTableConstants } from '../../table-up';
-import { blotName, findParentBlot, findParentBlots } from '../../utils';
-import { createTable, createTableHTML, createTaleColHTML, datasetFull, getColWidthStyle, normalizeHTML } from './utils';
-
-beforeEach(() => {
-  vi.useFakeTimers();
-});
-afterEach(() => {
-  vi.useRealTimers();
-});
-
-function createOverridesTable(html: string, options = true, moduleOptions = {}, register = {}) {
-  updateTableConstants({
-    blotName: {
-      tableCol: 'a-col',
-      tableCell: 'a-cell',
-      tableCellInner: 'a-cell-inner',
-    },
-  });
-
-  // rename `colId` to `column`
-  class TableColFormatOverride extends TableColFormat {
-    static create(value: any) {
-      const { colId, column } = value;
-      const node = super.create(value);
-      node.dataset.colId = column || colId;
-      node.setAttribute('contenteditable', 'false');
-      return node;
-    }
-
-    static value(domNode: HTMLElement) {
-      const value = super.value(domNode);
-      value.column = value.colId;
-      delete value.colId;
-      return value;
-    }
-  }
-  // rename `rowId` to `row`, `colId` to `cell`
-  class TableCellFormatOverride extends TableCellFormat {
-    static allowDataAttrs = new Set(['table-id', 'row', 'cell']);
-    static create(value: any) {
-      const node = super.create(value);
-      let { rowId, colId, row, cell } = value;
-      row = row || rowId;
-      cell = cell || colId;
-      node.dataset.row = row;
-      node.dataset.cell = cell;
-      node.removeAttribute('data-row-id');
-      node.removeAttribute('data-col-id');
-      return node;
-    }
-
-    static formats(domNode: HTMLElement) {
-      const value = super.formats(domNode);
-      const { row, cell } = domNode.dataset;
-      value.row = row;
-      value.cell = cell;
-      delete value.rowId;
-      delete value.colId;
-      return value;
-    }
-
-    get rowId() {
-      return this.domNode.dataset.row!;
-    }
-
-    get colId() {
-      return this.domNode.dataset.cell!;
-    }
-  }
-  class TableCellInnerFormatOverride extends TableCellInnerFormat {
-    static allowDataAttrs = new Set(['table-id', 'row', 'cell', 'rowspan', 'colspan']);
-    static create(value: any) {
-      const node = super.create(value);
-      let { rowId, colId, row, cell } = value;
-      row = row || rowId;
-      cell = cell || colId;
-      node.dataset.row = row;
-      node.dataset.cell = cell;
-      node.removeAttribute('data-row-id');
-      node.removeAttribute('data-col-id');
-      return node;
-    }
-
-    static formats(domNode: HTMLElement) {
-      const value = super.formats(domNode);
-      const { row, cell } = domNode.dataset;
-      value.row = row;
-      value.cell = cell;
-      delete value.rowId;
-      delete value.colId;
-      return value;
-    }
-
-    get rowId() {
-      return this.domNode.dataset.row!;
-    }
-
-    set rowId(value) {
-      this.setFormatValue('row', value);
-    }
-
-    get colId() {
-      return this.domNode.dataset.cell!;
-    }
-
-    set colId(value) {
-      this.setFormatValue('cell', value);
-    }
-  }
-  class TableUpOverride extends TableUp {
-    static register(): void {
-      super.register();
-      Quill.register({
-        'formats/a-col': TableColFormatOverride,
-        'formats/a-cell': TableCellFormatOverride,
-        'formats/a-cell-inner': TableCellInnerFormatOverride,
-      }, true);
-    }
-  }
-  Quill.register({
-    'modules/tableUpOverride': TableUpOverride,
-    ...register,
-  }, true);
-  const container = document.body.appendChild(document.createElement('div'));
-  container.innerHTML = normalizeHTML(html);
-  const quill = new Quill(container, {
-    modules: {
-      tableUpOverride: options,
-      history: {
-        delay: 0,
-      },
-      ...moduleOptions,
-    },
-  });
-  return quill;
-}
-
-describe('test utils', () => {
-  it('test findParentBlot', async () => {
-    const quill = await createTable(1, 1);
-    const tds = quill.scroll.descendants(TableCellInnerFormat, 0);
-    const tableCellBlot = findParentBlot(tds[0], blotName.tableCell);
-    expect(tableCellBlot).toBeInstanceOf(TableCellFormat);
-    const tableRowBlot = findParentBlot(tds[0], blotName.tableRow);
-    expect(tableRowBlot).toBeInstanceOf(TableRowFormat);
-    const tableBodyBlot = findParentBlot(tds[0], blotName.tableBody);
-    expect(tableBodyBlot).toBeInstanceOf(TableBodyFormat);
-    const tableMainBlot = findParentBlot(tds[0], blotName.tableMain);
-    expect(tableMainBlot).toBeInstanceOf(TableMainFormat);
-    const tableWrapperBlot = findParentBlot(tds[0], blotName.tableWrapper);
-    expect(tableWrapperBlot).toBeInstanceOf(TableWrapperFormat);
-    expect(() => findParentBlot(tds[0], 'scroll')).toThrowError(`${blotName.tableCellInner} must be a child of scroll`);
-  });
-
-  it('test findParentBlots', async () => {
-    const quill = await createTable(1, 1);
-    const tds = quill.scroll.descendants(TableCellInnerFormat, 0);
-    const [tableCellBlot, tableRowBlot, tableBodyBlot, tableMainBlot, tableWrapperBlot] = findParentBlots(
-      tds[0],
-      [
-        blotName.tableCell,
-        blotName.tableRow,
-        blotName.tableBody,
-        blotName.tableMain,
-        blotName.tableWrapper,
-      ] as const,
-    );
-    expect(tableCellBlot).toBeInstanceOf(TableCellFormat);
-    expect(tableRowBlot).toBeInstanceOf(TableRowFormat);
-    expect(tableBodyBlot).toBeInstanceOf(TableBodyFormat);
-    expect(tableMainBlot).toBeInstanceOf(TableMainFormat);
-    expect(tableWrapperBlot).toBeInstanceOf(TableWrapperFormat);
-  });
-});
-
-// this test need be last. it's effect `blotName`
-describe('test override format', () => {
-  it('should change blotName', async () => {
-    updateTableConstants({
-      blotName: {
-        tableCol: 'a-col',
-        tableCellInner: 'a-cell-inner',
-      },
-    });
-    const quill = await createTable(2, 2);
-    expect(quill.getContents()).toMatchObject({
-      ops: [
-        {
-          insert: '\n',
-        },
-        {
-          insert: {
-            'a-col': {
-              tableId: '1',
-              colId: '1',
-              full: true,
-              width: 50,
-            },
-          },
-        },
-        {
-          insert: {
-            'a-col': {
-              tableId: '1',
-              colId: '2',
-              full: true,
-              width: 50,
-            },
-          },
-        },
-        {
-          insert: '1',
-        },
-        {
-          attributes: {
-            'a-cell-inner': {
-              tableId: '1',
-              colId: '1',
-              rowId: '1',
-              rowspan: 1,
-              colspan: 1,
-            },
-          },
-          insert: '\n',
-        },
-        {
-          insert: '2',
-        },
-        {
-          attributes: {
-            'a-cell-inner': {
-              tableId: '1',
-              colId: '2',
-              rowId: '1',
-              rowspan: 1,
-              colspan: 1,
-            },
-          },
-          insert: '\n',
-        },
-        {
-          insert: '3',
-        },
-        {
-          attributes: {
-            'a-cell-inner': {
-              tableId: '1',
-              colId: '1',
-              rowId: '2',
-              rowspan: 1,
-              colspan: 1,
-            },
-          },
-          insert: '\n',
-        },
-        {
-          insert: '4',
-        },
-        {
-          attributes: {
-            'a-cell-inner': {
-              tableId: '1',
-              colId: '2',
-              rowId: '2',
-              rowspan: 1,
-              colspan: 1,
-            },
-          },
-          insert: '\n',
-        },
-        {
-          insert: '\n',
-        },
-      ],
-    });
-    expect(quill.root).toEqualHTML(
-      `
-        <p><br></p>
-        ${createTableHTML(2, 2)}
-        <p><br></p>
-      `,
-      { ignoreAttrs: ['class', 'style', 'data-table-id', 'contenteditable'] },
-    );
-    const tableModule = quill.getModule(TableUp.moduleName) as TableUp;
-    const tds = quill.scroll.descendants(TableCellInnerFormat, 0);
-    tableModule.mergeCells([tds[0], tds[1], tds[2], tds[3]]);
-    await vi.runAllTimersAsync();
-    expect(quill.getContents()).toMatchObject({
-      ops: [
-        {
-          insert: '\n',
-        },
-        {
-          insert: {
-            'a-col': {
-              tableId: '1',
-              colId: '1',
-              full: true,
-              width: 100,
-            },
-          },
-        },
-        {
-          insert: '1',
-        },
-        {
-          attributes: {
-            'a-cell-inner': {
-              tableId: '1',
-              colId: '1',
-              rowId: '1',
-              rowspan: 1,
-              colspan: 1,
-            },
-          },
-          insert: '\n',
-        },
-        {
-          insert: '2',
-        },
-        {
-          attributes: {
-            'a-cell-inner': {
-              tableId: '1',
-              colId: '1',
-              rowId: '1',
-              rowspan: 1,
-              colspan: 1,
-            },
-          },
-          insert: '\n',
-        },
-        {
-          insert: '3',
-        },
-        {
-          attributes: {
-            'a-cell-inner': {
-              tableId: '1',
-              colId: '1',
-              rowId: '1',
-              rowspan: 1,
-              colspan: 1,
-            },
-          },
-          insert: '\n',
-        },
-        {
-          insert: '4',
-        },
-        {
-          attributes: {
-            'a-cell-inner': {
-              tableId: '1',
-              colId: '1',
-              rowId: '1',
-              rowspan: 1,
-              colspan: 1,
-            },
-          },
-          insert: '\n',
-        },
-        {
-          insert: '\n',
-        },
-      ],
-    });
-    expect(quill.root).toEqualHTML(
-      `
-        <p><br></p>
-        <div>
-          <table cellpadding="0" cellspacing="0" data-full="true">
-            ${createTaleColHTML(1)}
-            <tbody>
-              <tr data-row-id="1">
-                <td rowspan="1" colspan="1" data-row-id="1" data-col-id="1">
-                  <div data-rowspan="1" data-colspan="1" data-row-id="1" data-col-id="1">
-                    <p>1</p>
-                    <p>2</p>
-                    <p>3</p>
-                    <p>4</p>
-                  </div>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-        <p><br></p>
-      `,
-      { ignoreAttrs: ['data-wrap-tag', 'data-tag', 'class', 'style', 'data-table-id', 'contenteditable'] },
-    );
-  });
-
-  it('should change format name in delta', async () => {
-    const quill = createOverridesTable(`<p><br></p>`);
-    quill.setContents([
-      { insert: '\n' },
-      {
-        insert: {
-          'a-col': { tableId: '1', column: '1', full: true, width: 50 },
-        },
-      },
-      {
-        insert: {
-          'a-col': { tableId: '1', column: '2', full: true, width: 50 },
-        },
-      },
-      {
-        attributes: {
-          'a-cell-inner': { tableId: '1', row: '1', cell: '1', rowspan: 1, colspan: 1 },
-        },
-        insert: '\n',
-      },
-      {
-        attributes: {
-          'a-cell-inner': { tableId: '1', row: '1', cell: '2', rowspan: 1, colspan: 1 },
-        },
-        insert: '\n',
-      },
-      {
-        attributes: {
-          'a-cell-inner': { tableId: '1', row: '2', cell: '1', rowspan: 1, colspan: 1 },
-        },
-        insert: '\n',
-      },
-      {
-        attributes: {
-          'a-cell-inner': { tableId: '1', row: '2', cell: '2', rowspan: 1, colspan: 1 },
-        },
-        insert: '\n',
-      },
-      { insert: '\n' },
-    ]);
-    await vi.runAllTimersAsync();
-    expect(quill.getContents()).toMatchObject({
-      ops: [
-        {
-          insert: '\n',
-        },
-        {
-          insert: {
-            'a-col': {
-              tableId: '1',
-              column: '1',
-              full: true,
-              width: 50,
-            },
-          },
-        },
-        {
-          insert: {
-            'a-col': {
-              tableId: '1',
-              column: '2',
-              full: true,
-              width: 50,
-            },
-          },
-        },
-        {
-          attributes: {
-            'a-cell-inner': {
-              tableId: '1',
-              cell: '1',
-              row: '1',
-              rowspan: 1,
-              colspan: 1,
-            },
-          },
-          insert: '\n',
-        },
-        {
-          attributes: {
-            'a-cell-inner': {
-              tableId: '1',
-              cell: '2',
-              row: '1',
-              rowspan: 1,
-              colspan: 1,
-            },
-          },
-          insert: '\n',
-        },
-        {
-          attributes: {
-            'a-cell-inner': {
-              tableId: '1',
-              cell: '1',
-              row: '2',
-              rowspan: 1,
-              colspan: 1,
-            },
-          },
-          insert: '\n',
-        },
-        {
-          attributes: {
-            'a-cell-inner': {
-              tableId: '1',
-              cell: '2',
-              row: '2',
-              rowspan: 1,
-              colspan: 1,
-            },
-          },
-          insert: '\n',
-        },
-        {
-          insert: '\n',
-        },
-      ],
-    });
-    const colWidth = getColWidthStyle({ full: true, colNum: 2 });
-    expect(quill.root).toEqualHTML(
-      `
-        <p><br></p>
-        <div>
-          <table cellpadding="0" cellspacing="0"${datasetFull(true)}>
-            <colgroup${datasetFull(true)}>
-              ${new Array(2).fill(0).map((_, i) => `<col ${colWidth} data-col-id="${i + 1}"${datasetFull(true)} />`).join('\n')}
-            </colgroup>
-            <tbody>
-            ${
-              new Array(2).fill(0).map((_, i) => `
-                <tr data-row-id="${i + 1}">
-                  ${
-                    new Array(2).fill(0).map((_, j) => `<td rowspan="1" colspan="1" data-row="${i + 1}" data-cell="${j + 1}">
-                      <div data-rowspan="1" data-colspan="1" data-row="${i + 1}" data-cell="${j + 1}">
-                        <p>
-                          <br>
-                        </p>
-                      </div>
-                    </td>`).join('\n')
-                  }
-                </tr>
-              `).join('\n')
-            }
-          </tbody>
-          </table>
-        </div>
-        <p><br></p>
-      `,
-      { ignoreAttrs: ['data-wrap-tag', 'data-tag', 'class', 'style', 'data-table-id', 'contenteditable'] },
-    );
-  });
-
-  it('should change format name in delta with contents', async () => {
-    const quill = createOverridesTable(`<p><br></p>`);
-    quill.setContents([
-      { insert: '\n' },
-      {
-        insert: {
-          'a-col': { tableId: '1', column: '1', full: true, width: 50 },
-        },
-      },
-      {
-        insert: {
-          'a-col': { tableId: '1', column: '2', full: true, width: 50 },
-        },
-      },
-      { insert: '1' },
-      {
-        attributes: {
-          'a-cell-inner': { tableId: '1', row: '1', cell: '1', rowspan: 1, colspan: 1 },
-        },
-        insert: '\n',
-      },
-      { insert: '2' },
-      {
-        attributes: {
-          'a-cell-inner': { tableId: '1', row: '1', cell: '2', rowspan: 1, colspan: 1 },
-        },
-        insert: '\n',
-      },
-      { insert: '3' },
-      {
-        attributes: {
-          'a-cell-inner': { tableId: '1', row: '2', cell: '1', rowspan: 1, colspan: 1 },
-        },
-        insert: '\n',
-      },
-      { insert: '4' },
-      {
-        attributes: {
-          'a-cell-inner': { tableId: '1', row: '2', cell: '2', rowspan: 1, colspan: 1 },
-        },
-        insert: '\n',
-      },
-      { insert: '\n' },
-    ]);
-    await vi.runAllTimersAsync();
-    expect(quill.getContents()).toMatchObject({
-      ops: [
-        {
-          insert: '\n',
-        },
-        {
-          insert: {
-            'a-col': {
-              tableId: '1',
-              column: '1',
-              full: true,
-              width: 50,
-            },
-          },
-        },
-        {
-          insert: {
-            'a-col': {
-              tableId: '1',
-              column: '2',
-              full: true,
-              width: 50,
-            },
-          },
-        },
-        { insert: '1' },
-        {
-          attributes: {
-            'a-cell-inner': {
-              tableId: '1',
-              cell: '1',
-              row: '1',
-              rowspan: 1,
-              colspan: 1,
-            },
-          },
-          insert: '\n',
-        },
-        { insert: '2' },
-        {
-          attributes: {
-            'a-cell-inner': {
-              tableId: '1',
-              cell: '2',
-              row: '1',
-              rowspan: 1,
-              colspan: 1,
-            },
-          },
-          insert: '\n',
-        },
-        { insert: '3' },
-        {
-          attributes: {
-            'a-cell-inner': {
-              tableId: '1',
-              cell: '1',
-              row: '2',
-              rowspan: 1,
-              colspan: 1,
-            },
-          },
-          insert: '\n',
-        },
-        { insert: '4' },
-        {
-          attributes: {
-            'a-cell-inner': {
-              tableId: '1',
-              cell: '2',
-              row: '2',
-              rowspan: 1,
-              colspan: 1,
-            },
-          },
-          insert: '\n',
-        },
-        {
-          insert: '\n',
-        },
-      ],
-    });
-    const colWidth = getColWidthStyle({ full: true, colNum: 2 });
-    expect(quill.root).toEqualHTML(
-      `
-        <p><br></p>
-        <div>
-          <table cellpadding="0" cellspacing="0"${datasetFull(true)}>
-            <colgroup${datasetFull(true)}>
-              ${new Array(2).fill(0).map((_, i) => `<col ${colWidth} data-col-id="${i + 1}"${datasetFull(true)} />`).join('\n')}
-            </colgroup>
-            <tbody>
-            ${
-              new Array(2).fill(0).map((_, i) => `
-                <tr data-row-id="${i + 1}">
-                  ${
-                    new Array(2).fill(0).map((_, j) => `<td rowspan="1" colspan="1" data-row="${i + 1}" data-cell="${j + 1}">
-                      <div data-rowspan="1" data-colspan="1" data-row="${i + 1}" data-cell="${j + 1}">
-                        <p>
-                          ${i * 2 + j + 1}
-                        </p>
-                      </div>
-                    </td>`).join('\n')
-                  }
-                </tr>
-              `).join('\n')
-            }
-          </tbody>
-          </table>
-        </div>
-        <p><br></p>
-      `,
-      { ignoreAttrs: ['data-wrap-tag', 'data-tag', 'class', 'style', 'data-table-id', 'contenteditable'] },
-    );
-  });
-});
+import Quill from 'quill';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { TableBodyFormat, TableCellFormat, TableCellInnerFormat, TableColFormat, TableMainFormat, TableRowFormat, TableWrapperFormat } from '../../formats';
+import { TableUp, updateTableConstants } from '../../table-up';
+import { blotName, findParentBlot, findParentBlots } from '../../utils';
+import { createTable, createTableHTML, createTaleColHTML, datasetFull, getColWidthStyle, normalizeHTML } from './utils';
+
+beforeEach(() => {
+  vi.useFakeTimers();
+});
+afterEach(() => {
+  vi.useRealTimers();
+});
+
+function createOverridesTable(html: string, options = true, moduleOptions = {}, register = {}) {
+  updateTableConstants({
+    blotName: {
+      tableCol: 'a-col',
+      tableCell: 'a-cell',
+      tableCellInner: 'a-cell-inner',
+    },
+  });
+
+  // rename `colId` to `column`
+  class TableColFormatOverride extends TableColFormat {
+    static create(value: any) {
+      const { colId, column } = value;
+      const node = super.create(value);
+      node.dataset.colId = column || colId;
+      node.setAttribute('contenteditable', 'false');
+      return node;
+    }
+
+    static value(domNode: HTMLElement) {
+      const value = super.value(domNode);
+      value.column = value.colId;
+      delete value.colId;
+      return value;
+    }
+  }
+  // rename `rowId` to `row`, `colId` to `cell`
+  class TableCellFormatOverride extends TableCellFormat {
+    static allowDataAttrs = new Set(['table-id', 'row', 'cell']);
+    static create(value: any) {
+      const node = super.create(value);
+      let { rowId, colId, row, cell } = value;
+      row = row || rowId;
+      cell = cell || colId;
+      node.dataset.row = row;
+      node.dataset.cell = cell;
+      node.removeAttribute('data-row-id');
+      node.removeAttribute('data-col-id');
+      return node;
+    }
+
+    static formats(domNode: HTMLElement) {
+      const value = super.formats(domNode);
+      const { row, cell } = domNode.dataset;
+      value.row = row;
+      value.cell = cell;
+      delete value.rowId;
+      delete value.colId;
+      return value;
+    }
+
+    get rowId() {
+      return this.domNode.dataset.row!;
+    }
+
+    get colId() {
+      return this.domNode.dataset.cell!;
+    }
+  }
+  class TableCellInnerFormatOverride extends TableCellInnerFormat {
+    static allowDataAttrs = new Set(['table-id', 'row', 'cell', 'rowspan', 'colspan']);
+    static create(value: any) {
+      const node = super.create(value);
+      let { rowId, colId, row, cell } = value;
+      row = row || rowId;
+      cell = cell || colId;
+      node.dataset.row = row;
+      node.dataset.cell = cell;
+      node.removeAttribute('data-row-id');
+      node.removeAttribute('data-col-id');
+      return node;
+    }
+
+    static formats(domNode: HTMLElement) {
+      const value = super.formats(domNode);
+      const { row, cell } = domNode.dataset;
+      value.row = row;
+      value.cell = cell;
+      delete value.rowId;
+      delete value.colId;
+      return value;
+    }
+
+    get rowId() {
+      return this.domNode.dataset.row!;
+    }
+
+    set rowId(value) {
+      this.setFormatValue('row', value);
+    }
+
+    get colId() {
+      return this.domNode.dataset.cell!;
+    }
+
+    set colId(value) {
+      this.setFormatValue('cell', value);
+    }
+  }
+  class TableUpOverride extends TableUp {
+    static register(): void {
+      super.register();
+      Quill.register({
+        'formats/a-col': TableColFormatOverride,
+        'formats/a-cell': TableCellFormatOverride,
+        'formats/a-cell-inner': TableCellInnerFormatOverride,
+      }, true);
+    }
+  }
+  Quill.register({
+    'modules/tableUpOverride': TableUpOverride,
+    ...register,
+  }, true);
+  const container = document.body.appendChild(document.createElement('div'));
+  container.innerHTML = normalizeHTML(html);
+  const quill = new Quill(container, {
+    modules: {
+      tableUpOverride: options,
+      history: {
+        delay: 0,
+      },
+      ...moduleOptions,
+    },
+  });
+  return quill;
+}
+
+describe('test utils', () => {
+  it('test findParentBlot', async () => {
+    const quill = await createTable(1, 1);
+    const tds = quill.scroll.descendants(TableCellInnerFormat, 0);
+    const tableCellBlot = findParentBlot(tds[0], blotName.tableCell);
+    expect(tableCellBlot).toBeInstanceOf(TableCellFormat);
+    const tableRowBlot = findParentBlot(tds[0], blotName.tableRow);
+    expect(tableRowBlot).toBeInstanceOf(TableRowFormat);
+    const tableBodyBlot = findParentBlot(tds[0], blotName.tableBody);
+    expect(tableBodyBlot).toBeInstanceOf(TableBodyFormat);
+    const tableMainBlot = findParentBlot(tds[0], blotName.tableMain);
+    expect(tableMainBlot).toBeInstanceOf(TableMainFormat);
+    const tableWrapperBlot = findParentBlot(tds[0], blotName.tableWrapper);
+    expect(tableWrapperBlot).toBeInstanceOf(TableWrapperFormat);
+    expect(() => findParentBlot(tds[0], 'scroll')).toThrowError(`${blotName.tableCellInner} must be a child of scroll`);
+  });
+
+  it('test findParentBlots', async () => {
+    const quill = await createTable(1, 1);
+    const tds = quill.scroll.descendants(TableCellInnerFormat, 0);
+    const [tableCellBlot, tableRowBlot, tableBodyBlot, tableMainBlot, tableWrapperBlot] = findParentBlots(
+      tds[0],
+      [
+        blotName.tableCell,
+        blotName.tableRow,
+        blotName.tableBody,
+        blotName.tableMain,
+        blotName.tableWrapper,
+      ] as const,
+    );
+    expect(tableCellBlot).toBeInstanceOf(TableCellFormat);
+    expect(tableRowBlot).toBeInstanceOf(TableRowFormat);
+    expect(tableBodyBlot).toBeInstanceOf(TableBodyFormat);
+    expect(tableMainBlot).toBeInstanceOf(TableMainFormat);
+    expect(tableWrapperBlot).toBeInstanceOf(TableWrapperFormat);
+  });
+});
+
+// this test need be last. it's effect `blotName`
+describe('test override format', () => {
+  it('should change blotName', async () => {
+    updateTableConstants({
+      blotName: {
+        tableCol: 'a-col',
+        tableCellInner: 'a-cell-inner',
+      },
+    });
+    const quill = await createTable(2, 2);
+    expect(quill.getContents()).toMatchObject({
+      ops: [
+        {
+          insert: '\n',
+        },
+        {
+          insert: {
+            'a-col': {
+              tableId: '1',
+              colId: '1',
+              full: true,
+              width: 50,
+            },
+          },
+        },
+        {
+          insert: {
+            'a-col': {
+              tableId: '1',
+              colId: '2',
+              full: true,
+              width: 50,
+            },
+          },
+        },
+        {
+          insert: '1',
+        },
+        {
+          attributes: {
+            'a-cell-inner': {
+              tableId: '1',
+              colId: '1',
+              rowId: '1',
+              rowspan: 1,
+              colspan: 1,
+            },
+          },
+          insert: '\n',
+        },
+        {
+          insert: '2',
+        },
+        {
+          attributes: {
+            'a-cell-inner': {
+              tableId: '1',
+              colId: '2',
+              rowId: '1',
+              rowspan: 1,
+              colspan: 1,
+            },
+          },
+          insert: '\n',
+        },
+        {
+          insert: '3',
+        },
+        {
+          attributes: {
+            'a-cell-inner': {
+              tableId: '1',
+              colId: '1',
+              rowId: '2',
+              rowspan: 1,
+              colspan: 1,
+            },
+          },
+          insert: '\n',
+        },
+        {
+          insert: '4',
+        },
+        {
+          attributes: {
+            'a-cell-inner': {
+              tableId: '1',
+              colId: '2',
+              rowId: '2',
+              rowspan: 1,
+              colspan: 1,
+            },
+          },
+          insert: '\n',
+        },
+        {
+          insert: '\n',
+        },
+      ],
+    });
+    expect(quill.root).toEqualHTML(
+      `
+        <p><br></p>
+        ${createTableHTML(2, 2)}
+        <p><br></p>
+      `,
+      { ignoreAttrs: ['class', 'style', 'data-table-id', 'contenteditable'] },
+    );
+    const tableModule = quill.getModule(TableUp.moduleName) as TableUp;
+    const tds = quill.scroll.descendants(TableCellInnerFormat, 0);
+    tableModule.mergeCells([tds[0], tds[1], tds[2], tds[3]]);
+    await vi.runAllTimersAsync();
+    expect(quill.getContents()).toMatchObject({
+      ops: [
+        {
+          insert: '\n',
+        },
+        {
+          insert: {
+            'a-col': {
+              tableId: '1',
+              colId: '1',
+              full: true,
+              width: 100,
+            },
+          },
+        },
+        {
+          insert: '1',
+        },
+        {
+          attributes: {
+            'a-cell-inner': {
+              tableId: '1',
+              colId: '1',
+              rowId: '1',
+              rowspan: 1,
+              colspan: 1,
+            },
+          },
+          insert: '\n',
+        },
+        {
+          insert: '2',
+        },
+        {
+          attributes: {
+            'a-cell-inner': {
+              tableId: '1',
+              colId: '1',
+              rowId: '1',
+              rowspan: 1,
+              colspan: 1,
+            },
+          },
+          insert: '\n',
+        },
+        {
+          insert: '3',
+        },
+        {
+          attributes: {
+            'a-cell-inner': {
+              tableId: '1',
+              colId: '1',
+              rowId: '1',
+              rowspan: 1,
+              colspan: 1,
+            },
+          },
+          insert: '\n',
+        },
+        {
+          insert: '4',
+        },
+        {
+          attributes: {
+            'a-cell-inner': {
+              tableId: '1',
+              colId: '1',
+              rowId: '1',
+              rowspan: 1,
+              colspan: 1,
+            },
+          },
+          insert: '\n',
+        },
+        {
+          insert: '\n',
+        },
+      ],
+    });
+    expect(quill.root).toEqualHTML(
+      `
+        <p><br></p>
+        <div>
+          <table cellpadding="0" cellspacing="0" data-full="true">
+            ${createTaleColHTML(1)}
+            <tbody>
+              <tr data-row-id="1">
+                <td rowspan="1" colspan="1" data-row-id="1" data-col-id="1">
+                  <div data-rowspan="1" data-colspan="1" data-row-id="1" data-col-id="1">
+                    <p>1</p>
+                    <p>2</p>
+                    <p>3</p>
+                    <p>4</p>
+                  </div>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <p><br></p>
+      `,
+      { ignoreAttrs: ['data-wrap-tag', 'data-tag', 'class', 'style', 'data-table-id', 'contenteditable'] },
+    );
+  });
+
+  it('should change format name in delta', async () => {
+    const quill = createOverridesTable(`<p><br></p>`);
+    quill.setContents([
+      { insert: '\n' },
+      {
+        insert: {
+          'a-col': { tableId: '1', column: '1', full: true, width: 50 },
+        },
+      },
+      {
+        insert: {
+          'a-col': { tableId: '1', column: '2', full: true, width: 50 },
+        },
+      },
+      {
+        attributes: {
+          'a-cell-inner': { tableId: '1', row: '1', cell: '1', rowspan: 1, colspan: 1 },
+        },
+        insert: '\n',
+      },
+      {
+        attributes: {
+          'a-cell-inner': { tableId: '1', row: '1', cell: '2', rowspan: 1, colspan: 1 },
+        },
+        insert: '\n',
+      },
+      {
+        attributes: {
+          'a-cell-inner': { tableId: '1', row: '2', cell: '1', rowspan: 1, colspan: 1 },
+        },
+        insert: '\n',
+      },
+      {
+        attributes: {
+          'a-cell-inner': { tableId: '1', row: '2', cell: '2', rowspan: 1, colspan: 1 },
+        },
+        insert: '\n',
+      },
+      { insert: '\n' },
+    ]);
+    await vi.runAllTimersAsync();
+    expect(quill.getContents()).toMatchObject({
+      ops: [
+        {
+          insert: '\n',
+        },
+        {
+          insert: {
+            'a-col': {
+              tableId: '1',
+              column: '1',
+              full: true,
+              width: 50,
+            },
+          },
+        },
+        {
+          insert: {
+            'a-col': {
+              tableId: '1',
+              column: '2',
+              full: true,
+              width: 50,
+            },
+          },
+        },
+        {
+          attributes: {
+            'a-cell-inner': {
+              tableId: '1',
+              cell: '1',
+              row: '1',
+              rowspan: 1,
+              colspan: 1,
+            },
+          },
+          insert: '\n',
+        },
+        {
+          attributes: {
+            'a-cell-inner': {
+              tableId: '1',
+              cell: '2',
+              row: '1',
+              rowspan: 1,
+              colspan: 1,
+            },
+          },
+          insert: '\n',
+        },
+        {
+          attributes: {
+            'a-cell-inner': {
+              tableId: '1',
+              cell: '1',
+              row: '2',
+              rowspan: 1,
+              colspan: 1,
+            },
+          },
+          insert: '\n',
+        },
+        {
+          attributes: {
+            'a-cell-inner': {
+              tableId: '1',
+              cell: '2',
+              row: '2',
+              rowspan: 1,
+              colspan: 1,
+            },
+          },
+          insert: '\n',
+        },
+        {
+          insert: '\n',
+        },
+      ],
+    });
+    const colWidth = getColWidthStyle({ full: true, colNum: 2 });
+    expect(quill.root).toEqualHTML(
+      `
+        <p><br></p>
+        <div>
+          <table cellpadding="0" cellspacing="0"${datasetFull(true)}>
+            <colgroup${datasetFull(true)}>
+              ${new Array(2).fill(0).map((_, i) => `<col ${colWidth} data-col-id="${i + 1}"${datasetFull(true)} />`).join('\n')}
+            </colgroup>
+            <tbody>
+            ${
+              new Array(2).fill(0).map((_, i) => `
+                <tr data-row-id="${i + 1}">
+                  ${
+                    new Array(2).fill(0).map((_, j) => `<td rowspan="1" colspan="1" data-row="${i + 1}" data-cell="${j + 1}">
+                      <div data-rowspan="1" data-colspan="1" data-row="${i + 1}" data-cell="${j + 1}">
+                        <p>
+                          <br>
+                        </p>
+                      </div>
+                    </td>`).join('\n')
+                  }
+                </tr>
+              `).join('\n')
+            }
+          </tbody>
+          </table>
+        </div>
+        <p><br></p>
+      `,
+      { ignoreAttrs: ['data-wrap-tag', 'data-tag', 'class', 'style', 'data-table-id', 'contenteditable'] },
+    );
+  });
+
+  it('should change format name in delta with contents', async () => {
+    const quill = createOverridesTable(`<p><br></p>`);
+    quill.setContents([
+      { insert: '\n' },
+      {
+        insert: {
+          'a-col': { tableId: '1', column: '1', full: true, width: 50 },
+        },
+      },
+      {
+        insert: {
+          'a-col': { tableId: '1', column: '2', full: true, width: 50 },
+        },
+      },
+      { insert: '1' },
+      {
+        attributes: {
+          'a-cell-inner': { tableId: '1', row: '1', cell: '1', rowspan: 1, colspan: 1 },
+        },
+        insert: '\n',
+      },
+      { insert: '2' },
+      {
+        attributes: {
+          'a-cell-inner': { tableId: '1', row: '1', cell: '2', rowspan: 1, colspan: 1 },
+        },
+        insert: '\n',
+      },
+      { insert: '3' },
+      {
+        attributes: {
+          'a-cell-inner': { tableId: '1', row: '2', cell: '1', rowspan: 1, colspan: 1 },
+        },
+        insert: '\n',
+      },
+      { insert: '4' },
+      {
+        attributes: {
+          'a-cell-inner': { tableId: '1', row: '2', cell: '2', rowspan: 1, colspan: 1 },
+        },
+        insert: '\n',
+      },
+      { insert: '\n' },
+    ]);
+    await vi.runAllTimersAsync();
+    expect(quill.getContents()).toMatchObject({
+      ops: [
+        {
+          insert: '\n',
+        },
+        {
+          insert: {
+            'a-col': {
+              tableId: '1',
+              column: '1',
+              full: true,
+              width: 50,
+            },
+          },
+        },
+        {
+          insert: {
+            'a-col': {
+              tableId: '1',
+              column: '2',
+              full: true,
+              width: 50,
+            },
+          },
+        },
+        { insert: '1' },
+        {
+          attributes: {
+            'a-cell-inner': {
+              tableId: '1',
+              cell: '1',
+              row: '1',
+              rowspan: 1,
+              colspan: 1,
+            },
+          },
+          insert: '\n',
+        },
+        { insert: '2' },
+        {
+          attributes: {
+            'a-cell-inner': {
+              tableId: '1',
+              cell: '2',
+              row: '1',
+              rowspan: 1,
+              colspan: 1,
+            },
+          },
+          insert: '\n',
+        },
+        { insert: '3' },
+        {
+          attributes: {
+            'a-cell-inner': {
+              tableId: '1',
+              cell: '1',
+              row: '2',
+              rowspan: 1,
+              colspan: 1,
+            },
+          },
+          insert: '\n',
+        },
+        { insert: '4' },
+        {
+          attributes: {
+            'a-cell-inner': {
+              tableId: '1',
+              cell: '2',
+              row: '2',
+              rowspan: 1,
+              colspan: 1,
+            },
+          },
+          insert: '\n',
+        },
+        {
+          insert: '\n',
+        },
+      ],
+    });
+    const colWidth = getColWidthStyle({ full: true, colNum: 2 });
+    expect(quill.root).toEqualHTML(
+      `
+        <p><br></p>
+        <div>
+          <table cellpadding="0" cellspacing="0"${datasetFull(true)}>
+            <colgroup${datasetFull(true)}>
+              ${new Array(2).fill(0).map((_, i) => `<col ${colWidth} data-col-id="${i + 1}"${datasetFull(true)} />`).join('\n')}
+            </colgroup>
+            <tbody>
+            ${
+              new Array(2).fill(0).map((_, i) => `
+                <tr data-row-id="${i + 1}">
+                  ${
+                    new Array(2).fill(0).map((_, j) => `<td rowspan="1" colspan="1" data-row="${i + 1}" data-cell="${j + 1}">
+                      <div data-rowspan="1" data-colspan="1" data-row="${i + 1}" data-cell="${j + 1}">
+                        <p>
+                          ${i * 2 + j + 1}
+                        </p>
+                      </div>
+                    </td>`).join('\n')
+                  }
+                </tr>
+              `).join('\n')
+            }
+          </tbody>
+          </table>
+        </div>
+        <p><br></p>
+      `,
+      { ignoreAttrs: ['data-wrap-tag', 'data-tag', 'class', 'style', 'data-table-id', 'contenteditable'] },
+    );
+  });
+});