@adaptabletools/adaptable 23.1.0-canary.2 → 24.0.0-canary.0

package/src/components/aql/ExpressionEditor/AqlCodeMirrorEditor.d.ts

@@ -0,0 +1,94 @@
+import * as React from 'react';
+import { type AqlEditorLintContext } from './aqlLint';
+import { type BraceCallPoolKind } from './aqlCompletionTypeContext';
+export type AqlInsertTextOptions = {
+    /**
+     * Placeholder inside `text` to leave selected after the insert (e.g. `col-here`
+     * in `CHANGE_COUNT{[col-here], WITHIN(duration-here)}`) so typing replaces it. Falls back
+     * to the caret inside the first empty `()` / `{}` slot.
+     */
+    selectPlaceholder?: string;
+};
+export type AqlExpressionEditorHandle = {
+    insertText: (text: string, options?: AqlInsertTextOptions) => void;
+    /** Canonical-print the whole document (parse → normalize → print). */
+    format: () => boolean;
+    focus: () => void;
+    getCursor: () => number | null;
+    getDom: () => HTMLElement | null;
+};
+export type AqlCodeMirrorEditorProps = {
+    value: string;
+    onChange: (value: string) => void;
+    onCursorChange?: (cursor: number | null) => void;
+    onHandleChange?: (handle: AqlExpressionEditorHandle | null) => void;
+    /** Fired when this editor surface receives focus (main vs WHERE). */
+    onActivate?: () => void;
+    placeholder?: string;
+    disabled?: boolean;
+    autoFocus?: boolean;
+    compact?: boolean;
+    /**
+     * `live` — compact / in-grid edit: per-column identity colours on `[` `]`
+     * (aligned with Formula Trace / column highlighting); column *names* use the
+     * shared column syntax colour.
+     * `regular` — wizard / settings: all column refs use the shared column colour
+     * (no identity accents on brackets).
+     */
+    editMode?: 'live' | 'regular';
+    className?: string;
+    style?: React.CSSProperties;
+    'data-name'?: string;
+    /** Scalar/paren function names offered in autocomplete (current module pool). */
+    functionNames?: string[];
+    /**
+     * Brace-callables offered in autocomplete (`NAME{…}` inserts with a kind
+     * badge). Dual names appearing in both lists produce two entries.
+     */
+    completionBraceCalls?: AqlCompletionBraceCall[];
+    /** Columns offered as `[columnId]` completions. */
+    completionColumns?: AqlCompletionColumn[];
+    /** Query variables offered as `VAR('name')` completions. */
+    completionVariables?: AqlCompletionVariable[];
+    /** Named queries offered as `QUERY("name")` completions. */
+    completionNamedQueries?: AqlCompletionNamedQuery[];
+    /**
+     * Module function pool for hover docs and argument-type cues.
+     * Prefer the full expressionFunctions map, not the autocomplete-filtered list.
+     */
+    lintExpressionFunctions?: Record<string, unknown>;
+    /**
+     * Scalar pool for hover docs on dual-name paren calls (`MAX(…)` vs `MAX{…}`).
+     */
+    hoverScalarFunctions?: Record<string, unknown>;
+    /**
+     * Structural lint configuration (pools / legacy kind / max window). When
+     * set, the linter runs the aql guard rails with quick-fix actions; the
+     * legacy kind also drives the Format action's normalization.
+     */
+    lintContext?: AqlEditorLintContext;
+};
+export type AqlCompletionBraceCall = {
+    name: string;
+    kind: BraceCallPoolKind;
+};
+export type AqlCompletionColumn = {
+    columnId: string;
+    friendlyName: string;
+    /** Adaptable column data type shown in the autocomplete row / hover. */
+    dataType?: string;
+    isCalculatedColumn?: boolean;
+    isFreeTextColumn?: boolean;
+    isPrimaryKey?: boolean;
+};
+export type AqlCompletionVariable = {
+    name: string;
+};
+export type AqlCompletionNamedQuery = {
+    name: string;
+};
+/**
+ * CodeMirror 6 spike surface for AQL expressions.
+ * Hybrid colouring: syntax roles + identity-coloured column brackets.
+ */
+export declare const AqlCodeMirrorEditor: React.ForwardRefExoticComponent<AqlCodeMirrorEditorProps & React.RefAttributes<AqlExpressionEditorHandle>>;

package/src/components/aql/ExpressionEditor/AqlCodeMirrorEditor.js

@@ -0,0 +1,522 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { EditorState, StateField } from '@codemirror/state';
+import { EditorView, hoverTooltip, keymap, placeholder as placeholderExt, Decoration, } from '@codemirror/view';
+import { defaultKeymap, history, historyKeymap } from '@codemirror/commands';
+import { autocompletion, completionKeymap } from '@codemirror/autocomplete';
+import { bracketMatching } from '@codemirror/language';
+import { linter } from '@codemirror/lint';
+import { cn } from '../../../lib/utils';
+import { buildAqlHoverTooltipDom, resolveAqlHoverTarget } from './aqlHover';
+import { buildAqlLintDiagnostics } from './aqlLint';
+import { collectAqlHighlightRanges } from './aqlExpressionHighlight';
+import { formatAqlExpression } from './formatAqlExpression';
+import { getFunctionInsertText } from './functionInsertText';
+import { findChipColumnPlaceholderRangeCovering, findChipDurationPlaceholderRangeCovering } from '../../../aql/chipColumnPlaceholder';
+import { getAcceptedInputTypesForBraceSlot, getAcceptedInputTypesForFunctionArg, getClauseCompletionsForCall, getClauseValueCompletions, isColumnDataTypeAccepted, resolveAqlCompletionCatalog, resolveEnclosingFunctionCall, resolveValueClause, } from './aqlCompletionTypeContext';
+const EMPTY_FUNCTION_CALL = /^((?:,\s*|\s+)?\$?[A-Za-z_][\w]*)(?:\(\)|\{\})$/;
+const EMPTY_FIRST_ARG_CALL = /^((?:,\s*|\s+)?\$?[A-Za-z_][\w]*)\(,/;
+const COLUMN_LIKE_INSERT = /^\[[^\]]+\]$/;
+const FIELD_LIKE_INSERT = /^FIELD\s*\(/i;
+const DURATION_LIKE_INSERT = /^\d+(ms|s|m|h|d)$/i;
+function aqlHighlightDecorations(docText, options) {
+    const marks = [];
+    for (const range of collectAqlHighlightRanges(docText, options)) {
+        marks.push(Decoration.mark({ class: range.className }).range(range.from, range.to));
+    }
+    return marks.length ? Decoration.set(marks, true) : Decoration.none;
+}
+function createAqlHighlightField(identityBrackets, dataTypeByColumnId) {
+    return StateField.define({
+        create(state) {
+            return aqlHighlightDecorations(state.doc.toString(), {
+                identityBrackets,
+                dataTypeByColumnId,
+            });
+        },
+        update(decorations, transaction) {
+            if (transaction.docChanged) {
+                return aqlHighlightDecorations(transaction.state.doc.toString(), {
+                    identityBrackets,
+                    dataTypeByColumnId,
+                });
+            }
+            return decorations;
+        },
+        provide: (field) => EditorView.decorations.from(field),
+    });
+}
+function formatColumnDataType(dataType) {
+    if (!dataType) {
+        return undefined;
+    }
+    return dataType.charAt(0).toUpperCase() + dataType.slice(1);
+}
+function buildColumnCompletionDetail(column) {
+    const formattedType = formatColumnDataType(column.dataType);
+    return formattedType ? `${column.columnId} (${formattedType})` : column.columnId;
+}
+function formatDocument(view) {
+    const current = view.state.doc.toString();
+    const formatted = formatAqlExpression(current);
+    if (formatted == null) {
+        return false;
+    }
+    view.dispatch({
+        changes: { from: 0, to: current.length, insert: formatted },
+        selection: { anchor: formatted.length },
+    });
+    return true;
+}
+function applyCallInsert(insert) {
+    const emptySlot = EMPTY_FUNCTION_CALL.exec(insert);
+    if (!emptySlot) {
+        return insert;
+    }
+    const cursorOffset = emptySlot[1].length + 1;
+    return (view, _completion, from, to) => {
+        view.dispatch({
+            changes: { from, to, insert },
+            selection: { anchor: from + cursorOffset },
+        });
+    };
+}
+function buildCompletionExtension(options) {
+    const braceCalls = [...options.braceCalls].sort((a, b) => a.name.localeCompare(b.name));
+    const braceCallKinds = new Map(braceCalls.map((call) => [call.name, call.kind]));
+    const braceCallNames = new Set(braceCallKinds.keys());
+    const functionNames = [...options.functionNames].sort((a, b) => a.localeCompare(b));
+    const columns = [...options.columns].sort((a, b) => a.friendlyName.localeCompare(b.friendlyName));
+    const variables = [...options.variables].sort((a, b) => a.name.localeCompare(b.name));
+    const namedQueries = [...options.namedQueries].sort((a, b) => a.name.localeCompare(b.name));
+    const expressionFunctions = options.expressionFunctions ?? {};
+    return autocompletion({
+        optionClass: (completion) => {
+            const classes = [];
+            if (completion.type === 'column') {
+                classes.push('ab-AqlCompletion--column');
+            }
+            if (completion.unsuitable) {
+                classes.push('ab-AqlCompletion--unsuitable');
+            }
+            return classes.join(' ');
+        },
+        override: [
+            (context) => {
+                const docText = context.state.doc.toString();
+                const valueClause = resolveValueClause(resolveEnclosingFunctionCall(docText, context.pos));
+                if (valueClause) {
+                    const literal = context.matchBefore(/duration-here|'?[\w.]*/);
+                    const literalFrom = literal?.from ?? context.pos;
+                    const literalTyped = (literal?.text ?? '').toLowerCase();
+                    const justOpened = docText[context.pos - 1] === '(';
+                    if (!literalTyped && !justOpened && !context.explicit) {
+                        return null;
+                    }
+                    const literalOptions = getClauseValueCompletions(valueClause).filter((option) => !literalTyped || option.apply.toLowerCase().startsWith(literalTyped));
+                    if (!literalOptions.length) {
+                        return null;
+                    }
+                    return {
+                        from: literalFrom,
+                        options: literalOptions.map((option) => ({
+                            label: option.label,
+                            detail: option.detail,
+                            type: 'constant',
+                            section: valueClause,
+                            apply: option.apply,
+                        })),
+                        filter: false,
+                        validFor: /^'?[\w]*$/,
+                    };
+                }
+                const word = context.matchBefore(/\[[A-Za-z0-9_\s.-]*|[A-Za-z_$][\w$]*/);
+                if (!word || (word.from === word.to && !context.explicit)) {
+                    return null;
+                }
+                const typedRaw = word.text;
+                const typed = typedRaw.startsWith('[')
+                    ? typedRaw.slice(1).toLowerCase()
+                    : typedRaw.toLowerCase();
+                if (!typed && !context.explicit && !typedRaw.startsWith('[')) {
+                    return null;
+                }
+                const enclosing = resolveEnclosingFunctionCall(docText, word.from);
+                const catalog = resolveAqlCompletionCatalog({
+                    typedRaw,
+                    enclosingFunction: enclosing,
+                });
+                if (catalog === 'none') {
+                    return null;
+                }
+                const acceptedTypes = enclosing == null
+                    ? null
+                    : enclosing.bracket === 'brace'
+                        ? getAcceptedInputTypesForBraceSlot(enclosing, braceCallKinds.get(enclosing.functionName), options.catalogue)
+                        : getAcceptedInputTypesForFunctionArg(expressionFunctions[enclosing.functionName], enclosing.argIndex);
+                const completions = [];
+                const includeValueLookups = catalog === 'valueRefs' || catalog === 'braceBody' || catalog === 'all';
+                const includeFunctions = catalog === 'all';
+                const includeClauses = catalog === 'braceBody' && enclosing?.bracket === 'brace';
+                for (const column of columns) {
+                    const haystack = `${column.friendlyName} ${column.columnId}`.toLowerCase();
+                    if (!typed || haystack.includes(typed)) {
+                        const suitable = acceptedTypes == null ||
+                            isColumnDataTypeAccepted(column.dataType, acceptedTypes);
+                        completions.push({
+                            label: column.friendlyName || column.columnId,
+                            detail: buildColumnCompletionDetail(column),
+                            type: 'column',
+                            section: 'Columns',
+                            apply: `[${column.columnId}]`,
+                            boost: suitable ? 4 : 2,
+                            unsuitable: !suitable,
+                        });
+                    }
+                }
+                if (includeValueLookups) {
+                    for (const variable of variables) {
+                        if (!typed || variable.name.toLowerCase().includes(typed)) {
+                            completions.push({
+                                label: variable.name,
+                                detail: 'Variable',
+                                type: 'variable',
+                                section: 'Variables',
+                                apply: `VAR('${variable.name}')`,
+                                boost: 2,
+                            });
+                        }
+                    }
+                    for (const namedQuery of namedQueries) {
+                        if (!typed || namedQuery.name.toLowerCase().includes(typed)) {
+                            completions.push({
+                                label: namedQuery.name,
+                                detail: 'Named Query',
+                                type: 'query',
+                                section: 'Named Queries',
+                                apply: `QUERY("${namedQuery.name}")`,
+                                boost: 2,
+                            });
+                        }
+                    }
+                }
+                if (includeClauses && enclosing) {
+                    for (const clause of getClauseCompletionsForCall(enclosing.functionName, braceCallKinds.get(enclosing.functionName), options.catalogue)) {
+                        if (!typed || clause.label.toLowerCase().includes(typed)) {
+                            completions.push({
+                                label: clause.label,
+                                detail: 'Clause',
+                                info: clause.info,
+                                type: 'keyword',
+                                section: 'Clauses',
+                                apply: applyCallInsert(clause.apply),
+                                boost: 3,
+                            });
+                        }
+                    }
+                }
+                if (includeFunctions) {
+                    for (const name of functionNames) {
+                        if (!typed || name.toLowerCase().includes(typed)) {
+                            const isDualName = braceCallNames.has(name);
+                            completions.push({
+                                label: isDualName ? `${name}(…)` : name,
+                                detail: 'Function',
+                                type: 'function',
+                                section: 'Functions',
+                                apply: applyCallInsert(getFunctionInsertText(name)),
+                                boost: 1,
+                            });
+                        }
+                    }
+                    for (const braceCall of braceCalls) {
+                        if (!typed || braceCall.name.toLowerCase().includes(typed)) {
+                            completions.push({
+                                label: `${braceCall.name}{…}`,
+                                detail: braceCall.kind === 'observable' ? 'Observable' : 'Aggregation',
+                                type: 'function',
+                                section: 'Functions',
+                                apply: applyCallInsert(`${braceCall.name}{}`),
+                                boost: 1,
+                            });
+                        }
+                    }
+                }
+                if (!completions.length) {
+                    return null;
+                }
+                completions.sort((a, b) => {
+                    const boostDelta = (b.boost ?? 0) - (a.boost ?? 0);
+                    if (boostDelta !== 0) {
+                        return boostDelta;
+                    }
+                    return a.label.localeCompare(b.label);
+                });
+                return {
+                    from: word.from,
+                    options: completions.slice(0, 60),
+                    filter: false,
+                    validFor: /^\[[A-Za-z0-9_\s.-]*$|^[A-Za-z_$][\w$]*$/,
+                };
+            },
+        ],
+    });
+}
+export const AqlCodeMirrorEditor = React.forwardRef(function AqlCodeMirrorEditor(props, ref) {
+    const hostRef = React.useRef(null);
+    const viewRef = React.useRef(null);
+    const onChangeRef = React.useRef(props.onChange);
+    const onCursorChangeRef = React.useRef(props.onCursorChange);
+    const onHandleChangeRef = React.useRef(props.onHandleChange);
+    const onActivateRef = React.useRef(props.onActivate);
+    onChangeRef.current = props.onChange;
+    onCursorChangeRef.current = props.onCursorChange;
+    onHandleChangeRef.current = props.onHandleChange;
+    onActivateRef.current = props.onActivate;
+    const functionNamesKey = (props.functionNames ?? []).join('\0');
+    const braceCallsKey = (props.completionBraceCalls ?? [])
+        .map((call) => `${call.name}:${call.kind}`)
+        .join('\0');
+    const columnsKey = (props.completionColumns ?? [])
+        .map((column) => `${column.columnId}:${column.friendlyName}:${column.dataType ?? ''}:${column.isCalculatedColumn ? 1 : 0}:${column.isFreeTextColumn ? 1 : 0}:${column.isPrimaryKey ? 1 : 0}`)
+        .join('\0');
+    const variablesKey = (props.completionVariables ?? []).map((variable) => variable.name).join('\0');
+    const namedQueriesKey = (props.completionNamedQueries ?? [])
+        .map((namedQuery) => namedQuery.name)
+        .join('\0');
+    const lintFunctionsKey = props.lintExpressionFunctions
+        ? Object.keys(props.lintExpressionFunctions).sort().join('\0')
+        : '';
+    const hoverScalarFunctionsKey = props.hoverScalarFunctions
+        ? Object.keys(props.hoverScalarFunctions).sort().join('\0')
+        : '';
+    const lintContext = props.lintContext;
+    const lintContextKey = lintContext
+        ? [
+            lintContext.legacyKind ?? '',
+            lintContext.maxWithinMs ?? '',
+            lintContext.maxHistoryPerCell ?? '',
+            lintContext.allowsObservableCalls ?? '',
+            Object.keys(lintContext.scalarFunctions ?? {}).sort().join(','),
+            (lintContext.catalogue?.customNames() ?? []).join(','),
+        ].join('\0')
+        : '';
+    const buildHandle = React.useCallback(() => {
+        return {
+            insertText: (text, options) => {
+                const view = viewRef.current;
+                if (!view || view.state.readOnly) {
+                    return;
+                }
+                const payload = text.trimEnd();
+                const withSpace = `${payload} `;
+                let { from, to } = view.state.selection.main;
+                if (COLUMN_LIKE_INSERT.test(payload) || FIELD_LIKE_INSERT.test(payload)) {
+                    const covering = findChipColumnPlaceholderRangeCovering(view.state.doc.toString(), {
+                        from,
+                        to,
+                    });
+                    if (covering) {
+                        from = covering.from;
+                        to = covering.to;
+                    }
+                }
+                else if (DURATION_LIKE_INSERT.test(payload)) {
+                    const covering = findChipDurationPlaceholderRangeCovering(view.state.doc.toString(), {
+                        from,
+                        to,
+                    });
+                    if (covering) {
+                        from = covering.from;
+                        to = covering.to;
+                    }
+                }
+                let selection = { anchor: from + withSpace.length };
+                const placeholderAt = options?.selectPlaceholder
+                    ? payload.indexOf(options.selectPlaceholder)
+                    : -1;
+                const emptySlotMatch = EMPTY_FUNCTION_CALL.exec(payload) ?? EMPTY_FIRST_ARG_CALL.exec(payload);
+                if (placeholderAt >= 0 && options?.selectPlaceholder) {
+                    selection = {
+                        anchor: from + placeholderAt,
+                        head: from + placeholderAt + options.selectPlaceholder.length,
+                    };
+                }
+                else if (emptySlotMatch) {
+                    selection = { anchor: from + emptySlotMatch[1].length + 1 };
+                }
+                view.dispatch({
+                    changes: { from, to, insert: withSpace },
+                    selection,
+                });
+                view.focus();
+            },
+            format: () => {
+                const view = viewRef.current;
+                if (!view || view.state.readOnly) {
+                    return false;
+                }
+                return formatDocument(view);
+            },
+            focus: () => viewRef.current?.focus(),
+            getCursor: () => {
+                const view = viewRef.current;
+                if (!view) {
+                    return null;
+                }
+                const sel = view.state.selection.main;
+                return sel.empty ? sel.from : null;
+            },
+            getDom: () => viewRef.current?.dom ?? null,
+        };
+    }, []);
+    React.useImperativeHandle(ref, buildHandle, [buildHandle]);
+    React.useEffect(() => {
+        if (!hostRef.current) {
+            return;
+        }
+        const updateListener = EditorView.updateListener.of((update) => {
+            if (update.docChanged) {
+                onChangeRef.current(update.state.doc.toString());
+            }
+            if (update.docChanged || update.selectionSet) {
+                const sel = update.state.selection.main;
+                onCursorChangeRef.current?.(sel.empty ? sel.from : null);
+            }
+            if (update.selectionSet &&
+                !update.docChanged &&
+                !update.view.state.readOnly &&
+                update.view.hasFocus) {
+                const sel = update.state.selection.main;
+                if (sel.empty) {
+                    const doc = update.state.doc.toString();
+                    const covering = findChipColumnPlaceholderRangeCovering(doc, { from: sel.from, to: sel.to }) ??
+                        findChipDurationPlaceholderRangeCovering(doc, { from: sel.from, to: sel.to });
+                    if (covering && sel.from >= covering.from && sel.from < covering.to) {
+                        update.view.dispatch({
+                            changes: { from: covering.from, to: covering.to, insert: '' },
+                            selection: { anchor: covering.from },
+                        });
+                    }
+                }
+            }
+        });
+        const isAdaptableDarkTheme = typeof document !== 'undefined' &&
+            document.documentElement.classList.contains('ab--theme-dark');
+        const identityBrackets = props.editMode === 'live';
+        const lintExpressionFunctions = props.lintExpressionFunctions;
+        const lintColumns = props.completionColumns;
+        const dataTypeByColumnId = new Map((props.completionColumns ?? []).map((column) => [column.columnId, column.dataType]));
+        const lintContextForRun = props.lintContext;
+        const extensions = [
+            history(),
+            keymap.of([
+                {
+                    key: 'Shift-Alt-f',
+                    run: (view) => formatDocument(view),
+                },
+                ...defaultKeymap,
+                ...historyKeymap,
+                ...completionKeymap,
+            ]),
+            EditorView.lineWrapping,
+            bracketMatching(),
+            createAqlHighlightField(identityBrackets, dataTypeByColumnId),
+            buildCompletionExtension({
+                functionNames: props.functionNames ?? [],
+                braceCalls: props.completionBraceCalls ?? [],
+                columns: props.completionColumns ?? [],
+                variables: props.completionVariables ?? [],
+                namedQueries: props.completionNamedQueries ?? [],
+                expressionFunctions: lintExpressionFunctions,
+                catalogue: lintContextForRun?.catalogue,
+            }),
+            linter((view) => buildAqlLintDiagnostics(view.state.doc.toString(), {
+                ...lintContextForRun,
+                columns: lintColumns,
+            }), { delay: 300 }),
+            hoverTooltip((view, pos) => {
+                const docText = view.state.doc.toString();
+                const target = resolveAqlHoverTarget(docText, pos);
+                if (!target) {
+                    return null;
+                }
+                const dom = buildAqlHoverTooltipDom(target, lintExpressionFunctions, props.hoverScalarFunctions, lintContextForRun?.catalogue, props.completionColumns);
+                if (!dom) {
+                    return null;
+                }
+                return {
+                    pos: target.from,
+                    end: target.to,
+                    above: true,
+                    create: () => ({ dom }),
+                };
+            }, { hoverTime: 350, hideOnChange: true }),
+            updateListener,
+            EditorView.domEventHandlers({
+                focus: () => {
+                    onActivateRef.current?.();
+                    return false;
+                },
+            }),
+            EditorState.readOnly.of(Boolean(props.disabled)),
+            EditorView.editable.of(!props.disabled),
+            EditorView.darkTheme.of(isAdaptableDarkTheme),
+            EditorView.theme({
+                '&': { height: '100%' },
+                '.cm-scroller': { overflow: 'auto', fontFamily: 'inherit' },
+                '.cm-content': { caretColor: 'var(--ab-color-foreground)' },
+            }),
+        ];
+        if (props.placeholder) {
+            extensions.push(placeholderExt(props.placeholder));
+        }
+        const state = EditorState.create({
+            doc: props.value ?? '',
+            extensions,
+        });
+        const view = new EditorView({
+            state,
+            parent: hostRef.current,
+        });
+        viewRef.current = view;
+        const handle = buildHandle();
+        onHandleChangeRef.current?.(handle);
+        if (props.autoFocus) {
+            requestAnimationFrame(() => view.focus());
+        }
+        return () => {
+            onHandleChangeRef.current?.(null);
+            view.destroy();
+            viewRef.current = null;
+        };
+    }, [
+        functionNamesKey,
+        braceCallsKey,
+        columnsKey,
+        variablesKey,
+        namedQueriesKey,
+        lintFunctionsKey,
+        hoverScalarFunctionsKey,
+        lintContextKey,
+        props.disabled,
+        props.placeholder,
+        props.compact,
+        props.editMode,
+        buildHandle,
+    ]);
+    React.useEffect(() => {
+        const view = viewRef.current;
+        if (!view) {
+            return;
+        }
+        const current = view.state.doc.toString();
+        if (current === (props.value ?? '')) {
+            return;
+        }
+        view.dispatch({
+            changes: { from: 0, to: current.length, insert: props.value ?? '' },
+        });
+    }, [props.value]);
+    return (_jsx("div", { ref: hostRef, "data-name": props['data-name'], className: cn('ab-AqlCodeMirror', props.compact ? 'ab-AqlCodeMirror--compact' : 'ab-AqlCodeMirror--full', props.editMode === 'live' && 'ab-AqlCodeMirror--live', props.disabled && 'ab-AqlCodeMirror--disabled', props.className), style: props.style }));
+});