@vectara/vectara-ui 13.12.0 → 13.13.0

package/lib/components/form/_index.scss

@@ -1,4 +1,5 @@
 @import "checkbox/index";
+@import "codeEditor/index";
 @import "input/index";
 @import "itemsInput/index";
 @import "label/index";

package/lib/components/form/codeEditor/CodeEditor.d.ts

@@ -0,0 +1,34 @@
+import { generateTokensProvider } from "./generateTokensProvider";
+export type ColorConfig = {
+    token: string;
+    foreground: `#${string}`;
+};
+export type CodeEditorError = {
+    startLine: number;
+    endLine: number;
+    startColumn: number;
+    endColumn: number;
+    message: string;
+};
+interface Props {
+    language: string;
+    TokensProvider?: ReturnType<typeof generateTokensProvider>;
+    onChange?: (value?: string) => void;
+    onError?: (errors: Array<CodeEditorError>) => void;
+    colorConfig?: Array<ColorConfig>;
+    value?: string;
+    defaultValue?: string;
+    error?: CodeEditorError;
+    /** Placeholder text that supports code formatting, indentation, and line breaks */
+    placeholder?: string;
+    isReadOnly?: boolean;
+    height?: string;
+    resizable?: boolean;
+    "data-testid"?: string;
+}
+/**
+ * Generic (to console) code editor that wraps React Monaco Editor.
+ * As the need arises, this component can accept props to customize the internal Monaco editor options.
+ */
+export declare const VuiCodeEditor: ({ language, TokensProvider, onChange, placeholder, onError, colorConfig, value, defaultValue, error, isReadOnly, height, resizable, "data-testid": testId }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/form/codeEditor/CodeEditor.js

@@ -0,0 +1,98 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Editor from "@monaco-editor/react";
+import * as monacoTypes from "monaco-editor/esm/vs/editor/editor.api";
+import { useRef } from "react";
+/**
+ * Generic (to console) code editor that wraps React Monaco Editor.
+ * As the need arises, this component can accept props to customize the internal Monaco editor options.
+ */
+export const VuiCodeEditor = ({ language, TokensProvider, onChange, placeholder, onError = (errors) => {
+    /*noop*/
+}, colorConfig, value, defaultValue, error, isReadOnly, height = "300px", resizable = false, "data-testid": testId }) => {
+    const tokensProvider = TokensProvider ? new TokensProvider() : null;
+    const monacoRef = useRef(null);
+    const modelRef = useRef(null);
+    if (modelRef.current && monacoRef.current) {
+        if (error) {
+            const markers = [
+                {
+                    severity: monacoRef.current.MarkerSeverity.Error,
+                    startLineNumber: error.startLine,
+                    startColumn: error.startColumn,
+                    endLineNumber: error.endLine,
+                    endColumn: error.endColumn,
+                    message: error.message
+                }
+            ];
+            monacoRef.current.editor.setModelMarkers(modelRef.current, language, markers);
+        }
+        else {
+            monacoRef.current.editor.setModelMarkers(modelRef.current, language, []);
+        }
+    }
+    const init = (monaco) => {
+        monacoRef.current = monaco;
+        monaco.languages.register({ id: language });
+        if (tokensProvider) {
+            monaco.languages.setTokensProvider(language, tokensProvider);
+        }
+        monaco.editor.defineTheme("vectaraEditor", {
+            base: "vs",
+            inherit: true,
+            rules: colorConfig !== null && colorConfig !== void 0 ? colorConfig : [],
+            colors: {}
+        });
+        monaco.languages.setLanguageConfiguration(language, {
+            autoClosingPairs: [
+                { open: "(", close: ")" },
+                { open: "[", close: "]" },
+                { open: "{", close: "}" },
+                { open: "'", close: "'", notIn: ["string"] }
+            ],
+            colorizedBracketPairs: [
+                ["(", ")"],
+                ["[", "]"],
+                ["(", ")"]
+            ]
+        });
+        monaco.editor.onDidCreateModel((model) => (modelRef.current = model));
+    };
+    const shouldShowPlaceholder = placeholder && (!value || value.trim() === "") && (!defaultValue || defaultValue.trim() === "");
+    return (_jsxs("div", Object.assign({ className: "vuiCodeEditor", "data-testid": testId, style: resizable ? { minHeight: height, height, resize: "vertical", overflow: "auto" } : undefined }, { children: [shouldShowPlaceholder && (_jsx("div", Object.assign({ className: "vuiCodeEditor-placeholder", "aria-hidden": "true" }, { children: placeholder }))), _jsx(Editor, { beforeMount: init, height: resizable ? "100%" : height, width: "100%", defaultLanguage: language, defaultValue: defaultValue, value: value, onChange: onChange, onValidate: (markers) => {
+                    const errors = markers.reduce((acc, marker) => {
+                        if (marker.severity === monacoTypes.MarkerSeverity.Error) {
+                            acc.push({
+                                startLine: marker.startLineNumber,
+                                endLine: marker.endLineNumber,
+                                startColumn: marker.startColumn,
+                                endColumn: marker.endColumn,
+                                message: marker.message
+                            });
+                        }
+                        return acc;
+                    }, []);
+                    if (errors.length) {
+                        onError(errors);
+                    }
+                }, theme: "vectaraEditor", options: {
+                    readOnly: isReadOnly,
+                    fontSize: 12,
+                    automaticLayout: true,
+                    renderLineHighlight: "none",
+                    lineNumbers: "off",
+                    glyphMargin: false,
+                    folding: false,
+                    lineDecorationsWidth: 2,
+                    fixedOverflowWidgets: true,
+                    quickSuggestions: {
+                        comments: false,
+                        strings: false,
+                        other: false
+                    },
+                    suggestOnTriggerCharacters: true,
+                    minimap: {
+                        enabled: false
+                    },
+                    wordWrap: "on"
+                } })] })));
+};

package/lib/components/form/codeEditor/_index.scss

@@ -0,0 +1,20 @@
+.vuiCodeEditor {
+  position: relative;
+  border: 1px solid var(--vui-color-border-medium);
+  border-radius: $sizeXxs;
+  padding: $sizeS;
+  padding-right: 0;
+}
+
+.vuiCodeEditor-placeholder {
+  position: absolute;
+  top: $sizeS;
+  left: $sizeS;
+  color: #999999;
+  font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
+  font-size: 12px;
+  line-height: 18px;
+  pointer-events: none;
+  z-index: 1;
+  white-space: pre-wrap;
+}

package/lib/components/form/codeEditor/generateTokensProvider.d.ts

@@ -0,0 +1,23 @@
+/**
+ * This exposes a utility that wraps an ANTLR-generated lexer in a TokensProvider class and returns that class.
+ * The underlying logic is mostly lifted from https://tomassetti.me/writing-a-browser-based-editor-using-monaco-and-antlr.
+ */
+import * as monaco from "monaco-editor/esm/vs/editor/editor.api";
+import ILineTokens = monaco.languages.ILineTokens;
+import { Token } from "antlr4ng";
+type SyntaxChecker = {
+    Parser: any;
+    onError: (offendingSymbol: Token | null, line: number, column: number, msg: string) => void;
+};
+/**
+ * Generates a TokensProvider for use with the CodeEditor component.
+ * Provide the optional syntaxChecker config to enable client-side syntax checking.
+ */
+export declare const generateTokensProvider: (Lexer: any, syntaxChecker?: SyntaxChecker) => {
+    new (): {
+        getInitialState(): monaco.languages.IState;
+        tokenize(line: string): monaco.languages.ILineTokens;
+        tokensForLine(input: string): monaco.languages.ILineTokens;
+    };
+};
+export {};

package/lib/components/form/codeEditor/generateTokensProvider.js

@@ -0,0 +1,96 @@
+/**
+ * This exposes a utility that wraps an ANTLR-generated lexer in a TokensProvider class and returns that class.
+ * The underlying logic is mostly lifted from https://tomassetti.me/writing-a-browser-based-editor-using-monaco-and-antlr.
+ */
+import { BaseErrorListener, CharStream, CommonTokenStream } from "antlr4ng";
+const EOF = -1;
+/**
+ * Generates a TokensProvider for use with the CodeEditor component.
+ * Provide the optional syntaxChecker config to enable client-side syntax checking.
+ */
+export const generateTokensProvider = (Lexer, syntaxChecker) => {
+    return class TokensProvider {
+        getInitialState() {
+            return new MonacoState();
+        }
+        tokenize(line) {
+            if (line.length === 0)
+                return new MonacoLineTokens([]);
+            return this.tokensForLine(line);
+        }
+        tokensForLine(input) {
+            const lexerInputStream = CharStream.fromString(input);
+            const lexer = new Lexer(lexerInputStream);
+            const myTokens = [];
+            let done = false;
+            // If doing client-side syntax checking, create a second input stream for the parser.
+            // This is because using a single stream for both results in
+            // the lexer consuming the stream, leaving nothing for the parser to consume.
+            // TODO: Check if there's a way to use just one. In the interest of time, this will do.
+            if (syntaxChecker) {
+                const parserInputStream = CharStream.fromString(input);
+                const tokenStream = new CommonTokenStream(new Lexer(parserInputStream));
+                const parser = new syntaxChecker.Parser(tokenStream);
+                class ConsoleErrorListener extends BaseErrorListener {
+                    syntaxError(recognizer, offendingSymbol, line, column, msg) {
+                        syntaxChecker === null || syntaxChecker === void 0 ? void 0 : syntaxChecker.onError(offendingSymbol, line, column, msg);
+                    }
+                }
+                parser.addErrorListener(new ConsoleErrorListener());
+                parser.parse();
+            }
+            do {
+                const token = lexer.nextToken();
+                if (token == null) {
+                    done = true;
+                }
+                else {
+                    // We exclude EOF
+                    if (token.type == EOF) {
+                        done = true;
+                    }
+                    else if (lexer.literalNames[token.type]) {
+                        // Allow tokenizing of literal names.
+                        // Facilitates colorizing of tokens like "+".
+                        const tokenTypeName = lexer.literalNames[token.type];
+                        if (tokenTypeName) {
+                            const myToken = new MonacoToken("LITERAL", token.column);
+                            myTokens.push(myToken);
+                        }
+                    }
+                    else {
+                        const tokenTypeName = lexer.symbolicNames[token.type];
+                        if (tokenTypeName) {
+                            const myToken = new MonacoToken(tokenTypeName, token.column);
+                            myTokens.push(myToken);
+                        }
+                    }
+                }
+            } while (!done);
+            myTokens.sort((a, b) => (a.startIndex > b.startIndex ? 1 : -1));
+            return new MonacoLineTokens(myTokens);
+        }
+    };
+};
+class MonacoState {
+    clone() {
+        return new MonacoState();
+    }
+    // This is hard-coded to true because this implementation exists solely to
+    // satisfy the monaco.languages.IState interface.
+    equals() {
+        return true;
+    }
+}
+class MonacoToken {
+    constructor(ruleName, startIndex) {
+        this.scopes = ruleName;
+        this.startIndex = startIndex;
+    }
+}
+class MonacoLineTokens {
+    constructor(tokens) {
+        this.endState = new MonacoState();
+        this.tokens = tokens;
+    }
+}

package/lib/components/form/index.d.ts

@@ -1,4 +1,6 @@
 export { VuiCheckbox } from "./checkbox/Checkbox";
+export { VuiCodeEditor } from "./codeEditor/CodeEditor";
+export { generateTokensProvider } from "./codeEditor/generateTokensProvider";
 export { VuiItemsInput } from "./itemsInput/ItemsInput";
 export { VuiLabel } from "./label/Label";
 export { VuiNumberInput } from "./input/NumberInput";

package/lib/components/form/index.js

@@ -1,4 +1,6 @@
 export { VuiCheckbox } from "./checkbox/Checkbox";
+export { VuiCodeEditor } from "./codeEditor/CodeEditor";
+export { generateTokensProvider } from "./codeEditor/generateTokensProvider";
 export { VuiItemsInput } from "./itemsInput/ItemsInput";
 export { VuiLabel } from "./label/Label";
 export { VuiNumberInput } from "./input/NumberInput";

package/lib/components/index.d.ts

@@ -28,7 +28,7 @@ import { VuiDrawer } from "./drawer/Drawer";
 import { VuiErrorBoundary } from "./errorBoundary/ErrorBoundary";
 import { VuiFlexContainer } from "./flex/FlexContainer";
 import { VuiFlexItem } from "./flex/FlexItem";
-import { RadioButtonConfig, VuiCheckbox, VuiItemsInput, VuiLabel, VuiNumberInput, VuiRadioButton, VuiSelect, VuiSuperRadioGroup, VuiTextInput, VuiTextArea, VuiPasswordInput } from "./form";
+import { RadioButtonConfig, generateTokensProvider, VuiCheckbox, VuiCodeEditor, VuiItemsInput, VuiLabel, VuiNumberInput, VuiRadioButton, VuiSelect, VuiSuperRadioGroup, VuiTextInput, VuiTextArea, VuiPasswordInput } from "./form";
 import { VuiFormGroup } from "./formGroup/FormGroup";
 import { VuiGrid } from "./grid/Grid";
 import { VuiGridItem } from "./grid/GridItem";
@@ -94,4 +94,4 @@ import { VuiTopicButton } from "./topicButton/TopicButton";
 import { copyToClipboard } from "../utils/copyToClipboard";
 import { toRgb, toRgba } from "./context/Theme";
 export type { AnchorSide, AppContentPadding, ButtonColor, CalloutColor, ChatLanguage, ChatStyle, ChatTurn, CodeLanguage, InfoListItemType, InfoListType, InfoTableColumnAlign, InfoTableRow, InfoTableRowType, LinkProps, MenuItem, OptionListItem, Pagination, RadioButtonConfig, SearchResult, SearchSuggestion, Sections, SectionItem, Stat, StepStatus, StepSize, TabSize, Tree, TreeItem, VuiStepProps };
-export { BADGE_COLOR, BUTTON_COLOR, BUTTON_SIZE, CALLOUT_COLOR, CALLOUT_SIZE, ICON_COLOR, ICON_SIZE, ICON_TYPE, PROGRESS_BAR_COLOR, SPACER_SIZE, SPINNER_COLOR, SKELETON_COLOR, SPINNER_SIZE, TAB_SIZE, TEXT_COLOR, TEXT_SIZE, TITLE_SIZE, addNotification, copyToClipboard, toRgb, toRgba, VuiAccordion, VuiAccountButton, VuiAppContent, VuiAppHeader, VuiAppLayout, VuiAppSideNav, VuiAppSideNavLink, VuiBadge, VuiButtonPrimary, VuiButtonSecondary, VuiButtonTertiary, VuiIconButton, VuiCallout, VuiCard, VuiChat, VuiCheckbox, VuiCode, VuiContextProvider, VuiCopyButton, VuiDatePicker, VuiDateRangePicker, VuiDrawer, VuiErrorBoundary, VuiFlexContainer, VuiFlexItem, VuiFormGroup, VuiGrid, VuiGridItem, VuiSimpleGrid, VuiHorizontalRule, VuiIcon, VuiImage, VuiImagePreview, VuiInfoList, VuiInfoListItem, VuiInfoMenu, VuiInfoTable, VuiInProgress, VuiItemsInput, VuiLabel, VuiLink, VuiLinkInternal, VuiList, VuiMenu, VuiMenuItem, VuiModal, VuiNotifications, VuiNumberInput, VuiOptionsButton, VuiOptionsList, VuiOptionsListItem, VuiPagination, VuiPanel, VuiPasswordInput, VuiPopover, VuiPortal, VuiProgressBar, VuiPrompt, VuiRadioButton, VuiScreenBlock, VuiSearchInput, VuiSearchResult, VuiSearchSelect, VuiSelect, VuiSetting, VuiSpacer, VuiSpinner, VuiStat, VuiStatList, VuiStatus, VuiSteps, VuiSummary, VuiSkeleton, VuiSummaryCitation, VuiSuperRadioGroup, VuiTable, VuiTab, VuiTabbedRoutes, VuiTabs, VuiText, VuiTextArea, VuiTextColor, VuiTextInput, VuiTimeline, VuiTimelineItem, VuiTitle, VuiToggle, VuiTooltip, VuiTopicButton };
+export { BADGE_COLOR, BUTTON_COLOR, BUTTON_SIZE, CALLOUT_COLOR, CALLOUT_SIZE, ICON_COLOR, ICON_SIZE, ICON_TYPE, PROGRESS_BAR_COLOR, SPACER_SIZE, SPINNER_COLOR, SKELETON_COLOR, SPINNER_SIZE, TAB_SIZE, TEXT_COLOR, TEXT_SIZE, TITLE_SIZE, addNotification, copyToClipboard, generateTokensProvider, toRgb, toRgba, VuiAccordion, VuiAccountButton, VuiAppContent, VuiAppHeader, VuiAppLayout, VuiAppSideNav, VuiAppSideNavLink, VuiBadge, VuiButtonPrimary, VuiButtonSecondary, VuiButtonTertiary, VuiIconButton, VuiCallout, VuiCard, VuiChat, VuiCheckbox, VuiCode, VuiCodeEditor, VuiContextProvider, VuiCopyButton, VuiDatePicker, VuiDateRangePicker, VuiDrawer, VuiErrorBoundary, VuiFlexContainer, VuiFlexItem, VuiFormGroup, VuiGrid, VuiGridItem, VuiSimpleGrid, VuiHorizontalRule, VuiIcon, VuiImage, VuiImagePreview, VuiInfoList, VuiInfoListItem, VuiInfoMenu, VuiInfoTable, VuiInProgress, VuiItemsInput, VuiLabel, VuiLink, VuiLinkInternal, VuiList, VuiMenu, VuiMenuItem, VuiModal, VuiNotifications, VuiNumberInput, VuiOptionsButton, VuiOptionsList, VuiOptionsListItem, VuiPagination, VuiPanel, VuiPasswordInput, VuiPopover, VuiPortal, VuiProgressBar, VuiPrompt, VuiRadioButton, VuiScreenBlock, VuiSearchInput, VuiSearchResult, VuiSearchSelect, VuiSelect, VuiSetting, VuiSpacer, VuiSpinner, VuiStat, VuiStatList, VuiStatus, VuiSteps, VuiSummary, VuiSkeleton, VuiSummaryCitation, VuiSuperRadioGroup, VuiTable, VuiTab, VuiTabbedRoutes, VuiTabs, VuiText, VuiTextArea, VuiTextColor, VuiTextInput, VuiTimeline, VuiTimelineItem, VuiTitle, VuiToggle, VuiTooltip, VuiTopicButton };

package/lib/components/index.js

@@ -24,7 +24,7 @@ import { VuiDrawer } from "./drawer/Drawer";
 import { VuiErrorBoundary } from "./errorBoundary/ErrorBoundary";
 import { VuiFlexContainer } from "./flex/FlexContainer";
 import { VuiFlexItem } from "./flex/FlexItem";
-import { VuiCheckbox, VuiItemsInput, VuiLabel, VuiNumberInput, VuiRadioButton, VuiSelect, VuiSuperRadioGroup, VuiTextInput, VuiTextArea, VuiPasswordInput } from "./form";
+import { generateTokensProvider, VuiCheckbox, VuiCodeEditor, VuiItemsInput, VuiLabel, VuiNumberInput, VuiRadioButton, VuiSelect, VuiSuperRadioGroup, VuiTextInput, VuiTextArea, VuiPasswordInput } from "./form";
 import { VuiFormGroup } from "./formGroup/FormGroup";
 import { VuiGrid } from "./grid/Grid";
 import { VuiGridItem } from "./grid/GridItem";
@@ -86,4 +86,4 @@ import { VuiTooltip } from "./tooltip/Tooltip";
 import { VuiTopicButton } from "./topicButton/TopicButton";
 import { copyToClipboard } from "../utils/copyToClipboard";
 import { toRgb, toRgba } from "./context/Theme";
-export { BADGE_COLOR, BUTTON_COLOR, BUTTON_SIZE, CALLOUT_COLOR, CALLOUT_SIZE, ICON_COLOR, ICON_SIZE, ICON_TYPE, PROGRESS_BAR_COLOR, SPACER_SIZE, SPINNER_COLOR, SKELETON_COLOR, SPINNER_SIZE, TAB_SIZE, TEXT_COLOR, TEXT_SIZE, TITLE_SIZE, addNotification, copyToClipboard, toRgb, toRgba, VuiAccordion, VuiAccountButton, VuiAppContent, VuiAppHeader, VuiAppLayout, VuiAppSideNav, VuiAppSideNavLink, VuiBadge, VuiButtonPrimary, VuiButtonSecondary, VuiButtonTertiary, VuiIconButton, VuiCallout, VuiCard, VuiChat, VuiCheckbox, VuiCode, VuiContextProvider, VuiCopyButton, VuiDatePicker, VuiDateRangePicker, VuiDrawer, VuiErrorBoundary, VuiFlexContainer, VuiFlexItem, VuiFormGroup, VuiGrid, VuiGridItem, VuiSimpleGrid, VuiHorizontalRule, VuiIcon, VuiImage, VuiImagePreview, VuiInfoList, VuiInfoListItem, VuiInfoMenu, VuiInfoTable, VuiInProgress, VuiItemsInput, VuiLabel, VuiLink, VuiLinkInternal, VuiList, VuiMenu, VuiMenuItem, VuiModal, VuiNotifications, VuiNumberInput, VuiOptionsButton, VuiOptionsList, VuiOptionsListItem, VuiPagination, VuiPanel, VuiPasswordInput, VuiPopover, VuiPortal, VuiProgressBar, VuiPrompt, VuiRadioButton, VuiScreenBlock, VuiSearchInput, VuiSearchResult, VuiSearchSelect, VuiSelect, VuiSetting, VuiSpacer, VuiSpinner, VuiStat, VuiStatList, VuiStatus, VuiSteps, VuiSummary, VuiSkeleton, VuiSummaryCitation, VuiSuperRadioGroup, VuiTable, VuiTab, VuiTabbedRoutes, VuiTabs, VuiText, VuiTextArea, VuiTextColor, VuiTextInput, VuiTimeline, VuiTimelineItem, VuiTitle, VuiToggle, VuiTooltip, VuiTopicButton };
+export { BADGE_COLOR, BUTTON_COLOR, BUTTON_SIZE, CALLOUT_COLOR, CALLOUT_SIZE, ICON_COLOR, ICON_SIZE, ICON_TYPE, PROGRESS_BAR_COLOR, SPACER_SIZE, SPINNER_COLOR, SKELETON_COLOR, SPINNER_SIZE, TAB_SIZE, TEXT_COLOR, TEXT_SIZE, TITLE_SIZE, addNotification, copyToClipboard, generateTokensProvider, toRgb, toRgba, VuiAccordion, VuiAccountButton, VuiAppContent, VuiAppHeader, VuiAppLayout, VuiAppSideNav, VuiAppSideNavLink, VuiBadge, VuiButtonPrimary, VuiButtonSecondary, VuiButtonTertiary, VuiIconButton, VuiCallout, VuiCard, VuiChat, VuiCheckbox, VuiCode, VuiCodeEditor, VuiContextProvider, VuiCopyButton, VuiDatePicker, VuiDateRangePicker, VuiDrawer, VuiErrorBoundary, VuiFlexContainer, VuiFlexItem, VuiFormGroup, VuiGrid, VuiGridItem, VuiSimpleGrid, VuiHorizontalRule, VuiIcon, VuiImage, VuiImagePreview, VuiInfoList, VuiInfoListItem, VuiInfoMenu, VuiInfoTable, VuiInProgress, VuiItemsInput, VuiLabel, VuiLink, VuiLinkInternal, VuiList, VuiMenu, VuiMenuItem, VuiModal, VuiNotifications, VuiNumberInput, VuiOptionsButton, VuiOptionsList, VuiOptionsListItem, VuiPagination, VuiPanel, VuiPasswordInput, VuiPopover, VuiPortal, VuiProgressBar, VuiPrompt, VuiRadioButton, VuiScreenBlock, VuiSearchInput, VuiSearchResult, VuiSearchSelect, VuiSelect, VuiSetting, VuiSpacer, VuiSpinner, VuiStat, VuiStatList, VuiStatus, VuiSteps, VuiSummary, VuiSkeleton, VuiSummaryCitation, VuiSuperRadioGroup, VuiTable, VuiTab, VuiTabbedRoutes, VuiTabs, VuiText, VuiTextArea, VuiTextColor, VuiTextInput, VuiTimeline, VuiTimelineItem, VuiTitle, VuiToggle, VuiTooltip, VuiTopicButton };

package/lib/styles/index.css

@@ -2636,6 +2636,27 @@ h2.react-datepicker__current-month {
   font-size: 14px;
 }
 
+.vuiCodeEditor {
+  position: relative;
+  border: 1px solid var(--vui-color-border-medium);
+  border-radius: 4px;
+  padding: 12px;
+  padding-right: 0;
+}
+
+.vuiCodeEditor-placeholder {
+  position: absolute;
+  top: 12px;
+  left: 12px;
+  color: #999999;
+  font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
+  font-size: 12px;
+  line-height: 18px;
+  pointer-events: none;
+  z-index: 1;
+  white-space: pre-wrap;
+}
+
 .vuiInput {
   appearance: none;
   border-radius: 4px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vectara/vectara-ui",
-  "version": "13.12.0",
+  "version": "13.13.0",
   "homepage": "./",
   "description": "Vectara's design system, codified as a React and Sass component library",
   "author": "Vectara",
@@ -39,6 +39,7 @@
     "@types/node": "^16.18.34",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
+    "antlr4ng": "^3.0.4",
     "autoprefixer": "^10.4.7",
     "classnames": "^2.3.2",
     "colortranslator": "^5.0.0",
@@ -58,6 +59,7 @@
     "web-vitals": "^2.1.4"
   },
   "peerDependencies": {
+    "@monaco-editor/react": "^4.7.0",
     "react": ">= 18.2.0",
     "react-dom": ">= 18.2.0",
     "react-router-dom": "^6.8.2"