-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;
}
/**
const language = await getLanguageExtension(modeSuggestion, content);
ev.dispatch({
- effects: compartment.reconfigure(language ? language : [])
- })
-}
\ No newline at end of file
+ effects: compartment.reconfigure(language || []),
+ });
+}