feat(plugin-themes): object-only register API + safe CM theme fallback/validation

Author: bajrangCoder

src/cm/themes/index.js

@@ -1,3 +1,4 @@
+import { EditorState } from "@codemirror/state";
 import { oneDark } from "@codemirror/theme-one-dark";
 import aura, { config as auraConfig } from "./aura";
 import dracula, { config as draculaConfig } from "./dracula";
@@ -32,17 +33,93 @@ const oneDarkConfig = {
 };
 
 const themes = new Map();
+const warnedInvalidThemes = new Set();
+
+function normalizeExtensions(value, target = []) {
+	if (Array.isArray(value)) {
+		value.forEach((item) => normalizeExtensions(item, target));
+		return target;
+	}
+
+	if (value !== null && value !== undefined) {
+		target.push(value);
+	}
+
+	return target;
+}
+
+function toExtensionGetter(getExtension) {
+	if (typeof getExtension === "function") {
+		return () => normalizeExtensions(getExtension());
+	}
+
+	return () => normalizeExtensions(getExtension);
+}
+
+function logInvalidThemeOnce(themeId, error, reason = "") {
+	if (warnedInvalidThemes.has(themeId)) return;
+	warnedInvalidThemes.add(themeId);
+	const message = reason
+		? `[editorThemes] Theme '${themeId}' is invalid: ${reason}`
+		: `[editorThemes] Theme '${themeId}' is invalid.`;
+	console.error(message, error);
+}
+
+function validateThemeExtensions(themeId, extensions) {
+	if (!extensions.length) {
+		logInvalidThemeOnce(themeId, null, "no extensions were returned");
+		return false;
+	}
+
+	try {
+		// Validate against Acode's own CodeMirror instance.
+		EditorState.create({ doc: "", extensions });
+		return true;
+	} catch (error) {
+		logInvalidThemeOnce(themeId, error);
+		return false;
+	}
+}
+
+function resolveThemeEntryExtensions(theme, fallbackExtensions) {
+	const fallback = fallbackExtensions.length
+		? [...fallbackExtensions]
+		: [oneDark];
+
+	if (!theme) return fallback;
+
+	try {
+		const resolved = normalizeExtensions(theme.getExtension?.());
+		if (!validateThemeExtensions(theme.id, resolved)) {
+			return fallback;
+		}
+		return resolved;
+	} catch (error) {
+		logInvalidThemeOnce(theme.id, error);
+		return fallback;
+	}
+}
 
 export function addTheme(id, caption, isDark, getExtension, config = null) {
-	const key = String(id).toLowerCase();
-	if (themes.has(key)) return;
-	themes.set(key, {
+	const key = String(id || "")
+		.trim()
+		.toLowerCase();
+	if (!key || themes.has(key)) return false;
+
+	const theme = {
 		id: key,
 		caption: caption || id,
 		isDark: !!isDark,
-		getExtension,
+		getExtension: toExtensionGetter(getExtension),
 		config: config || null,
-	});
+	};
+
+	if (!validateThemeExtensions(key, theme.getExtension())) {
+		return false;
+	}
+
+	themes.set(key, theme);
+	return true;
 }
 
 export function getThemes() {
@@ -60,6 +137,13 @@ export function getThemeConfig(id) {
 	return theme?.config || oneDarkConfig;
 }
 
+export function getThemeExtensions(id, fallback = [oneDark]) {
+	const fallbackExtensions = normalizeExtensions(fallback);
+	const theme =
+		getThemeById(id) || getThemeById(String(id || "").replace(/-/g, "_"));
+	return resolveThemeEntryExtensions(theme, fallbackExtensions);
+}
+
 export function removeTheme(id) {
 	if (!id) return;
 	themes.delete(String(id).toLowerCase());
@@ -142,6 +226,7 @@ export default {
 	getThemes,
 	getThemeById,
 	getThemeConfig,
+	getThemeExtensions,
 	addTheme,
 	removeTheme,
 };

src/lib/acode.js

@@ -1,6 +1,9 @@
 import fsOperation from "fileSystem";
 import sidebarApps from "sidebarApps";
+import { HighlightStyle, syntaxHighlighting } from "@codemirror/language";
+import { EditorView } from "@codemirror/view";
 import ajax from "@deadlyjack/ajax";
+import { tags } from "@lezer/highlight";
 import {
 	getRegisteredCommands as listRegisteredCommands,
 	refreshCommandKeymap,
@@ -103,14 +106,111 @@ export default class Acode {
 		};
 
 		// CodeMirror editor theme API for plugins
+		const normalizeThemeSpec = (spec) => {
+			if (!spec || typeof spec !== "object" || Array.isArray(spec)) {
+				console.warn(
+					"[editorThemes] register(spec) expects an object: { id, caption?, dark?, getExtension|extensions|extension|theme, config? }",
+				);
+				return null;
+			}
+
+			const id = spec.id || spec.name;
+			if (!id) {
+				console.warn("[editorThemes] register(spec) requires a valid `id`.");
+				return null;
+			}
+
+			const extensionSource =
+				spec.getExtension || spec.extensions || spec.extension || spec.theme;
+			if (extensionSource === undefined || extensionSource === null) {
+				console.warn(
+					`[editorThemes] register('${id}') requires extensions via getExtension/extensions/extension/theme.`,
+				);
+				return null;
+			}
+
+			return {
+				id,
+				caption: spec.caption || spec.label || id,
+				isDark: spec.isDark ?? spec.dark ?? false,
+				getExtension:
+					typeof extensionSource === "function"
+						? extensionSource
+						: () => extensionSource,
+				config: spec.config ?? null,
+			};
+		};
+
+		const createHighlightStyle = (spec) => {
+			if (!spec) return null;
+			if (Array.isArray(spec)) return HighlightStyle.define(spec);
+			return spec;
+		};
+
+		const createTheme = ({
+			styles,
+			dark = false,
+			highlightStyle,
+			extensions = [],
+		} = {}) => {
+			const ext = [];
+
+			if (styles && typeof styles === "object") {
+				ext.push(EditorView.theme(styles, { dark: !!dark }));
+			}
+
+			const resolvedHighlight = createHighlightStyle(highlightStyle);
+			if (resolvedHighlight) {
+				ext.push(syntaxHighlighting(resolvedHighlight));
+			}
+
+			if (Array.isArray(extensions)) {
+				ext.push(...extensions);
+			} else if (extensions) {
+				ext.push(extensions);
+			}
+
+			return ext;
+		};
+
 		const editorThemesModule = {
-			register: (id, caption, isDark, getExtension, config = null) =>
-				cmThemeRegistry.addTheme(id, caption, isDark, getExtension, config),
+			/**
+			 * Register a CodeMirror theme from plugin code.
+			 * @param {{
+			 *   id: string,
+			 *   caption?: string,
+			 *   dark?: boolean,
+			 *   getExtension?: Function,
+			 *   extensions?: unknown,
+			 *   config?: object
+			 * }} spec
+			 * `isDark`, `extension`, and `theme` are accepted aliases for compatibility.
+			 * @returns {boolean}
+			 */
+			register: (spec) => {
+				const resolved = normalizeThemeSpec(spec);
+				if (!resolved) return false;
+				return cmThemeRegistry.addTheme(
+					resolved.id,
+					resolved.caption,
+					resolved.isDark,
+					resolved.getExtension,
+					resolved.config,
+				);
+			},
 			unregister: (id) => cmThemeRegistry.removeTheme(id),
 			list: () => cmThemeRegistry.getThemes(),
 			apply: (id) => editorManager?.editor?.setTheme?.(id),
 			get: (id) => cmThemeRegistry.getThemeById(id),
 			getConfig: (id) => cmThemeRegistry.getThemeConfig(id),
+			createTheme,
+			createHighlightStyle,
+			cm: {
+				EditorView,
+				HighlightStyle,
+				syntaxHighlighting,
+				tags,
+			},
 		};
 
 		const sidebarAppsModule = {

src/lib/editorManager.js

@@ -62,7 +62,7 @@ import {
 } from "cm/editorUtils";
 import indentGuides from "cm/indentGuides";
 import rainbowBrackets from "cm/rainbowBrackets";
-import themeRegistry, { getThemeById, getThemes } from "cm/themes";
+import { getThemeExtensions } from "cm/themes";
 import list from "components/collapsableList";
 import quickTools from "components/quickTools";
 import ScrollBar from "components/scrollbar";
@@ -778,8 +778,7 @@ async function EditorManager($header, $body) {
 	editor.setTheme = function (themeId) {
 		try {
 			const id = String(themeId || "");
-			const theme = getThemeById(id) || getThemeById(id.replace(/-/g, "_"));
-			const ext = theme?.getExtension?.() || [oneDark];
+			const ext = getThemeExtensions(id, [oneDark]);
 			editor.dispatch({ effects: themeCompartment.reconfigure(ext) });
 			return true;
 		} catch (_) {

src/pages/themeSetting/themeSetting.js

@@ -3,7 +3,7 @@ import { javascript } from "@codemirror/lang-javascript";
 // For CodeMirror preview
 import { EditorState } from "@codemirror/state";
 import { oneDark } from "@codemirror/theme-one-dark";
-import { getThemeById, getThemes } from "cm/themes";
+import { getThemeExtensions, getThemes } from "cm/themes";
 import { basicSetup, EditorView } from "codemirror";
 import Page from "components/page";
 import searchBar from "components/searchbar";
@@ -35,7 +35,7 @@ export default function () {
 			cmPreview.destroy();
 			cmPreview = null;
 		}
-		const theme = getThemeById(themeId)?.getExtension?.() || [oneDark];
+		const theme = getThemeExtensions(themeId, [oneDark]);
 		const fixedHeightTheme = EditorView.theme({
 			"&": { height: "100%", flex: "1 1 auto" },
 			".cm-scroller": { height: "100%", overflow: "auto" },
@@ -213,7 +213,14 @@ export default function () {
 			);
 			return;
 		}
-		editorManager.editor.setTheme(theme);
+		const ok = editorManager.editor.setTheme(theme);
+		if (!ok) {
+			alert(
+				"Invalid theme",
+				"This editor theme is not compatible with Acode's CodeMirror runtime.",
+			);
+			return;
+		}
 		if (cmPreview) createPreview(theme);
 		appSettings.update(
 			{

src/palettes/changeEditorTheme/index.js

@@ -22,6 +22,7 @@ function generateHints() {
 
 function onselect(themeId) {
 	if (!themeId) return;
-	editorManager.editor.setTheme(themeId);
+	const ok = editorManager.editor.setTheme(themeId);
+	if (!ok) return;
 	appSettings.update({ editorTheme: themeId }, false);
 }