quill-table-up 2.3.0 → 2.4.0

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

@@ -358,12 +358,12 @@ describe('clipboard cell structure', () => {
             <tbody>
               <tr>
                 <td rowspan="1" colspan="1" style="border-color: transparent;">
-                  <div data-style="border-color: transparent">
+                  <div data-style="border-color: transparent;">
                     <p><strong>Col 1</strong></p>
                   </div>
                 </td>
                 <td rowspan="1" colspan="1" style="border-color: transparent;">
-                  <div data-style="border-color: transparent">
+                  <div data-style="border-color: transparent;">
                     <p class="ql-align-right"><strong>Data 1</strong></p>
                   </div>
                 </td>
@@ -394,12 +394,12 @@ describe('clipboard cell structure', () => {
             <tbody>
               <tr>
                 <td rowspan="1" colspan="1" style="border-color: transparent;">
-                  <div data-style="border-color: transparent">
+                  <div data-style="border-color: transparent;">
                     <p><br></p>
                   </div>
                 </td>
                 <td rowspan="1" colspan="1" style="border-bottom-color: transparent;">
-                  <div data-style="border-bottom-color: transparent">
+                  <div data-style="border-bottom-color: transparent;">
                     <p><br></p>
                   </div>
                 </td>
@@ -411,12 +411,12 @@ describe('clipboard cell structure', () => {
               </tr>
               </tr>
                 <td rowspan="1" colspan="1" style="border-right-color: transparent;">
-                  <div data-style="border-right-color: transparent">
+                  <div data-style="border-right-color: transparent;">
                     <p><br></p>
                   </div>
                 </td>
                 <td rowspan="1" colspan="1" style="border-color: transparent;">
-                  <div data-style="border-color: transparent">
+                  <div data-style="border-color: transparent;">
                     <p><br></p>
                   </div>
                 </td>
@@ -492,7 +492,7 @@ describe('clipboard cell structure', () => {
                   </div>
                 </td>
                 <td rowspan="1" colspan="1" style="background-color: transparent;">
-                  <div data-style="background-color: transparent">
+                  <div data-style="background-color: transparent;">
                     <p><br></p>
                   </div>
                 </td>
@@ -546,12 +546,12 @@ describe('clipboard cell structure', () => {
             <tbody>
               <tr>
                 <td rowspan="1" colspan="1" style="height: 73px;">
-                  <div data-style="height: 73px">
+                  <div data-style="height: 73px;">
                     <p><br></p>
                   </div>
                 </td>
                 <td rowspan="1" colspan="1" style="height: 73px;">
-                  <div data-style="height: 73px">
+                  <div data-style="height: 73px;">
                     <p><br></p>
                   </div>
                 </td>
@@ -811,7 +811,7 @@ describe('clipboard cell structure', () => {
             <tbody>
               <tr>
                 <td colspan="1" rowspan="1" style="background-color: rgb(41, 114, 244);">
-                  <div data-style="background-color: rgb(41, 114, 244)">
+                  <div data-style="background-color: rgb(41, 114, 244);">
                     <p><span style="background-color: rgb(230, 0, 0);">123</span>456<span style="background-color: rgb(0, 138, 0);">789</span></p>
                     <h1>h<span style="background-color: rgb(0, 0, 0);">ea</span>d</h1>
                   </div>
@@ -837,11 +837,11 @@ describe('clipboard cell structure', () => {
         { attributes: { background: '#e60000' }, insert: '123' },
         { insert: '456' },
         { attributes: { background: '#008a00' }, insert: '789' },
-        { attributes: { 'table-up-cell-inner': { rowspan: 1, colspan: 1, style: 'background-color: rgb(41, 114, 244)' } }, insert: '\n' },
+        { attributes: { 'table-up-cell-inner': { rowspan: 1, colspan: 1, style: 'background-color: rgb(41, 114, 244);' } }, insert: '\n' },
         { insert: 'h' },
         { attributes: { background: '#000000' }, insert: 'ea' },
         { insert: 'd' },
-        { attributes: { 'header': 1, 'table-up-cell-inner': { rowspan: 1, colspan: 1, style: 'background-color: rgb(41, 114, 244)' } }, insert: '\n' },
+        { attributes: { 'header': 1, 'table-up-cell-inner': { rowspan: 1, colspan: 1, style: 'background-color: rgb(41, 114, 244);' } }, insert: '\n' },
         { insert: '2' },
         { attributes: { 'table-up-cell-inner': { rowspan: 1, colspan: 1 } }, insert: '\n' },
         { insert: '\n' },
@@ -868,7 +868,7 @@ describe('clipboard cell structure', () => {
             <tbody>
               <tr>
                 <td colspan="1" rowspan="1" style="background-color: rgb(0, 102, 204);">
-                  <div data-style="background-color: rgb(0, 102, 204)">
+                  <div data-style="background-color: rgb(0, 102, 204);">
                     <p>123</p>
                   </div>
                 </td>
@@ -1016,7 +1016,7 @@ describe('clipboard cell structure', () => {
   });
 
   it('clipboard convert col with span attribute', async () => {
-    const quill = createQuillWithTableModule(`<p><br></p>`);
+    const quill = createQuillWithTableModule(`<p><br></p>`, { autoMergeCell: false });
     quill.setContents(
       quill.clipboard.convert({
         html: `
@@ -1060,29 +1060,45 @@ describe('clipboard cell structure', () => {
             ${createTaleColHTML(4, { full: false, width: 63 })}
             <tbody>
               <tr>
-                <td rowspan="3" colspan="2">
-                  <div><p>1</p></div>
+                <td rowspan="6" colspan="2" data-empty-row="length:1">
+                  <div data-empty-row="length:1"><p>1</p></div>
                 </td>
-                <td rowspan="1" colspan="2">
-                  <div><p>2</p></div>
+                <td rowspan="2" colspan="2" data-empty-row="length:1">
+                  <div data-empty-row="length:1"><p>2</p></div>
                 </td>
               </tr>
+              <tr></tr>
               <tr>
-                <td rowspan="1" colspan="2">
-                  <div><p>3</p></div>
+                <td rowspan="2" colspan="2" data-empty-row="length:1">
+                  <div data-empty-row="length:1"><p>3</p></div>
                 </td>
               </tr>
+              <tr></tr>
               <tr>
-                <td rowspan="1" colspan="2">
-                  <div><p>4</p></div>
+                <td rowspan="2" colspan="2" data-empty-row="length:1">
+                  <div data-empty-row="length:1"><p>4</p></div>
                 </td>
               </tr>
+              <tr></tr>
             </tbody>
           </table>
         </div>
         <p><br></p>
       `,
-      { ignoreAttrs: ['class', 'data-table-id', 'data-row-id', 'data-col-id', 'data-rowspan', 'data-colspan', 'data-style', 'style', 'contenteditable'] },
+      {
+        ignoreAttrs: ['class', 'data-table-id', 'data-row-id', 'data-col-id', 'data-rowspan', 'data-colspan', 'data-style', 'style', 'contenteditable'],
+        replaceAttrs: {
+          'data-empty-row': function (value: string) {
+            try {
+              const emptyRow = JSON.parse(value);
+              return `length:${emptyRow.length}`;
+            }
+            catch {
+              return value;
+            }
+          },
+        },
+      },
     );
     expectDelta(
       new Delta([
@@ -1092,13 +1108,13 @@ describe('clipboard cell structure', () => {
         { insert: { 'table-up-col': { full: false, width: 63 } } },
         { insert: { 'table-up-col': { full: false, width: 63 } } },
         { insert: '1' },
-        { attributes: { 'table-up-cell-inner': { rowspan: 3, colspan: 2 } }, insert: '\n' },
+        { attributes: { 'table-up-cell-inner': { rowspan: 6, colspan: 2 } }, insert: '\n' },
         { insert: '2' },
-        { attributes: { 'table-up-cell-inner': { rowspan: 1, colspan: 2 } }, insert: '\n' },
+        { attributes: { 'table-up-cell-inner': { rowspan: 2, colspan: 2 } }, insert: '\n' },
         { insert: '3' },
-        { attributes: { 'table-up-cell-inner': { rowspan: 1, colspan: 2 } }, insert: '\n' },
+        { attributes: { 'table-up-cell-inner': { rowspan: 2, colspan: 2 } }, insert: '\n' },
         { insert: '4' },
-        { attributes: { 'table-up-cell-inner': { rowspan: 1, colspan: 2 } }, insert: '\n' },
+        { attributes: { 'table-up-cell-inner': { rowspan: 2, colspan: 2 } }, insert: '\n' },
         { insert: '\n' },
       ]),
       quill.getContents(),
@@ -1198,7 +1214,7 @@ describe('clipboard content format', () => {
   it('should convert html video correctly', async () => {
     const quill = createQuillWithTableModule(`<p><br></p>`);
     quill.setContents(
-      quill.clipboard.convert({ html: '<div class="ql-table-wrapper" data-table-id="1"><table data-table-id="1" data-full="true" class="ql-table" cellpadding="0" cellspacing="0" style="margin-right: auto;"><colgroup data-table-id="1" data-full="true" contenteditable="false"><col width="100%" data-full="true" data-table-id="1" data-col-id="1"></colgroup><tbody data-table-id="1"><tr class="ql-table-row" data-table-id="1" data-row-id="1"><td class="ql-table-cell" data-table-id="1" data-row-id="1" data-col-id="1" 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"><iframe class="ql-video" frameborder="0" allowfullscreen="true" src="http://127.0.0.1:5500/docs/index.html"></iframe><p><br></p></div></td></tr></tbody></table></div>' }),
+      quill.clipboard.convert({ html: '<div class="ql-table-wrapper" data-table-id="1"><table data-table-id="1" data-full="true" class="ql-table" cellpadding="0" cellspacing="0" style="margin-right: auto;"><colgroup data-table-id="1" data-full="true" contenteditable="false"><col width="100%" data-full="true" data-table-id="1" data-col-id="1"></colgroup><tbody data-table-id="1"><tr class="ql-table-row" data-table-id="1" data-row-id="1"><td class="ql-table-cell" data-table-id="1" data-row-id="1" data-col-id="1" 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"><iframe class="ql-video" frameborder="0" allowfullscreen="true" src="http://127.0.0.1:5500/docs/index.html"></iframe></div></td></tr></tbody></table></div>' }),
     );
     await vi.runAllTimersAsync();
 
@@ -1379,14 +1395,14 @@ describe('clipboard content format', () => {
             <tbody>
               <tr>
                 <td rowspan="1" colspan="1" style="height: 90px; background-color: rgb(94, 255, 0);">
-                  <div data-style="height: 90px;background-color: rgb(94, 255, 0)">
+                  <div data-style="height: 90px; background-color: rgb(94, 255, 0);">
                     <p>
                       <span style="background-color: rgb(0, 102, 204); color: rgb(230, 0, 0);">qwf</span>
                     </p>
                   </div>
                 </td>
                 <td rowspan="2" colspan="1" style="height: 90px;">
-                  <div data-style="height: 90px">
+                  <div data-style="height: 90px;">
                     <blockquote><code style="color: rgb(230, 0, 0); background-color: rgb(0, 102, 204);">qwfqwfw</code></blockquote>
                     <ol>
                       <li data-list="bullet">
@@ -1397,7 +1413,7 @@ describe('clipboard content format', () => {
                   </div>
                 </td>
                 <td rowspan="1" colspan="1" style="height: 90px;">
-                  <div data-style="height: 90px">
+                  <div data-style="height: 90px;">
                     <p>
                       <span style="background-color: rgb(0, 102, 204);">qwg</span>
                     </p>
@@ -1435,7 +1451,9 @@ describe('clipboard content format', () => {
         </div>
         <p><br></p>
       `,
-      { ignoreAttrs: ['class', 'data-table-id', 'data-row-id', 'data-col-id', 'data-rowspan', 'data-colspan', 'contenteditable'] },
+      {
+        ignoreAttrs: ['class', 'data-table-id', 'data-row-id', 'data-col-id', 'data-rowspan', 'data-colspan', 'contenteditable'],
+      },
     );
   });
 
@@ -1477,17 +1495,17 @@ describe('clipboard content format', () => {
             <tbody>
               <tr>
                 <td style="background-color: rgb(237, 238, 242);">
-                  <div data-style="background-color: #edeef2;">
+                  <div data-style="background-color: rgb(237, 238, 242);">
                     <p><span style="background-color: rgb(237, 238, 242);">1</span></p>
                   </div>
                 </td>
                 <td style="background-color: rgb(237, 238, 242);">
-                  <div data-style="background-color: #edeef2;">
+                  <div data-style="background-color: rgb(237, 238, 242);">
                     <p><span style="background-color: rgb(237, 238, 242);">2</span></p>
                   </div>
                 </td>
                 <td style="background-color: rgb(237, 238, 242);">
-                  <div data-style="background-color: #edeef2;">
+                  <div data-style="background-color: rgb(237, 238, 242);">
                     <p><span style="background-color: rgb(237, 238, 242);">3</span></p>
                   </div>
                 </td>
@@ -1511,17 +1529,17 @@ describe('clipboard content format', () => {
               </tr>
               <tr>
                 <td style="background-color: rgb(237, 238, 242);">
-                  <div data-style="background-color: #edeef2;">
+                  <div data-style="background-color: rgb(237, 238, 242);">
                     <p><span style="background-color: rgb(237, 238, 242);">7</span></p>
                   </div>
                 </td>
                 <td style="background-color: rgb(237, 238, 242);">
-                  <div data-style="background-color: #edeef2;">
+                  <div data-style="background-color: rgb(237, 238, 242);">
                     <p><span style="background-color: rgb(237, 238, 242);">8</span></p>
                   </div>
                 </td>
                 <td style="background-color: rgb(237, 238, 242);">
-                  <div data-style="background-color: #edeef2;">
+                  <div data-style="background-color: rgb(237, 238, 242);">
                     <p><span style="background-color: rgb(237, 238, 242);">9</span></p>
                   </div>
                 </td>
@@ -1540,11 +1558,11 @@ describe('clipboard content format', () => {
         { insert: { 'table-up-col': { full: false, width: 100 } } },
         { insert: { 'table-up-col': { full: false, width: 100 } } },
         { attributes: { background: '#edeef2' }, insert: '1' },
-        { attributes: { 'table-up-cell-inner': { rowspan: 1, colspan: 1, style: 'background-color: #edeef2;' } }, insert: '\n' },
+        { attributes: { 'table-up-cell-inner': { rowspan: 1, colspan: 1, style: 'background-color: rgb(237, 238, 242);' } }, insert: '\n' },
         { attributes: { background: '#edeef2' }, insert: '2' },
-        { attributes: { 'table-up-cell-inner': { rowspan: 1, colspan: 1, style: 'background-color: #edeef2;' } }, insert: '\n' },
+        { attributes: { 'table-up-cell-inner': { rowspan: 1, colspan: 1, style: 'background-color: rgb(237, 238, 242);' } }, insert: '\n' },
         { attributes: { background: '#edeef2' }, insert: '3' },
-        { attributes: { 'table-up-cell-inner': { rowspan: 1, colspan: 1, style: 'background-color: #edeef2;' } }, insert: '\n' },
+        { attributes: { 'table-up-cell-inner': { rowspan: 1, colspan: 1, style: 'background-color: rgb(237, 238, 242);' } }, insert: '\n' },
         { insert: '4' },
         { attributes: { 'table-up-cell-inner': { rowspan: 1, colspan: 1 } }, insert: '\n' },
         { insert: '5' },
@@ -1552,11 +1570,11 @@ describe('clipboard content format', () => {
         { insert: '6' },
         { attributes: { 'table-up-cell-inner': { rowspan: 1, colspan: 1 } }, insert: '\n' },
         { attributes: { background: '#edeef2' }, insert: '7' },
-        { attributes: { 'table-up-cell-inner': { rowspan: 1, colspan: 1, style: 'background-color: #edeef2;' } }, insert: '\n' },
+        { attributes: { 'table-up-cell-inner': { rowspan: 1, colspan: 1, style: 'background-color: rgb(237, 238, 242);' } }, insert: '\n' },
         { attributes: { background: '#edeef2' }, insert: '8' },
-        { attributes: { 'table-up-cell-inner': { rowspan: 1, colspan: 1, style: 'background-color: #edeef2;' } }, insert: '\n' },
+        { attributes: { 'table-up-cell-inner': { rowspan: 1, colspan: 1, style: 'background-color: rgb(237, 238, 242);' } }, insert: '\n' },
         { attributes: { background: '#edeef2' }, insert: '9' },
-        { attributes: { 'table-up-cell-inner': { rowspan: 1, colspan: 1, style: 'background-color: #edeef2;' } }, insert: '\n' },
+        { attributes: { 'table-up-cell-inner': { rowspan: 1, colspan: 1, style: 'background-color: rgb(237, 238, 242);' } }, insert: '\n' },
         { insert: '\n' },
       ]),
       quill.getContents(),

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

@@ -217,14 +217,13 @@ describe('insert block embed blot', () => {
         <div>
           <table cellpadding="0" cellspacing="0" data-full="true">
             <colgroup data-full="true">
-            <col width="100%" data-full="true" />
+              <col width="100%" data-full="true" />
             </colgroup>
             <tbody>
               <tr>
                 <td rowspan="1" colspan="1">
                   <div>
                     <iframe src="https://quilljs.com/" frameborder="0" allowfullscreen="true"></iframe>
-                    <p><br></p>
                   </div>
                 </td>
               </tr>
@@ -236,6 +235,44 @@ describe('insert block embed blot', () => {
       { ignoreAttrs: ['class', 'style', 'data-table-id', 'data-row-id', 'data-col-id', 'data-rowspan', 'data-colspan', 'contenteditable'] },
     );
   });
+
+  it('BlockEmbed should at correct position in cell', async () => {
+    const quill = createQuillWithTableModule(`<p><br></p>`);
+    quill.setContents([
+      { insert: '\n' },
+      { insert: { 'table-up-col': { tableId: '2l7117zsa6r', colId: 'd962746f4w8', full: false, width: 100 } } },
+      { insert: '1' },
+      { attributes: { 'table-up-cell-inner': { tableId: '2l7117zsa6r', rowId: 'a9r52q9z4l', colId: 'd962746f4w8', rowspan: 1, colspan: 1 } }, insert: '\n' },
+      { insert: { video: 'http://localhost:5500/docs/index.html' } },
+      { insert: 'bbb' },
+      { attributes: { 'table-up-cell-inner': { tableId: '2l7117zsa6r', rowId: 'a9r52q9z4l', colId: 'd962746f4w8', rowspan: 1, colspan: 1 } }, insert: '\n' },
+      { insert: '\n' },
+    ]);
+    await vi.runAllTimersAsync();
+    expect(quill.root).toEqualHTML(
+      `
+        <p><br></p>
+        <div>
+          <table cellpadding="0" cellspacing="0">
+            ${createTaleColHTML(1, { full: false, width: 100 })}
+            <tbody>
+              <tr>
+                <td rowspan="1" colspan="1">
+                  <div>
+                    <p>1</p>
+                    <iframe frameborder="0" allowfullscreen="true" src="http://localhost:5500/docs/index.html"></iframe>
+                    <p>bbb</p>
+                  </div>
+                </td
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <p><br></p>
+      `,
+      { ignoreAttrs: ['class', 'style', 'data-table-id', 'data-row-id', 'data-col-id', 'data-rowspan', 'data-colspan', 'contenteditable'] },
+    );
+  });
 });
 
 describe('set contents', () => {

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

@@ -1188,6 +1188,75 @@ describe('undo cell attribute', () => {
       { ignoreAttrs: ['class', 'style', 'data-table-id', 'data-row-id', 'data-col-id', 'data-rowspan', 'data-colspan', 'contenteditable'] },
     );
   });
+
+  it('undo table style with Container in cell', async () => {
+    const quill = await createTable(3, 3);
+    quill.setContents([
+      { insert: '\n' },
+      { insert: { 'table-up-col': { tableId: 'wm7stgtxmn', colId: 'vm3doxdsmq', full: false, width: 100 } } },
+      { insert: { 'table-up-col': { tableId: 'wm7stgtxmn', colId: 'k4ele1u8u4n', full: false, width: 100 } } },
+      { insert: '1' },
+      { attributes: { 'list': 'unchecked', 'table-up-cell-inner': { tableId: 'wm7stgtxmn', rowId: 'xn7r03opjc', colId: 'vm3doxdsmq', rowspan: 1, colspan: 1 } }, insert: '\n\n' },
+      { attributes: { 'table-up-cell-inner': { tableId: 'wm7stgtxmn', rowId: 'xn7r03opjc', colId: 'k4ele1u8u4n', rowspan: 1, colspan: 1 } }, insert: '\n' },
+      { attributes: { 'table-up-cell-inner': { tableId: 'wm7stgtxmn', rowId: 'nqpe206omjn', colId: 'vm3doxdsmq', rowspan: 1, colspan: 1 } }, insert: '\n' },
+      { attributes: { 'table-up-cell-inner': { tableId: 'wm7stgtxmn', rowId: 'nqpe206omjn', colId: 'k4ele1u8u4n', rowspan: 1, colspan: 1 } }, insert: '\n' },
+      { insert: '\n' },
+    ]);
+    await vi.runAllTimersAsync();
+
+    const tableModule = quill.getModule(TableUp.moduleName) as TableUp;
+    const tds = quill.scroll.descendants(TableCellInnerFormat, 0);
+    tableModule.setCellAttrs([tds[0]], 'background-color', 'rgb(0, 163, 245)', true);
+    await vi.runAllTimersAsync();
+    expectDelta(
+      new Delta([
+        { insert: '\n' },
+        { insert: { 'table-up-col': { tableId: 'wm7stgtxmn', colId: 'vm3doxdsmq', full: false, width: 100 } } },
+        { insert: { 'table-up-col': { tableId: 'wm7stgtxmn', colId: 'k4ele1u8u4n', full: false, width: 100 } } },
+        { insert: '1' },
+        { attributes: { 'list': 'unchecked', 'table-up-cell-inner': { tableId: 'wm7stgtxmn', rowId: 'xn7r03opjc', colId: 'vm3doxdsmq', rowspan: 1, colspan: 1, style: 'background-color: rgb(0, 163, 245);' } }, insert: '\n\n' },
+        { attributes: { 'table-up-cell-inner': { tableId: 'wm7stgtxmn', rowId: 'xn7r03opjc', colId: 'k4ele1u8u4n', rowspan: 1, colspan: 1 } }, insert: '\n' },
+        { attributes: { 'table-up-cell-inner': { tableId: 'wm7stgtxmn', rowId: 'nqpe206omjn', colId: 'vm3doxdsmq', rowspan: 1, colspan: 1 } }, insert: '\n' },
+        { attributes: { 'table-up-cell-inner': { tableId: 'wm7stgtxmn', rowId: 'nqpe206omjn', colId: 'k4ele1u8u4n', rowspan: 1, colspan: 1 } }, insert: '\n' },
+        { insert: '\n' },
+      ]),
+      quill.getContents(),
+    );
+
+    quill.history.undo();
+    await vi.runAllTimersAsync();
+    expectDelta(
+      new Delta([
+        { insert: '\n' },
+        { insert: { 'table-up-col': { tableId: 'wm7stgtxmn', colId: 'vm3doxdsmq', full: false, width: 100 } } },
+        { insert: { 'table-up-col': { tableId: 'wm7stgtxmn', colId: 'k4ele1u8u4n', full: false, width: 100 } } },
+        { insert: '1' },
+        { attributes: { 'list': 'unchecked', 'table-up-cell-inner': { tableId: 'wm7stgtxmn', rowId: 'xn7r03opjc', colId: 'vm3doxdsmq', rowspan: 1, colspan: 1 } }, insert: '\n\n' },
+        { attributes: { 'table-up-cell-inner': { tableId: 'wm7stgtxmn', rowId: 'xn7r03opjc', colId: 'k4ele1u8u4n', rowspan: 1, colspan: 1 } }, insert: '\n' },
+        { attributes: { 'table-up-cell-inner': { tableId: 'wm7stgtxmn', rowId: 'nqpe206omjn', colId: 'vm3doxdsmq', rowspan: 1, colspan: 1 } }, insert: '\n' },
+        { attributes: { 'table-up-cell-inner': { tableId: 'wm7stgtxmn', rowId: 'nqpe206omjn', colId: 'k4ele1u8u4n', rowspan: 1, colspan: 1 } }, insert: '\n' },
+        { insert: '\n' },
+      ]),
+      quill.getContents(),
+    );
+
+    quill.history.redo();
+    await vi.runAllTimersAsync();
+    expectDelta(
+      new Delta([
+        { insert: '\n' },
+        { insert: { 'table-up-col': { tableId: 'wm7stgtxmn', colId: 'vm3doxdsmq', full: false, width: 100 } } },
+        { insert: { 'table-up-col': { tableId: 'wm7stgtxmn', colId: 'k4ele1u8u4n', full: false, width: 100 } } },
+        { insert: '1' },
+        { attributes: { 'list': 'unchecked', 'table-up-cell-inner': { tableId: 'wm7stgtxmn', rowId: 'xn7r03opjc', colId: 'vm3doxdsmq', rowspan: 1, colspan: 1, style: 'background-color: rgb(0, 163, 245);' } }, insert: '\n\n' },
+        { attributes: { 'table-up-cell-inner': { tableId: 'wm7stgtxmn', rowId: 'xn7r03opjc', colId: 'k4ele1u8u4n', rowspan: 1, colspan: 1 } }, insert: '\n' },
+        { attributes: { 'table-up-cell-inner': { tableId: 'wm7stgtxmn', rowId: 'nqpe206omjn', colId: 'vm3doxdsmq', rowspan: 1, colspan: 1 } }, insert: '\n' },
+        { attributes: { 'table-up-cell-inner': { tableId: 'wm7stgtxmn', rowId: 'nqpe206omjn', colId: 'k4ele1u8u4n', rowspan: 1, colspan: 1 } }, insert: '\n' },
+        { insert: '\n' },
+      ]),
+      quill.getContents(),
+    );
+  });
 });
 
 describe('table caption', () => {

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

@@ -241,11 +241,13 @@ describe('unusual delete', () => {
         <div>
           <table cellpadding="0" cellspacing="0" data-full="true">
             <colgroup data-full="true">
-              ${new Array(5).fill(`<col width="20%" data-full="true" />`).join('\n')}
+              <col width="60%" data-full="true" />
+              <col width="20%" data-full="true" />
+              <col width="20%" data-full="true" />
             </colgroup>
             <tbody>
               <tr>
-               <td rowspan="3" colspan="3">
+                <td rowspan="3" colspan="1">
                   <div>
                     <p><br></p>
                     <p><br></p>

package/src/__tests__/unit/utils.ts

@@ -53,16 +53,34 @@ export function createQuillWithTableModule(html: string, tableOptions: Partial<T
 }
 
 expect.extend({
-  toEqualHTML(received, expected, options = {}) {
-    const ignoreAttrs = options?.ignoreAttrs ?? [];
+  toEqualHTML(
+    received,
+    expected,
+    {
+      ignoreAttrs = [],
+      replaceAttrs = {},
+    }: {
+      ignoreAttrs?: string[];
+      replaceAttrs?: Record<string, (attrValue: string) => string>;
+    } = {},
+  ) {
     const receivedDOM = document.createElement('div');
     const expectedDOM = document.createElement('div');
     receivedDOM.innerHTML = normalizeHTML(
       typeof received === 'string' ? received : received.innerHTML,
     );
     expectedDOM.innerHTML = normalizeHTML(expected);
-    const doms = [receivedDOM, expectedDOM];
 
+    for (const [attr, handler] of Object.entries(replaceAttrs)) {
+      for (const node of Array.from(receivedDOM.querySelectorAll(`[${attr}]`))) {
+        const attrValue = node.getAttribute(attr);
+        if (attrValue) {
+          node.setAttribute(attr, handler(attrValue));
+        }
+      }
+    }
+
+    const doms = [receivedDOM, expectedDOM];
     for (const dom of doms) {
       for (const node of Array.from(dom.querySelectorAll('.ql-ui'))) {
         node.remove();
@@ -86,7 +104,7 @@ expect.extend({
         `HTMLs don't match.\n${this.utils.diff(
           this.utils.stringify(receivedDOM),
           this.utils.stringify(expectedDOM),
-        )}`,
+        )}\n`,
     };
   },
 });

package/src/__tests__/unit/vitest.d.ts

@@ -2,7 +2,10 @@
 import type { Assertion, AsymmetricMatchersContaining } from 'vitest';
 
 interface CustomMatchers<R = unknown> {
-  toEqualHTML: (html: string, options?: { ignoreAttrs?: string[] }) => R;
+  toEqualHTML: (html: string, options?: {
+    ignoreAttrs?: string[];
+    replaceAttrs?: Record<string, (attrValue: string) => string>;
+  }) => R;
 }
 
 declare module 'vitest' {

package/src/formats/index.ts

@@ -16,6 +16,12 @@ export * from './table-wrapper-format';
 
 export function getTableMainRect(tableMainBlot: TableMainFormat) {
   const [tableBodyBlot] = findChildBlot(tableMainBlot, TableBodyFormat);
+  if (!tableBodyBlot) {
+    return {
+      body: null,
+      rect: null,
+    };
+  }
   return {
     body: tableBodyBlot,
     rect: tableBodyBlot.domNode.getBoundingClientRect(),

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

@@ -0,0 +1,54 @@
+import type { Parchment as TypeParchment } from 'quill';
+import type { BlockEmbed as TypeBlockEmbed } from 'quill/blots/block';
+import Quill from 'quill';
+import { blotName } from '../../utils';
+
+const BlockEmbed = Quill.import('blots/block/embed') as typeof TypeBlockEmbed;
+
+export class BlockEmbedOverride extends BlockEmbed {
+  delta() {
+    // if BlockEmbed is the last line of the tableCellInner. need to add value in delta
+    const delta = super.delta();
+    const formats = bubbleFormats(this);
+    if (formats[blotName.tableCellInner]) {
+      delta.insert('\n', { [blotName.tableCellInner]: formats[blotName.tableCellInner] });
+    }
+    return delta;
+  }
+
+  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)) {
+      return super.length() + 1;
+    }
+    return super.length();
+  }
+}
+
+// copy from `quill/blots/block`
+function bubbleFormats(
+  blot: TypeParchment.Blot | null,
+  formats: Record<string, unknown> = {},
+  filter = true,
+): Record<string, unknown> {
+  if (blot == null) return formats;
+  if ('formats' in blot && typeof blot.formats === 'function') {
+    formats = {
+      ...formats,
+      ...blot.formats(),
+    };
+    if (filter) {
+      // exclude syntax highlighting from deltas and getFormat()
+      delete formats['code-token'];
+    }
+  }
+  if (
+    blot.parent == null
+    || blot.parent.statics.blotName === 'scroll'
+    || blot.parent.statics.scope !== blot.statics.scope
+  ) {
+    return formats;
+  }
+  return bubbleFormats(blot.parent, formats, filter);
+}

package/src/formats/overrides/block.ts

@@ -1,14 +1,16 @@
 import type { Parchment as TypeParchment } from 'quill';
 import type TypeBlock from 'quill/blots/block';
+import type TypeContainer from 'quill/blots/container';
 import Quill from 'quill';
-import { blotName, findParentBlot } from '../../utils';
+import { blotName, findParentBlot, isString } from '../../utils';
 
 const Parchment = Quill.import('parchment');
 const Block = Quill.import('blots/block') as typeof TypeBlock;
+const Container = Quill.import('blots/container') as typeof TypeContainer;
 
 export class BlockOverride extends Block {
   replaceWith(name: string | TypeParchment.Blot, value?: any): TypeParchment.Blot {
-    const replacement = typeof name === 'string' ? this.scroll.create(name, value) : name;
+    const replacement = isString(name) ? this.scroll.create(name, value) : name;
     if (replacement instanceof Parchment.ParentBlot) {
       // replace block to TableCellInner length is 0 when setContents
       // that will set text direct in TableCellInner but not in block
@@ -45,7 +47,11 @@ export class BlockOverride extends Block {
           }
         }
         else {
-          if (selfParent != null) {
+          // `list` will wrap Container. tableCellInner should be insert outside it
+          if (selfParent instanceof Container) {
+            selfParent.parent.insertBefore(replacement, selfParent);
+          }
+          else if (selfParent != null) {
             selfParent.insertBefore(replacement, this.next);
           }
           replacement.appendChild(this);
@@ -57,7 +63,7 @@ export class BlockOverride extends Block {
       }
     }
     if (this.parent != null) {
-      this.parent.insertBefore(replacement, this.next || undefined);
+      this.parent.insertBefore(replacement, this.next);
       this.remove();
     }
     this.attributes.copy(replacement as TypeParchment.BlockBlot);

package/src/formats/overrides/index.ts

@@ -1,2 +1,3 @@
 export * from './block';
+export * from './block-embed';
 export * from './scroll';