quill-table-up 2.0.1 → 2.0.3

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

@@ -0,0 +1,139 @@
+import type { TableCellValue } from '../utils';
+import type { TableCellInnerFormat } from './table-cell-inner-format';
+import type { TableRowFormat } from './table-row-format';
+import { blotName } from '../utils';
+import { ContainerFormat } from './container-format';
+import { getValidCellspan } from './utils';
+
+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 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 {
+    for (const style of this.allowStyle) {
+      if (str.startsWith(style)) {
+        return true;
+      }
+    }
+    return false;
+  }
+
+  static create(value: TableCellValue) {
+    const {
+      tableId,
+      rowId,
+      colId,
+      rowspan,
+      colspan,
+      style,
+    } = value;
+    const node = super.create() as HTMLElement;
+    node.dataset.tableId = tableId;
+    node.dataset.rowId = rowId;
+    node.dataset.colId = colId;
+    node.setAttribute('rowspan', String(getValidCellspan(rowspan)));
+    node.setAttribute('colspan', String(getValidCellspan(colspan)));
+    style && (node.style.cssText = style);
+    return node;
+  }
+
+  static formats(domNode: HTMLElement) {
+    const { tableId, rowId, colId } = domNode.dataset;
+    const rowspan = Number(domNode.getAttribute('rowspan'));
+    const colspan = Number(domNode.getAttribute('colspan'));
+    const value: Record<string, any> = {
+      tableId,
+      rowId,
+      colId,
+      rowspan: getValidCellspan(rowspan),
+      colspan: getValidCellspan(colspan),
+    };
+
+    const inlineStyles: Record<string, any> = {};
+    for (let i = 0; i < domNode.style.length; i++) {
+      const property = domNode.style[i];
+      const value = domNode.style[property as keyof CSSStyleDeclaration] as string;
+      if (this.isAllowStyle(String(property)) && !['initial', 'inherit'].includes(value)) {
+        inlineStyles[property] = value;
+      }
+    }
+    const entries = Object.entries(inlineStyles);
+    if (entries.length > 0) {
+      value.style = entries.map(([key, value]) => `${key}:${value}`).join(';');
+    }
+
+    return value;
+  }
+
+  setFormatValue(name: string, value?: any) {
+    if (this.statics.allowAttrs.has(name) || this.statics.allowDataAttrs.has(name)) {
+      let attrName = name;
+      if (this.statics.allowDataAttrs.has(name)) {
+        attrName = `data-${name}`;
+      }
+      if (value) {
+        this.domNode.setAttribute(attrName, value);
+      }
+      else {
+        this.domNode.removeAttribute(attrName);
+      }
+    }
+    else if (this.statics.isAllowStyle(name)) {
+      Object.assign(this.domNode.style, {
+        [name]: value,
+      });
+    }
+  }
+
+  get tableId() {
+    return this.domNode.dataset.tableId!;
+  }
+
+  get rowId() {
+    return this.domNode.dataset.rowId!;
+  }
+
+  get colId() {
+    return this.domNode.dataset.colId!;
+  }
+
+  get rowspan() {
+    return Number(this.domNode.getAttribute('rowspan'));
+  }
+
+  get colspan() {
+    return Number(this.domNode.getAttribute('colspan'));
+  }
+
+  getCellInner() {
+    return this.children.head as TableCellInnerFormat;
+  }
+
+  checkMerge(): boolean {
+    const { colId, rowId, colspan, rowspan } = this;
+    const next = this.next as TableCellFormat;
+    return (
+      next !== null
+      && next.statics.blotName === this.statics.blotName
+      && next.rowId === rowId
+      && next.colId === colId
+      && next.colspan === colspan
+      && next.rowspan === rowspan
+    );
+  }
+
+  optimize(context: Record<string, any>) {
+    const parent = this.parent as TableRowFormat;
+    const { tableId, rowId } = this;
+    if (parent !== null && parent.statics.blotName !== blotName.tableRow) {
+      this.wrap(blotName.tableRow, { tableId, rowId });
+    }
+
+    super.optimize(context);
+  }
+}

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

@@ -0,0 +1,251 @@
+import type { Parchment as TypeParchment } from 'quill';
+import type TypeBlock from 'quill/blots/block';
+import type { TableCellValue } from '../utils';
+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;
+
+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 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 {
+    for (const style of this.allowStyle) {
+      if (str.startsWith(style)) {
+        return true;
+      }
+    }
+    return false;
+  }
+
+  static create(value: TableCellValue) {
+    const {
+      tableId,
+      rowId,
+      colId,
+      rowspan,
+      colspan,
+      style,
+    } = value;
+    const node = super.create() as HTMLElement;
+    node.dataset.tableId = tableId;
+    node.dataset.rowId = rowId;
+    node.dataset.colId = colId;
+    node.dataset.rowspan = String(getValidCellspan(rowspan));
+    node.dataset.colspan = String(getValidCellspan(colspan));
+    style && (node.dataset.style = style);
+    return node;
+  }
+
+  static formats(domNode: HTMLElement) {
+    const { tableId, rowId, colId, rowspan, colspan, style } = domNode.dataset;
+    const value: Record<string, any> = {
+      tableId,
+      rowId,
+      colId,
+      rowspan: Number(getValidCellspan(rowspan)),
+      colspan: Number(getValidCellspan(colspan)),
+    };
+    style && (value.style = style);
+    return value;
+  }
+
+  setFormatValue(name: string, value: any, isStyle: boolean = false) {
+    if (isStyle) {
+      if (!this.statics.isAllowStyle(name)) return;
+      if (this.parent) {
+        this.parent.setFormatValue(name, value);
+        this.domNode.dataset.style = this.parent.domNode.style.cssText;
+      }
+    }
+    else {
+      if (!this.statics.allowDataAttrs.has(name)) return;
+      const attrName = `data-${name}`;
+      if (value) {
+        this.domNode.setAttribute(attrName, value);
+      }
+      else {
+        this.domNode.removeAttribute(attrName);
+      }
+      if (this.parent) {
+        this.parent.setFormatValue(name, value);
+      }
+    }
+
+    const blocks = this.descendants(Block, 0);
+    for (const child of blocks) {
+      (child as TypeBlock).cache = {};
+    }
+  }
+
+  get tableId() {
+    return this.domNode.dataset.tableId!;
+  }
+
+  get rowId() {
+    return this.domNode.dataset.rowId!;
+  }
+
+  set rowId(value) {
+    this.setFormatValue('row-id', value);
+  }
+
+  get colId() {
+    return this.domNode.dataset.colId!;
+  }
+
+  set colId(value) {
+    this.setFormatValue('col-id', value);
+  }
+
+  get rowspan() {
+    return Number(this.domNode.dataset.rowspan);
+  }
+
+  set rowspan(value: number) {
+    this.setFormatValue('rowspan', value);
+  }
+
+  get colspan() {
+    return Number(this.domNode.dataset.colspan);
+  }
+
+  set colspan(value: number) {
+    this.setFormatValue('colspan', value);
+  }
+
+  getColumnIndex() {
+    const table = findParentBlot(this, blotName.tableMain);
+    return table.getColIds().indexOf(this.colId);
+  }
+
+  formatAt(index: number, length: number, name: string, value: any) {
+    if (this.children.length === 0) {
+      this.appendChild(this.scroll.create(this.statics.defaultChild.blotName));
+      // block min length is 1
+      length += 1;
+    }
+    super.formatAt(index, length, name, value);
+  }
+
+  formats(): Record<string, any> {
+    const value = this.statics.formats(this.domNode);
+    return {
+      [this.statics.blotName]: value,
+    };
+  }
+
+  checkMerge(): boolean {
+    const { colId, rowId, colspan, rowspan } = this;
+    const next = this.next as TableCellInnerFormat;
+    return (
+      next !== null
+      && next.statics.blotName === this.statics.blotName
+      && next.rowId === rowId
+      && next.colId === colId
+      && next.colspan === colspan
+      && next.rowspan === rowspan
+    );
+  }
+
+  optimize() {
+    const parent = this.parent;
+    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);
+    }
+    if (parent !== null && parent.statics.blotName !== blotName.tableCell) {
+      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'
+      // in this case, a 'block' should to inserted to makesure that the cell will not be remove
+      if (this.children.length === 0) {
+        const child = this.scroll.create(this.statics.defaultChild.blotName);
+        this.appendChild(child);
+      }
+    }
+
+    if (this.children.length > 0 && this.next != null && this.checkMerge()) {
+      this.next.moveChildren(this);
+      this.next.remove();
+    }
+    // TODO: uiNode not test, maybe have bug
+    if (this.uiNode != null && this.uiNode !== this.domNode.firstChild) {
+      this.domNode.insertBefore(this.uiNode, this.domNode.firstChild);
+    }
+    // this is necessary when redo or undo. else will delete or insert wrong index
+    if (this.children.length === 0) {
+      // if cellInner doesn't have child then remove it. not insert a block
+      this.remove();
+    }
+  }
+
+  insertBefore(blot: TypeParchment.Blot, ref?: TypeParchment.Blot | null) {
+    if (blot.statics.blotName === this.statics.blotName) {
+      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]);
+
+      if (!isSame) {
+        const [selfRow, selfCell] = findParentBlots(this, [blotName.tableRow, blotName.tableCell] as const);
+        // split current cellInner
+        if (ref) {
+          const index = ref.offset();
+          const length = this.length();
+          if (index + 1 < length) {
+            const newCellInner = this.scroll.create(blotName.tableCellInner, selfValue) as TypeParchment.Parent;
+            this.children.forEachAt(index + 1, this.length(), (block) => {
+              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
+        if (this.rowId !== cellInnerBlot.rowId) {
+          if (ref) {
+            const index = ref.offset(selfRow);
+            selfRow.split(index);
+          }
+          else if (selfCell.next) {
+            const index = selfCell.next.offset(selfRow);
+            selfRow.split(index);
+          }
+          const row = this.scroll.create(blotName.tableRow, cellInnerBlotValue) as TypeParchment.Parent;
+          const cell = this.scroll.create(blotName.tableCell, cellInnerBlotValue) as TypeParchment.Parent;
+          cell.appendChild(cellInnerBlot);
+          row.appendChild(cell);
+          return selfRow.parent.insertBefore(row, selfRow.next);
+        }
+        return selfRow.insertBefore(
+          cellInnerBlot.wrap(blotName.tableCell, cellInnerBlotValue),
+          ref ? selfCell : selfCell.next,
+        );
+      }
+      else {
+        return this.parent.insertBefore(cellInnerBlot, this.next);
+      }
+    }
+    super.insertBefore(blot, ref);
+  }
+}

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

@@ -0,0 +1,174 @@
+import type { Parchment as TypeParchment } from 'quill';
+import type { BlockEmbed as TypeBlockEmbed } from 'quill/blots/block';
+import type { TableColValue } from '../utils';
+import Quill from 'quill';
+import { blotName, findParentBlot, findParentBlots, tableUpSize } from '../utils';
+import { TableCellInnerFormat } from './table-cell-inner-format';
+
+const BlockEmbed = Quill.import('blots/block/embed') as typeof TypeBlockEmbed;
+
+export class TableColFormat extends BlockEmbed {
+  static blotName = blotName.tableCol;
+  static tagName = 'col';
+
+  static validWidth(width: string | number, full: boolean) {
+    let widthNumber = Number.parseFloat(String(width));
+    if (Number.isNaN(widthNumber)) {
+      widthNumber = tableUpSize[full ? 'colMinWidthPre' : 'colMinWidthPx'];
+    }
+    return `${widthNumber}${full ? '%' : 'px'}`;
+  }
+
+  static create(value: TableColValue) {
+    const { width, tableId, colId, full, align } = value;
+    const node = super.create() as HTMLElement;
+    node.setAttribute('width', this.validWidth(width, !!full));
+    full && (node.dataset.full = String(full));
+    if (align && align !== 'left') {
+      node.dataset.align = align;
+    }
+    node.dataset.tableId = tableId;
+    node.dataset.colId = colId;
+    return node;
+  }
+
+  static value(domNode: HTMLElement) {
+    const { tableId, colId } = domNode.dataset;
+    const width = domNode.getAttribute('width') || tableUpSize.colDefaultWidth;
+    const align = domNode.dataset.align;
+    const full = Object.hasOwn(domNode.dataset, 'full');
+    const value: Record<string, any> = {
+      tableId,
+      colId,
+      full,
+    };
+    width && (value.width = Number.parseFloat(width));
+    align && (value.align = align);
+    return value;
+  }
+
+  constructor(
+    public scroll: TypeParchment.Root,
+    public domNode: HTMLElement,
+  ) {
+    super(scroll, domNode);
+  }
+
+  get width(): number {
+    let width: number | string | null = this.domNode.getAttribute('width');
+    if (!width) {
+      width = this.domNode.getBoundingClientRect().width;
+      if (this.full) {
+        const table = this.domNode.closest('table');
+        if (!table) return tableUpSize[this.full ? 'colMinWidthPre' : 'colMinWidthPx'];
+        return width / 100 * table.getBoundingClientRect().width;
+      }
+      return width;
+    }
+    return Number.parseFloat(String(width));
+  }
+
+  set width(value: string | number) {
+    let width = Number.parseFloat(String(value));
+    if (Number.isNaN(width)) {
+      width = tableUpSize[this.full ? 'colMinWidthPre' : 'colMinWidthPx'];
+    }
+    this.domNode.setAttribute('width', this.statics.validWidth(width, !!this.full));
+  }
+
+  get tableId() {
+    return this.domNode.dataset.tableId!;
+  }
+
+  get colId() {
+    return this.domNode.dataset.colId!;
+  }
+
+  get full() {
+    return Object.hasOwn(this.domNode.dataset, 'full');
+  }
+
+  get align() {
+    return this.domNode.dataset.align || '';
+  }
+
+  set align(value: string) {
+    if (value === 'right' || value === 'center') {
+      this.domNode.dataset.align = value;
+    }
+    else {
+      this.domNode.removeAttribute('data-align');
+    }
+  }
+
+  checkMerge(): boolean {
+    const next = this.next as TableColFormat;
+    const { tableId, colId } = this;
+    return (
+      next !== null
+      && next.statics.blotName === this.statics.blotName
+      && next.tableId === tableId
+      && next.colId === colId
+    );
+  }
+
+  optimize(context: Record< string, any>) {
+    const parent = this.parent;
+    if (parent != null && parent.statics.blotName !== blotName.tableColgroup) {
+      const value = this.statics.value(this.domNode);
+      this.wrap(blotName.tableColgroup, value);
+    }
+
+    const tableColgroup = findParentBlot(this, blotName.tableColgroup);
+    tableColgroup.align = this.align;
+
+    super.optimize(context);
+  }
+
+  insertAt(index: number, value: string, def?: any): void {
+    if (def != null) {
+      super.insertAt(index, value, def);
+      return;
+    }
+    const lines = value.split('\n');
+    const text = lines.pop();
+    const blocks = lines.map((line) => {
+      const block = this.scroll.create('block');
+      block.insertAt(0, line);
+      return block;
+    });
+    const ref = this.split(index);
+    const [tableColgroupBlot, tableMainBlot] = findParentBlots(this, [blotName.tableColgroup, blotName.tableMain] as const);
+    const tableBodyBlot = tableColgroupBlot.next;
+    if (ref) {
+      const index = ref.offset(tableColgroupBlot);
+      tableColgroupBlot.split(index);
+    }
+    // create tbody
+    let insertBlot = tableMainBlot.parent.parent;
+    let nextBlotRef: TypeParchment.Blot | null = tableMainBlot.parent.next;
+    if (tableBodyBlot) {
+      const cellInners = tableBodyBlot.descendants(TableCellInnerFormat);
+      if (cellInners.length > 0) {
+        const cellInnerBlot = cellInners[0];
+        const value = TableCellInnerFormat.formats(cellInnerBlot.domNode);
+        const newBlock = this.scroll.create('block') as TypeParchment.BlockBlot;
+        const newTableCellInner = newBlock.wrap(blotName.tableCellInner, value);
+        const newTableCell = newTableCellInner.wrap(blotName.tableCell, value);
+        const newTableRow = newTableCell.wrap(blotName.tableRow, value);
+        const newTableBody = newTableRow.wrap(blotName.tableBody, value.tableId);
+        tableColgroupBlot.parent.insertBefore(newTableBody, tableColgroupBlot.next);
+
+        insertBlot = newBlock;
+        nextBlotRef = newBlock.next;
+      }
+    }
+
+    for (const block of blocks) {
+      insertBlot.insertBefore(block, nextBlotRef);
+    }
+    if (text) {
+      insertBlot.insertBefore(this.scroll.create('text', text), nextBlotRef);
+    }
+  }
+}

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

@@ -0,0 +1,133 @@
+import type { Parchment as TypeParchment } from 'quill';
+import type { TableColValue, TableValue } from '../utils';
+import type { TableColFormat } from './table-col-format';
+import { blotName, findParentBlot, tableUpSize } from '../utils';
+import { ContainerFormat } from './container-format';
+import { TableMainFormat } from './table-main-format';
+
+export class TableColgroupFormat extends ContainerFormat {
+  static blotName = blotName.tableColgroup;
+  static tagName = 'colgroup';
+  declare children: TypeParchment.LinkedList<TableColFormat>;
+
+  static create(value: TableValue) {
+    const node = super.create() as HTMLElement;
+    node.dataset.tableId = value.tableId;
+    value.full && (node.dataset.full = String(value.full));
+    if (value.align && value.align !== 'left') {
+      node.dataset.align = value.align;
+    }
+    node.setAttribute('contenteditable', 'false');
+    return node;
+  }
+
+  get tableId() {
+    return this.domNode.dataset.tableId!;
+  }
+
+  get full() {
+    return Object.hasOwn(this.domNode.dataset, 'full');
+  }
+
+  set full(value: boolean) {
+    if (value) {
+      this.domNode.dataset.full = 'true';
+    }
+    else {
+      this.domNode.removeAttribute('data-full');
+    }
+  }
+
+  get align() {
+    return this.domNode.dataset.align || '';
+  }
+
+  set align(value: string) {
+    if (value === 'right' || value === 'center') {
+      this.domNode.dataset.align = value;
+    }
+    else {
+      this.domNode.removeAttribute('data-align');
+    }
+  }
+
+  findCol(index: number) {
+    const next = this.children.iterator();
+    let i = 0;
+    let cur: TableColFormat | null;
+    while ((cur = next())) {
+      if (i === index) {
+        break;
+      }
+      i++;
+    }
+    return cur;
+  }
+
+  insertColByIndex(index: number, value: TableColValue) {
+    const table = this.parent;
+    if (!(table instanceof TableMainFormat)) {
+      throw new TypeError('TableColgroupFormat should be child of TableFormat');
+    }
+    const col = this.findCol(index);
+    const tableCellInner = this.scroll.create(blotName.tableCol, value) as TableColFormat;
+    if (table.full) {
+      // TODO: first minus column should be near by
+      const next = this.children.iterator();
+      let cur: TableColFormat | null;
+      while ((cur = next())) {
+        if (cur.width - tableCellInner.width >= tableUpSize.colMinWidthPre) {
+          cur.width -= tableCellInner.width;
+          break;
+        }
+      }
+    }
+    this.insertBefore(tableCellInner, col);
+  }
+
+  removeColByIndex(index: number) {
+    const table = this.parent;
+    if (!(table instanceof TableMainFormat)) {
+      throw new TypeError('TableColgroupFormat should be child of TableMainFormat');
+    }
+    const col = this.findCol(index);
+    if (col) {
+      if (table.full) {
+        if (col.next) {
+          (col.next as TableColFormat).width += col.width;
+        }
+        else if (col.prev) {
+          (col.prev as TableColFormat).width += col.width;
+        }
+      }
+      col.remove();
+      table.colWidthFillTable();
+    }
+  }
+
+  checkMerge(): boolean {
+    const next = this.next as TableColgroupFormat;
+    const tableMain = this.parent;
+    if ((tableMain instanceof TableMainFormat) && !tableMain.full) {
+      tableMain.colWidthFillTable();
+    }
+    return (
+      next !== null
+      && next.statics.blotName === this.statics.blotName
+      && next.tableId === this.tableId
+    );
+  }
+
+  optimize(context: Record<string, any>) {
+    const parent = this.parent;
+    const { tableId, full, align } = this;
+    if (parent != null && parent.statics.blotName !== blotName.tableMain) {
+      this.wrap(blotName.tableMain, { tableId, full, align });
+    }
+
+    const tableMain = findParentBlot(this, blotName.tableMain);
+    tableMain.align = align;
+
+    super.optimize(context);
+  }
+}