quill-table-up 2.4.1 → 2.4.2

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

@@ -160,7 +160,7 @@ describe('table undo', () => {
         </div>
         <p><br></p>
       `,
-      { ignoreAttrs: ['class', 'style', 'data-table-id', 'contenteditable'] },
+      { ignoreAttrs: ['data-tag', 'class', 'style', 'data-table-id', 'contenteditable'] },
     );
   });
 
@@ -234,7 +234,7 @@ describe('table undo', () => {
         </div>
         <p><br></p>
       `,
-      { ignoreAttrs: ['class', 'style', 'data-table-id', 'contenteditable'] },
+      { ignoreAttrs: ['data-tag', 'class', 'style', 'data-table-id', 'contenteditable'] },
     );
   });
 
@@ -374,7 +374,7 @@ describe('table undo', () => {
         </div>
         <p><br></p>
       `,
-      { ignoreAttrs: ['class', 'style', 'data-table-id', 'contenteditable'] },
+      { ignoreAttrs: ['data-tag', 'class', 'style', 'data-table-id', 'contenteditable'] },
     );
     quill.history.undo();
     await vi.runAllTimersAsync();
@@ -384,7 +384,7 @@ describe('table undo', () => {
         ${createTableHTML(4, 4)}
         <p><br></p>
       `,
-      { ignoreAttrs: ['class', 'style', 'data-table-id', 'contenteditable'] },
+      { ignoreAttrs: ['data-tag', 'class', 'style', 'data-table-id', 'contenteditable'] },
     );
   });
 
@@ -467,7 +467,7 @@ describe('table undo', () => {
         </div>
         <p><br></p>
       `,
-      { ignoreAttrs: ['class', 'style', 'data-table-id', 'contenteditable'] },
+      { ignoreAttrs: ['data-tag', 'class', 'style', 'data-table-id', 'contenteditable'] },
     );
     quill.history.undo();
     await vi.runAllTimersAsync();
@@ -477,7 +477,7 @@ describe('table undo', () => {
         ${createTableHTML(5, 5)}
         <p><br></p>
       `,
-      { ignoreAttrs: ['class', 'style', 'data-table-id', 'contenteditable'] },
+      { ignoreAttrs: ['data-tag', 'class', 'style', 'data-table-id', 'contenteditable'] },
     );
   });
 
@@ -564,7 +564,7 @@ describe('table undo', () => {
         </div>
         <p><br></p>
       `,
-      { ignoreAttrs: ['class', 'style', 'data-table-id', 'contenteditable'] },
+      { ignoreAttrs: ['data-tag', 'class', 'style', 'data-table-id', 'contenteditable'] },
     );
     quill.history.undo();
     await vi.runAllTimersAsync();
@@ -574,7 +574,7 @@ describe('table undo', () => {
         ${createTableHTML(5, 5)}
         <p><br></p>
       `,
-      { ignoreAttrs: ['class', 'style', 'data-table-id', 'contenteditable'] },
+      { ignoreAttrs: ['data-tag', 'class', 'style', 'data-table-id', 'contenteditable'] },
     );
   });
 
@@ -654,7 +654,7 @@ describe('table undo', () => {
         </div>
         <p><br></p>
       `,
-      { ignoreAttrs: ['class', 'style', 'data-table-id', 'data-row-id', 'data-col-id', 'contenteditable'] },
+      { ignoreAttrs: ['data-tag', 'class', 'style', 'data-table-id', 'data-row-id', 'data-col-id', 'contenteditable'] },
     );
     quill.history.undo();
     await vi.runAllTimersAsync();
@@ -664,7 +664,7 @@ describe('table undo', () => {
         ${createTableHTML(5, 5)}
         <p><br></p>
       `,
-      { ignoreAttrs: ['class', 'style', 'data-table-id', 'contenteditable'] },
+      { ignoreAttrs: ['data-tag', 'class', 'style', 'data-table-id', 'contenteditable'] },
     );
   });
 
@@ -717,7 +717,7 @@ describe('table undo', () => {
     `;
     expect(quill.root).toEqualHTML(
       afterColHtml,
-      { ignoreAttrs: ['class', 'style', 'data-full', 'data-table-id', 'data-row-id', 'data-rowspan', 'data-colspan', 'contenteditable'] },
+      { ignoreAttrs: ['data-tag', 'class', 'style', 'data-full', 'data-table-id', 'data-row-id', 'data-rowspan', 'data-colspan', 'contenteditable'] },
     );
     quill.history.undo();
     await vi.runAllTimersAsync();
@@ -733,7 +733,85 @@ describe('table undo', () => {
     await vi.runAllTimersAsync();
     expect(quill.root).toEqualHTML(
       afterColHtml,
-      { ignoreAttrs: ['class', 'style', 'data-full', 'data-table-id', 'data-row-id', 'data-rowspan', 'data-colspan', 'contenteditable'] },
+      { ignoreAttrs: ['data-tag', 'class', 'style', 'data-full', 'data-table-id', 'data-row-id', 'data-rowspan', 'data-colspan', 'contenteditable'] },
+    );
+  });
+
+  it('undo and redo cell convert', async () => {
+    const quill = await createTable(3, 3, { full: false }, {}, { isEmpty: false });
+    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 } }, insert: '\n' },
+      { insert: '2' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '2', rowspan: 1, colspan: 1 } }, insert: '\n' },
+      { insert: '3' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '3', rowspan: 1, colspan: 1 } }, insert: '\n' },
+      { insert: '4' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
+      { insert: '5' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '2', rowspan: 1, colspan: 1 } }, insert: '\n' },
+      { insert: '6' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '3', rowspan: 1, colspan: 1 } }, insert: '\n' },
+      { insert: '7' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '3', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
+      { insert: '8' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '3', colId: '2', rowspan: 1, colspan: 1 } }, insert: '\n' },
+      { insert: '9' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '3', colId: '3', rowspan: 1, colspan: 1 } }, insert: '\n' },
+      { insert: '\n' },
+    ];
+    const thDelta = [
+      { 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: 'th' } }, insert: '\n' },
+      { insert: '2' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '2', rowspan: 1, colspan: 1, tag: 'th' } }, insert: '\n' },
+      { insert: '3' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '3', rowspan: 1, colspan: 1, tag: 'th' } }, insert: '\n' },
+      { insert: '4' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '1', rowspan: 1, colspan: 1, tag: 'th' } }, insert: '\n' },
+      { insert: '5' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '2', rowspan: 1, colspan: 1, tag: 'th' } }, insert: '\n' },
+      { insert: '6' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '3', rowspan: 1, colspan: 1, tag: 'th' } }, insert: '\n' },
+      { insert: '7' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '3', colId: '1', rowspan: 1, colspan: 1, tag: 'th' } }, insert: '\n' },
+      { insert: '8' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '3', colId: '2', rowspan: 1, colspan: 1, tag: 'th' } }, insert: '\n' },
+      { insert: '9' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '3', colId: '3', rowspan: 1, colspan: 1, tag: 'th' } }, insert: '\n' },
+      { insert: '\n' },
+    ];
+    quill.setContents(originDelta);
+    const tds = quill.scroll.descendants(TableCellInnerFormat, 0);
+    for (const td of tds) {
+      td.convertTableCell();
+    }
+    await vi.runAllTimersAsync();
+    expectDelta(
+      new Delta(thDelta),
+      quill.getContents(),
+    );
+
+    quill.history.undo();
+    await vi.runAllTimersAsync();
+    expectDelta(
+      new Delta(originDelta),
+      quill.getContents(),
+    );
+
+    quill.history.redo();
+    await vi.runAllTimersAsync();
+    expectDelta(
+      new Delta(thDelta),
+      quill.getContents(),
     );
   });
 });
@@ -799,7 +877,7 @@ describe('undo cell attribute', () => {
         </div>
         <p><br></p>
       `,
-      { ignoreAttrs: ['class', 'data-table-id', 'contenteditable'] },
+      { ignoreAttrs: ['data-tag', 'class', 'data-table-id', 'contenteditable'] },
     );
     quill.history.undo();
     await vi.runAllTimersAsync();
@@ -809,7 +887,7 @@ describe('undo cell attribute', () => {
         ${createTableHTML(2, 2)}
         <p><br></p>
       `,
-      { ignoreAttrs: ['class', 'data-table-id', 'contenteditable'] },
+      { ignoreAttrs: ['data-tag', 'class', 'data-table-id', 'contenteditable'] },
     );
   });
 
@@ -953,7 +1031,7 @@ describe('undo cell attribute', () => {
         </div>
         <p><br></p>
       `,
-      { ignoreAttrs: ['class', 'style', 'data-table-id', 'data-row-id', 'data-col-id', 'data-rowspan', 'data-colspan', 'contenteditable'] },
+      { ignoreAttrs: ['data-tag', 'class', 'style', 'data-table-id', 'data-row-id', 'data-col-id', 'data-rowspan', 'data-colspan', 'contenteditable'] },
     );
 
     quill.history.undo();
@@ -996,7 +1074,7 @@ describe('undo cell attribute', () => {
         </div>
         <p><br></p>
       `,
-      { ignoreAttrs: ['class', 'style', 'data-table-id', 'data-row-id', 'data-col-id', 'data-rowspan', 'data-colspan', 'contenteditable'] },
+      { ignoreAttrs: ['data-tag', 'class', 'style', 'data-table-id', 'data-row-id', 'data-col-id', 'data-rowspan', 'data-colspan', 'contenteditable'] },
     );
 
     quill.history.redo();
@@ -1037,7 +1115,7 @@ describe('undo cell attribute', () => {
         </div>
         <p><br></p>
       `,
-      { ignoreAttrs: ['class', 'style', 'data-table-id', 'data-row-id', 'data-col-id', 'data-rowspan', 'data-colspan', 'contenteditable'] },
+      { ignoreAttrs: ['data-tag', 'class', 'style', 'data-table-id', 'data-row-id', 'data-col-id', 'data-rowspan', 'data-colspan', 'contenteditable'] },
     );
   });
 
@@ -1101,7 +1179,7 @@ describe('undo cell attribute', () => {
         </div>
         <p><br></p>
       `,
-      { ignoreAttrs: ['class', 'style', 'data-table-id', 'data-row-id', 'data-col-id', 'data-rowspan', 'data-colspan', 'contenteditable'] },
+      { ignoreAttrs: ['data-tag', 'class', 'style', 'data-table-id', 'data-row-id', 'data-col-id', 'data-rowspan', 'data-colspan', 'contenteditable'] },
     );
 
     quill.history.undo();
@@ -1144,7 +1222,7 @@ describe('undo cell attribute', () => {
         </div>
         <p><br></p>
       `,
-      { ignoreAttrs: ['class', 'style', 'data-table-id', 'data-row-id', 'data-col-id', 'data-rowspan', 'data-colspan', 'contenteditable'] },
+      { ignoreAttrs: ['data-tag', 'class', 'style', 'data-table-id', 'data-row-id', 'data-col-id', 'data-rowspan', 'data-colspan', 'contenteditable'] },
     );
 
     quill.history.redo();
@@ -1185,7 +1263,7 @@ describe('undo cell attribute', () => {
         </div>
         <p><br></p>
       `,
-      { ignoreAttrs: ['class', 'style', 'data-table-id', 'data-row-id', 'data-col-id', 'data-rowspan', 'data-colspan', 'contenteditable'] },
+      { ignoreAttrs: ['data-tag', 'class', 'style', 'data-table-id', 'data-row-id', 'data-col-id', 'data-rowspan', 'data-colspan', 'contenteditable'] },
     );
   });
 

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

@@ -40,7 +40,7 @@ describe('remove column from table', () => {
         </div>
         <p><br></p>
       `,
-      { ignoreAttrs: ['class', 'style', 'data-table-id', 'data-row-id', 'data-col-id', 'data-rowspan', 'data-colspan', 'contenteditable'] },
+      { ignoreAttrs: ['data-tag', 'class', 'style', 'data-table-id', 'data-row-id', 'data-col-id', 'data-rowspan', 'data-colspan', 'contenteditable'] },
     );
   });
 
@@ -70,7 +70,7 @@ describe('remove column from table', () => {
         </div>
         <p><br></p>
       `,
-      { ignoreAttrs: ['class', 'data-table-id', 'data-row-id', 'data-col-id', 'data-rowspan', 'data-colspan', 'contenteditable'] },
+      { ignoreAttrs: ['data-tag', 'class', 'data-table-id', 'data-row-id', 'data-col-id', 'data-rowspan', 'data-colspan', 'contenteditable'] },
     );
   });
 
@@ -131,7 +131,7 @@ describe('remove column from table', () => {
         </div>
         <p><br></p>
       `,
-      { ignoreAttrs: ['class', 'style', 'data-table-id', 'data-row-id', 'data-col-id', 'data-rowspan', 'data-colspan', 'contenteditable'] },
+      { ignoreAttrs: ['data-tag', 'class', 'style', 'data-table-id', 'data-row-id', 'data-col-id', 'data-rowspan', 'data-colspan', 'contenteditable'] },
     );
   });
 });
@@ -162,7 +162,7 @@ describe('remove row from table', () => {
         </div>
         <p><br></p>
       `,
-      { ignoreAttrs: ['class', 'style', 'data-table-id', 'data-row-id', 'data-col-id', 'data-rowspan', 'data-colspan', 'contenteditable'] },
+      { ignoreAttrs: ['data-tag', 'class', 'style', 'data-table-id', 'data-row-id', 'data-col-id', 'data-rowspan', 'data-colspan', 'contenteditable'] },
     );
   });
 
@@ -197,7 +197,7 @@ describe('remove row from table', () => {
         </div>
         <p><br></p>
       `,
-      { ignoreAttrs: ['class', 'style', 'data-table-id', 'data-row-id', 'data-col-id', 'data-rowspan', 'data-colspan', 'contenteditable'] },
+      { ignoreAttrs: ['data-tag', 'class', 'style', 'data-table-id', 'data-row-id', 'data-col-id', 'data-rowspan', 'data-colspan', 'contenteditable'] },
     );
   });
 });
@@ -217,7 +217,7 @@ describe('unusual delete', () => {
     await vi.runAllTimersAsync();
     expect(quill.root).toEqualHTML(
       `<p><br></p>`,
-      { ignoreAttrs: ['class', 'style', 'data-table-id', 'data-row-id', 'data-col-id', 'data-rowspan', 'data-colspan', 'contenteditable'] },
+      { ignoreAttrs: ['data-tag', 'class', 'style', 'data-table-id', 'data-row-id', 'data-col-id', 'data-rowspan', 'data-colspan', 'contenteditable'] },
     );
   });
 
@@ -279,7 +279,7 @@ describe('unusual delete', () => {
         </div>
         <p><br></p>
       `,
-      { ignoreAttrs: ['class', 'style', 'data-table-id', 'data-row-id', 'data-col-id', 'data-rowspan', 'data-colspan', 'contenteditable'] },
+      { ignoreAttrs: ['data-tag', 'class', 'style', 'data-table-id', 'data-row-id', 'data-col-id', 'data-rowspan', 'data-colspan', 'contenteditable'] },
     );
   });
 
@@ -338,7 +338,7 @@ describe('unusual delete', () => {
         </div>
         <p><br></p>
       `,
-      { ignoreAttrs: ['class', 'style', 'data-table-id', 'data-row-id', 'data-col-id', 'data-rowspan', 'data-colspan', 'contenteditable'] },
+      { ignoreAttrs: ['data-tag', 'class', 'style', 'data-table-id', 'data-row-id', 'data-col-id', 'data-rowspan', 'data-colspan', 'contenteditable'] },
     );
   });
 });

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

@@ -283,7 +283,7 @@ describe('test override format', () => {
         ${createTableHTML(2, 2)}
         <p><br></p>
       `,
-      { ignoreAttrs: ['class', 'style', 'data-table-id', 'contenteditable'] },
+      { ignoreAttrs: ['data-tag', 'class', 'style', 'data-table-id', 'contenteditable'] },
     );
     const tableModule = quill.getModule(TableUp.moduleName) as TableUp;
     const tds = quill.scroll.descendants(TableCellInnerFormat, 0);
@@ -391,7 +391,7 @@ describe('test override format', () => {
         </div>
         <p><br></p>
       `,
-      { ignoreAttrs: ['class', 'style', 'data-table-id', 'contenteditable'] },
+      { ignoreAttrs: ['data-tag', 'class', 'style', 'data-table-id', 'contenteditable'] },
     );
   });
 
@@ -544,7 +544,7 @@ describe('test override format', () => {
         </div>
         <p><br></p>
       `,
-      { ignoreAttrs: ['class', 'style', 'data-table-id', 'contenteditable'] },
+      { ignoreAttrs: ['data-tag', 'class', 'style', 'data-table-id', 'contenteditable'] },
     );
   });
 
@@ -705,7 +705,7 @@ describe('test override format', () => {
         </div>
         <p><br></p>
       `,
-      { ignoreAttrs: ['class', 'style', 'data-table-id', 'contenteditable'] },
+      { ignoreAttrs: ['data-tag', 'class', 'style', 'data-table-id', 'contenteditable'] },
     );
   });
 });

package/src/__tests__/unit/utils.ts

@@ -215,7 +215,7 @@ export function createTableBodyHTML(row: number, col: number, options?: Partial<
           <tr ${datasetTableId(tableId)} data-row-id="${i + 1}">
             ${
               new Array(col).fill(0).map((_, j) => `<td rowspan="1" colspan="1" ${datasetTableId(tableId)} data-row-id="${i + 1}" data-col-id="${j + 1}">
-                <div ${datasetTableId(tableId)} data-rowspan="1" data-colspan="1" data-row-id="${i + 1}" data-col-id="${j + 1}"${contenteditableString(editable)}>
+                <div data-tag="td" ${datasetTableId(tableId)} data-rowspan="1" data-colspan="1" data-row-id="${i + 1}" data-col-id="${j + 1}"${contenteditableString(editable)}>
                   <p>
                     ${isEmpty ? '<br>' : i * row + j + 1}
                   </p>

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

@@ -1,5 +1,5 @@
 import type { TableCellValue } from '../utils';
-import { blotName, findParentBlot, toCamelCase } from '../utils';
+import { blotName, ensureArray, findParentBlot, toCamelCase } from '../utils';
 import { ContainerFormat } from './container-format';
 import { TableCellInnerFormat } from './table-cell-inner-format';
 import { TableRowFormat } from './table-row-format';
@@ -34,8 +34,10 @@ export class TableCellFormat extends ContainerFormat {
       colspan,
       style,
       emptyRow,
+      tag = 'td',
     } = value;
-    const node = super.create() as HTMLElement;
+    const node = document.createElement(tag);
+    node.classList.add(...ensureArray(this.className));
     node.dataset.tableId = tableId;
     node.dataset.rowId = rowId;
     node.dataset.colId = colId;
@@ -59,6 +61,7 @@ export class TableCellFormat extends ContainerFormat {
       colId,
       rowspan: getValidCellspan(rowspan),
       colspan: getValidCellspan(colspan),
+      tag: domNode.tagName.toLowerCase(),
     };
 
     const inlineStyles: Record<string, any> = {};
@@ -82,6 +85,11 @@ export class TableCellFormat extends ContainerFormat {
     return value;
   }
 
+  isChildHeadTableCellInner() {
+    const headChild = this.children.head;
+    return headChild && headChild.statics.blotName === blotName.tableCellInner;
+  }
+
   setFormatValue(name: string, value?: any) {
     if (this.statics.allowAttrs.has(name) || this.statics.allowDataAttrs.has(name)) {
       let attrName = name;
@@ -104,15 +112,14 @@ export class TableCellFormat extends ContainerFormat {
       }
     }
 
-    const headChild = this.children.head;
+    const headChild = this.children.head!;
     if (
-      this.domNode.style.cssText
-      && headChild
-      && headChild.statics.blotName === blotName.tableCellInner
+      this.isChildHeadTableCellInner()
+      && this.domNode.style.cssText
       // only update if data not match. avoid optimize circular updates
       && this.domNode.style.cssText !== (headChild.domNode as HTMLElement).dataset.style
     ) {
-      (headChild!.domNode as HTMLElement).dataset.style = this.domNode.style.cssText;
+      (headChild.domNode as HTMLElement).dataset.style = this.domNode.style.cssText;
     }
   }
 
@@ -230,6 +237,25 @@ export class TableCellFormat extends ContainerFormat {
     return this.children.head as TableCellInnerFormat;
   }
 
+  convertTableCell() {
+    const value = this.statics.formats(this.domNode);
+    const tag = value.tag === 'td' ? 'th' : 'td';
+
+    const headChild = this.children.head!;
+    if (
+      this.isChildHeadTableCellInner()
+      // only update if data not match. avoid optimize circular updates
+      && (headChild.domNode as HTMLElement).dataset.tag !== tag
+    ) {
+      (headChild.domNode as HTMLElement).dataset.tag = tag;
+    }
+
+    this.replaceWith(blotName.tableCell, {
+      ...value,
+      tag,
+    });
+  }
+
   checkMerge(): boolean {
     const { colId, rowId, colspan, rowspan } = this;
     const next = this.next as TableCellFormat;

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

@@ -40,6 +40,7 @@ export class TableCellInnerFormat extends ContainerFormat {
       colspan,
       style,
       emptyRow,
+      tag = 'td',
     } = value;
     const node = super.create() as HTMLElement;
     node.dataset.tableId = tableId;
@@ -47,6 +48,7 @@ export class TableCellInnerFormat extends ContainerFormat {
     node.dataset.colId = colId;
     node.dataset.rowspan = String(getValidCellspan(rowspan));
     node.dataset.colspan = String(getValidCellspan(colspan));
+    node.dataset.tag = tag;
     style && (node.dataset.style = style);
     try {
       emptyRow && (node.dataset.emptyRow = JSON.stringify(emptyRow));
@@ -56,13 +58,23 @@ export class TableCellInnerFormat extends ContainerFormat {
   }
 
   static formats(domNode: HTMLElement) {
-    const { tableId, rowId, colId, rowspan, colspan, style, emptyRow } = domNode.dataset;
+    const {
+      tableId,
+      rowId,
+      colId,
+      rowspan,
+      colspan,
+      style,
+      emptyRow,
+      tag = 'td',
+    } = domNode.dataset;
     const value: Record<string, any> = {
       tableId: String(tableId),
       rowId: String(rowId),
       colId: String(colId),
       rowspan: Number(getValidCellspan(rowspan)),
       colspan: Number(getValidCellspan(colspan)),
+      tag,
     };
     style && (value.style = style);
     try {
@@ -98,6 +110,10 @@ export class TableCellInnerFormat extends ContainerFormat {
       }
     }
 
+    this.clearCache();
+  }
+
+  clearCache() {
     const blocks = this.descendants(Block, 0);
     for (const child of blocks) {
       (child as TypeBlock).cache = {};
@@ -178,6 +194,12 @@ export class TableCellInnerFormat extends ContainerFormat {
     }
   }
 
+  convertTableCell() {
+    if (this.parent.statics.blotName !== blotName.tableCell) return;
+    this.parent.convertTableCell();
+    this.clearCache();
+  }
+
   formatAt(index: number, length: number, name: string, value: any) {
     if (this.children.length === 0) {
       this.appendChild(this.scroll.create(this.statics.defaultChild.blotName));

package/src/modules/table-menu/constants.ts

@@ -4,6 +4,7 @@ import Quill from 'quill';
 import AutoFull from '../../svg/auto-full.svg';
 import Background from '../../svg/background.svg';
 import Border from '../../svg/border.svg';
+import ConvertCell from '../../svg/convert-cell.svg';
 import Copy from '../../svg/copy.svg';
 import Cut from '../../svg/cut.svg';
 import InsertBottom from '../../svg/insert-bottom.svg';
@@ -176,7 +177,7 @@ export const tableMenuTools: Record<string, Tool> = {
     name: 'InsertCaption',
     icon: TableHead,
     tip: 'Insert table caption',
-    handle(tableModule) {
+    handle: (tableModule) => {
       if (!tableModule.table) return;
       const tableMainBlot = Quill.find(tableModule.table) as TableMainFormat;
       if (!tableMainBlot) return;
@@ -187,6 +188,16 @@ export const tableMenuTools: Record<string, Tool> = {
       tableMainBlot.insertBefore(tableCaption, tableMainBlot.children.head);
     },
   },
+  ToggleTdBetweenTh: {
+    name: 'ToggleTdBetweenTh',
+    icon: ConvertCell,
+    tip: 'Toggle td between th',
+    handle: (tableModule, selectedTds) => {
+      for (const td of selectedTds) {
+        td.convertTableCell();
+      }
+    },
+  },
 };
 
 export const maxSaveColorCount = 10;

package/src/modules/table-selection.ts

@@ -525,18 +525,20 @@ export class TableSelection {
 
   removeCell = (e: KeyboardEvent) => {
     const range = this.quill.getSelection();
-    if (range || (e.key !== 'Backspace' && e.key !== 'Delete')) return;
+    const activeElement = document.activeElement;
+    if (range || (e.key !== 'Backspace' && e.key !== 'Delete') || !this.quill.root.contains(activeElement)) return;
 
-    for (const td of this.selectedTds) {
-      td.deleteAt(0, td.length() - 1);
-    }
     if (this.table) {
       const tableMain = Quill.find(this.table) as TableMainFormat;
       const cells = tableMain.descendants(TableCellInnerFormat);
       if (this.selectedTds.length === cells.length) {
         tableMain.remove();
+        return;
       }
     }
+    for (const td of this.selectedTds) {
+      td.deleteAt(0, td.length() - 1);
+    }
   };
 
   showDisplay() {

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":3198.3800000000047,"failed":false}],[":__tests__/unit/table-redo-undo.test.ts",{"duration":8473.984600000002,"failed":false}],[":__tests__/unit/table-hack.test.ts",{"duration":2830.0276,"failed":false}],[":__tests__/unit/table-insert.test.ts",{"duration":4750.2608,"failed":false}],[":__tests__/unit/table-cell-merge.test.ts",{"duration":3491.4125,"failed":false}],[":__tests__/unit/table-blots.test.ts",{"duration":2240.7780000000002,"failed":false}],[":__tests__/unit/utils.test.ts",{"duration":640.7419,"failed":false}],[":__tests__/unit/table-remove.test.ts",{"duration":2719.4262,"failed":false}],[":__tests__/unit/table-caption.test.ts",{"duration":1264.7592,"failed":false}]]}
+{"version":"3.2.3","results":[[":__tests__/unit/utils.test-d.ts",{"duration":0,"failed":false}],[":__tests__/unit/table-clipboard.test.ts",{"duration":7348.2325000000055,"failed":false}],[":__tests__/unit/table-redo-undo.test.ts",{"duration":7314.907299999999,"failed":false}],[":__tests__/unit/table-hack.test.ts",{"duration":2628.3711000000003,"failed":false}],[":__tests__/unit/table-cell-merge.test.ts",{"duration":2576.8806999999997,"failed":false}],[":__tests__/unit/table-insert.test.ts",{"duration":4933.0411,"failed":false}],[":__tests__/unit/table-blots.test.ts",{"duration":2238.9622,"failed":false}],[":__tests__/unit/utils.test.ts",{"duration":1362.8192000000004,"failed":false}],[":__tests__/unit/table-remove.test.ts",{"duration":1996.3753999999994,"failed":false}],[":__tests__/unit/table-caption.test.ts",{"duration":1237.1392,"failed":false}]]}

package/src/style/index.less

@@ -69,13 +69,16 @@
         table-layout: fixed;
       }
       tr + tr {
-        td {
+        td,
+        th {
           border-top: none;
         }
       }
-      td {
+      td,
+      th {
         border: 1px solid #a1a1aa;
-        & + td {
+        & + td,
+        & + th {
           border-left: none;
         }
       }

package/src/svg/convert-cell.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
+  <!-- Icon from Material Symbols by Google - https://github.com/google/material-design-icons/blob/master/LICENSE -->
+  <path
+    fill="currentColor"
+    d="M11 21V9H3V5q0-.825.588-1.412T5 3h14q.825 0 1.413.588T21 5v14q0 .825-.587 1.413T19 21zm2-2h6v-4h-6zm0-6h6V9h-6zM5 7h14V5H5zM3 22v-2h2.55q-1.2-.575-1.937-1.7t-.738-2.55q0-1.975 1.388-3.363T7.625 11v2q-1.125 0-1.937.8t-.813 1.95q0 .975.6 1.725t1.525.95V16h2v6z"
+  />
+</svg>

package/src/utils/is.ts

@@ -5,3 +5,4 @@ export const isString = (val: unknown): val is string => typeof val === 'string'
 export const isNumber = (val: unknown): val is number => typeof val === 'number';
 export const isObject = (val: unknown): val is Record<any, any> => val !== null && typeof val === 'object';
 export const isValidCellspan = (val: unknown): boolean => !Number.isNaN(val) && Number(val) > 0;
+export const ensureArray = <T>(val: T | T[]): T[] => isArray(val) ? val : [val];

package/src/utils/types.ts

@@ -88,6 +88,7 @@ export interface TableCellValue {
   colspan: number;
   style?: string;
   emptyRow?: string[];
+  tag?: 'td' | 'th';
 }
 export interface TableRowValue {
   tableId: string;