Issue #2469 almost done, missing refactor to reduce calls on code mirror

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)
     }
@@ -214,6 +215,7 @@ export default class CodeEditor extends React.Component {
     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,6 +319,8 @@ export default class CodeEditor extends React.Component {
     this.setState({
       clientWidth: this.refs.root.clientWidth
     })
+
+    this.initialHighlighting()    
   }
 
   expandSnippet (line, cursor, cm, snippets) {    
@@ -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 {

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:[],
         }
       ]
     })

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 {
           : <CodeEditor styleName='tabView-content'
             mode={snippet.mode}
             value={snippet.content}
+            linesHighlighted={snippet.linesHighlighted}
             theme={config.editor.theme}
             fontFamily={config.editor.fontFamily}
             fontSize={editorFontSize}

browser/main/lib/dataApi/createNote.js

@@ -23,7 +23,8 @@ function validateInput (input) {
         input.snippets = [{
           name: '',
           mode: 'text',
-          content: ''
+          content: '',
+          linesHighlighted:[],
         }]
       }
       break

browser/main/lib/dataApi/updateNote.js

@@ -51,7 +51,8 @@ function validateInput (input) {
           validatedInput.snippets = [{
             name: '',
             mode: 'text',
-            content: ''
+            content: '',
+            linesHighlighted:[],
           }]
         } else {
           validatedInput.snippets = input.snippets
@@ -96,7 +97,8 @@ function updateNote (storageKey, noteKey, input) {
             snippets: [{
               name: '',
               mode: 'text',
-              content: ''
+              content: '',
+              linesHighlighted:[],
             }]
           }
           : {

browser/main/lib/dataApi/updateSnippet.js

@@ -12,7 +12,8 @@ function updateSnippet (snippet, snippetFile) {
         if (
           currentSnippet.name === snippet.name &&
           currentSnippet.prefix === snippet.prefix &&
-          currentSnippet.content === snippet.content
+          currentSnippet.content === snippet.content && 
+          currentSnippet.linesHighlighted===snippet.linesHighlighted 
         ) {
           // if everything is the same then don't write to disk
           resolve(snippets)
@@ -20,6 +21,7 @@ function updateSnippet (snippet, snippetFile) {
           currentSnippet.name = snippet.name
           currentSnippet.prefix = snippet.prefix
           currentSnippet.content = snippet.content
+          currentSnippet.linesHighlighted = (snippet.linesHighlighted)
           fs.writeFile(snippetFile || consts.SNIPPET_FILE, JSON.stringify(snippets, null, 4), (err) => {
             if (err) reject(err)
             resolve(snippets)