Merge pull request #1709 from rayou/add-editor-rulers

Added editor rulers

browser/components/CodeEditor.js

@@ -14,6 +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, enableRulers) =>
+  enableRulers ? rulers.map(ruler => ({ column: ruler })) : []
 
 function pass (name) {
   switch (name) {
@@ -91,9 +93,11 @@ export default class CodeEditor extends React.Component {
   }
 
   componentDidMount () {
+    const { rulers, enableRulers } = this.props
     this.value = this.props.value
 
     this.editor = CodeMirror(this.refs.root, {
+      rulers: buildCMRulers(rulers, enableRulers),
       value: this.props.value,
       lineNumbers: this.props.displayLineNumbers,
       lineWrapping: true,
@@ -181,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)
     }
@@ -198,6 +203,10 @@ export default class CodeEditor extends React.Component {
       needRefresh = true
     }
 
+    if (prevProps.enableRulers !== enableRulers || prevProps.rulers !== rulers) {
+      this.editor.setOption('rulers', buildCMRulers(rulers, enableRulers))
+    }
+
     if (prevProps.indentSize !== this.props.indentSize) {
       this.editor.setOption('indentUnit', this.props.indentSize)
       this.editor.setOption('tabSize', this.props.indentSize)
@@ -407,6 +416,8 @@ 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,
   onBlur: PropTypes.func,

browser/components/MarkdownEditor.js

@@ -258,6 +258,8 @@ 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}
           storageKey={storageKey}

browser/components/MarkdownSplitEditor.js

@@ -110,6 +110,8 @@ 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}
           storageKey={storageKey}

browser/main/lib/ConfigManager.js

@@ -35,6 +35,8 @@ 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
     scrollPastEnd: false,

browser/main/modals/PreferencesModal/UiTab.js

@@ -75,6 +75,8 @@ 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,
         keyMap: this.refs.editorKeyMap.value,
@@ -152,6 +154,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'>
@@ -305,6 +308,34 @@ class UiTab extends React.Component {
             </div>
           </div>
 
+          <div styleName='group-section'>
+            <div styleName='group-section-label'>
+              {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)}
+                type='text'
+              />
+            </div>
+          </div>
+
           <div styleName='group-section'>
             <div styleName='group-section-label'>
               {i18n.__('Switch to Preview')}

lib/main.html

@@ -57,6 +57,10 @@
     opacity: 1 !important;
     pointer-events: auto !important;
   }
+  .CodeMirror-ruler {
+    border-left-color: rgba(142, 142, 142, 0.5);
+    mix-blend-mode: difference;
+  }
   </style>
 </head>
 <body>
@@ -89,6 +93,7 @@
   <script src="../node_modules/codemirror/addon/search/matchesonscrollbar.js"></script>
   <script src="../node_modules/codemirror/addon/search/jump-to-line.js"></script>
   <script src="../node_modules/codemirror/addon/dialog/dialog.js"></script>
+  <script src="../node_modules/codemirror/addon/display/rulers.js"></script>
 
   <script src="../node_modules/raphael/raphael.min.js"></script>
   <script src="../node_modules/flowchart.js/release/flowchart.min.js"></script>

locales/da.json

@@ -142,8 +142,12 @@
 	"Spanish": "Spanish",
 	"You have to save!": "You have to save!",
 	"Russian": "Russian",
+	"Command(⌘)": "Command(⌘)",
+	"Editor Rulers": "Editor Rulers",
+	"Enable": "Enable",
+	"Disable": "Disable",
 	"Sanitization": "Sanitization",
 	"Only allow secure html tags (recommended)": "Only allow secure html tags (recommended)",
 	"Allow styles": "Allow styles",
 	"Allow dangerous html tags": "Allow dangerous html tags"
-}
+}

locales/de.json

@@ -144,8 +144,12 @@
 	"UserName": "UserName",
 	"Password": "Password",
 	"Russian": "Russian",
+	"Command(⌘)": "Command(⌘)",
+	"Editor Rulers": "Editor Rulers",
+	"Enable": "Enable",
+	"Disable": "Disable",
 	"Sanitization": "Sanitization",
 	"Only allow secure html tags (recommended)": "Only allow secure html tags (recommended)",
 	"Allow styles": "Allow styles",
 	"Allow dangerous html tags": "Allow dangerous html tags"
-}
+}

locales/en.json

@@ -145,6 +145,9 @@
 	"Password": "Password",
 	"Russian": "Russian",
 	"Command(⌘)": "Command(⌘)",
+	"Editor Rulers": "Editor Rulers",
+	"Enable": "Enable",
+	"Disable": "Disable",
 	"Sanitization": "Sanitization",
 	"Only allow secure html tags (recommended)": "Only allow secure html tags (recommended)",
 	"Allow styles": "Allow styles",

locales/es.json

@@ -142,8 +142,12 @@
 	"Spanish": "Spanish",
 	"You have to save!": "You have to save!",
 	"Russian": "Russian",
+	"Command(⌘)": "Command(⌘)",
+	"Editor Rulers": "Editor Rulers",
+	"Enable": "Enable",
+	"Disable": "Disable",
 	"Sanitization": "Sanitization",
 	"Only allow secure html tags (recommended)": "Only allow secure html tags (recommended)",
 	"Allow styles": "Allow styles",
 	"Allow dangerous html tags": "Allow dangerous html tags"
-}
+}

locales/fr.json

@@ -141,9 +141,13 @@
 	"Spanish": "Espagnol",
 	"You have to save!": "Il faut sauvegarder !",
 	"Russian": "Russian",
+	"Command(⌘)": "Command(⌘)",
+	"Editor Rulers": "Editor Rulers",
+	"Enable": "Enable",
+	"Disable": "Disable",
 	"Allow preview to scroll past the last line": "Allow preview to scroll past the last line",
 	"Sanitization": "Sanitization",
 	"Only allow secure html tags (recommended)": "Only allow secure html tags (recommended)",
 	"Allow styles": "Allow styles",
 	"Allow dangerous html tags": "Allow dangerous html tags"
-}
+}

locales/ja.json

@@ -142,8 +142,12 @@
 	"Spanish": "Spanish",
 	"You have to save!": "You have to save!",
 	"Russian": "Russian",
+	"Command(⌘)": "Command(⌘)",
+	"Editor Rulers": "Editor Rulers",
+	"Enable": "Enable",
+	"Disable": "Disable",
 	"Sanitization": "Sanitization",
 	"Only allow secure html tags (recommended)": "Only allow secure html tags (recommended)",
 	"Allow styles": "Allow styles",
 	"Allow dangerous html tags": "Allow dangerous html tags"
-}
+}

locales/ko.json

@@ -149,8 +149,11 @@
 	"Password": "패스워드",
 	"Storage": "저장소",
 	"Hotkeys": "단축키",
+	"Editor Rulers": "Editor Rulers",
+	"Enable": "Enable",
+	"Disable": "Disable",
 	"Sanitization": "허용 태그 범위",
 	"Only allow secure html tags (recommended)": "안전한 HTML 태그만 허용 (추천)",
 	"Allow styles": "style 태그, 속성까지 허용",
 	"Allow dangerous html tags": "모든 위험한 태그 허용"
-}
+}

locales/no.json

@@ -142,8 +142,11 @@
 	"Spanish": "Spanish",
 	"You have to save!": "You have to save!",
 	"Russian": "Russian",
+	"Editor Rulers": "Editor Rulers",
+	"Enable": "Enable",
+	"Disable": "Disable",
 	"Sanitization": "Sanitization",
 	"Only allow secure html tags (recommended)": "Only allow secure html tags (recommended)",
 	"Allow styles": "Allow styles",
 	"Allow dangerous html tags": "Allow dangerous html tags"
-}
+}

locales/pl.json

@@ -142,8 +142,11 @@
 	"Spanish": "Spanish",
 	"You have to save!": "You have to save!",
 	"Russian": "Russian",
+	"Editor Rulers": "Editor Rulers",
+	"Enable": "Enable",
+	"Disable": "Disable",
 	"Sanitization": "Sanitization",
 	"Only allow secure html tags (recommended)": "Only allow secure html tags (recommended)",
 	"Allow styles": "Allow styles",
 	"Allow dangerous html tags": "Allow dangerous html tags"
-}
+}

locales/pt.json

@@ -142,8 +142,11 @@
 	"Spanish": "Spanish",
 	"You have to save!": "You have to save!",
 	"Russian": "Russian",
+	"Editor Rulers": "Editor Rulers",
+	"Enable": "Enable",
+	"Disable": "Disable",
 	"Sanitization": "Sanitization",
 	"Only allow secure html tags (recommended)": "Only allow secure html tags (recommended)",
 	"Allow styles": "Allow styles",
 	"Allow dangerous html tags": "Allow dangerous html tags"
-}
+}

locales/ru.json

@@ -143,5 +143,8 @@
 	"You have to save!": "Нужно сохранить!",
 	"UserName": "Имя пользователя",
 	"Password": "Пароль",
-	"Russian": "Русский"
+	"Russian": "Русский",
+	"Editor Rulers": "Editor Rulers",
+	"Enable": "Enable",
+	"Disable": "Disable"
 }

locales/sq.json

@@ -142,8 +142,11 @@
 	"Spanish": "Spanish",
 	"You have to save!": "You have to save!",
 	"Russian": "Russian",
+	"Editor Rulers": "Editor Rulers",
+	"Enable": "Enable",
+	"Disable": "Disable",
 	"Sanitization": "Sanitization",
 	"Only allow secure html tags (recommended)": "Only allow secure html tags (recommended)",
 	"Allow styles": "Allow styles",
 	"Allow dangerous html tags": "Allow dangerous html tags"
-}
+}

locales/zh-CN.json

@@ -142,8 +142,11 @@
 	"Spanish": "Spanish",
 	"You have to save!": "You have to save!",
 	"Russian": "Russian",
+	"Editor Rulers": "Editor Rulers",
+	"Enable": "Enable",
+	"Disable": "Disable",
 	"Sanitization": "Sanitization",
 	"Only allow secure html tags (recommended)": "Only allow secure html tags (recommended)",
 	"Allow styles": "Allow styles",
 	"Allow dangerous html tags": "Allow dangerous html tags"
-}
+}

locales/zh-TW.json

@@ -142,8 +142,11 @@
 	"Spanish": "Spanish",
 	"You have to save!": "You have to save!",
 	"Russian": "Russian",
+	"Editor Rulers": "Editor Rulers",
+	"Enable": "Enable",
+	"Disable": "Disable",
 	"Sanitization": "Sanitization",
 	"Only allow secure html tags (recommended)": "Only allow secure html tags (recommended)",
 	"Allow styles": "Allow styles",
 	"Allow dangerous html tags": "Allow dangerous html tags"
-}
+}