add table commands, add tableRole to the schema, add buttons to the example

packages/extension-table/src/table.ts

@@ -1,4 +1,23 @@
-import { Node, mergeAttributes } from '@tiptap/core'
+import { Command, Node, mergeAttributes } from '@tiptap/core'
+import {
+  // tableEditing,
+  // columnResizing,
+  // goToNextCell,
+  addColumnBefore,
+  addColumnAfter,
+  deleteColumn,
+  addRowBefore,
+  addRowAfter,
+  deleteRow,
+  deleteTable,
+  mergeCells,
+  splitCell,
+  toggleHeaderColumn,
+  toggleHeaderRow,
+  toggleHeaderCell,
+  setCellAttr,
+  fixTables,
+} from 'prosemirror-tables'
 
 export interface TableOptions {
   HTMLAttributes: {
@@ -13,9 +32,9 @@ export const Table = Node.create({
     HTMLAttributes: {},
   },
 
-  content: 'tableRow+',
+  content: 'table_row+',
 
-  // tableRole: 'table',
+  tableRole: 'table',
 
   isolating: true,
 
@@ -28,6 +47,85 @@ export const Table = Node.create({
   renderHTML({ HTMLAttributes }) {
     return ['table', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), ['tbody', 0]]
   },
+
+  addCommands() {
+    return {
+      // createTable: ({ rowsCount, colsCount, withHeaderRow }) => (
+      //   (state, dispatch) => {
+      //     const offset = state.tr.selection.anchor + 1
+
+      //     const nodes = createTable(schema, rowsCount, colsCount, withHeaderRow)
+      //     const tr = state.tr.replaceSelectionWith(nodes).scrollIntoView()
+      //     const resolvedPos = tr.doc.resolve(offset)
+
+      //     tr.setSelection(TextSelection.near(resolvedPos))
+
+      //     dispatch(tr)
+      //   }
+      // ),
+      addColumnBefore: (): Command => ({ state, dispatch }) => {
+        console.log('addColumnBefore')
+        return addColumnBefore(state, dispatch)
+      },
+      addColumnAfter: (): Command => ({ state, dispatch }) => {
+        console.log('addColumnAfter')
+        return addColumnAfter(state, dispatch)
+      },
+      deleteColumn: (): Command => ({ state, dispatch }) => {
+        console.log('deleteColumn')
+        return deleteColumn(state, dispatch)
+      },
+      addRowBefore: (): Command => ({ state, dispatch }) => {
+        console.log('addRowBefore')
+        return addRowBefore(state, dispatch)
+      },
+      addRowAfter: (): Command => ({ state, dispatch }) => {
+        console.log('addRowAfter')
+        return addRowAfter(state, dispatch)
+      },
+      deleteRow: (): Command => ({ state, dispatch }) => {
+        console.log('deleteRow')
+        return deleteRow(state, dispatch)
+      },
+      deleteTable: (): Command => ({ state, dispatch }) => {
+        console.log('deleteTable')
+        return deleteTable(state, dispatch)
+      },
+      mergeCells: (): Command => ({ state, dispatch }) => {
+        console.log('mergeCells')
+        return mergeCells(state, dispatch)
+      },
+      splitCell: (): Command => ({ state, dispatch }) => {
+        console.log('splitCell')
+        return splitCell(state, dispatch)
+      },
+      toggleHeaderColumn: (): Command => ({ state, dispatch }) => {
+        console.log('toggleHeaderColumn')
+        return toggleHeaderColumn(state, dispatch)
+      },
+      toggleHeaderRow: (): Command => ({ state, dispatch }) => {
+        console.log('toggleHeaderRow')
+        return toggleHeaderRow(state, dispatch)
+      },
+      toggleHeaderCell: (): Command => ({ state, dispatch }) => {
+        console.log('toggleHeaderCell')
+        return toggleHeaderCell(state, dispatch)
+      },
+      // fixTables: (): Command => ({ state, dispatch }) => {
+      //   console.log('fixTables')
+      //   return fixTables(state, dispatch)
+      // },
+      // toggleCellMerge: () => (
+      //     (state, dispatch) => {
+      //       if (mergeCells(state, dispatch)) {
+      //         return
+      //       }
+      //       splitCell(state, dispatch)
+      //     }
+      // ),
+      // setCellAttr: ({ name, value }) => setCellAttr(name, value),
+    }
+  },
 })
 
 declare module '@tiptap/core' {