quill-table-up 2.3.1 → 2.4.0

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';

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

@@ -1,5 +1,5 @@
 import type { TableCellValue } from '../utils';
-import { blotName, findParentBlot } from '../utils';
+import { blotName, findParentBlot, toCamelCase } from '../utils';
 import { ContainerFormat } from './container-format';
 import { TableCellInnerFormat } from './table-cell-inner-format';
 import { TableRowFormat } from './table-row-format';
@@ -9,14 +9,16 @@ export class TableCellFormat extends ContainerFormat {
   static blotName = blotName.tableCell;
   static tagName = 'td';
   static className = 'ql-table-cell';
-  static allowDataAttrs = new Set(['table-id', 'row-id', 'col-id']);
+  static allowDataAttrs = new Set(['table-id', 'row-id', 'col-id', 'empty-row']);
   static allowAttrs = new Set(['rowspan', 'colspan']);
 
   // keep `isAllowStyle` and `allowStyle` same with TableCellInnerFormat
   static allowStyle = new Set(['background-color', 'border', 'height']);
   static isAllowStyle(str: string): boolean {
+    const cssAttrName = toCamelCase(str);
     for (const style of this.allowStyle) {
-      if (str.startsWith(style)) {
+      // cause `cssTextToObject` will transform css string to camel case style name
+      if (cssAttrName.startsWith(toCamelCase(style))) {
         return true;
       }
     }
@@ -31,6 +33,7 @@ export class TableCellFormat extends ContainerFormat {
       rowspan,
       colspan,
       style,
+      emptyRow,
     } = value;
     const node = super.create() as HTMLElement;
     node.dataset.tableId = tableId;
@@ -39,11 +42,15 @@ export class TableCellFormat extends ContainerFormat {
     node.setAttribute('rowspan', String(getValidCellspan(rowspan)));
     node.setAttribute('colspan', String(getValidCellspan(colspan)));
     style && (node.style.cssText = style);
+    try {
+      emptyRow && (node.dataset.emptyRow = JSON.stringify(emptyRow));
+    }
+    catch {}
     return node;
   }
 
   static formats(domNode: HTMLElement) {
-    const { tableId, rowId, colId } = domNode.dataset;
+    const { tableId, rowId, colId, emptyRow } = domNode.dataset;
     const rowspan = Number(domNode.getAttribute('rowspan'));
     const colspan = Number(domNode.getAttribute('colspan'));
     const value: Record<string, any> = {
@@ -67,6 +74,11 @@ export class TableCellFormat extends ContainerFormat {
       value.style = entries.map(([key, value]) => `${key}: ${value}`).join(';');
     }
 
+    try {
+      emptyRow && (value.emptyRow = JSON.parse(emptyRow));
+    }
+    catch {}
+
     return value;
   }
 
@@ -92,8 +104,15 @@ export class TableCellFormat extends ContainerFormat {
       }
     }
 
-    if (this.children.head && this.children.head.statics.blotName === blotName.tableCellInner && this.domNode.style.cssText) {
-      (this.children.head.domNode as HTMLElement).dataset.style = this.domNode.style.cssText;
+    const headChild = this.children.head;
+    if (
+      this.domNode.style.cssText
+      && headChild
+      && headChild.statics.blotName === blotName.tableCellInner
+      // 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;
     }
   }
 
@@ -193,6 +212,15 @@ export class TableCellFormat extends ContainerFormat {
     return Number(this.domNode.getAttribute('colspan'));
   }
 
+  get emptyRow(): string[] {
+    try {
+      return JSON.parse(this.domNode.dataset.emptyRow!);
+    }
+    catch {
+      return [];
+    }
+  }
+
   getColumnIndex() {
     const table = findParentBlot(this, blotName.tableMain);
     return table.getColIds().indexOf(this.colId);
@@ -221,6 +249,11 @@ export class TableCellFormat extends ContainerFormat {
     if (parent !== null && parent.statics.blotName !== blotName.tableRow) {
       this.wrap(blotName.tableRow, { tableId, rowId });
     }
+    if (this.emptyRow.length > 0) {
+      for (const rowId of this.emptyRow) {
+        this.parent.parent.insertBefore(this.scroll.create(blotName.tableRow, { tableId: this.tableId, rowId }), this.parent.next);
+      }
+    }
 
     super.optimize(context);
   }

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

@@ -4,7 +4,7 @@ import type TypeScroll from 'quill/blots/scroll';
 import type { TableCellValue } from '../utils';
 import type { TableCellFormat } from './table-cell-format';
 import Quill from 'quill';
-import { blotName, cssTextToObject, findParentBlot, findParentBlots } from '../utils';
+import { blotName, cssTextToObject, findParentBlot, findParentBlots, toCamelCase } from '../utils';
 import { ContainerFormat } from './container-format';
 import { getValidCellspan } from './utils';
 
@@ -15,14 +15,16 @@ export class TableCellInnerFormat extends ContainerFormat {
   static blotName = blotName.tableCellInner;
   static tagName = 'div';
   static className = 'ql-table-cell-inner';
-  static allowDataAttrs: Set<string> = new Set(['table-id', 'row-id', 'col-id', 'rowspan', 'colspan']);
+  static allowDataAttrs: Set<string> = new Set(['table-id', 'row-id', 'col-id', 'rowspan', 'colspan', 'empty-row']);
   static defaultChild: TypeParchment.BlotConstructor = Block;
   declare parent: TableCellFormat;
   // keep `isAllowStyle` and `allowStyle` same with TableCellFormat
   static allowStyle = new Set(['background-color', 'border', 'height']);
   static isAllowStyle(str: string): boolean {
+    const cssAttrName = toCamelCase(str);
     for (const style of this.allowStyle) {
-      if (str.startsWith(style)) {
+      // cause `cssTextToObject` will transform css string to camel case style name
+      if (cssAttrName.startsWith(toCamelCase(style))) {
         return true;
       }
     }
@@ -37,6 +39,7 @@ export class TableCellInnerFormat extends ContainerFormat {
       rowspan,
       colspan,
       style,
+      emptyRow,
     } = value;
     const node = super.create() as HTMLElement;
     node.dataset.tableId = tableId;
@@ -45,11 +48,15 @@ export class TableCellInnerFormat extends ContainerFormat {
     node.dataset.rowspan = String(getValidCellspan(rowspan));
     node.dataset.colspan = String(getValidCellspan(colspan));
     style && (node.dataset.style = style);
+    try {
+      emptyRow && (node.dataset.emptyRow = JSON.stringify(emptyRow));
+    }
+    catch {}
     return node;
   }
 
   static formats(domNode: HTMLElement) {
-    const { tableId, rowId, colId, rowspan, colspan, style } = domNode.dataset;
+    const { tableId, rowId, colId, rowspan, colspan, style, emptyRow } = domNode.dataset;
     const value: Record<string, any> = {
       tableId: String(tableId),
       rowId: String(rowId),
@@ -58,6 +65,10 @@ export class TableCellInnerFormat extends ContainerFormat {
       colspan: Number(getValidCellspan(colspan)),
     };
     style && (value.style = style);
+    try {
+      emptyRow && (value.emptyRow = JSON.parse(emptyRow));
+    }
+    catch {}
     return value;
   }
 
@@ -129,11 +140,44 @@ export class TableCellInnerFormat extends ContainerFormat {
     this.setFormatValue('colspan', value);
   }
 
+  get emptyRow(): string[] {
+    try {
+      return JSON.parse(this.domNode.dataset.emptyRow!);
+    }
+    catch {
+      return [];
+    }
+  }
+
+  set emptyRow(value: string[]) {
+    // if value same as currentEmptyRow, do nothing
+    if (this.emptyRow.toString() === value.toString()) return;
+
+    try {
+      if (value.length > 0) {
+        this.setFormatValue('empty-row', JSON.stringify(value), false);
+      }
+      else {
+        this.setFormatValue('empty-row', null, false);
+      }
+    }
+    catch {
+      this.setFormatValue('empty-row', null, false);
+    }
+  }
+
   getColumnIndex() {
     const table = findParentBlot(this, blotName.tableMain);
     return table.getColIds().indexOf(this.colId);
   }
 
+  setStyleByString(styleStr: string) {
+    const style = cssTextToObject(styleStr);
+    for (const [name, value] of Object.entries(style)) {
+      this.setFormatValue(name, value, true);
+    }
+  }
+
   formatAt(index: number, length: number, name: string, value: any) {
     if (this.children.length === 0) {
       this.appendChild(this.scroll.create(this.statics.defaultChild.blotName));
@@ -143,10 +187,7 @@ export class TableCellInnerFormat extends ContainerFormat {
     super.formatAt(index, length, name, value);
     // set style for `td`
     if (value && value.style) {
-      const style = cssTextToObject(value.style);
-      for (const [name, value] of Object.entries(style)) {
-        this.setFormatValue(name, value, true);
-      }
+      this.setStyleByString(value.style);
     }
   }
 
@@ -185,11 +226,15 @@ export class TableCellInnerFormat extends ContainerFormat {
     const blotValue = this.statics.formats(this.domNode);
     // handle BlockEmbed to insert tableCellInner when setContents
     if (this.prev && this.prev instanceof BlockEmbed) {
-      const afterBlock = this.scroll.create('block');
-      this.appendChild(this.prev);
-      this.appendChild(afterBlock);
+      const prev = this.prev;
+      this.insertBefore(prev, this.children.head);
+      if (this.length() <= 1) {
+        const afterBlock = this.scroll.create('block');
+        this.insertBefore(afterBlock, prev.next);
+      }
     }
-    if (parent !== null && parent.statics.blotName !== blotName.tableCell) {
+    const parentIsTableCell = parent !== null && parent.statics.blotName !== blotName.tableCell;
+    if (parentIsTableCell) {
       this.wrap(blotName.tableCell, blotValue);
       // when insert delta like: [ { attributes: { 'table-up-cell-inner': { ... } }, insert: '\n' }, { attributes: { 'table-up-cell-inner': { ... } }, insert: '\n' }, ...]
       // that delta will create dom like: <td><div></div></td>... . that means TableCellInner will be an empty cell without 'block'
@@ -213,6 +258,16 @@ export class TableCellInnerFormat extends ContainerFormat {
       // if cellInner doesn't have child then remove it. not insert a block
       this.remove();
     }
+    else {
+      // update delta data
+      if (
+        this.domNode.dataset.style
+        && parentIsTableCell
+        && parent.domNode.style.cssText !== this.domNode.dataset.style
+      ) {
+        this.setStyleByString(this.domNode.dataset.style);
+      }
+    }
   }
 
   insertBefore(blot: TypeParchment.Blot, ref?: TypeParchment.Blot | null) {
@@ -220,7 +275,7 @@ export class TableCellInnerFormat extends ContainerFormat {
       const cellInnerBlot = blot as TableCellInnerFormat;
       const cellInnerBlotValue = this.statics.formats(cellInnerBlot.domNode);
       const selfValue = this.statics.formats(this.domNode);
-      const isSame = Object.entries(selfValue).every(([key, value]) => value === cellInnerBlotValue[key]);
+      const isSame = Object.entries(selfValue).every(([key, value]) => String(value) === String(cellInnerBlotValue[key]));
 
       if (!isSame) {
         const [selfRow, selfCell] = findParentBlots(this, [blotName.tableRow, blotName.tableCell] as const);
@@ -234,13 +289,6 @@ export class TableCellInnerFormat extends ContainerFormat {
               newCellInner.appendChild(block);
             });
             selfRow.insertBefore(newCellInner.wrap(blotName.tableCell, selfValue), selfCell.next);
-
-            if (this.children.length === 0) {
-              this.remove();
-              if (this.parent.children.length === 0) {
-                this.parent.remove();
-              }
-            }
           }
         }
         // different rowId. split current row. move lines which after ref to next row
@@ -265,7 +313,8 @@ export class TableCellInnerFormat extends ContainerFormat {
         );
       }
       else {
-        return this.parent.insertBefore(cellInnerBlot, this.next);
+        const next = this.split(ref ? ref.offset() : 0);
+        return this.parent.insertBefore(cellInnerBlot, next);
       }
     }
     else if (blot.statics.blotName === blotName.tableCol) {