Adding Table Support

packages/tiptap-extensions/src/index.js

@@ -8,6 +8,10 @@ export { default as Image } from './nodes/Image'
 export { default as ListItem } from './nodes/ListItem'
 export { default as Mention } from './nodes/Mention'
 export { default as OrderedList } from './nodes/OrderedList'
+export { default as Table } from './nodes/Table'
+export { default as TableHeader } from './nodes/TableHeader'
+export { default as TableCell } from './nodes/TableCell'
+export { default as TableRow } from './nodes/TableRow'
 export { default as TodoItem } from './nodes/TodoItem'
 export { default as TodoList } from './nodes/TodoList'
 

packages/tiptap-extensions/src/nodes/Table.js

@@ -0,0 +1,74 @@
+import { Node } from 'tiptap'
+import {
+  tableEditing,
+  columnResizing,
+  goToNextCell,
+  addColumnBefore,
+  addColumnAfter,
+  deleteColumn,
+  addRowBefore,
+  addRowAfter,
+  deleteRow,
+  deleteTable,
+  mergeCells,
+  splitCell,
+  toggleHeaderColumn,
+  toggleHeaderRow,
+  toggleHeaderCell,
+  setCellAttr,
+  fixTables,
+} from 'prosemirror-tables'
+import { createTable } from 'prosemirror-utils'
+import TableNodes from './TableNodes'
+
+export default class Table extends Node {
+
+  get name() {
+    return 'table'
+  }
+
+  get schema() {
+    return TableNodes.table
+  }
+
+  commands({ schema }) {
+    return {
+      createTable: ({ rowsCount, colsCount, withHeaderRow }) => (
+        (state, dispatch) => {
+          const nodes = createTable(schema, rowsCount, colsCount, withHeaderRow)
+          const tr = state.tr.replaceSelectionWith(nodes).scrollIntoView()
+          dispatch(tr)
+        }
+      ),
+      addColumnBefore: () => addColumnBefore,
+      addColumnAfter: () => addColumnAfter,
+      deleteColumn: () => deleteColumn,
+      addRowBefore: () => addRowBefore,
+      addRowAfter: () => addRowAfter,
+      deleteRow: () => deleteRow,
+      deleteTable: () => deleteTable,
+      mergeCells: () => mergeCells,
+      splitCell: () => splitCell,
+      toggleHeaderColumn: () => toggleHeaderColumn,
+      toggleHeaderRow: () => toggleHeaderRow,
+      toggleHeaderCell: () => toggleHeaderCell,
+      setCellAttr: () => setCellAttr,
+      fixTables: () => fixTables,
+    }
+  }
+
+  keys() {
+    return {
+      Tab: goToNextCell(1),
+      'Shift-Tab': goToNextCell(-1),
+    }
+  }
+
+  get plugins() {
+    return [
+      columnResizing(),
+      tableEditing(),
+    ]
+  }
+
+}

packages/tiptap-extensions/src/nodes/TableCell.js

@@ -0,0 +1,14 @@
+import { Node } from 'tiptap'
+import TableNodes from './TableNodes'
+
+export default class TableCell extends Node {
+
+  get name() {
+    return 'table_cell'
+  }
+
+  get schema() {
+    return TableNodes.table_cell
+  }
+
+}

packages/tiptap-extensions/src/nodes/TableHeader.js

@@ -0,0 +1,14 @@
+import { Node } from 'tiptap'
+import TableNodes from './TableNodes'
+
+export default class TableHeader extends Node {
+
+  get name() {
+    return 'table_header'
+  }
+
+  get schema() {
+    return TableNodes.table_header
+  }
+
+}

packages/tiptap-extensions/src/nodes/TableNodes.js

@@ -0,0 +1,20 @@
+import { tableNodes } from 'prosemirror-tables'
+
+export default tableNodes({
+  tableGroup: 'block',
+  cellContent: 'block+',
+  cellAttributes: {
+    background: {
+      default: null,
+      getFromDOM(dom) {
+        return dom.style.backgroundColor || null
+      },
+      setDOMAttr(value, attrs) {
+        if (value) {
+          const style = { style: `${(attrs.style || '')}background-color: ${value};` }
+          Object.assign(attrs, style)
+        }
+      },
+    },
+  },
+})

packages/tiptap-extensions/src/nodes/TableRow.js

@@ -0,0 +1,14 @@
+import { Node } from 'tiptap'
+import TableNodes from './TableNodes'
+
+export default class TableRow extends Node {
+
+  get name() {
+    return 'table_row'
+  }
+
+  get schema() {
+    return TableNodes.table_row
+  }
+
+}