quill-table-up 2.2.4 → 2.3.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "quill-table-up",
   "type": "module",
-  "version": "2.2.4",
+  "version": "2.3.0",
   "packageManager": "pnpm@9.9.0",
   "description": "A table module for quill2.x",
   "author": "zzxming",

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

@@ -115,7 +115,7 @@ test('test TableSelection set indent format', async ({ page }) => {
   expect(await page.locator('#editor1 .ql-table-cell-inner p.ql-indent-1').count()).toBe(4);
 });
 
-test('test TableSelection set multiple format', async ({ page }) => {
+test('test TableSelection set format header', async ({ page }) => {
   await createTableBySelect(page, 'container1', 2, 2);
   const cell = page.locator('#editor1 .ql-editor .ql-table td').nth(0);
   const cellBounding = (await cell.boundingBox())!;
@@ -125,13 +125,38 @@ test('test TableSelection set multiple format', async ({ page }) => {
   await page.mouse.move(cellBounding.x + cellBounding.width * 2 - 10, cellBounding.y + cellBounding.height * 2 - 10);
   await page.mouse.up();
 
-  await page.locator('#editor1 .ql-editor p').nth(0).type('1');
-  const cells = page.locator('#editor1 .ql-editor .ql-table-cell-inner');
-  await cells.all().then(async (elements) => {
-    for (const element of elements) {
-      await element.type('1');
-    }
-  });
+  await page.locator('#container1 .ql-toolbar .ql-header').nth(0).click();
+  await page.locator('#container1 .ql-toolbar .ql-header .ql-picker-options .ql-picker-item').nth(0).click();
+
+  expect(await page.locator('#editor1 .ql-table-cell-inner h1').count()).toBe(4);
+});
+
+extendTest('test TableSelection set multiple format', async ({ page, editorPage }) => {
+  editorPage.index = 0;
+  await editorPage.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: '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: '2', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
+    { insert: '4' },
+    { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '2', rowspan: 1, colspan: 1 } }, insert: '\n' },
+    { insert: '\n' },
+  ]);
+  await page.waitForTimeout(1000);
+  const cell = page.locator('#editor1 .ql-editor .ql-table td').nth(0);
+  const cellBounding = (await cell.boundingBox())!;
+  expect(cellBounding).not.toBeNull();
+  await cell.click();
+  await page.mouse.down();
+  await page.mouse.move(cellBounding.x + cellBounding.width * 1.5, cellBounding.y + cellBounding.height * 1.5);
+  await page.mouse.up();
+  await editorPage.blur();
+  await editorPage.focus();
 
   await page.locator('.ql-toolbar .ql-bold').nth(0).click();
   await page.locator('.ql-toolbar .ql-italic').nth(0).click();
@@ -145,7 +170,6 @@ test('test TableSelection set multiple format', async ({ page }) => {
   expect(await page.locator('#editor1 .ql-table-cell-inner em').count()).toBe(4);
   expect(await page.locator('#editor1 .ql-table-cell-inner s').count()).toBe(4);
   expect(await page.locator('#editor1 .ql-table-cell-inner u').count()).toBe(4);
-
   await strongEl.all().then(async (elements) => {
     for (const element of elements) {
       await expect(element).toHaveCSS('background-color', 'rgb(230, 0, 0)');
@@ -175,6 +199,53 @@ test('test TableSelection clean format', async ({ page }) => {
   expect(await cleanEl.count()).toBe(0);
 });
 
+extendTest('test TableSelection set format in part of cell text', async ({ page, editorPage }) => {
+  editorPage.index = 0;
+  await editorPage.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: '1' },
+    { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
+    { insert: '1' },
+    { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
+    { 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: '2' },
+    { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '2', 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: '2', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
+    { insert: '4' },
+    { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '2', rowspan: 1, colspan: 1 } }, insert: '\n' },
+    { insert: '\n' },
+  ]);
+  await page.waitForTimeout(1000);
+  await page.locator('#editor1 .ql-editor .ql-table td').nth(0).click();
+
+  await editorPage.setSelection(4, 0);
+  await page.locator('#container1 .ql-toolbar .ql-header').nth(0).click();
+  await page.locator('#container1 .ql-toolbar .ql-header .ql-picker-options .ql-picker-item').nth(0).click();
+  const selectionAfterHeader = await editorPage.getSelection();
+  expect(selectionAfterHeader).toEqual({ index: 4, length: 0 });
+
+  await editorPage.setSelection(6, 0);
+  await page.locator('.ql-toolbar .ql-list[value="bullet"]').nth(0).click();
+  const selectionAfterList = await editorPage.getSelection();
+  expect(selectionAfterList).toEqual({ index: 6, length: 0 });
+
+  await page.locator('#editor1 .ql-editor .ql-table td').nth(1).click();
+  await editorPage.setSelection(9, 3);
+  await page.locator('.ql-toolbar .ql-bold').nth(0).click();
+  await page.locator('.ql-toolbar .ql-italic').nth(0).click();
+
+  expect(await page.locator('#editor1 .ql-table-cell-inner strong').count()).toBe(2);
+  expect(await page.locator('#editor1 .ql-table-cell-inner em').count()).toBe(2);
+});
+
 extendTest('test TableSelection should update when text change', async ({ page, editorPage }) => {
   editorPage.index = 0;
   await createTableBySelect(page, 'container1', 3, 3);
@@ -576,3 +647,20 @@ extendTest('toolbox bounds should same with quill.root', async ({ page, editorPa
   expect(quillRootBoundingAfter).not.toBeNull();
   expect(toolboxBoundingAfter).toEqual(quillRootBoundingAfter);
 });
+
+extendTest('TableSelection should not update when input composition', async ({ page, editorPage }) => {
+  editorPage.index = 0;
+  await createTableBySelect(page, 'container1', 3, 3);
+
+  await page.locator('#editor1 .ql-table .ql-table-cell').nth(0).click();
+  const selectionLine = page.locator('#container1 .table-up-selection .table-up-selection__line');
+  await expect(selectionLine).toBeVisible();
+  const bounding = (await selectionLine.boundingBox())!;
+  expect(bounding).not.toBeNull();
+
+  await page.dispatchEvent('#editor1 .ql-editor .ql-table-cell', 'compositionstart');
+  await page.type('#editor1 .ql-editor .ql-table-cell', 'zhongwen');
+
+  const composingBounding = (await selectionLine.boundingBox())!;
+  expect(composingBounding).toEqual(bounding);
+});

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

@@ -923,6 +923,187 @@ describe('clipboard cell structure', () => {
       quill.getContents(),
     );
   });
+
+  it('clipboard convert rowspan and struct have empty tr', async () => {
+    const quill = createQuillWithTableModule(`<p><br></p>`);
+    quill.setContents(
+      quill.clipboard.convert({
+        html: `
+          <body link=blue vlink=purple>
+
+          <table border=0 cellpadding=0 cellspacing=0 width=126 style='border-collapse:
+          collapse;width:94pt'>
+          <!--StartFragment-->
+          <col width=63 span=2 style='width:47pt'>
+          <tr height=19 style='height:14.4pt'>
+            <td rowspan=6 height=114 class=xl65 width=63 style='border-bottom:.5pt solid black;
+            height:86.4pt;width:47pt'>合并1</td>
+            <td rowspan=2 class=xl65 width=63 style='border-bottom:.5pt solid black;
+            width:47pt'>合并2</td>
+          </tr>
+          <tr height=19 style='height:14.4pt'>
+          </tr>
+          <tr height=19 style='height:14.4pt'>
+            <td rowspan=2 height=38 class=xl65 style='border-bottom:.5pt solid black;
+            height:28.8pt;border-top:none'>合并3</td>
+          </tr>
+          <tr height=19 style='height:14.4pt'>
+          </tr>
+          <tr height=19 style='height:14.4pt'>
+            <td rowspan=2 height=38 class=xl65 style='border-bottom:.5pt solid black;
+            height:28.8pt;border-top:none'>合并4</td>
+          </tr>
+          <tr height=19 style='height:14.4pt'>
+          </tr>
+          <!--EndFragment-->
+          </table>
+
+          </body>
+        `,
+      }),
+    );
+    await vi.runAllTimersAsync();
+
+    expect(quill.root).toEqualHTML(
+      `
+        <p><br></p>
+        <div>
+          <table cellpadding="0" cellspacing="0">
+            ${createTaleColHTML(2, { full: false, width: 63 })}
+            <tbody>
+              <tr>
+                <td rowspan="3" colspan="1">
+                  <div><p>合并1</p></div>
+                </td>
+                <td rowspan="1" colspan="1">
+                  <div><p>合并2</p></div>
+                </td>
+              </tr>
+              <tr>
+                <td rowspan="1" colspan="1">
+                  <div><p>合并3</p></div>
+                </td>
+              </tr>
+              <tr>
+                <td rowspan="1" colspan="1">
+                  <div><p>合并4</p></div>
+                </td>
+              </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'] },
+    );
+    expectDelta(
+      new Delta([
+        { insert: '\n' },
+        { 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: 1 } }, insert: '\n' },
+        { insert: '合并2' },
+        { attributes: { 'table-up-cell-inner': { rowspan: 1, colspan: 1 } }, insert: '\n' },
+        { insert: '合并3' },
+        { attributes: { 'table-up-cell-inner': { rowspan: 1, colspan: 1 } }, insert: '\n' },
+        { insert: '合并4' },
+        { attributes: { 'table-up-cell-inner': { rowspan: 1, colspan: 1 } }, insert: '\n' },
+        { insert: '\n' },
+      ]),
+      quill.getContents(),
+    );
+  });
+
+  it('clipboard convert col with span attribute', async () => {
+    const quill = createQuillWithTableModule(`<p><br></p>`);
+    quill.setContents(
+      quill.clipboard.convert({
+        html: `
+          <body link=blue vlink=purple>
+
+          <table border=0 cellpadding=0 cellspacing=0 width=252 style='border-collapse:
+          collapse;width:188pt'>
+          <!--StartFragment-->
+          <col width=63 span=4 style='width:47pt'>
+          <tr height=19 style='height:14.4pt'>
+            <td colspan=2 rowspan=6 height=114 class=xl65 width=126 style='height:86.4pt;
+            width:94pt'>1</td>
+            <td colspan=2 rowspan=2 class=xl65 width=126 style='width:94pt'>2</td>
+          </tr>
+          <tr height=19 style='height:14.4pt'>
+          </tr>
+          <tr height=19 style='height:14.4pt'>
+            <td colspan=2 rowspan=2 height=38 class=xl65 style='height:28.8pt'>3</td>
+          </tr>
+          <tr height=19 style='height:14.4pt'>
+          </tr>
+          <tr height=19 style='height:14.4pt'>
+            <td colspan=2 rowspan=2 height=38 class=xl65 style='height:28.8pt'>4</td>
+          </tr>
+          <tr height=19 style='height:14.4pt'>
+          </tr>
+          <!--EndFragment-->
+          </table>
+
+          </body>
+        `,
+      }),
+    );
+    await vi.runAllTimersAsync();
+
+    expect(quill.root).toEqualHTML(
+      `
+        <p><br></p>
+        <div>
+          <table cellpadding="0" cellspacing="0">
+            ${createTaleColHTML(4, { full: false, width: 63 })}
+            <tbody>
+              <tr>
+                <td rowspan="3" colspan="2">
+                  <div><p>1</p></div>
+                </td>
+                <td rowspan="1" colspan="2">
+                  <div><p>2</p></div>
+                </td>
+              </tr>
+              <tr>
+                <td rowspan="1" colspan="2">
+                  <div><p>3</p></div>
+                </td>
+              </tr>
+              <tr>
+                <td rowspan="1" colspan="2">
+                  <div><p>4</p></div>
+                </td>
+              </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'] },
+    );
+    expectDelta(
+      new Delta([
+        { insert: '\n' },
+        { insert: { 'table-up-col': { full: false, width: 63 } } },
+        { insert: { 'table-up-col': { full: false, width: 63 } } },
+        { 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' },
+        { insert: '2' },
+        { attributes: { 'table-up-cell-inner': { rowspan: 1, colspan: 2 } }, insert: '\n' },
+        { insert: '3' },
+        { attributes: { 'table-up-cell-inner': { rowspan: 1, colspan: 2 } }, insert: '\n' },
+        { insert: '4' },
+        { attributes: { 'table-up-cell-inner': { rowspan: 1, colspan: 2 } }, insert: '\n' },
+        { insert: '\n' },
+      ]),
+      quill.getContents(),
+    );
+  });
 });
 
 describe('clipboard content format', () => {

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

@@ -320,7 +320,7 @@ describe('hack format cell', () => {
     expect(quill.getSelection()).toEqual({ index: 18, length: 0 });
   });
 
-  it('select length is 0 and selectedTds not empty should format all text in cell', async () => {
+  it('selection not in cell 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 }));
     quill.updateContents(
@@ -333,14 +333,15 @@ describe('hack format cell', () => {
         .insert('123456789'),
     );
 
+    quill.setSelection({ index: 3, length: 0 });
+    quill.blur();
+    quill.focus();
     const tableUp = quill.getModule(TableUp.moduleName) as TableUp;
     const tds = quill.scroll.descendants(TableCellInnerFormat, 0);
     tableUp.tableSelection!.selectedTds = [tds[0], tds[2]];
-    quill.setSelection(18, 0, Quill.sources.SILENT);
     quill.format('bold', true);
     // simulate `getBoundingClientRect` will effect selectedTd computed position. need manual set
     tableUp.tableSelection!.selectedTds = [tds[0], tds[2]];
-    quill.setSelection(18, 0, Quill.sources.SILENT);
     quill.format('list', 'bullet');
     expectDelta(
       quill.getContents(),
@@ -363,10 +364,9 @@ describe('hack format cell', () => {
         { insert: '\n' },
       ]),
     );
-    expect(quill.getSelection()).toBeNull();
   });
 
-  it('selection not in cell but have selectedTds. should format all text in selected cell', async () => {
+  it('selection can get format tableCellInner. should format like origin', async () => {
     const quill = createQuillWithTableModule('<p></p>', { selection: TableSelection });
     quill.setContents([
       { insert: '12345\n' },
@@ -383,33 +383,29 @@ describe('hack format cell', () => {
       { insert: '\n' },
     ]);
 
-    const tableUp = quill.getModule(TableUp.moduleName) as TableUp;
-    const tds = quill.scroll.descendants(TableCellInnerFormat, 0);
-    tableUp.tableSelection!.selectedTds = [tds[0], tds[1]];
-    quill.setSelection(1, 3, Quill.sources.SILENT);
-    quill.format('bold', true);
-    // simulate `getBoundingClientRect` will effect selectedTd computed position. need manual set
-    tableUp.tableSelection!.selectedTds = [tds[0], tds[1]];
-    quill.setSelection(1, 3, Quill.sources.SILENT);
+    quill.setSelection(9, 0, Quill.sources.SILENT);
     quill.format('list', 'bullet');
+    // simulate `getBoundingClientRect` will effect selectedTd computed position. need manual set
+    quill.setSelection(14, 1, Quill.sources.SILENT);
+    quill.format('bold', true);
     expectDelta(
       quill.getContents(),
       new Delta([
         { insert: '12345\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: '1', attributes: { bold: true } },
+        { insert: '1' },
         { attributes: { 'list': 'bullet', 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
-        { insert: '2', attributes: { bold: true } },
-        { attributes: { 'list': 'bullet', 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '2', 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: '2', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
-        { insert: '4' },
+        { attributes: { bold: true }, insert: '4' },
         { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '2', rowspan: 1, colspan: 1 } }, insert: '\n' },
         { insert: '\n' },
       ]),
     );
-    expect(quill.getSelection()).toBeNull();
+    expect(quill.getSelection()).toEqual({ index: 14, length: 1 });
   });
 });
 

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

@@ -685,6 +685,57 @@ describe('table undo', () => {
       { ignoreAttrs: ['class', 'style', 'data-table-id', 'contenteditable'] },
     );
   });
+
+  it('undo and redo remove last column', async () => {
+    const quill = await createTable(2, 2, { full: false });
+    const tableModule = quill.getModule(TableUp.moduleName) as TableUp;
+    const tds = quill.scroll.descendants(TableCellInnerFormat, 0);
+    tableModule.removeCol([tds[1]]);
+    await vi.runAllTimersAsync();
+    const afterColHtml = `
+      <p><br></p>
+      <div contenteditable="false">
+        <table cellpadding="0" cellspacing="0" style="margin-right: auto; width: 200px;">
+          <colgroup contenteditable="false">
+            <col width="100px" data-col-id="1">
+          </colgroup>
+          <tbody>
+            <tr>
+              <td rowspan="1" colspan="1" data-col-id="1">
+                <div data-col-id="1"><p>1</p></div>
+              </td>
+            </tr>
+            <tr>
+              <td rowspan="1" colspan="1" data-col-id="1">
+                <div data-col-id="1"><p>3</p></div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <p><br></p>
+    `;
+    expect(quill.root).toEqualHTML(
+      afterColHtml,
+      { ignoreAttrs: ['class', 'style', 'data-full', 'data-table-id', 'data-row-id', 'data-rowspan', 'data-colspan', 'contenteditable'] },
+    );
+    quill.history.undo();
+    await vi.runAllTimersAsync();
+    expect(quill.root).toEqualHTML(
+      `
+        <p><br></p>
+        ${createTableHTML(2, 2, { full: false })}
+        <p><br></p>
+      `,
+      { ignoreAttrs: ['class', 'style', 'data-table-id', 'data-row-id', 'data-col-id', 'contenteditable'] },
+    );
+    quill.history.redo();
+    await vi.runAllTimersAsync();
+    expect(quill.root).toEqualHTML(
+      afterColHtml,
+      { ignoreAttrs: ['class', 'style', 'data-full', 'data-table-id', 'data-row-id', 'data-rowspan', 'data-colspan', 'contenteditable'] },
+    );
+  });
 });
 
 describe('undo cell attribute', () => {

package/src/formats/container-format.ts

@@ -24,15 +24,6 @@ export class ContainerFormat extends Container {
     return node;
   }
 
-  insertAt(index: number, value: string, def?: any): void {
-    const [child] = this.children.find(index);
-    if (!child) {
-      const defaultChild = this.scroll.create(this.statics.defaultChild.blotName || 'block');
-      this.appendChild(defaultChild);
-    }
-    super.insertAt(index, value, def);
-  }
-
   public optimize(_context: Record<string, any>) {
     if (this.children.length === 0) {
       if (this.statics.defaultChild != null) {

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

@@ -150,6 +150,16 @@ export class TableCellInnerFormat extends ContainerFormat {
     }
   }
 
+  insertAt(index: number, value: string, def?: any): void {
+    const [child] = this.children.find(index);
+    // always keep TableCellInner not empty
+    if (!child && this.statics.defaultChild) {
+      const defaultChild = this.scroll.create(this.statics.defaultChild.blotName || 'block');
+      this.appendChild(defaultChild);
+    }
+    super.insertAt(index, value, def);
+  }
+
   formats(): Record<string, any> {
     const value = this.statics.formats(this.domNode);
     return {
@@ -258,6 +268,20 @@ export class TableCellInnerFormat extends ContainerFormat {
         return this.parent.insertBefore(cellInnerBlot, this.next);
       }
     }
+    else if (blot.statics.blotName === blotName.tableCol) {
+      try {
+        const bodyBlot = findParentBlot(this, blotName.tableBody);
+        const index = this.offset(bodyBlot);
+        const next = bodyBlot.split(index);
+        bodyBlot.parent.insertBefore(blot, next);
+        blot.optimize({});
+      }
+      catch {
+        // here should not trigger
+        console.warn('TableCellInner not in TableBody');
+      }
+      return;
+    }
     super.insertBefore(blot, ref);
   }
 }

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

@@ -2,7 +2,7 @@ import type { Parchment as TypeParchment } from 'quill';
 import type { BlockEmbed as TypeBlockEmbed } from 'quill/blots/block';
 import type { TableColValue } from '../utils';
 import Quill from 'quill';
-import { blotName, findParentBlot, findParentBlots, tableUpSize } from '../utils';
+import { blotName, findParentBlot, tableUpSize } from '../utils';
 import { TableCellInnerFormat } from './table-cell-inner-format';
 
 const BlockEmbed = Quill.import('blots/block/embed') as typeof TypeBlockEmbed;
@@ -147,45 +147,45 @@ export class TableColFormat extends BlockEmbed {
       super.insertAt(index, value, def);
       return;
     }
-    const lines = value.split('\n');
-    const text = lines.pop();
-    const blocks = lines.map((line) => {
-      const block = this.scroll.create('block');
-      block.insertAt(0, line);
-      return block;
-    });
-    const ref = this.split(index);
-    const [tableColgroupBlot, tableMainBlot] = findParentBlots(this, [blotName.tableColgroup, blotName.tableMain] as const);
-    const tableBodyBlot = tableColgroupBlot.next;
-    if (ref) {
-      const index = ref.offset(tableColgroupBlot);
-      tableColgroupBlot.split(index);
-    }
-    // create tbody
-    let insertBlot = tableMainBlot.parent.parent;
-    let nextBlotRef: TypeParchment.Blot | null = tableMainBlot.parent.next;
-    if (tableBodyBlot) {
-      const cellInners = tableBodyBlot.descendants(TableCellInnerFormat);
-      if (cellInners.length > 0) {
-        const cellInnerBlot = cellInners[0];
-        const value = TableCellInnerFormat.formats(cellInnerBlot.domNode);
-        const newBlock = this.scroll.create('block') as TypeParchment.BlockBlot;
-        const newTableCellInner = newBlock.wrap(blotName.tableCellInner, value);
-        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, tableColgroupBlot.next);
-
-        insertBlot = newBlock;
-        nextBlotRef = newBlock.next;
+    try {
+      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 block of blocks) {
-      insertBlot.insertBefore(block, nextBlotRef);
+      for (const line of lines) {
+        const block = this.scroll.create('block');
+        block.insertAt(0, line);
+        insertBlot.appendChild(block);
+      }
+      if (text) {
+        const lineBlock = this.scroll.create('block') as TypeParchment.ParentBlot;
+        lineBlock.appendChild(this.scroll.create('text', text));
+        insertBlot.appendChild(lineBlock);
+      }
     }
-    if (text) {
-      insertBlot.insertBefore(this.scroll.create('text', text), nextBlotRef);
+    catch {
+      // here should not trigger
+      console.warn('TableCol not in TableColgroup');
     }
   }
 }