allow users to enable/disable editor rulers. default: disable

browser/components/CodeEditor.js

@@ -14,7 +14,8 @@ const { ipcRenderer } = require('electron')
 CodeMirror.modeURL = '../node_modules/codemirror/mode/%N/%N.js'
 
 const defaultEditorFontFamily = ['Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', 'monospace']
-const buildCMRulers = rulers => rulers.map(ruler => ({ column: ruler }))
+const buildCMRulers = (rulers, enableRulers) =>
+  enableRulers ? rulers.map(ruler => ({ column: ruler })) : []
 
 function pass (name) {
   switch (name) {
@@ -92,11 +93,11 @@ export default class CodeEditor extends React.Component {
   }
 
   componentDidMount () {
-    const { rulers } = this.props
+    const { rulers, enableRulers } = this.props
     this.value = this.props.value
 
     this.editor = CodeMirror(this.refs.root, {
-      rulers: buildCMRulers(rulers),
+      rulers: buildCMRulers(rulers, enableRulers),
       value: this.props.value,
       lineNumbers: this.props.displayLineNumbers,
       lineWrapping: true,
@@ -184,6 +185,7 @@ export default class CodeEditor extends React.Component {
 
   componentDidUpdate (prevProps, prevState) {
     let needRefresh = false
+    const { rulers, enableRulers } = this.props
     if (prevProps.mode !== this.props.mode) {
       this.setMode(this.props.mode)
     }
@@ -201,8 +203,8 @@ export default class CodeEditor extends React.Component {
       needRefresh = true
     }
 
-    if (prevProps.rulers !== this.props.rulers) {
-      this.editor.setOption('rulers', buildCMRulers(this.props.rulers))
+    if (prevProps.enableRulers !== enableRulers || prevProps.rulers !== rulers) {
+      this.editor.setOption('rulers', buildCMRulers(rulers, enableRulers))
     }
 
     if (prevProps.indentSize !== this.props.indentSize) {
@@ -414,6 +416,7 @@ export default class CodeEditor extends React.Component {
 
 CodeEditor.propTypes = {
   value: PropTypes.string,
+  enableRulers: PropTypes.bool,
   rulers: PropTypes.arrayOf(Number),
   mode: PropTypes.string,
   className: PropTypes.string,

browser/components/MarkdownEditor.js

@@ -258,6 +258,7 @@ class MarkdownEditor extends React.Component {
           fontSize={editorFontSize}
           indentType={config.editor.indentType}
           indentSize={editorIndentSize}
+          enableRulers={config.editor.enableRulers}
           rulers={config.editor.rulers}
           displayLineNumbers={config.editor.displayLineNumbers}
           scrollPastEnd={config.editor.scrollPastEnd}

browser/components/MarkdownSplitEditor.js

@@ -110,6 +110,7 @@ class MarkdownSplitEditor extends React.Component {
           displayLineNumbers={config.editor.displayLineNumbers}
           indentType={config.editor.indentType}
           indentSize={editorIndentSize}
+          enableRulers={config.editor.enableRulers}
           rulers={config.editor.rulers}
           scrollPastEnd={config.editor.scrollPastEnd}
           fetchUrlTitle={config.editor.fetchUrlTitle}

browser/main/lib/ConfigManager.js

@@ -35,6 +35,7 @@ export const DEFAULT_CONFIG = {
     fontFamily: win ? 'Segoe UI' : 'Monaco, Consolas',
     indentType: 'space',
     indentSize: '2',
+    enableRulers: false,
     rulers: [80, 120],
     displayLineNumbers: true,
     switchPreview: 'BLUR', // Available value: RIGHTCLICK, BLUR

browser/main/modals/PreferencesModal/UiTab.js

@@ -75,6 +75,7 @@ class UiTab extends React.Component {
         fontFamily: this.refs.editorFontFamily.value,
         indentType: this.refs.editorIndentType.value,
         indentSize: this.refs.editorIndentSize.value,
+        enableRulers: this.refs.enableEditorRulers.value === 'true',
         rulers: this.refs.editorRulers.value.replace(/[^0-9,]/g, '').split(','),
         displayLineNumbers: this.refs.editorDisplayLineNumbers.checked,
         switchPreview: this.refs.editorSwitchPreview.value,
@@ -152,6 +153,7 @@ class UiTab extends React.Component {
     const themes = consts.THEMES
     const { config, codemirrorTheme } = this.state
     const codemirrorSampleCode = 'function iamHappy (happy) {\n\tif (happy) {\n\t  console.log("I am Happy!")\n\t} else {\n\t  console.log("I am not Happy!")\n\t}\n};'
+    const enableEditRulersStyle = config.editor.enableRulers ? 'block' : 'none'
     return (
       <div styleName='root'>
         <div styleName='group'>
@@ -309,7 +311,21 @@ class UiTab extends React.Component {
               {i18n.__('Editor Rulers')}
             </div>
             <div styleName='group-section-control'>
+              <div>
+                <select value={config.editor.enableRulers}
+                  ref='enableEditorRulers'
+                  onChange={(e) => this.handleUIChange(e)}
+                >
+                  <option value='true'>
+                    {i18n.__('Enable')}
+                  </option>
+                  <option value='false'>
+                    {i18n.__('Disable')}
+                  </option>
+                </select>
+              </div>
               <input styleName='group-section-control-input'
+                style={{ display: enableEditRulersStyle }}
                 ref='editorRulers'
                 value={config.editor.rulers}
                 onChange={(e) => this.handleUIChange(e)}