Skip to content

Commit b5a89f1

Browse files
RohitRaj011RohitRaj011
committed
feat: CodeMirror - update color tokens, theme, FindAndReplace - disable shortcut for replace view in readOnly mode
1 parent 108db41 commit b5a89f1

File tree

4 files changed

+54
-38
lines changed

4 files changed

+54
-38
lines changed

‎src/Common/CodeMirror/CodeEditor.theme.ts

Lines changed: 13 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -22,42 +22,36 @@ export const getCodeEditorTheme = (isDark: boolean) => {
2222
const themeInit = isDark ? githubDarkInit : githubLightInit
2323
const styles = isDark
2424
? [
25-
{ tag: [t.comment], color: '#8b949e' },
26-
{ tag: [t.variableName, t.attributeName], color: '#79c0ff' },
27-
{ tag: [t.string], color: '#a5d6ff' },
28-
{ tag: [t.number, t.bool], color: '#ffab70' },
29-
{ tag: [t.keyword], color: '#ff7b72' },
30-
{ tag: [t.operator, t.punctuation], color: '#8b949e' },
31-
{ tag: [t.meta], color: '#d2a8ff' },
25+
{ tag: [t.className, t.propertyName], color: 'var(--code-editor-property-name)' },
26+
{ tag: [t.variableName, t.attributeName, t.number, t.operator], color: 'var(--code-editor-number)' },
27+
{ tag: [t.heading, t.strong], color: 'var(--code-editor-property-name)', fontWeight: 'bold' },
28+
{ tag: [t.emphasis], color: 'var(--code-editor-property-name)', fontStyle: 'italic' },
29+
{ tag: [t.atom, t.bool, t.special(t.variableName)], color: 'var(--code-editor-boolean)' },
3230
]
3331
: [
34-
{ tag: [t.comment], color: '#6a737d' },
35-
{ tag: [t.variableName, t.attributeName], color: '#005cc5' },
36-
{ tag: [t.string], color: '#032f62' },
37-
{ tag: [t.number, t.bool], color: '#e36209' },
38-
{ tag: [t.keyword], color: '#d73a49' },
39-
{ tag: [t.operator, t.punctuation], color: '#6a737d' },
40-
{ tag: [t.meta], color: '#6f42c1' },
32+
{ tag: [t.className, t.propertyName], color: 'var(--code-editor-property-name)' },
33+
{ tag: [t.variableName, t.attributeName, t.number, t.operator], color: 'var(--code-editor-number)' },
34+
{ tag: [t.atom, t.bool, t.special(t.variableName)], color: 'var(--code-editor-boolean)' },
4135
]
4236

4337
return {
4438
themeExtension: EditorView.theme({
4539
'.cm-highlight-number': {
46-
color: isDark ? '#ffab70' : '#e36209',
40+
color: 'var(--code-editor-number)',
4741
},
4842
'.cm-highlight-bool': {
49-
color: isDark ? '#ffab70' : '#e36209',
43+
color: 'var(--code-editor-boolean)',
5044
},
5145
}),
5246
codeEditorTheme: themeInit({
5347
settings: {
54-
fontSize: '14px',
48+
fontSize: '16px',
5549
fontFamily: 'Inconsolata, monospace',
5650
background: 'var(--bg-code-editor-base)',
57-
foreground: 'var(--N900)',
51+
foreground: 'var(--fg-code-editor)',
5852
caret: 'var(--N900)',
5953
gutterBackground: 'var(--bg-code-editor-base-gutter)',
60-
gutterForeground: 'var(--N900)',
54+
gutterForeground: 'var(--N500)',
6155
gutterBorder: 'transparent',
6256
lineHighlight: 'var(--active-line)',
6357
},

‎src/Common/CodeMirror/Commands/findAndReplace.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,16 +22,16 @@ export const getShowReplaceField = (state: EditorState) => {
2222
}
2323

2424
export const openSearchPanel: Command = (view: EditorView) => {
25-
cmOpenSearchPanel(view)
2625
view.dispatch({
2726
effects: [setShowReplaceField.of(searchPanelOpen(view.state) ? getShowReplaceField(view.state) : false)],
2827
})
28+
cmOpenSearchPanel(view)
2929
return true
3030
}
3131

3232
export const openSearchPanelWithReplace: Command = (view: EditorView) => {
3333
openSearchPanel(view)
34-
view.dispatch({ effects: [setShowReplaceField.of(true)] })
34+
view.dispatch({ effects: [setShowReplaceField.of(!view.state.readOnly && true)] })
3535
return true
3636
}
3737

‎src/Common/CodeMirror/Extensions/yamlHighlight.ts

Lines changed: 20 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -8,25 +8,28 @@ const isNumberOrBool = (value: string) => isBool(value) || /^[-+]?\d*\.\d+$/.tes
88
const calculateDecorations = (state: EditorState) => {
99
const decorations: Range<Decoration>[] = []
1010
const tree = ensureSyntaxTree(state, state.doc.length)
11-
tree.iterate({
12-
from: 0,
13-
to: state.doc.length,
14-
enter: (node) => {
15-
if (node.name === 'Pair') {
16-
const valueNode = node.node.getChild('Literal')
17-
if (valueNode) {
18-
const valueText = state.sliceDoc(valueNode.from, valueNode.to).trim()
19-
if (isNumberOrBool(valueText)) {
20-
decorations.push(
21-
Decoration.mark({
22-
class: isBool(valueText) ? 'cm-highlight-bool' : 'cm-highlight-number',
23-
}).range(valueNode.from, valueNode.to),
24-
)
11+
12+
if (tree) {
13+
tree.iterate({
14+
from: 0,
15+
to: state.doc.length,
16+
enter: (node) => {
17+
if (node.name === 'Pair') {
18+
const valueNode = node.node.getChild('Literal')
19+
if (valueNode) {
20+
const valueText = state.sliceDoc(valueNode.from, valueNode.to).trim()
21+
if (isNumberOrBool(valueText)) {
22+
decorations.push(
23+
Decoration.mark({
24+
class: isBool(valueText) ? 'cm-highlight-bool' : 'cm-highlight-number',
25+
}).range(valueNode.from, valueNode.to),
26+
)
27+
}
2528
}
2629
}
27-
}
28-
},
29-
})
30+
},
31+
})
32+
}
3033

3134
return Decoration.set(decorations)
3235
}

‎src/Common/CodeMirror/codeEditor.scss

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,10 @@
4242
}
4343

4444
.cm-editor {
45+
--indent-marker-bg-color: var(--border-primary);
46+
// TODO: Need to update this color (Utkarsh)
47+
--indent-marker-active-bg-color: var(--border-primary);
48+
4549
&.cm-focused {
4650
outline: none;
4751
}
@@ -185,6 +189,21 @@
185189
.cm-lint-marker-warning {
186190
content: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.24239 2.18666L1.43119 10.4987C1.3542 10.6317 1.3136 10.7827 1.31348 10.9364C1.31335 11.09 1.3537 11.241 1.43046 11.3742C1.50723 11.5073 1.6177 11.6179 1.75077 11.6947C1.88384 11.7716 2.0348 11.8121 2.18848 11.8121H11.8109C11.9646 11.8121 12.1155 11.7716 12.2486 11.6947C12.3817 11.6179 12.4921 11.5073 12.5689 11.3742C12.6457 11.241 12.686 11.09 12.6859 10.9364C12.6858 10.7827 12.6452 10.6317 12.5682 10.4987L7.75697 2.18666C7.68011 2.05387 7.56968 1.94363 7.43676 1.86699C7.30384 1.79034 7.15311 1.75 6.99968 1.75C6.84625 1.75 6.69551 1.79034 6.5626 1.86699C6.42968 1.94363 6.31925 2.05387 6.24239 2.18666Z' fill='%23F4BA63'/%3E%3Cpath d='M7.58333 5.68758C7.58333 5.36542 7.32217 5.10425 7 5.10425C6.67783 5.10425 6.41667 5.36542 6.41667 5.68758V7.87508C6.41667 8.19725 6.67783 8.45841 7 8.45841C7.32217 8.45841 7.58333 8.19725 7.58333 7.87508V5.68758Z' fill='%23000A14'/%3E%3Cpath d='M7.65625 9.84383C7.65625 10.2063 7.36244 10.5001 7 10.5001C6.63756 10.5001 6.34375 10.2063 6.34375 9.84383C6.34375 9.48139 6.63756 9.18758 7 9.18758C7.36244 9.18758 7.65625 9.48139 7.65625 9.84383Z' fill='%23000A14'/%3E%3C/svg%3E%0A");
187191
}
192+
193+
// SEARCH
194+
.cm-searchMatch {
195+
background-color: var(--bg-matching-keyword);
196+
span {
197+
color: var(--white);
198+
}
199+
}
200+
201+
.cm-searchMatch-selected {
202+
background-color: var(--bg-matching-keyword-selected);
203+
span {
204+
color: var(--white);
205+
}
206+
}
188207
}
189208

190209
// CODE EDITOR STYLES

0 commit comments

Comments
 (0)