From 74b76ecdb924787d0d0f190bd1e384ddf50b1a16 Mon Sep 17 00:00:00 2001
From: Dan Brown <ssddanbrown@googlemail.com>
Date: Sat, 15 Apr 2023 15:35:41 +0100
Subject: [PATCH] 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     |  2 ++
 resources/js/code/setups.js     |  8 ++------
 resources/js/code/views.js      | 26 +++++++++++++++++++++-----
 resources/sass/_codemirror.scss |  4 ----
 4 files changed, 25 insertions(+), 15 deletions(-)

diff --git a/resources/js/code/index.mjs b/resources/js/code/index.mjs
index 1a3429d58..2b1aa9e74 100644
--- a/resources/js/code/index.mjs
+++ b/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');
 }
diff --git a/resources/js/code/setups.js b/resources/js/code/setups.js
index cd56261d3..19f8c6c2e 100644
--- a/resources/js/code/setups.js
+++ b/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(),
diff --git a/resources/js/code/views.js b/resources/js/code/views.js
index 54f30fe6c..54490bc29 100644
--- a/resources/js/code/views.js
+++ b/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) : []];
 }
 
 /**
diff --git a/resources/sass/_codemirror.scss b/resources/sass/_codemirror.scss
index aa3729606..b26e236a8 100644
--- a/resources/sass/_codemirror.scss
+++ b/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;