@mongodb-js/compass-editor 0.5.0 → 0.7.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.CodemirrorMultilineEditor = exports.CodemirrorInlineEditor = exports.BaseEditor = exports.languageName = exports.languages = void 0;
 const react_1 = __importStar(require("react"));
 const view_1 = require("@codemirror/view");
 const language_1 = require("@codemirror/language");
@@ -38,10 +38,30 @@ 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 hiddenScrollStyle = (0, compass_components_1.css)({
+    '& .cm-scroller': {
+        overflow: '-moz-scrollbars-none',
+        msOverflowStyle: 'none',
+    },
+    '& .cm-scroller::-webkit-scrollbar': {
+        display: 'none',
+    },
+});
+const breakFocusOutBinding = {
+    ...commands_1.indentWithTab,
+    run({ state, dispatch }) {
+        dispatch(state.update(state.replaceSelection('\t'), {
+            scrollIntoView: true,
+            userEvent: 'input',
+        }));
+        return true;
+    },
+};
 const editorPalette = {
     light: {
         color: compass_components_1.codePalette.light[3],
@@ -57,6 +77,13 @@ const editorPalette = {
         infoGutterIconColor: encodeURIComponent(compass_components_1.palette.blue.base),
         warningGutterIconColor: encodeURIComponent(compass_components_1.palette.yellow.base),
         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],
@@ -72,6 +99,13 @@ const editorPalette = {
         infoGutterIconColor: encodeURIComponent(compass_components_1.palette.blue.light1),
         warningGutterIconColor: encodeURIComponent(compass_components_1.palette.yellow.light2),
         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) {
@@ -79,16 +113,18 @@ function getStylesForTheme(theme) {
         '&': {
             color: editorPalette[theme].color,
             backgroundColor: 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': {
+            paddingTop: `${compass_components_1.spacing[1]}px`,
+            paddingBottom: `${compass_components_1.spacing[1]}px`,
             caretColor: editorPalette[theme].cursorColor,
         },
         '& .cm-activeLine': {
@@ -102,14 +138,8 @@ function getStylesForTheme(theme) {
             backgroundColor: 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',
@@ -134,6 +164,14 @@ function getStylesForTheme(theme) {
         '&.cm-focused .cm-activeLineGutter': {
             backgroundColor: 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}`,
+            padding: '0 2px',
+        },
         '& .foldMarker': {
             width: `${compass_components_1.spacing[3]}px`,
             height: `${compass_components_1.spacing[3]}px`,
@@ -169,6 +207,45 @@ function getStylesForTheme(theme) {
             borderColor: editorPalette[theme].cursorColor,
             marginLeft: '-1px',
         },
+        '& .cm-tooltip': {
+            color: editorPalette[theme].autocompleteColor,
+            backgroundColor: editorPalette[theme].autocompleteBackgroundColor,
+            border: `1px solid ${editorPalette[theme].autocompleteBorderColor}`,
+        },
+        '& .cm-tooltip.cm-tooltip-autocomplete > ul': {
+            fontFamily: compass_components_1.fontFamilies.code,
+        },
+        '& .cm-tooltip-autocomplete ul li[aria-selected]': {
+            color: editorPalette[theme].autocompleteColor,
+            backgroundColor: editorPalette[theme].autocompleteSelectedBackgroundColor,
+        },
+        '& .cm-completionIcon': {
+            display: 'none',
+        },
+        '& .cm-completionDetail': {
+            color: (0, polished_1.rgba)(editorPalette[theme].autocompleteColor, 0.5),
+            fontStyle: 'normal',
+            marginRight: '1em',
+        },
+        '& .cm-completionMatchedText': {
+            color: 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 = {
@@ -253,32 +330,52 @@ function createFoldGutterExtension() {
 const javascriptExpression = lang_javascript_1.javascriptLanguage.configure({
     top: 'SingleExpression',
 });
-const languages = {
+exports.languages = {
     json: lang_json_1.json,
     javascript() {
         return new language_2.LanguageSupport(javascriptExpression);
     },
 };
-const languageName = state_1.Facet.define({});
+exports.languageName = state_1.Facet.define({});
+function sheduleDispatch(editorView, transactions, signal) {
+    if (signal === null || signal === void 0 ? void 0 : signal.aborted) {
+        return;
+    }
+    if (editorView.updateState != 0) {
+        setTimeout(() => {
+            sheduleDispatch(editorView, transactions, signal);
+        });
+    }
+    else {
+        transactions = Array.isArray(transactions) ? transactions : [transactions];
+        editorView.dispatch(...transactions);
+    }
+}
 function useCodemirrorExtensionCompartment(fn, value, editorViewRef) {
     var _a, _b;
-    const extensionCreatorRef = (0, react_1.useRef)();
+    const extensionCreatorRef = (0, react_1.useRef)(fn);
     extensionCreatorRef.current = fn;
     const compartmentRef = (0, react_1.useRef)();
     (_a = compartmentRef.current) !== null && _a !== void 0 ? _a : (compartmentRef.current = new state_1.Compartment());
     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();
+        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 = [], 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, ...props }, ref) {
     const darkMode = (0, compass_components_1.useDarkMode)(_darkMode);
     const onChangeTextRef = (0, react_1.useRef)(onChangeText);
     const onLoadRef = (0, react_1.useRef)(onLoad);
@@ -286,48 +383,162 @@ 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,
+    });
     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 && {
+                    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);
+        return shouldShowAnnotationsGutter ? (0, lint_1.lintGutter)() : [];
+    }, shouldShowAnnotationsGutter, editorViewRef);
+    const autocompletionExtension = useCodemirrorExtensionCompartment(() => {
+        return completer
+            ? (0, autocomplete_1.autocompletion)({
+                activateOnTyping: true,
+                override: [completer],
+            })
+            : [];
+    }, 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)(),
-                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: autocomplete_1.acceptCompletion,
+                    },
                     {
                         key: 'Ctrl-Shift-b',
                         run: prettify,
@@ -340,14 +551,16 @@ const BaseEditor = ({ initialText: _initialText, text, onChangeText = () => {
                     ...autocomplete_1.closeBracketsKeymap,
                     ...commands_1.historyKeymap,
                     ...language_1.foldKeymap,
-                    commands_1.indentWithTab,
+                    ...autocomplete_1.completionKeymap,
+                    breakFocusOutBinding,
                 ]),
                 readOnlyExtension,
                 view_1.EditorView.updateListener.of((update) => {
                     var _a, _b;
+                    updateEditorContentHeight();
                     if (update.docChanged) {
-                        const text = (_b = (_a = editorViewRef.current) === null || _a === void 0 ? void 0 : _a.state.sliceDoc()) !== null && _b !== void 0 ? _b : '';
-                        onChangeTextRef.current(text, update);
+                        const text = (_a = editor.state.sliceDoc()) !== null && _a !== void 0 ? _a : '';
+                        (_b = onChangeTextRef.current) === null || _b === void 0 ? void 0 : _b.call(onChangeTextRef, text, update);
                     }
                 }),
             ],
@@ -365,6 +578,7 @@ const BaseEditor = ({ initialText: _initialText, text, onChangeText = () => {
             else {
             }
         }
+        updateEditorContentHeight();
         return () => {
             delete domNode._cm;
             editor.destroy();
@@ -376,31 +590,66 @@ const BaseEditor = ({ initialText: _initialText, text, onChangeText = () => {
         lineNumbersExtension,
         readOnlyExtension,
         themeConfigExtension,
+        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();
+            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();
+        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
@@ -410,6 +659,16 @@ function isTopNode(node) {
                 ? true
                 : isTopNode(node.parent);
 }
+const applySnippet = (editor, template) => {
+    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({
@@ -429,7 +688,7 @@ const foldAll = (editor) => {
         },
     });
     if (foldableProperties.length > 0) {
-        editor.dispatch({
+        sheduleDispatch(editor, {
             effects: foldableProperties.map((range) => {
                 return language_1.foldEffect.of(range);
             }),
@@ -445,17 +704,18 @@ const prettify = (editorView) => {
     if (editorView.state.facet(state_1.EditorState.readOnly)) {
         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');
         if (formatted !== doc) {
-            editorView.dispatch({
+            sheduleDispatch(editorView, {
                 changes: {
                     from: 0,
                     to: editorView.state.doc.length,
                     insert: formatted,
                 },
+                scrollIntoView: true,
             });
             return true;
         }
@@ -464,8 +724,94 @@ 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", ...props }));
+});
+exports.CodemirrorInlineEditor = InlineEditor;
+const multilineEditorContainerStyle = (0, compass_components_1.css)({
+    position: 'relative',
+    height: '100%',
+    [`&:focus-within > .multiline-editor-actions,
+    &:hover > .multiline-editor-actions`]: {
+        display: 'flex',
+    },
+});
+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, ...props }, ref) {
+    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, 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", 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;
 //# sourceMappingURL=json-editor.js.map