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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tiptap/extension-table",
   "description": "table extension for tiptap",
-  "version": "2.0.0-beta.21",
+  "version": "2.0.0-beta.211",
   "homepage": "https://tiptap.dev",
   "keywords": [
     "tiptap",
@@ -12,20 +12,46 @@
     "type": "github",
     "url": "https://github.com/sponsors/ueberdosis"
   },
-  "main": "dist/tiptap-extension-table.cjs.js",
-  "umd": "dist/tiptap-extension-table.umd.js",
-  "module": "dist/tiptap-extension-table.esm.js",
-  "types": "dist/packages/extension-table/src/index.d.ts",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
   "files": [
     "src",
     "dist"
   ],
   "peerDependencies": {
-    "@tiptap/core": "^2.0.0-beta.1"
+    "@tiptap/core": "^2.0.0-beta.209",
+    "@tiptap/pm": "^2.0.0-beta.209"
+  },
+  "devDependencies": {
+    "@tiptap/core": "^2.0.0-beta.211",
+    "@tiptap/pm": "^2.0.0-beta.211"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ueberdosis/tiptap",
+    "directory": "packages/extension-table"
   },
-  "dependencies": {
-    "prosemirror-tables": "^1.1.1",
-    "prosemirror-view": "^1.18.6"
+  "scripts": {
+    "build": "tsup"
   },
-  "gitHead": "6b154e4c8161fbba987e162ebebc155243432f24"
+  "tsup": {
+    "entry": [
+      "src/index.ts"
+    ],
+    "dts": true,
+    "splitting": true,
+    "format": [
+      "esm",
+      "cjs"
+    ]
+  }
 }

package/src/TableView.ts

@@ -1,8 +1,15 @@
 // @ts-nocheck
-import { NodeView } from 'prosemirror-view'
-import { Node as ProseMirrorNode } from 'prosemirror-model'
-
-export function updateColumns(node: ProseMirrorNode, colgroup: Element, table: Element, cellMinWidth: number, overrideCol?: number, overrideValue?: any) {
+import { Node as ProseMirrorNode } from '@tiptap/pm/model'
+import { NodeView } from '@tiptap/pm/view'
+
+export function updateColumns(
+  node: ProseMirrorNode,
+  colgroup: Element,
+  table: Element,
+  cellMinWidth: number,
+  overrideCol?: number,
+  overrideValue?: any,
+) {
   let totalWidth = 0
   let fixedWidth = true
   let nextDOM = colgroup.firstChild
@@ -14,6 +21,7 @@ export function updateColumns(node: ProseMirrorNode, colgroup: Element, table: E
     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) {
@@ -34,6 +42,7 @@ export function updateColumns(node: ProseMirrorNode, colgroup: Element, table: E
 
   while (nextDOM) {
     const after = nextDOM.nextSibling
+
     nextDOM.parentNode.removeChild(nextDOM)
     nextDOM = after
   }
@@ -48,7 +57,6 @@ export function updateColumns(node: ProseMirrorNode, colgroup: Element, table: E
 }
 
 export class TableView implements NodeView {
-
   node: ProseMirrorNode
 
   cellMinWidth: number
@@ -84,6 +92,9 @@ export class TableView implements NodeView {
   }
 
   ignoreMutation(mutation: MutationRecord | { type: 'selection'; target: Element }) {
-    return mutation.type === 'attributes' && (mutation.target === this.table || this.colgroup.contains(mutation.target))
+    return (
+      mutation.type === 'attributes'
+      && (mutation.target === this.table || this.colgroup.contains(mutation.target))
+    )
   }
 }

package/src/index.ts

@@ -1,5 +1,6 @@
 import { Table } from './table'
 
 export * from './table'
+export * from './utilities/createTable'
 
 export default Table

package/src/table.ts

@@ -1,97 +1,101 @@
 import {
-  Node,
-  Command,
-  ParentConfig,
-  mergeAttributes,
-  getExtensionField,
-  callOrReturn,
+  callOrReturn, getExtensionField, mergeAttributes, Node, ParentConfig,
 } from '@tiptap/core'
+import { TextSelection } from '@tiptap/pm/state'
 import {
-  tableEditing,
-  columnResizing,
-  goToNextCell,
-  addColumnBefore,
   addColumnAfter,
-  deleteColumn,
-  addRowBefore,
+  addColumnBefore,
   addRowAfter,
+  addRowBefore,
+  CellSelection,
+  columnResizing,
+  deleteColumn,
   deleteRow,
   deleteTable,
+  fixTables,
+  goToNextCell,
   mergeCells,
+  setCellAttr,
   splitCell,
-  toggleHeaderColumn,
-  toggleHeaderRow,
+  tableEditing,
+  toggleHeader,
   toggleHeaderCell,
-  setCellAttr,
-  fixTables,
-  CellSelection,
-} from 'prosemirror-tables'
-import { NodeView } from 'prosemirror-view'
-import { TextSelection } from 'prosemirror-state'
+} from '@tiptap/pm/tables'
+import { NodeView } from '@tiptap/pm/view'
+
+import { TableView } from './TableView'
 import { createTable } from './utilities/createTable'
 import { deleteTableWhenAllCellsSelected } from './utilities/deleteTableWhenAllCellsSelected'
-import { TableView } from './TableView'
 
 export interface TableOptions {
-  HTMLAttributes: Record<string, any>,
-  resizable: boolean,
-  handleWidth: number,
-  cellMinWidth: number,
-  View: NodeView,
-  lastColumnResizable: boolean,
-  allowTableNodeSelection: boolean,
+  HTMLAttributes: Record<string, any>
+  resizable: boolean
+  handleWidth: number
+  cellMinWidth: number
+  View: NodeView
+  lastColumnResizable: boolean
+  allowTableNodeSelection: boolean
 }
 
 declare module '@tiptap/core' {
-  interface Commands {
+  interface Commands<ReturnType> {
     table: {
-      insertTable: (options?: { rows?: number, cols?: number, withHeaderRow?: boolean }) => Command,
-      addColumnBefore: () => Command,
-      addColumnAfter: () => Command,
-      deleteColumn: () => Command,
-      addRowBefore: () => Command,
-      addRowAfter: () => Command,
-      deleteRow: () => Command,
-      deleteTable: () => Command,
-      mergeCells: () => Command,
-      splitCell: () => Command,
-      toggleHeaderColumn: () => Command,
-      toggleHeaderRow: () => Command,
-      toggleHeaderCell: () => Command,
-      mergeOrSplit: () => Command,
-      setCellAttribute: (name: string, value: any) => Command,
-      goToNextCell: () => Command,
-      goToPreviousCell: () => Command,
-      fixTables: () => Command,
-      setCellSelection: (position: { anchorCell: number, headCell?: number }) => Command,
+      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> {
+  interface NodeConfig<Options, Storage> {
     /**
      * Table Role
      */
-    tableRole?: string | ((this: {
-      name: string,
-      options: Options,
-      parent: ParentConfig<NodeConfig<Options>>['tableRole'],
-    }) => string),
+    tableRole?:
+      | string
+      | ((this: {
+          name: string
+          options: Options
+          storage: Storage
+          parent: ParentConfig<NodeConfig<Options>>['tableRole']
+        }) => string)
   }
 }
 
 export const Table = Node.create<TableOptions>({
   name: 'table',
 
-  defaultOptions: {
-    HTMLAttributes: {},
-    resizable: false,
-    handleWidth: 5,
-    cellMinWidth: 25,
-    // TODO: fix
-    // @ts-ignore
-    View: TableView,
-    lastColumnResizable: true,
-    allowTableNodeSelection: false,
+  // @ts-ignore
+  addOptions() {
+    return {
+      HTMLAttributes: {},
+      resizable: false,
+      handleWidth: 5,
+      cellMinWidth: 25,
+      // TODO: fix
+      View: TableView,
+      lastColumnResizable: true,
+      allowTableNodeSelection: false,
+    }
   },
 
   content: 'tableRow+',
@@ -103,9 +107,7 @@ export const Table = Node.create<TableOptions>({
   group: 'block',
 
   parseHTML() {
-    return [
-      { tag: 'table' },
-    ]
+    return [{ tag: 'table' }]
   },
 
   renderHTML({ HTMLAttributes }) {
@@ -114,88 +116,107 @@ export const Table = Node.create<TableOptions>({
 
   addCommands() {
     return {
-      insertTable: ({ rows = 3, cols = 3, withHeaderRow = true } = {}) => ({ tr, dispatch, editor }) => {
-        const node = createTable(editor.schema, rows, cols, withHeaderRow)
+      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
+          if (dispatch) {
+            const offset = tr.selection.anchor + 1
 
-          tr.replaceSelectionWith(node)
-            .scrollIntoView()
-            .setSelection(TextSelection.near(tr.doc.resolve(offset)))
-        }
+            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 toggleHeaderColumn(state, dispatch)
-      },
-      toggleHeaderRow: () => ({ state, dispatch }) => {
-        return toggleHeaderRow(state, dispatch)
-      },
-      toggleHeaderCell: () => ({ state, dispatch }) => {
-        return toggleHeaderCell(state, dispatch)
-      },
-      mergeOrSplit: () => ({ state, dispatch }) => {
-        if (mergeCells(state, dispatch)) {
           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 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 = CellSelection.create(tr.doc, position.anchorCell, position.headCell)
+          return true
+        },
+      setCellSelection:
+        position => ({ tr, dispatch }) => {
+          if (dispatch) {
+            const selection = CellSelection.create(tr.doc, position.anchorCell, position.headCell)
 
-          // @ts-ignore
-          tr.setSelection(selection)
-        }
+            // @ts-ignore
+            tr.setSelection(selection)
+          }
 
-        return true
-      },
+          return true
+        },
     }
   },
 
@@ -210,11 +231,7 @@ export const Table = Node.create<TableOptions>({
           return false
         }
 
-        return this.editor
-          .chain()
-          .addRowAfter()
-          .goToNextCell()
-          .run()
+        return this.editor.chain().addRowAfter().goToNextCell().run()
       },
       'Shift-Tab': () => this.editor.commands.goToPreviousCell(),
       Backspace: deleteTableWhenAllCellsSelected,
@@ -225,15 +242,22 @@ export const Table = Node.create<TableOptions>({
   },
 
   addProseMirrorPlugins() {
+    const isResizable = this.options.resizable && this.editor.isEditable
+
     return [
-      ...(this.options.resizable ? [columnResizing({
-        handleWidth: this.options.handleWidth,
-        cellMinWidth: this.options.cellMinWidth,
-        View: this.options.View,
-        // TODO: PR for @types/prosemirror-tables
-        // @ts-ignore (incorrect type)
-        lastColumnResizable: this.options.lastColumnResizable,
-      })] : []),
+      ...(isResizable
+        ? [
+          columnResizing({
+            handleWidth: this.options.handleWidth,
+            cellMinWidth: this.options.cellMinWidth,
+            // @ts-ignore (incorrect type)
+            View: this.options.View,
+            // TODO: PR for @types/prosemirror-tables
+            // @ts-ignore (incorrect type)
+            lastColumnResizable: this.options.lastColumnResizable,
+          }),
+        ]
+        : []),
       tableEditing({
         allowTableNodeSelection: this.options.allowTableNodeSelection,
       }),
@@ -244,6 +268,7 @@ export const Table = Node.create<TableOptions>({
     const context = {
       name: extension.name,
       options: extension.options,
+      storage: extension.storage,
     }
 
     return {

package/src/utilities/createCell.ts

@@ -1,10 +1,9 @@
-import {
-  NodeType, Fragment,
-  Node as ProsemirrorNode,
-  Schema,
-} from 'prosemirror-model'
+import { Fragment, Node as ProsemirrorNode, NodeType } from '@tiptap/pm/model'
 
-export function createCell(cellType: NodeType, cellContent?: Fragment<Schema> | ProsemirrorNode<Schema> | Array<ProsemirrorNode<Schema>>): ProsemirrorNode | null | undefined {
+export function createCell(
+  cellType: NodeType,
+  cellContent?: Fragment | ProsemirrorNode | Array<ProsemirrorNode>,
+): ProsemirrorNode | null | undefined {
   if (cellContent) {
     return cellType.createChecked(null, cellContent)
   }

package/src/utilities/createTable.ts

@@ -1,11 +1,18 @@
-import { Schema, Fragment, Node as ProsemirrorNode } from 'prosemirror-model'
+import { Fragment, Node as ProsemirrorNode, Schema } from '@tiptap/pm/model'
+
 import { createCell } from './createCell'
 import { getTableNodeTypes } from './getTableNodeTypes'
 
-export function createTable(schema: Schema, rowsCount: number, colsCount: number, withHeaderRow: boolean, cellContent?: Fragment<Schema> | ProsemirrorNode<Schema> | Array<ProsemirrorNode<Schema>>): ProsemirrorNode {
+export function createTable(
+  schema: Schema,
+  rowsCount: number,
+  colsCount: number,
+  withHeaderRow: boolean,
+  cellContent?: Fragment | ProsemirrorNode | Array<ProsemirrorNode>,
+): ProsemirrorNode {
   const types = getTableNodeTypes(schema)
-  const headerCells = []
-  const cells = []
+  const headerCells: ProsemirrorNode[] = []
+  const cells: ProsemirrorNode[] = []
 
   for (let index = 0; index < colsCount; index += 1) {
     const cell = createCell(types.cell, cellContent)
@@ -23,7 +30,7 @@ export function createTable(schema: Schema, rowsCount: number, colsCount: number
     }
   }
 
-  const rows = []
+  const rows: ProsemirrorNode[] = []
 
   for (let index = 0; index < rowsCount; index += 1) {
     rows.push(types.row.createChecked(null, withHeaderRow && index === 0 ? headerCells : cells))

package/src/utilities/deleteTableWhenAllCellsSelected.ts

@@ -1,4 +1,5 @@
-import { KeyboardShortcutCommand, findParentNodeClosestToPos } from '@tiptap/core'
+import { findParentNodeClosestToPos, KeyboardShortcutCommand } from '@tiptap/core'
+
 import { isCellSelection } from './isCellSelection'
 
 export const deleteTableWhenAllCellsSelected: KeyboardShortcutCommand = ({ editor }) => {

package/src/utilities/getTableNodeTypes.ts

@@ -1,4 +1,4 @@
-import { Schema, NodeType } from 'prosemirror-model'
+import { NodeType, Schema } from '@tiptap/pm/model'
 
 export function getTableNodeTypes(schema: Schema): { [key: string]: NodeType } {
   if (schema.cached.tableNodeTypes) {

package/src/utilities/isCellSelection.ts

@@ -1,4 +1,4 @@
-import { CellSelection } from 'prosemirror-tables'
+import { CellSelection } from '@tiptap/pm/tables'
 
 export function isCellSelection(value: unknown): value is CellSelection {
   return value instanceof CellSelection