quill-table-up 2.4.2 → 3.0.0

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

@@ -0,0 +1,7 @@
+import { blotName } from '../utils';
+import { TableBodyFormat } from './table-body-format';
+
+export class TableFootFormat extends TableBodyFormat {
+  static blotName = blotName.tableFoot;
+  static tagName = 'tfoot';
+}

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

@@ -0,0 +1,7 @@
+import { blotName } from '../utils';
+import { TableBodyFormat } from './table-body-format';
+
+export class TableHeadFormat extends TableBodyFormat {
+  static blotName = blotName.tableHead;
+  static tagName = 'thead';
+}

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

@@ -1,6 +1,7 @@
 import type TypeScroll from 'quill/blots/scroll';
 import type { TableValue } from '../utils';
-import { blotName, tableUpSize } from '../utils';
+import type { TableBodyFormat } from './table-body-format';
+import { blotName, randomId, tableUpSize } from '../utils';
 import { ContainerFormat } from './container-format';
 import { TableCellInnerFormat } from './table-cell-inner-format';
 import { TableColFormat } from './table-col-format';
@@ -128,8 +129,14 @@ export class TableMainFormat extends ContainerFormat {
     Object.assign(this.domNode.style, style);
   }
 
+  getBodys() {
+    return Array.from(this.domNode.querySelectorAll('thead, tbody, tfoot'))
+      .map(el => this.scroll.find(el) as TableBodyFormat)
+      .filter(Boolean);
+  }
+
   getRows() {
-    return Array.from(this.domNode.querySelectorAll(`${TableRowFormat.tagName}`))
+    return Array.from(this.domNode.querySelectorAll('tr'))
       .map(el => this.scroll.find(el) as TableRowFormat)
       .filter(Boolean);
   }
@@ -228,7 +235,7 @@ export class TableMainFormat extends ContainerFormat {
       else {
         if (row.children.length === 0 && row.prev) {
           // find the not empty row
-          let prev: TableRowFormat = row.prev as TableRowFormat;
+          let prev = row.prev as TableRowFormat;
           while (prev && prev.children.length === 0) {
             prev = prev.prev as TableRowFormat;
           }
@@ -257,7 +264,9 @@ export class TableMainFormat extends ContainerFormat {
     const childs: Record<string, ContainerFormat[]> = {
       [blotName.tableCaption]: [],
       [blotName.tableColgroup]: [],
+      [blotName.tableHead]: [],
       [blotName.tableBody]: [],
+      [blotName.tableFoot]: [],
     };
     // eslint-disable-next-line unicorn/no-array-for-each
     this.children.forEach((child) => {
@@ -274,23 +283,93 @@ export class TableMainFormat extends ContainerFormat {
     // check sort child
     const tableCaption = childs[blotName.tableCaption][0];
     const tableColgroup = childs[blotName.tableColgroup][0];
+    const tableHead = childs[blotName.tableHead][0];
     const tableBody = childs[blotName.tableBody][0];
+    const tableFoot = childs[blotName.tableFoot][0];
 
     const isCaptionFirst = tableCaption && this.children.head !== tableCaption;
     const isColgroupSecond = tableColgroup && tableCaption && tableCaption.next !== tableColgroup;
     const isColgroupFirst = tableColgroup && !tableCaption && this.children.head !== tableColgroup;
-    const isBodyLast = tableBody && this.children.tail !== tableBody;
+    const isHeadLast = tableHead && !tableBody && !tableFoot && this.children.tail !== tableHead;
+    const isBodyAfterHead = tableBody && tableHead && tableBody.prev !== tableHead;
+    const isBodyLast = tableBody && !tableFoot && this.children.tail !== tableBody;
+    const isBodyBeforeFoot = tableBody && tableFoot && tableBody.next !== tableFoot;
+    const isFootLast = tableFoot && this.children.tail !== tableFoot;
 
     // sort child
-    if (isCaptionFirst || isColgroupSecond || isColgroupFirst || isBodyLast) {
+    if (isCaptionFirst || isColgroupSecond || isColgroupFirst || isHeadLast || isBodyAfterHead || isBodyLast || isBodyBeforeFoot || isFootLast) {
       const tableMain = this.clone() as TableMainFormat;
       tableCaption && tableMain.appendChild(tableCaption);
       tableColgroup && tableMain.appendChild(tableColgroup);
+      tableHead && tableMain.appendChild(tableHead);
       tableBody && tableMain.appendChild(tableBody);
+      tableFoot && tableMain.appendChild(tableFoot);
 
       // eslint-disable-next-line unicorn/no-array-for-each
       this.children.forEach(child => child.remove());
       tableMain.moveChildren(this);
     }
   }
+
+  // insert row at index
+  insertRow(targetIndex: number) {
+    // get all column id. exclude the columns of the target index row with rowspan
+    const colIds = this.getColIds();
+    const rows = this.descendants(TableRowFormat);
+    const insertColIds = new Set(colIds);
+    let index = 0;
+    for (const row of rows) {
+      if (index === targetIndex) break;
+      row.foreachCellInner((cell) => {
+        if (index + cell.rowspan > targetIndex) {
+          cell.rowspan += 1;
+          insertColIds.delete(cell.colId);
+          // colspan cell need remove all includes colId
+          if (cell.colspan !== 1) {
+            const colIndex = colIds.indexOf(cell.colId);
+            for (let i = 0; i < cell.colspan - 1; i++) {
+              insertColIds.delete(colIds[colIndex + i + 1]);
+            }
+          }
+        }
+      });
+      index += 1;
+    }
+    // append new row
+    const tableId = this.tableId;
+    const rowId = randomId();
+    const tableRow = this.scroll.create(blotName.tableRow, {
+      tableId,
+      rowId,
+    }) as ContainerFormat;
+    for (const colId of insertColIds) {
+      const breakBlot = this.scroll.create('break');
+      const block = breakBlot.wrap('block');
+      const tableCellInner = block.wrap(blotName.tableCellInner, {
+        tableId,
+        rowId,
+        colId,
+        rowspan: 1,
+        colspan: 1,
+      });
+      const tableCell = tableCellInner.wrap(blotName.tableCell, {
+        tableId,
+        rowId,
+        colId,
+        rowspan: 1,
+        colspan: 1,
+      });
+      tableRow.appendChild(tableCell);
+    }
+
+    // insert the new row at the target index
+    // if you insert a row at the thead, then the new row will be inserted in thead. Similarly for tbody and tfoot
+    const refRow = rows[targetIndex] || null;
+    if (!refRow) {
+      rows[rows.length - 1].parent.appendChild(tableRow);
+    }
+    else {
+      refRow.parent.insertBefore(tableRow, refRow);
+    }
+  }
 }

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

@@ -1,5 +1,5 @@
 import type { Parchment as TypeParchment } from 'quill';
-import type { TableCellValue, TableRowValue } from '../utils';
+import type { TableBodyTag, TableCellValue, TableRowValue } from '../utils';
 import type { TableCellFormat } from './table-cell-format';
 import { blotName, findParentBlot } from '../utils';
 import { ContainerFormat } from './container-format';
@@ -10,11 +10,21 @@ export class TableRowFormat extends ContainerFormat {
   static blotName = blotName.tableRow;
   static tagName = 'tr';
   static className = 'ql-table-row';
+  static allowDataAttrs = new Set(['table-id', 'row-id', 'wrap-tag']);
+  static allowDataAttrsChangeHandler: Record<string, keyof TableRowFormat> = {
+    'wrap-tag': 'wrapParentTag',
+  };
 
   static create(value: TableRowValue) {
+    const {
+      tableId,
+      rowId,
+      wrapTag = 'tbody',
+    } = value;
     const node = super.create() as HTMLElement;
-    node.dataset.tableId = value.tableId;
-    node.dataset.rowId = value.rowId;
+    node.dataset.tableId = tableId;
+    node.dataset.rowId = rowId;
+    node.dataset.wrapTag = wrapTag;
     return node;
   }
 
@@ -28,6 +38,10 @@ export class TableRowFormat extends ContainerFormat {
     return this.domNode.dataset.tableId!;
   }
 
+  get wrapTag() {
+    return this.domNode.dataset.wrapTag as TableBodyTag || 'tbody';
+  }
+
   setHeight(value: string) {
     this.foreachCellInner((cellInner) => {
       cellInner.setFormatValue('height', value, true);
@@ -144,7 +158,7 @@ export class TableRowFormat extends ContainerFormat {
     let cur: TableCellFormat | null;
     while ((cur = next())) {
       const [tableCell] = cur.descendants(TableCellInnerFormat);
-      if (func(tableCell, i++)) break;
+      if (tableCell && func(tableCell, i++)) break;
     }
   }
 
@@ -157,19 +171,35 @@ export class TableRowFormat extends ContainerFormat {
     );
   }
 
-  optimize(_context: Record<string, any>) {
+  wrapParentTag() {
+    const tableBodyBlotNameMap: Record<string, string> = {
+      thead: blotName.tableHead,
+      tbody: blotName.tableBody,
+      tfoot: blotName.tableFoot,
+    };
+
     const parent = this.parent;
-    const { tableId } = this;
-    if (parent !== null && parent.statics.blotName !== blotName.tableBody) {
-      this.wrap(blotName.tableBody, tableId);
+    if (parent !== null && parent.statics.blotName !== tableBodyBlotNameMap[this.wrapTag]) {
+      if (Object.values(tableBodyBlotNameMap).includes(parent.statics.blotName)) {
+        const index = this.offset(this.parent);
+        const newParent = this.parent.split(index);
+        if (newParent && newParent.length() <= 0) {
+          newParent.remove();
+        }
+        const afterParent = (this.parent as any).splitAfter(this);
+        if (afterParent && afterParent.length() <= 0) {
+          afterParent.remove();
+        }
+        this.parent.replaceWith(tableBodyBlotNameMap[this.wrapTag], this.tableId);
+      }
+      else {
+        this.wrap(tableBodyBlotNameMap[this.wrapTag], this.tableId);
+      }
     }
+  }
 
-    if (
-      this.statics.requiredContainer
-      && !(this.parent instanceof this.statics.requiredContainer)
-    ) {
-      this.wrap(this.statics.requiredContainer.blotName);
-    }
+  optimize(_context: Record<string, any>) {
+    this.wrapParentTag();
 
     this.enforceAllowedChildren();
     if (this.children.length > 0 && this.next != null && this.checkMerge()) {

package/src/modules/index.ts

@@ -1,5 +1,6 @@
 export * from './table-align';
 export * from './table-clipboard';
+export * from './table-dom-selector';
 export * from './table-menu';
 export * from './table-resize';
 export * from './table-scrollbar';

package/src/modules/table-align.ts

@@ -3,31 +3,38 @@ import type { TableUp } from '../table-up';
 import { autoUpdate, computePosition, flip, limitShift, offset, shift } from '@floating-ui/dom';
 import Quill from 'quill';
 import { createBEM, createResizeObserver } from '../utils';
+import { TableDomSelector } from './table-dom-selector';
 
-export class TableAlign {
-  tableBlot: TableMainFormat;
-  tableWrapperBlot: TableWrapperFormat;
-  alignBox?: HTMLElement;
+export class TableAlign extends TableDomSelector {
+  static moduleName: string = 'table-align';
+
+  tableBlot?: TableMainFormat;
+  tableWrapperBlot?: TableWrapperFormat;
+  alignBox: HTMLElement | null;
   cleanup?: () => void;
   bem = createBEM('align');
-  resizeObserver = createResizeObserver(() => this.update(), { ignoreFirstBind: true });
+  resizeObserver?: ResizeObserver;
 
-  constructor(public tableModule: TableUp, public table: HTMLElement, public quill: Quill) {
-    this.tableBlot = Quill.find(table)! as TableMainFormat;
-    this.tableWrapperBlot = this.tableBlot.parent as TableWrapperFormat;
+  constructor(public tableModule: TableUp, public quill: Quill, _options: any) {
+    super(tableModule, quill);
 
-    this.alignBox = this.buildTool();
-    this.resizeObserver.observe(this.table);
-    this.quill.on(Quill.events.TEXT_CHANGE, this.updateWhenTextChange);
-
-    this.show();
+    this.alignBox = this.buildTools();
+    this.hide();
+    this.quill.on(Quill.events.EDITOR_CHANGE, this.updateWhenTextChange);
   }
 
-  updateWhenTextChange = () => {
-    this.update();
+  updateWhenTextChange = (eventName: string) => {
+    if (eventName === Quill.events.TEXT_CHANGE) {
+      if (this.table && !this.quill.root.contains(this.table)) {
+        this.setSelectionTable(undefined);
+      }
+      else {
+        this.update();
+      }
+    }
   };
 
-  buildTool() {
+  buildTools() {
     const alignBox = this.tableModule.addContainer(this.bem.b());
     const icons = Quill.import('ui/icons') as Record<string, any>;
     const alignIcons = {
@@ -40,39 +47,21 @@ export class TableAlign {
       item.dataset.align = align;
       item.classList.add(this.bem.be('item'));
       item.innerHTML = `<i class="icon">${iconStr}</i>`;
-      item.addEventListener('click', () => {
-        const value = item.dataset.align;
-        if (value) {
-          this.setTableAlign(this.tableBlot, value);
-
-          this.quill.once(Quill.events.SCROLL_OPTIMIZE, () => {
-            if (this.tableModule.tableSelection) {
-              this.tableModule.tableSelection.hide();
-            }
-            if (this.tableModule.tableResize) {
-              this.tableModule.tableResize.update();
-            }
-            if (this.tableModule.tableResizeScale) {
-              this.tableModule.tableResizeScale.update();
-            }
-            if (this.tableModule.tableScrollbar) {
-              this.tableModule.tableScrollbar.update();
-            }
-          });
-        }
-      });
+      item.addEventListener('click', this.handleAlignItemClick.bind(this));
       alignBox.appendChild(item);
     }
-    if (!this.cleanup) {
-      this.cleanup = autoUpdate(
-        this.tableWrapperBlot.domNode,
-        alignBox,
-        () => this.update(),
-      );
-    }
     return alignBox;
   }
 
+  handleAlignItemClick(e: MouseEvent) {
+    const item = e.currentTarget;
+    if (!item) return;
+    const value = (item as HTMLElement).dataset.align;
+    if (value && this.tableBlot) {
+      this.setTableAlign(this.tableBlot, value);
+    }
+  }
+
   setTableAlign(tableBlot: TableMainFormat, align: string) {
     const cols = tableBlot.getCols();
     for (const col of cols) {
@@ -81,14 +70,28 @@ export class TableAlign {
   }
 
   show() {
-    if (!this.alignBox) return;
-    this.alignBox.classList.add(this.bem.bm('active'));
-    this.update();
+    if (!this.table || !this.alignBox) return;
+    this.tableBlot = Quill.find(this.table) as TableMainFormat;
+    this.tableWrapperBlot = this.tableBlot.parent as TableWrapperFormat;
+    this.alignBox.classList.remove(this.bem.is('hidden'));
+    this.resizeObserver = createResizeObserver(() => this.update(), { ignoreFirstBind: true });
+    this.resizeObserver.observe(this.table);
+    if (this.cleanup) {
+      this.cleanup();
+    }
+    this.cleanup = autoUpdate(
+      this.tableWrapperBlot.domNode,
+      this.alignBox,
+      () => this.update(),
+    );
   }
 
   hide() {
-    if (!this.alignBox) return;
-    this.alignBox.classList.remove(this.bem.bm('active'));
+    this.tableBlot = undefined;
+    this.tableWrapperBlot = undefined;
+    if (this.alignBox) {
+      this.alignBox.classList.add(this.bem.is('hidden'));
+    }
     if (this.cleanup) {
       this.cleanup();
       this.cleanup = undefined;
@@ -96,8 +99,8 @@ export class TableAlign {
   }
 
   update() {
-    if (!this.alignBox) return;
-    if (this.tableBlot.full || this.tableBlot.domNode.offsetWidth >= this.quill.root.offsetWidth) {
+    if (!this.alignBox || !this.tableBlot || !this.tableWrapperBlot) return;
+    if (!this.table || this.tableBlot.full || this.tableBlot.domNode.offsetWidth >= this.quill.root.offsetWidth) {
       this.hide();
       return;
     }
@@ -115,11 +118,14 @@ export class TableAlign {
 
   destroy() {
     this.hide();
-    this.resizeObserver.disconnect();
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+      this.resizeObserver = undefined;
+    }
     this.quill.off(Quill.events.TEXT_CHANGE, this.updateWhenTextChange);
     if (this.alignBox) {
       this.alignBox.remove();
-      this.alignBox = undefined;
+      this.alignBox = null;
     }
   }
 }

package/src/modules/table-clipboard.ts

@@ -53,7 +53,9 @@ export class TableClipboard extends Clipboard {
   constructor(public quill: Quill, options: Partial<ClipboardOptions>) {
     super(quill, options);
     this.addMatcher('table', this.matchTable.bind(this));
+    this.addMatcher('thead', this.matchThead.bind(this));
     this.addMatcher('tbody', this.matchTbody.bind(this));
+    this.addMatcher('tfoot', this.matchTfoot.bind(this));
     this.addMatcher('colgroup', this.matchColgroup.bind(this));
     this.addMatcher('col', this.matchCol.bind(this));
     this.addMatcher('tr', this.matchTr.bind(this));
@@ -64,6 +66,22 @@ export class TableClipboard extends Clipboard {
     this.addMatcher(Node.ELEMENT_NODE, this.matchTdAttributor.bind(this));
   }
 
+  getStyleBackgroundColor(node: Node, delta: TypeDelta) {
+    const backgroundColor = (node as HTMLElement).style.backgroundColor;
+    if (backgroundColor) {
+      for (const op of delta.ops) {
+        if (op.attributes?.[blotName.tableCellInner]) {
+          const { style, ...value } = op.attributes[blotName.tableCellInner] as TableCellValue;
+          const styleObj = cssTextToObject(style || '');
+          if (!styleObj.backgroundColor) {
+            styleObj.backgroundColor = backgroundColor;
+            op.attributes[blotName.tableCellInner] = { ...value, style: objectToCssText(styleObj) };
+          }
+        }
+      }
+    }
+  }
+
   matchTable(node: Node, delta: TypeDelta) {
     if (delta.ops.length === 0) return delta;
 
@@ -73,7 +91,7 @@ export class TableClipboard extends Clipboard {
     for (let i = 0; i < delta.ops.length; i++) {
       const { attributes, insert } = delta.ops[i];
       // if attribute doesn't have tableCellInner, treat it as a blank line(emptyRow)
-      if (!isObject(insert) && attributes && !attributes[blotName.tableCellInner] && !attributes[blotName.tableCaption]) {
+      if (!isObject(insert) && (!attributes || (!attributes[blotName.tableCellInner] && !attributes[blotName.tableCaption]))) {
         delta.ops.splice(i, 1);
         i -= 1;
         continue;
@@ -120,54 +138,66 @@ export class TableClipboard extends Clipboard {
     }, [] as Record<string, any>[]);
     ops.splice(bodyStartIndex + 1, 0, ...newCols);
 
+    const resultDelta = new Delta(ops);
+    this.getStyleBackgroundColor(node, resultDelta);
     // reset variable to avoid conflict with other table
     this.tableId = randomId();
     this.colIds = [];
     this.rowspanCount = [];
     this.cellCount = 0;
     this.colCount = 0;
-    return new Delta(ops);
+    return resultDelta;
   }
 
   matchTbody(node: Node, delta: TypeDelta) {
-    const backgroundColor = (node as HTMLElement).style.backgroundColor;
-    if (backgroundColor) {
-      for (const op of delta.ops) {
-        if (op.attributes?.[blotName.tableCellInner]) {
-          const { style, ...value } = op.attributes[blotName.tableCellInner] as TableCellValue;
-          const styleObj = cssTextToObject(style || '');
-          if (!styleObj.backgroundColor) {
-            styleObj.backgroundColor = backgroundColor;
-            op.attributes[blotName.tableCellInner] = { ...value, style: objectToCssText(styleObj) };
-          }
-        }
-      }
-    }
+    this.getStyleBackgroundColor(node, delta);
     // add `emptyRow`
     let emptyRows = [];
     for (let i = delta.ops.length - 1; i >= 0; i--) {
       const op = delta.ops[i];
-      if (op.attributes) {
-        if (!op.attributes[blotName.tableCellInner]) {
+      if (!op.attributes?.[blotName.tableCellInner]) {
+        emptyRows = [];
+        emptyRows.push(randomId());
+      }
+      else if (op.attributes) {
+        if ((op.attributes[blotName.tableCellInner] as TableCellValue).rowspan === 1) {
           emptyRows = [];
-          emptyRows.push(randomId());
         }
-        else {
-          if ((op.attributes[blotName.tableCellInner] as TableCellValue).rowspan === 1) {
-            emptyRows = [];
-          }
-          else if (emptyRows.length > 0) {
-            if (!(op.attributes[blotName.tableCellInner] as TableCellValue).emptyRow) {
-              (op.attributes[blotName.tableCellInner] as TableCellValue).emptyRow = [];
-            }
-            (op.attributes[blotName.tableCellInner] as TableCellValue).emptyRow!.push(...emptyRows);
+        else if (emptyRows.length > 0) {
+          if (!(op.attributes[blotName.tableCellInner] as TableCellValue).emptyRow) {
+            (op.attributes[blotName.tableCellInner] as TableCellValue).emptyRow = [];
           }
+          (op.attributes[blotName.tableCellInner] as TableCellValue).emptyRow!.push(...emptyRows);
         }
       }
     }
+    // clear rowspan. thead/tbody/tfoot will not share rowspan
+    this.rowspanCount = [];
     return delta;
   }
 
+  matchThead(node: Node, delta: TypeDelta) {
+    const deltaData = this.matchTbody(node, delta);
+    for (const op of deltaData.ops) {
+      if (op.attributes && op.attributes[blotName.tableCellInner]) {
+        const tableCellInner = op.attributes[blotName.tableCellInner] as TableCellValue;
+        tableCellInner.wrapTag = 'thead';
+      }
+    }
+    return deltaData;
+  }
+
+  matchTfoot(node: Node, delta: TypeDelta) {
+    const deltaData = this.matchTbody(node, delta);
+    for (const op of deltaData.ops) {
+      if (op.attributes && op.attributes[blotName.tableCellInner]) {
+        const tableCellInner = op.attributes[blotName.tableCellInner] as TableCellValue;
+        tableCellInner.wrapTag = 'tfoot';
+      }
+    }
+    return deltaData;
+  }
+
   matchColgroup(node: Node, delta: TypeDelta) {
     const ops: Record<string, any>[] = [];
     for (let i = 0; i < delta.ops.length; i++) {
@@ -213,18 +243,9 @@ export class TableClipboard extends Clipboard {
         this.rowspanCount[i] = { rowspan: 0, colspan: 0 };
       }
     }
-    for (const op of delta.ops) {
-      if (op.attributes) {
-        const { background, [blotName.tableCellInner]: tableCellInner } = op.attributes;
-        if (tableCellInner && background) {
-          const { style = '' } = tableCellInner as TableCellValue;
-          const styleObj = cssTextToObject(style);
-          styleObj.backgroundColor = background as string;
-          (op.attributes![blotName.tableCellInner] as TableCellValue).style = objectToCssText(styleObj);
-        }
-      }
-    }
-    return delta;
+    this.getStyleBackgroundColor(node, delta);
+    // if delta.ops is empty, return a new line. make sure emptyRow parse correctly in `matchTbody`
+    return delta.ops.length === 0 ? new Delta([{ insert: '\n' }]) : delta;
   }
 
   matchTd(node: Node, delta: TypeDelta) {

package/src/modules/table-dom-selector.ts

@@ -0,0 +1,33 @@
+import type Quill from 'quill';
+import type { TableUp } from '../table-up';
+
+export class TableDomSelector {
+  table?: HTMLTableElement;
+
+  constructor(public tableModule: TableUp, public quill: Quill) {
+    this.quill.root.addEventListener('mousedown', this.tableSelectHandler.bind(this));
+  }
+
+  tableSelectHandler(event: MouseEvent) {
+    const path = event.composedPath() as HTMLElement[];
+    if (event.button !== 0 || !path || path.length <= 0) return;
+    const tableNode = path.find(node => node.tagName && node.tagName.toUpperCase() === 'TABLE');
+    this.setSelectionTable(tableNode as HTMLTableElement);
+  }
+
+  setSelectionTable(table: HTMLTableElement | undefined) {
+    if (this.table === table) return;
+    this.hide();
+    this.table = table;
+    if (this.table) {
+      this.show();
+    }
+    this.update();
+  }
+
+  hide() {}
+
+  show() {}
+
+  update() {}
+}