quill-table-up 2.0.1 → 2.0.3

package/src/__tests__/unit/utils.ts

@@ -0,0 +1,216 @@
+import type { TableColValue } from '../../index';
+import Quill from 'quill';
+import { expect, vi } from 'vitest';
+import TableUp from '../../index';
+
+// eslint-disable-next-line unicorn/prefer-string-replace-all
+export const normalizeHTML = (html: string | { html: string }) => typeof html === 'object' ? html.html : html.replace(/\n\s*/g, '');
+export const sortAttributes = (element: HTMLElement) => {
+  const attributes = Array.from(element.attributes);
+  const sortedAttributes = attributes.sort((a, b) =>
+    a.name.localeCompare(b.name),
+  );
+
+  while (element.attributes.length > 0) {
+    element.removeAttribute(element.attributes[0].name);
+  }
+
+  for (const attr of sortedAttributes) {
+    element.setAttribute(attr.name, attr.value);
+  }
+
+  // eslint-disable-next-line unicorn/no-array-for-each
+  element.childNodes.forEach((child) => {
+    if (child instanceof HTMLElement) {
+      sortAttributes(child);
+    }
+  });
+};
+export const createQuillWithTableModule = (html: string, options = {}, moduleOptions = {}, register = {}) => {
+  Quill.register({
+    [`modules/${TableUp.moduleName}`]: TableUp,
+    ...register,
+  }, true);
+  const container = document.body.appendChild(document.createElement('div'));
+  container.innerHTML = normalizeHTML(html);
+  const quill = new Quill(container, {
+    modules: {
+      [TableUp.moduleName]: {
+        full: true,
+        ...options,
+      },
+      history: {
+        delay: 0,
+      },
+      ...moduleOptions,
+    },
+  });
+  return quill;
+};
+
+expect.extend({
+  toEqualHTML(received, expected, options = {}) {
+    const ignoreAttrs = options?.ignoreAttrs ?? [];
+    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 dom of doms) {
+      for (const node of Array.from(dom.querySelectorAll('.ql-ui'))) {
+        node.remove();
+      }
+
+      for (const attr of ignoreAttrs) {
+        for (const node of Array.from(dom.querySelectorAll(`[${attr}]`))) {
+          node.removeAttribute(attr);
+        }
+      }
+
+      sortAttributes(dom);
+    }
+
+    if (this.equals(receivedDOM.innerHTML, expectedDOM.innerHTML)) {
+      return { pass: true, message: () => '' };
+    }
+    return {
+      pass: false,
+      message: () =>
+        `HTMLs don't match.\n${this.utils.diff(
+          this.utils.stringify(receivedDOM),
+          this.utils.stringify(expectedDOM),
+        )}`,
+    };
+  },
+});
+
+interface TableColDeltaValue extends Omit<TableColValue, 'width' | 'full'> {
+  width: number;
+  full?: 'true';
+};
+interface TableCreatorOptions {
+  isEmpty: boolean;
+  tableId: string;
+}
+type ColOptions = Omit<TableColValue, 'width' | 'tableId' | 'colId'> & { width?: number };
+
+export const datasetTableId = (id: string) => `data-table-id="${id}"`;
+export const datasetFull = (full: boolean) => full ? ' data-full="true"' : '';
+export const datasetAlign = (align: string) => align === 'left' ? '' : ` data-align="${align}"`;
+export const getColWidthStyle = (options: Required<Omit<ColOptions, 'align' | 'tableId' | 'width'>> & { width?: number; colNum: number }) => {
+  const { full, width, colNum } = options;
+  let colWidth = `${width}px`;
+  if (full) {
+    colWidth = `${1 / colNum * 100}%`;
+  }
+  return `width="${colWidth}"`;
+};
+export const createTableDeltaOps = (row: number, col: number, colOptions?: ColOptions, options: Partial<TableCreatorOptions> = {}) => {
+  const { isEmpty = false, tableId = '1' } = options;
+  const { full = true, width = 100, align = 'left' } = colOptions || {};
+  const table: any[] = [{ insert: '\n' }];
+  for (const [i, _] of new Array(col).fill(0).entries()) {
+    const value: TableColDeltaValue = { tableId, colId: `${i + 1}`, width: 1 / col * 100 };
+    if (full) {
+      value.full = 'true';
+    }
+    else {
+      value.width = width;
+    }
+    if (align !== 'left') {
+      value.align = align;
+    }
+    table.push({ insert: { 'table-up-col': value } });
+  }
+  for (let i = 0; i < row; i++) {
+    for (let j = 0; j < col; j++) {
+      if (!isEmpty) {
+        table.push({ insert: `${i * col + j + 1}` });
+      }
+      table.push(
+        {
+          attributes: { 'table-up-cell-inner': { tableId, rowId: i + 1, colId: j + 1, rowspan: 1, colspan: 1 } },
+          insert: '\n',
+        },
+      );
+    }
+  }
+  table.push({ insert: '\n' });
+  return table;
+};
+export const createTable = async (row: number, col: number, colOptions?: ColOptions, options?: Partial<TableCreatorOptions>) => {
+  const quill = createQuillWithTableModule(`<p><br></p>`);
+  quill.setContents(createTableDeltaOps(row, col, colOptions, options));
+  // set range for undo won't scrollSelectionIntoView
+  quill.setSelection({ index: 0, length: 0 });
+  await vi.runAllTimersAsync();
+  return quill;
+};
+export const createTaleColHTML = (colNum: number, colOptions?: Partial<ColOptions>, options?: Partial<TableCreatorOptions>) => {
+  const { full = true, width = 100, align = 'left' } = colOptions || {};
+  const { tableId = '1' } = options || {};
+  const colWidth = getColWidthStyle({ full, width, colNum });
+  return `
+    <colgroup ${datasetTableId(tableId)}${datasetFull(full)}${datasetAlign(align)}>
+      ${new Array(colNum).fill(0).map((_, i) => `<col ${colWidth} ${datasetTableId(tableId)} data-col-id="${i + 1}"${datasetFull(full)}${datasetAlign(align)} />`).join('\n')}
+    </colgroup>
+  `;
+};
+export const createTableBodyHTML = (row: number, col: number, options?: Partial<TableCreatorOptions>) => {
+  const { isEmpty = false, tableId = '1' } = options || {};
+  return `
+    <tbody ${datasetTableId(tableId)}>
+      ${
+        new Array(row).fill(0).map((_, i) => `
+          <tr ${datasetTableId(tableId)} data-row-id="${i + 1}">
+            ${
+              new Array(col).fill(0).map((_, j) => `<td rowspan="1" colspan="1" ${datasetTableId(tableId)} data-row-id="${i + 1}" data-col-id="${j + 1}">
+                <div ${datasetTableId(tableId)} data-rowspan="1" data-colspan="1" data-row-id="${i + 1}" data-col-id="${j + 1}">
+                  <p>
+                    ${isEmpty ? '<br>' : i * row + j + 1}
+                  </p>
+                </div>
+              </td>`).join('\n')
+            }
+          </tr>
+        `).join('\n')
+      }
+    </tbody>
+  `;
+};
+export const createTableHTML = (row: number, col: number, colOptions?: ColOptions, options?: Partial<TableCreatorOptions>) => {
+  const { full = true, width = 100, align = 'left' } = colOptions || {};
+  const { tableId = '1' } = options || {};
+  let alignStyle = 'margin-right: auto;';
+  switch (align) {
+    case 'center': {
+      alignStyle = 'margin-left: auto; margin-right: auto;';
+      break;
+    }
+    case '':
+    case 'left': {
+      alignStyle = 'margin-right: auto;';
+      break;
+    }
+    case 'right': {
+      alignStyle = 'margin-left: auto;';
+      break;
+    }
+    default: {
+      break;
+    }
+  }
+
+  return `
+    <div ${datasetTableId(tableId)}>
+      <table cellpadding="0" cellspacing="0" ${datasetTableId(tableId)}${datasetFull(full)}${datasetAlign(align)} style="${alignStyle}${full ? '' : ` width: ${width * col}px;`}">
+        ${createTaleColHTML(col, colOptions)}
+        ${createTableBodyHTML(row, col, options)}
+      </table>
+    </div>
+  `;
+};

package/src/__tests__/unit/vitest.d.ts

@@ -0,0 +1,12 @@
+/* eslint-disable ts/no-empty-object-type */
+/* eslint-disable unused-imports/no-unused-imports */
+import type { Assertion, AsymmetricMatchersContaining } from 'vitest';
+
+interface CustomMatchers<R = unknown> {
+  toEqualHTML: (html: string, options?: { ignoreAttrs?: string[] }) => R;
+}
+
+declare module 'vitest' {
+  interface Assertion<T = any> extends CustomMatchers<T> {}
+  interface AsymmetricMatchersContaining extends CustomMatchers {}
+}

package/src/formats/container-format.ts

@@ -0,0 +1,52 @@
+import type { Parchment as TypeParchment } from 'quill';
+import Quill from 'quill';
+import { blotName } from '../utils';
+
+const Parchment = Quill.import('parchment');
+const Container = Quill.import('blots/container') as typeof TypeParchment.ContainerBlot;
+const Block = Quill.import('blots/block') as TypeParchment.BlotConstructor;
+const BlockEmbed = Quill.import('blots/block/embed') as TypeParchment.BlotConstructor;
+
+export class ContainerFormat extends Container {
+  static tagName: string;
+  static blotName: string = blotName.container;
+  static scope = Parchment.Scope.BLOCK_BLOT;
+
+  static allowedChildren?: TypeParchment.BlotConstructor[] = [Block, BlockEmbed, Container];
+  static requiredContainer: TypeParchment.BlotConstructor;
+  static defaultChild?: TypeParchment.BlotConstructor;
+
+  static create(_value?: unknown) {
+    const node = document.createElement(this.tagName);
+    if (this.className) {
+      node.classList.add(this.className);
+    }
+    return node;
+  }
+
+  insertAt(index: number, value: string, def?: any): void {
+    const [child] = this.children.find(index);
+    if (!child) {
+      const defaultChild = this.scroll.create(this.statics.defaultChild.blotName || 'block');
+      this.appendChild(defaultChild);
+    }
+    super.insertAt(index, value, def);
+  }
+
+  public optimize(_context: Record<string, any>) {
+    if (this.children.length === 0) {
+      if (this.statics.defaultChild != null) {
+        const child = this.scroll.create(this.statics.defaultChild.blotName);
+        this.appendChild(child);
+      }
+      else {
+        this.remove();
+      }
+    }
+
+    if (this.children.length > 0 && this.next != null && this.checkMerge()) {
+      this.next.moveChildren(this);
+      this.next.remove();
+    }
+  }
+}

package/src/formats/index.ts

@@ -0,0 +1,10 @@
+export * from './container-format';
+export * from './overrides';
+export * from './table-body-format';
+export * from './table-cell-format';
+export * from './table-cell-inner-format';
+export * from './table-col-format';
+export * from './table-colgroup-format';
+export * from './table-main-format';
+export * from './table-row-format';
+export * from './table-wrapper-format';

package/src/formats/overrides/block.ts

@@ -0,0 +1,93 @@
+import type { Parchment as TypeParchment } from 'quill';
+import type TypeBlock from 'quill/blots/block';
+import Quill from 'quill';
+import { blotName, findParentBlots } from '../../utils';
+
+const Parchment = Quill.import('parchment');
+const Block = Quill.import('blots/block') as typeof TypeBlock;
+
+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;
+    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
+      // so we need to set text in block and block in TableCellInner
+      // wrap with TableCellInner.formatAt when length is 0 will create a new block
+      // that can make sure TableCellInner struct correctly
+      if (replacement.statics.blotName === blotName.tableCellInner) {
+        const selfParent = this.parent;
+        if (selfParent.statics.blotName === blotName.tableCellInner) {
+          if (selfParent != null) {
+            selfParent.insertBefore(replacement, this.prev ? null : this.next);
+          }
+          if (this.parent.statics.blotName === blotName.tableCellInner && this.prev) {
+            let block: TypeBlock | null = this;
+            while (block) {
+              const next = block.next as TypeBlock | null;
+              replacement.appendChild(block);
+              block = next;
+            }
+          }
+          else {
+            replacement.appendChild(this);
+          }
+          // remove empty cell. tableCellFormat.optimize need col to compute
+          if (selfParent && selfParent.length() === 0) {
+            selfParent.parent.remove();
+            const selfRow = selfParent.parent.parent;
+            if (selfRow.statics.blotName === blotName.tableRow && selfRow.children.length === 0) {
+              selfRow.remove();
+            }
+          }
+        }
+        else {
+          if (selfParent != null) {
+            selfParent.insertBefore(replacement, this.next);
+          }
+          replacement.appendChild(this);
+        }
+        return replacement;
+      }
+      else {
+        this.moveChildren(replacement);
+      }
+    }
+    if (this.parent != null) {
+      this.parent.insertBefore(replacement, this.next || undefined);
+      this.remove();
+    }
+    this.attributes.copy(replacement as TypeParchment.BlockBlot);
+    return replacement;
+  }
+
+  format(name: string, value: any): void {
+    if (name === blotName.tableCellInner && this.parent.statics.blotName === name && !value) {
+      // when set tableCellInner null. not only clear current block tableCellInner block and also
+      // need move td/tr after current cell out of current table. like code-block, split into two table
+      const [tableCell, tableRow, tableWrapper] = findParentBlots(this, [blotName.tableCell, blotName.tableRow, blotName.tableWrapper] as const);
+      const tableNext = tableWrapper.next;
+      let tableRowNext = tableRow.next;
+      let tableCellNext = tableCell.next;
+
+      // clear cur block
+      tableWrapper.parent.insertBefore(this, tableNext);
+      // only move out of table. `optimize` will generate new table
+      // move table cell
+      while (tableCellNext) {
+        const next = tableCellNext.next;
+        tableWrapper.parent.insertBefore(tableCellNext, tableNext);
+        tableCellNext = next as TypeParchment.ContainerBlot;
+      }
+      // move table row
+      while (tableRowNext) {
+        const next = tableRowNext.next;
+        tableWrapper.parent.insertBefore(tableRowNext, tableNext);
+        tableRowNext = next as TypeParchment.ContainerBlot;
+      }
+    }
+    else {
+      super.format(name, value);
+    }
+  }
+}

package/src/formats/overrides/blockquote.ts

@@ -0,0 +1,8 @@
+import type TypeBlockquote from 'quill/formats/blockquote';
+import Quill from 'quill';
+import { mixinClass } from '../../utils';
+import { BlockOverride } from './block';
+
+const Blockquote = Quill.import('formats/blockquote') as typeof TypeBlockquote;
+
+export class BlockquoteOverride extends mixinClass(Blockquote, [BlockOverride]) {}

package/src/formats/overrides/code.ts

@@ -0,0 +1,8 @@
+import type TypeCodeBlock from 'quill/formats/code';
+import Quill from 'quill';
+import { mixinClass } from '../../utils';
+import { BlockOverride } from './block';
+
+const CodeBlock = Quill.import('formats/code-block') as typeof TypeCodeBlock;
+
+export class CodeBlockOverride extends mixinClass(CodeBlock, [BlockOverride]) {}

package/src/formats/overrides/header.ts

@@ -0,0 +1,8 @@
+import type TypeHeader from 'quill/formats/header';
+import Quill from 'quill';
+import { mixinClass } from '../../utils';
+import { BlockOverride } from './block';
+
+const Header = Quill.import('formats/header') as typeof TypeHeader;
+
+export class HeaderOverride extends mixinClass(Header, [BlockOverride]) {}

package/src/formats/overrides/index.ts

@@ -0,0 +1,6 @@
+export * from './block';
+export * from './blockquote';
+export * from './code';
+export * from './header';
+export * from './list';
+export * from './scroll';

package/src/formats/overrides/list.ts

@@ -0,0 +1,10 @@
+import type TypeListItem from 'quill/formats/list';
+import Quill from 'quill';
+import { mixinClass } from '../../utils';
+import { BlockOverride } from './block';
+
+const ListItem = Quill.import('formats/list') as typeof TypeListItem;
+
+export class ListItemOverride extends mixinClass(ListItem, [BlockOverride]) {
+  static register(): void {}
+}

package/src/formats/overrides/scroll.ts

@@ -0,0 +1,51 @@
+import type { Parchment as TypeParchment } from 'quill';
+import Quill from 'quill';
+import { blotName } from '../../utils';
+import { TableCellInnerFormat } from '../table-cell-inner-format';
+
+const Parchment = Quill.import('parchment');
+const ScrollBlot = Quill.import('blots/scroll') as any;
+
+export class ScrollOverride extends ScrollBlot {
+  createBlock(attributes: Record<string, any>, refBlot?: TypeParchment.Blot) {
+    let createBlotName: string | undefined;
+    let formats: Record<string, any> = {};
+    if (attributes[blotName.tableCellInner]) {
+      createBlotName = blotName.tableCellInner;
+    }
+    else {
+      // if attributes have not only one block blot. will save last. that will conflict with list/header in tableCellInner
+      for (const [key, value] of Object.entries(attributes)) {
+        const isBlockBlot = this.query(key, Parchment.Scope.BLOCK & Parchment.Scope.BLOT) != null;
+        if (isBlockBlot) {
+          createBlotName = key;
+        }
+        else {
+          formats[key] = value;
+        }
+      }
+    }
+    // only add this judgement to merge block blot at table cell
+    if (createBlotName === blotName.tableCellInner) {
+      formats = { ...attributes };
+      delete formats[createBlotName];
+    }
+
+    const block = this.create(
+      createBlotName || this.statics.defaultChild.blotName,
+      createBlotName ? attributes[createBlotName] : undefined,
+    ) as TypeParchment.ParentBlot;
+
+    this.insertBefore(block, refBlot || undefined);
+
+    let length = block.length();
+    if (block instanceof TableCellInnerFormat && length === 0) {
+      length += 1;
+    }
+    for (const [key, value] of Object.entries(formats)) {
+      block.formatAt(0, length, key, value);
+    }
+
+    return block;
+  }
+}

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

@@ -0,0 +1,92 @@
+import { blotName, findParentBlot, randomId } from '../utils';
+import { ContainerFormat } from './container-format';
+import { TableRowFormat } from './table-row-format';
+
+export class TableBodyFormat extends ContainerFormat {
+  static blotName = blotName.tableBody;
+  static tagName = 'tbody';
+
+  static create(value: string) {
+    const node = super.create() as HTMLElement;
+    node.dataset.tableId = value;
+    return node;
+  }
+
+  get tableId() {
+    return this.domNode.dataset.tableId!;
+  }
+
+  // insert row at index
+  insertRow(targetIndex: number) {
+    const tableBlot = findParentBlot(this, blotName.tableMain);
+    if (!tableBlot) return;
+    // get all column id. exclude the columns of the target index row with rowspan
+    const colIds = tableBlot.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 = tableBlot.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);
+    }
+    this.insertBefore(tableRow, rows[targetIndex] || null);
+  }
+
+  checkMerge(): boolean {
+    const next = this.next as TableBodyFormat;
+    return (
+      next !== null
+      && next.statics.blotName === this.statics.blotName
+      && next.tableId === this.tableId
+    );
+  }
+
+  optimize(context: Record<string, any>) {
+    const parent = this.parent;
+    if (parent !== null && parent.statics.blotName !== blotName.tableMain) {
+      const { tableId } = this;
+      this.wrap(blotName.tableMain, { tableId });
+    }
+
+    super.optimize(context);
+  }
+}