Added initial Markdown Toolbar

TODO: Style Buttons

package.json

@@ -28,6 +28,7 @@
     "webpack-cli": "^3.1.2"
   },
   "dependencies": {
+    "@github/markdown-toolbar-element": "^0.2.0",
     "axios": "^0.18.0",
     "clipboard": "^2.0.4",
     "codemirror": "^5.42.0",

resources/assets/js/components/markdown-editor.js

@@ -1,3 +1,4 @@
+import '@github/markdown-toolbar-element';
 import MarkdownIt from "markdown-it";
 import mdTasksLists from 'markdown-it-task-lists';
 import code from '../services/code';
@@ -20,6 +21,7 @@ class MarkdownEditor {
         this.input = this.elem.querySelector('textarea');
         this.htmlInput = this.elem.querySelector('input[name=html]');
         this.cm = code.markdownEditor(this.input);
+        this.cm.getInputField().id = 'markdown-textarea';
 
         this.onMarkdownScroll = this.onMarkdownScroll.bind(this);
         this.init();

resources/views/pages/form.blade.php

@@ -97,6 +97,20 @@
                         </div>
                     </div>
 
+                    <markdown-toolbar for="markdown-textarea">
+                        <md-bold>bold</md-bold>
+                        <md-header>header</md-header>
+                        <md-italic>italic</md-italic>
+                        <md-quote>quote</md-quote>
+                        <md-code>code</md-code>
+                        <md-link>link</md-link>
+                        <md-unordered-list>unordered-list</md-unordered-list>
+                        <md-ordered-list>ordered-list</md-ordered-list>
+                        <md-task-list>task-list</md-task-list>
+                        <md-mention>mention</md-mention>
+                        <md-ref>ref</md-ref>
+                    </markdown-toolbar>
+
                     <div markdown-input class="flex flex-fill">
                         <textarea  id="markdown-editor-input"  name="markdown" rows="5"
                             @if($errors->has('markdown')) class="neg" @endif>@if(isset($model) || old('markdown')){{htmlspecialchars( old('markdown') ? old('markdown') : ($model->markdown === '' ? $model->html : $model->markdown))}}@endif</textarea>