CM6: Aligned styling with existing, improved theme handling

[bookstack] / resources / js / code / themes.js

diff --git a/resources/js/code/themes.js b/resources/js/code/themes.js
index 43feb2d53a764d6c2f22d9dc403cfd5a0f6347d0..492ca4a99d956bb43839e0b191497524ca5df38a 100644 (file)
--- a/resources/js/code/themes.js
+++ b/resources/js/code/themes.js
@@ -1,7 +1,9 @@
 import {tags} from "@lezer/highlight";
 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,
     { tag: tags.meta,
         color: "#388938" },
     { tag: tags.link,


@@ -43,4 +45,46 @@ export const defaultLight = HighlightStyle.define([
         color: "#940" },
     { tag: tags.invalid,
         color: "#f00" }
         color: "#940" },
     { tag: tags.invalid,
         color: "#f00" }

-]);
\ No newline at end of file
+]);
+
+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)];
+}
\ No newline at end of file