Merge branch 'feature/tables' of https://github.com/ueberdosis/tiptap-next into feature/tables

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()">
-      ✅ createTable
+    <button @click="editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()">
+      ✅ 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>
-      ⚠️ toggleCellMerge
+    <button @click="editor.chain().focus().goToNextCell().run()">
+      ✅ goToNextCell
     </button>
-    <button @click="editor.chain().focus().setCellAttributes({name: 'color', value: 'pink'}).run()">
-      ⚠️ setCellAttributes (currently single cells only)
+    <button @click="editor.chain().focus().goToPreviousCell().run()">
+      ✅ goToPreviousCell
     </button>
     <editor-content :editor="editor" />
   </div>
@@ -81,6 +87,7 @@ export default {
         Document,
         Paragraph,
         Text,
+        Gapcursor,
         Table.configure({
           resizable: true,
         }),
@@ -89,6 +96,7 @@ export default {
         TableCell.extend({
           addAttributes() {
             return {
+              // original attributes
               colspan: {
                 default: 1,
               },
@@ -98,11 +106,10 @@ export default {
               colwidth: {
                 default: null,
               },
+              // add a color attribute to the table cell
               color: {
                 default: null,
-                // Take the attribute values
                 renderHTML: attributes => {
-                // … and return an object with HTML attributes.
                   return {
                     style: `color: ${attributes.color}`,
                   }
@@ -111,7 +118,6 @@ export default {
             }
           },
         }),
-        Gapcursor,
       ],
       content: `
         <p>

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

@@ -18,7 +18,6 @@ import {
   toggleHeaderCell,
   setCellAttr,
   fixTables,
-  CellSelection,
 } from 'prosemirror-tables'
 import { TextSelection } from 'prosemirror-state'
 import { createTable } from './utilities/createTable'
@@ -29,6 +28,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 +41,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 +66,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)
@@ -90,7 +99,6 @@ export const Table = Node.create({
         return deleteTable(state, dispatch)
       },
       mergeCells: (): Command => ({ state, dispatch }) => {
-        console.log('mergeCells', { state }, state.selection instanceof CellSelection)
         return mergeCells(state, dispatch)
       },
       splitCell: (): Command => ({ state, dispatch }) => {
@@ -105,24 +113,13 @@ export const Table = Node.create({
       toggleHeaderCell: (): Command => ({ state, dispatch }) => {
         return toggleHeaderCell(state, dispatch)
       },
-      fixTables: (): Command => ({ state, dispatch }) => {
-        const transaction = fixTables(state)
-
-        if (transaction) {
-          // @ts-ignore
-          return dispatch(transaction)
+      mergeOrSplit: (): Command => ({ state, dispatch }) => {
+        if (mergeCells(state, dispatch)) {
+          return true
         }
 
-        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 +129,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 +159,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
-        // @ts-ignore
-        ? [columnResizing(columnResizingOptions)]
-        : []
-      ),
-      tableEditing(tableEditingOptions),
+      ...(this.options.resizable ? [columnResizing({
+        handleWidth: this.options.handleWidth,
+        cellMinWidth: this.options.cellMinWidth,
+        View: this.options.View,
+        lastColumnResizable: this.options.lastColumnResizable,
+      })] : []),
+      tableEditing(this.options.allowTableNodeSelection),
     ]
   },
 })