From 281fb2afd32e7ffa005f480d6b6dca58220b6be9 Mon Sep 17 00:00:00 2001
From: Yu-Hung Ou <xanatosou@gmail.com>
Date: Tue, 20 Mar 2018 20:44:44 +1100
Subject: [PATCH] added CodeMirror ruler support

---
 browser/components/CodeEditor.js          | 8 ++++++++
 browser/components/MarkdownEditor.js      | 1 +
 browser/components/MarkdownSplitEditor.js | 1 +
 lib/main.html                             | 1 +
 4 files changed, 11 insertions(+)

diff --git a/browser/components/CodeEditor.js b/browser/components/CodeEditor.js
index 0ad4f39a..fe7a0b10 100644
--- a/browser/components/CodeEditor.js
+++ b/browser/components/CodeEditor.js
@@ -14,6 +14,7 @@ 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 }))
 
 function pass (name) {
   switch (name) {
@@ -91,9 +92,11 @@ export default class CodeEditor extends React.Component {
   }
 
   componentDidMount () {
+    const { rulers } = this.props
     this.value = this.props.value
 
     this.editor = CodeMirror(this.refs.root, {
+      rulers: buildCMRulers(rulers),
       value: this.props.value,
       lineNumbers: this.props.displayLineNumbers,
       lineWrapping: true,
@@ -198,6 +201,10 @@ 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.indentSize !== this.props.indentSize) {
       this.editor.setOption('indentUnit', this.props.indentSize)
       this.editor.setOption('tabSize', this.props.indentSize)
@@ -407,6 +414,7 @@ export default class CodeEditor extends React.Component {
 
 CodeEditor.propTypes = {
   value: PropTypes.string,
+  rulers: PropTypes.arrayOf(Number),
   mode: PropTypes.string,
   className: PropTypes.string,
   onBlur: PropTypes.func,
diff --git a/browser/components/MarkdownEditor.js b/browser/components/MarkdownEditor.js
index d0e2f505..e35c4c21 100644
--- a/browser/components/MarkdownEditor.js
+++ b/browser/components/MarkdownEditor.js
@@ -258,6 +258,7 @@ class MarkdownEditor extends React.Component {
           fontSize={editorFontSize}
           indentType={config.editor.indentType}
           indentSize={editorIndentSize}
+          rulers={config.editor.rulers}
           displayLineNumbers={config.editor.displayLineNumbers}
           scrollPastEnd={config.editor.scrollPastEnd}
           storageKey={storageKey}
diff --git a/browser/components/MarkdownSplitEditor.js b/browser/components/MarkdownSplitEditor.js
index 0aa2d16c..3b8cd768 100644
--- a/browser/components/MarkdownSplitEditor.js
+++ b/browser/components/MarkdownSplitEditor.js
@@ -110,6 +110,7 @@ class MarkdownSplitEditor extends React.Component {
           displayLineNumbers={config.editor.displayLineNumbers}
           indentType={config.editor.indentType}
           indentSize={editorIndentSize}
+          rulers={config.editor.rulers}
           scrollPastEnd={config.editor.scrollPastEnd}
           fetchUrlTitle={config.editor.fetchUrlTitle}
           storageKey={storageKey}
diff --git a/lib/main.html b/lib/main.html
index dbb61b75..24accf36 100644
--- a/lib/main.html
+++ b/lib/main.html
@@ -89,6 +89,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>