From a8b664fdb5b425625928d0ce6ae9cdbd78fb3833 Mon Sep 17 00:00:00 2001
From: Edgar Zanella Alvarenga
Date: Tue, 19 Jun 2018 16:03:32 +0200
Subject: Add a toolbar to Codemirror editor

Signed-off-by: Edgar Zanella Alvarenga <e@vaz.io>
---
 public/js/lib/editor/index.js | 87 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 87 insertions(+)

(limited to 'public/js/lib/editor/index.js')

diff --git a/public/js/lib/editor/index.js b/public/js/lib/editor/index.js
index bc228b7b..cb9192bc 100644
--- a/public/js/lib/editor/index.js
+++ b/public/js/lib/editor/index.js
@@ -1,6 +1,7 @@
 import * as utils from './utils'
 import config from './config'
 import statusBarTemplate from './statusbar.html'
+import toolBarTemplate from './toolbar.html'
 
 /* config section */
 const isMac = CodeMirror.keyMap.default === CodeMirror.keyMap.macDefault
@@ -136,6 +137,92 @@ export default class Editor {
     })
   }
 
+  addToolBar () {
+    this.toolBar = $(toolBarTemplate)
+    //console.log('PLACE', $('#toolbarPlace'))
+    //$('#toolbarPlace').html(this.toolBar)
+    this.toolbarPanel = this.editor.addPanel(this.toolBar[0], {
+       position: 'top'
+    })
+
+    var insertDemo = $('#insertDemo')
+    var makeBold = $('#makeBold')
+    var makeItalic = $('#makeItalic')
+    var makeStrike = $('#makeStrike')
+    var makeHeader = $('#makeHeader')
+    var makeCode = $('#makeCode')
+    var makeQuote = $('#makeQuote')
+    var makeGenericList = $('#makeGenericList')
+    var makeOrderedList = $('#makeOrderedList')
+    var makeCheckList = $('#makeCheckList')
+    var makeLink = $('#makeLink')
+    var makeImage = $('#makeImage')
+    var makeTable = $('#makeTable')
+    var makeLine = $('#makeLine')
+    var makeComment = $('#makeComment')
+
+    makeBold.click(() => {
+        utils.wrapTextWith(this.editor, this.editor, '**')
+        this.editor.focus()
+    })
+
+    makeItalic.click(() => {
+        utils.wrapTextWith(this.editor, this.editor, '*')
+        this.editor.focus()
+    })
+
+    makeStrike.click(() => {
+        utils.wrapTextWith(this.editor, this.editor, '~~')
+        this.editor.focus()
+    })
+
+    makeHeader.click(() => {
+      utils.insertHeader(this.editor)
+    })
+
+    makeCode.click(() => {
+      utils.wrapTextWith(this.editor, this.editor, '```')
+        this.editor.focus()
+    })
+
+    makeQuote.click(() => {
+      utils.insertOnStartOfLines(this.editor, '> ')
+    })
+
+    makeGenericList.click(() => {
+      utils.insertOnStartOfLines(this.editor, '* ')
+    })
+
+    makeOrderedList.click(() => {
+      utils.insertOnStartOfLines(this.editor, '1. ')
+    })
+
+    makeCheckList.click(() => {
+      utils.insertOnStartOfLines(this.editor, '- [ ] ')
+    })
+
+    makeLink.click(() => {
+      utils.insertText(this.editor, '[](https://)', 1)
+    })
+
+    makeImage.click(() => {
+      utils.insertText(this.editor, '![](https://)', 4)
+    })
+
+    makeTable.click(() => {
+      utils.insertText(this.editor, '\n\n| Column 1 | Column 2 | Column 3 |\n| -------- | -------- | -------- |\n| Text     | Text     | Text     |\n')
+    })
+
+    makeLine.click(() => {
+      utils.insertText(this.editor, '\n----\n')
+    })
+
+    makeComment.click(() => {
+      utils.insertText(this.editor, '> []', 4)
+    })
+
+  }
+
   addStatusBar () {
     this.statusBar = $(statusBarTemplate)
     this.statusCursor = this.statusBar.find('.status-cursor > .status-line-column')
-- 
cgit v1.2.3