web: Fix issue where Codemirror partially applies OneDark theme. (#12811)

* web: Fix issue where code mirror partially applies OneDark theme.

- Reported in #4622
- Partially fixed via fd9ce53

* update syntax highlight color when theme is changed

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* we dont really need to initialise these in the constructor tbh

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

---------

Signed-off-by: Jens Langhammer <jens@goauthentik.io>
Co-authored-by: Jens Langhammer <jens@goauthentik.io>

web/src/elements/CodeMirror.ts

@@ -11,7 +11,7 @@ import {
 } from "@codemirror/language";
 import * as yamlMode from "@codemirror/legacy-modes/mode/yaml";
 import { Compartment, EditorState, Extension } from "@codemirror/state";
-import { oneDark } from "@codemirror/theme-one-dark";
+import { oneDark, oneDarkHighlightStyle } from "@codemirror/theme-one-dark";
 import { ViewUpdate } from "@codemirror/view";
 import { EditorView, drawSelection, keymap, lineNumbers } from "@codemirror/view";
 import { EVENT_THEME_CHANGE } from "@goauthentik/common/constants";
@@ -49,10 +49,20 @@ export class CodeMirrorTextarea<T> extends AKElement {
 
     _value?: string;
 
-    theme: Compartment;
+    theme: Compartment = new Compartment();
+    syntaxHighlighting: Compartment = new Compartment();
 
-    themeLight: Extension;
+    themeLight = EditorView.theme(
-    themeDark: Extension;
+        {
+            "&": {
+                backgroundColor: "var(--pf-global--BackgroundColor--light-300)",
+            },
+        },
+        { dark: false },
+    );
+    themeDark = oneDark;
+    syntaxHighlightingLight = syntaxHighlighting(defaultHighlightStyle);
+    syntaxHighlightingDark = syntaxHighlighting(oneDarkHighlightStyle);
 
     static get styles(): CSSResult[] {
         return [
@@ -120,20 +130,6 @@ export class CodeMirrorTextarea<T> extends AKElement {
         }
     }
 
-    constructor() {
-        super();
-        this.theme = new Compartment();
-        this.themeLight = EditorView.theme(
-            {
-                "&": {
-                    backgroundColor: "var(--pf-global--BackgroundColor--light-300)",
-                },
-            },
-            { dark: false },
-        );
-        this.themeDark = oneDark;
-    }
-
     private getInnerValue(): string {
         if (!this.editor) {
             return "";
@@ -161,18 +157,26 @@ export class CodeMirrorTextarea<T> extends AKElement {
         this.addEventListener(EVENT_THEME_CHANGE, ((ev: CustomEvent<UiThemeEnum>) => {
             if (ev.detail === UiThemeEnum.Dark) {
                 this.editor?.dispatch({
-                    effects: this.theme.reconfigure(this.themeDark),
+                    effects: [
+                        this.theme.reconfigure(this.themeDark),
+                        this.syntaxHighlighting.reconfigure(this.syntaxHighlightingDark),
+                    ],
                 });
             } else {
                 this.editor?.dispatch({
-                    effects: this.theme.reconfigure(this.themeLight),
+                    effects: [
+                        this.theme.reconfigure(this.themeLight),
+                        this.syntaxHighlighting.reconfigure(this.syntaxHighlightingLight),
+                    ],
                 });
             }
         }) as EventListener);
+
+        const dark = this.activeTheme === UiThemeEnum.Dark;
+
         const extensions = [
             history(),
             keymap.of([...defaultKeymap, ...historyKeymap]),
-            syntaxHighlighting(defaultHighlightStyle),
             this.getLanguageExtension(),
             lineNumbers(),
             drawSelection(),
@@ -189,7 +193,10 @@ export class CodeMirrorTextarea<T> extends AKElement {
             }),
             EditorState.readOnly.of(this.readOnly),
             EditorState.tabSize.of(2),
-            this.theme.of(this.activeTheme === UiThemeEnum.Dark ? this.themeDark : this.themeLight),
+            this.syntaxHighlighting.of(
+                dark ? this.syntaxHighlightingDark : this.syntaxHighlightingLight,
+            ),
+            this.theme.of(dark ? this.themeDark : this.themeLight),
         ];
         this.editor = new EditorView({
             extensions: extensions.filter((p) => p) as Extension[],