@tiptap/extension-table 3.0.0-next.3 → 3.0.0-next.4

package/src/kit/index.ts

@@ -0,0 +1,60 @@
+import { Extension } from '@tiptap/core'
+
+import { TableCell, TableCellOptions } from '../cell/index.js'
+import { TableHeader, TableHeaderOptions } from '../header/index.js'
+import { TableRow, TableRowOptions } from '../row/index.js'
+import { Table, TableOptions } 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,36 @@
+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}

@@ -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,6 +1,4 @@
-import {
-  callOrReturn, getExtensionField, mergeAttributes, Node, ParentConfig,
-} from '@tiptap/core'
+import { callOrReturn, getExtensionField, mergeAttributes, Node, ParentConfig } from '@tiptap/core'
 import { DOMOutputSpec, Node as ProseMirrorNode } from '@tiptap/pm/model'
 import { TextSelection } from '@tiptap/pm/state'
 import {
@@ -88,11 +86,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
@@ -234,11 +228,11 @@ declare module '@tiptap/core' {
     tableRole?:
       | string
       | ((this: {
-      name: string
-      options: Options
-      storage: Storage
-      parent: ParentConfig<NodeConfig<Options>>['tableRole']
-    }) => string)
+          name: string
+          options: Options
+          storage: Storage
+          parent: ParentConfig<NodeConfig<Options>>['tableRole']
+        }) => string)
   }
 }
 
@@ -276,17 +270,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 +287,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 +302,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 +371,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 +395,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 +436,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}/createColGroup.ts

@@ -2,11 +2,13 @@ import { 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}` }])
     }
   }