@oneuptime/common 14.0.10 → 14.0.12

package/build/dist/UI/Components/CodeEditor/CodeEditor.js

@@ -1,312 +1,724 @@
-import Editor from "@monaco-editor/react";
-import configureMonacoLoader from "./MonacoLoader";
-import CodeType from "../../../Types/Code/CodeType";
-import MarkdownUtil from "../../Utils/Markdown";
-import { Theme, useTheme } from "../../Utils/Theme";
-import React, { useEffect, useMemo, useRef, useState, } from "react";
-configureMonacoLoader();
+import "./CodeEditor.css";
+import { applyTextEdit, backspace, countLines, detectIndentUnit, getLineColumn, indent, indentLines, lineEndOf, lineStartOf, newLine, outdent, spacesIndent, toggleLineComment, typeCharacter, } from "./CodeEditorCommands";
+import { escapeHtml, highlightCode } from "./CodeEditorHighlight";
+import { getCodeLanguage } from "./CodeEditorLanguages";
+import Icon from "../Icon/Icon";
+import { checkJsonSyntax, describeJsonSyntaxError, findJsonSyntaxError, formatJson, } from "../../../Types/Code/JsonSyntax";
+import { checkYamlSyntax, describeYamlSyntaxError, } from "../../../Types/Code/YamlSyntax";
+import IconProp from "../../../Types/Icon/IconProp";
+import React, { useEffect, useId, useLayoutEffect, useMemo, useRef, useState, } from "react";
 /*
- * Callers hand us `any` through Form's currentValues, so a non-string can
- * still reach a prop typed as string.
+ * These two have to match .ou-code-editor's --ou-code-line-height and
+ * --ou-code-padding-y in CodeEditor.css: the gutter's click target and the
+ * current-line band are placed with them.
  */
-function toEditorText(value) {
+export const CODE_EDITOR_LINE_HEIGHT_PX = 20;
+export const CODE_EDITOR_PADDING_Y_PX = 10;
+export const CODE_EDITOR_PADDING_X_PX = 12;
+// Columns a tab advances to, as `tab-size` in CodeEditor.css draws it.
+const TAB_SIZE = 4;
+// Characters in the hidden run the character width is measured from.
+const MEASURE_LENGTH = 32;
+export const CODE_EDITOR_DEFAULT_MIN_LINES = 5;
+export const CODE_EDITOR_DEFAULT_MAX_HEIGHT = "min(60vh, 30rem)";
+/** How long the document sits still before it is checked again. */
+export const CODE_EDITOR_VALIDATION_DEBOUNCE_MS = 250;
+const FALLBACK_INDENT = spacesIndent(2);
+export const toEditorText = (value) => {
     if (value === undefined || value === null) {
         return "";
     }
     if (typeof value !== "string") {
         return JSON.stringify(value, null, 4);
     }
-    return value;
-}
+    return value.replace(/\r\n?/g, "\n");
+};
+/*
+ * Through the prototype's setter, not `textarea.value =`: React watches the
+ * instance property to know what it last rendered, and a write through it
+ * would make the input event below look like no change at all.
+ */
+const setNativeValue = (textarea, value) => {
+    const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(textarea), "value");
+    if (descriptor === null || descriptor === void 0 ? void 0 : descriptor.set) {
+        descriptor.set.call(textarea, value);
+    }
+    else {
+        textarea.value = value;
+    }
+};
+/**
+ * Make `edit` in the textarea the way typing would, so it lands on the
+ * browser's own undo stack as one step. execCommand is deprecated but is
+ * still the only way to do that, in every browser; where it is missing
+ * (jsdom) or declines, the value is written directly and an input event
+ * fired, which keeps React in step at the cost of that one undo entry.
+ */
+export const applyEditToTextarea = (textarea, edit) => {
+    const expected = applyTextEdit(textarea.value, edit);
+    if (edit.from !== edit.to || edit.insert !== "") {
+        textarea.setSelectionRange(edit.from, edit.to);
+        let applied = false;
+        try {
+            if (typeof document.execCommand === "function") {
+                applied =
+                    edit.insert === ""
+                        ? document.execCommand("delete", false)
+                        : document.execCommand("insertText", false, edit.insert);
+            }
+        }
+        catch (_a) {
+            applied = false;
+        }
+        if (!applied || textarea.value !== expected) {
+            setNativeValue(textarea, expected);
+            textarea.dispatchEvent(new Event("input", { bubbles: true }));
+        }
+    }
+    textarea.setSelectionRange(edit.selectionStart, edit.selectionEnd);
+};
+/*
+ * The gutter is one run of text - "1\n2\n3..." - so a long document costs
+ * a handful of nodes, not one per line. Only the lines that look different
+ * (the current line, a line with a syntax error) are split out.
+ */
+const buildGutter = (lineCount, marks) => {
+    const segments = [];
+    let buffer = "";
+    for (let line = 1; line <= lineCount; line++) {
+        const className = marks.get(line);
+        const separator = line < lineCount ? "\n" : "";
+        if (className) {
+            if (buffer) {
+                segments.push({ text: buffer });
+            }
+            segments.push({ text: String(line), className });
+            buffer = separator;
+            continue;
+        }
+        buffer += String(line) + separator;
+    }
+    if (buffer) {
+        segments.push({ text: buffer });
+    }
+    return segments;
+};
+const MODIFIER_KEYS = ["Shift", "Control", "Alt", "Meta"];
+/*
+ * Heard on the way in, through aria-describedby: Tab indents here, so the way
+ * out has to be announced rather than discovered.
+ */
+export const CODE_EDITOR_KEYS_HINT = "Tab inserts indentation. To move focus out of the editor, press Escape, then Tab.";
+/*
+ * Light-theme values, one step darker than the obvious choice so the 12px
+ * status text clears 4.5:1 on bg-gray-50. Theme.css remaps these classes
+ * under html.dark.
+ */
+const STATUS_TONE_CLASS = {
+    error: "text-red-700",
+    invalid: "text-amber-700",
+    valid: "text-green-700",
+    neutral: "text-gray-500",
+};
+const TOOLBAR_BUTTON_CLASS = "inline-flex shrink-0 items-center gap-1 rounded px-2 py-1 text-xs font-medium text-gray-600 transition-colors hover:bg-gray-200 hover:text-gray-900 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 disabled:cursor-not-allowed disabled:opacity-40";
+/**
+ * A code editor for form fields: a native textarea over a highlighted copy
+ * of its text, with line numbers, auto-indentation, bracket pairing, a
+ * status bar that says whether JSON or YAML parses (and where it does not),
+ * and Format / Copy actions. It renders on the first paint, has no runtime
+ * to download, and edits with the browser's own caret, selection, undo and
+ * find - which is also what makes it work with a phone keyboard and a screen
+ * reader.
+ */
 const CodeEditor = (props) => {
-    let className = "";
-    const [placeholder, setPlaceholder] = useState("");
-    const [helpText, setHelpText] = useState("");
-    const editorRef = useRef(null);
-    const theme = useTheme();
-    /*
-     * `value` is the controlled prop; `initialValue` only seeds an uncontrolled
-     * editor. Both used to be synced from their own useEffect, and because
-     * effects run in declaration order the `initialValue` one ran last on mount
-     * and reset the state to "" - so a caller that passed only `value` mounted
-     * an empty editor even though it had text to show. Seed the state on the
-     * first render and keep the precedence in a single effect.
-     */
-    const [value, setValue] = useState(() => {
+    var _a;
+    const language = getCodeLanguage(props.type);
+    const readOnly = Boolean(props.readOnly);
+    const [text, setText] = useState(() => {
         var _a;
         return toEditorText((_a = props.value) !== null && _a !== void 0 ? _a : props.initialValue);
     });
+    // The latest text, for effects that must not re-run on every keystroke.
+    const textRef = useRef(text);
+    /*
+     * Checked on a timer, so a half-typed line is not judged the instant it is
+     * typed and a long document is not re-parsed on every keystroke.
+     */
+    const [checkedText, setCheckedText] = useState(text);
+    const [selection, setSelection] = useState({
+        start: 0,
+        end: 0,
+        active: 0,
+    });
+    const [isFocused, setIsFocused] = useState(false);
+    /*
+     * Tab indents, so it cannot also move focus - a keyboard trap unless there
+     * is a way out (WCAG 2.1.2). Escape releases the next Tab to the browser.
+     */
+    const [tabMovesFocus, setTabMovesFocus] = useState(false);
+    const tabMovesFocusRef = useRef(false);
+    const [copied, setCopied] = useState(false);
+    const copyResetTimer = useRef(null);
+    const textareaRef = useRef(null);
+    const scrollerRef = useRef(null);
+    const gutterRef = useRef(null);
+    const measureRef = useRef(null);
+    const instanceId = useId();
+    const keysHintId = `${instanceId}-code-keys`;
+    const statusId = `${instanceId}-code-status`;
+    const hintId = `${instanceId}-code-hint`;
+    /*
+     * `value` is the controlled prop; `initialValue` only seeds an editor that
+     * is not given one. Seeded on the first render above and kept in step in
+     * one effect: two effects, one per prop, ran in declaration order on mount
+     * and the `initialValue` one blanked an editor that was only given `value`.
+     */
     useEffect(() => {
-        setValue(toEditorText(props.value === undefined ? props.initialValue : props.value));
+        const next = toEditorText(props.value === undefined ? props.initialValue : props.value);
+        if (next === textRef.current) {
+            return;
+        }
+        // Replaced from outside (a sample inserted, a record loaded): judge it now.
+        textRef.current = next;
+        setText(next);
+        setCheckedText(next);
     }, [props.value, props.initialValue]);
     useEffect(() => {
-        if (props.placeholder) {
-            if (props.type === CodeType.Markdown) {
-                setHelpText(MarkdownUtil.getMarkdownCheatsheet(props.placeholder));
-            }
-            if (props.type === CodeType.HTML) {
-                setHelpText(`${props.placeholder}. This is in HTML`);
-            }
-            if (props.type === CodeType.JavaScript) {
-                setPlaceholder(`/* ${props.placeholder} 
-                    
-                    
-                    This is in JavaScript. 
-                    
-                    */`);
-            }
-            if (props.type === CodeType.JSON) {
-                setHelpText(`${props.placeholder}`);
-            }
-            if (props.type === CodeType.CSS) {
-                setPlaceholder(`/* ${props.placeholder}. This is in CSS. */`);
-            }
-            /*
-             * Help text, never `setPlaceholder`: whatever setPlaceholder holds is
-             * rendered into `defaultValue` below, i.e. it becomes real document
-             * text. The JS and CSS arms above get away with it because they wrap
-             * the hint in a comment; an unwrapped YAML hint would be content the
-             * user can accidentally save, and the server would reject it.
-             */
-            if (props.type === CodeType.YAML) {
-                setHelpText(`${props.placeholder}`);
+        if (!language.validator) {
+            return undefined;
+        }
+        const timer = setTimeout(() => {
+            setCheckedText(text);
+        }, CODE_EDITOR_VALIDATION_DEBOUNCE_MS);
+        return () => {
+            clearTimeout(timer);
+        };
+    }, [text, language.validator]);
+    useEffect(() => {
+        return () => {
+            if (copyResetTimer.current) {
+                clearTimeout(copyResetTimer.current);
             }
+        };
+    }, []);
+    const indentUnit = useMemo(() => {
+        return detectIndentUnit(text, FALLBACK_INDENT, language.allowTabs);
+    }, [text, language.allowTabs]);
+    const syntax = useMemo(() => {
+        if (language.validator === "json") {
+            return checkJsonSyntax(checkedText, { allowJSON5: props.allowJSON5 });
         }
-    }, [props.placeholder, props.type]);
-    if (!props.className) {
-        className =
-            "block w-full rounded-md border border-gray-300 bg-white py-2 pl-3 pr-3 text-sm placeholder-gray-500 focus:border-indigo-500 focus:text-gray-900 focus:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 sm:text-sm";
-    }
-    else {
-        className = props.className;
-    }
-    if (props.error) {
-        className =
-            "block w-full rounded-md border bg-white py-2 pl-3 pr-3 text-sm placeholder-gray-500 focus:border-red-500 focus:text-gray-900 focus:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-red-500 sm:text-sm border-red-300 pr-10 text-red-900 placeholder-red-300 focus:border-red-500 focus:outline-none focus:ring-red-500";
-    }
-    const isYaml = props.type === CodeType.YAML;
+        if (language.validator === "yaml") {
+            return checkYamlSyntax(checkedText);
+        }
+        return null;
+    }, [checkedText, language.validator, props.allowJSON5]);
+    // Format rewrites only strict JSON, placeholders and all, never JSON5.
+    const canFormat = useMemo(() => {
+        return (language.canFormat &&
+            !readOnly &&
+            checkedText.trim() !== "" &&
+            findJsonSyntaxError(checkedText) === null);
+    }, [language.canFormat, readOnly, checkedText]);
+    const highlightedHtml = useMemo(() => {
+        return highlightCode(text, language.grammar, {
+            showTabs: language.showTabs,
+        });
+    }, [text, language.grammar, language.showTabs]);
+    const example = (props.example || "")
+        .replace(/^\s*\n/, "")
+        .replace(/\s+$/, "");
+    const ghostHtml = useMemo(() => {
+        if (text !== "") {
+            return null;
+        }
+        if (props.placeholder) {
+            return `<span class="ou-code-editor__placeholder">${escapeHtml(props.placeholder)}</span>`;
+        }
+        if (example) {
+            return `<span class="ou-code-editor__example">${highlightCode(example, language.grammar)}</span>`;
+        }
+        return null;
+    }, [text, props.placeholder, example, language.grammar]);
+    const lineCount = useMemo(() => {
+        return countLines(text);
+    }, [text]);
+    const cursor = getLineColumn(text, selection.active);
+    const selectedCharacters = Math.abs(selection.end - selection.start);
+    const errorLine = syntax &&
+        !syntax.isValid &&
+        syntax.line !== null &&
+        syntax.line <= lineCount
+        ? syntax.line
+        : null;
+    const showGutter = language.wrap
+        ? false
+        : props.showLineNumbers !== false;
+    const showActiveLine = isFocused && !readOnly && selectedCharacters === 0;
+    const gutterSegments = useMemo(() => {
+        const marks = new Map();
+        if (showActiveLine) {
+            marks.set(cursor.line, "ou-code-editor__gutter-active");
+        }
+        if (errorLine !== null) {
+            marks.set(errorLine, "ou-code-editor__gutter-error");
+        }
+        return buildGutter(lineCount, marks);
+    }, [lineCount, showActiveLine, cursor.line, errorLine]);
     /*
-     * Monaco's real focusable control. The wrapper <div> this component returns
-     * has no role, and ARIA forbids naming a role=generic element - so every
-     * accessibility attribute has to land here instead.
+     * Keep the caret in view. The textarea never scrolls - it is exactly as
+     * big as its text - so the scroller around it has to, and browsers do not
+     * agree on doing that for a caret inside a textarea: Firefox leaves the
+     * end of the document off-screen after Ctrl+End, and Chromium parks a
+     * caret at column 1 underneath the sticky line numbers. Lines have a fixed
+     * height and the font is monospaced, so where the caret is is arithmetic.
+     * (Wrapped prose is left to the browser: a wrapped line has no fixed row.)
      */
-    const getInputArea = (editor) => {
-        var _a;
-        const domNode = ((_a = editor === null || editor === void 0 ? void 0 : editor.getDomNode) === null || _a === void 0 ? void 0 : _a.call(editor)) || null;
-        if (!domNode) {
-            return null;
+    useLayoutEffect(() => {
+        var _a, _b;
+        const scroller = scrollerRef.current;
+        const textarea = textareaRef.current;
+        if (!isFocused || language.wrap || !scroller || !textarea) {
+            return;
+        }
+        const value = textarea.value;
+        const position = Math.min(selection.active, value.length);
+        const line = getLineColumn(value, position).line;
+        const top = CODE_EDITOR_PADDING_Y_PX + (line - 1) * CODE_EDITOR_LINE_HEIGHT_PX;
+        const bottom = top + CODE_EDITOR_LINE_HEIGHT_PX;
+        if (top < scroller.scrollTop) {
+            scroller.scrollTop = Math.max(0, top - CODE_EDITOR_PADDING_Y_PX);
+        }
+        else if (bottom > scroller.scrollTop + scroller.clientHeight) {
+            scroller.scrollTop =
+                bottom + CODE_EDITOR_PADDING_Y_PX - scroller.clientHeight;
+        }
+        const characterWidth = (((_a = measureRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width) || 0) / MEASURE_LENGTH;
+        if (characterWidth <= 0) {
+            return;
+        }
+        let columns = 0;
+        for (const character of value.slice(lineStartOf(value, position), position)) {
+            columns =
+                character === "\t"
+                    ? columns + TAB_SIZE - (columns % TAB_SIZE)
+                    : columns + 1;
+        }
+        const gutterWidth = ((_b = gutterRef.current) === null || _b === void 0 ? void 0 : _b.offsetWidth) || 0;
+        const margin = 2 * characterWidth;
+        const x = gutterWidth + CODE_EDITOR_PADDING_X_PX + columns * characterWidth;
+        if (x < scroller.scrollLeft + gutterWidth + CODE_EDITOR_PADDING_X_PX) {
+            scroller.scrollLeft = Math.max(0, x - gutterWidth - CODE_EDITOR_PADDING_X_PX - margin);
+        }
+        else if (x + margin > scroller.scrollLeft + scroller.clientWidth) {
+            scroller.scrollLeft = x + margin - scroller.clientWidth;
         }
-        return domNode.querySelector("textarea");
+    }, [selection, text, isFocused, language.wrap]);
+    const captureSelection = () => {
+        const textarea = textareaRef.current;
+        if (!textarea) {
+            return;
+        }
+        const start = textarea.selectionStart;
+        const end = textarea.selectionEnd;
+        const active = textarea.selectionDirection === "backward" ? start : end;
+        setSelection((previous) => {
+            if (previous.start === start &&
+                previous.end === end &&
+                previous.active === active) {
+                return previous;
+            }
+            return { start, end, active };
+        });
     };
-    const applyAria = (editor) => {
-        const inputArea = getInputArea(editor);
-        if (!inputArea) {
+    const setTabRelease = (value) => {
+        tabMovesFocusRef.current = value;
+        setTabMovesFocus(value);
+    };
+    const runEdit = (edit) => {
+        const textarea = textareaRef.current;
+        if (!edit || !textarea) {
             return;
         }
-        /*
-         * aria-labelledby wins over the aria-label Monaco puts here itself
-         * ("Editor content"), so the field's own label names the editor.
-         */
-        if (props.ariaLabelledby) {
-            inputArea.setAttribute("aria-labelledby", props.ariaLabelledby);
+        applyEditToTextarea(textarea, edit);
+        captureSelection();
+    };
+    const readState = () => {
+        const textarea = textareaRef.current;
+        return {
+            text: textarea.value,
+            selectionStart: textarea.selectionStart,
+            selectionEnd: textarea.selectionEnd,
+        };
+    };
+    // Through the textarea, so Undo brings the previous document back.
+    const replaceDocument = (replacement) => {
+        const textarea = textareaRef.current;
+        if (!textarea || replacement === textarea.value) {
+            return;
         }
-        else {
-            inputArea.removeAttribute("aria-labelledby");
+        textarea.focus();
+        runEdit({
+            from: 0,
+            to: textarea.value.length,
+            insert: replacement,
+            selectionStart: 0,
+            selectionEnd: 0,
+        });
+        if (scrollerRef.current) {
+            scrollerRef.current.scrollTop = 0;
+            scrollerRef.current.scrollLeft = 0;
         }
-        if (props.ariaDescribedby) {
-            inputArea.setAttribute("aria-describedby", props.ariaDescribedby);
+    };
+    const handleFormat = () => {
+        var _a, _b;
+        const formatted = formatJson((_b = (_a = textareaRef.current) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : text, indentUnit.text);
+        if (formatted !== null) {
+            replaceDocument(formatted);
         }
-        else {
-            inputArea.removeAttribute("aria-describedby");
+    };
+    const handleCopy = () => {
+        var _a;
+        const textarea = textareaRef.current;
+        const content = (_a = textarea === null || textarea === void 0 ? void 0 : textarea.value) !== null && _a !== void 0 ? _a : text;
+        const clipboard = typeof navigator !== "undefined" ? navigator.clipboard : undefined;
+        if (clipboard && typeof clipboard.writeText === "function") {
+            void Promise.resolve(clipboard.writeText(content)).catch(() => {
+                /* A denied clipboard permission is not worth an error state. */
+            });
         }
-        if (props.ariaInvalid) {
-            inputArea.setAttribute("aria-invalid", "true");
+        else if (textarea && typeof document.execCommand === "function") {
+            // No async clipboard outside a secure context (plain-HTTP installs).
+            const { selectionStart, selectionEnd } = textarea;
+            textarea.focus();
+            textarea.select();
+            try {
+                document.execCommand("copy");
+            }
+            catch (_b) {
+                /* Nothing more to try. */
+            }
+            textarea.setSelectionRange(selectionStart, selectionEnd);
         }
         else {
-            inputArea.removeAttribute("aria-invalid");
+            return;
+        }
+        setCopied(true);
+        if (copyResetTimer.current) {
+            clearTimeout(copyResetTimer.current);
         }
+        copyResetTimer.current = setTimeout(() => {
+            setCopied(false);
+        }, 2000);
     };
-    /*
-     * Per-model, not per-editor and emphatically not global: a literal tab is
-     * illegal as YAML indentation, and Monaco's model defaults are four spaces
-     * with indentation detected from the initial content - so a rule pasted in
-     * tab-indented would keep emitting tabs the parser rejects.
-     */
-    const applyModelOptions = (editor) => {
-        var _a;
-        if (!isYaml) {
+    const handleKeyDown = (event) => {
+        // Leave composition (IME input) entirely to the browser.
+        if (event.nativeEvent.isComposing || event.keyCode === 229) {
             return;
         }
-        const model = (_a = editor === null || editor === void 0 ? void 0 : editor.getModel) === null || _a === void 0 ? void 0 : _a.call(editor);
-        if (!model || typeof model.updateOptions !== "function") {
+        const key = event.key;
+        const command = event.ctrlKey || event.metaKey;
+        if (key === "Escape") {
+            /*
+             * Only the first Escape is ours. A second one is left alone, so a
+             * dialog around the editor still closes on Escape, Escape.
+             */
+            if (!readOnly && !tabMovesFocusRef.current) {
+                event.preventDefault();
+                setTabRelease(true);
+            }
             return;
         }
-        model.updateOptions({ tabSize: 2, insertSpaces: true });
-    };
-    /*
-     * Markdown is prose, so it follows the caller's preference. YAML is code:
-     * red squiggles under every key name in a Sigma rule are pure noise, so
-     * spell check is off for it regardless of what the caller asked for.
-     */
-    const shouldSpellCheck = isYaml ? false : !props.disableSpellCheck;
-    const managesSpellCheck = props.type === CodeType.Markdown || isYaml;
-    const applySpellCheck = (editor) => {
-        if (!editor || !managesSpellCheck) {
+        if (key === "Tab") {
+            if (readOnly || tabMovesFocusRef.current || command || event.altKey) {
+                return;
+            }
+            event.preventDefault();
+            runEdit(event.shiftKey
+                ? outdent(readState(), indentUnit)
+                : indent(readState(), indentUnit));
+            return;
+        }
+        if (!MODIFIER_KEYS.includes(key) && tabMovesFocusRef.current) {
+            setTabRelease(false);
+        }
+        if (readOnly) {
+            return;
+        }
+        if (key === "Enter" && !command && !event.altKey) {
+            event.preventDefault();
+            runEdit(newLine(readState(), indentUnit, language.rules));
+            return;
+        }
+        if (key === "Backspace" && !command && !event.altKey) {
+            const edit = backspace(readState(), indentUnit, language.rules);
+            if (edit) {
+                event.preventDefault();
+                runEdit(edit);
+            }
+            return;
+        }
+        if (command && !event.altKey && (key === "/" || event.code === "Slash")) {
+            const edit = toggleLineComment(readState(), language.rules);
+            if (edit) {
+                event.preventDefault();
+                runEdit(edit);
+            }
             return;
         }
-        const domNode = editor.getDomNode();
-        if (!domNode) {
+        if (command &&
+            !event.altKey &&
+            !event.shiftKey &&
+            (key === "]" || key === "[")) {
+            event.preventDefault();
+            runEdit(key === "]"
+                ? indentLines(readState(), indentUnit)
+                : outdent(readState(), indentUnit));
             return;
         }
-        const textareaElement = domNode.querySelector("textarea");
-        if (textareaElement) {
-            textareaElement.spellcheck = shouldSpellCheck;
+        // Shift+Alt+F, as in VS Code. By code: Alt changes the key on a Mac.
+        if (event.shiftKey && event.altKey && !command && event.code === "KeyF") {
+            if (canFormat) {
+                event.preventDefault();
+                handleFormat();
+            }
+            return;
+        }
+        /*
+         * A printable character. Ctrl+Alt is AltGr on Windows, which is how a
+         * German keyboard types a bracket, so only Ctrl or Cmd alone is a
+         * shortcut.
+         */
+        const isShortcut = event.metaKey || (event.ctrlKey && !event.altKey);
+        if (key.length === 1 && !isShortcut) {
+            const edit = typeCharacter(readState(), key, language.rules);
+            if (edit) {
+                event.preventDefault();
+                runEdit(edit);
+            }
         }
     };
-    // Handle spell check configuration for Monaco Editor
-    useEffect(() => {
-        applySpellCheck(editorRef.current);
-        applyModelOptions(editorRef.current);
-        // eslint-disable-next-line
-    }, [props.disableSpellCheck, props.type]);
-    useEffect(() => {
-        applyAria(editorRef.current);
-        // eslint-disable-next-line
-    }, [props.ariaLabelledby, props.ariaDescribedby, props.ariaInvalid]);
-    /*
-     * Memoised: @monaco-editor/react calls editor.updateOptions() whenever this
-     * object's identity changes, so an inline literal reconfigured the editor on
-     * every parent re-render - which for the indentation options below would
-     * reset them mid-keystroke.
-     */
-    const editorOptions = useMemo(() => {
+    // A click on a line number selects that line, as in every other editor.
+    const handleGutterMouseDown = (event) => {
+        const textarea = textareaRef.current;
+        if (!textarea || event.button !== 0) {
+            return;
+        }
+        event.preventDefault();
+        const bounds = event.currentTarget.getBoundingClientRect();
+        const line = Math.min(lineCount, Math.max(1, Math.floor((event.clientY - bounds.top - CODE_EDITOR_PADDING_Y_PX) /
+            CODE_EDITOR_LINE_HEIGHT_PX) + 1));
+        const value = textarea.value;
+        let start = 0;
+        for (let current = 1; current < line; current++) {
+            start = value.indexOf("\n", start) + 1;
+        }
+        const end = lineEndOf(value, start);
+        textarea.focus();
+        textarea.setSelectionRange(start, end < value.length ? end + 1 : end);
+        captureSelection();
+    };
+    const status = useMemo(() => {
+        // Only once the check has caught up: a half-typed line is not an error yet.
+        const settled = !language.validator || checkedText === text;
+        if (props.error && settled) {
+            return { tone: "error", icon: IconProp.Error, message: props.error };
+        }
+        if (!syntax) {
+            return null;
+        }
+        if (checkedText.trim() === "") {
+            return {
+                tone: "neutral",
+                icon: IconProp.Info,
+                message: "Nothing entered yet.",
+            };
+        }
+        // Nobody parsed it, so nothing may be claimed about it.
+        if (syntax.wasSkipped) {
+            return {
+                tone: "neutral",
+                icon: IconProp.Info,
+                message: "Contains template expressions — syntax not checked.",
+            };
+        }
+        if (syntax.isValid) {
+            const lines = countLines(checkedText);
+            return {
+                tone: "valid",
+                icon: IconProp.CheckCircle,
+                message: `Valid ${language.label} · ${lines} ${lines === 1 ? "line" : "lines"}`,
+            };
+        }
         return {
-            acceptSuggestionOnCommitCharacter: false,
-            acceptSuggestionOnEnter: "off",
-            accessibilitySupport: "auto",
-            fontSize: 14,
-            automaticLayout: true,
-            codeLens: false,
-            colorDecorators: true,
-            contextmenu: false,
-            cursorBlinking: "blink",
-            tabIndex: props.tabIndex || 0,
-            minimap: { enabled: false },
-            cursorStyle: "line",
-            disableLayerHinting: false,
-            disableMonospaceOptimizations: false,
-            dragAndDrop: false,
-            fixedOverflowWidgets: false,
-            folding: true,
-            foldingStrategy: "auto",
-            fontLigatures: false,
-            formatOnPaste: false,
-            formatOnType: false,
-            hideCursorInOverviewRuler: false,
-            links: true,
-            mouseWheelZoom: false,
-            multiCursorMergeOverlapping: true,
-            multiCursorModifier: "alt",
-            overviewRulerBorder: true,
-            overviewRulerLanes: 2,
-            quickSuggestions: false,
-            quickSuggestionsDelay: 100,
-            readOnly: props.readOnly || false,
-            renderControlCharacters: false,
-            /*
-             * Long scalars - a URL, a base64 blob, a Sigma `condition:` line - run
-             * off the right edge, and with wordWrap off for code there is no other
-             * way to reach them. Wrapping YAML instead is not an option: the
-             * indentation IS the syntax, and a wrapped line reads as a deeper one.
-             */
-            scrollbar: {
-                horizontal: isYaml ? "auto" : "hidden",
-            },
-            renderLineHighlight: "all",
-            suggestOnTriggerCharacters: false,
-            /*
-             * In YAML whitespace is the syntax. Rendering it at the boundaries makes
-             * the indentation depth countable and, more importantly, makes a literal
-             * tab visible - tabs are illegal as YAML indentation and are otherwise
-             * indistinguishable from spaces.
-             */
-            renderWhitespace: isYaml ? "boundary" : "none",
-            revealHorizontalRightPadding: 30,
-            roundedSelection: true,
-            rulers: [],
-            scrollBeyondLastColumn: 5,
-            // Half a short editor as blank runway is wasted space in a form field.
-            scrollBeyondLastLine: !isYaml,
-            selectOnLineNumbers: true,
-            /*
-             * Every YAML parse error - ours and the server's - is reported as a
-             * line and column, so the gutter is what makes the message actionable.
-             */
-            lineNumbers: props.showLineNumbers || isYaml ? "on" : "off",
-            selectionClipboard: true,
-            selectionHighlight: true,
-            showFoldingControls: "mouseover",
-            smoothScrolling: false,
-            wordBasedSuggestions: "off",
-            wordWrap: props.type === CodeType.Markdown ? "on" : "off",
-            tabCompletion: "off",
-            // The YAML chrome owns the padding, so the editor supplies its own.
-            padding: isYaml ? { top: 10, bottom: 10 } : undefined,
-            /*
-             * tabSize / insertSpaces / detectIndentation deliberately do NOT belong
-             * here. They are IGlobalEditorOptions: monaco's standalone editor pipes
-             * whatever it is constructed with through updateConfigurationService,
-             * which writes every registered `editor.*` key into a PROCESS-WIDE
-             * config service - and those three are exactly the ones ModelService
-             * reads back, pushing them onto every model on the page. Setting them
-             * here would mean the last editor to mount dictates the indentation of
-             * all the others. They are applied to this editor's own model instead,
-             * in applyModelOptions below.
-             */
+            tone: "invalid",
+            icon: IconProp.Alert,
+            message: language.validator === "json"
+                ? describeJsonSyntaxError(syntax)
+                : describeYamlSyntaxError(syntax),
         };
-    }, [
-        props.tabIndex,
-        props.readOnly,
-        props.showLineNumbers,
-        props.type,
-        isYaml,
-    ]);
-    return (React.createElement("div", { "data-testid": props.dataTestId, "aria-labelledby": props.ariaLabelledby, onClick: () => {
-            if (props.onClick) {
-                props.onClick();
+    }, [props.error, syntax, checkedText, text, language]);
+    const isEmpty = text === "";
+    const showExampleButton = Boolean(example) && isEmpty && !readOnly;
+    const spellCheck = language.spellCheckFollowsCaller
+        ? !props.disableSpellCheck
+        : false;
+    const actions = {
+        getText: () => {
+            var _a, _b;
+            return (_b = (_a = textareaRef.current) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : textRef.current;
+        },
+        getSelection: () => {
+            const textarea = textareaRef.current;
+            if (!textarea) {
+                return { start: textRef.current.length, end: textRef.current.length };
             }
-            if (props.onFocus) {
-                props.onFocus();
+            return {
+                start: Math.min(textarea.selectionStart, textarea.selectionEnd),
+                end: Math.max(textarea.selectionStart, textarea.selectionEnd),
+            };
+        },
+        insertText: (insert) => {
+            const textarea = textareaRef.current;
+            if (!textarea || readOnly) {
+                return;
             }
-        } },
-        helpText && (React.createElement("p", { className: "bg-gray-50 text-gray-500 p-3 mt-2 mb-2 rounded text-base text-sm" },
-            " ",
-            helpText,
-            " ")),
-        React.createElement(Editor, { theme: theme === Theme.Dark ? "vs-dark" : "light", defaultLanguage: props.type, 
-            /*
-             * `defaultLanguage` is applied only when the model is created, so a
-             * caller that swaps CodeType after mount keeps the old grammar.
-             * `language` is the prop that drives setModelLanguage afterwards.
-             */
-            language: props.type, height: props.height || "30vh", value: value, onChange: (code) => {
-                if (code === undefined) {
-                    code = "";
-                }
-                setValue(code);
-                if (props.onBlur) {
-                    props.onBlur();
-                }
-                if (props.onChange) {
-                    props.onChange(code);
-                }
-            }, onMount: (editor, _monaco) => {
-                editorRef.current = editor;
-                applySpellCheck(editor);
-                applyModelOptions(editor);
-                applyAria(editor);
-            }, defaultValue: value || placeholder || "", className: className, options: editorOptions }),
-        props.error && (React.createElement("p", { className: "mt-1 text-sm text-red-400" }, props.error))));
+            const from = Math.min(textarea.selectionStart, textarea.selectionEnd);
+            const to = Math.max(textarea.selectionStart, textarea.selectionEnd);
+            textarea.focus();
+            applyEditToTextarea(textarea, {
+                from: from,
+                to: to,
+                insert: insert,
+                selectionStart: from + insert.length,
+                selectionEnd: from + insert.length,
+            });
+        },
+        focus: () => {
+            var _a;
+            (_a = textareaRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        },
+    };
+    const describedBy = [
+        props.ariaDescribedby,
+        props.hint ? hintId : null,
+        readOnly ? null : keysHintId,
+        status ? statusId : null,
+    ]
+        .filter(Boolean)
+        .join(" ") || "";
+    const rootClassName = [
+        "ou-code-editor overflow-hidden rounded-md border bg-white shadow-sm transition-shadow",
+        props.error
+            ? "border-red-300 focus-within:border-red-500 focus-within:ring-1 focus-within:ring-red-500"
+            : "border-gray-300 focus-within:border-indigo-500 focus-within:ring-1 focus-within:ring-indigo-500",
+        language.wrap ? "ou-code-editor--wrap" : "",
+        readOnly ? "ou-code-editor--readonly" : "",
+        props.className || "",
+    ]
+        .filter(Boolean)
+        .join(" ");
+    const minHeight = ((_a = props.minLines) !== null && _a !== void 0 ? _a : CODE_EDITOR_DEFAULT_MIN_LINES) *
+        CODE_EDITOR_LINE_HEIGHT_PX +
+        2 * CODE_EDITOR_PADDING_Y_PX;
+    const scrollerStyle = props.height
+        ? { height: props.height }
+        : { maxHeight: props.maxHeight || CODE_EDITOR_DEFAULT_MAX_HEIGHT };
+    return (React.createElement("div", { className: rootClassName, "data-testid": props.dataTestId, "data-code-type": props.type, onClick: props.onClick },
+        React.createElement("div", { className: "flex items-center justify-between gap-3 border-b border-gray-200 bg-gray-50 py-1 pl-3 pr-1.5" },
+            React.createElement("div", { className: "flex min-w-0 items-center gap-2" },
+                React.createElement("span", { "data-testid": "code-editor-language", className: "inline-flex shrink-0 items-center rounded border border-indigo-100 bg-indigo-50 px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-indigo-700" }, language.label),
+                readOnly && (React.createElement("span", { "data-testid": "code-editor-read-only", className: "inline-flex shrink-0 items-center gap-1 text-xs text-gray-500" },
+                    React.createElement(Icon, { icon: IconProp.Lock, className: "h-3 w-3" }),
+                    "Read-only")),
+                props.hint && (React.createElement("span", { id: hintId, "data-testid": "code-editor-hint", className: "truncate text-xs text-gray-500" }, props.hint))),
+            React.createElement("div", { className: "flex shrink-0 items-center gap-0.5" },
+                props.toolbarActions && !readOnly && props.toolbarActions(actions),
+                showExampleButton && (React.createElement("button", { type: "button", "data-testid": "code-editor-example-button", className: TOOLBAR_BUTTON_CLASS, onClick: () => {
+                        replaceDocument(example);
+                    } },
+                    React.createElement(Icon, { icon: IconProp.Code, className: "h-3.5 w-3.5" }),
+                    "Insert example")),
+                language.canFormat && !readOnly && (React.createElement("button", { type: "button", "data-testid": "code-editor-format-button", title: canFormat
+                        ? "Format the document (Shift+Alt+F)"
+                        : "Format is available once the document is valid JSON", disabled: !canFormat, className: TOOLBAR_BUTTON_CLASS, onClick: handleFormat },
+                    React.createElement(Icon, { icon: IconProp.Indent, className: "h-3.5 w-3.5" }),
+                    "Format")),
+                React.createElement("button", { type: "button", "data-testid": "code-editor-copy-button", "aria-label": copied
+                        ? `${language.label} copied to clipboard`
+                        : `Copy ${language.label} to clipboard`, disabled: isEmpty, className: TOOLBAR_BUTTON_CLASS, onClick: handleCopy },
+                    React.createElement(Icon, { icon: copied ? IconProp.Check : IconProp.Copy, className: "h-3.5 w-3.5" }),
+                    copied ? "Copied" : "Copy"))),
+        React.createElement("div", { ref: scrollerRef, "data-testid": "code-editor-scroller", className: "ou-code-editor__scroller", style: scrollerStyle },
+            React.createElement("div", { className: "ou-code-editor__content" },
+                showGutter && (React.createElement("div", { ref: gutterRef, "aria-hidden": "true", "data-testid": "code-editor-gutter", className: "ou-code-editor__gutter", style: {
+                        minWidth: `calc(${String(lineCount).length + 1}ch + 22px)`,
+                    }, onMouseDown: handleGutterMouseDown }, gutterSegments.map((segment, index) => {
+                    return segment.className ? (React.createElement("span", { key: index, className: segment.className }, segment.text)) : (React.createElement(React.Fragment, { key: index }, segment.text));
+                }))),
+                React.createElement("div", { className: "ou-code-editor__code", style: { minHeight } },
+                    React.createElement("span", { ref: measureRef, "aria-hidden": "true", className: "ou-code-editor__measure" }, "0".repeat(MEASURE_LENGTH)),
+                    showActiveLine && !language.wrap && (React.createElement("div", { "aria-hidden": "true", "data-testid": "code-editor-active-line", className: "ou-code-editor__active-line", style: {
+                            top: CODE_EDITOR_PADDING_Y_PX +
+                                (cursor.line - 1) * CODE_EDITOR_LINE_HEIGHT_PX,
+                        } })),
+                    React.createElement("div", { "aria-hidden": "true", "data-testid": "code-editor-highlight", className: "ou-code-editor__layer ou-code-editor__highlight", dangerouslySetInnerHTML: {
+                            /*
+                             * The trailing newline gives a document that ends in one the
+                             * empty last line the textarea shows; a final line break on
+                             * its own draws nothing.
+                             */
+                            __html: (ghostHtml !== null && ghostHtml !== void 0 ? ghostHtml : highlightedHtml) + "\n",
+                        } }),
+                    React.createElement("textarea", { ref: textareaRef, id: props.id, "data-testid": "code-editor-input", className: "ou-code-editor__layer ou-code-editor__input", value: text, readOnly: readOnly, tabIndex: props.tabIndex, placeholder: props.placeholder, wrap: language.wrap ? "soft" : "off", spellCheck: spellCheck, autoCapitalize: "off", autoComplete: "off", autoCorrect: "off", "data-gramm": "false", "data-gramm_editor": "false", "data-enable-grammarly": "false", "aria-label": props.ariaLabelledby || props.id
+                            ? undefined
+                            : `${language.label} editor`, "aria-labelledby": props.ariaLabelledby, "aria-describedby": describedBy || undefined, "aria-invalid": props.ariaInvalid || props.error ? true : undefined, onChange: (event) => {
+                            const next = event.target.value;
+                            textRef.current = next;
+                            setText(next);
+                            captureSelection();
+                            if (props.onChange) {
+                                props.onChange(next);
+                            }
+                        }, onKeyDown: handleKeyDown, onSelect: captureSelection, onKeyUp: captureSelection, onMouseUp: captureSelection, onFocus: () => {
+                            setIsFocused(true);
+                            setTabRelease(false);
+                            captureSelection();
+                            if (props.onFocus) {
+                                props.onFocus();
+                            }
+                        }, onBlur: () => {
+                            setIsFocused(false);
+                            setTabRelease(false);
+                            if (props.onBlur) {
+                                props.onBlur();
+                            }
+                        }, onScroll: (event) => {
+                            /*
+                             * The textarea is always exactly as big as its text, and the
+                             * scroller around it does the scrolling. Should it ever scroll
+                             * itself, its glyphs would slide off the colours under them.
+                             */
+                            const target = event.currentTarget;
+                            if (target.scrollTop !== 0 || target.scrollLeft !== 0) {
+                                target.scrollTop = 0;
+                                target.scrollLeft = 0;
+                            }
+                        } })))),
+        React.createElement("div", { className: "flex items-center justify-between gap-3 border-t border-gray-200 bg-gray-50 px-3 py-1 text-xs" },
+            React.createElement("div", { id: statusId, "data-testid": "code-editor-status", role: "status", "aria-live": "polite", className: `flex min-w-0 items-center gap-1.5 ${status ? STATUS_TONE_CLASS[status.tone] : "text-gray-500"}` }, status && (React.createElement(React.Fragment, null,
+                React.createElement(Icon, { icon: status.icon, className: "h-3.5 w-3.5 shrink-0" }),
+                React.createElement("span", { className: "min-w-0 break-words" }, status.message)))),
+            React.createElement("div", { "data-testid": "code-editor-cursor", className: "flex shrink-0 items-center gap-2 tabular-nums text-gray-500" },
+                tabMovesFocus && isFocused && (React.createElement("span", { "data-testid": "code-editor-tab-released", className: "rounded border border-gray-200 bg-white px-1.5 text-gray-600" }, "Tab moves focus")),
+                React.createElement("span", null,
+                    "Ln ",
+                    cursor.line,
+                    ", Col ",
+                    cursor.column,
+                    selectedCharacters > 0 ? ` (${selectedCharacters} selected)` : ""))),
+        !readOnly && (React.createElement("span", { id: keysHintId, className: "sr-only" }, CODE_EDITOR_KEYS_HINT)),
+        React.createElement("span", { role: "status", "aria-live": "polite", className: "sr-only" }, copied ? `${language.label} copied to clipboard` : "")));
 };
 export default CodeEditor;
 //# sourceMappingURL=CodeEditor.js.map