@mongodb-js/compass-editor 0.6.0 → 0.8.0

package/dist/json-editor.js

@@ -23,7 +23,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.JSONEditor = void 0;
+exports.setCodemirrorEditorValue = exports.CodemirrorMultilineEditor = exports.CodemirrorInlineEditor = exports.BaseEditor = exports.languageName = exports.languages = exports.editorPalette = void 0;
 const react_1 = __importStar(require("react"));
 const view_1 = require("@codemirror/view");
 const language_1 = require("@codemirror/language");
@@ -38,16 +38,42 @@ const language_2 = require("@codemirror/language");
 const highlight_1 = require("@lezer/highlight");
 const polished_1 = require("polished");
 const prettify_1 = require("./prettify");
+const actions_1 = require("./actions");
 const editorStyle = (0, compass_components_1.css)({
     fontSize: 13,
     fontFamily: compass_components_1.fontFamilies.code,
 });
-const editorPalette = {
+const hiddenScrollStyle = (0, compass_components_1.css)({
+    '& .cm-scroller': {
+        overflow: '-moz-scrollbars-none',
+        msOverflowStyle: 'none',
+    },
+    '& .cm-scroller::-webkit-scrollbar': {
+        display: 'none',
+    },
+});
+function isReadOnly(state) {
+    return state.facet(state_1.EditorState.readOnly);
+}
+const breakFocusOutBinding = {
+    ...commands_1.indentWithTab,
+    run({ state, dispatch }) {
+        if (isReadOnly(state)) {
+            return false;
+        }
+        dispatch(state.update(state.replaceSelection('\t'), {
+            scrollIntoView: true,
+            userEvent: 'input',
+        }));
+        return true;
+    },
+};
+exports.editorPalette = {
     light: {
         color: compass_components_1.codePalette.light[3],
         backgroundColor: compass_components_1.codePalette.light[0],
-        gutterColor: compass_components_1.palette.gray.base,
-        gutterBackgroundColor: compass_components_1.palette.gray.light3,
+        gutterColor: compass_components_1.codePalette.light[3],
+        gutterBackgroundColor: compass_components_1.codePalette.light[0],
         gutterActiveLineBackgroundColor: (0, polished_1.rgba)(compass_components_1.palette.gray.light2, 0.5),
         gutterFoldButtonColor: compass_components_1.palette.black,
         cursorColor: compass_components_1.palette.gray.base,
@@ -59,12 +85,17 @@ const editorPalette = {
         errorGutterIconColor: encodeURIComponent(compass_components_1.palette.red.base),
         foldPlaceholderColor: compass_components_1.palette.gray.base,
         foldPlaceholderBackgroundColor: compass_components_1.palette.gray.light3,
+        autocompleteColor: compass_components_1.palette.black,
+        autocompleteBackgroundColor: compass_components_1.palette.gray.light3,
+        autocompleteBorderColor: compass_components_1.palette.gray.light2,
+        autocompleteMatchColor: compass_components_1.palette.green.dark1,
+        autocompleteSelectedBackgroundColor: compass_components_1.palette.gray.light2,
     },
     dark: {
         color: compass_components_1.codePalette.dark[3],
         backgroundColor: compass_components_1.codePalette.dark[0],
-        gutterColor: compass_components_1.palette.gray.light3,
-        gutterBackgroundColor: compass_components_1.palette.gray.dark4,
+        gutterColor: compass_components_1.codePalette.dark[3],
+        gutterBackgroundColor: compass_components_1.codePalette.dark[0],
         gutterActiveLineBackgroundColor: (0, polished_1.rgba)(compass_components_1.palette.gray.dark2, 0.5),
         gutterFoldButtonColor: compass_components_1.palette.white,
         cursorColor: compass_components_1.palette.green.base,
@@ -76,44 +107,45 @@ const editorPalette = {
         errorGutterIconColor: encodeURIComponent(compass_components_1.palette.red.light1),
         foldPlaceholderColor: compass_components_1.palette.gray.base,
         foldPlaceholderBackgroundColor: compass_components_1.palette.gray.dark3,
+        autocompleteColor: compass_components_1.palette.gray.light1,
+        autocompleteBackgroundColor: compass_components_1.palette.gray.dark4,
+        autocompleteBorderColor: compass_components_1.palette.gray.dark1,
+        autocompleteMatchColor: compass_components_1.palette.gray.light3,
+        autocompleteSelectedBackgroundColor: compass_components_1.palette.gray.dark2,
     },
 };
 function getStylesForTheme(theme) {
     return view_1.EditorView.theme({
         '&': {
-            color: editorPalette[theme].color,
-            backgroundColor: editorPalette[theme].backgroundColor,
+            color: exports.editorPalette[theme].color,
+            backgroundColor: exports.editorPalette[theme].backgroundColor,
+            maxHeight: '100%',
         },
         '& .cm-scroller': {
             fontSize: '13px',
             fontFamily: compass_components_1.fontFamilies.code,
-            lineHeight: `${compass_components_1.spacing[3]}px`,
         },
         '&.cm-editor.cm-focused': {
             outline: 'none',
         },
         '& .cm-content': {
-            caretColor: editorPalette[theme].cursorColor,
+            paddingTop: `${compass_components_1.spacing[1]}px`,
+            paddingBottom: `${compass_components_1.spacing[1]}px`,
+            caretColor: exports.editorPalette[theme].cursorColor,
         },
         '& .cm-activeLine': {
             background: 'none',
         },
         '&.cm-focused .cm-activeLine': {
-            backgroundColor: editorPalette[theme].activeLineBackgroundColor,
+            backgroundColor: exports.editorPalette[theme].activeLineBackgroundColor,
         },
         '& .cm-gutters': {
-            color: editorPalette[theme].gutterColor,
-            backgroundColor: editorPalette[theme].gutterBackgroundColor,
+            color: exports.editorPalette[theme].gutterColor,
+            backgroundColor: exports.editorPalette[theme].gutterBackgroundColor,
             border: 'none',
         },
-        '& .cm-gutters > .cm-gutter:first-child > .cm-gutterElement': {
-            paddingLeft: `${compass_components_1.spacing[2]}px`,
-        },
-        '& .cm-gutters > .cm-gutter:last-child > .cm-gutterElement': {
-            paddingRight: `${compass_components_1.spacing[2]}px`,
-        },
         '& .cm-gutter-lint': {
-            width: 'auto',
+            width: `${compass_components_1.spacing[3]}px`,
         },
         '& .cm-gutter-lint .cm-gutterElement': {
             padding: '0',
@@ -124,26 +156,26 @@ function getStylesForTheme(theme) {
             padding: '2px',
         },
         '& .cm-gutter-lint .cm-lint-marker-info': {
-            content: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='${editorPalette[theme].infoGutterIconColor}' fill-rule='evenodd' d='M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14ZM9 4a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM8 6a1 1 0 0 1 1 1v4h.5a.5.5 0 0 1 0 1h-3a.5.5 0 0 1 0-1H7V7h-.5a.5.5 0 0 1 0-1H8Z' clip-rule='evenodd'/%3E%3C/svg%3E%0A")`,
+            content: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='${exports.editorPalette[theme].infoGutterIconColor}' fill-rule='evenodd' d='M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14ZM9 4a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM8 6a1 1 0 0 1 1 1v4h.5a.5.5 0 0 1 0 1h-3a.5.5 0 0 1 0-1H7V7h-.5a.5.5 0 0 1 0-1H8Z' clip-rule='evenodd'/%3E%3C/svg%3E%0A")`,
         },
         '& .cm-gutter-lint .cm-lint-marker-warning': {
-            content: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='${editorPalette[theme].warningGutterIconColor}' fill-rule='evenodd' d='M8.864 2.514a.983.983 0 0 0-1.728 0L1.122 13.539A.987.987 0 0 0 1.986 15h12.028a.987.987 0 0 0 .864-1.461L8.864 2.514ZM7 6a1 1 0 0 1 2 0v4a1 1 0 1 1-2 0V6Zm2 7a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z' clip-rule='evenodd'/%3E%3C/svg%3E%0A")`,
+            content: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='${exports.editorPalette[theme].warningGutterIconColor}' fill-rule='evenodd' d='M8.864 2.514a.983.983 0 0 0-1.728 0L1.122 13.539A.987.987 0 0 0 1.986 15h12.028a.987.987 0 0 0 .864-1.461L8.864 2.514ZM7 6a1 1 0 0 1 2 0v4a1 1 0 1 1-2 0V6Zm2 7a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z' clip-rule='evenodd'/%3E%3C/svg%3E%0A")`,
         },
         '& .cm-gutter-lint .cm-lint-marker-error': {
-            content: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='${editorPalette[theme].errorGutterIconColor}' fill-rule='evenodd' d='M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm1.414-9.828a1 1 0 1 1 1.414 1.414L9.414 8l1.414 1.414a1 1 0 1 1-1.414 1.414L8 9.414l-1.414 1.414a1 1 0 1 1-1.414-1.414L6.586 8 5.172 6.586a1 1 0 0 1 1.414-1.414L8 6.586l1.414-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E%0A")`,
+            content: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='${exports.editorPalette[theme].errorGutterIconColor}' fill-rule='evenodd' d='M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm1.414-9.828a1 1 0 1 1 1.414 1.414L9.414 8l1.414 1.414a1 1 0 1 1-1.414 1.414L8 9.414l-1.414 1.414a1 1 0 1 1-1.414-1.414L6.586 8 5.172 6.586a1 1 0 0 1 1.414-1.414L8 6.586l1.414-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E%0A")`,
         },
         '& .cm-activeLineGutter': {
             background: 'none',
         },
         '&.cm-focused .cm-activeLineGutter': {
-            backgroundColor: editorPalette[theme].gutterActiveLineBackgroundColor,
+            backgroundColor: exports.editorPalette[theme].gutterActiveLineBackgroundColor,
         },
         '& .cm-foldPlaceholder': {
             display: 'inline-block',
             border: 'none',
-            color: editorPalette[theme].foldPlaceholderColor,
-            backgroundColor: editorPalette[theme].foldPlaceholderBackgroundColor,
-            boxShadow: `inset 0 0 0 1px ${editorPalette[theme].foldPlaceholderColor}`,
+            color: exports.editorPalette[theme].foldPlaceholderColor,
+            backgroundColor: exports.editorPalette[theme].foldPlaceholderBackgroundColor,
+            boxShadow: `inset 0 0 0 1px ${exports.editorPalette[theme].foldPlaceholderColor}`,
             padding: '0 2px',
         },
         '& .foldMarker': {
@@ -158,14 +190,14 @@ function getStylesForTheme(theme) {
             width: '12px',
             height: '12px',
             display: 'block',
-            color: editorPalette[theme].gutterFoldButtonColor,
+            color: exports.editorPalette[theme].gutterFoldButtonColor,
         },
         '& .cm-selectionBackground': {
-            backgroundColor: editorPalette[theme].selectionBackgroundColor,
+            backgroundColor: exports.editorPalette[theme].selectionBackgroundColor,
         },
         '&.cm-focused .cm-matchingBracket': {
             background: 'none',
-            boxShadow: `0 0 0 1px ${editorPalette[theme].bracketBorderColor}`,
+            boxShadow: `0 0 0 1px ${exports.editorPalette[theme].bracketBorderColor}`,
             borderRadius: '2px',
         },
         '& .cm-selectionBackground:first-child': {
@@ -178,9 +210,48 @@ function getStylesForTheme(theme) {
         },
         '& .cm-cursor': {
             borderLeft: '2px solid',
-            borderColor: editorPalette[theme].cursorColor,
+            borderColor: exports.editorPalette[theme].cursorColor,
             marginLeft: '-1px',
         },
+        '& .cm-tooltip': {
+            color: exports.editorPalette[theme].autocompleteColor,
+            backgroundColor: exports.editorPalette[theme].autocompleteBackgroundColor,
+            border: `1px solid ${exports.editorPalette[theme].autocompleteBorderColor}`,
+        },
+        '& .cm-tooltip.cm-tooltip-autocomplete > ul': {
+            fontFamily: compass_components_1.fontFamilies.code,
+        },
+        '& .cm-tooltip-autocomplete ul li[aria-selected]': {
+            color: exports.editorPalette[theme].autocompleteColor,
+            backgroundColor: exports.editorPalette[theme].autocompleteSelectedBackgroundColor,
+        },
+        '& .cm-completionIcon': {
+            display: 'none',
+        },
+        '& .cm-completionDetail': {
+            color: (0, polished_1.rgba)(exports.editorPalette[theme].autocompleteColor, 0.5),
+            fontStyle: 'normal',
+            marginRight: '1em',
+        },
+        '& .cm-completionMatchedText': {
+            color: exports.editorPalette[theme].autocompleteMatchColor,
+            fontWeight: 'bold',
+            textDecoration: 'none',
+        },
+        '& .cm-tooltip .completion-info p': {
+            margin: 0,
+            marginTop: `${compass_components_1.spacing[2]}px`,
+            marginBottom: `${compass_components_1.spacing[2]}px`,
+        },
+        '& .cm-tooltip .completion-info p:first-child': {
+            marginTop: 0,
+        },
+        '& .cm-tooltip .completion-info p:last-child': {
+            marginBottom: 0,
+        },
+        '& .cm-widgetBuffer': {
+            verticalAlign: 'top',
+        },
     }, { dark: theme === 'dark' });
 }
 const themeStyles = {
@@ -265,13 +336,30 @@ function createFoldGutterExtension() {
 const javascriptExpression = lang_javascript_1.javascriptLanguage.configure({
     top: 'SingleExpression',
 });
-const languages = {
+exports.languages = {
     json: lang_json_1.json,
-    javascript() {
+    javascript: lang_javascript_1.javascript,
+    'javascript-expression': () => {
         return new language_2.LanguageSupport(javascriptExpression);
     },
 };
-const languageName = state_1.Facet.define({});
+exports.languageName = state_1.Facet.define({});
+async function wait(ms) {
+    return new Promise((resolve) => {
+        setTimeout(resolve, ms);
+    });
+}
+async function sheduleDispatch(editorView, transactions, signal) {
+    while (editorView.updateState != 0) {
+        if (signal === null || signal === void 0 ? void 0 : signal.aborted) {
+            return false;
+        }
+        await wait();
+    }
+    transactions = Array.isArray(transactions) ? transactions : [transactions];
+    editorView.dispatch(...transactions);
+    return true;
+}
 function useCodemirrorExtensionCompartment(fn, value, editorViewRef) {
     var _a, _b;
     const extensionCreatorRef = (0, react_1.useRef)(fn);
@@ -281,16 +369,22 @@ function useCodemirrorExtensionCompartment(fn, value, editorViewRef) {
     const initialExtensionRef = (0, react_1.useRef)();
     (_b = initialExtensionRef.current) !== null && _b !== void 0 ? _b : (initialExtensionRef.current = compartmentRef.current.of(extensionCreatorRef.current()));
     (0, compass_components_1.useEffectOnChange)(() => {
-        var _a, _b;
-        (_a = editorViewRef.current) === null || _a === void 0 ? void 0 : _a.dispatch({
-            effects: (_b = compartmentRef.current) === null || _b === void 0 ? void 0 : _b.reconfigure(extensionCreatorRef.current()),
-        });
+        var _a;
+        if (!editorViewRef.current) {
+            return;
+        }
+        const controller = new AbortController();
+        void sheduleDispatch(editorViewRef.current, {
+            effects: (_a = compartmentRef.current) === null || _a === void 0 ? void 0 : _a.reconfigure(extensionCreatorRef.current()),
+        }, controller.signal);
+        return () => {
+            controller.abort();
+        };
     }, value);
     return initialExtensionRef.current;
 }
-const BaseEditor = ({ initialText: _initialText, text, onChangeText = () => {
-}, language = 'json', showLineNumbers = true, showFoldGutter = true, annotations = [], completer, darkMode: _darkMode, className, readOnly = false, onLoad = () => {
-}, ...props }) => {
+const BaseEditor = react_1.default.forwardRef(function BaseEditor({ initialText: _initialText, text, onChangeText, language = 'json', showLineNumbers = true, showFoldGutter = true, showAnnotationsGutter = true, showScroll = true, highlightActiveLine: shouldHighlightActiveLine = true, annotations, completer, darkMode: _darkMode, className, readOnly = false, onLoad = () => {
+}, minLines, maxLines, lineHeight = 16, placeholder: placeholderString, commands, initialJSONFoldAll: _initialJSONFoldAll = true, ...props }, ref) {
     const darkMode = (0, compass_components_1.useDarkMode)(_darkMode);
     const onChangeTextRef = (0, react_1.useRef)(onChangeText);
     const onLoadRef = (0, react_1.useRef)(onLoad);
@@ -298,28 +392,101 @@ const BaseEditor = ({ initialText: _initialText, text, onChangeText = () => {
     const initialText = (0, react_1.useRef)(_initialText !== null && _initialText !== void 0 ? _initialText : text);
     const initialLanguage = (0, react_1.useRef)(language);
     const containerRef = (0, react_1.useRef)(null);
+    const editorContainerRef = (0, react_1.useRef)(null);
     const editorViewRef = (0, react_1.useRef)();
+    const [{ height: contentHeight, hasScroll }, setContentHeight] = (0, react_1.useState)({
+        height: 0,
+        hasScroll: false,
+    });
+    const initialJSONFoldAll = (0, react_1.useRef)(_initialJSONFoldAll);
     onChangeTextRef.current = onChangeText;
     onLoadRef.current = onLoad;
+    (0, react_1.useImperativeHandle)(ref, () => {
+        return {
+            foldAll() {
+                if (!editorViewRef.current) {
+                    return false;
+                }
+                return foldAll(editorViewRef.current);
+            },
+            unfoldAll() {
+                if (!editorViewRef.current) {
+                    return false;
+                }
+                return (0, language_1.unfoldAll)(editorViewRef.current);
+            },
+            copyAll() {
+                if (!editorViewRef.current) {
+                    return false;
+                }
+                return copyAll(editorViewRef.current);
+            },
+            prettify() {
+                if (!editorViewRef.current) {
+                    return false;
+                }
+                return prettify(editorViewRef.current);
+            },
+            applySnippet(template) {
+                if (!editorViewRef.current) {
+                    return false;
+                }
+                return applySnippet(editorViewRef.current, template);
+            },
+            focus() {
+                if (!editorViewRef.current) {
+                    return false;
+                }
+                editorViewRef.current.focus();
+                return true;
+            },
+            get editor() {
+                var _a;
+                return (_a = editorViewRef.current) !== null && _a !== void 0 ? _a : null;
+            },
+        };
+    }, []);
     const languageExtension = useCodemirrorExtensionCompartment(() => {
-        return [languages[language](), languageName.of(language)];
+        return [exports.languages[language](), exports.languageName.of(language)];
     }, language, editorViewRef);
+    const activeLineExtension = useCodemirrorExtensionCompartment(() => {
+        return !readOnly && shouldHighlightActiveLine
+            ? [(0, view_1.highlightActiveLine)(), (0, view_1.highlightActiveLineGutter)()]
+            : [];
+    }, [readOnly, shouldHighlightActiveLine], editorViewRef);
     const readOnlyExtension = useCodemirrorExtensionCompartment(() => {
-        return [state_1.EditorState.readOnly.of(readOnly)].concat(readOnly ? [] : [(0, view_1.highlightActiveLine)(), (0, view_1.highlightActiveLineGutter)()]);
+        return state_1.EditorState.readOnly.of(readOnly);
     }, readOnly, editorViewRef);
     const themeConfigExtension = useCodemirrorExtensionCompartment(() => {
         return themeStyles[darkMode ? 'dark' : 'light'];
     }, darkMode, editorViewRef);
+    const lineHeightExtension = useCodemirrorExtensionCompartment(() => {
+        return view_1.EditorView.theme({
+            '& .cm-scroller': {
+                lineHeight: `${lineHeight}px`,
+                ...(maxLines &&
+                    maxLines < Infinity && {
+                    maxHeight: `${maxLines * lineHeight}px`,
+                }),
+                height: '100%',
+                overflowY: 'auto',
+            },
+            '& .cm-content, & .cm-gutter': {
+                ...(minLines && { minHeight: `${minLines * lineHeight}px` }),
+            },
+        });
+    }, [minLines, maxLines, lineHeight], editorViewRef);
     const lineNumbersExtension = useCodemirrorExtensionCompartment(() => {
         return showLineNumbers ? (0, view_1.lineNumbers)() : [];
     }, showLineNumbers, editorViewRef);
     const foldGutterExtension = useCodemirrorExtensionCompartment(() => {
         return showFoldGutter ? createFoldGutterExtension() : [];
     }, showFoldGutter, editorViewRef);
+    const shouldShowAnnotationsGutter = showAnnotationsGutter || (annotations && annotations.length === 0);
     const annotationsGutterExtension = useCodemirrorExtensionCompartment(() => {
-        return annotations.length === 0 ? [] : (0, lint_1.lintGutter)();
-    }, annotations.length === 0, editorViewRef);
-    const autocomletionExtension = useCodemirrorExtensionCompartment(() => {
+        return shouldShowAnnotationsGutter ? (0, lint_1.lintGutter)() : [];
+    }, shouldShowAnnotationsGutter, editorViewRef);
+    const autocompletionExtension = useCodemirrorExtensionCompartment(() => {
         return completer
             ? (0, autocomplete_1.autocompletion)({
                 activateOnTyping: true,
@@ -327,28 +494,67 @@ const BaseEditor = ({ initialText: _initialText, text, onChangeText = () => {
             })
             : [];
     }, completer, editorViewRef);
+    const placeholderExtension = useCodemirrorExtensionCompartment(() => {
+        return placeholderString ? (0, view_1.placeholder)(placeholderString) : [];
+    }, placeholderString, editorViewRef);
+    const commandsExtension = useCodemirrorExtensionCompartment(() => {
+        return commands && commands.length > 0 ? view_1.keymap.of(commands) : [];
+    }, commands, editorViewRef);
+    const updateEditorContentHeight = (0, react_1.useCallback)(() => {
+        var _a;
+        (_a = editorViewRef.current) === null || _a === void 0 ? void 0 : _a.requestMeasure({
+            read(view) {
+                return [
+                    view.contentHeight,
+                    view.scrollDOM.scrollWidth > view.scrollDOM.clientWidth,
+                ];
+            },
+            write([height, hasScroll]) {
+                setContentHeight((state) => {
+                    if (height !== state.height || hasScroll !== state.hasScroll) {
+                        return { height, hasScroll };
+                    }
+                    return state;
+                });
+            },
+        });
+    }, []);
     (0, react_1.useLayoutEffect)(() => {
-        if (!containerRef.current) {
+        if (!editorContainerRef.current) {
             throw new Error("Can't mount editor: DOM node is missing");
         }
-        const domNode = containerRef.current;
+        const domNode = editorContainerRef.current;
         const editor = (editorViewRef.current = new view_1.EditorView({
             doc: initialText.current,
             extensions: [
+                state_1.EditorState.tabSize.of(2),
+                annotationsGutterExtension,
                 lineNumbersExtension,
-                (0, commands_1.history)(),
                 foldGutterExtension,
+                (0, commands_1.history)(),
                 (0, view_1.drawSelection)(),
                 (0, language_1.indentOnInput)(),
                 (0, language_1.bracketMatching)(),
                 (0, autocomplete_1.closeBrackets)(),
-                autocomletionExtension,
-                annotationsGutterExtension,
+                autocompletionExtension,
                 languageExtension,
                 (0, language_2.syntaxHighlighting)(highlightStyles['light']),
                 (0, language_2.syntaxHighlighting)(highlightStyles['dark']),
+                activeLineExtension,
+                lineHeightExtension,
                 themeConfigExtension,
+                placeholderExtension,
+                commandsExtension,
                 view_1.keymap.of([
+                    {
+                        key: 'Tab',
+                        run(context) {
+                            if (isReadOnly(context.state)) {
+                                return false;
+                            }
+                            return (0, autocomplete_1.acceptCompletion)(context);
+                        },
+                    },
                     {
                         key: 'Ctrl-Shift-b',
                         run: prettify,
@@ -362,14 +568,15 @@ const BaseEditor = ({ initialText: _initialText, text, onChangeText = () => {
                     ...commands_1.historyKeymap,
                     ...language_1.foldKeymap,
                     ...autocomplete_1.completionKeymap,
-                    commands_1.indentWithTab,
+                    breakFocusOutBinding,
                 ]),
                 readOnlyExtension,
                 view_1.EditorView.updateListener.of((update) => {
-                    var _a;
+                    var _a, _b;
+                    updateEditorContentHeight();
                     if (update.docChanged) {
                         const text = (_a = editor.state.sliceDoc()) !== null && _a !== void 0 ? _a : '';
-                        onChangeTextRef.current(text, update);
+                        (_b = onChangeTextRef.current) === null || _b === void 0 ? void 0 : _b.call(onChangeTextRef, text, update);
                     }
                 }),
             ],
@@ -381,12 +588,13 @@ const BaseEditor = ({ initialText: _initialText, text, onChangeText = () => {
             const docLength = editor.state.doc.length;
             const isSyntaxTreeAvailable = (0, language_1.syntaxTreeAvailable)(editor.state, docLength) ||
                 (0, language_1.forceParsing)(editor, docLength, 150);
-            if (isSyntaxTreeAvailable) {
+            if (initialJSONFoldAll.current && isSyntaxTreeAvailable) {
                 foldAll(editor);
             }
             else {
             }
         }
+        updateEditorContentHeight();
         return () => {
             delete domNode._cm;
             editor.destroy();
@@ -398,32 +606,66 @@ const BaseEditor = ({ initialText: _initialText, text, onChangeText = () => {
         lineNumbersExtension,
         readOnlyExtension,
         themeConfigExtension,
-        autocomletionExtension,
+        autocompletionExtension,
+        lineHeightExtension,
+        activeLineExtension,
+        placeholderExtension,
+        commandsExtension,
+        updateEditorContentHeight,
     ]);
     (0, react_1.useEffect)(() => {
-        var _a, _b;
+        var _a;
         if (initialTextProvided.current) {
             return;
         }
-        if (text !== ((_a = editorViewRef.current) === null || _a === void 0 ? void 0 : _a.state.sliceDoc())) {
-            (_b = editorViewRef.current) === null || _b === void 0 ? void 0 : _b.dispatch({
+        if (editorViewRef.current &&
+            text !== ((_a = editorViewRef.current.state.sliceDoc()) !== null && _a !== void 0 ? _a : '')) {
+            const controller = new AbortController();
+            void sheduleDispatch(editorViewRef.current, {
                 changes: {
                     from: 0,
                     to: editorViewRef.current.state.doc.length,
                     insert: text,
                 },
-            });
+            }, controller.signal);
+            return () => {
+                controller.abort();
+            };
         }
     }, [text]);
     (0, react_1.useEffect)(() => {
-        var _a;
-        (_a = editorViewRef.current) === null || _a === void 0 ? void 0 : _a.dispatch({
-            effects: lint_1.setDiagnosticsEffect.of(annotations),
-        });
+        if (!editorViewRef.current) {
+            return;
+        }
+        const controller = new AbortController();
+        void sheduleDispatch(editorViewRef.current, {
+            effects: lint_1.setDiagnosticsEffect.of(annotations !== null && annotations !== void 0 ? annotations : []),
+        }, controller.signal);
+        return () => {
+            controller.abort();
+        };
     }, [annotations]);
-    return (react_1.default.createElement("div", { ref: containerRef, className: (0, compass_components_1.cx)(editorStyle, className), "data-codemirror": "true", ...props }));
-};
-exports.JSONEditor = BaseEditor;
+    (0, react_1.useLayoutEffect)(() => {
+        if (containerRef.current) {
+            const scrollHeight = hasScroll && showScroll ? 10 : 0;
+            const height = Math.min(contentHeight, (maxLines !== null && maxLines !== void 0 ? maxLines : Infinity) * lineHeight) +
+                scrollHeight;
+            containerRef.current.style.height = `${height}px`;
+        }
+    }, [maxLines, contentHeight, hasScroll, lineHeight, showScroll]);
+    return (react_1.default.createElement("div", { ref: containerRef, className: className, style: {
+            width: '100%',
+            minHeight: Math.max(lineHeight, (minLines !== null && minLines !== void 0 ? minLines : 0) * lineHeight),
+            position: 'relative',
+            maxHeight: '100%',
+        } },
+        react_1.default.createElement("div", { ref: editorContainerRef, className: (0, compass_components_1.cx)(editorStyle, !showScroll && hiddenScrollStyle), style: {
+                position: 'absolute',
+                width: '100%',
+                height: '100%',
+            }, "data-codemirror": "true", ...props })));
+});
+exports.BaseEditor = BaseEditor;
 function isTopNode(node) {
     return !node
         ? true
@@ -433,6 +675,19 @@ function isTopNode(node) {
                 ? true
                 : isTopNode(node.parent);
 }
+const applySnippet = (editor, template) => {
+    if (isReadOnly(editor.state)) {
+        return false;
+    }
+    const completion = (0, autocomplete_1.snippetCompletion)(template, { label: template });
+    if (typeof completion.apply === 'function') {
+        completion.apply(editor, completion, 0, editor.state.doc.length);
+        return true;
+    }
+    else {
+        return false;
+    }
+};
 const foldAll = (editor) => {
     const foldableProperties = [];
     (0, language_1.syntaxTree)(editor.state).iterate({
@@ -452,7 +707,7 @@ const foldAll = (editor) => {
         },
     });
     if (foldableProperties.length > 0) {
-        editor.dispatch({
+        void sheduleDispatch(editor, {
             effects: foldableProperties.map((range) => {
                 return language_1.foldEffect.of(range);
             }),
@@ -465,20 +720,21 @@ const copyAll = (editorView) => {
     return true;
 };
 const prettify = (editorView) => {
-    if (editorView.state.facet(state_1.EditorState.readOnly)) {
+    if (isReadOnly(editorView.state)) {
         return false;
     }
-    const language = editorView.state.facet(languageName)[0];
+    const language = editorView.state.facet(exports.languageName)[0];
     const doc = editorView.state.sliceDoc();
     try {
-        const formatted = (0, prettify_1.prettify)(doc, language === 'json' ? 'json' : 'javascript-expression');
+        const formatted = (0, prettify_1.prettify)(doc, language);
         if (formatted !== doc) {
-            editorView.dispatch({
+            void sheduleDispatch(editorView, {
                 changes: {
                     from: 0,
                     to: editorView.state.doc.length,
                     insert: formatted,
                 },
+                scrollIntoView: true,
             });
             return true;
         }
@@ -487,8 +743,116 @@ const prettify = (editorView) => {
     }
     return false;
 };
-BaseEditor.foldAll = foldAll;
-BaseEditor.unfoldAll = language_1.unfoldAll;
-BaseEditor.copyAll = copyAll;
-BaseEditor.prettify = prettify;
+const inlineStyles = (0, compass_components_1.css)({
+    '& .cm-editor': {
+        backgroundColor: 'transparent',
+    },
+});
+const InlineEditor = react_1.default.forwardRef(function InlineEditor({ className, ...props }, forwardRef) {
+    return (react_1.default.createElement(BaseEditor, { ref: forwardRef, maxLines: 10, showFoldGutter: false, showLineNumbers: false, showAnnotationsGutter: false, showScroll: false, highlightActiveLine: false, className: (0, compass_components_1.cx)(inlineStyles, className), language: "javascript-expression", ...props }));
+});
+exports.CodemirrorInlineEditor = InlineEditor;
+const multilineEditorContainerStyle = (0, compass_components_1.css)({
+    position: 'relative',
+    height: '100%',
+    backgroundColor: exports.editorPalette.light.backgroundColor,
+    [`&:focus-within > .multiline-editor-actions,
+    &:hover > .multiline-editor-actions`]: {
+        display: 'flex',
+    },
+});
+const multilineEditorContainerDarkModeStyle = (0, compass_components_1.css)({
+    backgroundColor: exports.editorPalette.dark.backgroundColor,
+});
+const actionsContainerStyle = (0, compass_components_1.css)({
+    position: 'absolute',
+    top: compass_components_1.spacing[1],
+    right: compass_components_1.spacing[2],
+    display: 'none',
+    gap: compass_components_1.spacing[2],
+});
+const MultilineEditor = react_1.default.forwardRef(function MultilineEditor({ customActions, copyable = true, formattable = true, className, editorClassName, actionsClassName, darkMode: _darkMode, ...props }, ref) {
+    const darkMode = (0, compass_components_1.useDarkMode)(_darkMode);
+    const containerRef = (0, react_1.useRef)(null);
+    const editorRef = (0, react_1.useRef)(null);
+    (0, react_1.useImperativeHandle)(ref, () => {
+        return {
+            foldAll() {
+                var _a, _b;
+                return (_b = (_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.foldAll()) !== null && _b !== void 0 ? _b : false;
+            },
+            unfoldAll() {
+                var _a, _b;
+                return (_b = (_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.unfoldAll()) !== null && _b !== void 0 ? _b : false;
+            },
+            copyAll() {
+                var _a, _b;
+                return (_b = (_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.copyAll()) !== null && _b !== void 0 ? _b : false;
+            },
+            prettify() {
+                var _a, _b;
+                return (_b = (_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.prettify()) !== null && _b !== void 0 ? _b : false;
+            },
+            focus() {
+                var _a, _b;
+                return (_b = (_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.focus()) !== null && _b !== void 0 ? _b : false;
+            },
+            applySnippet(template) {
+                var _a, _b;
+                return (_b = (_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.applySnippet(template)) !== null && _b !== void 0 ? _b : false;
+            },
+            get editor() {
+                var _a, _b;
+                return (_b = (_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.editor) !== null && _b !== void 0 ? _b : null;
+            },
+        };
+    }, []);
+    const actions = (0, react_1.useMemo)(() => {
+        return [
+            copyable && (react_1.default.createElement(actions_1.ActionButton, { key: "Copy", label: "Copy", icon: "Copy", onClick: () => {
+                    var _a, _b;
+                    return (_b = (_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.copyAll()) !== null && _b !== void 0 ? _b : false;
+                } })),
+            formattable && (react_1.default.createElement(actions_1.ActionButton, { key: "Format", label: "Format", icon: react_1.default.createElement(actions_1.FormatIcon, { size: 14, role: "presentation" }), onClick: () => {
+                    var _a, _b;
+                    return (_b = (_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.prettify()) !== null && _b !== void 0 ? _b : false;
+                } })),
+            ...(customActions !== null && customActions !== void 0 ? customActions : []).map((action) => {
+                return (react_1.default.createElement(actions_1.ActionButton, { key: action.label, icon: action.icon, label: action.label, onClick: () => {
+                        var _a;
+                        if (!((_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.editor)) {
+                            return false;
+                        }
+                        return action.action(editorRef.current.editor);
+                    } }));
+            }),
+        ];
+    }, [copyable, formattable, customActions]);
+    return (react_1.default.createElement("div", { ref: containerRef, className: (0, compass_components_1.cx)(multilineEditorContainerStyle, darkMode && multilineEditorContainerDarkModeStyle, className), onClick: (evt) => {
+            var _a;
+            if (evt.target === containerRef.current) {
+                (_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            }
+        } },
+        react_1.default.createElement(BaseEditor, { ref: editorRef, className: editorClassName, language: "javascript-expression", minLines: 10, ...props }),
+        actions.length > 0 && (react_1.default.createElement("div", { className: (0, compass_components_1.cx)('multiline-editor-actions', actionsContainerStyle, actionsClassName) }, actions))));
+});
+exports.CodemirrorMultilineEditor = MultilineEditor;
+async function setCodemirrorEditorValue(element, text) {
+    if (typeof element === 'string') {
+        element = document.querySelector(`[data-testid="${element}"]`);
+    }
+    if (!element || !element.hasAttribute('data-codemirror')) {
+        throw new Error('Cannot find editor container');
+    }
+    const editorView = element._cm;
+    await sheduleDispatch(editorView, {
+        changes: {
+            from: 0,
+            to: editorView.state.doc.length,
+            insert: text,
+        },
+    });
+}
+exports.setCodemirrorEditorValue = setCodemirrorEditorValue;
 //# sourceMappingURL=json-editor.js.map