fix: paste html behavior

src/formats/table-cell-format.ts

@@ -3,6 +3,7 @@ import type { TableRowFormat } from './table-row-format';
 import { blotName } from '../utils';
 import { ContainerFormat } from './container-format';
 import { TableCellInnerFormat } from './table-cell-inner-format';
+import { getValidCellspan } from './utils';
 
 export class TableCellFormat extends ContainerFormat {
   static blotName = blotName.tableCell;
@@ -15,8 +16,8 @@ export class TableCellFormat extends ContainerFormat {
     node.dataset.tableId = tableId;
     node.dataset.rowId = rowId;
     node.dataset.colId = colId;
-    node.setAttribute('rowspan', String(rowspan || 1));
-    node.setAttribute('colspan', String(colspan || 1));
+    node.setAttribute('rowspan', String(getValidCellspan(rowspan)));
+    node.setAttribute('colspan', String(getValidCellspan(colspan)));
     height && (node.style.height = height);
     backgroundColor && (node.style.backgroundColor = backgroundColor);
     borderColor && (node.style.borderColor = borderColor);
@@ -31,8 +32,8 @@ export class TableCellFormat extends ContainerFormat {
       tableId,
       rowId,
       colId,
-      rowspan: Number.isNaN(rowspan) ? 1 : rowspan,
-      colspan: Number.isNaN(colspan) ? 1 : colspan,
+      rowspan: getValidCellspan(rowspan),
+      colspan: getValidCellspan(colspan),
     };
     const { height, backgroundColor, borderColor } = domNode.style;
     height && (value.height = height);

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

@@ -5,6 +5,7 @@ import type { TableCellFormat } from './table-cell-format';
 import Quill from 'quill';
 import { blotName, findParentBlot, findParentBlots } from '../utils';
 import { ContainerFormat } from './container-format';
+import { getValidCellspan } from './utils';
 
 const Block = Quill.import('blots/block') as TypeParchment.BlotConstructor;
 const BlockEmbed = Quill.import('blots/block/embed') as TypeParchment.BlotConstructor;
@@ -24,8 +25,8 @@ export class TableCellInnerFormat extends ContainerFormat {
     node.dataset.tableId = tableId;
     node.dataset.rowId = rowId;
     node.dataset.colId = colId;
-    node.dataset.rowspan = String(rowspan || 1);
-    node.dataset.colspan = String(colspan || 1);
+    node.dataset.rowspan = String(getValidCellspan(rowspan));
+    node.dataset.colspan = String(getValidCellspan(colspan));
     height && (node.dataset.height = height);
     backgroundColor && (node.dataset.backgroundColor = backgroundColor);
     borderColor && (node.dataset.borderColor = borderColor);
@@ -38,8 +39,8 @@ export class TableCellInnerFormat extends ContainerFormat {
       tableId,
       rowId,
       colId,
-      rowspan: Number(rowspan),
-      colspan: Number(colspan),
+      rowspan: Number(getValidCellspan(rowspan)),
+      colspan: Number(getValidCellspan(colspan)),
     };
     height && (value.height = height);
     backgroundColor && (value.backgroundColor = backgroundColor);

src/formats/utils.ts

@@ -0,0 +1,3 @@
+import { isValidCellspan } from '../utils';
+
+export const getValidCellspan = (value: any) => isValidCellspan(value) ? value : 1;

src/index.ts

@@ -341,6 +341,22 @@ export class TableUp {
     let cellCount = 0;
     let colCount = 0;
 
+    // handle paste html or text into table cell
+    const pasteElementIntoCell = (node: Node, delta: TypeDelta, _scroll: TypeParchment.ScrollBlot) => {
+      const range = this.quill.getSelection(true);
+      const formats = this.quill.getFormat(range);
+      const tableCellInnerValue = formats[blotName.tableCellInner];
+      if (tableCellInnerValue) {
+        for (const op of delta.ops) {
+          if (!op.attributes) op.attributes = {};
+          op.attributes[blotName.tableCellInner] = tableCellInnerValue;
+        }
+      }
+      return delta;
+    };
+    this.quill.clipboard.addMatcher(Node.TEXT_NODE, pasteElementIntoCell);
+    this.quill.clipboard.addMatcher(Node.ELEMENT_NODE, pasteElementIntoCell);
+
     this.quill.clipboard.addMatcher('table', (node, delta) => {
       if (delta.ops.length === 0) return delta;
 
@@ -398,7 +414,7 @@ export class TableUp {
       }
       return delta;
     });
-
+    // TODO: paste into table. need break table
     const matchCell = (node: Node, delta: TypeDelta) => {
       const cell = node as HTMLElement;
       const cellFormat = TableCellFormat.formats(cell);
@@ -422,12 +438,7 @@ export class TableUp {
       const ops = [];
       for (const op of delta.ops) {
         if (typeof op.insert === 'string') {
-          const texts = op.insert.replaceAll(/\n+/g, '\n').split('\n');
-          for (const text of texts) {
-            if (text) {
-              ops.push({ insert: text }, { insert: '\n', attributes: { [blotName.tableCellInner]: value } });
-            }
-          }
+          ops.push({ insert: op.insert, attributes: { [blotName.tableCellInner]: value } });
         }
       }
       return new Delta(ops);

src/utils/index.ts

@@ -1,4 +1,5 @@
 export * from './components';
 export * from './constants';
+export * from './is';
 export * from './types';
 export * from './utils';

src/utils/is.ts

@@ -0,0 +1,6 @@
+export const isFunction = (val: any): val is Function => typeof val === 'function';
+export const isBoolean = (val: any): val is boolean => typeof val === 'boolean';
+export const isArray = Array.isArray;
+export const isString = (val: any): val is string => typeof val === 'string';
+
+export const isValidCellspan = (val: any): boolean => !Number.isNaN(val) && Number(val) > 0;

src/utils/utils.ts

@@ -3,11 +3,6 @@ import type { TableBodyFormat, TableCellFormat, TableCellInnerFormat, TableColFo
 import type { blotName } from './constants';
 import type { Constructor } from './types';
 
-export const isFunction = (val: any): val is Function => typeof val === 'function';
-export const isBoolean = (val: any): val is boolean => typeof val === 'boolean';
-export const isArray = Array.isArray;
-export const isString = (val: any): val is string => typeof val === 'string';
-
 export const randomId = () => Math.random().toString(36).slice(2);
 export const debounce = <T extends (...args: any[]) => any>(fn: T, delay: number) => {
   let timestamp: ReturnType<typeof setTimeout>;