@api-client/ui 0.5.11 → 0.5.13

package/build/src/elements/code-editor/internals/CodeEditor.js

@@ -0,0 +1,643 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { html, LitElement, nothing } from 'lit';
+import { property, query, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { linter } from '@codemirror/lint';
+import { EditorState } from '@codemirror/state';
+import { autocompletion, } from '@codemirror/autocomplete';
+import { javascript } from '@codemirror/lang-javascript';
+import { syntaxHighlighting, defaultHighlightStyle } from '@codemirror/language';
+import { oneDark } from '@codemirror/theme-one-dark';
+import { keymap } from '@codemirror/view';
+import { defaultKeymap } from '@codemirror/commands';
+import { EditorView, Decoration, ViewPlugin, hoverTooltip, } from '@codemirror/view';
+import { functionLinter } from './Linter.js';
+import { SuggestionMatchDecorator } from './SuggestionMatchDecorator.js';
+let CodeEditor = (() => {
+    let _classSuper = LitElement;
+    let _label_decorators;
+    let _label_initializers = [];
+    let _label_extraInitializers = [];
+    let _supportingText_decorators;
+    let _supportingText_initializers = [];
+    let _supportingText_extraInitializers = [];
+    let _disabled_decorators;
+    let _disabled_initializers = [];
+    let _disabled_extraInitializers = [];
+    let _invalid_decorators;
+    let _invalid_initializers = [];
+    let _invalid_extraInitializers = [];
+    let _name_decorators;
+    let _name_initializers = [];
+    let _name_extraInitializers = [];
+    let _required_decorators;
+    let _required_initializers = [];
+    let _required_extraInitializers = [];
+    let _placeholder_decorators;
+    let _placeholder_initializers = [];
+    let _placeholder_extraInitializers = [];
+    let _value_decorators;
+    let _value_initializers = [];
+    let _value_extraInitializers = [];
+    let _functionSchemas_decorators;
+    let _functionSchemas_initializers = [];
+    let _functionSchemas_extraInitializers = [];
+    let _suggestions_decorators;
+    let _suggestions_initializers = [];
+    let _suggestions_extraInitializers = [];
+    let _darkTheme_decorators;
+    let _darkTheme_initializers = [];
+    let _darkTheme_extraInitializers = [];
+    let _language_decorators;
+    let _language_initializers = [];
+    let _language_extraInitializers = [];
+    let _editorContainer_decorators;
+    let _editorContainer_initializers = [];
+    let _editorContainer_extraInitializers = [];
+    let _hasContent_decorators;
+    let _hasContent_initializers = [];
+    let _hasContent_extraInitializers = [];
+    let _isEditorFocus_decorators;
+    let _isEditorFocus_initializers = [];
+    let _isEditorFocus_extraInitializers = [];
+    return class CodeEditor extends _classSuper {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _label_decorators = [property({ type: String })];
+            _supportingText_decorators = [property({ type: String, attribute: 'supporting-text' })];
+            _disabled_decorators = [property({ type: Boolean, reflect: true })];
+            _invalid_decorators = [property({ type: Boolean, reflect: true })];
+            _name_decorators = [property({ type: String })];
+            _required_decorators = [property({ type: Boolean })];
+            _placeholder_decorators = [property({ type: String })];
+            _value_decorators = [property({ type: String })];
+            _functionSchemas_decorators = [property({ type: Array, attribute: false })];
+            _suggestions_decorators = [property({ type: Array, attribute: false })];
+            _darkTheme_decorators = [property({ type: Boolean, attribute: 'dark-theme' })];
+            _language_decorators = [property({ type: String })];
+            _editorContainer_decorators = [query('.editor-container')];
+            _hasContent_decorators = [state()];
+            _isEditorFocus_decorators = [state()];
+            __esDecorate(this, null, _label_decorators, { kind: "accessor", name: "label", static: false, private: false, access: { has: obj => "label" in obj, get: obj => obj.label, set: (obj, value) => { obj.label = value; } }, metadata: _metadata }, _label_initializers, _label_extraInitializers);
+            __esDecorate(this, null, _supportingText_decorators, { kind: "accessor", name: "supportingText", static: false, private: false, access: { has: obj => "supportingText" in obj, get: obj => obj.supportingText, set: (obj, value) => { obj.supportingText = value; } }, metadata: _metadata }, _supportingText_initializers, _supportingText_extraInitializers);
+            __esDecorate(this, null, _disabled_decorators, { kind: "accessor", name: "disabled", static: false, private: false, access: { has: obj => "disabled" in obj, get: obj => obj.disabled, set: (obj, value) => { obj.disabled = value; } }, metadata: _metadata }, _disabled_initializers, _disabled_extraInitializers);
+            __esDecorate(this, null, _invalid_decorators, { kind: "accessor", name: "invalid", static: false, private: false, access: { has: obj => "invalid" in obj, get: obj => obj.invalid, set: (obj, value) => { obj.invalid = value; } }, metadata: _metadata }, _invalid_initializers, _invalid_extraInitializers);
+            __esDecorate(this, null, _name_decorators, { kind: "accessor", name: "name", static: false, private: false, access: { has: obj => "name" in obj, get: obj => obj.name, set: (obj, value) => { obj.name = value; } }, metadata: _metadata }, _name_initializers, _name_extraInitializers);
+            __esDecorate(this, null, _required_decorators, { kind: "accessor", name: "required", static: false, private: false, access: { has: obj => "required" in obj, get: obj => obj.required, set: (obj, value) => { obj.required = value; } }, metadata: _metadata }, _required_initializers, _required_extraInitializers);
+            __esDecorate(this, null, _placeholder_decorators, { kind: "accessor", name: "placeholder", static: false, private: false, access: { has: obj => "placeholder" in obj, get: obj => obj.placeholder, set: (obj, value) => { obj.placeholder = value; } }, metadata: _metadata }, _placeholder_initializers, _placeholder_extraInitializers);
+            __esDecorate(this, null, _value_decorators, { kind: "accessor", name: "value", static: false, private: false, access: { has: obj => "value" in obj, get: obj => obj.value, set: (obj, value) => { obj.value = value; } }, metadata: _metadata }, _value_initializers, _value_extraInitializers);
+            __esDecorate(this, null, _functionSchemas_decorators, { kind: "accessor", name: "functionSchemas", static: false, private: false, access: { has: obj => "functionSchemas" in obj, get: obj => obj.functionSchemas, set: (obj, value) => { obj.functionSchemas = value; } }, metadata: _metadata }, _functionSchemas_initializers, _functionSchemas_extraInitializers);
+            __esDecorate(this, null, _suggestions_decorators, { kind: "accessor", name: "suggestions", static: false, private: false, access: { has: obj => "suggestions" in obj, get: obj => obj.suggestions, set: (obj, value) => { obj.suggestions = value; } }, metadata: _metadata }, _suggestions_initializers, _suggestions_extraInitializers);
+            __esDecorate(this, null, _darkTheme_decorators, { kind: "accessor", name: "darkTheme", static: false, private: false, access: { has: obj => "darkTheme" in obj, get: obj => obj.darkTheme, set: (obj, value) => { obj.darkTheme = value; } }, metadata: _metadata }, _darkTheme_initializers, _darkTheme_extraInitializers);
+            __esDecorate(this, null, _language_decorators, { kind: "accessor", name: "language", static: false, private: false, access: { has: obj => "language" in obj, get: obj => obj.language, set: (obj, value) => { obj.language = value; } }, metadata: _metadata }, _language_initializers, _language_extraInitializers);
+            __esDecorate(this, null, _editorContainer_decorators, { kind: "accessor", name: "editorContainer", static: false, private: false, access: { has: obj => "editorContainer" in obj, get: obj => obj.editorContainer, set: (obj, value) => { obj.editorContainer = value; } }, metadata: _metadata }, _editorContainer_initializers, _editorContainer_extraInitializers);
+            __esDecorate(this, null, _hasContent_decorators, { kind: "accessor", name: "hasContent", static: false, private: false, access: { has: obj => "hasContent" in obj, get: obj => obj.hasContent, set: (obj, value) => { obj.hasContent = value; } }, metadata: _metadata }, _hasContent_initializers, _hasContent_extraInitializers);
+            __esDecorate(this, null, _isEditorFocus_decorators, { kind: "accessor", name: "isEditorFocus", static: false, private: false, access: { has: obj => "isEditorFocus" in obj, get: obj => obj.isEditorFocus, set: (obj, value) => { obj.isEditorFocus = value; } }, metadata: _metadata }, _isEditorFocus_initializers, _isEditorFocus_extraInitializers);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        /**
+         * Shadow root configuration for the component.
+         * Uses 'open' mode for accessibility and delegates focus to enable proper focus management.
+         */
+        static shadowRootOptions = {
+            mode: 'open',
+            delegatesFocus: true,
+        };
+        #label_accessor_storage = __runInitializers(this, _label_initializers, ''
+        /**
+         * Supporting text displayed below the editor
+         */
+        );
+        /**
+         * The label text displayed as placeholder/floating label
+         */
+        get label() { return this.#label_accessor_storage; }
+        set label(value) { this.#label_accessor_storage = value; }
+        #supportingText_accessor_storage = (__runInitializers(this, _label_extraInitializers), __runInitializers(this, _supportingText_initializers, ''
+        /**
+         * Whether the component is disabled
+         */
+        ));
+        /**
+         * Supporting text displayed below the editor
+         */
+        get supportingText() { return this.#supportingText_accessor_storage; }
+        set supportingText(value) { this.#supportingText_accessor_storage = value; }
+        #disabled_accessor_storage = (__runInitializers(this, _supportingText_extraInitializers), __runInitializers(this, _disabled_initializers, false
+        /**
+         * Whether the component is in an invalid state
+         */
+        ));
+        /**
+         * Whether the component is disabled
+         */
+        get disabled() { return this.#disabled_accessor_storage; }
+        set disabled(value) { this.#disabled_accessor_storage = value; }
+        #invalid_accessor_storage = (__runInitializers(this, _disabled_extraInitializers), __runInitializers(this, _invalid_initializers, false
+        /**
+         * The name attribute for form integration
+         */
+        ));
+        /**
+         * Whether the component is in an invalid state
+         */
+        get invalid() { return this.#invalid_accessor_storage; }
+        set invalid(value) { this.#invalid_accessor_storage = value; }
+        #name_accessor_storage = (__runInitializers(this, _invalid_extraInitializers), __runInitializers(this, _name_initializers, ''
+        /**
+         * Whether the input is required
+         */
+        ));
+        /**
+         * The name attribute for form integration
+         */
+        get name() { return this.#name_accessor_storage; }
+        set name(value) { this.#name_accessor_storage = value; }
+        #required_accessor_storage = (__runInitializers(this, _name_extraInitializers), __runInitializers(this, _required_initializers, false
+        /**
+         * Placeholder text shown when editor is empty
+         */
+        ));
+        /**
+         * Whether the input is required
+         */
+        get required() { return this.#required_accessor_storage; }
+        set required(value) { this.#required_accessor_storage = value; }
+        #placeholder_accessor_storage = (__runInitializers(this, _required_extraInitializers), __runInitializers(this, _placeholder_initializers, ''
+        /**
+         * The editor content value
+         */
+        ));
+        /**
+         * Placeholder text shown when editor is empty
+         */
+        get placeholder() { return this.#placeholder_accessor_storage; }
+        set placeholder(value) { this.#placeholder_accessor_storage = value; }
+        #value_accessor_storage = (__runInitializers(this, _placeholder_extraInitializers), __runInitializers(this, _value_initializers, ''
+        /**
+         * Available function schemas for autocomplete
+         */
+        ));
+        /**
+         * The editor content value
+         */
+        get value() { return this.#value_accessor_storage; }
+        set value(value) { this.#value_accessor_storage = value; }
+        #functionSchemas_accessor_storage = (__runInitializers(this, _value_extraInitializers), __runInitializers(this, _functionSchemas_initializers, []
+        /**
+         * Available suggestions for autocomplete
+         */
+        ));
+        /**
+         * Available function schemas for autocomplete
+         */
+        get functionSchemas() { return this.#functionSchemas_accessor_storage; }
+        set functionSchemas(value) { this.#functionSchemas_accessor_storage = value; }
+        #suggestions_accessor_storage = (__runInitializers(this, _functionSchemas_extraInitializers), __runInitializers(this, _suggestions_initializers, []
+        /**
+         * Whether to use dark theme
+         */
+        ));
+        /**
+         * Available suggestions for autocomplete
+         */
+        get suggestions() { return this.#suggestions_accessor_storage; }
+        set suggestions(value) { this.#suggestions_accessor_storage = value; }
+        #darkTheme_accessor_storage = (__runInitializers(this, _suggestions_extraInitializers), __runInitializers(this, _darkTheme_initializers, false
+        /**
+         * Programming language for syntax highlighting
+         */
+        ));
+        /**
+         * Whether to use dark theme
+         */
+        get darkTheme() { return this.#darkTheme_accessor_storage; }
+        set darkTheme(value) { this.#darkTheme_accessor_storage = value; }
+        #language_accessor_storage = (__runInitializers(this, _darkTheme_extraInitializers), __runInitializers(this, _language_initializers, 'javascript'));
+        /**
+         * Programming language for syntax highlighting
+         */
+        get language() { return this.#language_accessor_storage; }
+        set language(value) { this.#language_accessor_storage = value; }
+        #editorContainer_accessor_storage = (__runInitializers(this, _language_extraInitializers), __runInitializers(this, _editorContainer_initializers, void 0));
+        get editorContainer() { return this.#editorContainer_accessor_storage; }
+        set editorContainer(value) { this.#editorContainer_accessor_storage = value; }
+        #hasContent_accessor_storage = (__runInitializers(this, _editorContainer_extraInitializers), __runInitializers(this, _hasContent_initializers, false));
+        get hasContent() { return this.#hasContent_accessor_storage; }
+        set hasContent(value) { this.#hasContent_accessor_storage = value; }
+        #isEditorFocus_accessor_storage = (__runInitializers(this, _hasContent_extraInitializers), __runInitializers(this, _isEditorFocus_initializers, false));
+        get isEditorFocus() { return this.#isEditorFocus_accessor_storage; }
+        set isEditorFocus(value) { this.#isEditorFocus_accessor_storage = value; }
+        editorView = __runInitializers(this, _isEditorFocus_extraInitializers);
+        _previousValue = '';
+        /**
+         * Matcher for suggestion placeholders in the editor.
+         */
+        placeholderMatcher;
+        /**
+         * Get all suggestions (placeholders) currently in the editor
+         */
+        get activeSuggestions() {
+            const suggestions = [];
+            const placeholderPattern = /\{\{(\w+)\}\}/g;
+            let match;
+            while ((match = placeholderPattern.exec(this.value)) !== null) {
+                const placeholderText = match[1];
+                // Find suggestion by label
+                const suggestion = this.suggestions.find((s) => s.label.toLowerCase() === placeholderText.toLowerCase());
+                if (suggestion) {
+                    suggestions.push(suggestion);
+                }
+            }
+            return suggestions;
+        }
+        disconnectedCallback() {
+            super.disconnectedCallback();
+            this.editorView?.destroy();
+        }
+        firstUpdated() {
+            this.initializeCodeMirror();
+            this.updateEditorContent();
+        }
+        willUpdate(changedProperties) {
+            super.willUpdate(changedProperties);
+            if (changedProperties.has('suggestions')) {
+                if (this.placeholderMatcher) {
+                    this.placeholderMatcher.suggestions = this.suggestions || [];
+                }
+            }
+            if (changedProperties.has('value') && this.editorView) {
+                this.updateEditorContent();
+            }
+            if (changedProperties.has('disabled')) {
+                this.updateEditorState();
+            }
+        }
+        /**
+         * Initialize CodeMirror editor with extensions
+         */
+        initializeCodeMirror() {
+            const extensions = [
+                keymap.of(defaultKeymap),
+                syntaxHighlighting(defaultHighlightStyle),
+                autocompletion({
+                    override: [this.createCompletionSource()],
+                    activateOnTyping: true,
+                    maxRenderedOptions: 10,
+                }),
+                EditorView.updateListener.of((update) => {
+                    if (update.docChanged) {
+                        this.handleEditorChange();
+                    }
+                    if (update.focusChanged) {
+                        this.handleFocusChange(update.view.hasFocus);
+                    }
+                }),
+                this.createPlaceholderPlugin(),
+                hoverTooltip(this.createHoverTooltipSource),
+                linter((view) => functionLinter(view, this.functionSchemas, (e) => this.dispatchEvent(e))),
+            ];
+            // Add language support
+            if (this.language === 'javascript') {
+                extensions.push(javascript());
+            }
+            // Add theme
+            if (this.darkTheme) {
+                extensions.push(oneDark);
+            }
+            // Add placeholder
+            if (this.placeholder) {
+                extensions.push(EditorView.contentAttributes.of({
+                    'aria-placeholder': this.placeholder,
+                }));
+            }
+            const state = EditorState.create({
+                doc: this.value,
+                extensions,
+            });
+            this.editorView = new EditorView({
+                state,
+                parent: this.editorContainer,
+            });
+        }
+        /**
+         * Creates the ViewPlugin for rendering suggestion placeholders.
+         * This is created as a method to get access to the component's `suggestions`.
+         */
+        createPlaceholderPlugin() {
+            const placeholderMatcher = new SuggestionMatchDecorator(/\{\{(\w+)\}\}/g, this.suggestions);
+            this.placeholderMatcher = placeholderMatcher;
+            // This class needs to be defined here to have access to the `placeholderMatcher`
+            class AtomicDecorationRange {
+                placeholders;
+                constructor(view) {
+                    this.placeholders = placeholderMatcher.createDeco(view);
+                }
+                update(update) {
+                    this.placeholders = placeholderMatcher.updateDeco(update, this.placeholders);
+                }
+            }
+            return ViewPlugin.fromClass(AtomicDecorationRange, {
+                decorations: (instance) => instance.placeholders,
+                provide: (plugin) => EditorView.atomicRanges.of((view) => view.plugin(plugin)?.placeholders || Decoration.none),
+            });
+        }
+        /**
+         * Create completion source for functions and suggestions
+         */
+        createCompletionSource() {
+            return (context) => {
+                const { pos } = context;
+                const line = context.state.doc.lineAt(pos);
+                const textBefore = line.text.slice(0, pos - line.from);
+                // Check if we're typing a function name
+                const functionMatch = textBefore.match(/(\w+)$/);
+                if (functionMatch) {
+                    const prefix = functionMatch[1];
+                    const functions = this.functionSchemas
+                        .filter((fn) => fn.name.toLowerCase().startsWith(prefix.toLowerCase()))
+                        .map((fn) => this.createFunctionCompletion(fn));
+                    if (functions.length > 0) {
+                        return {
+                            from: pos - prefix.length,
+                            options: functions,
+                        };
+                    }
+                }
+                // Check if we're typing a suggestion trigger (e.g., {{)
+                const suggestionMatch = textBefore.match(/\{\{(\w*)$/);
+                if (suggestionMatch) {
+                    const prefix = suggestionMatch[1];
+                    const suggestions = this.suggestions
+                        .filter((suggestion) => suggestion.label.toLowerCase().startsWith(prefix.toLowerCase()))
+                        .map((suggestion) => this.createSuggestionCompletion(suggestion));
+                    if (suggestions.length > 0) {
+                        return {
+                            from: pos - prefix.length,
+                            options: suggestions,
+                        };
+                    }
+                }
+                return null;
+            };
+        }
+        createFunctionCompletion(schema) {
+            const result = {
+                label: schema.name,
+                detail: schema.description || '',
+                info: () => this.createFunctionInfoElement(schema),
+                apply: (view, completion, from, to) => {
+                    const functionCall = this.formatFunctionCall(schema);
+                    view.dispatch({
+                        changes: { from, to, insert: functionCall },
+                        selection: { anchor: from + functionCall.length },
+                    });
+                    this.dispatchFunctionInsert(schema, from);
+                },
+            };
+            return result;
+        }
+        createSuggestionCompletion(suggestion) {
+            const result = {
+                label: suggestion.label,
+                detail: suggestion.description || '',
+                info: suggestion.suffix || '',
+                apply: (view, completion, from, to) => {
+                    const placeholderText = `{{${suggestion.label}}}`;
+                    view.dispatch({
+                        changes: { from: from - 2, to, insert: placeholderText }, // -2 to include the {{
+                        selection: { anchor: from - 2 + placeholderText.length },
+                    });
+                    this.dispatchSuggestionInsert(suggestion, from - 2);
+                },
+            };
+            return result;
+        }
+        /**
+         * Creates the source for the hover tooltips.
+         * This is an arrow function to automatically bind `this`.
+         */
+        createHoverTooltipSource = (view, pos) => {
+            const word = view.state.wordAt(pos);
+            if (!word) {
+                return null;
+            }
+            const functionName = view.state.doc.sliceString(word.from, word.to);
+            const fnSchema = this.functionSchemas.find((schema) => schema.name === functionName);
+            if (!fnSchema) {
+                return null;
+            }
+            return {
+                pos: word.from,
+                end: word.to,
+                above: true,
+                create: () => ({ dom: this.createFunctionInfoElement(fnSchema) }),
+            };
+        };
+        /**
+         * Creates a styled HTML element to display function documentation.
+         * This is used for both hover tooltips and autocomplete info panels.
+         */
+        createFunctionInfoElement(fn) {
+            const container = document.createElement('div');
+            container.className = 'function-info'; // for styling
+            if (fn.description) {
+                const description = document.createElement('p');
+                description.className = 'description';
+                description.textContent = fn.description;
+                container.appendChild(description);
+            }
+            if (fn.parameters && fn.parameters.length > 0) {
+                const paramsContainer = document.createElement('div');
+                paramsContainer.className = 'parameters';
+                const paramsHeader = document.createElement('h4');
+                paramsHeader.textContent = 'Parameters';
+                paramsContainer.appendChild(paramsHeader);
+                const paramsList = document.createElement('ul');
+                fn.parameters.forEach((param) => {
+                    const listItem = document.createElement('li');
+                    const name = document.createElement('span');
+                    name.className = 'param-name';
+                    name.textContent = param.name;
+                    const type = document.createElement('span');
+                    type.className = 'param-type';
+                    type.textContent = `: ${param.type}`;
+                    listItem.appendChild(name);
+                    listItem.appendChild(type);
+                    if (param.description) {
+                        const paramDesc = document.createElement('p');
+                        paramDesc.className = 'param-description';
+                        paramDesc.textContent = param.description;
+                        listItem.appendChild(paramDesc);
+                    }
+                    paramsList.appendChild(listItem);
+                });
+                paramsContainer.appendChild(paramsList);
+                container.appendChild(paramsContainer);
+            }
+            if (fn.returns) {
+                const returnsContainer = document.createElement('div');
+                returnsContainer.className = 'returns';
+                const returnsHeader = document.createElement('h4');
+                returnsHeader.textContent = 'Returns';
+                returnsContainer.appendChild(returnsHeader);
+                const returnsDesc = document.createElement('p');
+                returnsDesc.textContent = fn.returns;
+                returnsContainer.appendChild(returnsDesc);
+                container.appendChild(returnsContainer);
+            }
+            return container;
+        }
+        /**
+         * Format function call with parameters
+         */
+        formatFunctionCall(fn) {
+            if (!fn.parameters || fn.parameters.length === 0) {
+                return `${fn.name}()`;
+            }
+            const params = fn.parameters
+                .map((param) => {
+                if (param.required) {
+                    return param.name;
+                }
+                return `${param.name}?`;
+            })
+                .join(', ');
+            return `${fn.name}(${params})`;
+        }
+        /**
+         * Update editor content when value changes
+         */
+        updateEditorContent() {
+            if (!this.editorView)
+                return;
+            const currentValue = this.editorView.state.doc.toString();
+            if (currentValue !== this.value) {
+                this.editorView.dispatch({
+                    changes: {
+                        from: 0,
+                        to: this.editorView.state.doc.length,
+                        insert: this.value,
+                    },
+                });
+            }
+        }
+        /**
+         * Update editor state (e.g., disabled state)
+         */
+        updateEditorState() {
+            if (!this.editorView)
+                return;
+            // For now, we'll handle disabled state differently
+            // CodeMirror 6 doesn't use reconfigure for editable
+            if (this.disabled) {
+                this.editorView.contentDOM.setAttribute('contenteditable', 'false');
+            }
+            else {
+                this.editorView.contentDOM.setAttribute('contenteditable', 'true');
+            }
+        }
+        /**
+         * Handle editor content change
+         */
+        handleEditorChange() {
+            if (!this.editorView)
+                return;
+            const newValue = this.editorView.state.doc.toString();
+            if (newValue !== this._previousValue) {
+                this._previousValue = newValue;
+                this.value = newValue;
+                this.hasContent = newValue.length > 0;
+                this.dispatchEvent(new Event('input', { bubbles: true }));
+            }
+        }
+        /**
+         * Handle focus change
+         */
+        handleFocusChange(hasFocus) {
+            this.isEditorFocus = hasFocus;
+            if (!hasFocus && this.value !== this._previousValue) {
+                this.dispatchEvent(new Event('change', { bubbles: true }));
+            }
+        }
+        /**
+         * Dispatch function insert event
+         */
+        dispatchFunctionInsert(functionSchema, position) {
+            const event = new CustomEvent('function-insert', {
+                detail: { functionSchema, position },
+                bubbles: true,
+            });
+            this.dispatchEvent(event);
+        }
+        /**
+         * Dispatch suggestion insert event
+         */
+        dispatchSuggestionInsert(suggestion, position) {
+            const event = new CustomEvent('suggestion-insert', {
+                detail: { suggestion, position },
+                bubbles: true,
+            });
+            this.dispatchEvent(event);
+        }
+        /**
+         * Focus the editor
+         */
+        focus() {
+            this.editorView?.focus();
+        }
+        /**
+         * Get the editor's current selection
+         */
+        getSelection() {
+            if (!this.editorView)
+                return null;
+            const { from, to } = this.editorView.state.selection.main;
+            return { from, to };
+        }
+        /**
+         * Insert text at the current cursor position
+         */
+        insertText(text) {
+            if (!this.editorView)
+                return;
+            const { from, to } = this.editorView.state.selection.main;
+            this.editorView.dispatch({
+                changes: { from, to, insert: text },
+                selection: { anchor: from + text.length },
+            });
+        }
+        render() {
+            const hasLabel = !!this.label;
+            const hasSupportingText = !!this.supportingText;
+            return html `
+      <div class="surface ${classMap({ 'has-focus': this.isEditorFocus, 'invalid': this.invalid })}">
+        <div class="content">
+          ${hasLabel ? html `<div class="label">${this.label}</div>` : nothing}
+
+          <div class="editor-container" part="editor"></div>
+        </div>
+
+        ${hasSupportingText ? html `<div class="supporting-text">${this.supportingText}</div>` : nothing}
+      </div>
+    `;
+        }
+    };
+})();
+/**
+ * A CodeMirror 6 based editor component that supports function autocomplete and suggestion placeholders.
+ *
+ * Features:
+ * - Dynamic function schema loading
+ * - Autocomplete for functions and suggestions
+ * - Suggestion placeholders with double curly braces ({{suggestion}})
+ * - Keyboard navigation
+ * - Accessibility support
+ *
+ * @fires function-insert - When a function is inserted
+ * @fires suggestion-insert - When a suggestion is inserted
+ * @fires input - When the editor content changes
+ * @fires change - When the editor loses focus and content has changed
+ */
+export default CodeEditor;
+//# sourceMappingURL=CodeEditor.js.map