quill-table-up 2.1.9 → 2.2.0

package/src/svg/insert-bottom.svg

@@ -1 +1,6 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M4 3h14a2 2 0 0 1 2 2v7.08a6 6 0 0 0-4.32.92H12v4h1.08c-.11.68-.11 1.35 0 2H4a2 2 0 0 1-2-2V5c0-1.1.9-2 2-2m0 4v4h6V7zm8 0v4h6V7zm-8 6v4h6v-4zm11.94 5.5h2v-4h2v4h2l-3 3z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
+  <path
+    fill="currentColor"
+    d="M4 3h14a2 2 0 0 1 2 2v7.08a6 6 0 0 0-4.32.92H12v4h1.08c-.11.68-.11 1.35 0 2H4a2 2 0 0 1-2-2V5c0-1.1.9-2 2-2m0 4v4h6V7zm8 0v4h6V7zm-8 6v4h6v-4zm11.94 5.5h2v-4h2v4h2l-3 3z"
+  />
+</svg>

package/src/svg/insert-left.svg

@@ -1 +1,6 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M4 3h14a2 2 0 0 1 2 2v7.08a6 6 0 0 0-4.32.92H12v4h1.08c-.11.68-.11 1.35 0 2H4a2 2 0 0 1-2-2V5c0-1.1.9-2 2-2m0 4v4h6V7zm8 0v4h6V7zm-8 6v4h6v-4zm14.44 2v2h4v2h-4v2l-3-3z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
+  <path
+    fill="currentColor"
+    d="M4 3h14a2 2 0 0 1 2 2v7.08a6 6 0 0 0-4.32.92H12v4h1.08c-.11.68-.11 1.35 0 2H4a2 2 0 0 1-2-2V5c0-1.1.9-2 2-2m0 4v4h6V7zm8 0v4h6V7zm-8 6v4h6v-4zm14.44 2v2h4v2h-4v2l-3-3z"
+  />
+</svg>

package/src/svg/insert-right.svg

@@ -1 +1,6 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M4 3h14a2 2 0 0 1 2 2v7.08a6 6 0 0 0-4.32.92H12v4h1.08c-.11.68-.11 1.35 0 2H4a2 2 0 0 1-2-2V5c0-1.1.9-2 2-2m0 4v4h6V7zm8 0v4h6V7zm-8 6v4h6v-4zm15.44 8v-2h-4v-2h4v-2l3 3z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
+  <path
+    fill="currentColor"
+    d="M4 3h14a2 2 0 0 1 2 2v7.08a6 6 0 0 0-4.32.92H12v4h1.08c-.11.68-.11 1.35 0 2H4a2 2 0 0 1-2-2V5c0-1.1.9-2 2-2m0 4v4h6V7zm8 0v4h6V7zm-8 6v4h6v-4zm15.44 8v-2h-4v-2h4v-2l3 3z"
+  />
+</svg>

package/src/svg/insert-top.svg

@@ -1 +1,6 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M4 3h14a2 2 0 0 1 2 2v7.08a6 6 0 0 0-4.32.92H12v4h1.08c-.11.68-.11 1.35 0 2H4a2 2 0 0 1-2-2V5c0-1.1.9-2 2-2m0 4v4h6V7zm8 0v4h6V7zm-8 6v4h6v-4zm17.94 4.5h-2v4h-2v-4h-2l3-3z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
+  <path
+    fill="currentColor"
+    d="M4 3h14a2 2 0 0 1 2 2v7.08a6 6 0 0 0-4.32.92H12v4h1.08c-.11.68-.11 1.35 0 2H4a2 2 0 0 1-2-2V5c0-1.1.9-2 2-2m0 4v4h6V7zm8 0v4h6V7zm-8 6v4h6v-4zm17.94 4.5h-2v4h-2v-4h-2l3-3z"
+  />
+</svg>

package/src/svg/merge-cell.svg

@@ -1 +1,6 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M5 10H3V4h8v2H5zm14 8h-6v2h8v-6h-2zM5 18v-4H3v6h8v-2zM21 4h-8v2h6v4h2zM8 13v2l3-3l-3-3v2H3v2zm8-2V9l-3 3l3 3v-2h5v-2z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
+  <path
+    fill="currentColor"
+    d="M5 10H3V4h8v2H5zm14 8h-6v2h8v-6h-2zM5 18v-4H3v6h8v-2zM21 4h-8v2h6v4h2zM8 13v2l3-3l-3-3v2H3v2zm8-2V9l-3 3l3 3v-2h5v-2z"
+  />
+</svg>

package/src/svg/remove-column.svg

@@ -1 +1,6 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M4 2h7a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2m0 8v4h7v-4zm0 6v4h7v-4zM4 4v4h7V4zm13.59 8L15 9.41L16.41 8L19 10.59L21.59 8L23 9.41L20.41 12L23 14.59L21.59 16L19 13.41L16.41 16L15 14.59z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
+  <path
+    fill="currentColor"
+    d="M4 2h7a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2m0 8v4h7v-4zm0 6v4h7v-4zM4 4v4h7V4zm13.59 8L15 9.41L16.41 8L19 10.59L21.59 8L23 9.41L20.41 12L23 14.59L21.59 16L19 13.41L16.41 16L15 14.59z"
+  />
+</svg>

package/src/svg/remove-row.svg

@@ -1 +1,6 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M9.41 13L12 15.59L14.59 13L16 14.41L13.41 17L16 19.59L14.59 21L12 18.41L9.41 21L8 19.59L10.59 17L8 14.41zM22 9a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2zM4 9h4V6H4zm6 0h4V6h-4zm6 0h4V6h-4z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
+  <path
+    fill="currentColor"
+    d="M9.41 13L12 15.59L14.59 13L16 14.41L13.41 17L16 19.59L14.59 21L12 18.41L9.41 21L8 19.59L10.59 17L8 14.41zM22 9a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2zM4 9h4V6H4zm6 0h4V6h-4zm6 0h4V6h-4z"
+  />
+</svg>

package/src/svg/remove-table.svg

@@ -1 +1,6 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="m15.46 15.88l1.42-1.42L19 16.59l2.12-2.13l1.42 1.42L20.41 18l2.13 2.12l-1.42 1.42L19 19.41l-2.12 2.13l-1.42-1.42L17.59 18zM4 3h14a2 2 0 0 1 2 2v7.08a6 6 0 0 0-4.32.92H12v4h1.08c-.11.68-.11 1.35 0 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2m0 4v4h6V7zm8 0v4h6V7zm-8 6v4h6v-4z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
+  <path
+    fill="currentColor"
+    d="m15.46 15.88l1.42-1.42L19 16.59l2.12-2.13l1.42 1.42L20.41 18l2.13 2.12l-1.42 1.42L19 19.41l-2.12 2.13l-1.42-1.42L17.59 18zM4 3h14a2 2 0 0 1 2 2v7.08a6 6 0 0 0-4.32.92H12v4h1.08c-.11.68-.11 1.35 0 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2m0 4v4h6V7zm8 0v4h6V7zm-8 6v4h6v-4z"
+  />
+</svg>

package/src/svg/split-cell.svg

@@ -1 +1,6 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M19 14h2v6H3v-6h2v4h14zM3 4v6h2V6h14v4h2V4zm8 7v2H8v2l-3-3l3-3v2zm5 0V9l3 3l-3 3v-2h-3v-2z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
+  <path
+    fill="currentColor"
+    d="M19 14h2v6H3v-6h2v4h14zM3 4v6h2V6h14v4h2V4zm8 7v2H8v2l-3-3l3-3v2zm5 0V9l3 3l-3 3v-2h-3v-2z"
+  />
+</svg>

package/src/svg/table-head.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
+  <!-- Icon from TDesign Icons by TDesign - https://github.com/Tencent/tdesign-icons/blob/main/LICENSE -->
+  <path fill="currentColor" d="M21 10v12h-2V12H5v10H3V10zm0-8v6H3V2zm-2 2H5v2h14z" />
+</svg>

package/src/table-up.ts

@@ -4,9 +4,9 @@ import type TypeKeyboard from 'quill/modules/keyboard';
 import type TypeToolbar from 'quill/modules/toolbar';
 import type { InternalModule, InternalTableSelectionModule, QuillTheme, QuillThemePicker, TableCellValue, TableConstantsData, TableTextOptions, TableUpOptions } from './utils';
 import Quill from 'quill';
-import { BlockOverride, ContainerFormat, ScrollOverride, TableBodyFormat, TableCellFormat, TableCellInnerFormat, TableColFormat, TableColgroupFormat, TableMainFormat, TableRowFormat, TableWrapperFormat } from './formats';
+import { BlockOverride, ContainerFormat, ScrollOverride, TableBodyFormat, TableCaptionFormat, TableCellFormat, TableCellInnerFormat, TableColFormat, TableColgroupFormat, TableMainFormat, TableRowFormat, TableWrapperFormat } from './formats';
 import { TableClipboard } from './modules';
-import { blotName, createBEM, createSelectBox, debounce, findParentBlot, findParentBlots, isForbidInTable, isFunction, isNumber, isString, limitDomInViewPort, mixinClass, randomId, tableCantInsert, tableUpEvent, tableUpInternal, tableUpSize } from './utils';
+import { blotName, createBEM, createSelectBox, cssTextToObject, debounce, findParentBlot, findParentBlots, isForbidInTable, isFunction, isNumber, isString, limitDomInViewPort, mixinClass, objectToCssText, randomId, tableCantInsert, tableUpEvent, tableUpInternal, tableUpSize } from './utils';
 
 const Parchment = Quill.import('parchment');
 const Delta = Quill.import('delta');
@@ -67,10 +67,10 @@ export function defaultCustomSelect(tableModule: TableUp, picker: QuillThemePick
 
 function generateTableArrowHandler(up: boolean) {
   return {
+    bindInHead: false,
     key: up ? 'ArrowUp' : 'ArrowDown',
     collapsed: true,
     format: [blotName.tableCellInner],
-    bindInHead: false,
     handler(this: { quill: Quill }, range: TypeRange, context: Context) {
       let tableBlot: TableWrapperFormat;
       let tableMain: TableMainFormat;
@@ -86,7 +86,25 @@ function generateTableArrowHandler(up: boolean) {
       const colIds = tableMain.getColIds();
       const direction = up ? 'prev' : 'next';
       const childDirection = up ? 'tail' : 'head';
-      const aroundLine = tableBlot[direction];
+      const tableCaption = tableBlot.descendants(TableCaptionFormat, 0)[0];
+
+      let aroundLine;
+      if (tableCaption) {
+        const captionSide = window.getComputedStyle(tableCaption.domNode);
+        if (direction === 'next' && captionSide.captionSide === 'bottom') {
+          aroundLine = tableCaption;
+        }
+        else if (direction === 'next') {
+          aroundLine = tableBlot.next;
+        }
+        else {
+          aroundLine = tableCaption;
+        }
+      }
+      else {
+        aroundLine = tableBlot[direction];
+      }
+
       if (context.line[direction] || !aroundLine) {
         return true;
       }
@@ -114,6 +132,7 @@ function generateTableArrowHandler(up: boolean) {
 export class TableUp {
   static moduleName: string = tableUpInternal.moduleName;
   static toolName: string = blotName.tableWrapper;
+  // TODO: add custom property `bindInHead`, but Quill doesn't export `BindingObject`
   static keyboradHandler = {
     'forbid remove table by backspace': {
       bindInHead: true,
@@ -159,14 +178,25 @@ export class TableUp {
     },
     'table up': generateTableArrowHandler(true),
     'table down': generateTableArrowHandler(false),
+    'table caption break': {
+      bindInHead: true,
+      key: 'Enter',
+      shiftKey: null,
+      format: [blotName.tableCaption],
+      handler(this: { quill: Quill }, _range: TypeRange, _context: Context) {
+        return false;
+      },
+    },
   };
 
   static register() {
     TableWrapperFormat.allowedChildren = [TableMainFormat];
 
-    TableMainFormat.allowedChildren = [TableBodyFormat, TableColgroupFormat];
+    TableMainFormat.allowedChildren = [TableBodyFormat, TableColgroupFormat, TableCaptionFormat];
     TableMainFormat.requiredContainer = TableWrapperFormat;
 
+    TableCaptionFormat.requiredContainer = TableMainFormat;
+
     TableColgroupFormat.allowedChildren = [TableColFormat];
     TableColgroupFormat.requiredContainer = TableMainFormat;
 
@@ -201,6 +231,7 @@ export class TableUp {
       [`formats/${blotName.tableBody}`]: TableBodyFormat,
       [`formats/${blotName.tableCol}`]: TableColFormat,
       [`formats/${blotName.tableColgroup}`]: TableColgroupFormat,
+      [`formats/${blotName.tableCaption}`]: TableCaptionFormat,
       [`formats/${blotName.tableMain}`]: TableMainFormat,
       [`formats/${blotName.tableWrapper}`]: TableWrapperFormat,
       'modules/clipboard': TableClipboard,
@@ -364,17 +395,16 @@ export class TableUp {
   quillHack() {
     const originGetSemanticHTML = this.quill.getSemanticHTML;
     this.quill.getSemanticHTML = ((index: number = 0, length?: number) => {
-      const tableCellInnerFormat = Quill.import(`formats/${blotName.tableCellInner}`) as typeof TableCellInnerFormat;
-      const inners = this.quill.scroll.domNode.querySelectorAll(`.${tableCellInnerFormat.className}`);
-      for (const inner of Array.from(inners)) {
-        inner.setAttribute('contenteditable', String(false));
-      }
       const html = originGetSemanticHTML.call(this.quill, index, length);
-      const isEnabled = this.quill.isEnabled();
-      for (const inner of Array.from(inners)) {
-        inner.setAttribute('contenteditable', String(isEnabled));
+
+      const tableWrapperFormat = Quill.import(`formats/${blotName.tableWrapper}`) as typeof TableWrapperFormat;
+      const parser = new DOMParser();
+      const doc = parser.parseFromString(html, 'text/html');
+      for (const node of Array.from(doc.querySelectorAll(`.${tableWrapperFormat.className} caption[contenteditable], .${tableWrapperFormat.className} td > [contenteditable]`))) {
+        node.removeAttribute('contenteditable');
       }
-      return html;
+
+      return doc.body.innerHTML;
     }) as typeof originGetSemanticHTML;
 
     // make sure toolbar item can format selected cells
@@ -430,7 +460,7 @@ export class TableUp {
     if (toolbar) {
       const cleanHandler = toolbar.handlers?.clean;
       if (cleanHandler) {
-        const cleanFormatExcludeTable = (index: number, length: number, cleanCellStyle: boolean = true) => {
+        const cleanFormatExcludeTable = (index: number, length: number, changeCellStyle: false | ((styleStr: string | undefined) => string) = () => '') => {
           // base on `removeFormat`. but not remove tableCellInner
           const text = this.quill.getText(index, length);
           const [line, offset] = this.quill.getLine(index + length);
@@ -458,11 +488,15 @@ export class TableUp {
 
             if (attributes) {
               const { [blotName.tableCellInner]: nullValue, ...attrs } = attributes;
-              if (cleanCellStyle) {
+              if (changeCellStyle) {
                 const tableCellInner = contents.slice(deltaIndex - 1, deltaIndex).ops[0];
                 if (tableCellInner && tableCellInner.attributes && tableCellInner.attributes[blotName.tableCellInner]) {
                   const tableCellInnerValue = tableCellInner.attributes[blotName.tableCellInner] as TableCellValue;
                   const { style, ...value } = tableCellInnerValue;
+                  const newStyle = changeCellStyle(style);
+                  if (newStyle) {
+                    return { ...other, attributes: { ...attrs, [blotName.tableCellInner]: { style: newStyle, ...value } } };
+                  }
                   return { ...other, attributes: { ...attrs, [blotName.tableCellInner]: value } };
                 }
               }
@@ -486,16 +520,60 @@ export class TableUp {
           }
           // if selection range is not in table, but use the TableSelection selected cells
           // clean all other formats in cell
-          if (tableUpModule && tableUpModule.tableSelection && tableUpModule.tableSelection.selectedTds.length > 0) {
+          if (tableUpModule && tableUpModule.tableSelection && tableUpModule.tableSelection.selectedTds.length > 0 && tableUpModule.tableSelection.table) {
+            const tableMain = Quill.find(tableUpModule.tableSelection.table) as TableMainFormat;
+            if (!tableMain) {
+              console.warn('TableMainFormat not found');
+              return;
+            }
             const selectedTds = tableUpModule.tableSelection.selectedTds;
 
+            // get all need clean style cells. include border-right/border-bottom effect cells
+            const editTds = new Set<TableCellFormat>();
+            const tds: { td: TableCellFormat; cleanBorder: 'bottom' | 'right' | true }[] = [];
+            for (const innerTd of selectedTds) {
+              if (innerTd.parent instanceof TableCellFormat) {
+                for (const td of innerTd.parent.getNearByCell('top')) {
+                  if (editTds.has(td)) continue;
+                  editTds.add(td);
+                  tds.push({ td, cleanBorder: 'bottom' });
+                }
+                for (const td of innerTd.parent.getNearByCell('left')) {
+                  if (editTds.has(td)) continue;
+                  editTds.add(td);
+                  tds.push({ td, cleanBorder: 'right' });
+                }
+
+                editTds.add(innerTd.parent);
+                tds.push({ td: innerTd.parent, cleanBorder: true });
+              }
+            }
+            // sort cells makesure index correct
+            const allCells = tableMain.descendants(TableCellFormat);
+            const cellIndexMap = new Map(allCells.map((cell, index) => [cell, index]));
+            tds.sort((a, b) => cellIndexMap.get(a.td)! - cellIndexMap.get(b.td)!);
+
+            // compute delta
             let delta = new Delta();
             let lastIndex = 0;
-            for (const innerTd of selectedTds) {
-              const index = innerTd.offset(this.quill.scroll);
-              const length = innerTd.length();
+            for (const { td, cleanBorder } of tds) {
+              const index = td.getCellInner().offset(this.quill.scroll);
+              const length = td.getCellInner().length();
               // `line` length will include a break(\n) at the end. minus 1 to remove break
-              const diff = cleanFormatExcludeTable(index, length - 1);
+              const diff = cleanFormatExcludeTable(
+                index,
+                length - 1,
+                (styleStr: string | undefined) => {
+                  if (!styleStr || cleanBorder === true) return '';
+                  // only clean border-right/border-bottom style
+                  const css = cssTextToObject(styleStr);
+                  const filterStyle = Object.keys(css).filter(key => !key.startsWith(`border-${cleanBorder}`)).reduce((acc: Record<string, string>, key: string) => {
+                    acc[key] = css[key];
+                    return acc;
+                  }, {});
+                  return objectToCssText(filterStyle);
+                },
+              );
               const cellDiff = new Delta().retain(index - lastIndex).concat(diff);
               delta = delta.concat(cellDiff);
               lastIndex = index + length;
@@ -617,110 +695,69 @@ export class TableUp {
     }
 
     if (!tableMain) return '';
-
-    const colgroupBlot = tableMain.children.head;
-    const tbodyBlot = tableMain.children.tail;
-    if (!tbodyBlot || !colgroupBlot) {
-      console.error('tableMain has no tbody or colgroup');
-      return '';
-    }
-
-    function getElementTags(element: HTMLElement) {
-      const tagName = element.tagName.toLowerCase();
-      const attributes = Array.from(element.attributes)
-        .map(attr => `${attr.name}="${attr.value}"`)
-        .join(' ');
-      const startTag = `<${tagName}${attributes ? ` ${attributes}` : ''}>`;
-      const selfClosingTags = [
-        'area',
-        'base',
-        'br',
-        'col',
-        'embed',
-        'hr',
-        'img',
-        'input',
-        'link',
-        'meta',
-        'param',
-        'source',
-        'track',
-        'wbr',
-      ];
-
-      return {
-        startTag,
-        endTag: selfClosingTags.includes(tagName) ? '' : `</${tagName}>`,
-      };
-    }
-
-    let html = '';
-    const colIds: Set<string> = new Set();
-    let tdRows = 0;
-    let lastTrId: string | null = null;
+    const tableIndex = this.quill.getIndex(tableMain);
+    const tableLength = tableMain.length();
+    const tableHTML = this.quill.getSemanticHTML(tableIndex, tableLength);
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(tableHTML, 'text/html');
+
+    const cellColWidth: string[] = [];
+    const cellColIds = new Set<string>();
+    const cellIds = new Set<string>();
     for (const td of tds) {
-      const i = this.quill.getIndex(td);
-      const len = td.length();
-      const htmlStr = this.quill.getSemanticHTML(i, len);
-      const parser = new DOMParser();
-      const doc = parser.parseFromString(htmlStr, 'text/html');
-      // remove contenteditable on tableCellInner
-      for (const td of Array.from(doc.querySelectorAll('td > div[contenteditable]'))) {
-        td.removeAttribute('contenteditable');
+      cellColIds.add(td.colId);
+      cellIds.add(`${td.rowId}-${td.colId}`);
+    }
+    // filter col
+    for (const col of Array.from(doc.querySelectorAll('col'))) {
+      if (!cellColIds.has(col.dataset.colId!)) {
+        col.remove();
       }
-      const tr = doc.querySelector('tr')!;
-      if (td.rowId !== lastTrId) {
-        tdRows += 1;
-        const { startTag, endTag } = getElementTags(tr);
-        html += `${html ? endTag : ''}${startTag}${tr.innerHTML}`;
+      else {
+        cellColWidth.push(col.getAttribute('width')!);
+      }
+    }
+    // filter td
+    let rowCount = 0;
+    let lastRowId: string | null = null;
+    for (const td of Array.from(doc.querySelectorAll('td'))) {
+      if (!cellIds.has(`${td.dataset.rowId}-${td.dataset.colId}`)) {
+        const parent = td.parentElement;
+        td.remove();
+        if (parent && parent.children.length <= 0) {
+          parent.remove();
+        }
       }
       else {
-        html += tr.innerHTML;
+        if (lastRowId !== td.dataset.rowId) {
+          rowCount += 1;
+          lastRowId = td.dataset.rowId!;
+        }
       }
-      lastTrId = td.rowId;
-      colIds.add(td.colId);
     }
-    html += '</tr>';
-
-    const { startTag, endTag } = getElementTags(tbodyBlot.domNode as HTMLElement);
-    html = `${startTag}${html}${endTag}`;
-
-    const cols = tableMain.getCols();
-    const { startTag: colgroupStartTag, endTag: colgroupEndTag } = getElementTags(colgroupBlot.domNode as HTMLElement);
-    let colStr = '';
-    let width = 0;
-    const convertCols = cols.filter(col => colIds.has(col.colId)).map(col => col.clone() as TableColFormat);
+    // calculate width
+    const cols = Array.from(doc.querySelectorAll('col'));
+    const colsValue = cols.map(col => TableColFormat.value(col));
     if (tableMain.full) {
-      // Complete the remaining width
-      const totalWidth = convertCols.reduce((total, col) => total + col.width, 0);
-      const totalRemainingWidth = 100 - totalWidth;
-      const part = totalRemainingWidth / totalWidth;
+      const totalWidth = colsValue.reduce((total, col) => col.width + total, 0);
 
-      for (const col of convertCols) {
-        col.width += Math.round(col.width * part);
+      for (const [i, col] of colsValue.entries()) {
+        col.width = Math.round((col.width / totalWidth) * 100);
+        cols[i].setAttribute('width', `${col.width}%`);
       }
     }
-    for (const col of convertCols) {
-      const { startTag } = getElementTags(col.domNode as HTMLElement);
-      colStr += startTag;
-      width += col.width;
-    }
-    html = colgroupStartTag + colStr + colgroupEndTag + html;
-
-    const tableMainDom = tableMain.domNode.cloneNode() as HTMLElement;
-    if (!tableMain.full) {
+    else {
+      let width = 0;
+      for (const col of colsValue) {
+        width += col.width;
+      }
+      const tableMainDom = doc.querySelector('table')!;
       tableMainDom.style.width = `${width}px`;
     }
 
-    const { startTag: mainStartTag, endTag: mainEndTag } = getElementTags(tableMainDom);
-    html = mainStartTag + html + mainEndTag;
-
-    const { startTag: wrapperStartTag, endTag: wrapperEndTag } = getElementTags(tableMain.parent.domNode as HTMLElement);
-    html = wrapperStartTag + html + wrapperEndTag;
-
     if (isCut) {
       const trs = tableMain.getRows();
-      if (tdRows === trs.length) {
+      if (rowCount === trs.length) {
         this.removeCol(tds);
       }
       else {
@@ -729,7 +766,7 @@ export class TableUp {
         }
       }
     }
-    return html;
+    return doc.body.innerHTML;
   }
 
   insertTable(rows: number, columns: number) {
@@ -962,7 +999,7 @@ export class TableUp {
       colgroup.insertColByIndex(columnIndex, {
         tableId,
         colId: newColId,
-        width: tableBlot.full ? '6%' : '160px',
+        width: tableBlot.full ? 6 : 160,
         full: tableBlot.full,
       });
     }

package/src/utils/bem.ts

@@ -1,6 +1,6 @@
 import { cssNamespace } from './constants';
 
-export const createBEM = (b: string, n: string = cssNamespace) => {
+export function createBEM(b: string, n: string = cssNamespace) {
   const prefix = n ? `${n}-` : '';
   return {
     /** n-b */
@@ -20,4 +20,4 @@ export const createBEM = (b: string, n: string = cssNamespace) => {
     /** is-n */
     is: (n: string) => `is-${n}`,
   };
-};
+}

package/src/utils/blot-helper.ts

@@ -63,6 +63,18 @@ export function findAllParentBlot(Blot: TypeParchment.Blot) {
   return blots;
 }
 
+export function findChildBlot<T extends TypeParchment.BlotConstructor>(parent: TypeParchment.Parent, blot: T) {
+  const descendants: InstanceType<T>[] = [];
+  const next = parent.children.iterator();
+  let cur: TypeParchment.Blot | null = null;
+  while ((cur = next())) {
+    if (cur instanceof blot) {
+      descendants.push(cur as InstanceType<T>);
+    }
+  }
+  return descendants;
+}
+
 function mixinProps<T = any, U = any>(target: T, source: U) {
   for (const prop of Object.getOwnPropertyNames(source)) {
     if (/^constructor$/.test(prop)) continue;

package/src/utils/color.ts

@@ -10,7 +10,7 @@ export interface RGB {
   b: number;
   a: number;
 }
-const normalizeValue = function (value: number | string, max: number | string) {
+function normalizeValue(value: number | string, max: number | string) {
   value = Math.min(max as number, Math.max(0, Number.parseFloat(`${value}`)));
 
   // Handle floating point rounding errors
@@ -20,24 +20,24 @@ const normalizeValue = function (value: number | string, max: number | string) {
 
   // Convert into [0, 1] range if it isn't already
   return (value % (max as number)) / Number.parseFloat(max as string);
-};
-export const validateHSB = (hsb: HSB): HSB => {
+}
+export function validateHSB(hsb: HSB): HSB {
   return {
     h: Math.min(360, Math.max(0, hsb.h)),
     s: Math.min(100, Math.max(0, hsb.s)),
     b: Math.min(100, Math.max(0, hsb.b)),
     a: Math.min(1, Math.max(0, hsb.a)),
   };
-};
-export const HEXtoRGB = (hex: string): RGB => {
+}
+export function HEXtoRGB(hex: string): RGB {
   hex = hex.startsWith('#') ? hex.slice(1) : hex;
   const r = Number.parseInt(hex.slice(0, 2), 16);
   const g = Number.parseInt(hex.slice(2, 4), 16);
   const b = Number.parseInt(hex.slice(4, 6), 16);
   const a = Number((Number.parseInt(hex.slice(6, 8) || 'ff', 16) / 255).toFixed(2));
   return { r, g, b, a };
-};
-export const RGBtoHSB = (rgb: RGB): HSB => {
+}
+export function RGBtoHSB(rgb: RGB): HSB {
   let { r, g, b, a } = rgb;
   r = normalizeValue(r, 255);
   g = normalizeValue(g, 255);
@@ -73,8 +73,8 @@ export const RGBtoHSB = (rgb: RGB): HSB => {
   }
 
   return { h: h! * 360, s: s * 100, b: v * 100, a };
-};
-export const HSBtoRGB = (hsb: HSB): RGB => {
+}
+export function HSBtoRGB(hsb: HSB): RGB {
   let { h, s, b, a } = hsb;
   h = normalizeValue(h, 360) * 6;
   s = normalizeValue(s, 100);
@@ -96,8 +96,8 @@ export const HSBtoRGB = (hsb: HSB): RGB => {
     b: Math.round(v * 255),
     a,
   };
-};
-export const RGBtoHEX = (rgb: RGB): string => {
+}
+export function RGBtoHEX(rgb: RGB): string {
   const hex = [rgb.r.toString(16), rgb.g.toString(16), rgb.b.toString(16), Math.round(rgb.a * 255).toString(16)];
   for (const key in hex) {
     if (hex[key].length === 1) {
@@ -105,5 +105,5 @@ export const RGBtoHEX = (rgb: RGB): string => {
     }
   }
   return hex.join('');
-};
+}
 export const HSBtoHEX = (hsb: HSB): string => RGBtoHEX(HSBtoRGB(hsb));

package/src/utils/components/button.ts

@@ -5,7 +5,7 @@ interface ButtonOptions {
   type: 'confirm' | 'default';
   content: HTMLElement | string;
 }
-export const createButton = (options?: Partial<ButtonOptions>) => {
+export function createButton(options?: Partial<ButtonOptions>) {
   const { type = 'default', content } = options || {};
   const bem = createBEM('button');
   const btn = document.createElement('button');
@@ -19,4 +19,4 @@ export const createButton = (options?: Partial<ButtonOptions>) => {
     }
   }
   return btn;
-};
+}

package/src/utils/components/color-picker.ts

@@ -6,7 +6,7 @@ interface ColorPickerOptions {
   color: string;
   onChange: (color: string) => void;
 }
-export const createColorPicker = (options: Partial<ColorPickerOptions> = {}) => {
+export function createColorPicker(options: Partial<ColorPickerOptions> = {}) {
   const contentWidth = 230;
   const contentHeight = 150;
   const handleSizeSec = 10;
@@ -233,4 +233,4 @@ export const createColorPicker = (options: Partial<ColorPickerOptions> = {}) =>
 
   updateUI();
   return root;
-};
+}

package/src/utils/components/dialog.ts

@@ -6,7 +6,7 @@ interface DialogOptions {
   beforeClose?: () => void;
 }
 let zindex = 8000;
-export const createDialog = ({ child, target = document.body, beforeClose = () => {} }: DialogOptions = {}) => {
+export function createDialog({ child, target = document.body, beforeClose = () => {} }: DialogOptions = {}) {
   const bem = createBEM('dialog');
   const appendTo = target;
   const dialog = document.createElement('div');
@@ -38,4 +38,4 @@ export const createDialog = ({ child, target = document.body, beforeClose = () =
   zindex += 1;
 
   return { dialog, close };
-};
+}

package/src/utils/components/input.ts

@@ -7,7 +7,7 @@ interface InputOptions {
   min?: number;
   [key: string]: any;
 }
-export const createInputItem = (label: string, options: InputOptions) => {
+export function createInputItem(label: string, options: InputOptions) {
   const bem = createBEM('input');
   options.type || (options.type = 'text');
   options.value || (options.value = '');
@@ -71,4 +71,4 @@ export const createInputItem = (label: string, options: InputOptions) => {
   };
 
   return { item: inputItem, input, errorTip };
-};
+}