@uipath/apollo-wind 2.46.0 → 2.47.0

package/dist/components/ui/prompt-editor/prompt-editor-config.cjs

@@ -0,0 +1,69 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    DEFAULT_PROMPT_EDITOR_STRINGS: ()=>DEFAULT_PROMPT_EDITOR_STRINGS,
+    PromptEditorConfigProvider: ()=>PromptEditorConfigProvider,
+    usePromptEditorConfig: ()=>usePromptEditorConfig
+});
+const external_react_namespaceObject = require("react");
+const DEFAULT_PROMPT_EDITOR_STRINGS = {
+    edit: 'Edit',
+    preview: 'Preview',
+    editorModeLabel: 'Editor mode',
+    bold: 'Bold',
+    italic: 'Italic',
+    strikethrough: 'Strikethrough',
+    numberedList: 'Numbered List',
+    bulletedList: 'Bulleted List',
+    expand: 'Expand',
+    searchVariablesPlaceholder: 'Search variables…',
+    noVariablesFound: 'No variables found.',
+    insertFreeForm: 'Insert {path}',
+    tokenTypeInput: 'Input variable',
+    tokenTypeOutput: 'Output variable',
+    tokenTypeState: 'State variable',
+    tokenTypeResource: 'Resource',
+    removeToken: 'Remove token',
+    nothingToPreview: 'Nothing to preview',
+    invalidTokenTitle: 'Variable not found',
+    invalidTokenDescription: "{path} isn't available in this scope. Fix or remove this reference before publishing."
+};
+const PromptEditorConfigContext = /*#__PURE__*/ (0, external_react_namespaceObject.createContext)({
+    strings: DEFAULT_PROMPT_EDITOR_STRINGS
+});
+const PromptEditorConfigProvider = PromptEditorConfigContext.Provider;
+const usePromptEditorConfig = ()=>(0, external_react_namespaceObject.useContext)(PromptEditorConfigContext);
+exports.DEFAULT_PROMPT_EDITOR_STRINGS = __webpack_exports__.DEFAULT_PROMPT_EDITOR_STRINGS;
+exports.PromptEditorConfigProvider = __webpack_exports__.PromptEditorConfigProvider;
+exports.usePromptEditorConfig = __webpack_exports__.usePromptEditorConfig;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "DEFAULT_PROMPT_EDITOR_STRINGS",
+    "PromptEditorConfigProvider",
+    "usePromptEditorConfig"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/components/ui/prompt-editor/prompt-editor-config.d.ts

@@ -0,0 +1,70 @@
+import type { ReactNode } from 'react';
+import type { PromptEditorDiffType, PromptEditorTokenType } from './types';
+/**
+ * Props handed to a consumer-supplied token-pill renderer. `defaultPill` is the built-in
+ * `TokenPillWithTooltip` rendered with the same props, so a consumer can decorate it (wrap it in a
+ * richer tooltip / warning affordance) instead of rebuilding the pill from scratch.
+ */
+export interface PromptEditorTokenPillSlotProps {
+    /** Variable path without a leading `$` (apollo-wind convention). */
+    value: string;
+    tokenType: Exclude<PromptEditorTokenType, 'text'>;
+    /** Lexical node key of the underlying decorator node (drives NodeSelection / replace commands). */
+    nodeKey: string;
+    diffType?: PromptEditorDiffType;
+    readonly: boolean;
+    isInvalid?: boolean;
+    onRemove: () => void;
+    /** The built-in pill rendered with these same props. */
+    defaultPill: ReactNode;
+}
+export type PromptEditorRenderTokenPill = (props: PromptEditorTokenPillSlotProps) => ReactNode;
+/**
+ * Overridable user-facing strings. Apollo-wind has no i18n runtime of its own; hosts that localize
+ * (e.g. via react-i18next) pass translated values here. Every key defaults to the built-in English.
+ */
+export interface PromptEditorStrings {
+    /** Edit/Preview switcher */
+    edit: string;
+    preview: string;
+    editorModeLabel: string;
+    /** Formatting toolbar buttons */
+    bold: string;
+    italic: string;
+    strikethrough: string;
+    numberedList: string;
+    bulletedList: string;
+    expand: string;
+    /** `$`-trigger autocomplete menu */
+    searchVariablesPlaceholder: string;
+    noVariablesFound: string;
+    /**
+     * Label for the free-form "Insert <path>" item. `{path}` marks where the typed path renders
+     * (bold), so verb-last languages can move it; a string without `{path}` is treated as a prefix.
+     */
+    insertFreeForm: string;
+    /** Token type labels: chip hover tooltip + autocomplete menu's trailing hint. */
+    tokenTypeInput: string;
+    tokenTypeOutput: string;
+    tokenTypeState: string;
+    tokenTypeResource: string;
+    /** aria-label of the chip's × button. */
+    removeToken: string;
+    /** Preview-mode placeholder when there is no content. */
+    nothingToPreview: string;
+    /** Invalid-chip tooltip: title, and a body template whose `{path}` is the chip's variable path. */
+    invalidTokenTitle: string;
+    invalidTokenDescription: string;
+}
+export declare const DEFAULT_PROMPT_EDITOR_STRINGS: PromptEditorStrings;
+interface PromptEditorConfig {
+    renderTokenPill?: PromptEditorRenderTokenPill;
+    strings: PromptEditorStrings;
+}
+export declare const PromptEditorConfigProvider: import("react").Provider<PromptEditorConfig>;
+/**
+ * Read the active editor config. Token decorator nodes render inside the `LexicalComposer` React
+ * tree, so the provider mounted by `PromptEditor` is visible to them (and to plugins).
+ */
+export declare const usePromptEditorConfig: () => PromptEditorConfig;
+export {};

package/dist/components/ui/prompt-editor/prompt-editor-config.js

@@ -0,0 +1,29 @@
+import { createContext, useContext } from "react";
+const DEFAULT_PROMPT_EDITOR_STRINGS = {
+    edit: 'Edit',
+    preview: 'Preview',
+    editorModeLabel: 'Editor mode',
+    bold: 'Bold',
+    italic: 'Italic',
+    strikethrough: 'Strikethrough',
+    numberedList: 'Numbered List',
+    bulletedList: 'Bulleted List',
+    expand: 'Expand',
+    searchVariablesPlaceholder: 'Search variables…',
+    noVariablesFound: 'No variables found.',
+    insertFreeForm: 'Insert {path}',
+    tokenTypeInput: 'Input variable',
+    tokenTypeOutput: 'Output variable',
+    tokenTypeState: 'State variable',
+    tokenTypeResource: 'Resource',
+    removeToken: 'Remove token',
+    nothingToPreview: 'Nothing to preview',
+    invalidTokenTitle: 'Variable not found',
+    invalidTokenDescription: "{path} isn't available in this scope. Fix or remove this reference before publishing."
+};
+const PromptEditorConfigContext = /*#__PURE__*/ createContext({
+    strings: DEFAULT_PROMPT_EDITOR_STRINGS
+});
+const PromptEditorConfigProvider = PromptEditorConfigContext.Provider;
+const usePromptEditorConfig = ()=>useContext(PromptEditorConfigContext);
+export { DEFAULT_PROMPT_EDITOR_STRINGS, PromptEditorConfigProvider, usePromptEditorConfig };

package/dist/components/ui/prompt-editor/prompt-editor.cjs

@@ -31,8 +31,11 @@ const LexicalComposer_namespaceObject = require("@lexical/react/LexicalComposer"
 const LexicalContentEditable_namespaceObject = require("@lexical/react/LexicalContentEditable");
 const LexicalErrorBoundary_namespaceObject = require("@lexical/react/LexicalErrorBoundary");
 const LexicalHistoryPlugin_namespaceObject = require("@lexical/react/LexicalHistoryPlugin");
+const LexicalListPlugin_namespaceObject = require("@lexical/react/LexicalListPlugin");
+const LexicalMarkdownShortcutPlugin_namespaceObject = require("@lexical/react/LexicalMarkdownShortcutPlugin");
 const LexicalOnChangePlugin_namespaceObject = require("@lexical/react/LexicalOnChangePlugin");
 const LexicalPlainTextPlugin_namespaceObject = require("@lexical/react/LexicalPlainTextPlugin");
+const LexicalRichTextPlugin_namespaceObject = require("@lexical/react/LexicalRichTextPlugin");
 const external_lexical_namespaceObject = require("lexical");
 const external_react_namespaceObject = require("react");
 const external_form_field_cjs_namespaceObject = require("../form-field.cjs");
@@ -50,15 +53,19 @@ const ToolbarActionsPlugin_cjs_namespaceObject = require("./plugins/ToolbarActio
 const ValidateTokensPlugin_cjs_namespaceObject = require("./plugins/ValidateTokensPlugin.cjs");
 const ValueSyncPlugin_cjs_namespaceObject = require("./plugins/ValueSyncPlugin.cjs");
 const VariableDropPlugin_cjs_namespaceObject = require("./plugins/VariableDropPlugin.cjs");
+const external_prompt_editor_config_cjs_namespaceObject = require("./prompt-editor-config.cjs");
 const external_utils_index_cjs_namespaceObject = require("./utils/index.cjs");
+const rich_serialization_cjs_namespaceObject = require("./utils/rich-serialization.cjs");
 const DEFAULT_MIN_ROWS = 4;
 const DEFAULT_MAX_ROWS = 20;
 const LINE_HEIGHT = 20;
 const EMPTY_AUTOCOMPLETE_OPTIONS = [];
 const EMPTY_TOKENS = [];
 const toTokenArray = (v)=>void 0 === v ? void 0 : Array.isArray(v) ? v : EMPTY_TOKENS;
-const EditorInner = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)(({ initialValue, value, onChange, autoCompleteOptions = EMPTY_AUTOCOMPLETE_OPTIONS, multiline = true, minRows = DEFAULT_MIN_ROWS, maxRows = DEFAULT_MAX_ROWS, placeholder, disabled, ariaLabel, fillHeight, borderless, error, errorId, ariaDescribedBy, mapVarDropToToken, toolbarActionsRef, showToolbar }, ref)=>{
+const EditorInner = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)(({ initialValue, value, onChange, autoCompleteOptions = EMPTY_AUTOCOMPLETE_OPTIONS, multiline = true, minRows = DEFAULT_MIN_ROWS, maxRows = DEFAULT_MAX_ROWS, placeholder, disabled, ariaLabel, fillHeight, borderless, error, errorId, ariaDescribedBy, mapVarDropToToken, validationOptions, renderAutocompleteMenu, toolbarActionsRef, showToolbar, children, richText, onActiveFormatsChange }, ref)=>{
     const editorRef = (0, external_react_namespaceObject.useRef)(null);
+    const $getTokens = richText ? rich_serialization_cjs_namespaceObject.$getRichEditorTokensInternal : external_utils_index_cjs_namespaceObject.$getEditorTokensInternal;
+    const $setTokens = richText ? rich_serialization_cjs_namespaceObject.$setRichEditorTokensInternal : external_utils_index_cjs_namespaceObject.$setEditorTokensInternal;
     const [isEmpty, setIsEmpty] = (0, external_react_namespaceObject.useState)(()=>{
         const seed = initialValue ?? value;
         return !seed || 0 === seed.length;
@@ -76,7 +83,7 @@ const EditorInner = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)
     (0, external_react_namespaceObject.useImperativeHandle)(ref, ()=>({
             setTokens: (tokens)=>{
                 if (editorRef.current) editorRef.current.update(()=>{
-                    (0, external_utils_index_cjs_namespaceObject.$setEditorTokensInternal)(tokens);
+                    $setTokens(tokens);
                 });
                 else onChangeRef.current?.(tokens);
             },
@@ -97,7 +104,9 @@ const EditorInner = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)
                     (0, external_utils_index_cjs_namespaceObject.$insertTokenAtCursor)(option);
                 });
             }
-        }), []);
+        }), [
+        $setTokens
+    ]);
     const contentEditableStyle = (0, external_react_namespaceObject.useMemo)(()=>{
         const verticalPadding = 8;
         const textColor = borderless ? 'inherit' : 'var(--color-foreground)';
@@ -146,7 +155,7 @@ const EditorInner = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)
     const handleChange = (0, external_react_namespaceObject.useCallback)(()=>{
         if (!editorRef.current) return;
         editorRef.current.getEditorState().read(()=>{
-            const tokens = (0, external_utils_index_cjs_namespaceObject.$getEditorTokensInternal)();
+            const tokens = $getTokens();
             const newIsEmpty = 0 === tokens.length || 1 === tokens.length && 'text' === tokens[0].type && '' === tokens[0].value;
             if (newIsEmpty !== isEmptyRef.current) setIsEmpty(newIsEmpty);
             if (!isSyncingRef.current) pendingTokensRef.current = tokens;
@@ -183,7 +192,7 @@ const EditorInner = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)
         queueMicrotask(()=>{
             if (!editorRef.current || initializedRef.current) return;
             editorRef.current.update(()=>{
-                (0, external_utils_index_cjs_namespaceObject.$setEditorTokensInternal)(valueToSet);
+                $setTokens(valueToSet);
                 setIsEmpty(0 === valueToSet.length);
                 initializedRef.current = true;
             });
@@ -196,7 +205,8 @@ const EditorInner = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)
         disabled
     ]);
     const options = Array.isArray(autoCompleteOptions) ? autoCompleteOptions : EMPTY_AUTOCOMPLETE_OPTIONS;
-    const wrapperClassName = borderless ? 'flex flex-col w-full relative' : `prompt-editor-shell flex flex-col w-full relative border bg-background future:border-0 future:bg-surface-overlay ${showToolbar ? 'border-t-0 rounded-b-md future:rounded-b-xl' : 'rounded-md future:rounded-xl'} ${error ? 'border-error ring-1 ring-error/20 future:ring-error/40' : ''}`;
+    const shellFocusClasses = showToolbar ? '' : ' focus-within:ring-2 focus-within:ring-ring future:focus-within:ring-offset-2 future:focus-within:ring-offset-background';
+    const wrapperClassName = borderless ? 'flex flex-col w-full relative' : `prompt-editor-shell flex flex-col w-full relative border bg-background future:border-0 future:bg-surface-overlay ${showToolbar ? 'border-t-0 rounded-b-md future:rounded-b-xl' : 'rounded-md future:rounded-xl'} ${error ? 'border-error ring-1 ring-error/20 future:ring-error/40' : ''}${shellFocusClasses}`;
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
         className: wrapperClassName,
         "data-invalid": error ? 'true' : void 0,
@@ -213,8 +223,18 @@ const EditorInner = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("style", {
                 children: `
           .prompt-editor-paragraph { padding: 0; margin: 0; }
-          ${borderless ? '' : '.prompt-editor-shell:not([data-invalid="true"]):focus-within { border-color: var(--color-ring); box-shadow: 0 0 0 1px var(--color-ring); } .future .prompt-editor-shell:not([data-invalid="true"]):focus-within { box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-ring) 35%, transparent); }'}
           .prompt-editor-root *::selection { background-color: color-mix(in srgb, var(--color-primary) 30%, transparent); }
+          ${richText ? `
+          /* Rich-mode formatting — metrics mirror MarkdownPreview so editing matches rendering. */
+          .prompt-editor-text-bold { font-weight: 700; }
+          .prompt-editor-text-italic { font-style: italic; }
+          .prompt-editor-text-strikethrough { text-decoration: line-through; }
+          .prompt-editor-list-ul, .prompt-editor-list-ol { margin: 0.25em 0; padding-left: 1.5em; }
+          .prompt-editor-list-ul { list-style-type: disc; }
+          .prompt-editor-list-ol { list-style-type: decimal; }
+          .prompt-editor-list-item { margin: 0.125em 0; }
+          .prompt-editor-list-item-nested { list-style-type: none; }
+          ` : ''}
         `
             }),
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
@@ -229,7 +249,17 @@ const EditorInner = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)
                     } : {}
                 },
                 children: [
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(LexicalPlainTextPlugin_namespaceObject.PlainTextPlugin, {
+                    richText ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(LexicalRichTextPlugin_namespaceObject.RichTextPlugin, {
+                        contentEditable: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(LexicalContentEditable_namespaceObject.ContentEditable, {
+                            style: contentEditableStyle,
+                            ariaLabel: ariaLabel,
+                            "aria-invalid": error ? true : void 0,
+                            "aria-describedby": ariaDescribedBy,
+                            "aria-errormessage": error ? errorId : void 0
+                        }),
+                        placeholder: null,
+                        ErrorBoundary: LexicalErrorBoundary_namespaceObject.LexicalErrorBoundary
+                    }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(LexicalPlainTextPlugin_namespaceObject.PlainTextPlugin, {
                         contentEditable: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(LexicalContentEditable_namespaceObject.ContentEditable, {
                             style: contentEditableStyle,
                             ariaLabel: ariaLabel,
@@ -272,23 +302,35 @@ const EditorInner = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)
                 value: value,
                 editorRef: editorRef,
                 lastEmittedValueRef: lastEmittedValueRef,
-                isSyncingRef: isSyncingRef
+                isSyncingRef: isSyncingRef,
+                richText: richText
             }),
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(MultilinePlugin_cjs_namespaceObject.MultilinePlugin, {
+            !richText && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(MultilinePlugin_cjs_namespaceObject.MultilinePlugin, {
                 multiline: multiline
             }),
+            richText && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
+                children: [
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(LexicalListPlugin_namespaceObject.ListPlugin, {}),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(LexicalMarkdownShortcutPlugin_namespaceObject.MarkdownShortcutPlugin, {
+                        transformers: rich_serialization_cjs_namespaceObject.PROMPT_EDITOR_RICH_TRANSFORMERS
+                    })
+                ]
+            }),
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(LexicalOnChangePlugin_namespaceObject.OnChangePlugin, {
                 ignoreSelectionChange: true,
                 onChange: handleChange
             }),
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ToolbarActionsPlugin_cjs_namespaceObject.ToolbarActionsPlugin, {
-                actionsRef: toolbarActionsRef
+                actionsRef: toolbarActionsRef,
+                richText: richText,
+                onActiveFormatsChange: onActiveFormatsChange
             }),
-            options.length > 0 && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(AutocompletePlugin_cjs_namespaceObject.AutocompletePlugin, {
-                options: options
+            (options.length > 0 || renderAutocompleteMenu) && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(AutocompletePlugin_cjs_namespaceObject.AutocompletePlugin, {
+                options: options,
+                renderMenu: renderAutocompleteMenu
             }),
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ValidateTokensPlugin_cjs_namespaceObject.ValidateTokensPlugin, {
-                options: options
+                options: Array.isArray(validationOptions) ? validationOptions : options
             }),
             options.length > 0 && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(RenameTokensPlugin_cjs_namespaceObject.RenameTokensPlugin, {
                 options: options,
@@ -297,17 +339,27 @@ const EditorInner = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)
             mapVarDropToToken && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(VariableDropPlugin_cjs_namespaceObject.VariableDropPlugin, {
                 mapVarDropToToken: mapVarDropToToken,
                 disabled: disabled
-            })
+            }),
+            children
         ]
     });
 });
 EditorInner.displayName = 'PromptEditorInner';
-const PromptEditor = ({ value: rawValue, initialValue: rawInitialValue, onChange, multiline = true, minRows = DEFAULT_MIN_ROWS, maxRows = DEFAULT_MAX_ROWS, placeholder, disabled, ariaLabel, autoCompleteOptions, showToolbar = false, mode: controlledMode, onModeChange, onFullscreen, editorRef, fillHeight, borderless, error, errorId: providedErrorId, 'aria-describedby': nativeAriaDescribedBy, ariaDescribedBy: legacyAriaDescribedBy, mapVarDropToToken })=>{
+const PromptEditor = ({ value: rawValue, initialValue: rawInitialValue, onChange, multiline = true, minRows = DEFAULT_MIN_ROWS, maxRows = DEFAULT_MAX_ROWS, placeholder, disabled, ariaLabel, autoCompleteOptions, showToolbar = false, mode: controlledMode, onModeChange, onFullscreen, editorRef, fillHeight, borderless, error, errorId: providedErrorId, 'aria-describedby': nativeAriaDescribedBy, ariaDescribedBy: legacyAriaDescribedBy, mapVarDropToToken, validationOptions, renderAutocompleteMenu, renderTokenPill, strings: partialStrings, showModeToggle = true, toolbarTrailing, children, richText: richTextProp, previewToken })=>{
     const value = toTokenArray(rawValue);
     const initialValue = toTokenArray(rawInitialValue);
+    const [richText] = (0, external_react_namespaceObject.useState)(()=>{
+        if (richTextProp && !multiline) {
+            console.warn('PromptEditor: richText requires multiline — falling back to the plain editor.');
+            return false;
+        }
+        return !!richTextProp;
+    });
     const [internalMode, setInternalMode] = (0, external_react_namespaceObject.useState)('edit');
-    const mode = controlledMode ?? internalMode;
+    const modeLocked = richText || showToolbar && !showModeToggle;
+    const mode = modeLocked ? 'edit' : controlledMode ?? internalMode;
     const toolbarActionsRef = (0, external_react_namespaceObject.useRef)(null);
+    const [activeFormats, setActiveFormats] = (0, external_react_namespaceObject.useState)(void 0);
     const [uncontrolledPreviewTokens, setUncontrolledPreviewTokens] = (0, external_react_namespaceObject.useState)(initialValue ?? []);
     const handleModeChange = (0, external_react_namespaceObject.useCallback)((newMode)=>{
         if (onModeChange) onModeChange(newMode);
@@ -318,16 +370,34 @@ const PromptEditor = ({ value: rawValue, initialValue: rawInitialValue, onChange
     const initialConfig = (0, external_react_namespaceObject.useMemo)(()=>({
             namespace: 'PromptEditor',
             theme: {
-                paragraph: 'prompt-editor-paragraph'
+                paragraph: 'prompt-editor-paragraph',
+                ...richText ? {
+                    text: {
+                        bold: 'prompt-editor-text-bold',
+                        italic: 'prompt-editor-text-italic',
+                        strikethrough: 'prompt-editor-text-strikethrough'
+                    },
+                    list: {
+                        ul: 'prompt-editor-list-ul',
+                        ol: 'prompt-editor-list-ol',
+                        listitem: 'prompt-editor-list-item',
+                        nested: {
+                            listitem: 'prompt-editor-list-item-nested'
+                        }
+                    }
+                } : {}
             },
             onError: (error)=>console.error('PromptEditor error:', error),
             nodes: [
                 index_cjs_namespaceObject.InputTokenNode,
                 index_cjs_namespaceObject.OutputTokenNode,
                 index_cjs_namespaceObject.StateTokenNode,
-                index_cjs_namespaceObject.ResourceTokenNode
+                index_cjs_namespaceObject.ResourceTokenNode,
+                ...richText ? rich_serialization_cjs_namespaceObject.RICH_EDITOR_EXTRA_NODES : []
             ]
-        }), []);
+        }), [
+        richText
+    ]);
     const isControlled = void 0 !== value;
     const previewTokens = isControlled ? value : uncontrolledPreviewTokens;
     const generatedErrorId = (0, external_react_namespaceObject.useId)();
@@ -344,75 +414,115 @@ const PromptEditor = ({ value: rawValue, initialValue: rawInitialValue, onChange
         isControlled,
         onChange
     ]);
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_tooltip_cjs_namespaceObject.TooltipProvider, {
-        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-            style: {
-                display: 'flex',
-                flexDirection: 'column',
-                width: '100%',
-                ...fillHeight ? {
-                    flex: 1,
-                    minHeight: 0
-                } : {}
-            },
-            children: [
-                showToolbar && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(EditorToolbar_cjs_namespaceObject.EditorToolbar, {
-                    mode: mode,
-                    disabled: disabled,
-                    error: Boolean(error),
-                    actionsRef: toolbarActionsRef,
-                    onModeChange: handleModeChange,
-                    onFullscreen: onFullscreen
-                }),
-                'preview' === mode && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-                    "data-invalid": error ? 'true' : void 0,
-                    className: borderless ? void 0 : `border bg-background future:border-0 future:bg-surface-overlay ${showToolbar ? 'border-t-0 rounded-b-md future:rounded-b-xl' : 'rounded-md future:rounded-xl'} ${error ? 'border-error ring-1 ring-error/20 future:ring-error/40' : ''}`,
-                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(MarkdownPreview_cjs_namespaceObject.MarkdownPreview, {
-                        tokens: previewTokens,
-                        minRows: minRows
-                    })
-                }),
-                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-                    style: {
-                        display: 'preview' === mode ? 'none' : 'flex',
-                        flexDirection: 'column',
-                        ...fillHeight ? {
-                            flex: 1,
-                            minHeight: 0
-                        } : {}
-                    },
-                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(LexicalComposer_namespaceObject.LexicalComposer, {
-                        initialConfig: initialConfig,
-                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(EditorInner, {
-                            ref: editorRef,
-                            autoCompleteOptions: autoCompleteOptions,
-                            disabled: disabled,
-                            ariaLabel: ariaLabel,
-                            error: error,
-                            errorId: error ? errorId : void 0,
-                            ariaDescribedBy: describedBy || void 0,
-                            initialValue: initialValue,
-                            maxRows: maxRows,
-                            minRows: minRows,
-                            multiline: multiline,
-                            placeholder: placeholder,
-                            fillHeight: fillHeight,
-                            borderless: borderless,
-                            mapVarDropToToken: mapVarDropToToken,
-                            showToolbar: showToolbar,
-                            toolbarActionsRef: toolbarActionsRef,
-                            value: value,
-                            onChange: handleEditorChange
-                        })
+    const strings = (0, external_react_namespaceObject.useMemo)(()=>({
+            ...external_prompt_editor_config_cjs_namespaceObject.DEFAULT_PROMPT_EDITOR_STRINGS,
+            ...partialStrings
+        }), [
+        partialStrings
+    ]);
+    const editorConfig = (0, external_react_namespaceObject.useMemo)(()=>({
+            renderTokenPill,
+            strings
+        }), [
+        renderTokenPill,
+        strings
+    ]);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_prompt_editor_config_cjs_namespaceObject.PromptEditorConfigProvider, {
+        value: editorConfig,
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_tooltip_cjs_namespaceObject.TooltipProvider, {
+            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                style: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    width: '100%',
+                    ...fillHeight ? {
+                        flex: 1,
+                        minHeight: 0
+                    } : {}
+                },
+                children: [
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                        className: showToolbar && !borderless ? 'prompt-editor-frame rounded-md future:rounded-xl focus-within:ring-2 focus-within:ring-ring future:focus-within:ring-offset-2 future:focus-within:ring-offset-background' : void 0,
+                        style: {
+                            display: 'flex',
+                            flexDirection: 'column',
+                            width: '100%',
+                            ...fillHeight ? {
+                                flex: 1,
+                                minHeight: 0
+                            } : {}
+                        },
+                        children: [
+                            showToolbar && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(EditorToolbar_cjs_namespaceObject.EditorToolbar, {
+                                mode: mode,
+                                disabled: disabled,
+                                error: Boolean(error),
+                                actionsRef: toolbarActionsRef,
+                                onModeChange: handleModeChange,
+                                onFullscreen: onFullscreen,
+                                showModeToggle: showModeToggle && !richText,
+                                trailing: toolbarTrailing,
+                                strings: strings,
+                                activeFormats: richText ? activeFormats : void 0
+                            }),
+                            'preview' === mode && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                                "data-invalid": error ? 'true' : void 0,
+                                className: borderless ? void 0 : `border bg-background future:border-0 future:bg-surface-overlay ${showToolbar ? 'border-t-0 rounded-b-md future:rounded-b-xl' : 'rounded-md future:rounded-xl'} ${error ? 'border-error ring-1 ring-error/20 future:ring-error/40' : ''}`,
+                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(MarkdownPreview_cjs_namespaceObject.MarkdownPreview, {
+                                    tokens: previewTokens,
+                                    minRows: minRows,
+                                    previewToken: previewToken
+                                })
+                            }),
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                                style: {
+                                    display: 'preview' === mode ? 'none' : 'flex',
+                                    flexDirection: 'column',
+                                    ...fillHeight ? {
+                                        flex: 1,
+                                        minHeight: 0
+                                    } : {}
+                                },
+                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(LexicalComposer_namespaceObject.LexicalComposer, {
+                                    initialConfig: initialConfig,
+                                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(EditorInner, {
+                                        ref: editorRef,
+                                        autoCompleteOptions: autoCompleteOptions,
+                                        disabled: disabled,
+                                        ariaLabel: ariaLabel,
+                                        error: error,
+                                        errorId: error ? errorId : void 0,
+                                        ariaDescribedBy: describedBy || void 0,
+                                        initialValue: initialValue,
+                                        maxRows: maxRows,
+                                        minRows: minRows,
+                                        multiline: multiline,
+                                        placeholder: placeholder,
+                                        fillHeight: fillHeight,
+                                        borderless: borderless,
+                                        mapVarDropToToken: mapVarDropToToken,
+                                        validationOptions: validationOptions,
+                                        renderAutocompleteMenu: renderAutocompleteMenu,
+                                        showToolbar: showToolbar,
+                                        toolbarActionsRef: toolbarActionsRef,
+                                        value: value,
+                                        onChange: handleEditorChange,
+                                        richText: richText,
+                                        onActiveFormatsChange: richText ? setActiveFormats : void 0,
+                                        children: children
+                                    })
+                                })
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_form_field_cjs_namespaceObject.FormFieldError, {
+                        id: errorId,
+                        "data-slot": "prompt-editor-error",
+                        className: "mt-1",
+                        children: error
                     })
-                }),
-                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_form_field_cjs_namespaceObject.FormFieldError, {
-                    id: errorId,
-                    "data-slot": "prompt-editor-error",
-                    className: "mt-1",
-                    children: error
-                })
-            ]
+                ]
+            })
         })
     });
 };

package/dist/components/ui/prompt-editor/prompt-editor.d.ts

@@ -1,3 +1,6 @@
+import { type MarkdownPreviewProps } from './components/MarkdownPreview';
+import type { PromptEditorAutocompleteMenuProps } from './components/PromptEditorAutocompleteMenu';
+import { type PromptEditorRenderTokenPill, type PromptEditorStrings } from './prompt-editor-config';
 import type { PromptEditorAutoCompleteOption, PromptEditorMode, PromptEditorToken } from './types';
 export interface PromptEditorRef {
     setTokens: (tokens: PromptEditorToken[]) => void;
@@ -39,5 +42,47 @@ export interface PromptEditorProps {
      * `dataTransfer`); omit this prop to disable drop handling entirely.
      */
     mapVarDropToToken?: (insertPath: string) => PromptEditorAutoCompleteOption;
+    /**
+     * Token values chips are validated against. Defaults to `autoCompleteOptions`. Pass a wider set
+     * when values can be valid without being offered by autocomplete (e.g. runtime-only paths) —
+     * merging them into `autoCompleteOptions` instead would pollute the `$`-trigger menu.
+     */
+    validationOptions?: PromptEditorAutoCompleteOption[];
+    /**
+     * Replace the built-in `$`-trigger autocomplete menu with a consumer-supplied one. Receives the
+     * exact props the built-in menu would get (anchor, seeded search, options, select/close
+     * callbacks). Also enables the `$` trigger when `autoCompleteOptions` is empty, since the
+     * consumer's menu may source its own entries.
+     */
+    renderAutocompleteMenu?: (props: PromptEditorAutocompleteMenuProps) => React.ReactNode;
+    /**
+     * Replace (or decorate — the built-in pill is passed as `defaultPill`) the rendered token chips.
+     */
+    renderTokenPill?: PromptEditorRenderTokenPill;
+    /** Overridable user-facing strings for localizing hosts. Merged over the built-in English. */
+    strings?: Partial<PromptEditorStrings>;
+    /**
+     * Whether the toolbar's Edit/Preview switcher renders (only meaningful with `showToolbar`).
+     * When false the formatting cluster left-aligns and `toolbarTrailing` right-aligns, and the
+     * editor never enters preview mode. Defaults to true.
+     */
+    showModeToggle?: boolean;
+    /** Consumer-supplied node at the toolbar's right end (e.g. a value-mode menu). */
+    toolbarTrailing?: React.ReactNode;
+    /** Extra Lexical plugins mounted inside the composer (e.g. host-specific drop/replace plugins). */
+    children?: React.ReactNode;
+    /**
+     * Per-token pill override for PREVIEW mode, so preview pills can match the host's edit-mode pills
+     * (icon markup and/or label). See {@link MarkdownPreviewTokenOverride}.
+     */
+    previewToken?: MarkdownPreviewProps['previewToken'];
+    /**
+     * WYSIWYG mode: formatting renders live in the editor (real bold/italic/strike and lists) instead
+     * of markdown markers with a separate preview. The `PromptEditorToken[]` contract is unchanged —
+     * text tokens still carry markdown; the conversion happens at the editor boundary. Mount-time
+     * only (it feeds the composer's frozen `initialConfig`); requires `multiline`. In rich mode the
+     * Edit/Preview switcher and `mode='preview'` are inert — the editor IS the preview.
+     */
+    richText?: boolean;
 }
-export declare const PromptEditor: ({ value: rawValue, initialValue: rawInitialValue, onChange, multiline, minRows, maxRows, placeholder, disabled, ariaLabel, autoCompleteOptions, showToolbar, mode: controlledMode, onModeChange, onFullscreen, editorRef, fillHeight, borderless, error, errorId: providedErrorId, "aria-describedby": nativeAriaDescribedBy, ariaDescribedBy: legacyAriaDescribedBy, mapVarDropToToken, }: PromptEditorProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PromptEditor: ({ value: rawValue, initialValue: rawInitialValue, onChange, multiline, minRows, maxRows, placeholder, disabled, ariaLabel, autoCompleteOptions, showToolbar, mode: controlledMode, onModeChange, onFullscreen, editorRef, fillHeight, borderless, error, errorId: providedErrorId, "aria-describedby": nativeAriaDescribedBy, ariaDescribedBy: legacyAriaDescribedBy, mapVarDropToToken, validationOptions, renderAutocompleteMenu, renderTokenPill, strings: partialStrings, showModeToggle, toolbarTrailing, children, richText: richTextProp, previewToken, }: PromptEditorProps) => import("react/jsx-runtime").JSX.Element;