testing insertTable command

docs/src/demos/Nodes/Table/index.spec.js

@@ -3,5 +3,75 @@ context('/demos/Nodes/Table', () => {
     cy.visit('/demos/Nodes/Table')
   })
 
-  // TODO: Write tests
+  beforeEach(() => {
+    cy.get('.ProseMirror').then(([{ editor }]) => {
+      editor.commands.clearContent()
+    })
+  })
+
+  it('creates a table (1x1)', () => {
+    cy.get('.ProseMirror').then(([{ editor }]) => {
+      editor.commands.insertTable({ cols: 1, rows: 1, withHeaderRow: false })
+
+      cy.get('.ProseMirror').find('td').its('length').should('eq', 1)
+      cy.get('.ProseMirror').find('tr').its('length').should('eq', 1)
+    })
+  })
+
+  it('creates a table (3x1)', () => {
+    cy.get('.ProseMirror').then(([{ editor }]) => {
+      editor.commands.insertTable({ cols: 3, rows: 1, withHeaderRow: false })
+
+      cy.get('.ProseMirror').find('td').its('length').should('eq', 3)
+      cy.get('.ProseMirror').find('tr').its('length').should('eq', 1)
+    })
+  })
+
+  it('creates a table (1x3)', () => {
+    cy.get('.ProseMirror').then(([{ editor }]) => {
+      editor.commands.insertTable({ cols: 1, rows: 3, withHeaderRow: false })
+
+      cy.get('.ProseMirror').find('td').its('length').should('eq', 3)
+      cy.get('.ProseMirror').find('tr').its('length').should('eq', 3)
+    })
+  })
+
+  it('creates a table with header row (1x3)', () => {
+    cy.get('.ProseMirror').then(([{ editor }]) => {
+      editor.commands.insertTable({ cols: 1, rows: 3, withHeaderRow: true })
+
+      cy.get('.ProseMirror').find('th').its('length').should('eq', 1)
+      cy.get('.ProseMirror').find('td').its('length').should('eq', 2)
+      cy.get('.ProseMirror').find('tr').its('length').should('eq', 3)
+    })
+  })
+
+  it('creates a table with correct defaults (3x3, th)', () => {
+    cy.get('.ProseMirror').then(([{ editor }]) => {
+      editor.commands.insertTable()
+
+      cy.get('.ProseMirror').find('th').its('length').should('eq', 3)
+      cy.get('.ProseMirror').find('td').its('length').should('eq', 6)
+      cy.get('.ProseMirror').find('tr').its('length').should('eq', 3)
+    })
+  })
+
+  it('generates correct markup for a table (1x1)', () => {
+    cy.get('.ProseMirror').then(([{ editor }]) => {
+      editor.commands.insertTable({ cols: 1, rows: 1, withHeaderRow: false })
+
+      const html = editor.getHTML()
+      expect(html).to.equal('<table><tbody><tr><td colspan="1" rowspan="1"><p></p></td></tr></tbody></table>')
+    })
+  })
+
+  it('generates correct markup for a table (1x1, th)', () => {
+    cy.get('.ProseMirror').then(([{ editor }]) => {
+      editor.commands.insertTable({ cols: 1, rows: 1, withHeaderRow: true })
+
+      const html = editor.getHTML()
+      expect(html).to.equal('<table><tbody><tr><th colspan="1" rowspan="1"><p></p></th></tr></tbody></table>')
+    })
+  })
+
 })

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

@@ -42,7 +42,7 @@
     <button @click="editor.chain().focus().mergeOrSplit().run()">
       mergeOrSplit
     </button>
-    <button @click="editor.chain().focus().setCellAttribute('color', 'pink').run()">
+    <button @click="editor.chain().focus().setCellAttribute('colspan', 2).run()">
       setCellAttribute
     </button>
     <button @click="editor.chain().focus().fixTables().run()">
@@ -93,31 +93,7 @@ export default {
         }),
         TableRow,
         TableHeader,
-        TableCell.extend({
+        TableCell,
-          addAttributes() {
-            return {
-              // original attributes
-              colspan: {
-                default: 1,
-              },
-              rowspan: {
-                default: 1,
-              },
-              colwidth: {
-                default: null,
-              },
-              // add a color attribute to the table cell
-              color: {
-                default: null,
-                renderHTML: attributes => {
-                  return {
-                    style: `color: ${attributes.color}`,
-                  }
-                },
-              },
-            }
-          },
-        }),
       ],
       content: `
         <table>

packages/extension-table/src/table.ts

@@ -74,11 +74,12 @@ export const Table = Node.create({
 
   addCommands() {
     return {
-      insertTable: ({ rows = 3, cols = 3, withHeaderRow = true }): Command => ({ tr, dispatch, editor }) => {
+      insertTable: (options = { rows: 3, cols: 3, withHeaderRow: true }): Command => ({ tr, dispatch, editor }) => {
-        const offset = tr.selection.anchor + 1
+        const node = createTable(editor.schema, options.rows, options.cols, options.withHeaderRow)
-        const node = createTable(editor.schema, rows, cols, withHeaderRow)
 
         if (dispatch) {
+          const offset = tr.selection.anchor + 1
+
           tr.replaceSelectionWith(node)
             .scrollIntoView()
             .setSelection(TextSelection.near(tr.doc.resolve(offset)))