refactor table options

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

@@ -1,7 +1,7 @@
 <template>
   <div v-if="editor">
-    <button @click="editor.chain().focus().createTable({ rows: 3, cols: 3, withHeaderRow: true }).run()">
+    <button @click="editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()">
-      ✅ createTable
+      ✅ insertTable
     </button>
     <button @click="editor.chain().focus().addColumnBefore().run()">
       ✅ addColumnBefore
@@ -39,14 +39,20 @@
     <button @click="editor.chain().focus().toggleHeaderCell().run()">
       ✅ toggleHeaderCell
     </button>
+    <button @click="editor.chain().focus().mergeOrSplit().run()">
+      ⚠️ mergeOrSplit
+    </button>
+    <button @click="editor.chain().focus().setCellAttributes({name: 'color', value: 'pink'}).run()">
+      ⚠️ setCellAttributes
+    </button>
     <button @click="editor.chain().focus().fixTables().run()">
       ✅ fixTables
     </button>
-    <button disabled>
+    <button @click="editor.chain().focus().goToNextCell().run()">
-      ⚠️ toggleCellMerge
+      ✅ goToNextCell
     </button>
-    <button @click="editor.chain().focus().setCellAttributes({name: 'color', value: 'pink'}).run()">
+    <button @click="editor.chain().focus().goToPreviousCell().run()">
-      ⚠️ setCellAttributes (currently single cells only)
+      ✅ goToPreviousCell
     </button>
     <editor-content :editor="editor" />
   </div>

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

@@ -33,12 +33,10 @@ export const TableCell = Node.create({
   isolating: true,
 
   parseHTML() {
-    // return [{ tag: 'td', getAttrs: dom => getCellAttrs(dom, extraAttrs) }]
     return [{ tag: 'td' }]
   },
 
   renderHTML({ HTMLAttributes }) {
-    // toDOM(node) { return ["td", setCellAttrs(node, extraAttrs), 0] }
     return ['td', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0]
   },
 

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

@@ -33,12 +33,10 @@ export const TableHeader = Node.create({
   isolating: true,
 
   parseHTML() {
-    // return [{ tag: 'th', getAttrs: dom => getCellAttrs(dom, extraAttrs) }]
     return [{ tag: 'th' }]
   },
 
   renderHTML({ HTMLAttributes }) {
-    // toDOM(node) { return ["th", setCellAttrs(node, extraAttrs), 0] }
     return ['th', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0]
   },
 

packages/extension-table/src/table.ts

@@ -29,6 +29,11 @@ export interface TableOptions {
     [key: string]: any
   },
   resizable: boolean,
+  handleWidth: number,
+  cellMinWidth: number,
+  View: TableView,
+  lastColumnResizable: boolean,
+  allowTableNodeSelection: boolean,
 }
 
 export const Table = Node.create({
@@ -37,6 +42,11 @@ export const Table = Node.create({
   defaultOptions: <TableOptions>{
     HTMLAttributes: {},
     resizable: false,
+    handleWidth: 5,
+    cellMinWidth: 25,
+    View: TableView,
+    lastColumnResizable: true,
+    allowTableNodeSelection: false,
   },
 
   content: 'tableRow+',
@@ -57,7 +67,7 @@ export const Table = Node.create({
 
   addCommands() {
     return {
-      createTable: ({ rows, cols, withHeaderRow }): Command => ({ state, dispatch }) => {
+      insertTable: ({ rows, cols, withHeaderRow }): Command => ({ state, dispatch }) => {
         const offset = state.tr.selection.anchor + 1
 
         const nodes = createTable(this.editor.schema, rows, cols, withHeaderRow)
@@ -105,24 +115,13 @@ export const Table = Node.create({
       toggleHeaderCell: (): Command => ({ state, dispatch }) => {
         return toggleHeaderCell(state, dispatch)
       },
-      fixTables: (): Command => ({ state, dispatch }) => {
+      mergeOrSplit: (): Command => ({ state, dispatch }) => {
-        const transaction = fixTables(state)
+        if (mergeCells(state, dispatch)) {
-
+          return true
-        if (transaction) {
-          // @ts-ignore
-          return dispatch(transaction)
         }
 
-        return false
+        return splitCell(state, dispatch)
       },
-      // toggleCellMerge: () => (
-      //     (state, dispatch) => {
-      //       if (mergeCells(state, dispatch)) {
-      //         return
-      //       }
-      //       splitCell(state, dispatch)
-      //     }
-      // ),
       setCellAttributes: ({ name, value }): Command => ({ state, dispatch }) => {
         return setCellAttr(name, value)(state, dispatch)
       },
@@ -132,6 +131,15 @@ export const Table = Node.create({
       goToPreviousCell: (): Command => ({ state, dispatch }) => {
         return goToNextCell(-1)(state, dispatch)
       },
+      fixTables: (): Command => ({ state, dispatch }) => {
+        const transaction = fixTables(state)
+
+        if (transaction) {
+          return dispatch(transaction)
+        }
+
+        return false
+      },
     }
   },
 
@@ -153,24 +161,14 @@ export const Table = Node.create({
   },
 
   addProseMirrorPlugins() {
-    const columnResizingOptions = {
-      handleWidth: 5,
-      cellMinWidth: 25,
-      View: TableView,
-      lastColumnResizable: true,
-    }
-
-    const tableEditingOptions = {
-      allowTableNodeSelection: false,
-    }
-
     return [
-      ...(this.options.resizable
+      ...(this.options.resizable ? [columnResizing({
-        // @ts-ignore
+        handleWidth: this.options.handleWidth,
-        ? [columnResizing(columnResizingOptions)]
+        cellMinWidth: this.options.cellMinWidth,
-        : []
+        View: this.options.View,
-      ),
+        lastColumnResizable: this.options.lastColumnResizable,
-      tableEditing(tableEditingOptions),
+      })] : []),
+      tableEditing(this.options.allowTableNodeSelection),
     ]
   },
 })