feat: import markdown with table

src/editor/contentState/tableBlockCtrl.js

@@ -9,6 +9,39 @@ import tablePicker from '../tablePicker'
 const TABLE_BLOCK_REG = /^\|.*?(\\*)\|.*?(\\*)\|/
 
 const tableBlockCtrl = ContentState => {
+  ContentState.prototype.createToolBar = function () {
+    const toolBar = this.createBlock('div')
+    toolBar.editable = false
+    const ul = this.createBlock('ul')
+    const tools = [{
+      label: 'table',
+      icon: TableIcon
+    }, {
+      label: 'left',
+      icon: LeftIcon
+    }, {
+      label: 'center',
+      icon: CenterIcon
+    }, {
+      label: 'right',
+      icon: RightIcon
+    }, {
+      label: 'delete',
+      icon: DeleteIcon
+    }]
+
+    tools.forEach(tool => {
+      const toolBlock = this.createBlock('li')
+      const imgBlock = this.createBlock('img')
+      imgBlock.src = tool.icon
+      toolBlock.label = tool.label
+      this.appendChild(toolBlock, imgBlock)
+      this.appendChild(ul, toolBlock)
+    })
+    this.appendChild(toolBar, ul)
+    return toolBar
+  }
+
   ContentState.prototype.initTable = function (block) {
     const { text } = block
     const rowHeader = []
@@ -53,35 +86,7 @@ const tableBlockCtrl = ContentState => {
     this.appendChild(table, tHead)
     this.appendChild(table, tBody)
 
-    const toolBar = this.createBlock('div')
+    const toolBar = this.createToolBar()
-    toolBar.editable = false
-    const ul = this.createBlock('ul')
-    const tools = [{
-      label: 'table',
-      icon: TableIcon
-    }, {
-      label: 'left',
-      icon: LeftIcon
-    }, {
-      label: 'center',
-      icon: CenterIcon
-    }, {
-      label: 'right',
-      icon: RightIcon
-    }, {
-      label: 'delete',
-      icon: DeleteIcon
-    }]
-
-    tools.forEach(tool => {
-      const toolBlock = this.createBlock('li')
-      const imgBlock = this.createBlock('img')
-      imgBlock.src = tool.icon
-      toolBlock.label = tool.label
-      this.appendChild(toolBlock, imgBlock)
-      this.appendChild(ul, toolBlock)
-    })
-    this.appendChild(toolBar, ul)
 
     block.type = 'figure'
     block.text = ''

src/editor/utils/importMarkdown.js

@@ -64,6 +64,17 @@ const importRegister = ContentState => {
       return lang
     }
 
+    const getRowColumnCount = childNodes => {
+      const THEAD_ROW_COUNT = 1
+      const tbodyNode = childNodes.find(child => child.nodeName === 'tbody')
+      const row = tbodyNode.childNodes.filter(child => child.nodeName === 'tr').length + THEAD_ROW_COUNT - 1
+      const column = tbodyNode.childNodes
+        .find(child => child.nodeName === 'tr').childNodes
+        .filter(td => td.nodeName === 'td')
+        .length - 1
+      return { row, column } // zero base
+    }
+
     const travel = (parent, childNodes) => {
       const len = childNodes.length
       let i
@@ -74,6 +85,8 @@ const importRegister = ContentState => {
         let value
 
         switch (child.nodeName) {
+          case 'th':
+          case 'td':
           case 'p':
           case 'h1':
           case 'h2':
@@ -85,9 +98,41 @@ const importRegister = ContentState => {
             const match = /\d/.exec(child.nodeName)
             value = match ? '#'.repeat(+match[0]) + textValue : textValue
             block = this.createBlock(child.nodeName, value)
+            // handle `th` and `td`
+            if (child.nodeName === 'th' || child.nodeName === 'td') {
+              const column = childNodes.filter(child => /th|td/.test(child.nodeName)).indexOf(child)
+              let align = ''
+              const styleAttr = child.attrs.filter(attr => attr.name === 'style')
+              if (styleAttr.length) {
+                const styleValue = styleAttr[0].value
+                if (/text-align/.test(styleValue)) {
+                  align = styleValue.split(':')[1]
+                }
+              }
+              Object.assign(block, { column, align })
+            }
             this.appendChild(parent, block)
             break
 
+          case 'table':
+            const toolBar = this.createToolBar()
+            const table = this.createBlock('table')
+            Object.assign(table, getRowColumnCount(child.childNodes)) // set row and column
+            block = this.createBlock('figure')
+            this.appendChild(block, toolBar)
+            this.appendChild(block, table)
+            this.appendChild(parent, block)
+            travel(table, child.childNodes)
+            break
+
+          case 'tr':
+          case 'tbody':
+          case 'thead':
+            block = this.createBlock(child.nodeName)
+            this.appendChild(parent, block)
+            travel(block, child.childNodes)
+            break
+
           case 'hr':
             const initValue = '---'
             block = this.createBlock(child.nodeName, initValue)