Merge pull request #879 from xxdavid/feature-editor-line-lines

Make line numbers in the editor optional

browser/components/CodeEditor.js

@@ -53,7 +53,7 @@ export default class CodeEditor extends React.Component {
     this.value = this.props.value
     this.editor = CodeMirror(this.refs.root, {
       value: this.props.value,
-      lineNumbers: true,
+      lineNumbers: this.props.displayLineNumbers,
       lineWrapping: true,
       theme: this.props.theme,
       indentUnit: this.props.indentSize,
@@ -156,6 +156,10 @@ export default class CodeEditor extends React.Component {
       this.editor.setOption('indentWithTabs', this.props.indentType !== 'space')
     }
 
+    if (prevProps.displayLineNumbers !== this.props.displayLineNumbers) {
+      this.editor.setOption('lineNumbers', this.props.displayLineNumbers)
+    }
+
     if (prevProps.scrollPastEnd !== this.props.scrollPastEnd) {
       this.editor.setOption('scrollPastEnd', this.props.scrollPastEnd)
     }

browser/components/MarkdownEditor.js

@@ -242,6 +242,7 @@ class MarkdownEditor extends React.Component {
           fontSize={editorFontSize}
           indentType={config.editor.indentType}
           indentSize={editorIndentSize}
+          displayLineNumbers={config.editor.displayLineNumbers}
           scrollPastEnd={config.editor.scrollPastEnd}
           storageKey={storageKey}
           onChange={(e) => this.handleChange(e)}

browser/main/Detail/SnippetNoteDetail.js

@@ -564,6 +564,7 @@ class SnippetNoteDetail extends React.Component {
             fontSize={editorFontSize}
             indentType={config.editor.indentType}
             indentSize={editorIndentSize}
+            displayLineNumbers={config.editor.displayLineNumbers}
             keyMap={config.editor.keyMap}
             scrollPastEnd={config.editor.scrollPastEnd}
             onChange={(e) => this.handleCodeChange(index)(e)}

browser/main/lib/ConfigManager.js

@@ -34,6 +34,7 @@ export const DEFAULT_CONFIG = {
     fontFamily: win ? 'Segoe UI' : 'Monaco, Consolas',
     indentType: 'space',
     indentSize: '2',
+    displayLineNumbers: true,
     switchPreview: 'BLUR', // Available value: RIGHTCLICK, BLUR
     scrollPastEnd: false,
     type: 'SPLIT'

browser/main/modals/PreferencesModal/UiTab.js

@@ -73,6 +73,7 @@ class UiTab extends React.Component {
         fontFamily: this.refs.editorFontFamily.value,
         indentType: this.refs.editorIndentType.value,
         indentSize: this.refs.editorIndentSize.value,
+        displayLineNumbers: this.refs.editorDisplayLineNumbers.checked,
         switchPreview: this.refs.editorSwitchPreview.value,
         keyMap: this.refs.editorKeyMap.value,
         scrollPastEnd: this.refs.scrollPastEnd.checked
@@ -304,6 +305,17 @@ class UiTab extends React.Component {
             </div>
           </div>
 
+          <div styleName='group-checkBoxSection'>
+            <label>
+              <input onChange={(e) => this.handleUIChange(e)}
+                checked={this.state.config.editor.displayLineNumbers}
+                ref='editorDisplayLineNumbers'
+                type='checkbox'
+              />&nbsp;
+              Show line numbers in the editor
+            </label>
+          </div>
+
           <div styleName='group-checkBoxSection'>
             <label>
               <input onChange={(e) => this.handleUIChange(e)}
@@ -315,6 +327,7 @@ class UiTab extends React.Component {
             </label>
           </div>
 
+
           <div styleName='group-header2'>Preview</div>
           <div styleName='group-section'>
             <div styleName='group-section-label'>