1
0
mirror of https://github.com/BoostIo/Boostnote synced 2025-12-13 17:56:25 +00:00

added CodeMirror ruler support

This commit is contained in:
Yu-Hung Ou
2018-03-20 20:44:44 +11:00
parent fbb7839f83
commit 281fb2afd3
4 changed files with 11 additions and 0 deletions

View File

@@ -14,6 +14,7 @@ const { ipcRenderer } = require('electron')
CodeMirror.modeURL = '../node_modules/codemirror/mode/%N/%N.js' CodeMirror.modeURL = '../node_modules/codemirror/mode/%N/%N.js'
const defaultEditorFontFamily = ['Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', 'monospace'] const defaultEditorFontFamily = ['Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', 'monospace']
const buildCMRulers = rulers => rulers.map(ruler => ({ column: ruler }))
function pass (name) { function pass (name) {
switch (name) { switch (name) {
@@ -91,9 +92,11 @@ export default class CodeEditor extends React.Component {
} }
componentDidMount () { componentDidMount () {
const { rulers } = this.props
this.value = this.props.value this.value = this.props.value
this.editor = CodeMirror(this.refs.root, { this.editor = CodeMirror(this.refs.root, {
rulers: buildCMRulers(rulers),
value: this.props.value, value: this.props.value,
lineNumbers: this.props.displayLineNumbers, lineNumbers: this.props.displayLineNumbers,
lineWrapping: true, lineWrapping: true,
@@ -198,6 +201,10 @@ export default class CodeEditor extends React.Component {
needRefresh = true needRefresh = true
} }
if (prevProps.rulers !== this.props.rulers) {
this.editor.setOption('rulers', buildCMRulers(this.props.rulers))
}
if (prevProps.indentSize !== this.props.indentSize) { if (prevProps.indentSize !== this.props.indentSize) {
this.editor.setOption('indentUnit', this.props.indentSize) this.editor.setOption('indentUnit', this.props.indentSize)
this.editor.setOption('tabSize', this.props.indentSize) this.editor.setOption('tabSize', this.props.indentSize)
@@ -407,6 +414,7 @@ export default class CodeEditor extends React.Component {
CodeEditor.propTypes = { CodeEditor.propTypes = {
value: PropTypes.string, value: PropTypes.string,
rulers: PropTypes.arrayOf(Number),
mode: PropTypes.string, mode: PropTypes.string,
className: PropTypes.string, className: PropTypes.string,
onBlur: PropTypes.func, onBlur: PropTypes.func,

View File

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

View File

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

View File

@@ -89,6 +89,7 @@
<script src="../node_modules/codemirror/addon/search/matchesonscrollbar.js"></script> <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/search/jump-to-line.js"></script>
<script src="../node_modules/codemirror/addon/dialog/dialog.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/raphael/raphael.min.js"></script>
<script src="../node_modules/flowchart.js/release/flowchart.min.js"></script> <script src="../node_modules/flowchart.js/release/flowchart.min.js"></script>