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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tiptap/extension-table",
   "description": "table extension for tiptap",
-  "version": "3.0.0",
+  "version": "3.0.2-beta.0",
   "homepage": "https://tiptap.dev",
   "keywords": [
     "tiptap",
@@ -15,26 +15,68 @@
   "type": "module",
   "exports": {
     ".": {
-      "types": "./dist/packages/extension-table/src/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/packages/extension-table/src/index.d.ts",
+  "types": "dist/index.d.ts",
   "files": [
     "src",
     "dist"
   ],
   "devDependencies": {
-    "@tiptap/core": "^3.0.0",
-    "@tiptap/pm": "^3.0.0"
+    "@tiptap/core": "^3.0.2-beta.0",
+    "@tiptap/pm": "^3.0.2-beta.0"
   },
   "peerDependencies": {
-    "@tiptap/core": "^3.0.0",
-    "@tiptap/pm": "^3.0.0"
+    "@tiptap/core": "^3.0.2-beta.0",
+    "@tiptap/pm": "^3.0.2-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,7 +1,6 @@
-import { Table } from './table.js'
-
-export * from './table.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'
+export * from './table/TableView.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/table/TableView.ts

@@ -0,0 +1,108 @@
+import type { Node as ProseMirrorNode } from '@tiptap/pm/model'
+import type { NodeView, ViewMutationRecord } from '@tiptap/pm/view'
+
+import { getColStyleDeclaration } from './utilities/colStyle.js'
+
+export function updateColumns(
+  node: ProseMirrorNode,
+  colgroup: HTMLTableColElement, // <colgroup> has the same prototype as <col>
+  table: HTMLTableElement,
+  cellMinWidth: number,
+  overrideCol?: number,
+  overrideValue?: number,
+) {
+  let totalWidth = 0
+  let fixedWidth = true
+  let nextDOM = colgroup.firstChild
+  const row = node.firstChild
+
+  if (row !== null) {
+    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]) as number | undefined)
+        const cssWidth = hasWidth ? `${hasWidth}px` : ''
+
+        totalWidth += hasWidth || cellMinWidth
+
+        if (!hasWidth) {
+          fixedWidth = false
+        }
+
+        if (!nextDOM) {
+          const colElement = document.createElement('col')
+
+          const [propertyKey, propertyValue] = getColStyleDeclaration(cellMinWidth, hasWidth)
+
+          colElement.style.setProperty(propertyKey, propertyValue)
+
+          colgroup.appendChild(colElement)
+        } else {
+          if ((nextDOM as HTMLTableColElement).style.width !== cssWidth) {
+            const [propertyKey, propertyValue] = getColStyleDeclaration(cellMinWidth, hasWidth)
+
+            ;(nextDOM as HTMLTableColElement).style.setProperty(propertyKey, propertyValue)
+          }
+
+          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`
+  }
+}
+
+export class TableView implements NodeView {
+  node: ProseMirrorNode
+
+  cellMinWidth: number
+
+  dom: HTMLDivElement
+
+  table: HTMLTableElement
+
+  colgroup: HTMLTableColElement
+
+  contentDOM: HTMLTableSectionElement
+
+  constructor(node: ProseMirrorNode, cellMinWidth: number) {
+    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: ProseMirrorNode) {
+    if (node.type !== this.node.type) {
+      return false
+    }
+
+    this.node = node
+    updateColumns(node, this.colgroup, this.table, this.cellMinWidth)
+
+    return true
+  }
+
+  ignoreMutation(mutation: ViewMutationRecord) {
+    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'