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

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

@@ -1,5 +1,44 @@
 <template>
   <div v-if="editor">
+    <button disabled>
+      ⚠️ createTable
+    </button>
+    <button @click="editor.chain().focus().addColumnBefore().run()">
+      ⚠️ addColumnBefore
+    </button>
+    <button @click="editor.chain().focus().addColumnAfter().run()">
+      ⚠️ addColumnAfter
+    </button>
+    <button @click="editor.chain().focus().deleteColumn().run()">
+      ⚠️ deleteColumn
+    </button>
+    <button @click="editor.chain().focus().addRowBefore().run()">
+      ⚠️ addRowBefore
+    </button>
+    <button @click="editor.chain().focus().addRowAfter().run()">
+      ⚠️ addRowAfter
+    </button>
+    <button @click="editor.chain().focus().deleteRow().run()">
+      ⚠️ deleteRow
+    </button>
+    <button @click="editor.chain().focus().deleteTable().run()">
+      ✅ deleteTable
+    </button>
+    <button @click="editor.chain().focus().mergeCells().run()">
+      ⚠️ mergeCells
+    </button>
+    <button @click="editor.chain().focus().splitCell().run()">
+      ⚠️ splitCell
+    </button>
+    <button @click="editor.chain().focus().toggleHeaderColumn().run()">
+      ⚠️ toggleHeaderColumn
+    </button>
+    <button @click="editor.chain().focus().toggleHeaderRow().run()">
+      ⚠️ toggleHeaderRow
+    </button>
+    <button @click="editor.chain().focus().toggleHeaderCell().run()">
+      ⚠️ toggleHeaderCell
+    </button>
     <editor-content :editor="editor" />
   </div>
 </template>
@@ -57,8 +96,10 @@ export default {
 }
 </script>
 
-<style>
+<style lang="scss">
+.ProseMirror {
   table, tr, td {
     border: 3px solid red;
   }
+}
 </style>

packages/core/src/Node.ts

@@ -68,6 +68,11 @@ export interface NodeConfig<Options = any, Commands = {}> extends Overwrite<Exte
    */
   isolating?: NodeSpec['isolating'] | ((this: { options: Options }) => NodeSpec['isolating']),
 
+  /**
+   * Table Role
+   */
+  tableRole?: NodeSpec['tableRole'] | ((this: { options: Options }) => NodeSpec['tableRole']),
+
   /**
    * Parse HTML
    */

packages/core/src/helpers/getSchema.ts

@@ -36,6 +36,7 @@ export default function getSchema(extensions: Extensions): Schema {
       code: callOrReturn(extension.config.code, context),
       defining: callOrReturn(extension.config.defining, context),
       isolating: callOrReturn(extension.config.isolating, context),
+      tableRole: callOrReturn(extension.config.tableRole, context),
       attrs: Object.fromEntries(extensionAttributes.map(extensionAttribute => {
         return [extensionAttribute.name, { default: extensionAttribute?.attribute?.default }]
       })),

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

@@ -6,16 +6,20 @@ export interface TableCellOptions {
   },
 }
 export const TableCell = Node.create({
-  name: 'tableCell',
+  name: 'table_cell',
 
   defaultOptions: <TableCellOptions>{
     HTMLAttributes: {},
   },
 
   // content: options.cellContent,
+
   content: 'block+',
+
   // attrs: cellAttrs,
-  // tableRole: 'cell',
+
+  tableRole: 'cell',
+
   isolating: true,
 
   parseHTML() {

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

@@ -7,16 +7,16 @@ export interface TableRowOptions {
 }
 
 export const TableRow = Node.create({
-  name: 'tableRow',
+  name: 'table_row',
 
   defaultOptions: <TableRowOptions>{
     HTMLAttributes: {},
   },
 
   // content: '(tableCell | tableHeader)*',
-  content: 'tableCell*',
+  content: 'table_cell*',
 
-  // tableRole: 'row',
+  tableRole: 'row',
 
   parseHTML() {
     return [{ tag: 'tr' }]

packages/extension-table/package.json

@@ -23,5 +23,8 @@
   ],
   "peerDependencies": {
     "@tiptap/core": "^2.0.0-alpha.6"
+  },
+  "dependencies": {
+    "prosemirror-tables": "^1.1.1"
   }
 }

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' {