@tiptap/extension-table 3.0.0 → 3.0.1

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

@@ -1,7 +1,7 @@
-import {
-  callOrReturn, getExtensionField, mergeAttributes, Node, ParentConfig,
-} from '@tiptap/core'
-import { DOMOutputSpec } 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 { NodeView } from '@tiptap/pm/view'
+import type { EditorView, NodeView } from '@tiptap/pm/view'
 
 import { TableView } from './TableView.js'
 import { createColGroup } from './utilities/createColGroup.js'
@@ -62,7 +62,7 @@ export interface TableOptions {
    * The node view to render the table.
    * @default TableView
    */
-  View: NodeView
+  View: (new (node: ProseMirrorNode, cellMinWidth: number, view: EditorView) => NodeView) | null
 
   /**
    * Enables the resizing of the last column.
@@ -88,17 +88,13 @@ 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
        * @returns True if the command was successful, otherwise false
        * @example editor.commands.addColumnBefore()
-      */
+       */
       addColumnBefore: () => ReturnType
 
       /**
@@ -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}`
-          : `minWidth: ${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,16 +422,14 @@ export const Table = Node.create<TableOptions>({
     return [
       ...(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,
-          }),
-        ]
+            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/table/utilities/colStyle.ts

@@ -0,0 +1,9 @@
+export function getColStyleDeclaration(minWidth: number, width: number | undefined): [string, string] {
+  if (width) {
+    // apply the stored width unless it is below the configured minimum cell width
+    return ['width', `${Math.max(width, minWidth)}px`]
+  }
+
+  // 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,4 +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>
 
 /**
  * Creates a colgroup element for a table node in ProseMirror.
@@ -9,12 +19,19 @@ import { DOMOutputSpec, Node as ProseMirrorNode } from '@tiptap/pm/model'
  * @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,
+  overrideCol: number,
+  overrideValue: number,
+): ColGroup
 export function createColGroup(
   node: ProseMirrorNode,
   cellMinWidth: number,
   overrideCol?: number,
-  overrideValue?: any,
-) {
+  overrideValue?: number,
+): ColGroup {
   let totalWidth = 0
   let fixedWidth = true
   const cols: DOMOutputSpec[] = []
@@ -28,8 +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]
-      const cssWidth = hasWidth ? `${hasWidth}px` : ''
+      const hasWidth = overrideCol === col ? overrideValue : colwidth && (colwidth[j] as number | undefined)
 
       totalWidth += hasWidth || cellMinWidth
 
@@ -37,7 +53,9 @@ export function createColGroup(
         fixedWidth = false
       }
 
-      cols.push(['col', cssWidth ? { style: `width: ${cssWidth}` } : {}])
+      const [property, value] = getColStyleDeclaration(cellMinWidth, hasWidth)
+
+      cols.push(['col', { style: `${property}: ${value}` }])
     }
   }
 

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

@@ -1,4 +1,4 @@
-import { Fragment, Node as ProsemirrorNode, Schema } from '@tiptap/pm/model'
+import type { Fragment, Node as ProsemirrorNode, Schema } from '@tiptap/pm/model'
 
 import { createCell } from './createCell.js'
 import { getTableNodeTypes } from './getTableNodeTypes.js'

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

@@ -1,4 +1,5 @@
-import { findParentNodeClosestToPos, KeyboardShortcutCommand } from '@tiptap/core'
+import type { KeyboardShortcutCommand } from '@tiptap/core'
+import { findParentNodeClosestToPos } from '@tiptap/core'
 
 import { isCellSelection } from './isCellSelection.js'
 

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

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

package/src/types.ts

@@ -0,0 +1,19 @@
+import type { ParentConfig } from '@tiptap/core'
+
+declare module '@tiptap/core' {
+  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)
+  }
+}