diff --git a/browser/components/CodeEditor.js b/browser/components/CodeEditor.js index 130cc86e..2ceca341 100644 --- a/browser/components/CodeEditor.js +++ b/browser/components/CodeEditor.js @@ -34,6 +34,7 @@ export default class CodeEditor extends React.Component { trailing: true }) this.changeHandler = (editor, changeObject) => this.handleChange(editor, changeObject) + this.highlightHandler = (editor, changeObject) => this.handleHighlight(editor, changeObject) this.focusHandler = () => { ipcRenderer.send('editor:focused', true) } @@ -208,12 +209,13 @@ export default class CodeEditor extends React.Component { } return CodeMirror.Pass } - }) + }) this.value = this.props.value this.editor = CodeMirror(this.refs.root, { rulers: buildCMRulers(rulers, enableRulers), value: this.props.value, + linesHighlighted:this.props.linesHighlighted, lineNumbers: this.props.displayLineNumbers, lineWrapping: true, theme: this.props.theme, @@ -240,6 +242,7 @@ export default class CodeEditor extends React.Component { this.editor.on('focus', this.focusHandler) this.editor.on('blur', this.blurHandler) this.editor.on('change', this.changeHandler) + this.editor.on("gutterClick",this.highlightHandler) this.editor.on('paste', this.pasteHandler) this.editor.on('contextmenu', this.contextMenuHandler) eventEmitter.on('top:search', this.searchHandler) @@ -316,9 +319,11 @@ export default class CodeEditor extends React.Component { this.setState({ clientWidth: this.refs.root.clientWidth }) + + this.initialHighlighting() } - expandSnippet (line, cursor, cm, snippets) { + expandSnippet (line, cursor, cm, snippets) { const wordBeforeCursor = this.getWordBeforeCursor( line, cursor.line, @@ -512,6 +517,19 @@ export default class CodeEditor extends React.Component { } } + handleHighlight (editor, changeObject) { + if(!editor.options.linesHighlighted.includes(changeObject)){ + editor.options.linesHighlighted.push(changeObject) + editor.addLineClass(changeObject,'text',"CodeMirror-activeline-background") + }else{ + editor.options.linesHighlighted.splice(editor.options.linesHighlighted.indexOf(changeObject),1) + editor.removeLineClass(changeObject,'text',"CodeMirror-activeline-background") + } + if (this.props.onChange) { + this.props.onChange(editor) + } + } + moveCursorTo (row, col) {} scrollToLine (event, num) { @@ -536,6 +554,7 @@ export default class CodeEditor extends React.Component { this.value = this.props.value this.editor.setValue(this.props.value) this.editor.clearHistory() + this.restartHighlighting() this.editor.on('change', this.changeHandler) this.editor.refresh() } @@ -546,6 +565,11 @@ export default class CodeEditor extends React.Component { this.editor.setCursor(cursor) } + restartHighlighting(){ + this.editor.options.linesHighlighted = this.props.linesHighlighted + this.initialHighlighting(); + } + handleDropImage (dropEvent) { dropEvent.preventDefault() const { storageKey, noteKey } = this.props @@ -683,6 +707,15 @@ export default class CodeEditor extends React.Component { }) } + initialHighlighting(){ + var count = this.editor.lineCount(), i; + for (i = 0; i < count; i++) { + if(this.editor.options.linesHighlighted.includes(i)){ + this.editor.addLineClass(i,'text',"CodeMirror-activeline-background") + } + } + } + mapImageResponse (response, pastedTxt) { return new Promise((resolve, reject) => { try { diff --git a/browser/lib/newNote.js b/browser/lib/newNote.js index 0b64d0e1..9b701a02 100644 --- a/browser/lib/newNote.js +++ b/browser/lib/newNote.js @@ -56,7 +56,8 @@ export function createSnippetNote (storage, folder, dispatch, location, params, { name: '', mode: config.editor.snippetDefaultLanguage || 'text', - content: '' + content: '', + linesHighlighted:[], } ] }) diff --git a/browser/main/Detail/SnippetNoteDetail.js b/browser/main/Detail/SnippetNoteDetail.js index 4a38ffe5..b8d0fe5b 100644 --- a/browser/main/Detail/SnippetNoteDetail.js +++ b/browser/main/Detail/SnippetNoteDetail.js @@ -410,6 +410,8 @@ class SnippetNoteDetail extends React.Component { return (e) => { const snippets = this.state.note.snippets.slice() snippets[index].content = this.refs['code-' + index].value + snippets[index].linesHighlighted=e.options.linesHighlighted + this.setState(state => ({note: Object.assign(state.note, {snippets: snippets})})) this.setState(state => ({ note: state.note @@ -602,7 +604,8 @@ class SnippetNoteDetail extends React.Component { note.snippets = note.snippets.concat([{ name: '', mode: config.editor.snippetDefaultLanguage || 'text', - content: '' + content: '', + linesHighlighted:[] }]) const snippetIndex = note.snippets.length - 1 @@ -705,6 +708,7 @@ class SnippetNoteDetail extends React.Component { : { if (err) reject(err) resolve(snippets)