feat: add toolbar buttons for table tools

and hide scrollbar of the toolbar to avoid overlapping the buttons

Signed-off-by: Max Wu <jackymaxj@gmail.com>

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

@@ -5,6 +5,7 @@ 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
@@ -161,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()
@@ -220,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 () {

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>