From a8b664fdb5b425625928d0ce6ae9cdbd78fb3833 Mon Sep 17 00:00:00 2001 From: Edgar Zanella Alvarenga Date: Tue, 19 Jun 2018 16:03:32 +0200 Subject: [PATCH] Add a toolbar to Codemirror editor Signed-off-by: Edgar Zanella Alvarenga --- public/css/index.css | 18 +++++++ public/js/index.js | 9 ++++ public/js/lib/editor/index.js | 87 +++++++++++++++++++++++++++++++ public/js/lib/editor/toolbar.html | 48 +++++++++++++++++ public/js/lib/editor/utils.js | 40 ++++++++++++++ 5 files changed, 202 insertions(+) create mode 100644 public/js/lib/editor/toolbar.html diff --git a/public/css/index.css b/public/css/index.css index 3f391e2..9cc1766 100644 --- a/public/css/index.css +++ b/public/css/index.css @@ -20,6 +20,24 @@ body.night{ background: #333 !important; } +.toolbar { + background-color: #1c1c1e; + border: 1px solid #343434; +} + +.toolbar > .btn-toolbar > .btn-group > .btn { + background-color: #1c1c1e; + padding: 5px; + font-size: 1em; +} + +.toolbar > .btn-toolbar > .btn-group > .btn:hover { + background-color: #383a3e; + + padding: 5px; +} + + .CodeMirror { font-family: "Source Code Pro", Consolas, monaco, monospace; letter-spacing: 0.025em; diff --git a/public/js/index.js b/public/js/index.js index c6a4f77..5e0aded 100644 --- a/public/js/index.js +++ b/public/js/index.js @@ -30,6 +30,8 @@ import { import { debug, DROPBOX_APP_KEY, + GOOGLE_API_KEY, + GOOGLE_CLIENT_ID, noteid, noteurl, urlpath, @@ -566,6 +568,9 @@ var previousFocusOnEditor = null function checkEditorStyle () { var desireHeight = editorInstance.statusBar ? (ui.area.edit.height() - editorInstance.statusBar.outerHeight()) : ui.area.edit.height() + if (editorInstance.toolBar) { + desireHeight = desireHeight - editorInstance.toolBar.outerHeight() + } // set editor height and min height based on scrollbar style and mode var scrollbarStyle = editor.getOption('scrollbarStyle') if (scrollbarStyle === 'overlay' || appState.currentMode === modeType.both) { @@ -804,6 +809,10 @@ function changeMode (type) { editorInstance.addStatusBar() editorInstance.updateStatusBar() } + // add and update tool bar + if (!editorInstance.toolBar) { + editorInstance.addToolBar() + } // work around foldGutter might not init properly editor.setOption('foldGutter', false) editor.setOption('foldGutter', true) diff --git a/public/js/lib/editor/index.js b/public/js/lib/editor/index.js index bc228b7..cb9192b 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') diff --git a/public/js/lib/editor/toolbar.html b/public/js/lib/editor/toolbar.html new file mode 100644 index 0000000..2894eef --- /dev/null +++ b/public/js/lib/editor/toolbar.html @@ -0,0 +1,48 @@ +
+ +
diff --git a/public/js/lib/editor/utils.js b/public/js/lib/editor/utils.js index 3702a16..f1053c4 100644 --- a/public/js/lib/editor/utils.js +++ b/public/js/lib/editor/utils.js @@ -46,3 +46,43 @@ export function wrapTextWith (editor, cm, symbol) { } } } + +export function insertText (cm, text, cursorEnd = 0) { + var cursor = cm.getCursor() + cm.replaceSelection(text, cursor, cursor) + cm.focus() + cm.setCursor({line: cursor.line, ch: cursor.ch + cursorEnd}) +} + +export function insertHeader (cm) { + let cursor = cm.getCursor() + let startOfLine = {line: cursor.line, ch: 0} + let startOfLineText = cm.getRange(startOfLine, {line: cursor.line, ch: 1}) + // See if it is already a header + if (startOfLineText === '#') { + cm.replaceRange('#', startOfLine, startOfLine) + } else { + cm.replaceRange('# ', startOfLine, startOfLine) + } + cm.focus() +} + +export function insertOnStartOfLines (cm, symbol, cursorEnd) { + let cursor = cm.getCursor() + var ranges = cm.listSelections() + + for (let i = 0; i < ranges.length; i++) { + var range = ranges[i] + if (!range.empty()) { + const from = range.from() + const to = range.to() + for (let j = from.line; j <= to.line; ++j) { + cm.replaceRange(symbol, {line: j, ch: 0}, {line: j, ch: 0}) + } + } else { + cm.replaceRange(symbol, {line: cursor.line, ch: 0}, {line: cursor.line, ch: 0}) + } + } + cm.setCursor({line: cursor.line, ch: (cursorEnd)? cursorEnd : cursor.ch}) + cm.focus() +}