added highlight current line option

browser/lib/config-manager.js

@@ -28,7 +28,8 @@ const DEFAULT_CONFIG = {
     fontFamily: 'Fira Code, Consolas, sans-serif',
     fontSize: 18,
     indentUsingTab: false,
-    tabSize: 2
+    tabSize: 2,
+    highlightCurrentLine: true
   },
   keyboard: {
     createSnippet: OSX ? 'Cmd + N' : 'Ctrl + N',

browser/render/components/code-editor/index.jsx

@@ -17,7 +17,7 @@ export default class CodeEditor extends React.Component {
   initSingleFileSnippetEditor () {
     const { config, snippet } = this.props
     if (snippet) {
-      const { theme, showLineNumber } = config.editor
+      const { theme, showLineNumber, highlightCurrentLine } = config.editor
       const snippetMode = CodeMirror.findModeByName(snippet.lang).mode
       require(`codemirror/mode/${snippetMode}/${snippetMode}`)
       const gutters = showLineNumber
@@ -32,9 +32,13 @@ export default class CodeEditor extends React.Component {
         gutters: gutters,
         readOnly: true,
         autoCloseBrackets: true,
-        autoRefresh: true,
-        styleActiveLine: { nonEmpty: false }
+        autoRefresh: true
       })
+      if (highlightCurrentLine) {
+        this.editor.setOption('styleActiveLine', { nonEmpty: false })
+      } else {
+        this.editor.setOption('styleActiveLine', null)
+      }
       this.editor.setSize('100%', 'auto')
       this.applyEditorStyleSingleFile()
     }
@@ -47,7 +51,13 @@ export default class CodeEditor extends React.Component {
       handleEditingFileValueChange,
       selectedFile
     } = this.props
-    const { theme, showLineNumber, tabSize, indentUsingTab } = config.editor
+    const {
+      theme,
+      showLineNumber,
+      tabSize,
+      indentUsingTab,
+      highlightCurrentLine
+    } = config.editor
     const file = snippet.files[selectedFile]
     const fileExtension = getExtension(file.name)
     const resultMode = CodeMirror.findModeByExtension(fileExtension)
@@ -70,10 +80,14 @@ export default class CodeEditor extends React.Component {
       gutters: gutters,
       readOnly: true,
       autoCloseBrackets: true,
-      autoRefresh: true,
-      styleActiveLine: { nonEmpty: false }
+      autoRefresh: true
     })
 
+    if (highlightCurrentLine) {
+      this.editor.setOption('styleActiveLine', { nonEmpty: false })
+    } else {
+      this.editor.setOption('styleActiveLine', null)
+    }
     this.editor.setOption('indentUnit', tabSize)
     this.editor.setOption('tabSize', tabSize)
     this.editor.setOption('indentWithTabs', indentUsingTab)
@@ -132,7 +146,8 @@ export default class CodeEditor extends React.Component {
       fontFamily,
       fontSize,
       tabSize,
-      indentUsingTab
+      indentUsingTab,
+      highlightCurrentLine
     } = config.editor
     // only update codemirror mode if new props is passed
     if (props) {
@@ -152,6 +167,12 @@ export default class CodeEditor extends React.Component {
     this.editor.setOption('tabSize', tabSize)
     this.editor.setOption('indentWithTabs', indentUsingTab)
 
+    if (highlightCurrentLine) {
+      this.editor.setOption('styleActiveLine', { nonEmpty: false })
+    } else {
+      this.editor.setOption('styleActiveLine', null)
+    }
+
     const wrapperElement = this.editor.getWrapperElement()
     wrapperElement.style.fontFamily = fontFamily
     if (this.props.maxHeight) {
@@ -172,7 +193,8 @@ export default class CodeEditor extends React.Component {
       fontFamily,
       fontSize,
       tabSize,
-      indentUsingTab
+      indentUsingTab,
+      highlightCurrentLine
     } = config.editor
     const gutters = showLineNumber
       ? ['CodeMirror-linenumbers', 'CodeMirror-foldgutter']
@@ -189,6 +211,12 @@ export default class CodeEditor extends React.Component {
       }
     }
 
+    if (highlightCurrentLine) {
+      this.editor.setOption('styleActiveLine', { nonEmpty: false })
+    } else {
+      this.editor.setOption('styleActiveLine', null)
+    }
+
     this.editor.getWrapperElement().style.fontSize = `${fontSize}px`
     this.editor.setOption('lineNumbers', showLineNumber)
     this.editor.setOption('foldGutter', showLineNumber)

browser/render/modals/setting/tabs/editor.jsx

@@ -8,7 +8,12 @@ import i18n from 'render/lib/i18n'
 export default class EditorTab extends React.Component {
   componentDidMount () {
     const { config } = this.props
-    const { showLineNumber, theme, fontFamily } = config.editor
+    const {
+      showLineNumber,
+      theme,
+      fontFamily,
+      highlightCurrentLine
+    } = config.editor
     const sampleCode = `const number = 1
 if (number == 1) {
   console.log(number * 2)
@@ -27,6 +32,12 @@ if (number == 1) {
         : []
     })
 
+    if (highlightCurrentLine) {
+      this.editor.setOption('styleActiveLine', { nonEmpty: false })
+    } else {
+      this.editor.setOption('styleActiveLine', null)
+    }
+
     this.editor.getWrapperElement().style.fontFamily = fontFamily
 
     this.editor.setSize('100%', '100%')
@@ -49,6 +60,15 @@ if (number == 1) {
     this.editor.setOption('theme', newTheme)
   }
 
+  highlightCurrentLine () {
+    const highlightCurrentLine = this.refs.highlightCurrentLine.checked
+    if (highlightCurrentLine) {
+      this.editor.setOption('styleActiveLine', { nonEmpty: false })
+    } else {
+      this.editor.setOption('styleActiveLine', null)
+    }
+  }
+
   saveSetting () {
     const newSetting = {
       editor: {
@@ -57,7 +77,8 @@ if (number == 1) {
         fontFamily: this.refs.fontFamily.value,
         fontSize: this.refs.fontSize.value,
         indentUsingTab: this.refs.indentStyle.value === 'tab',
-        tabSize: this.refs.tabSize.value
+        tabSize: this.refs.tabSize.value,
+        highlightCurrentLine: this.refs.highlightCurrentLine.checked
       }
     }
 
@@ -86,6 +107,17 @@ if (number == 1) {
               {i18n.__('Show line number')}
             </label>
           </div>
+          <div className="group-checkbox">
+            <label>
+              <input
+                type="checkbox"
+                defaultChecked={editorConf.highlightCurrentLine}
+                onChange={this.highlightCurrentLine.bind(this)}
+                ref="highlightCurrentLine"
+              />
+              {i18n.__('Highlight current line')}
+            </label>
+          </div>
           <div className="input-group">
             <label>{i18n.__('Theme')}</label>
             <select

languages/en.json

@@ -67,5 +67,6 @@
   "discard changes": "discard changes",
   "Are you sure to delete this file?": "Are you sure to delete this file?",
   "Pick a snippet from list": "Pick a snippet from list",
-  "Snippet list layout": "Snippet list layout"
+  "Snippet list layout": "Snippet list layout",
+  "Highlight current line": "Highlight current line"
 }

languages/vi.json

@@ -65,5 +65,6 @@
   "discard changes": "Hủy thay đổi",
   "Are you sure to delete this file?": "Bạn có chắc muốn xóa file này?",
   "Pick a snippet from list": "Chọn 1 snippet trong danh sách",
-  "Snippet list layout": "Bố cục danh sách snippet"
+  "Snippet list layout": "Bố cục danh sách snippet",
+  "Highlight current line": "Làm nổi dòng hiện tại"
 }