@uipath/apollo-wind 2.46.0 → 2.47.0

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

@@ -26,8 +26,8 @@ __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
     EditorRefPlugin: ()=>EditorRefPlugin
 });
-const external_react_namespaceObject = require("react");
 const LexicalComposerContext_namespaceObject = require("@lexical/react/LexicalComposerContext");
+const external_react_namespaceObject = require("react");
 const EditorRefPlugin = ({ onRef })=>{
     const [editor] = (0, LexicalComposerContext_namespaceObject.useLexicalComposerContext)();
     const onRefRef = (0, external_react_namespaceObject.useRef)(onRef);

package/dist/components/ui/prompt-editor/plugins/EditorRefPlugin.js

@@ -1,5 +1,5 @@
-import { useEffect, useRef } from "react";
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { useEffect, useRef } from "react";
 const EditorRefPlugin = ({ onRef })=>{
     const [editor] = useLexicalComposerContext();
     const onRefRef = useRef(onRef);

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

@@ -26,10 +26,10 @@ __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
     MultilinePlugin: ()=>MultilinePlugin
 });
-const external_react_namespaceObject = require("react");
 const LexicalComposerContext_namespaceObject = require("@lexical/react/LexicalComposerContext");
 const utils_namespaceObject = require("@lexical/utils");
 const external_lexical_namespaceObject = require("lexical");
+const external_react_namespaceObject = require("react");
 const collapseParagraphs = ()=>{
     const root = (0, external_lexical_namespaceObject.$getRoot)();
     const paragraphs = root.getChildren().filter(external_lexical_namespaceObject.$isParagraphNode);

package/dist/components/ui/prompt-editor/plugins/MultilinePlugin.js

@@ -1,7 +1,7 @@
-import { useEffect, useRef } from "react";
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 import { mergeRegister } from "@lexical/utils";
 import { $createParagraphNode, $createTextNode, $getRoot, $isLineBreakNode, $isParagraphNode, COMMAND_PRIORITY_NORMAL, KEY_ENTER_COMMAND, TextNode } from "lexical";
+import { useEffect, useRef } from "react";
 const collapseParagraphs = ()=>{
     const root = $getRoot();
     const paragraphs = root.getChildren().filter($isParagraphNode);

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

@@ -27,11 +27,12 @@ __webpack_require__.d(__webpack_exports__, {
     registerNodeSelectionFixCommands: ()=>registerNodeSelectionFixCommands,
     NodeSelectionFixPlugin: ()=>NodeSelectionFixPlugin
 });
-const external_react_namespaceObject = require("react");
 const LexicalComposerContext_namespaceObject = require("@lexical/react/LexicalComposerContext");
 const external_lexical_namespaceObject = require("lexical");
-const token_nodes_cjs_namespaceObject = require("./shared/token-nodes.cjs");
+const external_react_namespaceObject = require("react");
 const index_cjs_namespaceObject = require("../utils/index.cjs");
+const token_nodes_cjs_namespaceObject = require("./shared/token-nodes.cjs");
+const $isBlockElement = (node)=>(0, external_lexical_namespaceObject.$isElementNode)(node) && !node.isInline() && !(0, external_lexical_namespaceObject.$isRootNode)(node);
 const $setCollapsedSelection = (key, offset, type)=>{
     const sel = (0, external_lexical_namespaceObject.$createRangeSelection)();
     sel.anchor.set(key, offset, type);
@@ -59,7 +60,7 @@ const getPromptTokenBeforeCursor = ()=>{
         const prev = anchorNode.getPreviousSibling();
         return (0, token_nodes_cjs_namespaceObject.isPromptTokenNode)(prev) ? prev : null;
     }
-    if ((0, external_lexical_namespaceObject.$isParagraphNode)(anchorNode)) {
+    if ($isBlockElement(anchorNode)) {
         const offset = selection.anchor.offset;
         if (0 === offset) return null;
         const prev = anchorNode.getChildAtIndex(offset - 1);
@@ -75,7 +76,7 @@ const getPromptTokenAfterCursor = ()=>{
         const next = anchorNode.getNextSibling();
         return (0, token_nodes_cjs_namespaceObject.isPromptTokenNode)(next) ? next : null;
     }
-    if ((0, external_lexical_namespaceObject.$isParagraphNode)(anchorNode)) {
+    if ($isBlockElement(anchorNode)) {
         const next = anchorNode.getChildAtIndex(selection.anchor.offset);
         return (0, token_nodes_cjs_namespaceObject.isPromptTokenNode)(next) ? next : null;
     }
@@ -167,13 +168,13 @@ const registerNodeSelectionFixCommands = (editor)=>{
         const anchorNode = selection.anchor.getNode();
         let paragraph = null;
         let offset = 0;
-        if ('element' === selection.anchor.type && (0, external_lexical_namespaceObject.$isParagraphNode)(anchorNode)) {
+        if ('element' === selection.anchor.type && $isBlockElement(anchorNode)) {
             paragraph = anchorNode;
             offset = selection.anchor.offset;
         } else {
             if (!('text' === selection.anchor.type && (0, external_lexical_namespaceObject.$isTextNode)(anchorNode)) || 0 !== selection.anchor.offset) return false;
             const parent = anchorNode.getParent();
-            if (!(0, external_lexical_namespaceObject.$isParagraphNode)(parent)) return false;
+            if (!$isBlockElement(parent)) return false;
             paragraph = parent;
             offset = anchorNode.getIndexWithinParent();
         }
@@ -285,7 +286,12 @@ const registerNodeSelectionFixCommands = (editor)=>{
     const unregisterArrowUp = editor.registerCommand(external_lexical_namespaceObject.KEY_ARROW_UP_COMMAND, handleArrowUp, external_lexical_namespaceObject.COMMAND_PRIORITY_HIGH);
     const unregisterArrowDown = editor.registerCommand(external_lexical_namespaceObject.KEY_ARROW_DOWN_COMMAND, handleArrowDown, external_lexical_namespaceObject.COMMAND_PRIORITY_HIGH);
     const unregisterEscape = editor.registerCommand(external_lexical_namespaceObject.KEY_ESCAPE_COMMAND, handleEscape, external_lexical_namespaceObject.COMMAND_PRIORITY_HIGH);
+    const unregisterClick = editor.registerCommand(external_lexical_namespaceObject.CLICK_COMMAND, (event)=>{
+        const target = event.target;
+        return target instanceof Element && null != target.closest('[data-lexical-decorator]');
+    }, external_lexical_namespaceObject.COMMAND_PRIORITY_HIGH);
     return ()=>{
+        unregisterClick();
         unregisterBackspace();
         unregisterDelete();
         unregisterArrowLeft();

package/dist/components/ui/prompt-editor/plugins/NodeSelectionFixPlugin.js

@@ -1,8 +1,9 @@
-import { useEffect } from "react";
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
-import { $createNodeSelection, $createRangeSelection, $createTextNode, $getSelection, $isLineBreakNode, $isNodeSelection, $isParagraphNode, $isRangeSelection, $isTextNode, $setSelection, COMMAND_PRIORITY_HIGH, KEY_ARROW_DOWN_COMMAND, KEY_ARROW_LEFT_COMMAND, KEY_ARROW_RIGHT_COMMAND, KEY_ARROW_UP_COMMAND, KEY_BACKSPACE_COMMAND, KEY_DELETE_COMMAND, KEY_ESCAPE_COMMAND } from "lexical";
-import { isPromptTokenNode } from "./shared/token-nodes.js";
+import { $createNodeSelection, $createRangeSelection, $createTextNode, $getSelection, $isElementNode, $isLineBreakNode, $isNodeSelection, $isRangeSelection, $isRootNode, $isTextNode, $setSelection, CLICK_COMMAND, COMMAND_PRIORITY_HIGH, KEY_ARROW_DOWN_COMMAND, KEY_ARROW_LEFT_COMMAND, KEY_ARROW_RIGHT_COMMAND, KEY_ARROW_UP_COMMAND, KEY_BACKSPACE_COMMAND, KEY_DELETE_COMMAND, KEY_ESCAPE_COMMAND } from "lexical";
+import { useEffect } from "react";
 import { WORD_JOINER } from "../utils/index.js";
+import { isPromptTokenNode } from "./shared/token-nodes.js";
+const $isBlockElement = (node)=>$isElementNode(node) && !node.isInline() && !$isRootNode(node);
 const $setCollapsedSelection = (key, offset, type)=>{
     const sel = $createRangeSelection();
     sel.anchor.set(key, offset, type);
@@ -30,7 +31,7 @@ const getPromptTokenBeforeCursor = ()=>{
         const prev = anchorNode.getPreviousSibling();
         return isPromptTokenNode(prev) ? prev : null;
     }
-    if ($isParagraphNode(anchorNode)) {
+    if ($isBlockElement(anchorNode)) {
         const offset = selection.anchor.offset;
         if (0 === offset) return null;
         const prev = anchorNode.getChildAtIndex(offset - 1);
@@ -46,7 +47,7 @@ const getPromptTokenAfterCursor = ()=>{
         const next = anchorNode.getNextSibling();
         return isPromptTokenNode(next) ? next : null;
     }
-    if ($isParagraphNode(anchorNode)) {
+    if ($isBlockElement(anchorNode)) {
         const next = anchorNode.getChildAtIndex(selection.anchor.offset);
         return isPromptTokenNode(next) ? next : null;
     }
@@ -138,13 +139,13 @@ const registerNodeSelectionFixCommands = (editor)=>{
         const anchorNode = selection.anchor.getNode();
         let paragraph = null;
         let offset = 0;
-        if ('element' === selection.anchor.type && $isParagraphNode(anchorNode)) {
+        if ('element' === selection.anchor.type && $isBlockElement(anchorNode)) {
             paragraph = anchorNode;
             offset = selection.anchor.offset;
         } else {
             if (!('text' === selection.anchor.type && $isTextNode(anchorNode)) || 0 !== selection.anchor.offset) return false;
             const parent = anchorNode.getParent();
-            if (!$isParagraphNode(parent)) return false;
+            if (!$isBlockElement(parent)) return false;
             paragraph = parent;
             offset = anchorNode.getIndexWithinParent();
         }
@@ -256,7 +257,12 @@ const registerNodeSelectionFixCommands = (editor)=>{
     const unregisterArrowUp = editor.registerCommand(KEY_ARROW_UP_COMMAND, handleArrowUp, COMMAND_PRIORITY_HIGH);
     const unregisterArrowDown = editor.registerCommand(KEY_ARROW_DOWN_COMMAND, handleArrowDown, COMMAND_PRIORITY_HIGH);
     const unregisterEscape = editor.registerCommand(KEY_ESCAPE_COMMAND, handleEscape, COMMAND_PRIORITY_HIGH);
+    const unregisterClick = editor.registerCommand(CLICK_COMMAND, (event)=>{
+        const target = event.target;
+        return target instanceof Element && null != target.closest('[data-lexical-decorator]');
+    }, COMMAND_PRIORITY_HIGH);
     return ()=>{
+        unregisterClick();
         unregisterBackspace();
         unregisterDelete();
         unregisterArrowLeft();

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

@@ -26,9 +26,32 @@ __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
     ToolbarActionsPlugin: ()=>ToolbarActionsPlugin
 });
+const list_namespaceObject = require("@lexical/list");
 const LexicalComposerContext_namespaceObject = require("@lexical/react/LexicalComposerContext");
+const utils_namespaceObject = require("@lexical/utils");
 const external_lexical_namespaceObject = require("lexical");
 const external_react_namespaceObject = require("react");
+const EMPTY_ACTIVE_FORMATS = {
+    bold: false,
+    italic: false,
+    strikethrough: false,
+    orderedList: false,
+    bulletedList: false
+};
+const $readActiveFormats = ()=>{
+    const selection = (0, external_lexical_namespaceObject.$getSelection)();
+    if (!(0, external_lexical_namespaceObject.$isRangeSelection)(selection)) return EMPTY_ACTIVE_FORMATS;
+    const anchorNode = selection.anchor.getNode();
+    const listType = (0, utils_namespaceObject.$getNearestNodeOfType)(anchorNode, list_namespaceObject.ListNode)?.getListType();
+    return {
+        bold: selection.hasFormat('bold'),
+        italic: selection.hasFormat('italic'),
+        strikethrough: selection.hasFormat('strikethrough'),
+        orderedList: 'number' === listType,
+        bulletedList: 'bullet' === listType
+    };
+};
+const activeFormatsEqual = (a, b)=>a.bold === b.bold && a.italic === b.italic && a.strikethrough === b.strikethrough && a.orderedList === b.orderedList && a.bulletedList === b.bulletedList;
 const wrapSelectionWithMarkers = (startMarker, endMarker)=>{
     const selection = (0, external_lexical_namespaceObject.$getSelection)();
     if (!(0, external_lexical_namespaceObject.$isRangeSelection)(selection)) return;
@@ -94,10 +117,27 @@ const insertLinePrefixForSelection = (getPrefix)=>{
         } else paragraph.append((0, external_lexical_namespaceObject.$createTextNode)(prefix));
     }
 };
-const ToolbarActionsPlugin = ({ actionsRef })=>{
+const ToolbarActionsPlugin = ({ actionsRef, richText, onActiveFormatsChange })=>{
     const [editor] = (0, LexicalComposerContext_namespaceObject.useLexicalComposerContext)();
     (0, external_react_namespaceObject.useEffect)(()=>{
-        actionsRef.current = {
+        if (richText) {
+            const toggleList = (target)=>{
+                const listType = editor.getEditorState().read(()=>{
+                    const selection = (0, external_lexical_namespaceObject.$getSelection)();
+                    if (!(0, external_lexical_namespaceObject.$isRangeSelection)(selection)) return;
+                    return (0, utils_namespaceObject.$getNearestNodeOfType)(selection.anchor.getNode(), list_namespaceObject.ListNode)?.getListType();
+                });
+                if (listType === target) editor.dispatchCommand(list_namespaceObject.REMOVE_LIST_COMMAND, void 0);
+                else editor.dispatchCommand('number' === target ? list_namespaceObject.INSERT_ORDERED_LIST_COMMAND : list_namespaceObject.INSERT_UNORDERED_LIST_COMMAND, void 0);
+            };
+            actionsRef.current = {
+                formatBold: ()=>editor.dispatchCommand(external_lexical_namespaceObject.FORMAT_TEXT_COMMAND, 'bold'),
+                formatItalic: ()=>editor.dispatchCommand(external_lexical_namespaceObject.FORMAT_TEXT_COMMAND, 'italic'),
+                formatStrikethrough: ()=>editor.dispatchCommand(external_lexical_namespaceObject.FORMAT_TEXT_COMMAND, 'strikethrough'),
+                formatNumberedList: ()=>toggleList('number'),
+                formatBulletedList: ()=>toggleList('bullet')
+            };
+        } else actionsRef.current = {
             formatBold: ()=>{
                 editor.update(()=>wrapSelectionWithMarkers('**', '**'));
             },
@@ -119,7 +159,28 @@ const ToolbarActionsPlugin = ({ actionsRef })=>{
         };
     }, [
         editor,
-        actionsRef
+        actionsRef,
+        richText
+    ]);
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        if (!richText || !onActiveFormatsChange) return;
+        let last = null;
+        const report = ()=>{
+            const next = editor.getEditorState().read($readActiveFormats);
+            if (!last || !activeFormatsEqual(last, next)) {
+                last = next;
+                onActiveFormatsChange(next);
+            }
+        };
+        report();
+        return (0, utils_namespaceObject.mergeRegister)(editor.registerUpdateListener(report), editor.registerCommand(external_lexical_namespaceObject.SELECTION_CHANGE_COMMAND, ()=>{
+            report();
+            return false;
+        }, external_lexical_namespaceObject.COMMAND_PRIORITY_LOW));
+    }, [
+        editor,
+        richText,
+        onActiveFormatsChange
     ]);
     return null;
 };

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

@@ -1,7 +1,11 @@
 import { type MutableRefObject } from 'react';
-import type { PromptEditorToolbarActionsRef } from '../types';
+import type { PromptEditorToolbarActionsRef, PromptEditorToolbarActiveFormats } from '../types';
 interface ToolbarActionsPluginProps {
     actionsRef: MutableRefObject<PromptEditorToolbarActionsRef | null>;
+    /** WYSIWYG mode: dispatch real Lexical format/list commands instead of inserting markdown markers. */
+    richText?: boolean;
+    /** Rich mode only: reports which formats are active at the selection, for toolbar pressed states. */
+    onActiveFormatsChange?: (formats: PromptEditorToolbarActiveFormats) => void;
 }
-export declare const ToolbarActionsPlugin: ({ actionsRef }: ToolbarActionsPluginProps) => null;
+export declare const ToolbarActionsPlugin: ({ actionsRef, richText, onActiveFormatsChange, }: ToolbarActionsPluginProps) => null;
 export {};

package/dist/components/ui/prompt-editor/plugins/ToolbarActionsPlugin.js

@@ -1,6 +1,29 @@
+import { INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND, ListNode, REMOVE_LIST_COMMAND } from "@lexical/list";
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
-import { $createTextNode, $getRoot, $getSelection, $isParagraphNode, $isRangeSelection, $isTextNode } from "lexical";
+import { $getNearestNodeOfType, mergeRegister } from "@lexical/utils";
+import { $createTextNode, $getRoot, $getSelection, $isParagraphNode, $isRangeSelection, $isTextNode, COMMAND_PRIORITY_LOW, FORMAT_TEXT_COMMAND, SELECTION_CHANGE_COMMAND } from "lexical";
 import { useEffect } from "react";
+const EMPTY_ACTIVE_FORMATS = {
+    bold: false,
+    italic: false,
+    strikethrough: false,
+    orderedList: false,
+    bulletedList: false
+};
+const $readActiveFormats = ()=>{
+    const selection = $getSelection();
+    if (!$isRangeSelection(selection)) return EMPTY_ACTIVE_FORMATS;
+    const anchorNode = selection.anchor.getNode();
+    const listType = $getNearestNodeOfType(anchorNode, ListNode)?.getListType();
+    return {
+        bold: selection.hasFormat('bold'),
+        italic: selection.hasFormat('italic'),
+        strikethrough: selection.hasFormat('strikethrough'),
+        orderedList: 'number' === listType,
+        bulletedList: 'bullet' === listType
+    };
+};
+const activeFormatsEqual = (a, b)=>a.bold === b.bold && a.italic === b.italic && a.strikethrough === b.strikethrough && a.orderedList === b.orderedList && a.bulletedList === b.bulletedList;
 const wrapSelectionWithMarkers = (startMarker, endMarker)=>{
     const selection = $getSelection();
     if (!$isRangeSelection(selection)) return;
@@ -66,10 +89,27 @@ const insertLinePrefixForSelection = (getPrefix)=>{
         } else paragraph.append($createTextNode(prefix));
     }
 };
-const ToolbarActionsPlugin = ({ actionsRef })=>{
+const ToolbarActionsPlugin = ({ actionsRef, richText, onActiveFormatsChange })=>{
     const [editor] = useLexicalComposerContext();
     useEffect(()=>{
-        actionsRef.current = {
+        if (richText) {
+            const toggleList = (target)=>{
+                const listType = editor.getEditorState().read(()=>{
+                    const selection = $getSelection();
+                    if (!$isRangeSelection(selection)) return;
+                    return $getNearestNodeOfType(selection.anchor.getNode(), ListNode)?.getListType();
+                });
+                if (listType === target) editor.dispatchCommand(REMOVE_LIST_COMMAND, void 0);
+                else editor.dispatchCommand('number' === target ? INSERT_ORDERED_LIST_COMMAND : INSERT_UNORDERED_LIST_COMMAND, void 0);
+            };
+            actionsRef.current = {
+                formatBold: ()=>editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'bold'),
+                formatItalic: ()=>editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'italic'),
+                formatStrikethrough: ()=>editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'strikethrough'),
+                formatNumberedList: ()=>toggleList('number'),
+                formatBulletedList: ()=>toggleList('bullet')
+            };
+        } else actionsRef.current = {
             formatBold: ()=>{
                 editor.update(()=>wrapSelectionWithMarkers('**', '**'));
             },
@@ -91,7 +131,28 @@ const ToolbarActionsPlugin = ({ actionsRef })=>{
         };
     }, [
         editor,
-        actionsRef
+        actionsRef,
+        richText
+    ]);
+    useEffect(()=>{
+        if (!richText || !onActiveFormatsChange) return;
+        let last = null;
+        const report = ()=>{
+            const next = editor.getEditorState().read($readActiveFormats);
+            if (!last || !activeFormatsEqual(last, next)) {
+                last = next;
+                onActiveFormatsChange(next);
+            }
+        };
+        report();
+        return mergeRegister(editor.registerUpdateListener(report), editor.registerCommand(SELECTION_CHANGE_COMMAND, ()=>{
+            report();
+            return false;
+        }, COMMAND_PRIORITY_LOW));
+    }, [
+        editor,
+        richText,
+        onActiveFormatsChange
     ]);
     return null;
 };

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

@@ -28,26 +28,21 @@ __webpack_require__.d(__webpack_exports__, {
 });
 const LexicalComposerContext_namespaceObject = require("@lexical/react/LexicalComposerContext");
 const external_react_namespaceObject = require("react");
+const autocomplete_segments_cjs_namespaceObject = require("../utils/autocomplete-segments.cjs");
 const token_nodes_cjs_namespaceObject = require("./shared/token-nodes.cjs");
-const NODE_TYPE_TO_TOKEN_TYPE = {
-    'input-token': 'input',
-    'output-token': 'output',
-    'state-token': 'state',
-    'resource-token': 'resource'
-};
 const ValidateTokensPlugin = ({ options })=>{
     const [editor] = (0, LexicalComposerContext_namespaceObject.useLexicalComposerContext)();
     (0, external_react_namespaceObject.useEffect)(()=>{
         const validValues = new Map();
         for (const opt of options){
             if (!validValues.has(opt.type)) validValues.set(opt.type, new Set());
-            validValues.get(opt.type).add(opt.value);
+            validValues.get(opt.type).add((0, autocomplete_segments_cjs_namespaceObject.normalizeVariablePath)(opt.value));
         }
         const checkIsInvalid = (node)=>{
-            const tokenType = NODE_TYPE_TO_TOKEN_TYPE[node.getType()];
+            const tokenType = token_nodes_cjs_namespaceObject.NODE_TYPE_TO_TOKEN_TYPE[node.getType()];
             if (!tokenType) return false;
             const validSet = validValues.get(tokenType);
-            return !validSet || !validSet.has(node.getValue());
+            return !validSet || !validSet.has((0, autocomplete_segments_cjs_namespaceObject.normalizeVariablePath)(node.getValue()));
         };
         const validateAllNodes = ()=>{
             const tokenNodes = (0, token_nodes_cjs_namespaceObject.getAllPromptTokenNodes)();

package/dist/components/ui/prompt-editor/plugins/ValidateTokensPlugin.js

@@ -1,25 +1,20 @@
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 import { useEffect } from "react";
-import { getAllPromptTokenNodes } from "./shared/token-nodes.js";
-const NODE_TYPE_TO_TOKEN_TYPE = {
-    'input-token': 'input',
-    'output-token': 'output',
-    'state-token': 'state',
-    'resource-token': 'resource'
-};
+import { normalizeVariablePath } from "../utils/autocomplete-segments.js";
+import { NODE_TYPE_TO_TOKEN_TYPE, getAllPromptTokenNodes } from "./shared/token-nodes.js";
 const ValidateTokensPlugin = ({ options })=>{
     const [editor] = useLexicalComposerContext();
     useEffect(()=>{
         const validValues = new Map();
         for (const opt of options){
             if (!validValues.has(opt.type)) validValues.set(opt.type, new Set());
-            validValues.get(opt.type).add(opt.value);
+            validValues.get(opt.type).add(normalizeVariablePath(opt.value));
         }
         const checkIsInvalid = (node)=>{
             const tokenType = NODE_TYPE_TO_TOKEN_TYPE[node.getType()];
             if (!tokenType) return false;
             const validSet = validValues.get(tokenType);
-            return !validSet || !validSet.has(node.getValue());
+            return !validSet || !validSet.has(normalizeVariablePath(node.getValue()));
         };
         const validateAllNodes = ()=>{
             const tokenNodes = getAllPromptTokenNodes();

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

@@ -26,10 +26,11 @@ __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
     ValueSyncPlugin: ()=>ValueSyncPlugin
 });
-const external_react_namespaceObject = require("react");
 const LexicalComposerContext_namespaceObject = require("@lexical/react/LexicalComposerContext");
 const external_lexical_namespaceObject = require("lexical");
+const external_react_namespaceObject = require("react");
 const index_cjs_namespaceObject = require("../utils/index.cjs");
+const rich_serialization_cjs_namespaceObject = require("../utils/rich-serialization.cjs");
 const getDeepActiveElement = (rootElement)=>{
     const rootNode = rootElement.getRootNode();
     let activeElement = null;
@@ -42,9 +43,11 @@ const isEditorFocused = (rootElement)=>{
     const activeElement = getDeepActiveElement(rootElement);
     return !!activeElement && (activeElement === rootElement || rootElement.contains(activeElement));
 };
-const ValueSyncPlugin = ({ value, editorRef, lastEmittedValueRef, isSyncingRef })=>{
+const ValueSyncPlugin = ({ value, editorRef, lastEmittedValueRef, isSyncingRef, richText })=>{
     const [editor] = (0, LexicalComposerContext_namespaceObject.useLexicalComposerContext)();
     const lastValueRef = (0, external_react_namespaceObject.useRef)(value);
+    const $getTokens = richText ? rich_serialization_cjs_namespaceObject.$getRichEditorTokensInternal : index_cjs_namespaceObject.$getEditorTokensInternal;
+    const $setTokens = richText ? rich_serialization_cjs_namespaceObject.$setRichEditorTokensInternal : index_cjs_namespaceObject.$setEditorTokensInternal;
     (0, external_react_namespaceObject.useEffect)(()=>{
         if (void 0 === value) return;
         if (value === lastValueRef.current) return;
@@ -56,7 +59,7 @@ const ValueSyncPlugin = ({ value, editorRef, lastEmittedValueRef, isSyncingRef }
             lastValueRef.current = value;
             return;
         }
-        const currentTokens = editorRef.current?.getEditorState().read(index_cjs_namespaceObject.$getEditorTokensInternal);
+        const currentTokens = editorRef.current?.getEditorState().read($getTokens);
         if (currentTokens && (0, index_cjs_namespaceObject.areTokensEqual)(currentTokens, value)) {
             lastValueRef.current = value;
             return;
@@ -68,7 +71,7 @@ const ValueSyncPlugin = ({ value, editorRef, lastEmittedValueRef, isSyncingRef }
             if (isSyncingRef) isSyncingRef.current = true;
             editor.update(()=>{
                 if (shouldSkipDomSelection) (0, external_lexical_namespaceObject.$addUpdateTag)(external_lexical_namespaceObject.SKIP_DOM_SELECTION_TAG);
-                (0, index_cjs_namespaceObject.$setEditorTokensInternal)(value);
+                $setTokens(value);
             }, {
                 discrete: true,
                 onUpdate: ()=>{
@@ -85,7 +88,9 @@ const ValueSyncPlugin = ({ value, editorRef, lastEmittedValueRef, isSyncingRef }
         value,
         editorRef,
         lastEmittedValueRef,
-        isSyncingRef
+        isSyncingRef,
+        $getTokens,
+        $setTokens
     ]);
     return null;
 };

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

@@ -1,8 +1,10 @@
 import { type LexicalEditor } from 'lexical';
 import type { PromptEditorToken } from '../types';
-export declare const ValueSyncPlugin: ({ value, editorRef, lastEmittedValueRef, isSyncingRef, }: {
+export declare const ValueSyncPlugin: ({ value, editorRef, lastEmittedValueRef, isSyncingRef, richText, }: {
     value: PromptEditorToken[] | undefined;
     editorRef: React.MutableRefObject<LexicalEditor | null>;
     lastEmittedValueRef?: React.MutableRefObject<PromptEditorToken[] | null>;
     isSyncingRef?: React.MutableRefObject<boolean>;
+    /** WYSIWYG mode: read/write through the markdown-aware serializers so a sync can't flatten rich state. */
+    richText?: boolean;
 }) => null;

package/dist/components/ui/prompt-editor/plugins/ValueSyncPlugin.js

@@ -1,7 +1,8 @@
-import { useEffect, useRef } from "react";
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 import { $addUpdateTag, SKIP_DOM_SELECTION_TAG } from "lexical";
+import { useEffect, useRef } from "react";
 import { $getEditorTokensInternal, $setEditorTokensInternal, areTokensEqual } from "../utils/index.js";
+import { $getRichEditorTokensInternal, $setRichEditorTokensInternal } from "../utils/rich-serialization.js";
 const getDeepActiveElement = (rootElement)=>{
     const rootNode = rootElement.getRootNode();
     let activeElement = null;
@@ -14,9 +15,11 @@ const isEditorFocused = (rootElement)=>{
     const activeElement = getDeepActiveElement(rootElement);
     return !!activeElement && (activeElement === rootElement || rootElement.contains(activeElement));
 };
-const ValueSyncPlugin = ({ value, editorRef, lastEmittedValueRef, isSyncingRef })=>{
+const ValueSyncPlugin = ({ value, editorRef, lastEmittedValueRef, isSyncingRef, richText })=>{
     const [editor] = useLexicalComposerContext();
     const lastValueRef = useRef(value);
+    const $getTokens = richText ? $getRichEditorTokensInternal : $getEditorTokensInternal;
+    const $setTokens = richText ? $setRichEditorTokensInternal : $setEditorTokensInternal;
     useEffect(()=>{
         if (void 0 === value) return;
         if (value === lastValueRef.current) return;
@@ -28,7 +31,7 @@ const ValueSyncPlugin = ({ value, editorRef, lastEmittedValueRef, isSyncingRef }
             lastValueRef.current = value;
             return;
         }
-        const currentTokens = editorRef.current?.getEditorState().read($getEditorTokensInternal);
+        const currentTokens = editorRef.current?.getEditorState().read($getTokens);
         if (currentTokens && areTokensEqual(currentTokens, value)) {
             lastValueRef.current = value;
             return;
@@ -40,7 +43,7 @@ const ValueSyncPlugin = ({ value, editorRef, lastEmittedValueRef, isSyncingRef }
             if (isSyncingRef) isSyncingRef.current = true;
             editor.update(()=>{
                 if (shouldSkipDomSelection) $addUpdateTag(SKIP_DOM_SELECTION_TAG);
-                $setEditorTokensInternal(value);
+                $setTokens(value);
             }, {
                 discrete: true,
                 onUpdate: ()=>{
@@ -57,7 +60,9 @@ const ValueSyncPlugin = ({ value, editorRef, lastEmittedValueRef, isSyncingRef }
         value,
         editorRef,
         lastEmittedValueRef,
-        isSyncingRef
+        isSyncingRef,
+        $getTokens,
+        $setTokens
     ]);
     return null;
 };

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

@@ -66,7 +66,7 @@ const $resolveDropPosition = (editor, offsetNode, domOffset, clientX)=>{
         offset: domOffset,
         type: 'text'
     };
-    if ((0, external_lexical_namespaceObject.$isParagraphNode)(node)) return {
+    if ((0, external_lexical_namespaceObject.$isElementNode)(node) && !node.isInline()) return {
         key: node.getKey(),
         offset: domOffset,
         type: 'element'

package/dist/components/ui/prompt-editor/plugins/VariableDropPlugin.js

@@ -1,5 +1,5 @@
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
-import { $createRangeSelection, $getNearestNodeFromDOMNode, $getRoot, $isDecoratorNode, $isParagraphNode, $isTextNode, $setSelection } from "lexical";
+import { $createRangeSelection, $getNearestNodeFromDOMNode, $getRoot, $isDecoratorNode, $isElementNode, $isTextNode, $setSelection } from "lexical";
 import { useEffect, useRef } from "react";
 import { $insertTokenAtCursor } from "../utils/index.js";
 const VARIABLE_DRAG_MIME = 'application/x-apollo-prompt-variable';
@@ -37,7 +37,7 @@ const $resolveDropPosition = (editor, offsetNode, domOffset, clientX)=>{
         offset: domOffset,
         type: 'text'
     };
-    if ($isParagraphNode(node)) return {
+    if ($isElementNode(node) && !node.isInline()) return {
         key: node.getKey(),
         offset: domOffset,
         type: 'element'

package/dist/components/ui/prompt-editor/plugins/shared/token-nodes.cjs

@@ -25,22 +25,31 @@ var __webpack_exports__ = {};
 __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
     isPromptTokenNode: ()=>isPromptTokenNode,
+    NODE_TYPE_TO_TOKEN_TYPE: ()=>NODE_TYPE_TO_TOKEN_TYPE,
     getAllPromptTokenNodes: ()=>getAllPromptTokenNodes
 });
 const utils_namespaceObject = require("@lexical/utils");
 const InputTokenNode_cjs_namespaceObject = require("../../nodes/InputTokenNode.cjs");
 const OutputTokenNode_cjs_namespaceObject = require("../../nodes/OutputTokenNode.cjs");
-const StateTokenNode_cjs_namespaceObject = require("../../nodes/StateTokenNode.cjs");
 const ResourceTokenNode_cjs_namespaceObject = require("../../nodes/ResourceTokenNode.cjs");
+const StateTokenNode_cjs_namespaceObject = require("../../nodes/StateTokenNode.cjs");
+const NODE_TYPE_TO_TOKEN_TYPE = {
+    'input-token': 'input',
+    'output-token': 'output',
+    'state-token': 'state',
+    'resource-token': 'resource'
+};
 const isPromptTokenNode = (node)=>(0, InputTokenNode_cjs_namespaceObject.isInputTokenNode)(node) || (0, OutputTokenNode_cjs_namespaceObject.isOutputTokenNode)(node) || (0, StateTokenNode_cjs_namespaceObject.isStateTokenNode)(node) || (0, ResourceTokenNode_cjs_namespaceObject.isResourceTokenNode)(node);
 const getAllPromptTokenNodes = ()=>{
     const nodes = [];
     for (const { node } of (0, utils_namespaceObject.$dfs)())if (isPromptTokenNode(node)) nodes.push(node);
     return nodes;
 };
+exports.NODE_TYPE_TO_TOKEN_TYPE = __webpack_exports__.NODE_TYPE_TO_TOKEN_TYPE;
 exports.getAllPromptTokenNodes = __webpack_exports__.getAllPromptTokenNodes;
 exports.isPromptTokenNode = __webpack_exports__.isPromptTokenNode;
 for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "NODE_TYPE_TO_TOKEN_TYPE",
     "getAllPromptTokenNodes",
     "isPromptTokenNode"
 ].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];

package/dist/components/ui/prompt-editor/plugins/shared/token-nodes.d.ts

@@ -1,8 +1,11 @@
 import type { LexicalNode } from 'lexical';
 import { type InputTokenNode } from '../../nodes/InputTokenNode';
 import { type OutputTokenNode } from '../../nodes/OutputTokenNode';
-import { type StateTokenNode } from '../../nodes/StateTokenNode';
 import { type ResourceTokenNode } from '../../nodes/ResourceTokenNode';
+import { type StateTokenNode } from '../../nodes/StateTokenNode';
+import type { PromptEditorTokenType } from '../../types';
 export type PromptTokenNode = InputTokenNode | OutputTokenNode | StateTokenNode | ResourceTokenNode;
+/** Lexical node type → token type, typed so lookups need no cast. */
+export declare const NODE_TYPE_TO_TOKEN_TYPE: Record<string, Exclude<PromptEditorTokenType, 'text'>>;
 export declare const isPromptTokenNode: (node: LexicalNode | null | undefined) => node is PromptTokenNode;
 export declare const getAllPromptTokenNodes: () => PromptTokenNode[];

package/dist/components/ui/prompt-editor/plugins/shared/token-nodes.js

@@ -1,12 +1,18 @@
 import { $dfs } from "@lexical/utils";
 import { isInputTokenNode } from "../../nodes/InputTokenNode.js";
 import { isOutputTokenNode } from "../../nodes/OutputTokenNode.js";
-import { isStateTokenNode } from "../../nodes/StateTokenNode.js";
 import { isResourceTokenNode } from "../../nodes/ResourceTokenNode.js";
+import { isStateTokenNode } from "../../nodes/StateTokenNode.js";
+const NODE_TYPE_TO_TOKEN_TYPE = {
+    'input-token': 'input',
+    'output-token': 'output',
+    'state-token': 'state',
+    'resource-token': 'resource'
+};
 const isPromptTokenNode = (node)=>isInputTokenNode(node) || isOutputTokenNode(node) || isStateTokenNode(node) || isResourceTokenNode(node);
 const getAllPromptTokenNodes = ()=>{
     const nodes = [];
     for (const { node } of $dfs())if (isPromptTokenNode(node)) nodes.push(node);
     return nodes;
 };
-export { getAllPromptTokenNodes, isPromptTokenNode };
+export { NODE_TYPE_TO_TOKEN_TYPE, getAllPromptTokenNodes, isPromptTokenNode };