feat(table): make all table packages be in one package, add a new TableKit extension to configure them (#5469)

* feat(table): make all table packages be in one package, add a new TableKit extension to configure them

* chore: changeset management

* chore: put changesets back

.changeset/dirty-colts-shave.md

@@ -0,0 +1,8 @@
+---
+"@tiptap/extension-table-header": minor
+"@tiptap/extension-table-cell": minor
+"@tiptap/extension-table-row": minor
+"@tiptap/extension-table": minor
+---
+
+This change repackages all of the table extensions to be within the `@tiptap/extension-table` package (other packages are just a re-export of the `@tiptap/extension-table` package). It also adds the `TableKit` export which will allow configuring the entire table with one extension.

demos/src/Examples/Tables/React/index.jsx

@@ -1,9 +1,6 @@
 import './styles.scss'
 
-import Table from '@tiptap/extension-table'
+import { TableCell, TableKit } from '@tiptap/extension-table'
-import TableCell from '@tiptap/extension-table-cell'
-import TableHeader from '@tiptap/extension-table-header'
-import TableRow from '@tiptap/extension-table-row'
 import { EditorContent, useEditor } from '@tiptap/react'
 import StarterKit from '@tiptap/starter-kit'
 import React from 'react'
@@ -132,11 +129,10 @@ export default () => {
   const editor = useEditor({
     extensions: [
       StarterKit,
-      Table.configure({
+      TableKit.configure({
-        resizable: true,
+        table: { resizable: true },
+        tableCell: false,
       }),
-      TableRow,
-      TableHeader,
       // Default TableCell
       // TableCell,
       // Custom TableCell with backgroundColor attribute

demos/src/Examples/Tables/Vue/index.vue

@@ -68,10 +68,7 @@
 </template>
 
 <script>
-import Table from '@tiptap/extension-table'
+import { TableCell, TableKit } from '@tiptap/extension-table'
-import TableCell from '@tiptap/extension-table-cell'
-import TableHeader from '@tiptap/extension-table-header'
-import TableRow from '@tiptap/extension-table-row'
 import StarterKit from '@tiptap/starter-kit'
 import { Editor, EditorContent } from '@tiptap/vue-3'
 
@@ -134,11 +131,12 @@ export default {
     this.editor = new Editor({
       extensions: [
         StarterKit,
-        Table.configure({
+        TableKit.configure({
-          resizable: true,
+          table: {
+            resizable: true,
+          },
+          tableCell: false,
         }),
-        TableRow,
-        TableHeader,
         // Default TableCell
         // TableCell,
         // Custom TableCell with backgroundColor attribute

demos/src/Experiments/All/Vue/index.vue

@@ -97,10 +97,7 @@ import Placeholder from '@tiptap/extension-placeholder'
 import Strike from '@tiptap/extension-strike'
 import Subscript from '@tiptap/extension-subscript'
 import Superscript from '@tiptap/extension-superscript'
-import Table from '@tiptap/extension-table'
+import { TableKit } from '@tiptap/extension-table'
-import TableCell from '@tiptap/extension-table-cell'
-import TableHeader from '@tiptap/extension-table-header'
-import TableRow from '@tiptap/extension-table-row'
 import TaskItem from '@tiptap/extension-task-item'
 import TaskList from '@tiptap/extension-task-list'
 import Text from '@tiptap/extension-text'
@@ -155,12 +152,9 @@ export default {
             class: 'mention',
           },
         }),
-        Table.configure({
+        TableKit.configure({
-          resizable: true,
+          table: { resizable: true },
         }),
-        TableRow,
-        TableHeader,
-        TableCell,
         Image,
         TaskList,
         TaskItem,

demos/src/Experiments/GenericFigure/Vue/index.vue

@@ -22,10 +22,7 @@
 
 <script>
 import Image from '@tiptap/extension-image'
-import Table from '@tiptap/extension-table'
+import { TableKit } from '@tiptap/extension-table'
-import TableCell from '@tiptap/extension-table-cell'
-import TableHeader from '@tiptap/extension-table-header'
-import TableRow from '@tiptap/extension-table-row'
 import StarterKit from '@tiptap/starter-kit'
 import { Editor, EditorContent } from '@tiptap/vue-3'
 
@@ -161,10 +158,11 @@ export default {
     this.editor = new Editor({
       extensions: [
         StarterKit,
-        Table,
+        TableKit.configure({
-        TableRow,
+          table: {
-        TableHeader,
+            resizable: true,
-        TableCell,
+          },
+        }),
         ImageFigure,
         TableFigure,
         Figcaption,

demos/src/Nodes/Table/React/index.jsx

@@ -3,10 +3,7 @@ import './styles.scss'
 import Document from '@tiptap/extension-document'
 import Gapcursor from '@tiptap/extension-gapcursor'
 import Paragraph from '@tiptap/extension-paragraph'
-import Table from '@tiptap/extension-table'
+import { TableKit } from '@tiptap/extension-table'
-import TableCell from '@tiptap/extension-table-cell'
-import TableHeader from '@tiptap/extension-table-header'
-import TableRow from '@tiptap/extension-table-row'
 import Text from '@tiptap/extension-text'
 import { EditorContent, useEditor } from '@tiptap/react'
 import React from 'react'
@@ -18,12 +15,9 @@ export default () => {
       Paragraph,
       Text,
       Gapcursor,
-      Table.configure({
+      TableKit.configure({
-        resizable: true,
+        table: { resizable: true },
       }),
-      TableRow,
-      TableHeader,
-      TableCell,
     ],
     content: `
         <table>

demos/src/Nodes/Table/Vue/index.vue

@@ -66,10 +66,7 @@
 import Document from '@tiptap/extension-document'
 import Gapcursor from '@tiptap/extension-gapcursor'
 import Paragraph from '@tiptap/extension-paragraph'
-import Table from '@tiptap/extension-table'
+import { TableKit } from '@tiptap/extension-table'
-import TableCell from '@tiptap/extension-table-cell'
-import TableHeader from '@tiptap/extension-table-header'
-import TableRow from '@tiptap/extension-table-row'
 import Text from '@tiptap/extension-text'
 import { Editor, EditorContent } from '@tiptap/vue-3'
 
@@ -91,12 +88,9 @@ export default {
         Paragraph,
         Text,
         Gapcursor,
-        Table.configure({
+        TableKit.configure({
-          resizable: true,
+          table: { resizable: true },
         }),
-        TableRow,
-        TableHeader,
-        TableCell,
       ],
       content: `
         <table>

package-lock.json

@@ -19579,14 +19579,14 @@
       "version": "3.0.0-next.3",
       "license": "MIT",
       "devDependencies": {
-        "@tiptap/core": "^3.0.0-next.3"
+        "@tiptap/extension-table": "^3.0.0-next.3"
       },
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/ueberdosis"
       },
       "peerDependencies": {
-        "@tiptap/core": "^3.0.0-next.1"
+        "@tiptap/extension-table": "^3.0.0-next.3"
       }
     },
     "packages/extension-table-header": {
@@ -19594,14 +19594,14 @@
       "version": "3.0.0-next.3",
       "license": "MIT",
       "devDependencies": {
-        "@tiptap/core": "^3.0.0-next.3"
+        "@tiptap/extension-table": "^3.0.0-next.3"
       },
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/ueberdosis"
       },
       "peerDependencies": {
-        "@tiptap/core": "^3.0.0-next.1"
+        "@tiptap/extension-table": "^3.0.0-next.3"
       }
     },
     "packages/extension-table-row": {
@@ -19609,14 +19609,14 @@
       "version": "3.0.0-next.3",
       "license": "MIT",
       "devDependencies": {
-        "@tiptap/core": "^3.0.0-next.3"
+        "@tiptap/extension-table": "^3.0.0-next.3"
       },
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/ueberdosis"
       },
       "peerDependencies": {
-        "@tiptap/core": "^3.0.0-next.1"
+        "@tiptap/extension-table": "^3.0.0-next.3"
       }
     },
     "packages/extension-task-item": {

packages/extension-table-cell/package.json

@@ -28,10 +28,10 @@
     "dist"
   ],
   "devDependencies": {
-    "@tiptap/core": "^3.0.0-next.3"
+    "@tiptap/extension-table": "^3.0.0-next.3"
   },
   "peerDependencies": {
-    "@tiptap/core": "^3.0.0-next.1"
+    "@tiptap/extension-table": "^3.0.0-next.3"
   },
   "repository": {
     "type": "git",

packages/extension-table-cell/src/index.ts

@@ -1,5 +1,5 @@
-import { TableCell } from './table-cell.js'
+import { TableCell } from '@tiptap/extension-table'
 
-export * from './table-cell.js'
+export { TableCell, TableCellOptions } from '@tiptap/extension-table'
 
 export default TableCell

packages/extension-table-header/package.json

@@ -28,10 +28,10 @@
     "dist"
   ],
   "devDependencies": {
-    "@tiptap/core": "^3.0.0-next.3"
+    "@tiptap/extension-table": "^3.0.0-next.3"
   },
   "peerDependencies": {
-    "@tiptap/core": "^3.0.0-next.1"
+    "@tiptap/extension-table": "^3.0.0-next.3"
   },
   "repository": {
     "type": "git",

packages/extension-table-header/src/index.ts

@@ -1,5 +1,5 @@
-import { TableHeader } from './table-header.js'
+import { TableHeader } from '@tiptap/extension-table'
 
-export * from './table-header.js'
+export { TableHeader, TableHeaderOptions } from '@tiptap/extension-table'
 
 export default TableHeader

packages/extension-table-row/package.json

@@ -28,10 +28,10 @@
     "dist"
   ],
   "devDependencies": {
-    "@tiptap/core": "^3.0.0-next.3"
+    "@tiptap/extension-table": "^3.0.0-next.3"
   },
   "peerDependencies": {
-    "@tiptap/core": "^3.0.0-next.1"
+    "@tiptap/extension-table": "^3.0.0-next.3"
   },
   "repository": {
     "type": "git",

packages/extension-table-row/src/index.ts

@@ -1,5 +1,5 @@
-import { TableRow } from './table-row.js'
+import { TableRow } from '@tiptap/extension-table'
 
-export * from './table-row.js'
+export { TableRow, TableRowOptions } from '@tiptap/extension-table'
 
 export default TableRow

packages/extension-table/src/index.ts

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

packages/extension-table/src/table-cell/index.ts

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

packages/extension-table/src/table-header/index.ts

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

packages/extension-table/src/table-kit.ts

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

packages/extension-table/src/table-row/index.ts

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

packages/extension-table/src/table/index.ts

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