Feature/support table tools (#1300)

Feature/support table tools

package.json

@@ -38,6 +38,7 @@
     "@hackmd/lz-string": "~1.4.4",
     "@hackmd/meta-marked": "~0.4.4",
     "@passport-next/passport-openid": "~1.0.0",
+    "@susisu/mte-kernel": "^2.1.0",
     "archiver": "~3.1.1",
     "async": "~3.1.0",
     "aws-sdk": "~2.503.0",

public/css/index.css

@@ -25,6 +25,32 @@ body.night{
   border: 1px solid #343434;
 }
 
+.toolbar > .btn-toolbar {
+  white-space: nowrap;
+  overflow-y: auto;
+  scrollbar-width: none;
+}
+
+.toolbar > .btn-toolbar::-webkit-scrollbar {
+  display: none;
+}
+
+.toolbar > .btn-toolbar > .btn-group {
+  float: none;
+}
+
+.toolbar > .btn-toolbar > .btn-group > span {
+  display: inline-block;
+  float: left;
+  color: #fff;
+  padding: 5px;
+  line-height: 22px;
+}
+
+.toolbar > .btn-toolbar > .btn-group > span.separator {
+  color: #4d4d4d;
+}
+
 .toolbar > .btn-toolbar > .btn-group > .btn {
   background-color: #1c1c1e;
   padding: 5px;

public/js/lib/editor/index.js

@@ -4,6 +4,8 @@ import config from './config'
 import statusBarTemplate from './statusbar.html'
 import toolBarTemplate from './toolbar.html'
 import './markdown-lint'
+import { initTableEditor } from './table-editor'
+import { options, Alignment, FormatType } from '@susisu/mte-kernel'
 
 /* config section */
 const isMac = CodeMirror.keyMap.default === CodeMirror.keyMap.macDefault
@@ -160,6 +162,19 @@ export default class Editor {
     var makeLine = $('#makeLine')
     var makeComment = $('#makeComment')
 
+    var insertRow = $('#insertRow')
+    var deleteRow = $('#deleteRow')
+    var moveRowUp = $('#moveRowUp')
+    var moveRowDown = $('#moveRowDown')
+    var insertColumn = $('#insertColumn')
+    var deleteColumn = $('#deleteColumn')
+    var moveColumnLeft = $('#moveColumnLeft')
+    var moveColumnRight = $('#moveColumnRight')
+    var alignLeft = $('#alignLeft')
+    var alignCenter = $('#alignCenter')
+    var alignRight = $('#alignRight')
+    var alignNone = $('#alignNone')
+
     makeBold.click(() => {
       utils.wrapTextWith(this.editor, this.editor, '**')
       this.editor.focus()
@@ -219,6 +234,72 @@ export default class Editor {
     makeComment.click(() => {
       utils.insertText(this.editor, '> []')
     })
+
+    // table tools UI
+    const opts = options({
+      smartCursor: true,
+      formatType: FormatType.NORMAL
+    })
+
+    insertRow.click(() => {
+      this.tableEditor.insertRow(opts)
+      this.editor.focus()
+    })
+
+    deleteRow.click(() => {
+      this.tableEditor.deleteRow(opts)
+      this.editor.focus()
+    })
+
+    moveRowUp.click(() => {
+      this.tableEditor.moveRow(-1, opts)
+      this.editor.focus()
+    })
+
+    moveRowDown.click(() => {
+      this.tableEditor.moveRow(1, opts)
+      this.editor.focus()
+    })
+
+    insertColumn.click(() => {
+      this.tableEditor.insertColumn(opts)
+      this.editor.focus()
+    })
+
+    deleteColumn.click(() => {
+      this.tableEditor.deleteColumn(opts)
+      this.editor.focus()
+    })
+
+    moveColumnLeft.click(() => {
+      this.tableEditor.moveColumn(-1, opts)
+      this.editor.focus()
+    })
+
+    moveColumnRight.click(() => {
+      this.tableEditor.moveColumn(1, opts)
+      this.editor.focus()
+    })
+
+    alignLeft.click(() => {
+      this.tableEditor.alignColumn(Alignment.LEFT, opts)
+      this.editor.focus()
+    })
+
+    alignCenter.click(() => {
+      this.tableEditor.alignColumn(Alignment.CENTER, opts)
+      this.editor.focus()
+    })
+
+    alignRight.click(() => {
+      this.tableEditor.alignColumn(Alignment.RIGHT, opts)
+      this.editor.focus()
+    })
+
+    alignNone.click(() => {
+      this.tableEditor.alignColumn(Alignment.NONE, opts)
+      this.editor.focus()
+    })
   }
 
   addStatusBar () {
@@ -623,6 +704,8 @@ export default class Editor {
       placeholder: "← Start by entering a title here\n===\nVisit /features if you don't know what to do.\nHappy hacking :)"
     })
 
+    this.tableEditor = initTableEditor(this.editor)
+
     return this.editor
   }
 

public/js/lib/editor/table-editor.js

@@ -0,0 +1,199 @@
+/* global CodeMirror, $ */
+import { TableEditor, Point, options, Alignment, FormatType } from '@susisu/mte-kernel'
+
+// port of the code from: https://github.com/susisu/mte-demo/blob/master/src/main.js
+
+// text editor interface
+// see https://doc.esdoc.org/github.com/susisu/mte-kernel/class/lib/text-editor.js~ITextEditor.html
+class TextEditorInterface {
+  constructor (editor) {
+    this.editor = editor
+    this.doc = editor.getDoc()
+    this.transaction = false
+    this.onDidFinishTransaction = null
+  }
+
+  getCursorPosition () {
+    const { line, ch } = this.doc.getCursor()
+    return new Point(line, ch)
+  }
+
+  setCursorPosition (pos) {
+    this.doc.setCursor({ line: pos.row, ch: pos.column })
+  }
+
+  setSelectionRange (range) {
+    this.doc.setSelection(
+      { line: range.start.row, ch: range.start.column },
+      { line: range.end.row, ch: range.end.column }
+    )
+  }
+
+  getLastRow () {
+    return this.doc.lineCount() - 1
+  }
+
+  acceptsTableEdit () {
+    return true
+  }
+
+  getLine (row) {
+    return this.doc.getLine(row)
+  }
+
+  insertLine (row, line) {
+    const lastRow = this.getLastRow()
+    if (row > lastRow) {
+      const lastLine = this.getLine(lastRow)
+      this.doc.replaceRange(
+        '\n' + line,
+        { line: lastRow, ch: lastLine.length },
+        { line: lastRow, ch: lastLine.length }
+      )
+    } else {
+      this.doc.replaceRange(
+        line + '\n',
+        { line: row, ch: 0 },
+        { line: row, ch: 0 }
+      )
+    }
+  }
+
+  deleteLine (row) {
+    const lastRow = this.getLastRow()
+    if (row >= lastRow) {
+      if (lastRow > 0) {
+        const preLastLine = this.getLine(lastRow - 1)
+        const lastLine = this.getLine(lastRow)
+        this.doc.replaceRange(
+          '',
+          { line: lastRow - 1, ch: preLastLine.length },
+          { line: lastRow, ch: lastLine.length }
+        )
+      } else {
+        const lastLine = this.getLine(lastRow)
+        this.doc.replaceRange(
+          '',
+          { line: lastRow, ch: 0 },
+          { line: lastRow, ch: lastLine.length }
+        )
+      }
+    } else {
+      this.doc.replaceRange(
+        '',
+        { line: row, ch: 0 },
+        { line: row + 1, ch: 0 }
+      )
+    }
+  }
+
+  replaceLines (startRow, endRow, lines) {
+    const lastRow = this.getLastRow()
+    if (endRow > lastRow) {
+      const lastLine = this.getLine(lastRow)
+      this.doc.replaceRange(
+        lines.join('\n'),
+        { line: startRow, ch: 0 },
+        { line: lastRow, ch: lastLine.length }
+      )
+    } else {
+      this.doc.replaceRange(
+        lines.join('\n') + '\n',
+        { line: startRow, ch: 0 },
+        { line: endRow, ch: 0 }
+      )
+    }
+  }
+
+  transact (func) {
+    this.transaction = true
+    func()
+    this.transaction = false
+    if (this.onDidFinishTransaction) {
+      this.onDidFinishTransaction.call(undefined)
+    }
+  }
+}
+
+export function initTableEditor (editor) {
+  // create an interface to the text editor
+  const editorIntf = new TextEditorInterface(editor)
+  // create a table editor object
+  const tableEditor = new TableEditor(editorIntf)
+  // options for the table editor
+  const opts = options({
+    smartCursor: true,
+    formatType: FormatType.NORMAL
+  })
+  // keymap of the commands
+  // from https://github.com/susisu/mte-demo/blob/master/src/main.js
+  const keyMap = CodeMirror.normalizeKeyMap({
+    Tab: () => { tableEditor.nextCell(opts) },
+    'Shift-Tab': () => { tableEditor.previousCell(opts) },
+    Enter: () => { tableEditor.nextRow(opts) },
+    'Ctrl-Enter': () => { tableEditor.escape(opts) },
+    'Cmd-Enter': () => { tableEditor.escape(opts) },
+    'Shift-Ctrl-Left': () => { tableEditor.alignColumn(Alignment.LEFT, opts) },
+    'Shift-Cmd-Left': () => { tableEditor.alignColumn(Alignment.LEFT, opts) },
+    'Shift-Ctrl-Right': () => { tableEditor.alignColumn(Alignment.RIGHT, opts) },
+    'Shift-Cmd-Right': () => { tableEditor.alignColumn(Alignment.RIGHT, opts) },
+    'Shift-Ctrl-Up': () => { tableEditor.alignColumn(Alignment.CENTER, opts) },
+    'Shift-Cmd-Up': () => { tableEditor.alignColumn(Alignment.CENTER, opts) },
+    'Shift-Ctrl-Down': () => { tableEditor.alignColumn(Alignment.NONE, opts) },
+    'Shift-Cmd-Down': () => { tableEditor.alignColumn(Alignment.NONE, opts) },
+    'Ctrl-Left': () => { tableEditor.moveFocus(0, -1, opts) },
+    'Cmd-Left': () => { tableEditor.moveFocus(0, -1, opts) },
+    'Ctrl-Right': () => { tableEditor.moveFocus(0, 1, opts) },
+    'Cmd-Right': () => { tableEditor.moveFocus(0, 1, opts) },
+    'Ctrl-Up': () => { tableEditor.moveFocus(-1, 0, opts) },
+    'Cmd-Up': () => { tableEditor.moveFocus(-1, 0, opts) },
+    'Ctrl-Down': () => { tableEditor.moveFocus(1, 0, opts) },
+    'Cmd-Down': () => { tableEditor.moveFocus(1, 0, opts) },
+    'Ctrl-K Ctrl-I': () => { tableEditor.insertRow(opts) },
+    'Cmd-K Cmd-I': () => { tableEditor.insertRow(opts) },
+    'Ctrl-L Ctrl-I': () => { tableEditor.deleteRow(opts) },
+    'Cmd-L Cmd-I': () => { tableEditor.deleteRow(opts) },
+    'Ctrl-K Ctrl-J': () => { tableEditor.insertColumn(opts) },
+    'Cmd-K Cmd-J': () => { tableEditor.insertColumn(opts) },
+    'Ctrl-L Ctrl-J': () => { tableEditor.deleteColumn(opts) },
+    'Cmd-L Cmd-J': () => { tableEditor.deleteColumn(opts) },
+    'Alt-Shift-Ctrl-Left': () => { tableEditor.moveColumn(-1, opts) },
+    'Alt-Shift-Cmd-Left': () => { tableEditor.moveColumn(-1, opts) },
+    'Alt-Shift-Ctrl-Right': () => { tableEditor.moveColumn(1, opts) },
+    'Alt-Shift-Cmd-Right': () => { tableEditor.moveColumn(1, opts) },
+    'Alt-Shift-Ctrl-Up': () => { tableEditor.moveRow(-1, opts) },
+    'Alt-Shift-Cmd-Up': () => { tableEditor.moveRow(-1, opts) },
+    'Alt-Shift-Ctrl-Down': () => { tableEditor.moveRow(1, opts) },
+    'Alt-Shift-Cmd-Down': () => { tableEditor.moveRow(1, opts) }
+  })
+  // enable keymap if the cursor is in a table
+  function updateActiveState () {
+    const tableTools = $('.toolbar .table-tools')
+    const active = tableEditor.cursorIsInTable(opts)
+    if (active) {
+      tableTools.show()
+      tableTools.parent().scrollLeft(tableTools.parent()[0].scrollWidth)
+      editor.setOption('extraKeys', keyMap)
+    } else {
+      tableTools.hide()
+      editor.setOption('extraKeys', null)
+      tableEditor.resetSmartCursor()
+    }
+  }
+  // event subscriptions
+  editor.on('cursorActivity', () => {
+    if (!editorIntf.transaction) {
+      updateActiveState()
+    }
+  })
+  editor.on('changes', () => {
+    if (!editorIntf.transaction) {
+      updateActiveState()
+    }
+  })
+  editorIntf.onDidFinishTransaction = () => {
+    updateActiveState()
+  }
+
+  return tableEditor
+}

public/js/lib/editor/toolbar.html

@@ -44,5 +44,47 @@
           <i class="fa fa-comment fa-fw"></i>
       </a>
     </div>
+    <span class="btn-group table-tools hidden-xs" style="display: none;">
+      <span class="separator" style="margin-left: -10px;">|</span>
+      <span>Row</span>
+      <a id="insertRow" class="btn btn-sm btn-dark text-uppercase" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" title="Insert Row">
+          <i class="fa fa-plus-circle fa-fw"></i>
+      </a>
+      <a id="deleteRow" class="btn btn-sm btn-dark text-uppercase" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" title="Delete Row">
+          <i class="fa fa-minus-circle fa-fw"></i>
+      </a>
+      <a id="moveRowUp" class="btn btn-sm btn-dark text-uppercase" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" title="Move Row Up">
+          <i class="fa fa-long-arrow-up fa-fw"></i>
+      </a>
+      <a id="moveRowDown" class="btn btn-sm btn-dark text-uppercase" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" title="Move Row Down">
+          <i class="fa fa-long-arrow-down fa-fw"></i>
+      </a>
+      <span>Column</span>
+      <a id="insertColumn" class="btn btn-sm btn-dark text-uppercase" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" title="Insert Column">
+          <i class="fa fa-plus-circle fa-fw"></i>
+      </a>
+      <a id="deleteColumn" class="btn btn-sm btn-dark text-uppercase" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" title="Delete Column">
+          <i class="fa fa-minus-circle fa-fw"></i>
+      </a>
+      <a id="moveColumnLeft" class="btn btn-sm btn-dark text-uppercase" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" title="Move Column Left">
+          <i class="fa fa-long-arrow-left fa-fw"></i>
+      </a>
+      <a id="moveColumnRight" class="btn btn-sm btn-dark text-uppercase" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" title="Move Column Right">
+          <i class="fa fa-long-arrow-right fa-fw"></i>
+      </a>
+      <span>Alignment</span>
+      <a id="alignLeft" class="btn btn-sm btn-dark text-uppercase" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" title="Align Left">
+          <i class="fa fa-align-left fa-fw"></i>
+      </a>
+      <a id="alignCenter" class="btn btn-sm btn-dark text-uppercase" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" title="Align Center">
+          <i class="fa fa-align-center fa-fw"></i>
+      </a>
+      <a id="alignRight" class="btn btn-sm btn-dark text-uppercase" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" title="Align Right">
+          <i class="fa fa-align-right fa-fw"></i>
+      </a>
+      <a id="alignNone" class="btn btn-sm btn-dark text-uppercase" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" title="Align None">
+          <i class="fa fa-ban fa-fw"></i>
+      </a>
+    </span>
   </div>
 </div>

webpack.common.js

@@ -401,6 +401,9 @@ module.exports = {
 
   module: {
     rules: [{
+      test: /\.mjs$/,
+      type: 'javascript/auto'
+    }, {
       test: /\.js$/,
       use: [{ loader: 'babel-loader' }],
       exclude: [/node_modules/, /public\/vendor/]

yarn.lock

@@ -1041,6 +1041,13 @@
   resolved "https://registry.yarnpkg.com/@sinonjs/text-encoding/-/text-encoding-0.7.1.tgz#8da5c6530915653f3a1f38fd5f101d8c3f8079c5"
   integrity sha512-+iTbntw2IZPb/anVDbypzfQa+ay64MW0Zo8aJ8gZPWMMK6/OubMVb6lUPMagqjOPnmtauXnFCACVl3O7ogjeqQ==
 
+"@susisu/mte-kernel@^2.1.0":
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/@susisu/mte-kernel/-/mte-kernel-2.1.0.tgz#ec4b3a9875ae927c7f06f519323f427c0787534f"
+  integrity sha512-4XgtDqZNoVGy2BKqHBhm972T4uGaOWRK1BNnh97ryL2cm2Z8g7Zq59OwcNUNaNLVoqsCp6Nv61qn4z+gq4DYyw==
+  dependencies:
+    meaw "^4.3.0"
+
 "@textlint/ast-node-types@^4.0.3":
   version "4.2.4"
   resolved "https://registry.yarnpkg.com/@textlint/ast-node-types/-/ast-node-types-4.2.4.tgz#ae569bd76364040939044d057d5a56284563a7af"
@@ -8073,6 +8080,11 @@ mdurl@^1.0.1:
   resolved "https://registry.yarnpkg.com/mdurl/-/mdurl-1.0.1.tgz#fe85b2ec75a59037f2adfec100fd6c601761152e"
   integrity sha1-/oWy7HWlkDfyrf7BAP1sYBdhFS4=
 
+meaw@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/meaw/-/meaw-4.3.0.tgz#96d74682bb9492623bd3c5d701ad37ba7a561091"
+  integrity sha512-LqrSSga9IZHJzqAQD0KkGQqeXwqgNsM3X+eHAlf/5h1DqyFdP2Q30Tx8Nx2TCzjoibxmQL/JsUtSGwdpZHvuUg==
+
 media-typer@0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"