feat: CodeMirror - add numbers/bool syntax highlighting for YAML mode

Author: RohitRaj011

package-lock.json

@@ -103,6 +103,7 @@
         "@codemirror/legacy-modes": "6.4.2",
         "@codemirror/lint": "6.8.4",
         "@codemirror/search": "6.5.8",
+        "@lezer/highlight": "1.2.1",
         "@replit/codemirror-indentation-markers": "6.5.3",
         "@replit/codemirror-vscode-keymap": "6.0.2",
         "@types/react-dates": "^21.8.6",

package.json

@@ -14,24 +14,55 @@
  * limitations under the License.
  */
 
-import { githubDarkInit, githubLightStyle, githubDarkStyle, githubLightInit } from '@uiw/codemirror-theme-github'
+import { EditorView } from '@uiw/react-codemirror'
+import { githubDarkInit, githubLightInit } from '@uiw/codemirror-theme-github'
+import { tags as t } from '@lezer/highlight'
 
 export const getCodeEditorTheme = (isDark: boolean) => {
     const themeInit = isDark ? githubDarkInit : githubLightInit
-    const styles = isDark ? githubDarkStyle : githubLightStyle
+    const styles = isDark
+        ? [
+              { tag: [t.comment], color: '#8b949e' },
+              { tag: [t.variableName, t.attributeName], color: '#79c0ff' },
+              { tag: [t.string], color: '#a5d6ff' },
+              { tag: [t.number, t.bool], color: '#ffab70' },
+              { tag: [t.keyword], color: '#ff7b72' },
+              { tag: [t.operator, t.punctuation], color: '#8b949e' },
+              { tag: [t.meta], color: '#d2a8ff' },
+          ]
+        : [
+              { tag: [t.comment], color: '#6a737d' },
+              { tag: [t.variableName, t.attributeName], color: '#005cc5' },
+              { tag: [t.string], color: '#032f62' },
+              { tag: [t.number, t.bool], color: '#e36209' },
+              { tag: [t.keyword], color: '#d73a49' },
+              { tag: [t.operator, t.punctuation], color: '#6a737d' },
+              { tag: [t.meta], color: '#6f42c1' },
+          ]
 
-    return themeInit({
-        settings: {
-            fontSize: '14px',
-            fontFamily: 'Inconsolata, monospace',
-            background: 'var(--bg-code-editor-base)',
-            foreground: 'var(--N900)',
-            caret: 'var(--N900)',
-            gutterBackground: 'var(--bg-code-editor-base-gutter)',
-            gutterForeground: 'var(--N900)',
-            gutterBorder: 'transparent',
-            lineHighlight: 'var(--active-line)',
-        },
-        styles,
-    })
+    return {
+        themeExtension: EditorView.theme({
+            '.cm-highlight-number': {
+                color: isDark ? '#ffab70' : '#e36209',
+            },
+            '.cm-highlight-bool': {
+                color: isDark ? '#ffab70' : '#e36209',
+            },
+        }),
+        codeEditorTheme: themeInit({
+            settings: {
+                fontSize: '14px',
+                fontFamily: 'Inconsolata, monospace',
+                background: 'var(--bg-code-editor-base)',
+                foreground: 'var(--N900)',
+                caret: 'var(--N900)',
+                gutterBackground: 'var(--bg-code-editor-base-gutter)',
+                gutterForeground: 'var(--N900)',
+                gutterBorder: 'transparent',
+                lineHighlight: 'var(--active-line)',
+            },
+            styles,
+            theme: isDark ? 'dark' : 'light',
+        }),
+    }
 }

src/Common/CodeMirror/CodeEditor.theme.ts

@@ -34,7 +34,7 @@ import { getUniqueId } from '@Shared/Helpers'
 import { cleanKubeManifest, useEffectAfterMount } from '@Common/Helper'
 import { DEFAULT_JSON_SCHEMA_URI, MODES } from '@Common/Constants'
 
-import { codeEditorFindReplace, readOnlyTooltip } from './Extensions'
+import { codeEditorFindReplace, readOnlyTooltip, yamlHighlight } from './Extensions'
 import { CodeEditorContextProps, CodeEditorProps } from './types'
 import { CodeEditorReducer, initialState, parseValueToCode } from './CodeEditor.reducer'
 import { getFoldGutterElement, getLanguageExtension, getValidationSchema } from './utils'
@@ -89,7 +89,7 @@ const CodeEditor = <DiffView extends boolean = false>({
 
     // CONSTANTS
     const isDarkTheme = (theme ?? appTheme) === AppThemeType.dark
-    const codeEditorTheme = getCodeEditorTheme(isDarkTheme)
+    const { codeEditorTheme, themeExtension } = getCodeEditorTheme(isDarkTheme)
 
     // STATES
     const [codemirrorMergeKey, setCodemirrorMergeKey] = useState<string>()
@@ -196,6 +196,7 @@ const CodeEditor = <DiffView extends boolean = false>({
 
     const baseExtensions: Extension[] = [
         basicSetup(basicSetupOptions),
+        themeExtension,
         keymap.of(vscodeKeymap.filter(({ key }) => !disableSearch || key !== 'Mod-f')),
         indentationMarkers(),
         getLanguageExtension(mode),
@@ -204,6 +205,7 @@ const CodeEditor = <DiffView extends boolean = false>({
         search({
             createPanel: codeEditorFindReplace,
         }),
+        ...(mode === MODES.YAML ? [yamlHighlight] : []),
     ]
 
     const extensions: Extension[] = [

src/Common/CodeMirror/CodeEditor.tsx

@@ -17,3 +17,4 @@
 export * from './yamlParseLinter'
 export * from './readOnlyTooltip'
 export * from './findAndReplace'
+export * from './yamlHighlight'

src/Common/CodeMirror/Extensions/index.ts

@@ -0,0 +1,48 @@
+import { Decoration, DecorationSet, EditorState, EditorView, Extension, Range, StateField } from '@uiw/react-codemirror'
+import { ensureSyntaxTree } from '@codemirror/language'
+
+const isBool = (value: string) => /^(true|false)$/i.test(value)
+
+const isNumberOrBool = (value: string) => isBool(value) || /^[-+]?\d*\.\d+$/.test(value) || /^[-+]?\d+$/.test(value)
+
+const calculateDecorations = (state: EditorState) => {
+    const decorations: Range<Decoration>[] = []
+    const tree = ensureSyntaxTree(state, state.doc.length)
+    tree.iterate({
+        from: 0,
+        to: state.doc.length,
+        enter: (node) => {
+            if (node.name === 'Pair') {
+                const valueNode = node.node.getChild('Literal')
+                if (valueNode) {
+                    const valueText = state.sliceDoc(valueNode.from, valueNode.to).trim()
+                    if (isNumberOrBool(valueText)) {
+                        decorations.push(
+                            Decoration.mark({
+                                class: isBool(valueText) ? 'cm-highlight-bool' : 'cm-highlight-number',
+                            }).range(valueNode.from, valueNode.to),
+                        )
+                    }
+                }
+            }
+        },
+    })
+
+    return Decoration.set(decorations)
+}
+
+const highlightDecorationField = StateField.define<DecorationSet>({
+    create(state) {
+        return calculateDecorations(state)
+    },
+    update(decorations, tr) {
+        let updatedDecorations = decorations.map(tr.changes)
+        if (tr.docChanged) {
+            updatedDecorations = calculateDecorations(tr.state)
+        }
+        return updatedDecorations
+    },
+    provide: (field) => EditorView.decorations.from(field),
+})
+
+export const yamlHighlight: Extension = highlightDecorationField