Feature - Line highlighting within code block #2469

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,25 @@ export default class CodeEditor extends React.Component {
     }
   }
 
+  handleHighlight (editor, changeObject) {
+    const lines = editor.options.linesHighlighted
+
+    if (lines == null) {
+      return
+    }
+
+    if (!lines.includes(changeObject)) {
+      lines.push(changeObject)
+      editor.addLineClass(changeObject, 'text', 'CodeMirror-activeline-background')
+    } else {
+      lines.splice(lines.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 +560,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()
   }
@@ -683,6 +708,24 @@ export default class CodeEditor extends React.Component {
     })
   }
 
+  initialHighlighting () {
+    if (this.editor.options.linesHighlighted == null) {
+      return
+    }
+
+    const count = this.editor.lineCount()
+    for (let i = 0; i < count; i++) {
+      if (this.editor.options.linesHighlighted.includes(i)) {
+        this.editor.addLineClass(i, 'text', 'CodeMirror-activeline-background')
+      }
+    }
+  }
+
+  restartHighlighting () {
+    this.editor.options.linesHighlighted = this.props.linesHighlighted
+    this.initialHighlighting()
+  }
+
   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,14 +12,16 @@ 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)
         } else {
           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)