quill-table-up 3.0.1 → 3.0.2

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

@@ -1,3 +1,4 @@
+import type { Parchment as TypeParchment } from 'quill';
 import type { TableCaptionFormat, TableMainFormat } from '../../formats';
 import type { ToolOption } from '../../utils';
 import Quill from 'quill';
@@ -1249,37 +1250,119 @@ describe('table undo', () => {
       { insert: '\n' },
     ];
     quill.setContents(originDelta);
+    const mergedDelta = [
+      { 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: 2, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
+      { insert: { video: 'some.com' } },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 2, tag: 'td', wrapTag: 'tbody' } }, insert: '\n\n' },
+      { insert: '3' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '3', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, 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' },
+    ];
 
     const tds = quill.scroll.descendants(TableCellInnerFormat, 0);
     tableModule.mergeCells([tds[0], tds[1]]);
     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: 2, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
-        { insert: { video: 'some.com' } },
-        { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 2, tag: 'td', wrapTag: 'tbody' } }, insert: '\n\n' },
-        { insert: '3' },
-        { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '3', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, 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' },
-      ]),
+      new Delta(mergedDelta),
+    );
+
+    quill.history.undo();
+    await vi.runAllTimersAsync();
+    expectDelta(
+      quill.getContents(),
+      new Delta(originDelta),
+    );
+
+    quill.history.redo();
+    await vi.runAllTimersAsync();
+    expectDelta(
+      quill.getContents(),
+      new Delta(mergedDelta),
+    );
+  });
+
+  it('undo remove cell with BlockEmbed', async () => {
+    const quill = createQuillWithTableModule('<p><br></p>');
+    const originDelta = [
+      { 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: 'tbody' } }, insert: '\n' },
+      { insert: { video: 'some.com' } },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '2', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
+      { insert: '123' },
+      { attributes: { 'code-block': 'plain', 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '2', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
+      { insert: '3' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '3', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, 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' },
+    ];
+    const removedDelta = [
+      { 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: 'tbody' } }, insert: '\n' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '2', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
+      { insert: '3' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '3', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, 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' },
+      { 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' },
+      { 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' },
+    ];
+    quill.setContents(originDelta);
+
+    const tds = quill.scroll.descendants(TableCellInnerFormat, 0);
+    for (const td of [tds[1], tds[4], tds[7]]) {
+      const clearTd = td.clone() as TypeParchment.Parent;
+      clearTd.appendChild(td.scroll.create('block'));
+      td.parent.insertBefore(clearTd, td);
+      td.remove();
+    }
+    await vi.runAllTimersAsync();
+    expectDelta(
+      quill.getContents(),
+      new Delta(removedDelta),
     );
 
     quill.history.undo();
@@ -1288,6 +1371,115 @@ describe('table undo', () => {
       quill.getContents(),
       new Delta(originDelta),
     );
+
+    quill.history.redo();
+    await vi.runAllTimersAsync();
+    expectDelta(
+      quill.getContents(),
+      new Delta(removedDelta),
+    );
+  });
+
+  it('undo paste table', async () => {
+    const quill = createQuillWithTableModule('<p><br></p>');
+    quill.setContents(
+      quill.clipboard.convert({ html: '<div class="ql-table-wrapper" data-table-id="1" contenteditable="false"><table class="ql-table" data-table-id="1" cellpadding="0" cellspacing="0" style="margin-right: auto; width: 363px;"><colgroup data-table-id="1" contenteditable="false"><col width="121px" data-table-id="1" data-col-id="1"><col width="121px" data-table-id="1" data-col-id="2"><col width="121px" data-table-id="1" data-col-id="3"></colgroup><tbody data-table-id="1"><tr class="ql-table-row" data-table-id="1" data-row-id="1" data-wrap-tag="tbody"><td class="ql-table-cell" data-table-id="1" data-row-id="1" data-col-id="1" data-wrap-tag="tbody" rowspan="1" colspan="1"><div class="ql-table-cell-inner" data-table-id="1" data-row-id="1" data-col-id="1" data-rowspan="1" data-colspan="1" data-tag="td" data-wrap-tag="tbody" contenteditable="true"><p>1</p></div></td><td class="ql-table-cell" data-table-id="1" data-row-id="1" data-col-id="2" data-wrap-tag="tbody" rowspan="1" colspan="1"><div class="ql-table-cell-inner" data-table-id="1" data-row-id="1" data-col-id="2" data-rowspan="1" data-colspan="1" data-tag="td" data-wrap-tag="tbody" contenteditable="true"><h1>2</h1></div></td><td class="ql-table-cell" data-table-id="1" data-row-id="1" data-col-id="3" data-wrap-tag="tbody" rowspan="1" colspan="1"><div class="ql-table-cell-inner" data-table-id="1" data-row-id="1" data-col-id="3" data-rowspan="1" data-colspan="1" data-tag="td" data-wrap-tag="tbody" contenteditable="true"><iframe class="ql-video" frameborder="0" allowfullscreen="true" src="some.com"></iframe></div></td></tr><tr class="ql-table-row" data-table-id="1" data-row-id="2" data-wrap-tag="tbody"><td class="ql-table-cell" data-table-id="1" data-row-id="2" data-col-id="1" data-wrap-tag="tbody" rowspan="1" colspan="1"><div class="ql-table-cell-inner" data-table-id="1" data-row-id="2" data-col-id="1" data-rowspan="1" data-colspan="1" data-tag="td" data-wrap-tag="tbody" contenteditable="true"><p>4</p></div></td><td class="ql-table-cell" data-table-id="1" data-row-id="2" data-col-id="2" data-wrap-tag="tbody" rowspan="1" colspan="1"><div class="ql-table-cell-inner" data-table-id="1" data-row-id="2" data-col-id="2" data-rowspan="1" data-colspan="1" data-tag="td" data-wrap-tag="tbody" contenteditable="true"><p>5</p></div></td><td class="ql-table-cell" data-table-id="1" data-row-id="2" data-col-id="3" data-wrap-tag="tbody" rowspan="1" colspan="1"><div class="ql-table-cell-inner" data-table-id="1" data-row-id="2" data-col-id="3" data-rowspan="1" data-colspan="1" data-tag="td" data-wrap-tag="tbody" contenteditable="true"><p>6</p></div></td></tr><tr class="ql-table-row" data-table-id="1" data-row-id="3" data-wrap-tag="tbody"><td class="ql-table-cell" data-table-id="1" data-row-id="3" data-col-id="1" data-wrap-tag="tbody" rowspan="1" colspan="1"><div class="ql-table-cell-inner" data-table-id="1" data-row-id="3" data-col-id="1" data-rowspan="1" data-colspan="1" data-tag="td" data-wrap-tag="tbody" contenteditable="true"><p>7</p></div></td><td class="ql-table-cell" data-table-id="1" data-row-id="3" data-col-id="2" data-wrap-tag="tbody" rowspan="1" colspan="1"><div class="ql-table-cell-inner" data-table-id="1" data-row-id="3" data-col-id="2" data-rowspan="1" data-colspan="1" data-tag="td" data-wrap-tag="tbody" contenteditable="true"><p>8</p></div></td><td class="ql-table-cell" data-table-id="1" data-row-id="3" data-col-id="3" data-wrap-tag="tbody" rowspan="1" colspan="1"><div class="ql-table-cell-inner" data-table-id="1" data-row-id="3" data-col-id="3" data-rowspan="1" data-colspan="1" data-tag="td" data-wrap-tag="tbody" contenteditable="true"><ol><li data-list="ordered"><span class="ql-ui" contenteditable="false"></span>9</li><li data-list="ordered"><span class="ql-ui" contenteditable="false"></span>end</li></ol></div></td></tr></tbody></table></div>' }),
+    );
+    await vi.runAllTimersAsync();
+    quill.setContents(
+      quill.getContents().insert('\n').concat(
+        quill.clipboard.convert({ html: '<div class="ql-table-wrapper" data-table-id="1" contenteditable="false"><table class="ql-table" data-table-id="1" cellpadding="0" cellspacing="0" style="margin-right: auto; width: 363px;"><colgroup data-table-id="1" contenteditable="false"><col width="121px" data-table-id="1" data-col-id="1"><col width="121px" data-table-id="1" data-col-id="2"><col width="121px" data-table-id="1" data-col-id="3"></colgroup><tbody data-table-id="1"><tr class="ql-table-row" data-table-id="1" data-row-id="1" data-wrap-tag="tbody"><td class="ql-table-cell" data-table-id="1" data-row-id="1" data-col-id="1" data-wrap-tag="tbody" rowspan="1" colspan="1"><div class="ql-table-cell-inner" data-table-id="1" data-row-id="1" data-col-id="1" data-rowspan="1" data-colspan="1" data-tag="td" data-wrap-tag="tbody" contenteditable="true"><p>1</p></div></td><td class="ql-table-cell" data-table-id="1" data-row-id="1" data-col-id="2" data-wrap-tag="tbody" rowspan="1" colspan="1"><div class="ql-table-cell-inner" data-table-id="1" data-row-id="1" data-col-id="2" data-rowspan="1" data-colspan="1" data-tag="td" data-wrap-tag="tbody" contenteditable="true"><h1>2</h1></div></td><td class="ql-table-cell" data-table-id="1" data-row-id="1" data-col-id="3" data-wrap-tag="tbody" rowspan="1" colspan="1"><div class="ql-table-cell-inner" data-table-id="1" data-row-id="1" data-col-id="3" data-rowspan="1" data-colspan="1" data-tag="td" data-wrap-tag="tbody" contenteditable="true"><iframe class="ql-video" frameborder="0" allowfullscreen="true" src="some.com"></iframe></div></td></tr><tr class="ql-table-row" data-table-id="1" data-row-id="2" data-wrap-tag="tbody"><td class="ql-table-cell" data-table-id="1" data-row-id="2" data-col-id="1" data-wrap-tag="tbody" rowspan="1" colspan="1"><div class="ql-table-cell-inner" data-table-id="1" data-row-id="2" data-col-id="1" data-rowspan="1" data-colspan="1" data-tag="td" data-wrap-tag="tbody" contenteditable="true"><p>4</p></div></td><td class="ql-table-cell" data-table-id="1" data-row-id="2" data-col-id="2" data-wrap-tag="tbody" rowspan="1" colspan="1"><div class="ql-table-cell-inner" data-table-id="1" data-row-id="2" data-col-id="2" data-rowspan="1" data-colspan="1" data-tag="td" data-wrap-tag="tbody" contenteditable="true"><p>5</p></div></td><td class="ql-table-cell" data-table-id="1" data-row-id="2" data-col-id="3" data-wrap-tag="tbody" rowspan="1" colspan="1"><div class="ql-table-cell-inner" data-table-id="1" data-row-id="2" data-col-id="3" data-rowspan="1" data-colspan="1" data-tag="td" data-wrap-tag="tbody" contenteditable="true"><p>6</p></div></td></tr><tr class="ql-table-row" data-table-id="1" data-row-id="3" data-wrap-tag="tbody"><td class="ql-table-cell" data-table-id="1" data-row-id="3" data-col-id="1" data-wrap-tag="tbody" rowspan="1" colspan="1"><div class="ql-table-cell-inner" data-table-id="1" data-row-id="3" data-col-id="1" data-rowspan="1" data-colspan="1" data-tag="td" data-wrap-tag="tbody" contenteditable="true"><p>7</p></div></td><td class="ql-table-cell" data-table-id="1" data-row-id="3" data-col-id="2" data-wrap-tag="tbody" rowspan="1" colspan="1"><div class="ql-table-cell-inner" data-table-id="1" data-row-id="3" data-col-id="2" data-rowspan="1" data-colspan="1" data-tag="td" data-wrap-tag="tbody" contenteditable="true"><p>8</p></div></td><td class="ql-table-cell" data-table-id="1" data-row-id="3" data-col-id="3" data-wrap-tag="tbody" rowspan="1" colspan="1"><div class="ql-table-cell-inner" data-table-id="1" data-row-id="3" data-col-id="3" data-rowspan="1" data-colspan="1" data-tag="td" data-wrap-tag="tbody" contenteditable="true"><ol><li data-list="ordered"><span class="ql-ui" contenteditable="false"></span>9</li><li data-list="ordered"><span class="ql-ui" contenteditable="false"></span>end</li></ol></div></td></tr></tbody></table></div>' }),
+      ),
+    );
+    await vi.runAllTimersAsync();
+    const pasteTableHTML = `
+      <div>
+        <table cellpadding="0" cellspacing="0" style="margin-right: auto; width: 363px;">
+          ${createTaleColHTML(3, { full: false, width: 121 })}
+          <tbody>
+            <tr>
+              <td>
+                <div><p>1</p></div>
+              </td>
+              <td>
+                <div><h1>2</h1></div>
+              </td>
+              <td>
+                <div>
+                  <iframe src="some.com" frameborder="0" allowfullscreen="true"></iframe>
+                </div>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <div><p>4</p></div>
+              </td>
+              <td>
+                <div><p>5</p></div>
+              </td>
+              <td>
+                <div><p>6</p></div>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <div><p>7</p></div>
+              </td>
+              <td>
+                <div><p>8</p></div>
+              </td>
+              <td>
+                <div>
+                  <ol>
+                    <li data-list="ordered">9</li>
+                    <li data-list="ordered">end</li>
+                  </ol>
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    `;
+    expect(quill.root).toEqualHTML(
+      `
+        <p><br></p>
+        ${pasteTableHTML}
+        <p><br></p>
+        <p><br></p>
+        ${pasteTableHTML}
+        <p><br></p>
+      `,
+      { ignoreAttrs: ['data-wrap-tag', 'data-tag', 'class', 'data-table-id', 'data-row-id', 'data-col-id', 'data-rowspan', 'rowspan', 'data-colspan', 'colspan', 'contenteditable'] },
+    );
+
+    quill.history.undo();
+    await vi.runAllTimersAsync();
+    expect(quill.root).toEqualHTML(
+      `
+        <p><br></p>
+        ${pasteTableHTML}
+        <p><br></p>
+        <p><br></p>
+        ${pasteTableHTML}
+        <p><br></p>
+      `,
+      { ignoreAttrs: ['data-wrap-tag', 'data-tag', 'class', 'data-table-id', 'data-row-id', 'data-col-id', 'data-rowspan', 'rowspan', 'data-colspan', 'colspan', 'contenteditable'] },
+    );
+
+    quill.history.undo();
+    await vi.runAllTimersAsync();
+    expect(quill.root).toEqualHTML(
+      `
+        <p><br></p>
+        ${pasteTableHTML}
+        <p><br></p>
+        <p><br></p>
+        ${pasteTableHTML}
+        <p><br></p>
+      `,
+      { ignoreAttrs: ['data-wrap-tag', 'data-tag', 'class', 'data-table-id', 'data-row-id', 'data-col-id', 'data-rowspan', 'rowspan', 'data-colspan', 'colspan', 'contenteditable'] },
+    );
   });
 });
 

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

@@ -215,7 +215,9 @@ describe('unusual delete', () => {
     await vi.runAllTimersAsync();
     quill.deleteText(0, 16);
     await vi.runAllTimersAsync();
-    expect(quill.root).toEqualHTML(`<p><br></p>`);
+    // After remove all `col`, `fixUnusuaDeletelTable` will remove whole table.
+    // The remaining two rows around
+    expect(quill.root).toEqualHTML(`<p><br></p><p><br></p>`);
   });
 
   it('delete tail from inside table to outside', async () => {

package/src/__tests__/unit/utils.ts

@@ -129,6 +129,7 @@ interface TableCaptionCreatorOptions extends Omit<TableCaptionValue, 'tableId'>
   text: string;
 }
 export const datasetWrapTag = (tag: string = 'tbody') => `data-wrap-tag="${tag}"`;
+export const datasetTag = (tag: string = 'td') => `data-tag="${tag}"`;
 export const datasetTableId = (id: string) => `data-table-id="${id}"`;
 export const datasetFull = (full: boolean) => full ? ' data-full="true"' : '';
 export const datasetAlign = (align: string) => align === 'left' ? '' : ` data-align="${align}"`;
@@ -216,7 +217,7 @@ export function createTableBodyHTML(row: number, col: number, options?: Partial<
           <tr ${datasetTableId(tableId)} data-row-id="${i + 1}" ${datasetWrapTag('tbody')}>
             ${
               new Array(col).fill(0).map((_, j) => `<td rowspan="1" colspan="1" ${datasetTableId(tableId)} data-row-id="${i + 1}" data-col-id="${j + 1}" ${datasetWrapTag('tbody')}>
-                <div data-tag="td" ${datasetTableId(tableId)} data-rowspan="1" data-colspan="1" data-row-id="${i + 1}" data-col-id="${j + 1}" ${datasetWrapTag('tbody')}${contenteditableString(editable)}>
+                <div ${datasetTag('td')} ${datasetTableId(tableId)} data-rowspan="1" data-colspan="1" data-row-id="${i + 1}" data-col-id="${j + 1}" ${datasetWrapTag('tbody')}${contenteditableString(editable)}>
                   <p>
                     ${isEmpty ? '<br>' : i * row + j + 1}
                   </p>

package/src/formats/overrides/block-embed.ts

@@ -18,9 +18,8 @@ export class BlockEmbedOverride extends BlockEmbed {
   }
 
   length() {
-    // because BlockEmbed is the last line of the tableCellInner. need add value in delta, also need add 1 to length
     const formats = bubbleFormats(this);
-    if (formats[blotName.tableCellInner] && (!this.next || this.next.length() <= 1)) {
+    if (formats[blotName.tableCellInner]) {
       return super.length() + 1;
     }
     return super.length();

package/src/formats/overrides/block.ts

@@ -1,5 +1,6 @@
 import type { Parchment as TypeParchment } from 'quill';
 import type TypeBlock from 'quill/blots/block';
+import type { BlockEmbed as TypeBlockEmbed } from 'quill/blots/block';
 import type TypeContainer from 'quill/blots/container';
 import type { TableCellInnerFormat } from '../table-cell-inner-format';
 import Quill from 'quill';
@@ -8,6 +9,7 @@ import { isSameCellValue } from '../utils';
 
 const Parchment = Quill.import('parchment');
 const Block = Quill.import('blots/block') as typeof TypeBlock;
+const BlockEmbed = Quill.import('blots/block/embed') as typeof TypeBlockEmbed;
 const Container = Quill.import('blots/container') as typeof TypeContainer;
 
 export class BlockOverride extends Block {
@@ -36,6 +38,9 @@ export class BlockOverride extends Block {
           // use TableCellInner insertBefore to find the correct position
           currentTableCellInner.insertBefore(replacement, this);
           replacement.appendChild(this);
+          if (currentTableCellInner.children.length === 0) {
+            currentTableCellInner.remove();
+          }
         }
         else {
           // find the first parent not container
@@ -52,8 +57,7 @@ export class BlockOverride extends Block {
           // split current block as a separate "line" and wrap tableCellInner
           const index = this.offset(currentParent);
           const length = this.length();
-          currentParent.split(index + length);
-          const selfParent = currentParent.split(index);
+          const selfParent = currentParent.isolate(index, length);
           if (selfParent && selfParent.parent) {
             selfParent.parent.insertBefore(replacement, selfParent.next);
           }
@@ -75,6 +79,7 @@ export class BlockOverride extends Block {
 
   format(name: string, value: any): void {
     if (name === blotName.tableCellInner && this.parent.statics.blotName === name && !value) {
+      if (this.prev && this.prev instanceof BlockEmbed) return;
       try {
         const cellInner = findParentBlot(this, blotName.tableCellInner);
         cellInner.unwrap();

package/src/formats/table-cell-inner-format.ts

@@ -1,5 +1,6 @@
 import type { Parchment as TypeParchment } from 'quill';
 import type TypeBlock from 'quill/blots/block';
+import type { BlockEmbed as TypeBlockEmbed } from 'quill/blots/block';
 import type TypeScroll from 'quill/blots/scroll';
 import type { TableBodyTag, TableCellValue } from '../utils';
 import type { TableCellFormat } from './table-cell-format';
@@ -10,7 +11,7 @@ import { TableBodyFormat } from './table-body-format';
 import { getValidCellspan, isSameCellValue } from './utils';
 
 const Block = Quill.import('blots/block') as TypeParchment.BlotConstructor;
-const BlockEmbed = Quill.import('blots/block/embed') as TypeParchment.BlotConstructor;
+const BlockEmbed = Quill.import('blots/block/embed') as typeof TypeBlockEmbed;
 
 export class TableCellInnerFormat extends ContainerFormat {
   static blotName = blotName.tableCellInner;
@@ -228,9 +229,10 @@ export class TableCellInnerFormat extends ContainerFormat {
 
   formatAt(index: number, length: number, name: string, value: any) {
     if (this.children.length === 0) {
-      this.appendChild(this.scroll.create(this.statics.defaultChild.blotName));
+      const defaultChild = this.scroll.create(this.statics.defaultChild.blotName);
+      this.appendChild(defaultChild);
       // block min length is 1
-      length += 1;
+      length += defaultChild.length();
     }
     super.formatAt(index, length, name, value);
     // set style for `td`
@@ -247,6 +249,14 @@ export class TableCellInnerFormat extends ContainerFormat {
       this.appendChild(defaultChild);
     }
     super.insertAt(index, value, def);
+    // BlockEmbed will have a \n in delta, this will effect history stack
+    // so when insert a BlockEmbed, if current child length <= 1 then remove it
+    const blot = def == null
+      ? this.scroll.create('text', value)
+      : this.scroll.create(value, def);
+    if (blot instanceof BlockEmbed && child && child.length() <= 1) {
+      child.remove();
+    }
   }
 
   formats(): Record<string, any> {
@@ -339,10 +349,16 @@ export class TableCellInnerFormat extends ContainerFormat {
             cellRef = newCell;
           }
         }
+        if (this.tableId !== cellInnerBlot.tableId) {
+          const selfTableWrapper = findParentBlot(this, blotName.tableWrapper);
+          const index = this.offset(selfTableWrapper);
+          const afterSelfTableWrapper = selfTableWrapper.split(index);
+          return selfTableWrapper.parent.insertBefore(cellInnerBlot, afterSelfTableWrapper);
+        }
         // different rowId. split current row
         if (this.rowId !== cellInnerBlot.rowId) {
           let rowRef: TypeParchment.Blot | null = selfRow;
-          const splitRef = ref || selfCell;
+          const splitRef = ref;
           if (splitRef) {
             const index = splitRef.offset(selfRow);
             rowRef = selfRow.split(index);

package/src/formats/table-col-format.ts

@@ -3,7 +3,6 @@ import type { BlockEmbed as TypeBlockEmbed } from 'quill/blots/block';
 import type { TableColValue } from '../utils';
 import Quill from 'quill';
 import { blotName, findParentBlot, tableUpSize } from '../utils';
-import { TableCellInnerFormat } from './table-cell-inner-format';
 
 const BlockEmbed = Quill.import('blots/block/embed') as typeof TypeBlockEmbed;
 
@@ -144,43 +143,40 @@ export class TableColFormat extends BlockEmbed {
 
   insertAt(index: number, value: string, def?: any): void {
     if (def != null) {
-      super.insertAt(index, value, def);
+      if (value === this.statics.blotName && def.tableId !== this.tableId) {
+        try {
+          const tableWrapperBlot = findParentBlot(this, blotName.tableWrapper);
+          const parentBlot = tableWrapperBlot.split(this.offset(tableWrapperBlot)) as TypeParchment.Parent;
+
+          const blot = this.scroll.create(value, def);
+          parentBlot.parent.insertBefore(blot, parentBlot);
+        }
+        catch {
+          // here should not trigger
+          console.warn('TableCol not in TableColgroup');
+        }
+      }
+      else {
+        super.insertAt(index, value, def);
+      }
       return;
     }
     try {
+      const tableWrapperBlot = findParentBlot(this, blotName.tableWrapper);
+      const parentBlot = tableWrapperBlot.split(this.offset(tableWrapperBlot)) as TypeParchment.Parent;
+
       const lines = value.split('\n');
       const text = lines.pop();
-      const tableColgroupBlot = findParentBlot(this, blotName.tableColgroup);
-      const tableBodyBlot = tableColgroupBlot.next;
-
-      // create tbody
-      let insertBlot: TypeParchment.Parent = this.scroll;
-      // split colgroup
-      const nextBlotRef: TypeParchment.Blot | null = tableColgroupBlot.split(this.offset(tableColgroupBlot));
-      if (tableBodyBlot) {
-        const cellInners = tableBodyBlot.descendants(TableCellInnerFormat);
-        if (cellInners.length > 0) {
-          const cellInnerBlot = cellInners[0];
-          const value = TableCellInnerFormat.formats(cellInnerBlot.domNode);
-          const newTableCellInner = this.scroll.create(blotName.tableCellInner, value) as TableCellInnerFormat;
-          const newTableCell = newTableCellInner.wrap(blotName.tableCell, value);
-          const newTableRow = newTableCell.wrap(blotName.tableRow, value);
-          const newTableBody = newTableRow.wrap(blotName.tableBody, value.tableId);
-          tableColgroupBlot.parent.insertBefore(newTableBody, nextBlotRef);
-
-          insertBlot = newTableCellInner;
-        }
-      }
-
-      for (const line of lines) {
-        const block = this.scroll.create('block');
+      const blocks = lines.map((line) => {
+        const block = this.scroll.create('block') as TypeParchment.ParentBlot;
         block.insertAt(0, line);
-        insertBlot.appendChild(block);
+        return block;
+      });
+      for (const block of blocks) {
+        parentBlot.parent.insertBefore(block, parentBlot);
       }
       if (text) {
-        const lineBlock = this.scroll.create('block') as TypeParchment.ParentBlot;
-        lineBlock.appendChild(this.scroll.create('text', text));
-        insertBlot.appendChild(lineBlock);
+        parentBlot.parent.insertBefore(this.scroll.create('text', text), parentBlot);
       }
     }
     catch {

package/src/formats/table-wrapper-format.ts

@@ -55,11 +55,19 @@ export class TableWrapperFormat extends ContainerFormat {
     );
   }
 
+  optimize(context: Record<string, any>) {
+    if (this.length() === 0) {
+      this.remove();
+      return;
+    }
+    super.optimize(context);
+  }
+
   deleteAt(index: number, length: number) {
     super.deleteAt(index, length);
     const tableBodys = this.descendants(TableBodyFormat);
     const tableColgroups = this.descendants(TableColgroupFormat);
-    if (tableBodys.length === 0 || tableColgroups.length === 0) {
+    if (tableBodys.length === 0 && tableColgroups.length === 0) {
       this.remove();
     }
   }

package/src/modules/table-selection.ts

@@ -108,7 +108,10 @@ export class TableSelection extends TableDomSelector {
       }
     }
     for (const td of this.selectedTds) {
-      td.deleteAt(0, td.length() - 1);
+      const clearTd = td.clone() as TypeParchment.Parent;
+      clearTd.appendChild(td.scroll.create('block'));
+      td.parent.insertBefore(clearTd, td);
+      td.remove();
     }
   };
 

package/src/node_modules/.vite/vitest/da39a3ee5e6b4b0d3255bfef95601890afd80709/results.json

@@ -1 +1 @@
-{"version":"3.2.3","results":[[":__tests__/unit/utils.test-d.ts",{"duration":0,"failed":false}],[":__tests__/unit/table-clipboard.test.ts",{"duration":5040.086000000001,"failed":false}],[":__tests__/unit/table-redo-undo.test.ts",{"duration":9514.4945,"failed":false}],[":__tests__/unit/table-hack.test.ts",{"duration":1992.2028000000005,"failed":false}],[":__tests__/unit/table-cell-merge.test.ts",{"duration":2552.8873,"failed":false}],[":__tests__/unit/table-insert.test.ts",{"duration":4285.707699999999,"failed":false}],[":__tests__/unit/table-blots.test.ts",{"duration":1592.2781,"failed":false}],[":__tests__/unit/utils.test.ts",{"duration":528.3724000000002,"failed":false}],[":__tests__/unit/table-caption.test.ts",{"duration":854.4884999999999,"failed":false}],[":__tests__/unit/table-remove.test.ts",{"duration":1868.6178999999997,"failed":false}]]}
+{"version":"3.2.3","results":[[":__tests__/unit/utils.test-d.ts",{"duration":0,"failed":false}],[":__tests__/unit/table-clipboard.test.ts",{"duration":0,"failed":false}],[":__tests__/unit/table-redo-undo.test.ts",{"duration":0,"failed":false}],[":__tests__/unit/table-hack.test.ts",{"duration":0,"failed":false}],[":__tests__/unit/table-cell-merge.test.ts",{"duration":0,"failed":false}],[":__tests__/unit/table-insert.test.ts",{"duration":0,"failed":false}],[":__tests__/unit/table-blots.test.ts",{"duration":0,"failed":false}],[":__tests__/unit/utils.test.ts",{"duration":0,"failed":false}],[":__tests__/unit/table-caption.test.ts",{"duration":834.3326999999999,"failed":false}],[":__tests__/unit/table-remove.test.ts",{"duration":1954.0650999999998,"failed":false}]]}

package/src/table-up.ts

@@ -244,10 +244,8 @@ export class TableUp {
       const blotName = name.split('formats/')[1];
       return name.startsWith('formats/')
         && !excludeFormat.has(blotName)
-        && !isSubclassOf(blot, Parchment.Attributor)
         && (isSubclassOf(blot, Block) || isSubclassOf(blot, BlockEmbed));
-    },
-    );
+    });
     const overrides = overrideFormats.reduce((pre, [name, blot]) => {
       const extendsClass = isSubclassOf(blot, BlockEmbed) ? BlockEmbedOverride : BlockOverride;
       pre[name] = class extends mixinClass(blot, [extendsClass]) {
@@ -847,8 +845,12 @@ export class TableUp {
 
   // handle unusual delete cell
   fixUnusuaDeletelTable(tableBlot: TableMainFormat) {
-    const bodys = tableBlot.getBodys();
     const tableColIds = tableBlot.getColIds();
+    if (tableColIds.length === 0) {
+      tableBlot.remove();
+      return;
+    }
+    const bodys = tableBlot.getBodys();
     const tableId = tableBlot.tableId;
     for (const body of bodys) {
     // calculate all cells in body
@@ -857,7 +859,6 @@ export class TableUp {
         body.remove();
         continue;
       }
-      if (tableColIds.length === 0) continue;
       // append by col
       const cellSpanMap = new Array(trBlots.length).fill(0).map(() => new Array(tableColIds.length).fill(false));
       for (const [indexTr, tr] of trBlots.entries()) {

package/src/utils/blot-helper.ts

@@ -101,5 +101,5 @@ export function mixinClass<
   return targetClass;
 }
 export function isSubclassOf(childClass: any, parentClass: any): boolean {
-  return childClass.prototype instanceof parentClass;
+  return childClass.prototype && childClass.prototype instanceof parentClass;
 }