quill-table-up 2.1.9 → 2.2.0

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

@@ -3,7 +3,7 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { TableCellInnerFormat } from '../../formats';
 import { TableSelection } from '../../modules';
 import { TableUp } from '../../table-up';
-import { createQuillWithTableModule, createTable, createTableBodyHTML, createTableDeltaOps, createTaleColHTML, expectDelta } from './utils';
+import { createQuillWithTableModule, createTable, createTableBodyHTML, createTableCaptionHTML, createTableDeltaOps, createTaleColHTML, expectDelta } from './utils';
 
 const Delta = Quill.import('delta');
 if (!Range.prototype.getBoundingClientRect) {
@@ -30,19 +30,46 @@ afterEach(() => {
 });
 
 describe('hack html convert', () => {
-  it('getSemanticHTML should not get contenteditable table cell', async () => {
-    const quill = await createTable(3, 3, { full: false, width: 100, align: 'right' }, { isEmpty: false });
+  it('getSemanticHTML should not get contenteditable table cell or caption', async () => {
+    const quill = createQuillWithTableModule(`<p><br></p>`);
+    quill.setContents([
+      { insert: '\nTable Caption' },
+      { attributes: { 'table-up-caption': { tableId: '1', side: 'bottom' } }, insert: '\n' },
+      { insert: { 'table-up-col': { tableId: '1', colId: '1', full: false, width: 100, align: 'right' } } },
+      { insert: { 'table-up-col': { tableId: '1', colId: '2', full: false, width: 100, align: 'right' } } },
+      { insert: { 'table-up-col': { tableId: '1', colId: '3', full: false, width: 100, align: 'right' } } },
+      { insert: '1' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
+      { insert: '2' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '2', rowspan: 1, colspan: 1 } }, insert: '\n' },
+      { insert: '3' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '3', rowspan: 1, colspan: 1 } }, insert: '\n' },
+      { insert: '4' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
+      { insert: '5' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '2', rowspan: 1, colspan: 1 } }, insert: '\n' },
+      { insert: '6' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '3', rowspan: 1, colspan: 1 } }, insert: '\n' },
+      { insert: '7' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '3', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
+      { insert: '8' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '3', colId: '2', rowspan: 1, colspan: 1 } }, insert: '\n' },
+      { insert: '9' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '3', colId: '3', rowspan: 1, colspan: 1 } }, insert: '\n' },
+      { insert: '\n' },
+    ]);
     await vi.runAllTimersAsync();
-    const html = quill.getSemanticHTML();
-    const parser = new DOMParser();
-    const doc = parser.parseFromString(html, 'text/html');
-    expect(doc.body).toEqualHTML(
+    const html1 = quill.getSemanticHTML();
+    const parser1 = new DOMParser();
+    const doc1 = parser1.parseFromString(html1, 'text/html');
+    expect(doc1.body).toEqualHTML(
       `
         <p></p>
         <div contenteditable="false">
-          <table cellpadding="0" cellspacing="0" style="margin-left: auto; width: 300px;" data-align="right">
+          <table cellpadding="0" cellspacing="0" style="width: 300px; margin-left: auto;" data-align="right">
+            ${createTableCaptionHTML({ text: 'Table&nbsp;Caption', side: 'bottom' }, { editable: null })}
             ${createTaleColHTML(3, { full: false, width: 100, align: 'right' })}
-            ${createTableBodyHTML(3, 3, { isEmpty: false, editable: false })}
+            ${createTableBodyHTML(3, 3, { isEmpty: false, editable: null })}
           </table>
         </div>
         <p></p>
@@ -51,8 +78,34 @@ describe('hack html convert', () => {
     );
   });
 
-  it('getHTMLByCell should not get contenteditable table cell', async () => {
-    const quill = await createTable(3, 3, { full: false, width: 100, align: 'right' }, { isEmpty: false });
+  it('getHTMLByCell should not get contenteditable table cell or caption', async () => {
+    const quill = createQuillWithTableModule(`<p><br></p>`);
+    quill.setContents([
+      { insert: '\nTable Caption' },
+      { attributes: { 'table-up-caption': { tableId: '1', side: 'bottom' } }, insert: '\n' },
+      { insert: { 'table-up-col': { tableId: '1', colId: '1', full: false, width: 100, align: 'right' } } },
+      { insert: { 'table-up-col': { tableId: '1', colId: '2', full: false, width: 100, align: 'right' } } },
+      { insert: { 'table-up-col': { tableId: '1', colId: '3', full: false, width: 100, align: 'right' } } },
+      { insert: '1' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
+      { insert: '2' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '2', rowspan: 1, colspan: 1 } }, insert: '\n' },
+      { insert: '3' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '3', rowspan: 1, colspan: 1 } }, insert: '\n' },
+      { insert: '4' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
+      { insert: '5' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '2', rowspan: 1, colspan: 1 } }, insert: '\n' },
+      { insert: '6' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '3', rowspan: 1, colspan: 1 } }, insert: '\n' },
+      { insert: '7' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '3', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
+      { insert: '8' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '3', colId: '2', rowspan: 1, colspan: 1 } }, insert: '\n' },
+      { insert: '9' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '3', colId: '3', rowspan: 1, colspan: 1 } }, insert: '\n' },
+      { insert: '\n' },
+    ]);
     const tableModule = quill.getModule(TableUp.moduleName) as TableUp;
     const tds = quill.scroll.descendants(TableCellInnerFormat, 0);
     const html = tableModule.getHTMLByCell([tds[0], tds[1], tds[3], tds[4]]);
@@ -61,7 +114,8 @@ describe('hack html convert', () => {
     expect(doc.body).toEqualHTML(
       `
         <div contenteditable="false">
-          <table cellpadding="0" cellspacing="0" style="margin-left: auto; width: 200px;" data-align="right">
+          <table cellpadding="0" cellspacing="0" style="width: 200px; margin-left: auto;" data-align="right">
+            <caption style="caption-side: bottom;">Table&nbsp;Caption</caption>
             <colgroup contenteditable="false" data-align="right">
               <col width="100px" data-col-id="1" data-align="right" />
               <col width="100px" data-col-id="2" data-align="right" />
@@ -98,54 +152,6 @@ describe('hack html convert', () => {
       { ignoreAttrs: ['class', 'data-table-id'] },
     );
   });
-
-  it('getHTMLByCell should not get contenteditable table cell with attribute', async () => {
-    const quill = await createTable(4, 4, { full: true, width: 100 }, { isEmpty: false });
-    const tableModule = quill.getModule(TableUp.moduleName) as TableUp;
-    const tds = quill.scroll.descendants(TableCellInnerFormat, 0);
-    const html = tableModule.getHTMLByCell([tds[0], tds[1], tds[4], tds[5]]);
-    const parser = new DOMParser();
-    const doc = parser.parseFromString(html, 'text/html');
-    expect(doc.body).toEqualHTML(
-      `
-        <div contenteditable="false">
-          <table cellpadding="0" cellspacing="0" style="margin-right: auto;" data-full="true">
-            <colgroup contenteditable="false" data-full="true">
-              <col width="50%" data-col-id="1" data-full="true" />
-              <col width="50%" data-col-id="2" data-full="true" />
-            </colgroup>
-            <tbody>
-              <tr data-row-id="1">
-                <td colspan="1" data-col-id="1" data-row-id="1" rowspan="1">
-                  <div data-col-id="1" data-colspan="1" data-row-id="1" data-rowspan="1">
-                    <p>1</p>
-                  </div>
-                </td>
-                <td colspan="1" data-col-id="2" data-row-id="1" rowspan="1">
-                  <div data-col-id="2" data-colspan="1" data-row-id="1" data-rowspan="1">
-                    <p>2</p>
-                  </div>
-                </td>
-              </tr>
-              <tr data-row-id="2">
-                <td colspan="1" data-col-id="1" data-row-id="2" rowspan="1">
-                  <div data-col-id="1" data-colspan="1" data-row-id="2" data-rowspan="1">
-                    <p>5</p>
-                  </div>
-                </td>
-                <td colspan="1" data-col-id="2" data-row-id="2" rowspan="1">
-                  <div data-col-id="2" data-colspan="1" data-row-id="2" data-rowspan="1">
-                    <p>6</p>
-                  </div>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      `,
-      { ignoreAttrs: ['class', 'data-table-id'] },
-    );
-  });
 });
 
 describe('hack format cell', () => {
@@ -177,7 +183,7 @@ describe('hack format cell', () => {
   });
 
   it('select part of text in cell should text like origin', async () => {
-    const quill = await createTable(2, 2, { full: false }, { isEmpty: false });
+    const quill = await createTable(2, 2, { full: false });
     quill.updateContents(
       new Delta()
         .retain(4)
@@ -278,7 +284,7 @@ describe('hack format cell', () => {
   });
 
   it('select length is 0 and not have selecteds should format like origin', async () => {
-    const quill = await createTable(2, 2, { full: false }, { isEmpty: false });
+    const quill = await createTable(2, 2, { full: false });
     quill.updateContents(
       new Delta()
         .retain(4)
@@ -316,7 +322,7 @@ describe('hack format cell', () => {
 
   it('select length is 0 and selectedTds not empty should format all text in cell', async () => {
     const quill = createQuillWithTableModule('<p></p>', { selection: TableSelection });
-    quill.setContents(createTableDeltaOps(2, 2, { full: false }, { isEmpty: false }));
+    quill.setContents(createTableDeltaOps(2, 2, { full: false }));
     quill.updateContents(
       new Delta()
         .retain(4)
@@ -529,6 +535,7 @@ describe('hack toolbar clean handler', () => {
       { insert: '\n' },
     ]);
     const tableUp = quill.getModule(TableUp.moduleName) as TableUp;
+    tableUp.tableSelection!.table = quill.root.querySelector('table')!;
     const tds = quill.scroll.descendants(TableCellInnerFormat, 0);
     tableUp.tableSelection!.selectedTds = tds;
 
@@ -574,6 +581,7 @@ describe('hack toolbar clean handler', () => {
     ]);
     const tableUp = quill.getModule(TableUp.moduleName) as TableUp;
     const tds = quill.scroll.descendants(TableCellInnerFormat, 0);
+    tableUp.tableSelection!.table = quill.root.querySelector('table')!;
     tableUp.tableSelection!.selectedTds = tds;
     quill.setSelection(1, 3, Quill.sources.SILENT);
 
@@ -680,6 +688,7 @@ describe('hack toolbar clean handler', () => {
     await vi.runAllTimersAsync();
     const tableUp = quill.getModule(TableUp.moduleName) as TableUp;
     const tds = quill.scroll.descendants(TableCellInnerFormat, 0);
+    tableUp.tableSelection!.table = quill.root.querySelector('table')!;
     tableUp.tableSelection!.selectedTds = [tds[1]];
     quill.theme.modules.toolbar!.handlers!.clean.call(quill.theme.modules.toolbar as any, true);
     expectDelta(
@@ -822,6 +831,7 @@ describe('hack toolbar clean handler', () => {
 
     const tableUp = quill.getModule(TableUp.moduleName) as TableUp;
     const tds = quill.scroll.descendants(TableCellInnerFormat, 0);
+    tableUp.tableSelection!.table = quill.root.querySelector('table')!;
     tableUp.tableSelection!.selectedTds = tds;
     quill.theme.modules.toolbar!.handlers!.clean.call(quill.theme.modules.toolbar as any, true);
 
@@ -883,4 +893,68 @@ describe('hack toolbar clean handler', () => {
       { ignoreAttrs: ['class', 'style', 'data-table-id', 'data-row-id', 'data-col-id', 'data-rowspan', 'data-colspan', 'contenteditable'] },
     );
   });
+
+  it('clean handler should clean cell selectedTds style', async () => {
+    const quill = createQuillWithTableModule('<p></p>', { selection: TableSelection });
+    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: '1' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1, style: 'background-color: rgb(201, 16, 16);' } }, insert: '\n' },
+      { insert: '2' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '2', rowspan: 1, colspan: 1, style: 'border-bottom-color: rgb(0, 247, 255); background-color: rgb(201, 16, 16);' } }, insert: '\n' },
+      { insert: '3' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '3', rowspan: 1, colspan: 1, style: 'background-color: rgb(201, 16, 16);' } }, insert: '\n' },
+      { insert: '4' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '1', rowspan: 1, colspan: 1, style: 'border-right-color: rgb(0, 247, 255); background-color: rgb(201, 16, 16);' } }, insert: '\n' },
+      { insert: '5' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '2', rowspan: 1, colspan: 1, style: 'border-color: rgb(0, 247, 255); background-color: rgb(201, 16, 16);' } }, insert: '\n' },
+      { insert: '6' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '3', rowspan: 1, colspan: 1, style: 'background-color: rgb(201, 16, 16);' } }, insert: '\n' },
+      { insert: '7' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '3', colId: '1', rowspan: 1, colspan: 1, style: 'background-color: rgb(201, 16, 16);' } }, insert: '\n' },
+      { insert: '8' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '3', colId: '2', rowspan: 1, colspan: 1, style: 'background-color: rgb(201, 16, 16);' } }, insert: '\n' },
+      { insert: '9' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '3', colId: '3', rowspan: 1, colspan: 1, style: 'background-color: rgb(201, 16, 16);' } }, insert: '\n' },
+      { insert: '\n' },
+    ]);
+
+    const tableUp = quill.getModule(TableUp.moduleName) as TableUp;
+    const tds = quill.scroll.descendants(TableCellInnerFormat, 0);
+    tableUp.tableSelection!.table = quill.root.querySelector('table')!;
+    tableUp.tableSelection!.selectedTds = [tds[4]];
+    quill.theme.modules.toolbar!.handlers!.clean.call(quill.theme.modules.toolbar as any, true);
+
+    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, style: 'background-color: rgb(201, 16, 16);' } }, insert: '\n' },
+        { insert: '2' },
+        { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '2', rowspan: 1, colspan: 1, style: 'background-color: rgb(201, 16, 16);' } }, insert: '\n' },
+        { insert: '3' },
+        { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '3', rowspan: 1, colspan: 1, style: 'background-color: rgb(201, 16, 16);' } }, insert: '\n' },
+        { insert: '4' },
+        { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '1', rowspan: 1, colspan: 1, style: 'background-color: rgb(201, 16, 16);' } }, insert: '\n' },
+        { insert: '5' },
+        { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '2', rowspan: 1, colspan: 1 } }, insert: '\n' },
+        { insert: '6' },
+        { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '3', rowspan: 1, colspan: 1, style: 'background-color: rgb(201, 16, 16);' } }, insert: '\n' },
+        { insert: '7' },
+        { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '3', colId: '1', rowspan: 1, colspan: 1, style: 'background-color: rgb(201, 16, 16);' } }, insert: '\n' },
+        { insert: '8' },
+        { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '3', colId: '2', rowspan: 1, colspan: 1, style: 'background-color: rgb(201, 16, 16);' } }, insert: '\n' },
+        { insert: '9' },
+        { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '3', colId: '3', rowspan: 1, colspan: 1, style: 'background-color: rgb(201, 16, 16);' } }, insert: '\n' },
+        { insert: '\n' },
+      ]),
+    );
+  });
 });

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

@@ -269,12 +269,12 @@ describe('set contents', () => {
 
   it('should display an empty table', async () => {
     const quill = createQuillWithTableModule(`<p><br></p>`);
-    quill.setContents(createTableDeltaOps(2, 2, {}, { isEmpty: true }));
+    quill.setContents(createTableDeltaOps(2, 2, {}, {}, { isEmpty: true }));
     await vi.runAllTimersAsync();
     expect(quill.root).toEqualHTML(
       `
         <p><br></p>
-        ${createTableHTML(2, 2, {}, { isEmpty: true })}
+        ${createTableHTML(2, 2, {}, undefined, { isEmpty: true })}
         <p><br></p>
       `,
       { ignoreAttrs: ['class', 'style', 'data-table-id', 'data-row-id', 'data-col-id', 'data-rowspan', 'data-colspan', 'contenteditable'] },
@@ -666,7 +666,7 @@ describe('set cell attribute', () => {
   });
 
   it('set span cell border color', async () => {
-    const quill = await createTable(5, 5, {}, { isEmpty: true });
+    const quill = await createTable(5, 5, {}, {}, { isEmpty: true });
     const tableModule = quill.getModule(TableUp.moduleName) as TableUp;
 
     const tds = quill.scroll.descendants(TableCellInnerFormat, 0);
@@ -707,7 +707,7 @@ describe('set cell attribute', () => {
   });
 
   it('set rowspan and colspan cell border color', async () => {
-    const quill = await createTable(6, 4, {}, { isEmpty: true });
+    const quill = await createTable(6, 4, {}, {}, { isEmpty: true });
     const tableModule = quill.getModule(TableUp.moduleName) as TableUp;
 
     const tds = quill.scroll.descendants(TableCellInnerFormat, 0);

package/src/__tests__/unit/table-redo-undo.test.ts

@@ -1,10 +1,13 @@
-import type { TableMainFormat } from '../../formats';
+import type { TableCaptionFormat, TableMainFormat } from '../../formats';
+import type { ToolOption } from '../../utils';
 import Quill from 'quill';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { TableCellInnerFormat } from '../../formats';
-import { TableSelection } from '../../modules';
+import { tableMenuTools, TableSelection } from '../../modules';
 import { TableUp } from '../../table-up';
-import { createQuillWithTableModule, createTable, createTableBodyHTML, createTableHTML, createTaleColHTML, datasetAlign, datasetFull } from './utils';
+import { createQuillWithTableModule, createTable, createTableBodyHTML, createTableHTML, createTaleColHTML, datasetAlign, datasetFull, expectDelta } from './utils';
+
+const Delta = Quill.import('delta');
 
 if (!Range.prototype.getBoundingClientRect) {
   Range.prototype.getBoundingClientRect = function () {
@@ -1008,6 +1011,7 @@ describe('undo cell attribute', () => {
 
     const tableUp = quill.getModule(TableUp.moduleName) as TableUp;
     const tds = quill.scroll.descendants(TableCellInnerFormat, 0);
+    tableUp.tableSelection!.table = quill.root.querySelector('table')!;
     tableUp.tableSelection!.selectedTds = tds;
     quill.theme.modules.toolbar!.handlers!.clean.call(quill.theme.modules.toolbar as any, true);
     expect(quill.root).toEqualHTML(
@@ -1134,3 +1138,248 @@ describe('undo cell attribute', () => {
     );
   });
 });
+
+describe('table caption', () => {
+  it('undo and redo tableCaption insert', async () => {
+    const quill = await createTable(3, 3, { full: false });
+    const tableModule = quill.getModule(TableUp.moduleName) as TableUp;
+    await vi.runAllTimersAsync();
+    const table = quill.root.querySelector('table')!;
+    tableModule.table = table;
+    (tableMenuTools.InsertCaption as ToolOption).handle(tableModule, [], null);
+    await vi.runAllTimersAsync();
+    const tableCaptionDelta = new Delta([
+      { insert: '\nTable Caption' },
+      { attributes: { 'table-up-caption': { tableId: '1', side: 'top' } }, insert: '\n' },
+      { insert: { 'table-up-col': { tableId: '1', colId: '1', full: false, width: 100 } } },
+      { insert: { 'table-up-col': { tableId: '1', colId: '2', full: false, width: 100 } } },
+      { insert: { 'table-up-col': { tableId: '1', colId: '3', full: false, width: 100 } } },
+      { insert: '1' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
+      { insert: '2' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '2', rowspan: 1, colspan: 1 } }, insert: '\n' },
+      { insert: '3' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '3', rowspan: 1, colspan: 1 } }, insert: '\n' },
+      { insert: '4' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
+      { insert: '5' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '2', rowspan: 1, colspan: 1 } }, insert: '\n' },
+      { insert: '6' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '3', rowspan: 1, colspan: 1 } }, insert: '\n' },
+      { insert: '7' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '3', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
+      { insert: '8' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '3', colId: '2', rowspan: 1, colspan: 1 } }, insert: '\n' },
+      { insert: '9' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '3', colId: '3', rowspan: 1, colspan: 1 } }, insert: '\n' },
+      { insert: '\n' },
+    ]);
+    expectDelta(
+      tableCaptionDelta,
+      quill.getContents(),
+    );
+
+    quill.history.undo();
+    await vi.runAllTimersAsync();
+    expectDelta(
+      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 } }, insert: '\n' },
+        { insert: '2' },
+        { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '2', rowspan: 1, colspan: 1 } }, insert: '\n' },
+        { insert: '3' },
+        { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '3', rowspan: 1, colspan: 1 } }, insert: '\n' },
+        { insert: '4' },
+        { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
+        { insert: '5' },
+        { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '2', rowspan: 1, colspan: 1 } }, insert: '\n' },
+        { insert: '6' },
+        { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '3', rowspan: 1, colspan: 1 } }, insert: '\n' },
+        { insert: '7' },
+        { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '3', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
+        { insert: '8' },
+        { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '3', colId: '2', rowspan: 1, colspan: 1 } }, insert: '\n' },
+        { insert: '9' },
+        { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '3', colId: '3', rowspan: 1, colspan: 1 } }, insert: '\n' },
+        { insert: '\n' },
+      ]),
+      quill.getContents(),
+    );
+
+    quill.history.redo();
+    await vi.runAllTimersAsync();
+    expectDelta(
+      tableCaptionDelta,
+      quill.getContents(),
+    );
+  });
+
+  it('undo and redo tableCaption edit', async () => {
+    const quill = await createTable(3, 3, { full: false });
+    const tableModule = quill.getModule(TableUp.moduleName) as TableUp;
+    await vi.runAllTimersAsync();
+    const table = quill.root.querySelector('table')!;
+    tableModule.table = table;
+    (tableMenuTools.InsertCaption as ToolOption).handle(tableModule, [], null);
+    await vi.runAllTimersAsync();
+    quill.deleteText({ index: 2, length: 4 });
+    await vi.runAllTimersAsync();
+    const tableCaptionDelta = new Delta([
+      { insert: '\nT Caption' },
+      { attributes: { 'table-up-caption': { tableId: '1', side: 'top' } }, insert: '\n' },
+      { insert: { 'table-up-col': { tableId: '1', colId: '1', full: false, width: 100 } } },
+      { insert: { 'table-up-col': { tableId: '1', colId: '2', full: false, width: 100 } } },
+      { insert: { 'table-up-col': { tableId: '1', colId: '3', full: false, width: 100 } } },
+      { insert: '1' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
+      { insert: '2' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '2', rowspan: 1, colspan: 1 } }, insert: '\n' },
+      { insert: '3' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '3', rowspan: 1, colspan: 1 } }, insert: '\n' },
+      { insert: '4' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
+      { insert: '5' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '2', rowspan: 1, colspan: 1 } }, insert: '\n' },
+      { insert: '6' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '3', rowspan: 1, colspan: 1 } }, insert: '\n' },
+      { insert: '7' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '3', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
+      { insert: '8' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '3', colId: '2', rowspan: 1, colspan: 1 } }, insert: '\n' },
+      { insert: '9' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '3', colId: '3', rowspan: 1, colspan: 1 } }, insert: '\n' },
+      { insert: '\n' },
+    ]);
+    expectDelta(
+      tableCaptionDelta,
+      quill.getContents(),
+    );
+
+    quill.history.undo();
+    await vi.runAllTimersAsync();
+    expectDelta(
+      new Delta([
+        { insert: '\nTable Caption' },
+        { attributes: { 'table-up-caption': { tableId: '1', side: 'top' } }, insert: '\n' },
+        { insert: { 'table-up-col': { tableId: '1', colId: '1', full: false, width: 100 } } },
+        { insert: { 'table-up-col': { tableId: '1', colId: '2', full: false, width: 100 } } },
+        { insert: { 'table-up-col': { tableId: '1', colId: '3', full: false, width: 100 } } },
+        { insert: '1' },
+        { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
+        { insert: '2' },
+        { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '2', rowspan: 1, colspan: 1 } }, insert: '\n' },
+        { insert: '3' },
+        { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '3', rowspan: 1, colspan: 1 } }, insert: '\n' },
+        { insert: '4' },
+        { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
+        { insert: '5' },
+        { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '2', rowspan: 1, colspan: 1 } }, insert: '\n' },
+        { insert: '6' },
+        { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '3', rowspan: 1, colspan: 1 } }, insert: '\n' },
+        { insert: '7' },
+        { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '3', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
+        { insert: '8' },
+        { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '3', colId: '2', rowspan: 1, colspan: 1 } }, insert: '\n' },
+        { insert: '9' },
+        { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '3', colId: '3', rowspan: 1, colspan: 1 } }, insert: '\n' },
+        { insert: '\n' },
+      ]),
+      quill.getContents(),
+    );
+
+    quill.history.redo();
+    await vi.runAllTimersAsync();
+    expectDelta(
+      tableCaptionDelta,
+      quill.getContents(),
+    );
+  });
+
+  it('undo and redo tableCaption position switch', async () => {
+    const quill = await createTable(3, 3, { full: false });
+    const tableModule = quill.getModule(TableUp.moduleName) as TableUp;
+    await vi.runAllTimersAsync();
+    const table = quill.root.querySelector('table')!;
+    tableModule.table = table;
+    (tableMenuTools.InsertCaption as ToolOption).handle(tableModule, [], null);
+    await vi.runAllTimersAsync();
+
+    const tableCaption = Quill.find(table.querySelector('caption')!)! as TableCaptionFormat;
+    expect(tableCaption).not.toBeNull();
+    tableCaption.side = 'bottom';
+    await vi.runAllTimersAsync();
+    const tableCaptionDelta = new Delta([
+      { insert: '\nTable Caption' },
+      { attributes: { 'table-up-caption': { tableId: '1', side: 'bottom' } }, insert: '\n' },
+      { insert: { 'table-up-col': { tableId: '1', colId: '1', full: false, width: 100 } } },
+      { insert: { 'table-up-col': { tableId: '1', colId: '2', full: false, width: 100 } } },
+      { insert: { 'table-up-col': { tableId: '1', colId: '3', full: false, width: 100 } } },
+      { insert: '1' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
+      { insert: '2' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '2', rowspan: 1, colspan: 1 } }, insert: '\n' },
+      { insert: '3' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '3', rowspan: 1, colspan: 1 } }, insert: '\n' },
+      { insert: '4' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
+      { insert: '5' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '2', rowspan: 1, colspan: 1 } }, insert: '\n' },
+      { insert: '6' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '3', rowspan: 1, colspan: 1 } }, insert: '\n' },
+      { insert: '7' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '3', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
+      { insert: '8' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '3', colId: '2', rowspan: 1, colspan: 1 } }, insert: '\n' },
+      { insert: '9' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '3', colId: '3', rowspan: 1, colspan: 1 } }, insert: '\n' },
+      { insert: '\n' },
+    ]);
+    expectDelta(
+      tableCaptionDelta,
+      quill.getContents(),
+    );
+
+    quill.history.undo();
+    await vi.runAllTimersAsync();
+    expectDelta(
+      new Delta([
+        { insert: '\nTable Caption' },
+        { attributes: { 'table-up-caption': { tableId: '1', side: 'top' } }, insert: '\n' },
+        { insert: { 'table-up-col': { tableId: '1', colId: '1', full: false, width: 100 } } },
+        { insert: { 'table-up-col': { tableId: '1', colId: '2', full: false, width: 100 } } },
+        { insert: { 'table-up-col': { tableId: '1', colId: '3', full: false, width: 100 } } },
+        { insert: '1' },
+        { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
+        { insert: '2' },
+        { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '2', rowspan: 1, colspan: 1 } }, insert: '\n' },
+        { insert: '3' },
+        { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '3', rowspan: 1, colspan: 1 } }, insert: '\n' },
+        { insert: '4' },
+        { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
+        { insert: '5' },
+        { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '2', rowspan: 1, colspan: 1 } }, insert: '\n' },
+        { insert: '6' },
+        { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '3', rowspan: 1, colspan: 1 } }, insert: '\n' },
+        { insert: '7' },
+        { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '3', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
+        { insert: '8' },
+        { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '3', colId: '2', rowspan: 1, colspan: 1 } }, insert: '\n' },
+        { insert: '9' },
+        { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '3', colId: '3', rowspan: 1, colspan: 1 } }, insert: '\n' },
+        { insert: '\n' },
+      ]),
+      quill.getContents(),
+    );
+
+    quill.history.redo();
+    await vi.runAllTimersAsync();
+    expectDelta(
+      tableCaptionDelta,
+      quill.getContents(),
+    );
+  });
+});

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

@@ -12,7 +12,7 @@ afterEach(() => {
   vi.useRealTimers();
 });
 
-const createOverridesTable = (html: string, options = true, moduleOptions = {}, register = {}) => {
+function createOverridesTable(html: string, options = true, moduleOptions = {}, register = {}) {
   updateTableConstants({
     blotName: {
       tableCol: 'a-col',
@@ -137,7 +137,7 @@ const createOverridesTable = (html: string, options = true, moduleOptions = {},
     },
   });
   return quill;
-};
+}
 
 describe('test utils', () => {
   it('test findParentBlot', async () => {