Merge pull request #1 from Jam3/feature/markdown-toolbar

Add Markdown Toolbar
BookStackApp · May 1, 2019 · 2e600df · 2e600df
2 parents 4ee0fde + 8d6fc83
commit 2e600df
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 7 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/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",

diff --git a/resources/assets/js/components/markdown-editor.js b/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();

diff --git a/resources/assets/sass/_forms.scss b/resources/assets/sass/_forms.scss
@@ -36,6 +36,24 @@
 #markdown-editor {
   position: relative;
   z-index: 5;
+  markdown-toolbar {
+    padding: 5px;
+  }
+  markdown-toolbar > * {
+    border: solid 1px #666;
+    border-radius: 5px;
+    cursor: pointer;
+    margin: 5px 0px;
+    padding: 2px 5px;
+    text-align: center;
+  }
+  markdown-toolbar > *:hover {
+    background-color: #666;
+    color: #fff;
+  }
+  markdown-toolbar > * > i {
+    padding-left: 5px;
+  }
   #markdown-editor-input {
     font-style: normal;
     font-weight: 400;

diff --git a/resources/views/pages/edit.blade.php b/resources/views/pages/edit.blade.php
@@ -1,6 +1,7 @@
 @extends('base')
 
 @section('head')
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
     <script src="{{ baseUrl('/libs/tinymce/tinymce.min.js?ver=4.6.6') }}"></script>
 @stop
 

diff --git a/resources/views/pages/form.blade.php b/resources/views/pages/form.blade.php
@@ -97,6 +97,18 @@
                         </div>
                     </div>
 
+                    <markdown-toolbar for="markdown-textarea">
+                        <md-bold><i class="fas fa-bold"></i></md-bold>
+                        <md-header><i class="fas fa-heading"></i></md-header>
+                        <md-italic><i class="fas fa-italic"></i></md-italic>
+                        <md-quote><i class="fas fa-quote-right"></i></md-quote>
+                        <md-code><i class="fas fa-code"></i></md-code>
+                        <md-link><i class="fas fa-link"></i></md-link>
+                        <md-unordered-list><i class="fas fa-list-ul"></i></md-unordered-list>
+                        <md-ordered-list><i class="fas fa-list-ol"></i></md-ordered-list>
+                        <md-task-list><i class="fas fa-tasks"></i></md-task-list>
+                    </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>
@@ -123,4 +135,4 @@
         @endif
 
     </div>
-</div>
+</div>