Updated cm6 theme handling to allow extension via API

Uses our custom event system, uses methods that take callables so that
internal dependancies can be passed.

resources/js/code/index.mjs

@@ -49,6 +49,7 @@ function highlightElem(elem) {
         extensions: viewer(),
     });
     setMode(ev, langName, content);
+    window.cm = ev;
 
     elem.remove();
 
@@ -81,6 +82,7 @@ function addCopyIcon(editorView) {
  * @returns {*|string}
  */
 function getTheme() {
+    // TODO - Remove
     const darkMode = document.documentElement.classList.contains('dark-mode');
     return window.codeTheme || (darkMode ? 'darcula' : 'default');
 }

resources/js/code/setups.js

@@ -1,5 +1,5 @@
 
-import {EditorView, keymap, highlightSpecialChars, drawSelection, highlightActiveLine, dropCursor,
+import {EditorView, keymap, drawSelection, highlightActiveLine, dropCursor,
     rectangularSelection, lineNumbers, highlightActiveLineGutter} from "@codemirror/view"
 import {syntaxHighlighting, bracketMatching} from "@codemirror/language"
 import {defaultKeymap, history, historyKeymap} from "@codemirror/commands"
@@ -11,17 +11,14 @@ export function viewer() {
     return [
         lineNumbers(),
         highlightActiveLineGutter(),
-        highlightSpecialChars(),
-        history(),
         drawSelection(),
         dropCursor(),
-        syntaxHighlighting(defaultLight, {fallback: true}),
+        // syntaxHighlighting(defaultLight, {fallback: false}),
         bracketMatching(),
         rectangularSelection(),
         highlightActiveLine(),
         keymap.of([
             ...defaultKeymap,
-            ...historyKeymap,
         ]),
         EditorState.readOnly.of(true),
     ];
@@ -31,7 +28,6 @@ export function editor(language) {
     return [
         lineNumbers(),
         highlightActiveLineGutter(),
-        highlightSpecialChars(),
         history(),
         drawSelection(),
         dropCursor(),

resources/js/code/views.js

@@ -1,7 +1,9 @@
 import {getLanguageExtension} from "./languages"
+import {HighlightStyle, syntaxHighlighting} from "@codemirror/language";
 import {Compartment} from "@codemirror/state"
 import {EditorView} from "@codemirror/view"
-import {oneDark} from "@codemirror/theme-one-dark"
+import {oneDarkTheme, oneDarkHighlightStyle} from "@codemirror/theme-one-dark"
+import {tags} from "@lezer/highlight"
 
 const viewLangCompartments = new WeakMap();
 
@@ -25,19 +27,33 @@ export function createView(config) {
 
 /**
  * Get the theme extension to use for editor view instance.
- * @returns {Extension}
+ * @returns {Extension[]}
  */
 function getTheme(viewParentEl) {
     const darkMode = document.documentElement.classList.contains('dark-mode');
+    let viewTheme = darkMode ? oneDarkTheme : [];
+    let highlightStyle = darkMode ? oneDarkHighlightStyle : null;
 
     const eventData = {
-        darkMode: darkMode,
-        theme: null,
+        darkModeActive: darkMode,
+        registerViewTheme(builder) {
+            const spec = builder();
+            if (spec) {
+                viewTheme = EditorView.theme(spec);
+            }
+        },
+        registerHighlightStyle(builder) {
+            const tagStyles = builder(tags) || [];
+            console.log('called', tagStyles);
+            if (tagStyles.length) {
+                highlightStyle = HighlightStyle.define(tagStyles);
+            }
+        }
     };
 
     window.$events.emitPublic(viewParentEl, 'library-cm6::configure-theme', eventData);
 
-    return eventData.theme || (darkMode ? oneDark : []);
+    return [viewTheme, highlightStyle ? syntaxHighlighting(highlightStyle) : []];
 }
 
 /**

resources/sass/_codemirror.scss

@@ -412,10 +412,6 @@ span.CodeMirror-selectedtext { background: none; }
 /**
  * Custom BookStack overrides
  */
-.cm-editor {
-  @include lightDark(background-color, #FFF, #000);
-}
-
 // TODO - All below are old
 .CodeMirror, .CodeMirror pre {
   font-size: 12px;