@harborclient/sdk 1.0.21 → 1.0.25

package/dist/components/CodeEditor/index.js

@@ -1,122 +1,37 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@harborclient/sdk/jsx-runtime";
-import { autocompletion } from '@codemirror/autocomplete';
+import { autocompletion, closeCompletion } from '@codemirror/autocomplete';
 import { javascript } from '@codemirror/lang-javascript';
 import { json } from '@codemirror/lang-json';
-import { HighlightStyle, StreamLanguage, syntaxHighlighting } from '@codemirror/language';
+import { StreamLanguage } from '@codemirror/language';
 import { shell } from '@codemirror/legacy-modes/mode/shell';
-import { Decoration, EditorView, MatchDecorator, ViewPlugin, hoverTooltip } from '@codemirror/view';
+import { Prec } from '@codemirror/state';
+import { Decoration, EditorView, MatchDecorator, ViewPlugin, hoverTooltip, keymap } from '@codemirror/view';
 import CodeMirrorImport from '@uiw/react-codemirror';
-import { tags } from '@lezer/highlight';
-import { useEffect, useId, useMemo, useRef, useState, createElement } from '@harborclient/sdk/react';
+import { useCallback, useEffect, useId, useMemo, useRef, useState, createElement } from '@harborclient/sdk/react';
 import { getVariableTooltipContent, VARIABLE_NAME_CHARS } from '../../variables/index.js';
+import { normalizeCodeEditorFontSize } from '../../ui/codeEditorSettings.js';
 import { useCodeEditorConfig } from './config.js';
+import { createBuiltInSyntaxHighlighting, createEditorTheme } from './editorChrome.js';
+import { createSlashCommandHighlighter } from './slashCommandHighlighter.js';
+import { createSyntaxHighlightedPlaceholder } from './syntaxHighlightedPlaceholder.js';
 import { getCodeEditorThemeExtension } from './themes.js';
 export { CODE_EDITOR_THEME_OPTIONS } from './themes.js';
-const lightHighlight = HighlightStyle.define([
-    { tag: tags.propertyName, color: '#881391' },
-    { tag: tags.string, color: '#c41a16' },
-    { tag: tags.number, color: '#1c00cf' },
-    { tag: tags.bool, color: '#1c00cf' },
-    { tag: tags.null, color: '#1c00cf' },
-    { tag: tags.keyword, color: '#881391' },
-    { tag: tags.bracket, color: 'var(--mac-text)' },
-    { tag: tags.punctuation, color: 'var(--mac-muted)' },
-    { tag: tags.comment, color: 'var(--mac-muted)', fontStyle: 'italic' }
-]);
-const darkHighlight = HighlightStyle.define([
-    { tag: tags.propertyName, color: '#ff7ab2' },
-    { tag: tags.string, color: '#ff8170' },
-    { tag: tags.number, color: '#78dce8' },
-    { tag: tags.bool, color: '#78dce8' },
-    { tag: tags.null, color: '#78dce8' },
-    { tag: tags.keyword, color: '#ff7ab2' },
-    { tag: tags.bracket, color: 'var(--mac-text)' },
-    { tag: tags.punctuation, color: 'var(--mac-muted)' },
-    { tag: tags.comment, color: 'var(--mac-muted)', fontStyle: 'italic' }
-]);
-const editorTheme = EditorView.theme({
-    '&': {
-        backgroundColor: 'transparent',
-        color: 'var(--mac-text)'
-    },
-    '.cm-scroller': {
-        overflow: 'auto',
-        fontFamily: 'var(--font-mono)'
-    },
-    '.cm-content': {
-        padding: '8px 0',
-        fontFamily: 'var(--font-mono)',
-        fontSize: '14px',
-        caretColor: 'var(--mac-accent)'
-    },
-    '.cm-line': {
-        padding: '0 8px'
-    },
-    '&.cm-focused': {
-        outline: 'none'
-    },
-    '&.cm-focused .cm-cursor': {
-        borderLeftColor: 'var(--mac-accent)'
-    },
-    '.cm-selectionBackground, &.cm-focused .cm-selectionBackground, ::selection': {
-        backgroundColor: 'var(--mac-selection) !important'
-    },
-    '.cm-gutters': {
-        backgroundColor: 'transparent',
-        color: 'var(--mac-muted)',
-        border: 'none'
-    },
-    '.cm-activeLineGutter': {
-        backgroundColor: 'var(--mac-selection)'
-    },
-    '.cm-activeLine': {
-        backgroundColor: 'color-mix(in srgb, var(--mac-selection) 45%, transparent)'
-    },
-    '.cm-variable-token': {
-        color: '#32D2E2'
-    },
-    '.cm-tooltip.cm-tooltip-hover': {
-        border: '1px solid var(--mac-separator)',
-        backgroundColor: 'var(--mac-surface)',
-        borderRadius: '6px',
-        boxShadow: '0 4px 12px rgba(0,0,0,0.15)'
-    },
-    '.cm-variable-tooltip': {
-        display: 'flex',
-        flexDirection: 'column',
-        gap: '6px',
-        padding: '8px 12px',
-        fontSize: '14px',
-        color: 'var(--mac-text)'
-    },
-    '.cm-variable-tooltip-muted': {
-        color: 'var(--mac-muted)'
-    },
-    '.cm-variable-tooltip-edit': {
-        alignSelf: 'flex-start',
-        background: 'none',
-        border: 'none',
-        padding: '0',
-        cursor: 'pointer',
-        fontSize: '14px',
-        color: 'var(--mac-accent)'
-    },
-    '.cm-tooltip.cm-tooltip-autocomplete': {
-        border: '1px solid var(--mac-separator)',
-        backgroundColor: 'var(--mac-surface)',
-        borderRadius: '6px',
-        boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
-        fontSize: '14px'
-    },
-    '.cm-completionLabel': {
-        fontFamily: 'var(--font-mono)'
-    },
-    '.cm-completionDetail': {
-        color: 'var(--mac-muted)',
-        fontStyle: 'normal',
-        marginLeft: '8px'
-    }
-});
+/**
+ * Clamps selection offsets to the current document length.
+ *
+ * @param docLength - Current document length in characters.
+ * @param selection - Selection offsets to clamp.
+ * @returns Offsets safe to dispatch into CodeMirror.
+ */
+function clampSelection(docLength, selection) {
+    const maxOffset = Math.max(0, docLength);
+    return {
+        anchor: Math.min(Math.max(0, selection.anchor), maxOffset),
+        head: Math.min(Math.max(0, selection.head), maxOffset)
+    };
+}
+/** Debounce interval for {@link Props.onViewStateChange} notifications. */
+const VIEW_STATE_DEBOUNCE_MS = 300;
 const variableMatcher = new MatchDecorator({
     regexp: new RegExp(`\\{\\{\\s*([${VARIABLE_NAME_CHARS}]+)\\s*\\}\\}`, 'g'),
     decoration: Decoration.mark({ class: 'cm-variable-token' })
@@ -140,6 +55,110 @@ const variableHighlighter = ViewPlugin.fromClass(class {
         this.decorations = variableMatcher.updateDeco(update, this.decorations);
     }
 }, { decorations: (v) => v.decorations });
+/** Matches a slash command at the start of a line with optional arguments. */
+const SLASH_COMMAND_LINE_PATTERN = /^(\s*)\/(\w+)(?:[ \t]+(.*))?$/;
+/**
+ * Returns a parsed slash command on a line when the name is registered.
+ *
+ * @param lineText - Full line text without the trailing newline.
+ * @param lineFrom - Document offset of the line start.
+ * @param lineNumber - 1-based line number.
+ * @param commands - Registered slash commands.
+ */
+function parseSlashCommandLine(lineText, lineFrom, lineNumber, commands) {
+    const match = lineText.match(SLASH_COMMAND_LINE_PATTERN);
+    if (!match) {
+        return null;
+    }
+    const command = match[2];
+    if (command == null || !commands.some((entry) => entry.name === command)) {
+        return null;
+    }
+    const leading = match[1] ?? '';
+    const slashIndex = leading.length;
+    const from = lineFrom + slashIndex;
+    const to = lineFrom + lineText.length;
+    return {
+        command,
+        args: (match[3] ?? '').trim(),
+        line: lineNumber,
+        from,
+        to
+    };
+}
+/**
+ * Builds a CodeMirror completion source for registered slash commands at line start.
+ *
+ * @param commands - Slash commands to offer after `/`.
+ */
+function createSlashCommandCompletionSource(commands) {
+    /**
+     * Returns slash command completions when the caret follows `/` at line start.
+     *
+     * @param context - CodeMirror completion context at the cursor.
+     */
+    return (context) => {
+        const word = context.matchBefore(/^\s*\/\w*/);
+        if (!word || word.text.length === 0) {
+            return null;
+        }
+        const partial = word.text.replace(/^\s*\//, '');
+        const options = commands
+            .filter((entry) => entry.name.startsWith(partial))
+            .map((entry) => ({
+            label: `/${entry.name}`,
+            type: 'keyword',
+            detail: entry.description,
+            apply: `/${entry.name} `
+        }));
+        if (options.length === 0) {
+            return null;
+        }
+        return { from: word.from, options };
+    };
+}
+/**
+ * Returns an Enter keymap that triggers registered slash commands before default newline handling.
+ *
+ * @param commands - Slash commands to recognize.
+ * @param onSlashCommand - Host callback invoked with parsed trigger details.
+ */
+function slashCommandEnterHandler(commands, onSlashCommand) {
+    return Prec.highest(keymap.of([
+        {
+            key: 'Enter',
+            /**
+             * Opens host slash-command UI when Enter is pressed on a complete command line.
+             *
+             * @param view - CodeMirror editor view instance.
+             */
+            run: (view) => {
+                const pos = view.state.selection.main.head;
+                const line = view.state.doc.lineAt(pos);
+                const parsed = parseSlashCommandLine(line.text, line.from, line.number, commands);
+                if (!parsed) {
+                    return false;
+                }
+                const coords = view.coordsAtPos(parsed.from);
+                if (!coords) {
+                    return false;
+                }
+                // Dismiss the autocomplete popup so its Enter binding does not also fire.
+                closeCompletion(view);
+                onSlashCommand({
+                    ...parsed,
+                    coords: {
+                        top: coords.top,
+                        left: coords.left,
+                        bottom: coords.bottom,
+                        right: coords.right
+                    }
+                });
+                return true;
+            }
+        }
+    ]));
+}
 /**
  * Finds the {{variable}} token at a document position, if any.
  *
@@ -274,10 +293,10 @@ function variableTooltipEscapeHandler(isOpen, onDismiss, getValidationDescribedB
 /**
  * Builds a hover tooltip extension for {{variable}} tokens.
  *
- * @param variables - Collection-scoped variables for resolution.
- * @param onEditVariable - Optional callback to open collection settings.
+ * @param getVariables - Returns the current collection-scoped variables.
+ * @param getOnEditVariable - Returns the optional edit callback.
  */
-function variableTooltip(variables, onEditVariable) {
+function variableTooltip(getVariables, getOnEditVariable) {
     return hoverTooltip((view, pos) => {
         const match = findVariableAtPos(view.state.doc, pos);
         if (!match)
@@ -287,21 +306,27 @@ function variableTooltip(variables, onEditVariable) {
             end: match.end,
             above: true,
             create() {
-                return { dom: buildVariableTooltipDom(match.key, variables, onEditVariable) };
+                return {
+                    dom: buildVariableTooltipDom(match.key, getVariables(), getOnEditVariable())
+                };
             }
         };
     });
 }
+/** Size of the native resize-y grip hit target in the bottom-right corner. */
+const RESIZE_GRIP_PX = 16;
 /**
  * CodeMirror wrapper for editable request bodies and read-only response views.
  *
  * Styling relies on host CSS variables (`--mac-*`, `--font-mono`) and the `.app-no-drag`
  * class defined in HarborClient `styles.css`.
  */
-export function CodeEditor({ value, onChange, language = 'text', readOnly = false, placeholder, minHeight = '144px', className = '', variables, onEditVariable, completionSource, themeOverride, setupOverride, id, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedBy }) {
+export function CodeEditor({ value, onChange, language = 'text', readOnly = false, editable, placeholder, placeholderHighlight = false, minHeight = '144px', height, onHeightChange, initialScrollTop, initialSelection, onViewStateChange, className = '', variables, onEditVariable, completionSource, slashCommands, onSlashCommand, themeOverride, setupOverride, fontSize, id, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedBy }) {
     const config = useCodeEditorConfig();
     const resolvedTheme = themeOverride ?? config.theme;
     const resolvedSetup = setupOverride ?? (readOnly ? null : config.setup);
+    const resolvedFontSize = normalizeCodeEditorFontSize(fontSize ?? config.fontSize);
+    const resolvedEditable = editable ?? !readOnly;
     const [isDark, setIsDark] = useState(() => window.matchMedia('(prefers-color-scheme: dark)').matches);
     const [selectionTooltip, setSelectionTooltip] = useState(null);
     const selectionTooltipRef = useRef(selectionTooltip);
@@ -310,8 +335,177 @@ export function CodeEditor({ value, onChange, language = 'text', readOnly = fals
     setSelectionTooltipRef.current = setSelectionTooltip;
     const ariaDescribedByRef = useRef(ariaDescribedBy);
     ariaDescribedByRef.current = ariaDescribedBy;
+    const onSlashCommandRef = useRef(onSlashCommand);
+    onSlashCommandRef.current = onSlashCommand;
+    const onChangeRef = useRef(onChange);
+    onChangeRef.current = onChange;
+    const completionSourceRef = useRef(completionSource);
+    completionSourceRef.current = completionSource;
+    const variablesRef = useRef(variables);
+    variablesRef.current = variables;
+    const onEditVariableRef = useRef(onEditVariable);
+    onEditVariableRef.current = onEditVariable;
+    const hasVariables = variables != null;
+    const hasCompletionSource = completionSource != null;
     const tooltipId = useId();
+    const wrapperRef = useRef(null);
+    const onHeightChangeRef = useRef(onHeightChange);
+    onHeightChangeRef.current = onHeightChange;
+    const isUserResizingRef = useRef(false);
+    const editorViewRef = useRef(null);
+    const onViewStateChangeRef = useRef(onViewStateChange);
+    onViewStateChangeRef.current = onViewStateChange;
+    const initialScrollTopRef = useRef(initialScrollTop);
+    initialScrollTopRef.current = initialScrollTop;
+    const initialSelectionRef = useRef(initialSelection);
+    initialSelectionRef.current = initialSelection;
+    const viewStateDebounceRef = useRef(undefined);
+    const scrollListenerCleanupRef = useRef(null);
+    const scheduleViewStateFlushRef = useRef(() => undefined);
     const getValidationDescribedBy = () => ariaDescribedByRef.current;
+    /**
+     * Reads the current scroll and selection snapshot from an editor view.
+     *
+     * @param view - Live CodeMirror view.
+     * @returns Rounded scroll offset and selection offsets.
+     */
+    const readViewState = useCallback((view) => {
+        const selection = view.state.selection.main;
+        return {
+            scrollTop: Math.max(0, Math.round(view.scrollDOM.scrollTop)),
+            selection: { anchor: selection.anchor, head: selection.head }
+        };
+    }, []);
+    /**
+     * Notifies the host of the latest scroll/selection snapshot.
+     */
+    const flushViewState = useCallback(() => {
+        const view = editorViewRef.current;
+        if (!view || !onViewStateChangeRef.current) {
+            return;
+        }
+        onViewStateChangeRef.current(readViewState(view));
+    }, [readViewState]);
+    /**
+     * Debounces view-state persistence while the user scrolls or changes selection.
+     */
+    useEffect(() => {
+        scheduleViewStateFlushRef.current = () => {
+            if (viewStateDebounceRef.current) {
+                clearTimeout(viewStateDebounceRef.current);
+            }
+            viewStateDebounceRef.current = setTimeout(() => {
+                flushViewState();
+            }, VIEW_STATE_DEBOUNCE_MS);
+        };
+    }, [flushViewState]);
+    /**
+     * Restores persisted scroll/selection and wires scroll tracking when the view is created.
+     */
+    const stableOnCreateEditor = useCallback((view) => {
+        editorViewRef.current = view;
+        const restoredSelection = initialSelectionRef.current;
+        if (restoredSelection) {
+            const clamped = clampSelection(view.state.doc.length, restoredSelection);
+            view.dispatch({
+                selection: { anchor: clamped.anchor, head: clamped.head }
+            });
+        }
+        const restoredScrollTop = initialScrollTopRef.current;
+        if (restoredScrollTop != null && Number.isFinite(restoredScrollTop) && restoredScrollTop >= 0) {
+            view.scrollDOM.scrollTop = restoredScrollTop;
+        }
+        /**
+         * Schedules persistence when the user scrolls the editor content.
+         */
+        const handleScroll = () => {
+            scheduleViewStateFlushRef.current();
+        };
+        view.scrollDOM.addEventListener('scroll', handleScroll, { passive: true });
+        scrollListenerCleanupRef.current = () => {
+            view.scrollDOM.removeEventListener('scroll', handleScroll);
+        };
+    }, []);
+    /**
+     * Flushes scroll/selection on unmount so collapsed script rows retain view state.
+     */
+    useEffect(() => {
+        return () => {
+            if (viewStateDebounceRef.current) {
+                clearTimeout(viewStateDebounceRef.current);
+            }
+            scrollListenerCleanupRef.current?.();
+            scrollListenerCleanupRef.current = null;
+            flushViewState();
+            editorViewRef.current = null;
+        };
+    }, [flushViewState]);
+    /**
+     * Persists wrapper height only after the user finishes a native resize-y drag on the grip.
+     * Ignores mount and layout settling so height props do not reconfigure CodeMirror in a loop.
+     */
+    useEffect(() => {
+        if (!onHeightChange) {
+            return;
+        }
+        const wrapper = wrapperRef.current;
+        if (!wrapper) {
+            return;
+        }
+        /**
+         * Marks resize drags that begin on the native bottom-right grip.
+         *
+         * @param event - Pointer down on the editor wrapper.
+         */
+        const handlePointerDown = (event) => {
+            const rect = wrapper.getBoundingClientRect();
+            const onGrip = event.clientX >= rect.right - RESIZE_GRIP_PX &&
+                event.clientY >= rect.bottom - RESIZE_GRIP_PX;
+            if (onGrip) {
+                isUserResizingRef.current = true;
+            }
+        };
+        /**
+         * Reports the final wrapper height after a completed user resize drag.
+         */
+        const handlePointerUp = () => {
+            if (!isUserResizingRef.current) {
+                return;
+            }
+            isUserResizingRef.current = false;
+            const nextHeight = Math.round(wrapper.getBoundingClientRect().height);
+            onHeightChangeRef.current?.(nextHeight);
+        };
+        wrapper.addEventListener('pointerdown', handlePointerDown);
+        window.addEventListener('pointerup', handlePointerUp);
+        return () => {
+            wrapper.removeEventListener('pointerdown', handlePointerDown);
+            window.removeEventListener('pointerup', handlePointerUp);
+        };
+    }, [onHeightChange]);
+    /**
+     * Whether to render a muted syntax-highlighted ghost layer instead of plain placeholder text.
+     */
+    const useHighlightedPlaceholder = Boolean(placeholderHighlight && placeholder && language === 'javascript');
+    /**
+     * Stable onChange wrapper so @uiw/react-codemirror does not reconfigure on every parent render.
+     */
+    const stableOnChange = useCallback((nextValue) => {
+        onChangeRef.current?.(nextValue);
+    }, []);
+    /**
+     * Stable completion delegator reading the latest host source from a ref.
+     */
+    const stableCompletionSource = useMemo(() => (context) => completionSourceRef.current?.(context) ?? null, []);
+    /**
+     * Stable variable accessors for tooltip extensions.
+     */
+    const getVariables = useCallback(() => variablesRef.current ?? [], []);
+    const getOnEditVariable = useCallback(() => onEditVariableRef.current, []);
+    /**
+     * Memoized editor chrome theme keyed by font size only.
+     */
+    const editorThemeExt = useMemo(() => createEditorTheme(resolvedFontSize), [resolvedFontSize]);
     /**
      * Tracks system dark mode so syntax highlighting matches the active theme.
      */
@@ -321,35 +515,65 @@ export function CodeEditor({ value, onChange, language = 'text', readOnly = fals
         media.addEventListener('change', handleChange);
         return () => media.removeEventListener('change', handleChange);
     }, []);
+    /**
+     * Stable selection listener that debounces view-state persistence.
+     */
+    const viewStateSelectionListener = useMemo(() => EditorView.updateListener.of((update) => {
+        if (!onViewStateChangeRef.current || !update.selectionSet) {
+            return;
+        }
+        scheduleViewStateFlushRef.current();
+    }), []);
     /**
      * Assembles CodeMirror extensions for language mode, theme, and optional variable tooling.
      */
     const extensions = useMemo(() => {
-        const next = [EditorView.lineWrapping, editorTheme];
+        const next = [EditorView.lineWrapping, editorThemeExt];
+        if (onViewStateChange != null) {
+            next.push(viewStateSelectionListener);
+        }
         const themeExtension = getCodeEditorThemeExtension(resolvedTheme);
         if (themeExtension) {
             next.push(themeExtension);
         }
         else {
-            next.push(syntaxHighlighting(isDark ? darkHighlight : lightHighlight));
+            next.push(createBuiltInSyntaxHighlighting(isDark));
         }
         if (language === 'json') {
             next.push(json());
         }
         if (language === 'javascript') {
             next.push(javascript());
-            if (completionSource) {
+            // Register the slash Enter handler before autocompletion so that, at equal
+            // Prec.highest precedence, this handler wins the tie and fires before the
+            // completion keymap's Enter->accept binding.
+            if (slashCommands && slashCommands.length > 0) {
+                next.push(slashCommandEnterHandler(slashCommands, (trigger) => {
+                    onSlashCommandRef.current?.(trigger);
+                }));
+            }
+            const completionOverrides = [];
+            if (slashCommands && slashCommands.length > 0) {
+                completionOverrides.push(createSlashCommandCompletionSource(slashCommands));
+            }
+            if (hasCompletionSource) {
+                completionOverrides.push(stableCompletionSource);
+            }
+            if (completionOverrides.length > 0) {
                 next.push(autocompletion({
                     activateOnTyping: true,
-                    override: [completionSource]
+                    override: completionOverrides
                 }));
             }
+            if (slashCommands && slashCommands.length > 0) {
+                next.push(createSlashCommandHighlighter(slashCommands));
+            }
         }
         if (language === 'shell') {
             next.push(StreamLanguage.define(shell));
         }
-        if (variables) {
-            next.push(variableHighlighter, variableTooltip(variables, onEditVariable), variableSelectionTooltip(tooltipId, (state) => {
+        if (hasVariables) {
+            next.push(variableHighlighter, variableTooltip(getVariables, getOnEditVariable), variableSelectionTooltip(tooltipId, (state) => {
                 setSelectionTooltipRef.current(state);
             }, getValidationDescribedBy), variableTooltipEscapeHandler(() => selectionTooltipRef.current != null, () => {
                 setSelectionTooltipRef.current(null);
@@ -369,20 +593,37 @@ export function CodeEditor({ value, onChange, language = 'text', readOnly = fals
         if (Object.keys(contentAttrs).length > 0) {
             next.push(EditorView.contentAttributes.of(contentAttrs));
         }
+        if (useHighlightedPlaceholder && placeholder) {
+            next.push(...createSyntaxHighlightedPlaceholder(placeholder, {
+                fontSize: resolvedFontSize,
+                isDark,
+                theme: resolvedTheme,
+                slashCommands
+            }));
+        }
         return next;
     }, [
+        editorThemeExt,
         resolvedTheme,
         isDark,
         language,
-        variables,
-        onEditVariable,
-        completionSource,
+        hasVariables,
+        hasCompletionSource,
+        stableCompletionSource,
+        getVariables,
+        getOnEditVariable,
+        slashCommands,
+        useHighlightedPlaceholder,
+        placeholder,
+        resolvedFontSize,
         id,
         ariaLabel,
         ariaLabelledBy,
         ariaInvalid,
         ariaDescribedBy,
-        tooltipId
+        tooltipId,
+        onViewStateChange,
+        viewStateSelectionListener
     ]);
     /**
      * Resolves CodeMirror basicSetup from persisted settings or read-only defaults.
@@ -412,30 +653,44 @@ export function CodeEditor({ value, onChange, language = 'text', readOnly = fals
                 indentOnInput: false
             };
         }
+        // Disable the built-in autocompletion and completion keymap: this component
+        // installs its own autocompletion() for JavaScript editors, ordered after the
+        // slash-command Enter handler. Leaving basicSetup's autocompletion enabled would
+        // inject a competing Prec.highest Enter->acceptCompletion binding ahead of ours,
+        // swallowing the first Enter on a /ask line.
         return {
             lineNumbers: resolvedSetup.lineNumbers,
             foldGutter: resolvedSetup.foldGutter,
             highlightActiveLine: resolvedSetup.highlightActiveLine,
-            highlightActiveLineGutter: resolvedSetup.highlightActiveLineGutter
+            highlightActiveLineGutter: resolvedSetup.highlightActiveLineGutter,
+            highlightSelectionMatches: false,
+            autocompletion: false,
+            completionKeymap: false
         };
     }, [resolvedSetup, readOnly]);
     const wrapperClassName = readOnly
-        ? `hc-code-editor overflow-hidden rounded-md bg-control shadow-[inset_0_0.5px_1px_rgba(0,0,0,0.06)] app-no-drag ${className}`
-        : `hc-code-editor min-h-36 resize-y overflow-hidden rounded-md border border-separator bg-control shadow-[inset_0_0.5px_1px_rgba(0,0,0,0.06)] focus-within:shadow-[0_0_0_3px_color-mix(in_srgb,var(--mac-accent)_35%,transparent),inset_0_0.5px_1px_rgba(0,0,0,0.06)] app-no-drag ${className}`;
+        ? `hc-code-editor overflow-hidden rounded-lg bg-control shadow-[inset_0_0.5px_1px_rgba(0,0,0,0.06)] app-no-drag ${className}`
+        : `hc-code-editor min-h-36 resize-y overflow-hidden rounded-lg border border-separator bg-control shadow-[inset_0_0.5px_1px_rgba(0,0,0,0.06)] focus-within:shadow-[0_0_0_3px_color-mix(in_srgb,var(--mac-accent)_35%,transparent),inset_0_0.5px_1px_rgba(0,0,0,0.06)] app-no-drag ${className}`;
     const selectionTooltipContent = selectionTooltip
         ? getVariableTooltipContent(selectionTooltip.key, variables ?? [])
         : null;
-    return (_jsxs("div", { className: wrapperClassName, children: [createElement(CodeMirrorImport, {
+    const wrapperStyle = height ? { height } : undefined;
+    const shouldTrackViewState = onViewStateChange != null || initialScrollTop != null || initialSelection != null;
+    return (_jsxs("div", { ref: wrapperRef, className: wrapperClassName, style: wrapperStyle, children: [createElement(CodeMirrorImport, {
                 value,
-                onChange: readOnly ? undefined : onChange,
+                onChange: readOnly ? undefined : stableOnChange,
                 extensions,
                 theme: 'none',
-                editable: !readOnly,
+                editable: resolvedEditable,
                 readOnly,
-                placeholder,
+                placeholder: useHighlightedPlaceholder ? undefined : placeholder,
                 minHeight,
-                basicSetup
-            }), selectionTooltip && selectionTooltipContent && variables ? (_jsxs("div", { id: tooltipId, role: "tooltip", className: "pointer-events-auto fixed z-50 flex max-w-sm -translate-x-1/2 -translate-y-full flex-col gap-1.5 rounded-md border border-separator bg-surface px-3 py-2 text-[14px] text-text shadow-md app-no-drag", style: { top: selectionTooltip.top - 4, left: selectionTooltip.left }, children: [_jsx("span", { className: selectionTooltipContent.muted ? 'text-muted' : undefined, children: selectionTooltipContent.text }), onEditVariable ? (_jsx("button", { type: "button", className: "self-start text-[14px] text-accent hover:underline", "aria-label": `Edit value for ${selectionTooltip.key}`, onMouseDown: (event) => {
+                ...(height ? { height: '100%' } : {}),
+                basicSetup,
+                ...(shouldTrackViewState ? { onCreateEditor: stableOnCreateEditor } : {})
+            }), selectionTooltip && selectionTooltipContent && variables ? (_jsxs("div", { id: tooltipId, role: "tooltip", className: "hc-code-editor-tooltip pointer-events-auto fixed z-50 flex max-w-sm -translate-x-1/2 -translate-y-full flex-col gap-1.5 rounded-lg border border-separator bg-surface px-3 py-2 text-[14px] text-text shadow-md app-no-drag", style: { top: selectionTooltip.top - 4, left: selectionTooltip.left }, children: [_jsx("span", { className: selectionTooltipContent.muted
+                            ? 'hc-code-editor-tooltip-text text-muted'
+                            : 'hc-code-editor-tooltip-text', children: selectionTooltipContent.text }), onEditVariable ? (_jsx("button", { type: "button", className: "hc-code-editor-tooltip-edit self-start text-[14px] text-accent hover:underline", "aria-label": `Edit value for ${selectionTooltip.key}`, onMouseDown: (event) => {
                             event.preventDefault();
                             onEditVariable();
                             setSelectionTooltip(null);

package/dist/components/CodeEditor/renderHighlightedPlaceholder.d.ts

@@ -0,0 +1,32 @@
+import type { CodeEditorTheme } from '../../types.js';
+import { type SlashCommandSpec } from './slashCommandHighlighter.js';
+/**
+ * Inputs for rendering a muted syntax-highlighted placeholder document.
+ */
+export interface RenderHighlightedPlaceholderOptions {
+    /**
+     * Normalized CSS font size matching the parent editor.
+     */
+    fontSize: string;
+    /**
+     * Whether the host prefers dark mode.
+     */
+    isDark: boolean;
+    /**
+     * Persisted CodeMirror theme selection.
+     */
+    theme: CodeEditorTheme;
+    /**
+     * Optional slash commands to highlight inside the placeholder document.
+     */
+    slashCommands?: SlashCommandSpec[];
+}
+/**
+ * Renders highlighted placeholder markup via a hidden offscreen editor, then clones
+ * the resulting line nodes into a flat inline placeholder element.
+ *
+ * @param text - Placeholder source shown until the user focuses or types.
+ * @param options - Highlighting and theme options shared with the parent editor.
+ */
+export declare function renderHighlightedPlaceholderDom(text: string, options: RenderHighlightedPlaceholderOptions): HTMLElement;
+//# sourceMappingURL=renderHighlightedPlaceholder.d.ts.map