diff options
author | Sheogorath | 2018-06-23 21:19:44 +0200 |
---|---|---|
committer | Sheogorath | 2018-06-23 21:19:44 +0200 |
commit | 49db5bc6534bccaea89192d95a6a0e87d0cb28dd (patch) | |
tree | 78c9bfca3a4513a4c4223c536219b6fa781dd637 /public/js/lib | |
parent | 7542968dc7f1f0e302f3f5cdad602aab68076c38 (diff) | |
parent | f65d96c57b02c98616ffe3d8d7cc93f3e3942897 (diff) |
Merge branch 'pr-846'
Diffstat (limited to '')
-rw-r--r-- | public/js/lib/editor/index.js | 83 | ||||
-rw-r--r-- | public/js/lib/editor/toolbar.html | 48 | ||||
-rw-r--r-- | public/js/lib/editor/utils.js | 113 |
3 files changed, 224 insertions, 20 deletions
diff --git a/public/js/lib/editor/index.js b/public/js/lib/editor/index.js index bc228b7b..0537e927 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,88 @@ export default class Editor { }) } + addToolBar () { + this.toolBar = $(toolBarTemplate) + this.toolbarPanel = this.editor.addPanel(this.toolBar[0], { + position: 'top' + }) + + 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.insertLink(this.editor, false) + }) + + makeImage.click(() => { + utils.insertLink(this.editor, true) + }) + + 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, '> []') + }) + } + 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 00000000..2894eef9 --- /dev/null +++ b/public/js/lib/editor/toolbar.html @@ -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> diff --git a/public/js/lib/editor/utils.js b/public/js/lib/editor/utils.js index 3702a166..33670884 100644 --- a/public/js/lib/editor/utils.js +++ b/public/js/lib/editor/utils.js @@ -3,39 +3,39 @@ export function wrapTextWith (editor, cm, symbol) { if (!cm.getSelection()) { return CodeMirror.Pass } else { - var ranges = cm.listSelections() - for (var i = 0; i < ranges.length; i++) { - var range = ranges[i] + let ranges = cm.listSelections() + for (let i = 0; i < ranges.length; i++) { + let range = ranges[i] if (!range.empty()) { const from = range.from() const to = range.to() if (symbol !== 'Backspace') { - cm.replaceRange(symbol, to, to, '+input') - cm.replaceRange(symbol, from, from, '+input') - // workaround selection range not correct after add symbol - var _ranges = cm.listSelections() - var anchorIndex = editor.indexFromPos(_ranges[i].anchor) - var headIndex = editor.indexFromPos(_ranges[i].head) + let selection = cm.getRange(from, to) + let anchorIndex = editor.indexFromPos(ranges[i].anchor) + let headIndex = editor.indexFromPos(ranges[i].head) + cm.replaceRange(symbol + selection + symbol, from, to, '+input') if (anchorIndex > headIndex) { - _ranges[i].anchor.ch-- + ranges[i].anchor.ch+= symbol.length + ranges[i].head.ch+= symbol.length } else { - _ranges[i].head.ch-- + ranges[i].head.ch+= symbol.length + ranges[i].anchor.ch+= symbol.length } - cm.setSelections(_ranges) + cm.setSelections(ranges) } else { - var preEndPos = { + let preEndPos = { line: to.line, - ch: to.ch + 1 + ch: to.ch + symbol.length } - var preText = cm.getRange(to, preEndPos) - var preIndex = wrapSymbols.indexOf(preText) - var postEndPos = { + let preText = cm.getRange(to, preEndPos) + let preIndex = wrapSymbols.indexOf(preText) + let postEndPos = { line: from.line, - ch: from.ch - 1 + ch: from.ch - symbol.length } - var postText = cm.getRange(postEndPos, from) - var postIndex = wrapSymbols.indexOf(postText) + let postText = cm.getRange(postEndPos, from) + let postIndex = wrapSymbols.indexOf(postText) // check if surround symbol are list in array and matched if (preIndex > -1 && postIndex > -1 && preIndex === postIndex) { cm.replaceRange('', to, preEndPos, '+delete') @@ -46,3 +46,76 @@ export function wrapTextWith (editor, cm, symbol) { } } } + +export function insertText (cm, text, cursorEnd = 0) { + let cursor = cm.getCursor() + cm.replaceSelection(text, cursor, cursor) + cm.focus() + cm.setCursor({line: cursor.line, ch: cursor.ch + cursorEnd}) +} + +export function insertLink(cm, isImage) { + let cursor = cm.getCursor() + let ranges = cm.listSelections() + const linkEnd = '](https://)' + const symbol = (isImage) ? '![' : '[' + + for (let i = 0; i < ranges.length; i++) { + let range = ranges[i] + if (!range.empty()) { + const from = range.from() + const to = range.to() + let anchorIndex = editor.indexFromPos(ranges[i].anchor) + let headIndex = editor.indexFromPos(ranges[i].head) + let selection = cm.getRange(from, to) + selection = symbol + selection + linkEnd + cm.replaceRange(selection, from, to) + if (anchorIndex > headIndex) { + ranges[i].anchor.ch+= symbol.length + ranges[i].head.ch+= symbol.length + } else { + ranges[i].head.ch+= symbol.length + ranges[i].anchor.ch+= symbol.length + } + cm.setSelections(ranges) + } else { + cm.replaceRange(symbol + linkEnd, cursor, cursor) + cm.setCursor({line: cursor.line, ch: cursor.ch + symbol.length + linkend.length}) + } + } + cm.focus() +} + +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) { + let cursor = cm.getCursor() + let ranges = cm.listSelections() + + for (let i = 0; i < ranges.length; i++) { + let range = ranges[i] + if (!range.empty()) { + const from = range.from() + const to = range.to() + let selection = cm.getRange({line: from.line, ch: 0}, to) + selection = selection.replace(/\n/g, '\n' + symbol) + selection = symbol + selection + cm.replaceRange(selection, from, to) + } else { + cm.replaceRange(symbol, {line: cursor.line, ch: 0}, {line: cursor.line, ch: 0}) + } + } + cm.setCursor({line: cursor.line, ch: cursor.ch + symbol.length}) + cm.focus() +} |