feat(table): make all table packages be in one package, add a new Tab…

…leKit 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
ueberdosis · Jan 6, 2025 · 131c7d0 · 131c7d0
1 parent e5f1342
commit 131c7d0
Show file tree

Hide file tree

Showing 32 changed files with 122 additions and 76 deletions.
diff --git a/.changeset/dirty-colts-shave.md b/.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.
diff --git a/demos/src/Examples/Tables/React/index.jsx b/demos/src/Examples/Tables/React/index.jsx
@@ -1,9 +1,6 @@
 import './styles.scss'
 
-import Table 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 { TableCell, TableKit } from '@tiptap/extension-table'
 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({
-        resizable: true,
+      TableKit.configure({
+        table: { resizable: true },
+        tableCell: false,
       }),
-      TableRow,
-      TableHeader,
       // Default TableCell
       // TableCell,
       // Custom TableCell with backgroundColor attribute

diff --git a/demos/src/Examples/Tables/Vue/index.vue b/demos/src/Examples/Tables/Vue/index.vue
@@ -68,10 +68,7 @@
 </template>
 
 <script>
-import Table 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 { TableCell, TableKit } from '@tiptap/extension-table'
 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({
-          resizable: true,
+        TableKit.configure({
+          table: {
+            resizable: true,
+          },
+          tableCell: false,
         }),
-        TableRow,
-        TableHeader,
         // Default TableCell
         // TableCell,
         // Custom TableCell with backgroundColor attribute

diff --git a/demos/src/Experiments/All/Vue/index.vue b/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 TableCell from '@tiptap/extension-table-cell'
-import TableHeader from '@tiptap/extension-table-header'
-import TableRow from '@tiptap/extension-table-row'
+import { TableKit } from '@tiptap/extension-table'
 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({
-          resizable: true,
+        TableKit.configure({
+          table: { resizable: true },
         }),
-        TableRow,
-        TableHeader,
-        TableCell,
         Image,
         TaskList,
         TaskItem,

diff --git a/demos/src/Experiments/GenericFigure/Vue/index.vue b/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 TableCell from '@tiptap/extension-table-cell'
-import TableHeader from '@tiptap/extension-table-header'
-import TableRow from '@tiptap/extension-table-row'
+import { TableKit } from '@tiptap/extension-table'
 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,
-        TableRow,
-        TableHeader,
-        TableCell,
+        TableKit.configure({
+          table: {
+            resizable: true,
+          },
+        }),
         ImageFigure,
         TableFigure,
         Figcaption,

diff --git a/demos/src/Nodes/Table/React/index.jsx b/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 TableCell from '@tiptap/extension-table-cell'
-import TableHeader from '@tiptap/extension-table-header'
-import TableRow from '@tiptap/extension-table-row'
+import { TableKit } from '@tiptap/extension-table'
 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({
-        resizable: true,
+      TableKit.configure({
+        table: { resizable: true },
       }),
-      TableRow,
-      TableHeader,
-      TableCell,
     ],
     content: `
         <table>

diff --git a/demos/src/Nodes/Table/Vue/index.vue b/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 TableCell from '@tiptap/extension-table-cell'
-import TableHeader from '@tiptap/extension-table-header'
-import TableRow from '@tiptap/extension-table-row'
+import { TableKit } from '@tiptap/extension-table'
 import Text from '@tiptap/extension-text'
 import { Editor, EditorContent } from '@tiptap/vue-3'
 
@@ -91,12 +88,9 @@ export default {
         Paragraph,
         Text,
         Gapcursor,
-        Table.configure({
-          resizable: true,
+        TableKit.configure({
+          table: { resizable: true },
         }),
-        TableRow,
-        TableHeader,
-        TableCell,
       ],
       content: `
         <table>

diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/extension-table-cell/package.json b/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",

diff --git a/packages/extension-table-cell/src/index.ts b/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
diff --git a/packages/extension-table-header/package.json b/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",

diff --git a/packages/extension-table-header/src/index.ts b/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
diff --git a/packages/extension-table-row/package.json b/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",

diff --git a/packages/extension-table-row/src/index.ts b/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
diff --git a/packages/extension-table/src/index.ts b/packages/extension-table/src/index.ts
@@ -1,7 +1,5 @@
-import { Table } from './table.js'
-
-export * from './table.js'
-export * from './utilities/createColGroup.js'
-export * from './utilities/createTable.js'
-
-export default Table
+export * from './table/index.js'
+export * from './table-cell/index.js'
+export * from './table-header/index.js'
+export * from './table-kit.js'
+export * from './table-row/index.js'
diff --git a/packages/extension-table/src/table-cell/index.ts b/packages/extension-table/src/table-cell/index.ts
@@ -0,0 +1 @@
+export * from './table-cell.js'
diff --git a/...es/extension-table-cell/src/table-cell.ts → ...ension-table/src/table-cell/table-cell.ts b/...es/extension-table-cell/src/table-cell.ts → ...ension-table/src/table-cell/table-cell.ts
diff --git a/packages/extension-table/src/table-header/index.ts b/packages/extension-table/src/table-header/index.ts
@@ -0,0 +1 @@
+export * from './table-header.js'
diff --git a/...xtension-table-header/src/table-header.ts → ...on-table/src/table-header/table-header.ts b/...xtension-table-header/src/table-header.ts → ...on-table/src/table-header/table-header.ts
diff --git a/packages/extension-table/src/table-kit.ts b/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
+  },
+})
diff --git a/packages/extension-table/src/table-row/index.ts b/packages/extension-table/src/table-row/index.ts
@@ -0,0 +1 @@
+export * from './table-row.js'
diff --git a/...ages/extension-table-row/src/table-row.ts → ...xtension-table/src/table-row/table-row.ts b/...ages/extension-table-row/src/table-row.ts → ...xtension-table/src/table-row/table-row.ts
diff --git a/packages/extension-table/src/TableView.ts → ...es/extension-table/src/table/TableView.ts b/packages/extension-table/src/TableView.ts → ...es/extension-table/src/table/TableView.ts
diff --git a/packages/extension-table/src/table/index.ts b/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'
diff --git a/packages/extension-table/src/table.ts → packages/extension-table/src/table/table.ts b/packages/extension-table/src/table.ts → packages/extension-table/src/table/table.ts
diff --git a/...extension-table/src/utilities/colStyle.ts → ...ion-table/src/table/utilities/colStyle.ts b/...extension-table/src/utilities/colStyle.ts → ...ion-table/src/table/utilities/colStyle.ts
diff --git a/...tension-table/src/utilities/createCell.ts → ...n-table/src/table/utilities/createCell.ts b/...tension-table/src/utilities/createCell.ts → ...n-table/src/table/utilities/createCell.ts
diff --git a/...ion-table/src/utilities/createColGroup.ts → ...ble/src/table/utilities/createColGroup.ts b/...ion-table/src/utilities/createColGroup.ts → ...ble/src/table/utilities/createColGroup.ts
diff --git a/...ension-table/src/utilities/createTable.ts → ...-table/src/table/utilities/createTable.ts b/...ension-table/src/utilities/createTable.ts → ...-table/src/table/utilities/createTable.ts
diff --git a/...lities/deleteTableWhenAllCellsSelected.ts → ...lities/deleteTableWhenAllCellsSelected.ts b/...lities/deleteTableWhenAllCellsSelected.ts → ...lities/deleteTableWhenAllCellsSelected.ts
diff --git a/...-table/src/utilities/getTableNodeTypes.ts → .../src/table/utilities/getTableNodeTypes.ts b/...-table/src/utilities/getTableNodeTypes.ts → .../src/table/utilities/getTableNodeTypes.ts
diff --git a/...on-table/src/utilities/isCellSelection.ts → ...le/src/table/utilities/isCellSelection.ts b/...on-table/src/utilities/isCellSelection.ts → ...le/src/table/utilities/isCellSelection.ts