Images: Added testing to cover animated avif handling

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

diff --git a/resources/js/code/views.js b/resources/js/code/views.js
index 54490bc29f3d892af78ad2cc67777fc90ebf2af6..5599c35ddbe6751b9c9d70181a042bfe95c630fb 100644 (file)
--- a/resources/js/code/views.js
+++ b/resources/js/code/views.js
@@ -1,59 +1,38 @@
-import {getLanguageExtension} from "./languages"
-import {HighlightStyle, syntaxHighlighting} from "@codemirror/language";
-import {Compartment} from "@codemirror/state"
-import {EditorView} from "@codemirror/view"
-import {oneDarkTheme, oneDarkHighlightStyle} from "@codemirror/theme-one-dark"
-import {tags} from "@lezer/highlight"
+import {Compartment, EditorState} from '@codemirror/state';
+import {EditorView} from '@codemirror/view';
+import {getLanguageExtension} from './languages';
 
 const viewLangCompartments = new WeakMap();
 
 /**
  * Create a new editor view.
  *
+ * @param {String} usageType
  * @param {{parent: Element, doc: String, extensions: Array}} config
  * @returns {EditorView}
  */
-export function createView(config) {
+export function createView(usageType, config) {
     const langCompartment = new Compartment();
     config.extensions.push(langCompartment.of([]));
-    config.extensions.push(getTheme(config.parent));
 
-    const ev = new EditorView(config);
-
-    viewLangCompartments.set(ev, langCompartment);
-
-    return ev;
-}
+    const commonEventData = {
+        usage: usageType,
+        editorViewConfig: config,
+        libEditorView: EditorView,
+        libEditorState: EditorState,
+        libCompartment: Compartment,
+    };
 
-/**
- * Get the theme extension to use for editor view instance.
- * @returns {Extension[]}
- */
-function getTheme(viewParentEl) {
-    const darkMode = document.documentElement.classList.contains('dark-mode');
-    let viewTheme = darkMode ? oneDarkTheme : [];
-    let highlightStyle = darkMode ? oneDarkHighlightStyle : null;
+    // Emit a pre-init public event so the user can tweak the config before instance creation
+    window.$events.emitPublic(config.parent, 'library-cm6::pre-init', commonEventData);
 
-    const eventData = {
-        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);
-            }
-        }
-    };
+    const ev = new EditorView(config);
+    viewLangCompartments.set(ev, langCompartment);
 
-    window.$events.emitPublic(viewParentEl, 'library-cm6::configure-theme', eventData);
+    // Emit a post-init public event so the user can gain a reference to the EditorView
+    window.$events.emitPublic(config.parent, 'library-cm6::post-init', {editorView: ev, ...commonEventData});
 
-    return [viewTheme, highlightStyle ? syntaxHighlighting(highlightStyle) : []];
+    return ev;
 }
 
 /**
@@ -68,6 +47,6 @@ export async function updateViewLanguage(ev, modeSuggestion, content) {
     const language = await getLanguageExtension(modeSuggestion, content);
 
     ev.dispatch({
-        effects: compartment.reconfigure(language ? language : [])
-    })
-}
\ No newline at end of file
+        effects: compartment.reconfigure(language || []),
+    });
+}