add table default styling, add options to table plugins

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

@@ -39,13 +39,13 @@
     <button @click="editor.chain().focus().toggleHeaderCell().run()">
       ✅ toggleHeaderCell
     </button>
-    <button disabled>
+    <button @click="editor.chain().focus().fixTables().run()">
-      ⚠️ fixTables
+      ❓️ fixTables
     </button>
     <button disabled>
       ⚠️ toggleCellMerge
     </button>
-    <button disabled>
+    <button @click="editor.chain().focus().setCellAttr({name: 'colwidth', value: 10}).run()">
       ⚠️ setCellAttr
     </button>
     <editor-content :editor="editor" />
@@ -115,12 +115,59 @@ export default {
 
 <style lang="scss">
 .ProseMirror {
-  table, td {
+  table {
-    border: 3px solid red;
+    border-collapse: collapse;
+    table-layout: fixed;
+    width: 100%;
+    margin: 0;
+    overflow: hidden;
+
+    td,
+    th {
+      min-width: 1em;
+      border: 2px solid #ced4da;
+      padding: 3px 5px;
+      vertical-align: top;
+      box-sizing: border-box;
+      position: relative;
+
+      > * {
+        margin-bottom: 0;
+      }
+    }
+
+    th {
+      font-weight: bold;
+      text-align: left;
+    }
+
+    .selectedCell:after {
+      z-index: 2;
+      position: absolute;
+      content: "";
+      left: 0; right: 0; top: 0; bottom: 0;
+      background: rgba(200, 200, 255, 0.4);
+      pointer-events: none;
+    }
+
+    .column-resize-handle {
+      position: absolute;
+      right: -2px; top: 0; bottom: 0;
+      width: 4px;
+      z-index: 20;
+      background-color: #adf;
+      pointer-events: none;
+    }
   }
 
-  th {
+  .tableWrapper {
-    border: 3px solid blue;
+    margin: 1em 0;
+    overflow-x: auto;
   }
 }
+
+.resize-cursor {
+  cursor: ew-resize;
+  cursor: col-resize;
+}
 </style>

packages/extension-table/src/TableView.ts

@@ -0,0 +1,61 @@
+// @ts-nocheck
+
+export class TableView {
+  constructor(node, cellMinWidth) {
+    this.node = node
+    this.cellMinWidth = cellMinWidth
+    this.dom = document.createElement('div')
+    this.dom.className = 'tableWrapper'
+    this.table = this.dom.appendChild(document.createElement('table'))
+    this.colgroup = this.table.appendChild(document.createElement('colgroup'))
+    updateColumns(node, this.colgroup, this.table, cellMinWidth)
+    this.contentDOM = this.table.appendChild(document.createElement('tbody'))
+  }
+
+  update(node) {
+    if (node.type != this.node.type) return false
+    this.node = node
+    updateColumns(node, this.colgroup, this.table, this.cellMinWidth)
+    return true
+  }
+
+  ignoreMutation(record) {
+    return record.type == 'attributes' && (record.target == this.table || this.colgroup.contains(record.target))
+  }
+}
+
+export function updateColumns(node, colgroup, table, cellMinWidth, overrideCol, overrideValue) {
+  let totalWidth = 0; let
+    fixedWidth = true
+  let nextDOM = colgroup.firstChild; const
+    row = node.firstChild
+  for (let i = 0, col = 0; i < row.childCount; i++) {
+    const { colspan, colwidth } = row.child(i).attrs
+    for (let j = 0; j < colspan; j++, col++) {
+      const hasWidth = overrideCol == col ? overrideValue : colwidth && colwidth[j]
+      const cssWidth = hasWidth ? `${hasWidth}px` : ''
+      totalWidth += hasWidth || cellMinWidth
+      if (!hasWidth) fixedWidth = false
+      if (!nextDOM) {
+        colgroup.appendChild(document.createElement('col')).style.width = cssWidth
+      } else {
+        if (nextDOM.style.width != cssWidth) nextDOM.style.width = cssWidth
+        nextDOM = nextDOM.nextSibling
+      }
+    }
+  }
+
+  while (nextDOM) {
+    const after = nextDOM.nextSibling
+    nextDOM.parentNode.removeChild(nextDOM)
+    nextDOM = after
+  }
+
+  if (fixedWidth) {
+    table.style.width = `${totalWidth}px`
+    table.style.minWidth = ''
+  } else {
+    table.style.width = ''
+    table.style.minWidth = `${totalWidth}px`
+  }
+}

packages/extension-table/src/table.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { Command, Node, mergeAttributes } from '@tiptap/core'
 import {
   tableEditing,
@@ -15,9 +16,10 @@ import {
   toggleHeaderColumn,
   toggleHeaderRow,
   toggleHeaderCell,
-  // setCellAttr,
+  setCellAttr,
-  // fixTables,
+  fixTables,
 } from 'prosemirror-tables'
+import { TableView } from './TableView'
 
 export interface TableOptions {
   HTMLAttributes: {
@@ -113,10 +115,18 @@ export const Table = Node.create({
         console.log('toggleHeaderCell')
         return toggleHeaderCell(state, dispatch)
       },
-      // fixTables: (): Command => ({ state, dispatch }) => {
+      fixTables: (): Command => ({ state, dispatch }) => {
-      //   console.log('fixTables')
+        console.log('fixTables')
-      //   return fixTables(state, dispatch)
+        const transaction = fixTables(state)
-      // },
+
+        console.log(transaction)
+        if (transaction) {
+          // @ts-ignore
+          return dispatch(transaction)
+        }
+
+        return false
+      },
       // toggleCellMerge: () => (
       //     (state, dispatch) => {
       //       if (mergeCells(state, dispatch)) {
@@ -125,14 +135,32 @@ export const Table = Node.create({
       //       splitCell(state, dispatch)
       //     }
       // ),
-      // setCellAttr: ({ name, value }) => setCellAttr(name, value),
+      // setCellAttr: ({ name, value }): Command => () => {
+      //   console.log('setCellAttr')
+      //   return setCellAttr(name, value)
+      // },
     }
   },
 
   addProseMirrorPlugins() {
+    const columnResizingOptions = {
+      handleWidth: 5,
+      cellMinWidth: 25,
+      View: TableView,
+      lastColumnResizable: true,
+    }
+
+    const tableEditingOptions = {
+      allowTableNodeSelection: false,
+    }
+
     return [
-      ...(this.options.resizable ? [columnResizing({})] : []),
+      ...(this.options.resizable
-      tableEditing({}),
+        // @ts-ignore
+        ? [columnResizing(columnResizingOptions)]
+        : []
+      ),
+      tableEditing(tableEditingOptions),
     ]
   },
 })