diff --git a/public/js/index.js b/public/js/index.js index 5e0aded..6e13fe9 100644 --- a/public/js/index.js +++ b/public/js/index.js @@ -30,8 +30,6 @@ import { import { debug, DROPBOX_APP_KEY, - GOOGLE_API_KEY, - GOOGLE_CLIENT_ID, noteid, noteurl, urlpath, @@ -569,9 +567,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() + 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') if (scrollbarStyle === 'overlay' || appState.currentMode === modeType.both) { ui.area.codemirrorScroll.css('height', desireHeight + 'px') diff --git a/public/js/lib/editor/index.js b/public/js/lib/editor/index.js index cb9192b..0537e92 100644 --- a/public/js/lib/editor/index.js +++ b/public/js/lib/editor/index.js @@ -139,13 +139,10 @@ 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' + position: 'top' }) - var insertDemo = $('#insertDemo') var makeBold = $('#makeBold') var makeItalic = $('#makeItalic') var makeStrike = $('#makeStrike') @@ -162,18 +159,18 @@ export default class Editor { var makeComment = $('#makeComment') makeBold.click(() => { - utils.wrapTextWith(this.editor, this.editor, '**') - this.editor.focus() + utils.wrapTextWith(this.editor, this.editor, '**') + this.editor.focus() }) makeItalic.click(() => { - utils.wrapTextWith(this.editor, this.editor, '*') - this.editor.focus() + utils.wrapTextWith(this.editor, this.editor, '*') + this.editor.focus() }) makeStrike.click(() => { - utils.wrapTextWith(this.editor, this.editor, '~~') - this.editor.focus() + utils.wrapTextWith(this.editor, this.editor, '~~') + this.editor.focus() }) makeHeader.click(() => { @@ -182,7 +179,7 @@ export default class Editor { makeCode.click(() => { utils.wrapTextWith(this.editor, this.editor, '```') - this.editor.focus() + this.editor.focus() }) makeQuote.click(() => { @@ -202,11 +199,11 @@ export default class Editor { }) makeLink.click(() => { - utils.insertText(this.editor, '[](https://)', 1) + utils.insertLink(this.editor, false) }) makeImage.click(() => { - utils.insertText(this.editor, '![](https://)', 4) + utils.insertLink(this.editor, true) }) makeTable.click(() => { @@ -218,9 +215,8 @@ export default class Editor { }) makeComment.click(() => { - utils.insertText(this.editor, '> []', 4) + utils.insertText(this.editor, '> []') }) - } addStatusBar () { diff --git a/public/js/lib/editor/utils.js b/public/js/lib/editor/utils.js index f1053c4..3367088 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') @@ -48,12 +48,44 @@ export function wrapTextWith (editor, cm, symbol) { } export function insertText (cm, text, cursorEnd = 0) { - var cursor = cm.getCursor() + 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} @@ -67,22 +99,23 @@ export function insertHeader (cm) { cm.focus() } -export function insertOnStartOfLines (cm, symbol, cursorEnd) { +export function insertOnStartOfLines (cm, symbol) { let cursor = cm.getCursor() - var ranges = cm.listSelections() + let ranges = cm.listSelections() for (let i = 0; i < ranges.length; i++) { - var range = ranges[i] + let 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}) - } + 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: (cursorEnd)? cursorEnd : cursor.ch}) + cm.setCursor({line: cursor.line, ch: cursor.ch + symbol.length}) cm.focus() }