@acorex/components 21.0.0-next.5 → 21.0.0-next.51

package/fesm2022/acorex-components-code-editor.mjs

@@ -2,18 +2,476 @@ import { MXValueComponent, AXValuableComponent, AXComponent } from '@acorex/cdk/
 import { AXPlatform } from '@acorex/core/platform';
 import { isPlatformBrowser, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { input, output, viewChild, inject, PLATFORM_ID, DestroyRef, signal, computed, afterNextRender, effect, forwardRef, Component, NgModule } from '@angular/core';
+import { InjectionToken, inject, Injectable, input, output, viewChild, PLATFORM_ID, DestroyRef, signal, computed, afterNextRender, effect, forwardRef, Component, NgModule } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 
+class PrettierFormatterPlugin {
+    constructor() {
+        this.id = 'prettier';
+        this.name = 'Prettier';
+        this.version = '1.0.0';
+        this.languages = ['javascript', 'js', 'typescript', 'ts', 'json', 'html', 'css', 'markdown'];
+    }
+    async format(text, language) {
+        try {
+            const prettier = await import('prettier/standalone');
+            let parser = null;
+            const plugins = [];
+            switch (language) {
+                case 'javascript':
+                case 'js': {
+                    const [babel, estree] = await Promise.all([
+                        import('prettier/plugins/babel'),
+                        import('prettier/plugins/estree'),
+                    ]);
+                    plugins.push(babel, estree);
+                    parser = 'babel';
+                    break;
+                }
+                case 'typescript':
+                case 'ts': {
+                    const [typescript, estree] = await Promise.all([
+                        import('prettier/plugins/typescript'),
+                        import('prettier/plugins/estree'),
+                    ]);
+                    plugins.push(typescript, estree);
+                    parser = 'typescript';
+                    break;
+                }
+                case 'json': {
+                    const [babel, estree] = await Promise.all([
+                        import('prettier/plugins/babel'),
+                        import('prettier/plugins/estree'),
+                    ]);
+                    plugins.push(babel, estree);
+                    parser = 'json';
+                    break;
+                }
+                case 'html': {
+                    const html = await import('prettier/plugins/html');
+                    plugins.push(html);
+                    parser = 'html';
+                    break;
+                }
+                case 'css': {
+                    const postcss = await import('prettier/plugins/postcss');
+                    plugins.push(postcss);
+                    parser = 'css';
+                    break;
+                }
+                case 'markdown': {
+                    const markdown = await import('prettier/plugins/markdown');
+                    plugins.push(markdown);
+                    parser = 'markdown';
+                    break;
+                }
+                default:
+                    return null;
+            }
+            if (!parser)
+                return null;
+            const formatted = await prettier.format(text, {
+                parser,
+                plugins,
+            });
+            return formatted;
+        }
+        catch {
+            return null;
+        }
+    }
+}
+
+class CSSLanguagePlugin {
+    constructor() {
+        this.id = 'css';
+        this.name = 'CSS';
+        this.version = '1.0.0';
+        this.languages = ['css'];
+    }
+    async getExtension() {
+        const { css } = await import('@codemirror/lang-css');
+        return css();
+    }
+}
+
+class HTMLLanguagePlugin {
+    constructor() {
+        this.id = 'html';
+        this.name = 'HTML';
+        this.version = '1.0.0';
+        this.languages = ['html'];
+    }
+    async getExtension() {
+        const { html } = await import('@codemirror/lang-html');
+        return html();
+    }
+}
+
+class JavaScriptLanguagePlugin {
+    constructor() {
+        this.id = 'javascript';
+        this.name = 'JavaScript';
+        this.version = '1.0.0';
+        this.languages = ['javascript', 'js'];
+    }
+    async getExtension() {
+        const { javascript } = await import('@codemirror/lang-javascript');
+        return javascript();
+    }
+}
+
+class JSONLanguagePlugin {
+    constructor() {
+        this.id = 'json';
+        this.name = 'JSON';
+        this.version = '1.0.0';
+        this.languages = ['json'];
+    }
+    async getExtension() {
+        const { json } = await import('@codemirror/lang-json');
+        return json();
+    }
+}
+
+class MarkdownLanguagePlugin {
+    constructor() {
+        this.id = 'markdown';
+        this.name = 'Markdown';
+        this.version = '1.0.0';
+        this.languages = ['markdown'];
+    }
+    async getExtension() {
+        const { markdown } = await import('@codemirror/lang-markdown');
+        return markdown();
+    }
+}
+
+class SassLanguagePlugin {
+    constructor() {
+        this.id = 'sass';
+        this.name = 'Sass/SCSS';
+        this.version = '1.0.0';
+        this.languages = ['sass', 'scss'];
+    }
+    async getExtension() {
+        const { sass } = await import('@codemirror/lang-sass');
+        return sass();
+    }
+}
+
+class SQLLanguagePlugin {
+    constructor() {
+        this.id = 'sql';
+        this.name = 'SQL';
+        this.version = '1.0.0';
+        this.languages = ['sql'];
+    }
+    async getExtension() {
+        const { sql } = await import('@codemirror/lang-sql');
+        return sql();
+    }
+}
+
+class TypeScriptLanguagePlugin {
+    constructor() {
+        this.id = 'typescript';
+        this.name = 'TypeScript';
+        this.version = '1.0.0';
+        this.languages = ['typescript', 'ts'];
+    }
+    async getExtension() {
+        const { javascript } = await import('@codemirror/lang-javascript');
+        return javascript({ typescript: true });
+    }
+}
+
+class XMLLanguagePlugin {
+    constructor() {
+        this.id = 'xml';
+        this.name = 'XML';
+        this.version = '1.0.0';
+        this.languages = ['xml'];
+    }
+    async getExtension() {
+        const { xml } = await import('@codemirror/lang-xml');
+        return xml();
+    }
+}
+
+class GitHubDarkThemePlugin {
+    constructor() {
+        this.id = 'github-dark';
+        this.name = 'GitHub Dark';
+        this.version = '1.0.0';
+        this.dark = true;
+    }
+    async getExtension() {
+        const [{ githubDark }, { EditorView }] = await Promise.all([
+            import('@uiw/codemirror-theme-github'),
+            import('@codemirror/view'),
+        ]);
+        return [
+            githubDark,
+            EditorView.theme({
+            // '&': { backgroundColor: 'transparent !important' },
+            // '.cm-gutters': { backgroundColor: 'transparent !important' },
+            }, { dark: true }),
+        ];
+    }
+}
+
+class GitHubLightThemePlugin {
+    constructor() {
+        this.id = 'github-light';
+        this.name = 'GitHub Light';
+        this.version = '1.0.0';
+        this.dark = false;
+    }
+    async getExtension() {
+        const [{ githubLight }, { EditorView }] = await Promise.all([
+            import('@uiw/codemirror-theme-github'),
+            import('@codemirror/view'),
+        ]);
+        return [
+            githubLight,
+            EditorView.theme({
+            // '&': { backgroundColor: 'transparent !important' },
+            // '.cm-gutters': { backgroundColor: 'transparent !important' },
+            }, { dark: false }),
+        ];
+    }
+}
+
+class LightThemePlugin {
+    constructor() {
+        this.id = 'light';
+        this.name = 'Light';
+        this.version = '1.0.0';
+        this.dark = false;
+    }
+    async getExtension() {
+        const { EditorView } = await import('@codemirror/view');
+        return EditorView.theme({
+            // '&': { backgroundColor: 'transparent !important' },
+            '.cm-gutters': {},
+        }, { dark: false });
+    }
+}
+
+class OneDarkThemePlugin {
+    constructor() {
+        this.id = 'one-dark';
+        this.name = 'One Dark';
+        this.version = '1.0.0';
+        this.dark = true;
+    }
+    async getExtension() {
+        const { EditorView } = await import('@codemirror/view');
+        try {
+            const { oneDark } = await import('@codemirror/theme-one-dark');
+            return [
+                oneDark,
+                EditorView.theme({
+                    // '&': { backgroundColor: 'transparent !important' },
+                    '.cm-gutters': {},
+                }, { dark: true }),
+            ];
+        }
+        catch {
+            return EditorView.theme({
+                // '&': { backgroundColor: 'transparent !important' },
+                '.cm-gutters': {},
+            }, { dark: true });
+        }
+    }
+}
+
+/**
+ * Default plugin configuration with all built-in plugins
+ */
+function provideDefaultCodeEditorPlugins() {
+    return {
+        languages: [
+            new JavaScriptLanguagePlugin(),
+            new TypeScriptLanguagePlugin(),
+            new JSONLanguagePlugin(),
+            new HTMLLanguagePlugin(),
+            new CSSLanguagePlugin(),
+            new SassLanguagePlugin(),
+            new SQLLanguagePlugin(),
+            new XMLLanguagePlugin(),
+            new MarkdownLanguagePlugin(),
+        ],
+        themes: [
+            new OneDarkThemePlugin(),
+            new LightThemePlugin(),
+            new GitHubLightThemePlugin(),
+            new GitHubDarkThemePlugin(),
+        ],
+        formatters: [new PrettierFormatterPlugin()],
+        extensions: [],
+    };
+}
+
+/**
+ * Injection token for providing code editor plugin configuration
+ */
+const AX_CODE_EDITOR_PLUGIN_CONFIG = new InjectionToken('AX_CODE_EDITOR_PLUGIN_CONFIG', {
+    providedIn: 'root',
+    factory: () => provideDefaultCodeEditorPlugins(),
+});
+
+/**
+ * Registry service for managing code editor plugins
+ */
+class AXCodeEditorPluginRegistry {
+    constructor() {
+        this.config = inject(AX_CODE_EDITOR_PLUGIN_CONFIG, { optional: true });
+        this.languagePlugins = new Map();
+        this.themePlugins = new Map();
+        this.formatterPlugins = new Map();
+        this.extensionPlugins = new Map();
+        this.initializePlugins();
+    }
+    initializePlugins() {
+        if (!this.config)
+            return;
+        // Register language plugins
+        this.config.languages?.forEach((plugin) => {
+            plugin.languages.forEach((lang) => {
+                this.languagePlugins.set(lang, plugin);
+            });
+        });
+        // Register theme plugins
+        this.config.themes?.forEach((plugin) => {
+            this.themePlugins.set(plugin.id, plugin);
+        });
+        // Register formatter plugins
+        this.config.formatters?.forEach((plugin) => {
+            plugin.languages.forEach((lang) => {
+                this.formatterPlugins.set(lang, plugin);
+            });
+        });
+        // Register extension plugins
+        this.config.extensions?.forEach((plugin) => {
+            this.extensionPlugins.set(plugin.id, plugin);
+        });
+    }
+    /**
+     * Get language extension for the specified language
+     */
+    async getLanguageExtension(language) {
+        const plugin = this.languagePlugins.get(language);
+        if (!plugin) {
+            console.warn(`No language plugin found for: ${language}`);
+            return [];
+        }
+        return plugin.getExtension();
+    }
+    /**
+     * Get theme extension by theme ID
+     */
+    async getThemeExtension(themeId) {
+        const plugin = this.themePlugins.get(themeId);
+        if (!plugin) {
+            console.warn(`No theme plugin found for: ${themeId}`);
+            return [];
+        }
+        return plugin.getExtension();
+    }
+    /**
+     * Format text using the appropriate formatter for the language
+     */
+    async format(text, language) {
+        const plugin = this.formatterPlugins.get(language);
+        if (!plugin) {
+            return null;
+        }
+        return plugin.format(text, language);
+    }
+    /**
+     * Get all registered extension plugins
+     */
+    async getExtensionPlugins() {
+        const extensions = await Promise.all(Array.from(this.extensionPlugins.values()).map((plugin) => plugin.getExtension()));
+        return extensions;
+    }
+    /**
+     * Check if a language is supported
+     */
+    hasLanguage(language) {
+        return this.languagePlugins.has(language);
+    }
+    /**
+     * Check if a theme is available
+     */
+    hasTheme(themeId) {
+        return this.themePlugins.has(themeId);
+    }
+    /**
+     * Check if a formatter is available for a language
+     */
+    hasFormatter(language) {
+        return this.formatterPlugins.has(language);
+    }
+    /**
+     * Get all available language identifiers
+     */
+    getAvailableLanguages() {
+        return Array.from(this.languagePlugins.keys());
+    }
+    /**
+     * Get all available theme identifiers
+     */
+    getAvailableThemes() {
+        return Array.from(this.themePlugins.keys());
+    }
+    /**
+     * Register a language plugin at runtime
+     */
+    registerLanguagePlugin(plugin) {
+        plugin.languages.forEach((lang) => {
+            this.languagePlugins.set(lang, plugin);
+        });
+    }
+    /**
+     * Register a theme plugin at runtime
+     */
+    registerThemePlugin(plugin) {
+        this.themePlugins.set(plugin.id, plugin);
+    }
+    /**
+     * Register a formatter plugin at runtime
+     */
+    registerFormatterPlugin(plugin) {
+        plugin.languages.forEach((lang) => {
+            this.formatterPlugins.set(lang, plugin);
+        });
+    }
+    /**
+     * Register an extension plugin at runtime
+     */
+    registerExtensionPlugin(plugin) {
+        this.extensionPlugins.set(plugin.id, plugin);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXCodeEditorPluginRegistry, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXCodeEditorPluginRegistry, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXCodeEditorPluginRegistry, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
 class AXCodeEditorComponent extends MXValueComponent {
     constructor() {
         super();
         // Inputs (signals)
         // value = input<string>('');
-        /** Active language mode. Default: 'javascript'. */
+        /** Active language identifier from default plugins. Default: 'javascript'. */
         this.language = input('javascript', ...(ngDevMode ? [{ debugName: "language" }] : []));
         /** When true, the editor becomes readonly (non-editable). */
-        this.readOnly = input(false, ...(ngDevMode ? [{ debugName: "readOnly" }] : []));
+        this.editorReadonly = input(false, ...(ngDevMode ? [{ debugName: "editorReadonly", alias: 'readonly' }] : [{ alias: 'readonly' }]));
         /** Placeholder text shown when the document is empty. */
         this.placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
         /** Toggle rendering of line numbers in the gutter. */
@@ -24,13 +482,8 @@ class AXCodeEditorComponent extends MXValueComponent {
         this.tabSize = input(2, ...(ngDevMode ? [{ debugName: "tabSize" }] : []));
         /** When true, the Tab key indents instead of moving focus. */
         this.indentWithTab = input(true, ...(ngDevMode ? [{ debugName: "indentWithTab" }] : []));
-        /** Fixed height for the editor (e.g., '320px'). */
-        this.height = input(null, ...(ngDevMode ? [{ debugName: "height" }] : []));
-        /** Minimum height for the editor. */
-        this.minHeight = input(null, ...(ngDevMode ? [{ debugName: "minHeight" }] : []));
-        /** Maximum height for the editor. */
-        this.maxHeight = input(null, ...(ngDevMode ? [{ debugName: "maxHeight" }] : []));
-        // Theme follows platform theme mode; no input
+        /** Theme identifier. If null, uses platform theme mode (dark/light). */
+        this.theme = input(null, ...(ngDevMode ? [{ debugName: "theme" }] : []));
         /** Additional CodeMirror extensions to apply. Reconfigures at runtime. */
         this.extensions = input([], ...(ngDevMode ? [{ debugName: "extensions" }] : []));
         /** ARIA label for accessibility. */
@@ -56,10 +509,11 @@ class AXCodeEditorComponent extends MXValueComponent {
         this.platformId = inject(PLATFORM_ID);
         this.destroyRef = inject(DestroyRef);
         this.platformService = inject(AXPlatform);
+        this.pluginRegistry = inject(AXCodeEditorPluginRegistry);
         this.editorViewSig = signal(null, ...(ngDevMode ? [{ debugName: "editorViewSig" }] : []));
         // Compartments to reconfigure editor without recreating it
         this.languageCompartment = null;
-        this.readOnlyCompartment = null;
+        this.readonlyCompartment = null;
         this.themeCompartment = null;
         this.placeholderCompartment = null;
         this.wrappingCompartment = null;
@@ -93,7 +547,7 @@ class AXCodeEditorComponent extends MXValueComponent {
             if (!view || !this.languageCompartment)
                 return;
             const lang = this.language();
-            this.resolveLanguageExtension(lang).then((ext) => {
+            this.pluginRegistry.getLanguageExtension(lang).then((ext) => {
                 if (!view || !this.languageCompartment)
                     return;
                 view.dispatch({ effects: this.languageCompartment.reconfigure(ext) });
@@ -101,23 +555,23 @@ class AXCodeEditorComponent extends MXValueComponent {
         });
         effect(() => {
             const view = this.editorViewSig();
-            if (!view || !this.readOnlyCompartment)
+            if (!view || !this.readonlyCompartment)
                 return;
-            const editable = !this.readOnly();
+            const editable = !this.editorReadonly();
             import('@codemirror/view').then(({ EditorView }) => {
-                if (!view || !this.readOnlyCompartment)
+                if (!view || !this.readonlyCompartment)
                     return;
-                view.dispatch({ effects: this.readOnlyCompartment.reconfigure(EditorView.editable.of(editable)) });
+                view.dispatch({ effects: this.readonlyCompartment.reconfigure(EditorView.editable.of(editable)) });
             });
         });
         effect(() => {
             const view = this.editorViewSig();
-            // Establish reactive dependency on platform theme
-            // Create a reactive dependency to platform theme
-            void this.platformService.themeMode();
+            // Establish reactive dependency on theme and platform theme
+            const customTheme = this.theme();
+            const platformTheme = this.platformService.themeMode();
             if (!view || !this.themeCompartment)
                 return;
-            this.resolveThemeExtension().then((themeExt) => {
+            this.resolveThemeExtension(customTheme, platformTheme).then((themeExt) => {
                 if (!view || !this.themeCompartment)
                     return;
                 view.dispatch({ effects: this.themeCompartment.reconfigure(themeExt) });
@@ -189,10 +643,10 @@ class AXCodeEditorComponent extends MXValueComponent {
         const lintMod = this.cm.lint;
         if (!viewMod || !stateMod || !languageMod || !autoMod || !commandsMod || !searchMod || !lintMod)
             return;
-        const languageExt = await this.resolveLanguageExtension(this.language());
-        const themeExt = await this.resolveThemeExtension();
+        const languageExt = await this.pluginRegistry.getLanguageExtension(this.language());
+        const themeExt = await this.resolveThemeExtension(this.theme(), this.platformService.themeMode());
         const placeholderExt = viewMod.placeholder(this.placeholder() ?? '');
-        const editableExt = viewMod.EditorView.editable.of(!this.readOnly());
+        const editableExt = viewMod.EditorView.editable.of(!this.editorReadonly());
         const wrappingExt = this.lineWrapping() ? viewMod.EditorView.lineWrapping : [];
         const tabSizeExt = stateMod.EditorState.tabSize.of(this.tabSize() ?? 2);
         const lineNumbersExt = this.lineNumbers() ? viewMod.lineNumbers() : [];
@@ -216,7 +670,7 @@ class AXCodeEditorComponent extends MXValueComponent {
             viewMod.keymap.of(keymaps),
             autoCompleteExt,
             this.languageCompartment.of(languageExt),
-            this.readOnlyCompartment.of(editableExt),
+            this.readonlyCompartment.of(editableExt),
             this.themeCompartment.of(themeExt),
             this.placeholderCompartment.of(placeholderExt),
             this.wrappingCompartment.of(wrappingExt),
@@ -291,7 +745,7 @@ class AXCodeEditorComponent extends MXValueComponent {
         if (!stateMod)
             return;
         this.languageCompartment = new stateMod.Compartment();
-        this.readOnlyCompartment = new stateMod.Compartment();
+        this.readonlyCompartment = new stateMod.Compartment();
         this.themeCompartment = new stateMod.Compartment();
         this.placeholderCompartment = new stateMod.Compartment();
         this.wrappingCompartment = new stateMod.Compartment();
@@ -314,148 +768,14 @@ class AXCodeEditorComponent extends MXValueComponent {
             ...lintMod.lintKeymap,
         ];
     }
-    // Attempts to format code using Prettier (browser-only). Returns formatted text or null on failure/unsupported.
-    async tryFormatWithPrettier(text, lang) {
-        if (!this.isBrowser())
-            return null;
-        try {
-            const prettier = await import('prettier/standalone');
-            let parser = null;
-            const plugins = [];
-            switch (lang) {
-                case 'javascript':
-                case 'js': {
-                    const [babel, estree] = await Promise.all([
-                        import('prettier/plugins/babel'),
-                        import('prettier/plugins/estree'),
-                    ]);
-                    plugins.push(babel, estree);
-                    parser = 'babel';
-                    break;
-                }
-                case 'typescript':
-                case 'ts': {
-                    const [typescript, estree] = await Promise.all([
-                        import('prettier/plugins/typescript'),
-                        import('prettier/plugins/estree'),
-                    ]);
-                    plugins.push(typescript, estree);
-                    parser = 'typescript';
-                    break;
-                }
-                case 'json': {
-                    const [babel, estree] = await Promise.all([
-                        import('prettier/plugins/babel'),
-                        import('prettier/plugins/estree'),
-                    ]);
-                    plugins.push(babel, estree);
-                    parser = 'json';
-                    break;
-                }
-                case 'html': {
-                    const html = await import('prettier/plugins/html');
-                    plugins.push(html);
-                    parser = 'html';
-                    break;
-                }
-                case 'css': {
-                    const postcss = await import('prettier/plugins/postcss');
-                    plugins.push(postcss);
-                    parser = 'css';
-                    break;
-                }
-                case 'markdown': {
-                    const markdown = await import('prettier/plugins/markdown');
-                    plugins.push(markdown);
-                    parser = 'markdown';
-                    break;
-                }
-                default:
-                    return null;
-            }
-            if (!parser)
-                return null;
-            const formatted = await prettier.format(text, {
-                parser,
-                plugins,
-            });
-            return formatted;
-        }
-        catch {
-            return null;
-        }
-    }
-    async resolveLanguageExtension(lang) {
-        switch (lang) {
-            case 'javascript':
-            case 'js': {
-                const m = await import('@codemirror/lang-javascript');
-                return m.javascript();
-            }
-            case 'typescript':
-            case 'ts': {
-                const m = await import('@codemirror/lang-javascript');
-                return m.javascript({ typescript: true });
-            }
-            case 'json': {
-                const m = await import('@codemirror/lang-json');
-                return m.json();
-            }
-            case 'html': {
-                const m = await import('@codemirror/lang-html');
-                return m.html();
-            }
-            case 'css': {
-                const m = await import('@codemirror/lang-css');
-                return m.css();
-            }
-            case 'scss':
-            case 'sass': {
-                const m = await import('@codemirror/lang-sass');
-                return m.sass();
-            }
-            case 'sql': {
-                const m = await import('@codemirror/lang-sql');
-                return m.sql();
-            }
-            case 'xml': {
-                const m = await import('@codemirror/lang-xml');
-                return m.xml();
-            }
-            case 'markdown': {
-                const m = await import('@codemirror/lang-markdown');
-                return m.markdown();
-            }
-            default:
-                return [];
+    async resolveThemeExtension(customTheme, platformTheme) {
+        // If custom theme is specified, use it
+        if (customTheme) {
+            return this.pluginRegistry.getThemeExtension(customTheme);
         }
-    }
-    async resolveThemeExtension() {
-        const { EditorView } = await import('@codemirror/view');
-        const darkMode = this.platformService.themeMode() === 'dark';
-        // const surfaceVar = 'rgb(var(--ax-sys-color-surface)) !important';
-        if (darkMode) {
-            try {
-                const { oneDark } = await import('@codemirror/theme-one-dark');
-                return [
-                    oneDark,
-                    EditorView.theme({
-                        '&': { backgroundColor: 'transparent !important' },
-                        '.cm-gutters': {},
-                    }, { dark: true }),
-                ];
-            }
-            catch {
-                return EditorView.theme({
-                    '&': { backgroundColor: 'transparent !important' },
-                    '.cm-gutters': {},
-                }, { dark: true });
-            }
-        }
-        return EditorView.theme({
-            '&': { backgroundColor: 'transparent !important' },
-            '.cm-gutters': {},
-        }, { dark: false });
+        // Otherwise, use platform theme (handle 'system' by defaulting to 'github-light')
+        const themeId = platformTheme === 'dark' ? 'github-dark' : 'github-light';
+        return this.pluginRegistry.getThemeExtension(themeId);
     }
     buildCustomCompletionSources() {
         const provided = this.customCompletions();
@@ -486,7 +806,7 @@ class AXCodeEditorComponent extends MXValueComponent {
         const length = view.state.doc.length;
         view.dispatch({ selection: { anchor: 0, head: length } });
     }
-    // Formats the current document with Prettier (if available for the active language).
+    // Formats the current document using the registered formatter plugin (if available for the active language).
     // Returns the formatted text or null if unchanged/unsupported.
     async format(affect = true) {
         const view = this.editorViewSig();
@@ -495,7 +815,7 @@ class AXCodeEditorComponent extends MXValueComponent {
         const source = view.state.doc.toString();
         if (!source)
             return null;
-        const formatted = await this.tryFormatWithPrettier(source, this.language());
+        const formatted = await this.pluginRegistry.format(source, this.language());
         if (!formatted || formatted === source)
             return null;
         if (affect) {
@@ -521,8 +841,8 @@ class AXCodeEditorComponent extends MXValueComponent {
         const text = this.value ?? '';
         return text ? text.split(/\r?\n/).length : 1;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXCodeEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.3", type: AXCodeEditorComponent, isStandalone: true, selector: "ax-code-editor", inputs: { language: { classPropertyName: "language", publicName: "language", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, lineNumbers: { classPropertyName: "lineNumbers", publicName: "lineNumbers", isSignal: true, isRequired: false, transformFunction: null }, lineWrapping: { classPropertyName: "lineWrapping", publicName: "lineWrapping", isSignal: true, isRequired: false, transformFunction: null }, tabSize: { classPropertyName: "tabSize", publicName: "tabSize", isSignal: true, isRequired: false, transformFunction: null }, indentWithTab: { classPropertyName: "indentWithTab", publicName: "indentWithTab", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, extensions: { classPropertyName: "extensions", publicName: "extensions", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, focusOnReady: { classPropertyName: "focusOnReady", publicName: "focusOnReady", isSignal: true, isRequired: false, transformFunction: null }, formatOnSave: { classPropertyName: "formatOnSave", publicName: "formatOnSave", isSignal: true, isRequired: false, transformFunction: null }, customCompletions: { classPropertyName: "customCompletions", publicName: "customCompletions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ready: "ready", save: "save" }, host: { listeners: { "keydown.control.s": "onSaveShortcut($event)" }, classAttribute: "ax-code-editor block" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXCodeEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.15", type: AXCodeEditorComponent, isStandalone: true, selector: "ax-code-editor", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: false, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: false, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, language: { classPropertyName: "language", publicName: "language", isSignal: true, isRequired: false, transformFunction: null }, editorReadonly: { classPropertyName: "editorReadonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, lineNumbers: { classPropertyName: "lineNumbers", publicName: "lineNumbers", isSignal: true, isRequired: false, transformFunction: null }, lineWrapping: { classPropertyName: "lineWrapping", publicName: "lineWrapping", isSignal: true, isRequired: false, transformFunction: null }, tabSize: { classPropertyName: "tabSize", publicName: "tabSize", isSignal: true, isRequired: false, transformFunction: null }, indentWithTab: { classPropertyName: "indentWithTab", publicName: "indentWithTab", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, extensions: { classPropertyName: "extensions", publicName: "extensions", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, focusOnReady: { classPropertyName: "focusOnReady", publicName: "focusOnReady", isSignal: true, isRequired: false, transformFunction: null }, formatOnSave: { classPropertyName: "formatOnSave", publicName: "formatOnSave", isSignal: true, isRequired: false, transformFunction: null }, customCompletions: { classPropertyName: "customCompletions", publicName: "customCompletions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onValueChanged: "onValueChanged", valueChange: "valueChange", stateChange: "stateChange", readonlyChange: "readonlyChange", disabledChange: "disabledChange", ready: "ready", save: "save" }, host: { listeners: { "keydown.control.s": "onSaveShortcut($event)" }, classAttribute: "ax-code-editor block" }, providers: [
             { provide: AXValuableComponent, useExisting: AXCodeEditorComponent },
             {
                 provide: NG_VALUE_ACCESSOR,
@@ -531,24 +851,27 @@ class AXCodeEditorComponent extends MXValueComponent {
             },
             { provide: AXComponent, useExisting: AXCodeEditorComponent },
         ], viewQueries: [{ propertyName: "host", first: true, predicate: ["host"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
-    <div
-      #host
-      class="cm-editor"
-      [attr.aria-label]="ariaLabel() ?? null"
-      [attr.aria-readonly]="readOnly() ? 'true' : 'false'"
-      [attr.data-placeholder]="placeholder() ?? null"
-      [style.height]="height() ?? null"
-      [style.minHeight]="minHeight() ?? null"
-      [style.maxHeight]="maxHeight() ?? null"
-    ></div>
-  `, isInline: true, styles: [":host{display:block;width:100%;transition:none}.cm-editor{width:100%;max-width:100%;box-sizing:border-box}.cm-editor.cm-focused{outline:none}\n"] }); }
+    <div class="ax-editor-container">
+      <div class="ax-code-editor-container">
+        <div
+          #host
+          class="cm-editor"
+          [attr.aria-label]="ariaLabel() ?? null"
+          [attr.aria-readonly]="editorReadonly() ? 'true' : 'false'"
+          [attr.data-placeholder]="placeholder() ?? null"
+        ></div>
+      </div>
+      <ng-content select="ax-validation-rule"> </ng-content>
+    </div>
+    <div class="ax-error-container"></div>
+  `, isInline: true, styles: [":host{display:block;width:100%;height:100%}:host .ax-editor-container{padding:.1rem}:host.ax-disable{opacity:.5;cursor:not-allowed}:host>.ax-editor-container{display:block;height:100%!important;--ax-comp-editor-space-start-size: 0;--ax-comp-editor-space-end-size: 0;overflow:visible;position:relative}:host .ax-code-editor-container{display:flex;flex-direction:column;height:100%}:host .cm-editor{width:100%;max-width:100%;overflow:auto}:host .cm-editor.cm-focused{outline:none}:host .ax-error-message{padding-inline:.5rem}\n"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXCodeEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXCodeEditorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-code-editor', host: {
                         '(keydown.control.s)': 'onSaveShortcut($event)',
                         class: 'ax-code-editor block',
-                    }, providers: [
+                    }, inputs: ['disabled', 'value', 'state', 'name', 'id'], outputs: ['onValueChanged', 'valueChange', 'stateChange', 'readonlyChange', 'disabledChange'], providers: [
                         { provide: AXValuableComponent, useExisting: AXCodeEditorComponent },
                         {
                             provide: NG_VALUE_ACCESSOR,
@@ -557,25 +880,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
                         },
                         { provide: AXComponent, useExisting: AXCodeEditorComponent },
                     ], template: `
-    <div
-      #host
-      class="cm-editor"
-      [attr.aria-label]="ariaLabel() ?? null"
-      [attr.aria-readonly]="readOnly() ? 'true' : 'false'"
-      [attr.data-placeholder]="placeholder() ?? null"
-      [style.height]="height() ?? null"
-      [style.minHeight]="minHeight() ?? null"
-      [style.maxHeight]="maxHeight() ?? null"
-    ></div>
-  `, styles: [":host{display:block;width:100%;transition:none}.cm-editor{width:100%;max-width:100%;box-sizing:border-box}.cm-editor.cm-focused{outline:none}\n"] }]
-        }], ctorParameters: () => [] });
+    <div class="ax-editor-container">
+      <div class="ax-code-editor-container">
+        <div
+          #host
+          class="cm-editor"
+          [attr.aria-label]="ariaLabel() ?? null"
+          [attr.aria-readonly]="editorReadonly() ? 'true' : 'false'"
+          [attr.data-placeholder]="placeholder() ?? null"
+        ></div>
+      </div>
+      <ng-content select="ax-validation-rule"> </ng-content>
+    </div>
+    <div class="ax-error-container"></div>
+  `, styles: [":host{display:block;width:100%;height:100%}:host .ax-editor-container{padding:.1rem}:host.ax-disable{opacity:.5;cursor:not-allowed}:host>.ax-editor-container{display:block;height:100%!important;--ax-comp-editor-space-start-size: 0;--ax-comp-editor-space-end-size: 0;overflow:visible;position:relative}:host .ax-code-editor-container{display:flex;flex-direction:column;height:100%}:host .cm-editor{width:100%;max-width:100%;overflow:auto}:host .cm-editor.cm-focused{outline:none}:host .ax-error-message{padding-inline:.5rem}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { language: [{ type: i0.Input, args: [{ isSignal: true, alias: "language", required: false }] }], editorReadonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], lineNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "lineNumbers", required: false }] }], lineWrapping: [{ type: i0.Input, args: [{ isSignal: true, alias: "lineWrapping", required: false }] }], tabSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabSize", required: false }] }], indentWithTab: [{ type: i0.Input, args: [{ isSignal: true, alias: "indentWithTab", required: false }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], extensions: [{ type: i0.Input, args: [{ isSignal: true, alias: "extensions", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], focusOnReady: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusOnReady", required: false }] }], formatOnSave: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatOnSave", required: false }] }], customCompletions: [{ type: i0.Input, args: [{ isSignal: true, alias: "customCompletions", required: false }] }], ready: [{ type: i0.Output, args: ["ready"] }], save: [{ type: i0.Output, args: ["save"] }], host: [{ type: i0.ViewChild, args: ['host', { isSignal: true }] }] } });
 
 class AXCodeEditorModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXCodeEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: AXCodeEditorModule, imports: [CommonModule, AXCodeEditorComponent], exports: [AXCodeEditorComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXCodeEditorModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXCodeEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: AXCodeEditorModule, imports: [CommonModule, AXCodeEditorComponent], exports: [AXCodeEditorComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXCodeEditorModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXCodeEditorModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXCodeEditorModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, AXCodeEditorComponent],
@@ -583,9 +909,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
                 }]
         }] });
 
+// Language plugins
+
+// Language plugins
+
+// Component & Module
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { AXCodeEditorComponent, AXCodeEditorModule };
+export { AXCodeEditorComponent, AXCodeEditorModule, AXCodeEditorPluginRegistry, AX_CODE_EDITOR_PLUGIN_CONFIG, CSSLanguagePlugin, GitHubDarkThemePlugin, GitHubLightThemePlugin, HTMLLanguagePlugin, JSONLanguagePlugin, JavaScriptLanguagePlugin, LightThemePlugin, MarkdownLanguagePlugin, OneDarkThemePlugin, PrettierFormatterPlugin, SQLLanguagePlugin, SassLanguagePlugin, TypeScriptLanguagePlugin, XMLLanguagePlugin, provideDefaultCodeEditorPlugins };
 //# sourceMappingURL=acorex-components-code-editor.mjs.map