CM6: Aligned styling with existing, improved theme handling

resources/js/code/themes.js

@@ -1,7 +1,9 @@
 import {tags} from "@lezer/highlight";
-import {HighlightStyle} from "@codemirror/language";
+import {HighlightStyle, syntaxHighlighting} from "@codemirror/language";
+import {EditorView} from "@codemirror/view";
+import {oneDarkHighlightStyle, oneDarkTheme} from "@codemirror/theme-one-dark";
 
-export const defaultLight = HighlightStyle.define([
+const defaultLightHighlightStyle = HighlightStyle.define([
     { tag: tags.meta,
         color: "#388938" },
     { tag: tags.link,
@@ -43,4 +45,46 @@ export const defaultLight = HighlightStyle.define([
         color: "#940" },
     { tag: tags.invalid,
         color: "#f00" }
-]);
+]);
+
+const defaultThemeSpec = {
+    "&": {
+        color: "#000",
+    },
+    "&.cm-focused": {
+        outline: "none",
+    },
+    ".cm-line": {
+        lineHeight: "1.6",
+    },
+};
+
+/**
+ * Get the theme extension to use for editor view instance.
+ * @returns {Extension[]}
+ */
+export function getTheme(viewParentEl) {
+    const darkMode = document.documentElement.classList.contains('dark-mode');
+    let viewTheme = darkMode ? oneDarkTheme : EditorView.theme(defaultThemeSpec);
+    let highlightStyle = darkMode ? oneDarkHighlightStyle : defaultLightHighlightStyle;
+
+    const eventData = {
+        darkModeActive: darkMode,
+        registerViewTheme(builder) {
+            const spec = builder();
+            if (spec) {
+                viewTheme = EditorView.theme(spec);
+            }
+        },
+        registerHighlightStyle(builder) {
+            const tagStyles = builder(tags) || [];
+            if (tagStyles.length) {
+                highlightStyle = HighlightStyle.define(tagStyles);
+            }
+        }
+    };
+
+    window.$events.emitPublic(viewParentEl, 'library-cm6::configure-theme', eventData);
+
+    return [viewTheme, syntaxHighlighting(highlightStyle)];
+}