mirror of
https://github.com/BoostIo/Boostnote
synced 2025-12-23 06:31:51 +00:00
Merge pull request #1709 from rayou/add-editor-rulers
Added editor rulers
This commit is contained in:
@@ -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,
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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')}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -142,6 +142,10 @@
|
||||
"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",
|
||||
|
||||
@@ -144,6 +144,10 @@
|
||||
"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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -142,6 +142,10 @@
|
||||
"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",
|
||||
|
||||
@@ -141,6 +141,10 @@
|
||||
"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)",
|
||||
|
||||
@@ -142,6 +142,10 @@
|
||||
"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",
|
||||
|
||||
@@ -149,6 +149,9 @@
|
||||
"Password": "패스워드",
|
||||
"Storage": "저장소",
|
||||
"Hotkeys": "단축키",
|
||||
"Editor Rulers": "Editor Rulers",
|
||||
"Enable": "Enable",
|
||||
"Disable": "Disable",
|
||||
"Sanitization": "허용 태그 범위",
|
||||
"Only allow secure html tags (recommended)": "안전한 HTML 태그만 허용 (추천)",
|
||||
"Allow styles": "style 태그, 속성까지 허용",
|
||||
|
||||
@@ -142,6 +142,9 @@
|
||||
"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",
|
||||
|
||||
@@ -142,6 +142,9 @@
|
||||
"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",
|
||||
|
||||
@@ -142,6 +142,9 @@
|
||||
"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",
|
||||
|
||||
@@ -143,5 +143,8 @@
|
||||
"You have to save!": "Нужно сохранить!",
|
||||
"UserName": "Имя пользователя",
|
||||
"Password": "Пароль",
|
||||
"Russian": "Русский"
|
||||
"Russian": "Русский",
|
||||
"Editor Rulers": "Editor Rulers",
|
||||
"Enable": "Enable",
|
||||
"Disable": "Disable"
|
||||
}
|
||||
|
||||
@@ -142,6 +142,9 @@
|
||||
"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",
|
||||
|
||||
@@ -142,6 +142,9 @@
|
||||
"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",
|
||||
|
||||
@@ -142,6 +142,9 @@
|
||||
"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",
|
||||
|
||||
Reference in New Issue
Block a user