@tiptap/extension-table 2.0.0-beta.21 → 2.0.0-beta.210

package/dist/index.cjs

@@ -0,0 +1,326 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/table.ts
+
+
+
+
+
+var _core = require('@tiptap/core');
+var _state = require('@tiptap/pm/state');
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+var _tables = require('@tiptap/pm/tables');
+
+// src/TableView.ts
+function updateColumns(node, colgroup, table, cellMinWidth, overrideCol, overrideValue) {
+  let totalWidth = 0;
+  let fixedWidth = true;
+  let nextDOM = colgroup.firstChild;
+  const row = node.firstChild;
+  for (let i = 0, col = 0; i < row.childCount; i += 1) {
+    const { colspan, colwidth } = row.child(i).attrs;
+    for (let j = 0; j < colspan; j += 1, col += 1) {
+      const hasWidth = overrideCol === col ? overrideValue : colwidth && colwidth[j];
+      const cssWidth = hasWidth ? `${hasWidth}px` : "";
+      totalWidth += hasWidth || cellMinWidth;
+      if (!hasWidth) {
+        fixedWidth = false;
+      }
+      if (!nextDOM) {
+        colgroup.appendChild(document.createElement("col")).style.width = cssWidth;
+      } else {
+        if (nextDOM.style.width !== cssWidth) {
+          nextDOM.style.width = cssWidth;
+        }
+        nextDOM = nextDOM.nextSibling;
+      }
+    }
+  }
+  while (nextDOM) {
+    const after = nextDOM.nextSibling;
+    nextDOM.parentNode.removeChild(nextDOM);
+    nextDOM = after;
+  }
+  if (fixedWidth) {
+    table.style.width = `${totalWidth}px`;
+    table.style.minWidth = "";
+  } else {
+    table.style.width = "";
+    table.style.minWidth = `${totalWidth}px`;
+  }
+}
+var TableView = class {
+  constructor(node, cellMinWidth) {
+    this.node = node;
+    this.cellMinWidth = cellMinWidth;
+    this.dom = document.createElement("div");
+    this.dom.className = "tableWrapper";
+    this.table = this.dom.appendChild(document.createElement("table"));
+    this.colgroup = this.table.appendChild(document.createElement("colgroup"));
+    updateColumns(node, this.colgroup, this.table, cellMinWidth);
+    this.contentDOM = this.table.appendChild(document.createElement("tbody"));
+  }
+  update(node) {
+    if (node.type !== this.node.type) {
+      return false;
+    }
+    this.node = node;
+    updateColumns(node, this.colgroup, this.table, this.cellMinWidth);
+    return true;
+  }
+  ignoreMutation(mutation) {
+    return mutation.type === "attributes" && (mutation.target === this.table || this.colgroup.contains(mutation.target));
+  }
+};
+
+// src/utilities/createCell.ts
+function createCell(cellType, cellContent) {
+  if (cellContent) {
+    return cellType.createChecked(null, cellContent);
+  }
+  return cellType.createAndFill();
+}
+
+// src/utilities/getTableNodeTypes.ts
+function getTableNodeTypes(schema) {
+  if (schema.cached.tableNodeTypes) {
+    return schema.cached.tableNodeTypes;
+  }
+  const roles = {};
+  Object.keys(schema.nodes).forEach((type) => {
+    const nodeType = schema.nodes[type];
+    if (nodeType.spec.tableRole) {
+      roles[nodeType.spec.tableRole] = nodeType;
+    }
+  });
+  schema.cached.tableNodeTypes = roles;
+  return roles;
+}
+
+// src/utilities/createTable.ts
+function createTable(schema, rowsCount, colsCount, withHeaderRow, cellContent) {
+  const types = getTableNodeTypes(schema);
+  const headerCells = [];
+  const cells = [];
+  for (let index = 0; index < colsCount; index += 1) {
+    const cell = createCell(types.cell, cellContent);
+    if (cell) {
+      cells.push(cell);
+    }
+    if (withHeaderRow) {
+      const headerCell = createCell(types.header_cell, cellContent);
+      if (headerCell) {
+        headerCells.push(headerCell);
+      }
+    }
+  }
+  const rows = [];
+  for (let index = 0; index < rowsCount; index += 1) {
+    rows.push(types.row.createChecked(null, withHeaderRow && index === 0 ? headerCells : cells));
+  }
+  return types.table.createChecked(null, rows);
+}
+
+// src/utilities/deleteTableWhenAllCellsSelected.ts
+
+
+// src/utilities/isCellSelection.ts
+
+function isCellSelection(value) {
+  return value instanceof _tables.CellSelection;
+}
+
+// src/utilities/deleteTableWhenAllCellsSelected.ts
+var deleteTableWhenAllCellsSelected = ({ editor }) => {
+  const { selection } = editor.state;
+  if (!isCellSelection(selection)) {
+    return false;
+  }
+  let cellCount = 0;
+  const table = _core.findParentNodeClosestToPos.call(void 0, selection.ranges[0].$from, (node) => {
+    return node.type.name === "table";
+  });
+  table == null ? void 0 : table.node.descendants((node) => {
+    if (node.type.name === "table") {
+      return false;
+    }
+    if (["tableCell", "tableHeader"].includes(node.type.name)) {
+      cellCount += 1;
+    }
+  });
+  const allCellsSelected = cellCount === selection.ranges.length;
+  if (!allCellsSelected) {
+    return false;
+  }
+  editor.commands.deleteTable();
+  return true;
+};
+
+// src/table.ts
+var Table = _core.Node.create({
+  name: "table",
+  addOptions() {
+    return {
+      HTMLAttributes: {},
+      resizable: false,
+      handleWidth: 5,
+      cellMinWidth: 25,
+      View: TableView,
+      lastColumnResizable: true,
+      allowTableNodeSelection: false
+    };
+  },
+  content: "tableRow+",
+  tableRole: "table",
+  isolating: true,
+  group: "block",
+  parseHTML() {
+    return [{ tag: "table" }];
+  },
+  renderHTML({ HTMLAttributes }) {
+    return ["table", _core.mergeAttributes.call(void 0, this.options.HTMLAttributes, HTMLAttributes), ["tbody", 0]];
+  },
+  addCommands() {
+    return {
+      insertTable: ({ rows = 3, cols = 3, withHeaderRow = true } = {}) => ({ tr, dispatch, editor }) => {
+        const node = createTable(editor.schema, rows, cols, withHeaderRow);
+        if (dispatch) {
+          const offset = tr.selection.anchor + 1;
+          tr.replaceSelectionWith(node).scrollIntoView().setSelection(_state.TextSelection.near(tr.doc.resolve(offset)));
+        }
+        return true;
+      },
+      addColumnBefore: () => ({ state, dispatch }) => {
+        return _tables.addColumnBefore.call(void 0, state, dispatch);
+      },
+      addColumnAfter: () => ({ state, dispatch }) => {
+        return _tables.addColumnAfter.call(void 0, state, dispatch);
+      },
+      deleteColumn: () => ({ state, dispatch }) => {
+        return _tables.deleteColumn.call(void 0, state, dispatch);
+      },
+      addRowBefore: () => ({ state, dispatch }) => {
+        return _tables.addRowBefore.call(void 0, state, dispatch);
+      },
+      addRowAfter: () => ({ state, dispatch }) => {
+        return _tables.addRowAfter.call(void 0, state, dispatch);
+      },
+      deleteRow: () => ({ state, dispatch }) => {
+        return _tables.deleteRow.call(void 0, state, dispatch);
+      },
+      deleteTable: () => ({ state, dispatch }) => {
+        return _tables.deleteTable.call(void 0, state, dispatch);
+      },
+      mergeCells: () => ({ state, dispatch }) => {
+        return _tables.mergeCells.call(void 0, state, dispatch);
+      },
+      splitCell: () => ({ state, dispatch }) => {
+        return _tables.splitCell.call(void 0, state, dispatch);
+      },
+      toggleHeaderColumn: () => ({ state, dispatch }) => {
+        return _tables.toggleHeader.call(void 0, "column")(state, dispatch);
+      },
+      toggleHeaderRow: () => ({ state, dispatch }) => {
+        return _tables.toggleHeader.call(void 0, "row")(state, dispatch);
+      },
+      toggleHeaderCell: () => ({ state, dispatch }) => {
+        return _tables.toggleHeaderCell.call(void 0, state, dispatch);
+      },
+      mergeOrSplit: () => ({ state, dispatch }) => {
+        if (_tables.mergeCells.call(void 0, state, dispatch)) {
+          return true;
+        }
+        return _tables.splitCell.call(void 0, state, dispatch);
+      },
+      setCellAttribute: (name, value) => ({ state, dispatch }) => {
+        return _tables.setCellAttr.call(void 0, name, value)(state, dispatch);
+      },
+      goToNextCell: () => ({ state, dispatch }) => {
+        return _tables.goToNextCell.call(void 0, 1)(state, dispatch);
+      },
+      goToPreviousCell: () => ({ state, dispatch }) => {
+        return _tables.goToNextCell.call(void 0, -1)(state, dispatch);
+      },
+      fixTables: () => ({ state, dispatch }) => {
+        if (dispatch) {
+          _tables.fixTables.call(void 0, state);
+        }
+        return true;
+      },
+      setCellSelection: (position) => ({ tr, dispatch }) => {
+        if (dispatch) {
+          const selection = _tables.CellSelection.create(tr.doc, position.anchorCell, position.headCell);
+          tr.setSelection(selection);
+        }
+        return true;
+      }
+    };
+  },
+  addKeyboardShortcuts() {
+    return {
+      Tab: () => {
+        if (this.editor.commands.goToNextCell()) {
+          return true;
+        }
+        if (!this.editor.can().addRowAfter()) {
+          return false;
+        }
+        return this.editor.chain().addRowAfter().goToNextCell().run();
+      },
+      "Shift-Tab": () => this.editor.commands.goToPreviousCell(),
+      Backspace: deleteTableWhenAllCellsSelected,
+      "Mod-Backspace": deleteTableWhenAllCellsSelected,
+      Delete: deleteTableWhenAllCellsSelected,
+      "Mod-Delete": deleteTableWhenAllCellsSelected
+    };
+  },
+  addProseMirrorPlugins() {
+    const isResizable = this.options.resizable && this.editor.isEditable;
+    return [
+      ...isResizable ? [
+        _tables.columnResizing.call(void 0, {
+          handleWidth: this.options.handleWidth,
+          cellMinWidth: this.options.cellMinWidth,
+          View: this.options.View,
+          lastColumnResizable: this.options.lastColumnResizable
+        })
+      ] : [],
+      _tables.tableEditing.call(void 0, {
+        allowTableNodeSelection: this.options.allowTableNodeSelection
+      })
+    ];
+  },
+  extendNodeSchema(extension) {
+    const context = {
+      name: extension.name,
+      options: extension.options,
+      storage: extension.storage
+    };
+    return {
+      tableRole: _core.callOrReturn.call(void 0, _core.getExtensionField.call(void 0, extension, "tableRole", context))
+    };
+  }
+});
+
+// src/index.ts
+var src_default = Table;
+
+
+
+
+exports.Table = Table; exports.createTable = createTable; exports.default = src_default;

package/dist/index.d.ts

@@ -0,0 +1,61 @@
+import { ParentConfig, Node } from '@tiptap/core';
+import { NodeView } from '@tiptap/pm/view';
+import { Schema, Fragment, Node as Node$1 } from '@tiptap/pm/model';
+
+interface TableOptions {
+    HTMLAttributes: Record<string, any>;
+    resizable: boolean;
+    handleWidth: number;
+    cellMinWidth: number;
+    View: NodeView;
+    lastColumnResizable: boolean;
+    allowTableNodeSelection: boolean;
+}
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        table: {
+            insertTable: (options?: {
+                rows?: number;
+                cols?: number;
+                withHeaderRow?: boolean;
+            }) => ReturnType;
+            addColumnBefore: () => ReturnType;
+            addColumnAfter: () => ReturnType;
+            deleteColumn: () => ReturnType;
+            addRowBefore: () => ReturnType;
+            addRowAfter: () => ReturnType;
+            deleteRow: () => ReturnType;
+            deleteTable: () => ReturnType;
+            mergeCells: () => ReturnType;
+            splitCell: () => ReturnType;
+            toggleHeaderColumn: () => ReturnType;
+            toggleHeaderRow: () => ReturnType;
+            toggleHeaderCell: () => ReturnType;
+            mergeOrSplit: () => ReturnType;
+            setCellAttribute: (name: string, value: any) => ReturnType;
+            goToNextCell: () => ReturnType;
+            goToPreviousCell: () => ReturnType;
+            fixTables: () => ReturnType;
+            setCellSelection: (position: {
+                anchorCell: number;
+                headCell?: number;
+            }) => ReturnType;
+        };
+    }
+    interface NodeConfig<Options, Storage> {
+        /**
+         * Table Role
+         */
+        tableRole?: string | ((this: {
+            name: string;
+            options: Options;
+            storage: Storage;
+            parent: ParentConfig<NodeConfig<Options>>['tableRole'];
+        }) => string);
+    }
+}
+declare const Table: Node<TableOptions, any>;
+
+declare function createTable(schema: Schema, rowsCount: number, colsCount: number, withHeaderRow: boolean, cellContent?: Fragment | Node$1 | Array<Node$1>): Node$1;
+
+export { Table, TableOptions, createTable, Table as default };

package/dist/index.js

@@ -0,0 +1,326 @@
+// src/table.ts
+import {
+  callOrReturn,
+  getExtensionField,
+  mergeAttributes,
+  Node
+} from "@tiptap/core";
+import { TextSelection } from "@tiptap/pm/state";
+import {
+  addColumnAfter,
+  addColumnBefore,
+  addRowAfter,
+  addRowBefore,
+  CellSelection as CellSelection2,
+  columnResizing,
+  deleteColumn,
+  deleteRow,
+  deleteTable,
+  fixTables,
+  goToNextCell,
+  mergeCells,
+  setCellAttr,
+  splitCell,
+  tableEditing,
+  toggleHeader,
+  toggleHeaderCell
+} from "@tiptap/pm/tables";
+
+// src/TableView.ts
+function updateColumns(node, colgroup, table, cellMinWidth, overrideCol, overrideValue) {
+  let totalWidth = 0;
+  let fixedWidth = true;
+  let nextDOM = colgroup.firstChild;
+  const row = node.firstChild;
+  for (let i = 0, col = 0; i < row.childCount; i += 1) {
+    const { colspan, colwidth } = row.child(i).attrs;
+    for (let j = 0; j < colspan; j += 1, col += 1) {
+      const hasWidth = overrideCol === col ? overrideValue : colwidth && colwidth[j];
+      const cssWidth = hasWidth ? `${hasWidth}px` : "";
+      totalWidth += hasWidth || cellMinWidth;
+      if (!hasWidth) {
+        fixedWidth = false;
+      }
+      if (!nextDOM) {
+        colgroup.appendChild(document.createElement("col")).style.width = cssWidth;
+      } else {
+        if (nextDOM.style.width !== cssWidth) {
+          nextDOM.style.width = cssWidth;
+        }
+        nextDOM = nextDOM.nextSibling;
+      }
+    }
+  }
+  while (nextDOM) {
+    const after = nextDOM.nextSibling;
+    nextDOM.parentNode.removeChild(nextDOM);
+    nextDOM = after;
+  }
+  if (fixedWidth) {
+    table.style.width = `${totalWidth}px`;
+    table.style.minWidth = "";
+  } else {
+    table.style.width = "";
+    table.style.minWidth = `${totalWidth}px`;
+  }
+}
+var TableView = class {
+  constructor(node, cellMinWidth) {
+    this.node = node;
+    this.cellMinWidth = cellMinWidth;
+    this.dom = document.createElement("div");
+    this.dom.className = "tableWrapper";
+    this.table = this.dom.appendChild(document.createElement("table"));
+    this.colgroup = this.table.appendChild(document.createElement("colgroup"));
+    updateColumns(node, this.colgroup, this.table, cellMinWidth);
+    this.contentDOM = this.table.appendChild(document.createElement("tbody"));
+  }
+  update(node) {
+    if (node.type !== this.node.type) {
+      return false;
+    }
+    this.node = node;
+    updateColumns(node, this.colgroup, this.table, this.cellMinWidth);
+    return true;
+  }
+  ignoreMutation(mutation) {
+    return mutation.type === "attributes" && (mutation.target === this.table || this.colgroup.contains(mutation.target));
+  }
+};
+
+// src/utilities/createCell.ts
+function createCell(cellType, cellContent) {
+  if (cellContent) {
+    return cellType.createChecked(null, cellContent);
+  }
+  return cellType.createAndFill();
+}
+
+// src/utilities/getTableNodeTypes.ts
+function getTableNodeTypes(schema) {
+  if (schema.cached.tableNodeTypes) {
+    return schema.cached.tableNodeTypes;
+  }
+  const roles = {};
+  Object.keys(schema.nodes).forEach((type) => {
+    const nodeType = schema.nodes[type];
+    if (nodeType.spec.tableRole) {
+      roles[nodeType.spec.tableRole] = nodeType;
+    }
+  });
+  schema.cached.tableNodeTypes = roles;
+  return roles;
+}
+
+// src/utilities/createTable.ts
+function createTable(schema, rowsCount, colsCount, withHeaderRow, cellContent) {
+  const types = getTableNodeTypes(schema);
+  const headerCells = [];
+  const cells = [];
+  for (let index = 0; index < colsCount; index += 1) {
+    const cell = createCell(types.cell, cellContent);
+    if (cell) {
+      cells.push(cell);
+    }
+    if (withHeaderRow) {
+      const headerCell = createCell(types.header_cell, cellContent);
+      if (headerCell) {
+        headerCells.push(headerCell);
+      }
+    }
+  }
+  const rows = [];
+  for (let index = 0; index < rowsCount; index += 1) {
+    rows.push(types.row.createChecked(null, withHeaderRow && index === 0 ? headerCells : cells));
+  }
+  return types.table.createChecked(null, rows);
+}
+
+// src/utilities/deleteTableWhenAllCellsSelected.ts
+import { findParentNodeClosestToPos } from "@tiptap/core";
+
+// src/utilities/isCellSelection.ts
+import { CellSelection } from "@tiptap/pm/tables";
+function isCellSelection(value) {
+  return value instanceof CellSelection;
+}
+
+// src/utilities/deleteTableWhenAllCellsSelected.ts
+var deleteTableWhenAllCellsSelected = ({ editor }) => {
+  const { selection } = editor.state;
+  if (!isCellSelection(selection)) {
+    return false;
+  }
+  let cellCount = 0;
+  const table = findParentNodeClosestToPos(selection.ranges[0].$from, (node) => {
+    return node.type.name === "table";
+  });
+  table == null ? void 0 : table.node.descendants((node) => {
+    if (node.type.name === "table") {
+      return false;
+    }
+    if (["tableCell", "tableHeader"].includes(node.type.name)) {
+      cellCount += 1;
+    }
+  });
+  const allCellsSelected = cellCount === selection.ranges.length;
+  if (!allCellsSelected) {
+    return false;
+  }
+  editor.commands.deleteTable();
+  return true;
+};
+
+// src/table.ts
+var Table = Node.create({
+  name: "table",
+  addOptions() {
+    return {
+      HTMLAttributes: {},
+      resizable: false,
+      handleWidth: 5,
+      cellMinWidth: 25,
+      View: TableView,
+      lastColumnResizable: true,
+      allowTableNodeSelection: false
+    };
+  },
+  content: "tableRow+",
+  tableRole: "table",
+  isolating: true,
+  group: "block",
+  parseHTML() {
+    return [{ tag: "table" }];
+  },
+  renderHTML({ HTMLAttributes }) {
+    return ["table", mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), ["tbody", 0]];
+  },
+  addCommands() {
+    return {
+      insertTable: ({ rows = 3, cols = 3, withHeaderRow = true } = {}) => ({ tr, dispatch, editor }) => {
+        const node = createTable(editor.schema, rows, cols, withHeaderRow);
+        if (dispatch) {
+          const offset = tr.selection.anchor + 1;
+          tr.replaceSelectionWith(node).scrollIntoView().setSelection(TextSelection.near(tr.doc.resolve(offset)));
+        }
+        return true;
+      },
+      addColumnBefore: () => ({ state, dispatch }) => {
+        return addColumnBefore(state, dispatch);
+      },
+      addColumnAfter: () => ({ state, dispatch }) => {
+        return addColumnAfter(state, dispatch);
+      },
+      deleteColumn: () => ({ state, dispatch }) => {
+        return deleteColumn(state, dispatch);
+      },
+      addRowBefore: () => ({ state, dispatch }) => {
+        return addRowBefore(state, dispatch);
+      },
+      addRowAfter: () => ({ state, dispatch }) => {
+        return addRowAfter(state, dispatch);
+      },
+      deleteRow: () => ({ state, dispatch }) => {
+        return deleteRow(state, dispatch);
+      },
+      deleteTable: () => ({ state, dispatch }) => {
+        return deleteTable(state, dispatch);
+      },
+      mergeCells: () => ({ state, dispatch }) => {
+        return mergeCells(state, dispatch);
+      },
+      splitCell: () => ({ state, dispatch }) => {
+        return splitCell(state, dispatch);
+      },
+      toggleHeaderColumn: () => ({ state, dispatch }) => {
+        return toggleHeader("column")(state, dispatch);
+      },
+      toggleHeaderRow: () => ({ state, dispatch }) => {
+        return toggleHeader("row")(state, dispatch);
+      },
+      toggleHeaderCell: () => ({ state, dispatch }) => {
+        return toggleHeaderCell(state, dispatch);
+      },
+      mergeOrSplit: () => ({ state, dispatch }) => {
+        if (mergeCells(state, dispatch)) {
+          return true;
+        }
+        return splitCell(state, dispatch);
+      },
+      setCellAttribute: (name, value) => ({ state, dispatch }) => {
+        return setCellAttr(name, value)(state, dispatch);
+      },
+      goToNextCell: () => ({ state, dispatch }) => {
+        return goToNextCell(1)(state, dispatch);
+      },
+      goToPreviousCell: () => ({ state, dispatch }) => {
+        return goToNextCell(-1)(state, dispatch);
+      },
+      fixTables: () => ({ state, dispatch }) => {
+        if (dispatch) {
+          fixTables(state);
+        }
+        return true;
+      },
+      setCellSelection: (position) => ({ tr, dispatch }) => {
+        if (dispatch) {
+          const selection = CellSelection2.create(tr.doc, position.anchorCell, position.headCell);
+          tr.setSelection(selection);
+        }
+        return true;
+      }
+    };
+  },
+  addKeyboardShortcuts() {
+    return {
+      Tab: () => {
+        if (this.editor.commands.goToNextCell()) {
+          return true;
+        }
+        if (!this.editor.can().addRowAfter()) {
+          return false;
+        }
+        return this.editor.chain().addRowAfter().goToNextCell().run();
+      },
+      "Shift-Tab": () => this.editor.commands.goToPreviousCell(),
+      Backspace: deleteTableWhenAllCellsSelected,
+      "Mod-Backspace": deleteTableWhenAllCellsSelected,
+      Delete: deleteTableWhenAllCellsSelected,
+      "Mod-Delete": deleteTableWhenAllCellsSelected
+    };
+  },
+  addProseMirrorPlugins() {
+    const isResizable = this.options.resizable && this.editor.isEditable;
+    return [
+      ...isResizable ? [
+        columnResizing({
+          handleWidth: this.options.handleWidth,
+          cellMinWidth: this.options.cellMinWidth,
+          View: this.options.View,
+          lastColumnResizable: this.options.lastColumnResizable
+        })
+      ] : [],
+      tableEditing({
+        allowTableNodeSelection: this.options.allowTableNodeSelection
+      })
+    ];
+  },
+  extendNodeSchema(extension) {
+    const context = {
+      name: extension.name,
+      options: extension.options,
+      storage: extension.storage
+    };
+    return {
+      tableRole: callOrReturn(getExtensionField(extension, "tableRole", context))
+    };
+  }
+});
+
+// src/index.ts
+var src_default = Table;
+export {
+  Table,
+  createTable,
+  src_default as default
+};