@tiptap/extension-table 2.11.7 → 3.0.0-beta.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tiptap/extension-table",
   "description": "table extension for tiptap",
-  "version": "2.11.7",
+  "version": "3.0.0-beta.0",
   "homepage": "https://tiptap.dev",
   "keywords": [
     "tiptap",
@@ -15,26 +15,68 @@
   "type": "module",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
+      "types": {
+        "import": "./dist/index.d.ts",
+        "require": "./dist/index.d.cts"
+      },
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"
+    },
+    "./table": {
+      "types": {
+        "import": "./dist/table/index.d.ts",
+        "require": "./dist/table/index.d.cts"
+      },
+      "import": "./dist/table/index.js",
+      "require": "./dist/table/index.cjs"
+    },
+    "./cell": {
+      "types": {
+        "import": "./dist/cell/index.d.ts",
+        "require": "./dist/cell/index.d.cts"
+      },
+      "import": "./dist/cell/index.js",
+      "require": "./dist/cell/index.cjs"
+    },
+    "./header": {
+      "types": {
+        "import": "./dist/header/index.d.ts",
+        "require": "./dist/header/index.d.cts"
+      },
+      "import": "./dist/header/index.js",
+      "require": "./dist/header/index.cjs"
+    },
+    "./kit": {
+      "types": {
+        "import": "./dist/kit/index.d.ts",
+        "require": "./dist/kit/index.d.cts"
+      },
+      "import": "./dist/kit/index.js",
+      "require": "./dist/kit/index.cjs"
+    },
+    "./row": {
+      "types": {
+        "import": "./dist/row/index.d.ts",
+        "require": "./dist/row/index.d.cts"
+      },
+      "import": "./dist/row/index.js",
+      "require": "./dist/row/index.cjs"
     }
   },
   "main": "dist/index.cjs",
   "module": "dist/index.js",
-  "umd": "dist/index.umd.js",
   "types": "dist/index.d.ts",
   "files": [
     "src",
     "dist"
   ],
   "devDependencies": {
-    "@tiptap/core": "^2.11.7",
-    "@tiptap/pm": "^2.11.7"
+    "@tiptap/core": "^3.0.0-beta.0",
+    "@tiptap/pm": "^3.0.0-beta.0"
   },
   "peerDependencies": {
-    "@tiptap/core": "^2.7.0",
-    "@tiptap/pm": "^2.7.0"
+    "@tiptap/core": "^3.0.0-beta.0",
+    "@tiptap/pm": "^3.0.0-beta.0"
   },
   "repository": {
     "type": "git",
@@ -42,7 +84,7 @@
     "directory": "packages/extension-table"
   },
   "scripts": {
-    "clean": "rm -rf dist",
-    "build": "npm run clean && rollup -c"
+    "build": "tsup",
+    "lint": "prettier ./src/ --check && eslint --cache --quiet --no-error-on-unmatched-pattern ./src/"
   }
-}
+}

package/src/cell/index.ts

@@ -0,0 +1 @@
+export * from './table-cell.js'

package/src/cell/table-cell.ts

@@ -0,0 +1,60 @@
+import '../types.js'
+
+import { mergeAttributes, Node } from '@tiptap/core'
+
+export interface TableCellOptions {
+  /**
+   * The HTML attributes for a table cell node.
+   * @default {}
+   * @example { class: 'foo' }
+   */
+  HTMLAttributes: Record<string, any>
+}
+
+/**
+ * This extension allows you to create table cells.
+ * @see https://www.tiptap.dev/api/nodes/table-cell
+ */
+export const TableCell = Node.create<TableCellOptions>({
+  name: 'tableCell',
+
+  addOptions() {
+    return {
+      HTMLAttributes: {},
+    }
+  },
+
+  content: 'block+',
+
+  addAttributes() {
+    return {
+      colspan: {
+        default: 1,
+      },
+      rowspan: {
+        default: 1,
+      },
+      colwidth: {
+        default: null,
+        parseHTML: element => {
+          const colwidth = element.getAttribute('colwidth')
+          const value = colwidth ? colwidth.split(',').map(width => parseInt(width, 10)) : null
+
+          return value
+        },
+      },
+    }
+  },
+
+  tableRole: 'cell',
+
+  isolating: true,
+
+  parseHTML() {
+    return [{ tag: 'td' }]
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ['td', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0]
+  },
+})

package/src/header/index.ts

@@ -0,0 +1 @@
+export * from './table-header.js'

package/src/header/table-header.ts

@@ -0,0 +1,60 @@
+import '../types.js'
+
+import { mergeAttributes, Node } from '@tiptap/core'
+
+export interface TableHeaderOptions {
+  /**
+   * The HTML attributes for a table header node.
+   * @default {}
+   * @example { class: 'foo' }
+   */
+  HTMLAttributes: Record<string, any>
+}
+
+/**
+ * This extension allows you to create table headers.
+ * @see https://www.tiptap.dev/api/nodes/table-header
+ */
+export const TableHeader = Node.create<TableHeaderOptions>({
+  name: 'tableHeader',
+
+  addOptions() {
+    return {
+      HTMLAttributes: {},
+    }
+  },
+
+  content: 'block+',
+
+  addAttributes() {
+    return {
+      colspan: {
+        default: 1,
+      },
+      rowspan: {
+        default: 1,
+      },
+      colwidth: {
+        default: null,
+        parseHTML: element => {
+          const colwidth = element.getAttribute('colwidth')
+          const value = colwidth ? colwidth.split(',').map(width => parseInt(width, 10)) : null
+
+          return value
+        },
+      },
+    }
+  },
+
+  tableRole: 'header_cell',
+
+  isolating: true,
+
+  parseHTML() {
+    return [{ tag: 'th' }]
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ['th', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0]
+  },
+})

package/src/index.ts

@@ -1,8 +1,5 @@
-import { Table } from './table.js'
-
-export * from './table.js'
-export * from './TableView.js'
-export * from './utilities/createColGroup.js'
-export * from './utilities/createTable.js'
-
-export default Table
+export * from './cell/index.js'
+export * from './header/index.js'
+export * from './kit/index.js'
+export * from './row/index.js'
+export * from './table/index.js'

package/src/kit/index.ts

@@ -0,0 +1,64 @@
+import { Extension } from '@tiptap/core'
+
+import type { TableCellOptions } from '../cell/index.js'
+import { TableCell } from '../cell/index.js'
+import type { TableHeaderOptions } from '../header/index.js'
+import { TableHeader } from '../header/index.js'
+import type { TableRowOptions } from '../row/index.js'
+import { TableRow } from '../row/index.js'
+import type { TableOptions } from '../table/index.js'
+import { Table } from '../table/index.js'
+
+export interface TableKitOptions {
+  /**
+   * If set to false, the table extension will not be registered
+   * @example table: false
+   */
+  table: Partial<TableOptions> | false
+  /**
+   * If set to false, the table extension will not be registered
+   * @example tableCell: false
+   */
+  tableCell: Partial<TableCellOptions> | false
+  /**
+   * If set to false, the table extension will not be registered
+   * @example tableHeader: false
+   */
+  tableHeader: Partial<TableHeaderOptions> | false
+  /**
+   * If set to false, the table extension will not be registered
+   * @example tableRow: false
+   */
+  tableRow: Partial<TableRowOptions> | false
+}
+
+/**
+ * The table kit is a collection of table editor extensions.
+ *
+ * It’s a good starting point for building your own table in Tiptap.
+ */
+export const TableKit = Extension.create<TableKitOptions>({
+  name: 'tableKit',
+
+  addExtensions() {
+    const extensions = []
+
+    if (this.options.table !== false) {
+      extensions.push(Table.configure(this.options.table))
+    }
+
+    if (this.options.tableCell !== false) {
+      extensions.push(TableCell.configure(this.options.tableCell))
+    }
+
+    if (this.options.tableHeader !== false) {
+      extensions.push(TableHeader.configure(this.options.tableHeader))
+    }
+
+    if (this.options.tableRow !== false) {
+      extensions.push(TableRow.configure(this.options.tableRow))
+    }
+
+    return extensions
+  },
+})

package/src/row/index.ts

@@ -0,0 +1 @@
+export * from './table-row.js'

package/src/row/table-row.ts

@@ -0,0 +1,38 @@
+import '../types.js'
+
+import { mergeAttributes, Node } from '@tiptap/core'
+
+export interface TableRowOptions {
+  /**
+   * The HTML attributes for a table row node.
+   * @default {}
+   * @example { class: 'foo' }
+   */
+  HTMLAttributes: Record<string, any>
+}
+
+/**
+ * This extension allows you to create table rows.
+ * @see https://www.tiptap.dev/api/nodes/table-row
+ */
+export const TableRow = Node.create<TableRowOptions>({
+  name: 'tableRow',
+
+  addOptions() {
+    return {
+      HTMLAttributes: {},
+    }
+  },
+
+  content: '(tableCell | tableHeader)*',
+
+  tableRole: 'row',
+
+  parseHTML() {
+    return [{ tag: 'tr' }]
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ['tr', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0]
+  },
+})

package/src/{TableView.ts → table/TableView.ts}

@@ -1,5 +1,5 @@
-import { Node as ProseMirrorNode } from '@tiptap/pm/model'
-import { NodeView, ViewMutationRecord } from '@tiptap/pm/view'
+import type { Node as ProseMirrorNode } from '@tiptap/pm/model'
+import type { NodeView, ViewMutationRecord } from '@tiptap/pm/view'
 
 import { getColStyleDeclaration } from './utilities/colStyle.js'
 
@@ -21,7 +21,7 @@ export function updateColumns(
       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]) as number | undefined
+        const hasWidth = overrideCol === col ? overrideValue : ((colwidth && colwidth[j]) as number | undefined)
         const cssWidth = hasWidth ? `${hasWidth}px` : ''
 
         totalWidth += hasWidth || cellMinWidth
@@ -40,9 +40,9 @@ export function updateColumns(
           colgroup.appendChild(colElement)
         } else {
           if ((nextDOM as HTMLTableColElement).style.width !== cssWidth) {
-            const [propertyKey, propertyValue] = getColStyleDeclaration(cellMinWidth, hasWidth);
+            const [propertyKey, propertyValue] = getColStyleDeclaration(cellMinWidth, hasWidth)
 
-            (nextDOM as HTMLTableColElement).style.setProperty(propertyKey, propertyValue)
+            ;(nextDOM as HTMLTableColElement).style.setProperty(propertyKey, propertyValue)
           }
 
           nextDOM = nextDOM.nextSibling
@@ -103,9 +103,6 @@ export class TableView implements NodeView {
   }
 
   ignoreMutation(mutation: ViewMutationRecord) {
-    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/table/index.ts

@@ -0,0 +1,3 @@
+export * from './table.js'
+export * from './utilities/createColGroup.js'
+export * from './utilities/createTable.js'

package/src/{table.ts → table/table.ts}

@@ -1,7 +1,7 @@
-import {
-  callOrReturn, getExtensionField, mergeAttributes, Node, ParentConfig,
-} from '@tiptap/core'
-import { DOMOutputSpec, Node as ProseMirrorNode } from '@tiptap/pm/model'
+import '../types.js'
+
+import { callOrReturn, getExtensionField, mergeAttributes, Node } from '@tiptap/core'
+import type { DOMOutputSpec, Node as ProseMirrorNode } from '@tiptap/pm/model'
 import { TextSelection } from '@tiptap/pm/state'
 import {
   addColumnAfter,
@@ -22,7 +22,7 @@ import {
   toggleHeader,
   toggleHeaderCell,
 } from '@tiptap/pm/tables'
-import { EditorView, NodeView } from '@tiptap/pm/view'
+import type { EditorView, NodeView } from '@tiptap/pm/view'
 
 import { TableView } from './TableView.js'
 import { createColGroup } from './utilities/createColGroup.js'
@@ -88,11 +88,7 @@ declare module '@tiptap/core' {
        * @returns True if the command was successful, otherwise false
        * @example editor.commands.insertTable({ rows: 3, cols: 3, withHeaderRow: true })
        */
-      insertTable: (options?: {
-        rows?: number
-        cols?: number
-        withHeaderRow?: boolean
-      }) => ReturnType
+      insertTable: (options?: { rows?: number; cols?: number; withHeaderRow?: boolean }) => ReturnType
 
       /**
        * Add a column before the current column
@@ -224,22 +220,6 @@ declare module '@tiptap/core' {
       setCellSelection: (position: { anchorCell: number; headCell?: number }) => ReturnType
     }
   }
-
-  interface NodeConfig<Options, Storage> {
-    /**
-     * A string or function to determine the role of the table.
-     * @default 'table'
-     * @example () => 'table'
-     */
-    tableRole?:
-      | string
-      | ((this: {
-      name: string
-      options: Options
-      storage: Storage
-      parent: ParentConfig<NodeConfig<Options>>['tableRole']
-    }) => string)
-  }
 }
 
 /**
@@ -276,17 +256,12 @@ export const Table = Node.create<TableOptions>({
   },
 
   renderHTML({ node, HTMLAttributes }) {
-    const { colgroup, tableWidth, tableMinWidth } = createColGroup(
-      node,
-      this.options.cellMinWidth,
-    )
+    const { colgroup, tableWidth, tableMinWidth } = createColGroup(node, this.options.cellMinWidth)
 
     const table: DOMOutputSpec = [
       'table',
       mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {
-        style: tableWidth
-          ? `width: ${tableWidth}`
-          : `min-width: ${tableMinWidth}`,
+        style: tableWidth ? `width: ${tableWidth}` : `min-width: ${tableMinWidth}`,
       }),
       colgroup,
       ['tbody', 0],
@@ -298,7 +273,8 @@ export const Table = Node.create<TableOptions>({
   addCommands() {
     return {
       insertTable:
-        ({ rows = 3, cols = 3, withHeaderRow = true } = {}) => ({ tr, dispatch, editor }) => {
+        ({ rows = 3, cols = 3, withHeaderRow = true } = {}) =>
+        ({ tr, dispatch, editor }) => {
           const node = createTable(editor.schema, rows, cols, withHeaderRow)
 
           if (dispatch) {
@@ -312,55 +288,68 @@ export const Table = Node.create<TableOptions>({
           return true
         },
       addColumnBefore:
-        () => ({ state, dispatch }) => {
+        () =>
+        ({ state, dispatch }) => {
           return addColumnBefore(state, dispatch)
         },
       addColumnAfter:
-        () => ({ state, dispatch }) => {
+        () =>
+        ({ state, dispatch }) => {
           return addColumnAfter(state, dispatch)
         },
       deleteColumn:
-        () => ({ state, dispatch }) => {
+        () =>
+        ({ state, dispatch }) => {
           return deleteColumn(state, dispatch)
         },
       addRowBefore:
-        () => ({ state, dispatch }) => {
+        () =>
+        ({ state, dispatch }) => {
           return addRowBefore(state, dispatch)
         },
       addRowAfter:
-        () => ({ state, dispatch }) => {
+        () =>
+        ({ state, dispatch }) => {
           return addRowAfter(state, dispatch)
         },
       deleteRow:
-        () => ({ state, dispatch }) => {
+        () =>
+        ({ state, dispatch }) => {
           return deleteRow(state, dispatch)
         },
       deleteTable:
-        () => ({ state, dispatch }) => {
+        () =>
+        ({ state, dispatch }) => {
           return deleteTable(state, dispatch)
         },
       mergeCells:
-        () => ({ state, dispatch }) => {
+        () =>
+        ({ state, dispatch }) => {
           return mergeCells(state, dispatch)
         },
       splitCell:
-        () => ({ state, dispatch }) => {
+        () =>
+        ({ state, dispatch }) => {
           return splitCell(state, dispatch)
         },
       toggleHeaderColumn:
-        () => ({ state, dispatch }) => {
+        () =>
+        ({ state, dispatch }) => {
           return toggleHeader('column')(state, dispatch)
         },
       toggleHeaderRow:
-        () => ({ state, dispatch }) => {
+        () =>
+        ({ state, dispatch }) => {
           return toggleHeader('row')(state, dispatch)
         },
       toggleHeaderCell:
-        () => ({ state, dispatch }) => {
+        () =>
+        ({ state, dispatch }) => {
           return toggleHeaderCell(state, dispatch)
         },
       mergeOrSplit:
-        () => ({ state, dispatch }) => {
+        () =>
+        ({ state, dispatch }) => {
           if (mergeCells(state, dispatch)) {
             return true
           }
@@ -368,19 +357,23 @@ export const Table = Node.create<TableOptions>({
           return splitCell(state, dispatch)
         },
       setCellAttribute:
-        (name, value) => ({ state, dispatch }) => {
+        (name, value) =>
+        ({ state, dispatch }) => {
           return setCellAttr(name, value)(state, dispatch)
         },
       goToNextCell:
-        () => ({ state, dispatch }) => {
+        () =>
+        ({ state, dispatch }) => {
           return goToNextCell(1)(state, dispatch)
         },
       goToPreviousCell:
-        () => ({ state, dispatch }) => {
+        () =>
+        ({ state, dispatch }) => {
           return goToNextCell(-1)(state, dispatch)
         },
       fixTables:
-        () => ({ state, dispatch }) => {
+        () =>
+        ({ state, dispatch }) => {
           if (dispatch) {
             fixTables(state)
           }
@@ -388,7 +381,8 @@ export const Table = Node.create<TableOptions>({
           return true
         },
       setCellSelection:
-        position => ({ tr, dispatch }) => {
+        position =>
+        ({ tr, dispatch }) => {
           if (dispatch) {
             const selection = CellSelection.create(tr.doc, position.anchorCell, position.headCell)
 
@@ -428,14 +422,14 @@ export const Table = Node.create<TableOptions>({
     return [
       ...(isResizable
         ? [
-          columnResizing({
-            handleWidth: this.options.handleWidth,
-            cellMinWidth: this.options.cellMinWidth,
-            defaultCellMinWidth: this.options.cellMinWidth,
-            View: this.options.View,
-            lastColumnResizable: this.options.lastColumnResizable,
-          }),
-        ]
+            columnResizing({
+              handleWidth: this.options.handleWidth,
+              cellMinWidth: this.options.cellMinWidth,
+              defaultCellMinWidth: this.options.cellMinWidth,
+              View: this.options.View,
+              lastColumnResizable: this.options.lastColumnResizable,
+            }),
+          ]
         : []),
       tableEditing({
         allowTableNodeSelection: this.options.allowTableNodeSelection,

package/src/{utilities → table/utilities}/colStyle.ts

@@ -6,5 +6,4 @@ export function getColStyleDeclaration(minWidth: number, width: number | undefin
 
   // set the minimum with on the column if it has no stored width
   return ['min-width', `${minWidth}px`]
-
 }

package/src/{utilities → table/utilities}/createCell.ts

@@ -1,4 +1,4 @@
-import { Fragment, Node as ProsemirrorNode, NodeType } from '@tiptap/pm/model'
+import type { Fragment, Node as ProsemirrorNode, NodeType } from '@tiptap/pm/model'
 
 export function createCell(
   cellType: NodeType,

package/src/{utilities → table/utilities}/createColGroup.ts

@@ -1,12 +1,14 @@
-import { DOMOutputSpec, Node as ProseMirrorNode } from '@tiptap/pm/model'
+import type { DOMOutputSpec, Node as ProseMirrorNode } from '@tiptap/pm/model'
 
 import { getColStyleDeclaration } from './colStyle.js'
 
-export type ColGroup = {
-  colgroup: DOMOutputSpec
-  tableWidth: string
-  tableMinWidth: string
-} | Record<string, never>;
+export type ColGroup =
+  | {
+      colgroup: DOMOutputSpec
+      tableWidth: string
+      tableMinWidth: string
+    }
+  | Record<string, never>
 
 /**
  * Creates a colgroup element for a table node in ProseMirror.
@@ -17,10 +19,7 @@ export type ColGroup = {
  * @param overrideValue - (Optional) The width value to use for the overridden column.
  * @returns An object containing the colgroup element, the total width of the table, and the minimum width of the table.
  */
-export function createColGroup(
-  node: ProseMirrorNode,
-  cellMinWidth: number,
-): ColGroup
+export function createColGroup(node: ProseMirrorNode, cellMinWidth: number): ColGroup
 export function createColGroup(
   node: ProseMirrorNode,
   cellMinWidth: number,
@@ -46,7 +45,7 @@ export function createColGroup(
     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] as number | undefined
+      const hasWidth = overrideCol === col ? overrideValue : colwidth && (colwidth[j] as number | undefined)
 
       totalWidth += hasWidth || cellMinWidth
 
@@ -56,10 +55,7 @@ export function createColGroup(
 
       const [property, value] = getColStyleDeclaration(cellMinWidth, hasWidth)
 
-      cols.push([
-        'col',
-        { style: `${property}: ${value}` },
-      ])
+      cols.push(['col', { style: `${property}: ${value}` }])
     }
   }