Skip to content
This repository was archived by the owner on Jan 14, 2022. It is now read-only.

Commit 24762a8

Browse files
ZeroX-DGZeroX-DG
committed
added highlight current line option
1 parent 6a01a04 commit 24762a8

File tree

6 files changed

+76
-13
lines changed

6 files changed

+76
-13
lines changed

‎browser/lib/codemirror-binding.js‎

Whitespace-only changes.

‎browser/lib/config-manager.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,8 @@ const DEFAULT_CONFIG = {
2828
fontFamily: 'Fira Code, Consolas, sans-serif',
2929
fontSize: 18,
3030
indentUsingTab: false,
31-
tabSize: 2
31+
tabSize: 2,
32+
highlightCurrentLine: true
3233
},
3334
keyboard: {
3435
createSnippet: OSX ? 'Cmd + N' : 'Ctrl + N',

‎browser/render/components/code-editor/index.jsx‎

Lines changed: 36 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ export default class CodeEditor extends React.Component {
1717
initSingleFileSnippetEditor () {
1818
const { config, snippet } = this.props
1919
if (snippet) {
20-
const { theme, showLineNumber } = config.editor
20+
const { theme, showLineNumber, highlightCurrentLine } = config.editor
2121
const snippetMode = CodeMirror.findModeByName(snippet.lang).mode
2222
require(`codemirror/mode/${snippetMode}/${snippetMode}`)
2323
const gutters = showLineNumber
@@ -32,9 +32,13 @@ export default class CodeEditor extends React.Component {
3232
gutters: gutters,
3333
readOnly: true,
3434
autoCloseBrackets: true,
35-
autoRefresh: true,
36-
styleActiveLine: { nonEmpty: false }
35+
autoRefresh: true
3736
})
37+
if (highlightCurrentLine) {
38+
this.editor.setOption('styleActiveLine', { nonEmpty: false })
39+
} else {
40+
this.editor.setOption('styleActiveLine', null)
41+
}
3842
this.editor.setSize('100%', 'auto')
3943
this.applyEditorStyleSingleFile()
4044
}
@@ -47,7 +51,13 @@ export default class CodeEditor extends React.Component {
4751
handleEditingFileValueChange,
4852
selectedFile
4953
} = this.props
50-
const { theme, showLineNumber, tabSize, indentUsingTab } = config.editor
54+
const {
55+
theme,
56+
showLineNumber,
57+
tabSize,
58+
indentUsingTab,
59+
highlightCurrentLine
60+
} = config.editor
5161
const file = snippet.files[selectedFile]
5262
const fileExtension = getExtension(file.name)
5363
const resultMode = CodeMirror.findModeByExtension(fileExtension)
@@ -70,10 +80,14 @@ export default class CodeEditor extends React.Component {
7080
gutters: gutters,
7181
readOnly: true,
7282
autoCloseBrackets: true,
73-
autoRefresh: true,
74-
styleActiveLine: { nonEmpty: false }
83+
autoRefresh: true
7584
})
7685

86+
if (highlightCurrentLine) {
87+
this.editor.setOption('styleActiveLine', { nonEmpty: false })
88+
} else {
89+
this.editor.setOption('styleActiveLine', null)
90+
}
7791
this.editor.setOption('indentUnit', tabSize)
7892
this.editor.setOption('tabSize', tabSize)
7993
this.editor.setOption('indentWithTabs', indentUsingTab)
@@ -132,7 +146,8 @@ export default class CodeEditor extends React.Component {
132146
fontFamily,
133147
fontSize,
134148
tabSize,
135-
indentUsingTab
149+
indentUsingTab,
150+
highlightCurrentLine
136151
} = config.editor
137152
// only update codemirror mode if new props is passed
138153
if (props) {
@@ -152,6 +167,12 @@ export default class CodeEditor extends React.Component {
152167
this.editor.setOption('tabSize', tabSize)
153168
this.editor.setOption('indentWithTabs', indentUsingTab)
154169

170+
if (highlightCurrentLine) {
171+
this.editor.setOption('styleActiveLine', { nonEmpty: false })
172+
} else {
173+
this.editor.setOption('styleActiveLine', null)
174+
}
175+
155176
const wrapperElement = this.editor.getWrapperElement()
156177
wrapperElement.style.fontFamily = fontFamily
157178
if (this.props.maxHeight) {
@@ -172,7 +193,8 @@ export default class CodeEditor extends React.Component {
172193
fontFamily,
173194
fontSize,
174195
tabSize,
175-
indentUsingTab
196+
indentUsingTab,
197+
highlightCurrentLine
176198
} = config.editor
177199
const gutters = showLineNumber
178200
? ['CodeMirror-linenumbers', 'CodeMirror-foldgutter']
@@ -189,6 +211,12 @@ export default class CodeEditor extends React.Component {
189211
}
190212
}
191213

214+
if (highlightCurrentLine) {
215+
this.editor.setOption('styleActiveLine', { nonEmpty: false })
216+
} else {
217+
this.editor.setOption('styleActiveLine', null)
218+
}
219+
192220
this.editor.getWrapperElement().style.fontSize = `${fontSize}px`
193221
this.editor.setOption('lineNumbers', showLineNumber)
194222
this.editor.setOption('foldGutter', showLineNumber)

‎browser/render/modals/setting/tabs/editor.jsx‎

Lines changed: 34 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,12 @@ import i18n from 'render/lib/i18n'
88
export default class EditorTab extends React.Component {
99
componentDidMount () {
1010
const { config } = this.props
11-
const { showLineNumber, theme, fontFamily } = config.editor
11+
const {
12+
showLineNumber,
13+
theme,
14+
fontFamily,
15+
highlightCurrentLine
16+
} = config.editor
1217
const sampleCode = `const number = 1
1318
if (number == 1) {
1419
console.log(number * 2)
@@ -27,6 +32,12 @@ if (number == 1) {
2732
: []
2833
})
2934

35+
if (highlightCurrentLine) {
36+
this.editor.setOption('styleActiveLine', { nonEmpty: false })
37+
} else {
38+
this.editor.setOption('styleActiveLine', null)
39+
}
40+
3041
this.editor.getWrapperElement().style.fontFamily = fontFamily
3142

3243
this.editor.setSize('100%', '100%')
@@ -49,6 +60,15 @@ if (number == 1) {
4960
this.editor.setOption('theme', newTheme)
5061
}
5162

63+
highlightCurrentLine () {
64+
const highlightCurrentLine = this.refs.highlightCurrentLine.checked
65+
if (highlightCurrentLine) {
66+
this.editor.setOption('styleActiveLine', { nonEmpty: false })
67+
} else {
68+
this.editor.setOption('styleActiveLine', null)
69+
}
70+
}
71+
5272
saveSetting () {
5373
const newSetting = {
5474
editor: {
@@ -57,7 +77,8 @@ if (number == 1) {
5777
fontFamily: this.refs.fontFamily.value,
5878
fontSize: this.refs.fontSize.value,
5979
indentUsingTab: this.refs.indentStyle.value === 'tab',
60-
tabSize: this.refs.tabSize.value
80+
tabSize: this.refs.tabSize.value,
81+
highlightCurrentLine: this.refs.highlightCurrentLine.checked
6182
}
6283
}
6384

@@ -86,6 +107,17 @@ if (number == 1) {
86107
{i18n.__('Show line number')}
87108
</label>
88109
</div>
110+
<div className="group-checkbox">
111+
<label>
112+
<input
113+
type="checkbox"
114+
defaultChecked={editorConf.highlightCurrentLine}
115+
onChange={this.highlightCurrentLine.bind(this)}
116+
ref="highlightCurrentLine"
117+
/>
118+
{i18n.__('Highlight current line')}
119+
</label>
120+
</div>
89121
<div className="input-group">
90122
<label>{i18n.__('Theme')}</label>
91123
<select

‎languages/en.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,5 +67,6 @@
6767
"discard changes": "discard changes",
6868
"Are you sure to delete this file?": "Are you sure to delete this file?",
6969
"Pick a snippet from list": "Pick a snippet from list",
70-
"Snippet list layout": "Snippet list layout"
70+
"Snippet list layout": "Snippet list layout",
71+
"Highlight current line": "Highlight current line"
7172
}

‎languages/vi.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,5 +65,6 @@
6565
"discard changes": "Hủy thay đổi",
6666
"Are you sure to delete this file?": "Bạn có chắc muốn xóa file này?",
6767
"Pick a snippet from list": "Chọn 1 snippet trong danh sách",
68-
"Snippet list layout": "Bố cục danh sách snippet"
68+
"Snippet list layout": "Bố cục danh sách snippet",
69+
"Highlight current line": "Làm nổi dòng hiện tại"
6970
}

0 commit comments

Comments
 (0)