X-Git-Url: http://source.bookstackapp.com/bookstack/blobdiff_plain/9874a53206ffbaa6ac108bf6dc63fbe85cc370b2..refs/heads/lexical_fixes:/resources/js/code/views.js diff --git a/resources/js/code/views.js b/resources/js/code/views.js index 54f30fe6c..5599c35dd 100644 --- a/resources/js/code/views.js +++ b/resources/js/code/views.js @@ -1,43 +1,38 @@ -import {getLanguageExtension} from "./languages" -import {Compartment} from "@codemirror/state" -import {EditorView} from "@codemirror/view" -import {oneDark} from "@codemirror/theme-one-dark" +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'); + // 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 = { - darkMode: darkMode, - theme: null, - }; + 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 eventData.theme || (darkMode ? oneDark : []); + return ev; } /** @@ -52,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 || []), + }); +}