Markdown Table Formatter

browser/components/CodeEditor.js

@@ -5,6 +5,8 @@ import CodeMirror from 'codemirror'
 import 'codemirror-mode-elixir'
 import attachmentManagement from 'browser/main/lib/dataApi/attachmentManagement'
 import convertModeName from 'browser/lib/convertModeName'
+import { options, TableEditor } from '@susisu/mte-kernel'
+import TextEditorInterface from 'browser/lib/TextEditorInterface'
 import eventEmitter from 'browser/main/lib/eventEmitter'
 import iconv from 'iconv-lite'
 import crypto from 'crypto'
@@ -48,6 +50,8 @@ export default class CodeEditor extends React.Component {
     }
     this.searchHandler = (e, msg) => this.handleSearch(msg)
     this.searchState = null
+
+    this.formatTable = () => this.handleFormatTable()
   }
 
   handleSearch (msg) {
@@ -81,6 +85,10 @@ export default class CodeEditor extends React.Component {
     })
   }
 
+  handleFormatTable () {
+    this.tableEditor.formatAll(options({textWidthOptions: {}}))
+  }
+
   componentDidMount () {
     const { rulers, enableRulers } = this.props
     const expandSnippet = this.expandSnippet.bind(this)
@@ -182,6 +190,9 @@ export default class CodeEditor extends React.Component {
     CodeMirror.Vim.defineEx('wq', 'wq', this.quitEditor)
     CodeMirror.Vim.defineEx('qw', 'qw', this.quitEditor)
     CodeMirror.Vim.map('ZZ', ':q', 'normal')
+
+    this.tableEditor = new TableEditor(new TextEditorInterface(this.editor))
+    eventEmitter.on('code:format-table', this.formatTable)
   }
 
   expandSnippet (line, cursor, cm, snippets) {
@@ -264,6 +275,8 @@ export default class CodeEditor extends React.Component {
     this.editor.off('scroll', this.scrollHandler)
     const editorTheme = document.getElementById('editorTheme')
     editorTheme.removeEventListener('load', this.loadStyleHandler)
+
+    eventEmitter.off('code:format-table', this.formatTable)
   }
 
   componentDidUpdate (prevProps, prevState) {

browser/lib/TextEditorInterface.js

@@ -0,0 +1,53 @@
+import { Point } from '@susisu/mte-kernel'
+
+export default class TextEditorInterface {
+  constructor (editor) {
+    this.editor = editor
+  }
+
+  getCursorPosition () {
+    const pos = this.editor.getCursor()
+    return new Point(pos.line, pos.ch)
+  }
+
+  setCursorPosition (pos) {
+    this.editor.setCursor({line: pos.row, ch: pos.column})
+  }
+
+  setSelectionRange (range) {
+    this.editor.setSelection({
+      anchor: {line: range.start.row, ch: range.start.column},
+      head: {line: range.end.row, ch: range.end.column}
+    })
+  }
+
+  getLastRow () {
+    return this.editor.lastLine()
+  }
+
+  acceptsTableEdit (row) {
+    return true
+  }
+
+  getLine (row) {
+    return this.editor.getLine(row)
+  }
+
+  insertLine (row, line) {
+    this.editor.replaceRange(line, {line: row, ch: 0})
+  }
+
+  deleteLine (row) {
+    this.editor.replaceRange('', {line: row, ch: 0}, {line: row, ch: this.editor.getLine(row).length})
+  }
+
+  replaceLines (startRow, endRow, lines) {
+    endRow-- // because endRow is a first line after a table.
+    const endRowCh = this.editor.getLine(endRow).length
+    this.editor.replaceRange(lines, {line: startRow, ch: 0}, {line: endRow, ch: endRowCh})
+  }
+
+  transact (func) {
+    func()
+  }
+}

lib/main-menu.js

@@ -136,6 +136,15 @@ const file = {
     {
       type: 'separator'
     },
+    {
+      label: 'Format Table',
+      click () {
+        mainWindow.webContents.send('code:format-table')
+      }
+    },
+    {
+      type: 'separator'
+    },
     {
       label: 'Print',
       accelerator: 'CommandOrControl+P',

package.json

@@ -51,6 +51,7 @@
   "dependencies": {
     "@rokt33r/markdown-it-math": "^4.0.1",
     "@rokt33r/season": "^5.3.0",
+    "@susisu/mte-kernel": "^2.0.0",
     "aws-sdk": "^2.48.0",
     "aws-sdk-mobile-analytics": "^0.9.2",
     "codemirror": "^5.37.0",