habsi/authentik
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
* 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>
This commit is contained in:
Teffen Ellis
2025-01-25 15:10:12 -05:00
committed by GitHub
parent 3daa39080a
commit b04ff5bbee
1 changed files with 29 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
web/src/elements/CodeMirror.ts
View File

@ -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;
themeDark: Extension;
themeLight = EditorView.theme(
{
"&": {
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[],