fix setCellAttributes, fix linting errors in the TableView

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

@@ -40,13 +40,13 @@
       ✅ toggleHeaderCell
     </button>
     <button @click="editor.chain().focus().fixTables().run()">
-      ❓️ fixTables
+      ✅ fixTables
     </button>
     <button disabled>
       ⚠️ toggleCellMerge
     </button>
-    <button @click="editor.chain().focus().setCellAttr({name: 'colwidth', value: 10}).run()">
+    <button @click="editor.chain().focus().setCellAttributes({name: 'color', value: 'pink'}).run()">
-      ⚠️ setCellAttr
+      ⚠️ setCellAttributes (currently single cells only)
     </button>
     <editor-content :editor="editor" />
   </div>
@@ -62,6 +62,7 @@ import Table from '@tiptap/extension-table'
 import TableRow from '@tiptap/extension-table-row'
 import TableCell from '@tiptap/extension-table-cell'
 import TableHeader from '@tiptap/extension-table-header'
+import Gapcursor from '@tiptap/extension-gapcursor'
 
 export default {
   components: {
@@ -85,24 +86,51 @@ export default {
         }),
         TableRow,
         TableHeader,
-        TableCell,
+        TableCell.extend({
+          addAttributes() {
+            return {
+              colspan: {
+                default: 1,
+              },
+              rowspan: {
+                default: 1,
+              },
+              colwidth: {
+                default: null,
+              },
+              color: {
+                default: null,
+                // Take the attribute values
+                renderHTML: attributes => {
+                // … and return an object with HTML attributes.
+                  return {
+                    style: `color: ${attributes.color}`,
+                  }
+                },
+              },
+            }
+          },
+        }),
+        Gapcursor,
       ],
       content: `
-        <p>Example Text</p>
+        <p>
+          People
+        </p>
         <table>
           <tbody>
             <tr>
-              <th>Test</th>
+              <th>Name</th>
-              <th colspan="2">Test</th>
+              <th colspan="3">Description</th>
             </tr>
             <tr>
-              <td>Test</td>
+              <td>Cyndi Lauper</td>
-              <td>Test</td>
+              <td>singer</td>
-              <td>Test</td>
+              <td>songwriter</td>
+              <td>actress</td>
             </tr>
           </tbody>
         </table>
-        <p>Example Text</p>
       `,
     })
   },
@@ -159,11 +187,11 @@ export default {
       pointer-events: none;
     }
   }
+}
 
-  .tableWrapper {
+.tableWrapper {
-    margin: 1em 0;
+  padding: 1rem 0;
   overflow-x: auto;
-  }
 }
 
 .resize-cursor {

packages/extension-table/src/TableView.ts

@@ -1,45 +1,20 @@
 // @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++) {
+  for (let i = 0, col = 0; i < row.childCount; i += 1) {
     const { colspan, colwidth } = row.child(i).attrs
-    for (let j = 0; j < colspan; j++, col++) {
+    for (let j = 0; j < colspan; j += 1, col += 1) {
-      const hasWidth = overrideCol == col ? overrideValue : colwidth && colwidth[j]
+      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
+        if (nextDOM.style.width !== cssWidth) nextDOM.style.width = cssWidth
         nextDOM = nextDOM.nextSibling
       }
     }
@@ -59,3 +34,27 @@ export function updateColumns(node, colgroup, table, cellMinWidth, overrideCol,
     table.style.minWidth = `${totalWidth}px`
   }
 }
+
+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))
+  }
+}

packages/extension-table/src/table.ts

@@ -16,7 +16,7 @@ import {
   toggleHeaderColumn,
   toggleHeaderRow,
   toggleHeaderCell,
-  // setCellAttr,
+  setCellAttr,
   fixTables,
   CellSelection,
 } from 'prosemirror-tables'
@@ -106,10 +106,8 @@ export const Table = Node.create({
         return toggleHeaderCell(state, dispatch)
       },
       fixTables: (): Command => ({ state, dispatch }) => {
-        console.log('fixTables')
         const transaction = fixTables(state)
 
-        console.log(transaction)
         if (transaction) {
           // @ts-ignore
           return dispatch(transaction)
@@ -125,10 +123,9 @@ export const Table = Node.create({
       //       splitCell(state, dispatch)
       //     }
       // ),
-      // setCellAttr: ({ name, value }): Command => () => {
+      setCellAttributes: ({ name, value }): Command => ({ state, dispatch }) => {
-      //   console.log('setCellAttr')
+        return setCellAttr(name, value)(state, dispatch)
-      //   return setCellAttr(name, value)
+      },
-      // },
       goToNextCell: (): Command => ({ state, dispatch }) => {
         return goToNextCell(1)(state, dispatch)
       },