depau/HackMD
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Add a toolbar to Codemirror editor

Browse source 
Signed-off-by: Edgar Zanella Alvarenga <e@vaz.io>
This commit is contained in:
Edgar Zanella Alvarenga 2018-06-19 16:03:32 +02:00
parent 82c7f9d07c
commit a8b664fdb5
5 changed files with 202 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
public/css/index.css
View file

@ -20,6 +20,24 @@ body.night{
background: #333 !important; 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 { .CodeMirror {
font-family: "Source Code Pro", Consolas, monaco, monospace; font-family: "Source Code Pro", Consolas, monaco, monospace;
letter-spacing: 0.025em; letter-spacing: 0.025em;

9
public/js/index.js
View file

@ -30,6 +30,8 @@ import {
import { import {
debug, debug,
DROPBOX_APP_KEY, DROPBOX_APP_KEY,
GOOGLE_API_KEY,
GOOGLE_CLIENT_ID,
noteid, noteid,
noteurl, noteurl,
urlpath, urlpath,
@ -566,6 +568,9 @@ var previousFocusOnEditor = null
function checkEditorStyle () { function checkEditorStyle () {
var desireHeight = editorInstance.statusBar ? (ui.area.edit.height() - editorInstance.statusBar.outerHeight()) : ui.area.edit.height() 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 // set editor height and min height based on scrollbar style and mode
var scrollbarStyle = editor.getOption('scrollbarStyle') var scrollbarStyle = editor.getOption('scrollbarStyle')
if (scrollbarStyle === 'overlay' || appState.currentMode === modeType.both) { if (scrollbarStyle === 'overlay' || appState.currentMode === modeType.both) {
@ -804,6 +809,10 @@ function changeMode (type) {
editorInstance.addStatusBar() editorInstance.addStatusBar()
editorInstance.updateStatusBar() editorInstance.updateStatusBar()
} }
// add and update tool bar
if (!editorInstance.toolBar) {
editorInstance.addToolBar()
}
// work around foldGutter might not init properly // work around foldGutter might not init properly
editor.setOption('foldGutter', false) editor.setOption('foldGutter', false)
editor.setOption('foldGutter', true) editor.setOption('foldGutter', true)

87
public/js/lib/editor/index.js
View file

@ -1,6 +1,7 @@
import * as utils from './utils' import * as utils from './utils'
import config from './config' import config from './config'
import statusBarTemplate from './statusbar.html' import statusBarTemplate from './statusbar.html'
import toolBarTemplate from './toolbar.html'
/* config section */ /* config section */
const isMac = CodeMirror.keyMap.default === CodeMirror.keyMap.macDefault 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 () { addStatusBar () {
this.statusBar = $(statusBarTemplate) this.statusBar = $(statusBarTemplate)
this.statusCursor = this.statusBar.find('.status-cursor > .status-line-column') this.statusCursor = this.statusBar.find('.status-cursor > .status-line-column')

48
public/js/lib/editor/toolbar.html Normal file
View file

@ -0,0 +1,48 @@
<div class="toolbar">
<div class="btn-toolbar" role="toolbar" aria-label="Editor toolbar">
<div class="btn-group" role="group">
<a id="makeBold" class="btn btn-sm btn-dark text-uppercase" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" title="Bold">
<i class="fa fa-bold fa-fw"></i>
</a>
<a id="makeItalic" class="btn btn-sm btn-dark text-uppercase" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" title="Italic">
<i class="fa fa-italic fa-fw"></i>
</a>
<a id="makeStrike" class="btn btn-sm btn-dark text-uppercase" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" title="Strikethrough">
<i class="fa fa-strikethrough fa-fw"></i>
</a>
<a id="makeHeader" class="btn btn-sm btn-dark text-uppercase" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" title="Heading">
<i class="fa fa-h1 fa-fw">H</i>
</a>
<a id="makeCode" class="btn btn-sm btn-dark text-uppercase" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" title="Quote">
<i class="fa fa-code fa-fw"></i>
</a>
<a id="makeQuote" class="btn btn-sm btn-dark text-uppercase" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" title="Quote">
<i class="fa fa-quote-right fa-fw"></i>
</a>
<a id="makeGenericList" class="btn btn-sm btn-dark text-uppercase" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" title="List">
<i class="fa fa-list fa-fw"></i>
</a>
<a id="makeOrderedList" class="btn btn-sm btn-dark text-uppercase" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" title="Numbered List">
<i class="fa fa-list-ol fa-fw"></i>
</a>
<a id="makeCheckList" class="btn btn-sm btn-dark text-uppercase" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" title="Check List">
<i class="fa fa-check-square fa-fw"></i>
</a>
<a id="makeLink" class="btn btn-sm btn-dark text-uppercase" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" title="Link">
<i class="fa fa-link fa-fw"></i>
</a>
<a id="makeImage" class="btn btn-sm btn-dark text-uppercase" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" title="Image">
<i class="fa fa-image fa-fw"></i>
</a>
<a id="makeTable" class="btn btn-sm btn-dark text-uppercase" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" title="Table">
<i class="fa fa-table fa-fw"></i>
</a>
<a id="makeLine" class="btn btn-sm btn-dark text-uppercase" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" title="Line">
<i class="fa fa-minus fa-fw"></i>
</a>
<a id="makeComment" class="btn btn-sm btn-dark text-uppercase" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" title="Line">
<i class="fa fa-comment fa-fw"></i>
</a>
</div>
</div>
</div>

40
public/js/lib/editor/utils.js
View file

@ -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()
}