feat: expose codemirror packages for plugins (#1924)

Author: bajrangCoder

src/lib/acode.js

@@ -1,10 +1,14 @@
 import fsOperation from "fileSystem";
 import sidebarApps from "sidebarApps";
-import { HighlightStyle, syntaxHighlighting } from "@codemirror/language";
-import { Compartment, EditorState, Prec, StateEffect } from "@codemirror/state";
-import { EditorView } from "@codemirror/view";
+import * as cmAutocomplete from "@codemirror/autocomplete";
+import * as cmCommands from "@codemirror/commands";
+import * as cmLanguage from "@codemirror/language";
+import * as cmLint from "@codemirror/lint";
+import * as cmSearch from "@codemirror/search";
+import * as cmState from "@codemirror/state";
+import * as cmView from "@codemirror/view";
 import ajax from "@deadlyjack/ajax";
-import { tags } from "@lezer/highlight";
+import * as lezerHighlight from "@lezer/highlight";
 import {
 	getRegisteredCommands as listRegisteredCommands,
 	refreshCommandKeymap,
@@ -150,7 +154,7 @@ export default class Acode {
 
 		const createHighlightStyle = (spec) => {
 			if (!spec) return null;
-			if (Array.isArray(spec)) return HighlightStyle.define(spec);
+			if (Array.isArray(spec)) return cmLanguage.HighlightStyle.define(spec);
 			return spec;
 		};
 
@@ -163,12 +167,12 @@ export default class Acode {
 			const ext = [];
 
 			if (styles && typeof styles === "object") {
-				ext.push(EditorView.theme(styles, { dark: !!dark }));
+				ext.push(cmView.EditorView.theme(styles, { dark: !!dark }));
 			}
 
 			const resolvedHighlight = createHighlightStyle(highlightStyle);
 			if (resolvedHighlight) {
-				ext.push(syntaxHighlighting(resolvedHighlight));
+				ext.push(cmLanguage.syntaxHighlighting(resolvedHighlight));
 			}
 
 			if (Array.isArray(extensions)) {
@@ -213,10 +217,10 @@ export default class Acode {
 			createTheme,
 			createHighlightStyle,
 			cm: {
-				EditorView,
-				HighlightStyle,
-				syntaxHighlighting,
-				tags,
+				EditorView: cmView.EditorView,
+				HighlightStyle: cmLanguage.HighlightStyle,
+				syntaxHighlighting: cmLanguage.syntaxHighlighting,
+				tags: lezerHighlight.tags,
 			},
 		};
 
@@ -314,6 +318,17 @@ export default class Acode {
 			},
 		};
 
+		const codemirrorModule = Object.freeze({
+			autocomplete: cmAutocomplete,
+			commands: cmCommands,
+			language: cmLanguage,
+			lezer: lezerHighlight,
+			lint: cmLint,
+			search: cmSearch,
+			state: cmState,
+			view: cmView,
+		});
+
 		this.define("Url", Url);
 		this.define("page", Page);
 		this.define("Color", Color);
@@ -356,6 +371,15 @@ export default class Acode {
 		this.define("selectionMenu", selectionMenu);
 		this.define("sidebarApps", sidebarAppsModule);
 		this.define("terminal", terminalModule);
+		this.define("codemirror", codemirrorModule);
+		this.define("@codemirror/autocomplete", cmAutocomplete);
+		this.define("@codemirror/commands", cmCommands);
+		this.define("@codemirror/language", cmLanguage);
+		this.define("@codemirror/lint", cmLint);
+		this.define("@codemirror/search", cmSearch);
+		this.define("@codemirror/state", cmState);
+		this.define("@codemirror/view", cmView);
+		this.define("@lezer/highlight", lezerHighlight);
 		this.define("createKeyboardEvent", KeyboardEvent);
 		this.define("toInternalUrl", helpers.toInternalUri);
 		this.define("commands", this.#createCommandApi());

src/test/editor.tests.js

@@ -65,6 +65,53 @@ export async function runCodeMirrorTests(writeOutput) {
 		);
 	});
 
+	runner.test("Acode exposes shared CodeMirror modules", async (test) => {
+		const codemirror = acode.require("codemirror");
+		const language = acode.require("@codemirror/language");
+		const lezer = acode.require("@lezer/highlight");
+		const state = acode.require("@codemirror/state");
+		const view = acode.require("@codemirror/view");
+
+		test.assert(codemirror != null, "codemirror namespace should exist");
+		test.assert(language != null, "@codemirror/language should exist");
+		test.assert(lezer != null, "@lezer/highlight should exist");
+		test.assert(state != null, "@codemirror/state should exist");
+		test.assert(view != null, "@codemirror/view should exist");
+		test.assert(
+			language.StreamLanguage != null,
+			"@codemirror/language should export StreamLanguage",
+		);
+		test.assert(lezer.tags != null, "@lezer/highlight should export tags");
+		test.assert(
+			state.EditorState != null,
+			"@codemirror/state should export EditorState",
+		);
+		test.assert(
+			view.EditorView != null,
+			"@codemirror/view should export EditorView",
+		);
+		test.assertEqual(
+			language.StreamLanguage,
+			codemirror.language.StreamLanguage,
+			"language exports should share the same singleton instance",
+		);
+		test.assertEqual(
+			lezer.tags,
+			codemirror.lezer.tags,
+			"lezer exports should share the same singleton instance",
+		);
+		test.assertEqual(
+			state.EditorState,
+			codemirror.state.EditorState,
+			"state exports should share the same singleton instance",
+		);
+		test.assertEqual(
+			view.EditorView,
+			codemirror.view.EditorView,
+			"view exports should share the same singleton instance",
+		);
+	});
+
 	runner.test("Editor creation", async (test) => {
 		const { view, container } = createEditor();
 		test.assert(view != null, "EditorView instance should be created");