quill-table-up 2.0.1 → 2.0.3

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

@@ -0,0 +1,143 @@
+import type { TableValue } from '../utils';
+import type { TableColgroupFormat } from './table-colgroup-format';
+import { blotName } from '../utils';
+import { ContainerFormat } from './container-format';
+import { TableColFormat } from './table-col-format';
+import { TableRowFormat } from './table-row-format';
+
+export class TableMainFormat extends ContainerFormat {
+  static blotName = blotName.tableMain;
+  static tagName = 'table';
+  static className = 'ql-table';
+
+  static create(value: TableValue) {
+    const node = super.create() as HTMLElement;
+    const { tableId, full, align } = value;
+    node.dataset.tableId = tableId;
+    if (align === 'right' || align === 'center') {
+      node.dataset.align = align;
+    }
+    else {
+      node.removeAttribute('date-align');
+    }
+    full && (node.dataset.full = String(full));
+    node.setAttribute('cellpadding', '0');
+    node.setAttribute('cellspacing', '0');
+    return node;
+  }
+
+  constructor(scroll: any, domNode: HTMLElement, _value: any) {
+    super(scroll, domNode);
+    this.updateAlign();
+  }
+
+  colWidthFillTable() {
+    if (this.full) return;
+    const cols = this.getCols();
+    if (!cols) return;
+    const colsWidth = cols.reduce((sum, col) => col.width + sum, 0);
+    if (colsWidth === 0 || Number.isNaN(colsWidth)) return null;
+    this.domNode.style.width = `${colsWidth}px`;
+    return colsWidth;
+  }
+
+  get tableId() {
+    return this.domNode.dataset.tableId!;
+  }
+
+  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');
+    }
+    this.updateAlign();
+  }
+
+  cancelFull() {
+    if (!this.full) return;
+    const cols = this.getCols();
+    const tableWidth = this.domNode.getBoundingClientRect().width;
+    for (const col of cols) {
+      col.domNode.removeAttribute('data-full');
+      col.width = col.width / 100 * tableWidth;
+    }
+    const colgroup = this.children.head as TableColgroupFormat;
+    if (colgroup && colgroup.statics.blotName === blotName.tableColgroup) {
+      colgroup.full = false;
+    }
+    this.domNode.removeAttribute('data-full');
+    this.colWidthFillTable();
+  }
+
+  updateAlign() {
+    const value = this.align;
+    const style: Record<string, string | null> = {
+      marginLeft: null,
+      marginRight: null,
+    };
+    switch (value) {
+      case 'center': {
+        style.marginLeft = 'auto';
+        style.marginRight = 'auto';
+        break;
+      }
+      case '':
+      case 'left': {
+        style.marginRight = 'auto';
+        break;
+      }
+      case 'right': {
+        style.marginLeft = 'auto';
+        break;
+      }
+      default: {
+        break;
+      }
+    }
+    Object.assign(this.domNode.style, style);
+  }
+
+  getRows() {
+    return this.descendants(TableRowFormat);
+  }
+
+  getRowIds() {
+    return this.getRows().map(d => d.rowId);
+  }
+
+  getCols() {
+    return this.descendants(TableColFormat);
+  }
+
+  getColIds() {
+    return this.getCols().map(d => d.colId);
+  }
+
+  checkMerge(): boolean {
+    const next = this.next;
+    return (
+      next !== null
+      && next.statics.blotName === this.statics.blotName
+      && next.domNode.dataset.tableId === this.tableId
+    );
+  }
+
+  optimize(context: Record<string, any>) {
+    const parent = this.parent;
+    if (parent !== null && parent.statics.blotName !== blotName.tableWrapper) {
+      this.wrap(blotName.tableWrapper, this.tableId);
+    }
+
+    super.optimize(context);
+  }
+}

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

@@ -0,0 +1,147 @@
+import type { Parchment as TypeParchment } from 'quill';
+import type { TableCellValue, TableRowValue } from '../utils';
+import type { TableCellFormat } from './table-cell-format';
+import { blotName, findParentBlot } from '../utils';
+import { ContainerFormat } from './container-format';
+import { TableCellInnerFormat } from './table-cell-inner-format';
+
+export type SkipRowCount = number[] & { skipRowNum?: number };
+export class TableRowFormat extends ContainerFormat {
+  static blotName = blotName.tableRow;
+  static tagName = 'tr';
+  static className = 'ql-table-row';
+
+  static create(value: TableRowValue) {
+    const node = super.create() as HTMLElement;
+    node.dataset.tableId = value.tableId;
+    node.dataset.rowId = value.rowId;
+    return node;
+  }
+
+  declare children: TypeParchment.LinkedList<TableCellFormat>;
+
+  get rowId() {
+    return this.domNode.dataset.rowId!;
+  }
+
+  get tableId() {
+    return this.domNode.dataset.tableId!;
+  }
+
+  setHeight(value: string) {
+    this.foreachCellInner((cellInner) => {
+      cellInner.setFormatValue('height', value, true);
+    });
+  }
+
+  // insert cell at index
+  // return the minus skip column number
+  // [2, 3]. means next line should skip 2 columns. next next line skip 3 columns
+  insertCell(targetIndex: number, value: TableCellValue) {
+    const skip: SkipRowCount = [];
+    const next = this.children.iterator();
+    let index = 0;
+    let cur;
+    while ((cur = next())) {
+      index += cur.colspan;
+      if (index > targetIndex) break;
+      if (cur.rowspan !== 1) {
+        for (let i = 0; i < cur.rowspan - 1; i++) {
+          skip[i] = (skip[i] || 0) + cur.colspan;
+        }
+      }
+    }
+
+    if (cur && index - cur.colspan < targetIndex) {
+      const tableCell = cur.getCellInner();
+      tableCell.colspan += 1;
+      if (cur.rowspan !== 1) {
+        skip.skipRowNum = cur.rowspan - 1;
+      }
+    }
+    else {
+      const tableCell = this.scroll.create(blotName.tableCell, value) as ContainerFormat;
+      const tableCellInner = this.scroll.create(blotName.tableCellInner, value) as ContainerFormat;
+      const block = this.scroll.create('block') as TypeParchment.BlockBlot;
+      block.appendChild(this.scroll.create('break'));
+      tableCellInner.appendChild(block);
+      tableCell.appendChild(tableCellInner);
+      this.insertBefore(tableCell, cur);
+    }
+    return skip;
+  }
+
+  getCellByColumIndex(stopIndex: number): [null | TableCellFormat, number, number[]] {
+    const skip: number[] = [];
+    let cur: null | TableCellFormat = null;
+    let cellEndIndex = 0;
+    if (stopIndex < 0) return [cur, cellEndIndex, skip];
+    const next = this.children.iterator();
+    while ((cur = next())) {
+      cellEndIndex += cur.colspan;
+      if (cur.rowspan !== 1) {
+        for (let i = 0; i < cur.rowspan - 1; i++) {
+          skip[i] = (skip[i] || 0) + cur.colspan;
+        }
+      }
+      if (cellEndIndex > stopIndex) break;
+    }
+    return [cur, cellEndIndex, skip];
+  }
+
+  removeCell(targetIndex: number): SkipRowCount {
+    if (targetIndex < 0) return [];
+    const columnIndexData = this.getCellByColumIndex(targetIndex);
+    const [cur, index] = columnIndexData;
+    const skip: SkipRowCount = columnIndexData[2];
+    if (!cur) return skip;
+    if (index - cur.colspan < targetIndex || cur.colspan > 1) {
+      const [tableCell] = cur.descendants(TableCellInnerFormat);
+
+      if (cur.colspan !== 1 && targetIndex === index - cur.colspan) {
+        // if delete index is cell start index. update cell colId to next colId
+        const tableBlot = findParentBlot(this, blotName.tableMain);
+        const colIds = tableBlot.getColIds();
+        tableCell.colId = colIds[colIds.indexOf(tableCell.colId) + 1];
+      }
+      if (cur.rowspan !== 1) {
+        skip.skipRowNum = cur.rowspan - 1;
+      }
+
+      tableCell.colspan -= 1;
+    }
+    else {
+      cur.remove();
+    }
+    return skip;
+  }
+
+  foreachCellInner(func: (tableCell: TableCellInnerFormat, index: number) => boolean | void) {
+    const next = this.children.iterator();
+    let i = 0;
+    let cur: TableCellFormat | null;
+    while ((cur = next())) {
+      const [tableCell] = cur.descendants(TableCellInnerFormat);
+      if (func(tableCell, i++)) break;
+    }
+  }
+
+  checkMerge(): boolean {
+    const next = this.next as TableRowFormat;
+    return (
+      next !== null
+      && next.statics.blotName === this.statics.blotName
+      && next.rowId === this.rowId
+    );
+  }
+
+  optimize(context: Record<string, any>) {
+    const parent = this.parent;
+    const { tableId } = this;
+    if (parent !== null && parent.statics.blotName !== blotName.tableBody) {
+      this.wrap(blotName.tableBody, tableId);
+    }
+
+    super.optimize(context);
+  }
+}

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

@@ -0,0 +1,55 @@
+import { blotName } from '../utils';
+import { ContainerFormat } from './container-format';
+import { TableBodyFormat } from './table-body-format';
+import { TableColgroupFormat } from './table-colgroup-format';
+
+export class TableWrapperFormat extends ContainerFormat {
+  static blotName = blotName.tableWrapper;
+  static tagName = 'div';
+  static className = 'ql-table-wrapper';
+
+  static create(value: string) {
+    const node = super.create() as HTMLElement;
+
+    node.dataset.tableId = value;
+    node.addEventListener(
+      'dragstart',
+      (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+      },
+      true,
+    );
+    // not allow drop content into table
+    node.addEventListener('drop', (e) => {
+      e.preventDefault();
+    });
+    node.addEventListener('dragover', (e) => {
+      e.preventDefault();
+      e.dataTransfer!.dropEffect = 'none';
+    });
+    return node;
+  }
+
+  get tableId() {
+    return this.domNode.dataset.tableId!;
+  }
+
+  checkMerge(): boolean {
+    const next = this.next as TableWrapperFormat;
+    return (
+      next !== null
+      && next.statics.blotName === this.statics.blotName
+      && next.tableId === this.tableId
+    );
+  }
+
+  deleteAt(index: number, length: number) {
+    super.deleteAt(index, length);
+    const tableBodys = (this.descendants(TableBodyFormat));
+    const tableColgroups = (this.descendants(TableColgroupFormat));
+    if (tableBodys.length === 0 || tableColgroups.length === 0) {
+      this.remove();
+    }
+  }
+}

package/src/formats/utils.ts

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