@uipath/apollo-react 4.61.1 → 4.62.1

package/dist/canvas/components/StickyNoteNode/FormattingToolbar.cjs

@@ -34,19 +34,14 @@ const external_CanvasTooltip_cjs_namespaceObject = require("../CanvasTooltip.cjs
 const external_markdown_formatting_index_cjs_namespaceObject = require("./markdown-formatting/index.cjs");
 const external_StickyNoteNode_styles_cjs_namespaceObject = require("./StickyNoteNode.styles.cjs");
 const external_StickyNoteNode_utils_cjs_namespaceObject = require("./StickyNoteNode.utils.cjs");
-const FormattingToolbarComponent = ({ textAreaRef, borderColor, activeFormats, onFormat })=>{
+const FormattingToolbarComponent = ({ containerRef, textAreaRef, borderColor, activeFormats, onFormat, onBlur, actions = [], onAction })=>{
     const { _ } = (0, index_cjs_namespaceObject.useSafeLingui)();
     const mod = (0, external_StickyNoteNode_utils_cjs_namespaceObject.getModifierKey)();
     const shift = (0, external_StickyNoteNode_utils_cjs_namespaceObject.isMac)() ? '⇧' : '+Shift+';
     const applyFormat = (0, external_react_namespaceObject.useCallback)((formatFn)=>{
         const textarea = textAreaRef.current;
         if (!textarea) return;
-        const input = {
-            value: textarea.value,
-            selectionStart: textarea.selectionStart,
-            selectionEnd: textarea.selectionEnd
-        };
-        onFormat(formatFn(input));
+        onFormat(formatFn((0, external_StickyNoteNode_utils_cjs_namespaceObject.readTextSelection)(textarea)));
         textarea.focus();
     }, [
         textAreaRef,
@@ -101,10 +96,12 @@ const FormattingToolbarComponent = ({ textAreaRef, borderColor, activeFormats, o
         message: 'Text formatting'
     });
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_StickyNoteNode_styles_cjs_namespaceObject.FormattingToolbarContainer, {
+        ref: containerRef,
         role: "toolbar",
         "aria-label": toolbarLabel,
         borderColor: borderColor,
         onMouseDown: (e)=>e.preventDefault(),
+        onBlur: onBlur,
         className: "nodrag nowheel",
         children: [
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_CanvasTooltip_cjs_namespaceObject.CanvasTooltip, {
@@ -112,9 +109,11 @@ const FormattingToolbarComponent = ({ textAreaRef, borderColor, activeFormats, o
                 placement: "top",
                 delay: true,
                 children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StickyNoteNode_styles_cjs_namespaceObject.FormattingButton, {
+                    type: "button",
                     isActive: activeFormats.bold,
                     onClick: handleBold,
                     "aria-label": boldLabel,
+                    "aria-pressed": activeFormats.bold,
                     children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_index_cjs_namespaceObject.CanvasIcon, {
                         icon: "bold",
                         size: 14
@@ -126,9 +125,11 @@ const FormattingToolbarComponent = ({ textAreaRef, borderColor, activeFormats, o
                 placement: "top",
                 delay: true,
                 children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StickyNoteNode_styles_cjs_namespaceObject.FormattingButton, {
+                    type: "button",
                     isActive: activeFormats.italic,
                     onClick: handleItalic,
                     "aria-label": italicLabel,
+                    "aria-pressed": activeFormats.italic,
                     children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_index_cjs_namespaceObject.CanvasIcon, {
                         icon: "italic",
                         size: 14
@@ -140,9 +141,11 @@ const FormattingToolbarComponent = ({ textAreaRef, borderColor, activeFormats, o
                 placement: "top",
                 delay: true,
                 children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StickyNoteNode_styles_cjs_namespaceObject.FormattingButton, {
+                    type: "button",
                     isActive: activeFormats.strikethrough,
                     onClick: handleStrikethrough,
                     "aria-label": strikethroughLabel,
+                    "aria-pressed": activeFormats.strikethrough,
                     children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_index_cjs_namespaceObject.CanvasIcon, {
                         icon: "strikethrough",
                         size: 14
@@ -155,9 +158,11 @@ const FormattingToolbarComponent = ({ textAreaRef, borderColor, activeFormats, o
                 placement: "top",
                 delay: true,
                 children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StickyNoteNode_styles_cjs_namespaceObject.FormattingButton, {
+                    type: "button",
                     isActive: activeFormats.bulletList,
                     onClick: handleBulletList,
                     "aria-label": bulletListLabel,
+                    "aria-pressed": activeFormats.bulletList,
                     children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_index_cjs_namespaceObject.CanvasIcon, {
                         icon: "list",
                         size: 14
@@ -169,15 +174,31 @@ const FormattingToolbarComponent = ({ textAreaRef, borderColor, activeFormats, o
                 placement: "top",
                 delay: true,
                 children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StickyNoteNode_styles_cjs_namespaceObject.FormattingButton, {
+                    type: "button",
                     isActive: activeFormats.numberedList,
                     onClick: handleNumberedList,
                     "aria-label": numberedListLabel,
+                    "aria-pressed": activeFormats.numberedList,
                     children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_index_cjs_namespaceObject.CanvasIcon, {
                         icon: "list-ordered",
                         size: 14
                     })
                 })
-            })
+            }),
+            actions.length > 0 && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StickyNoteNode_styles_cjs_namespaceObject.ToolbarSeparator, {}),
+            actions.map((action)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_CanvasTooltip_cjs_namespaceObject.CanvasTooltip, {
+                    content: action.label,
+                    placement: "top",
+                    delay: true,
+                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StickyNoteNode_styles_cjs_namespaceObject.FormattingButton, {
+                        type: "button",
+                        isActive: false,
+                        disabled: action.disabled || !onAction,
+                        onClick: (event)=>onAction?.(action, event.currentTarget.getBoundingClientRect()),
+                        "aria-label": action.label,
+                        children: action.icon
+                    })
+                }, action.id))
         ]
     });
 };

package/dist/canvas/components/StickyNoteNode/FormattingToolbar.d.ts

@@ -1,12 +1,16 @@
-import { type RefObject } from 'react';
+import { type FocusEvent, type RefObject } from 'react';
 import type { ActiveFormats } from './markdown-formatting';
-import type { TextSelection } from './StickyNoteNode.types';
+import type { StickyNoteFormattingAction, TextSelection } from './StickyNoteNode.types';
 interface FormattingToolbarProps {
+    containerRef?: RefObject<HTMLDivElement | null>;
     textAreaRef: RefObject<HTMLTextAreaElement | null>;
     borderColor: string;
     activeFormats: ActiveFormats;
     onFormat: (result: TextSelection) => void;
+    onBlur?: (event: FocusEvent<HTMLDivElement>) => void;
+    actions?: readonly StickyNoteFormattingAction[];
+    onAction?: (action: StickyNoteFormattingAction, anchorRect: DOMRectReadOnly) => void;
 }
-export declare const FormattingToolbar: import("react").MemoExoticComponent<({ textAreaRef, borderColor, activeFormats, onFormat, }: FormattingToolbarProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const FormattingToolbar: import("react").MemoExoticComponent<({ containerRef, textAreaRef, borderColor, activeFormats, onFormat, onBlur, actions, onAction, }: FormattingToolbarProps) => import("react/jsx-runtime").JSX.Element>;
 export {};
 //# sourceMappingURL=FormattingToolbar.d.ts.map

package/dist/canvas/components/StickyNoteNode/FormattingToolbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormattingToolbar.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StickyNoteNode/FormattingToolbar.tsx"],"names":[],"mappings":"AACA,OAAO,EAAQ,KAAK,SAAS,EAAe,MAAM,OAAO,CAAC;AAG1D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAa3D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAG5D,UAAU,sBAAsB;IAC9B,WAAW,EAAE,SAAS,CAAC,mBAAmB,GAAG,IAAI,CAAC,CAAC;IACnD,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,EAAE,aAAa,CAAC;IAC7B,QAAQ,EAAE,CAAC,MAAM,EAAE,aAAa,KAAK,IAAI,CAAC;CAC3C;AAwHD,eAAO,MAAM,iBAAiB,+FAjH3B,sBAAsB,6CAiHwC,CAAC"}
+{"version":3,"file":"FormattingToolbar.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StickyNoteNode/FormattingToolbar.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,UAAU,EAAQ,KAAK,SAAS,EAAe,MAAM,OAAO,CAAC;AAG3E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAa3D,OAAO,KAAK,EAAE,0BAA0B,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAGxF,UAAU,sBAAsB;IAC9B,YAAY,CAAC,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAChD,WAAW,EAAE,SAAS,CAAC,mBAAmB,GAAG,IAAI,CAAC,CAAC;IACnD,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,EAAE,aAAa,CAAC;IAC7B,QAAQ,EAAE,CAAC,MAAM,EAAE,aAAa,KAAK,IAAI,CAAC;IAC1C,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IACrD,OAAO,CAAC,EAAE,SAAS,0BAA0B,EAAE,CAAC;IAChD,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,0BAA0B,EAAE,UAAU,EAAE,eAAe,KAAK,IAAI,CAAC;CACtF;AAqJD,eAAO,MAAM,iBAAiB,wIA1I3B,sBAAsB,6CA0IwC,CAAC"}

package/dist/canvas/components/StickyNoteNode/FormattingToolbar.js

@@ -5,20 +5,15 @@ import { useSafeLingui } from "../../../i18n/index.js";
 import { CanvasTooltip } from "../CanvasTooltip.js";
 import { toggleBold, toggleBulletList, toggleItalic, toggleNumberedList, toggleStrikethrough } from "./markdown-formatting/index.js";
 import { FormattingButton, FormattingToolbarContainer, ToolbarSeparator } from "./StickyNoteNode.styles.js";
-import { getModifierKey, isMac } from "./StickyNoteNode.utils.js";
-const FormattingToolbarComponent = ({ textAreaRef, borderColor, activeFormats, onFormat })=>{
+import { getModifierKey, isMac, readTextSelection } from "./StickyNoteNode.utils.js";
+const FormattingToolbarComponent = ({ containerRef, textAreaRef, borderColor, activeFormats, onFormat, onBlur, actions = [], onAction })=>{
     const { _ } = useSafeLingui();
     const mod = getModifierKey();
     const shift = isMac() ? '⇧' : '+Shift+';
     const applyFormat = useCallback((formatFn)=>{
         const textarea = textAreaRef.current;
         if (!textarea) return;
-        const input = {
-            value: textarea.value,
-            selectionStart: textarea.selectionStart,
-            selectionEnd: textarea.selectionEnd
-        };
-        onFormat(formatFn(input));
+        onFormat(formatFn(readTextSelection(textarea)));
         textarea.focus();
     }, [
         textAreaRef,
@@ -73,10 +68,12 @@ const FormattingToolbarComponent = ({ textAreaRef, borderColor, activeFormats, o
         message: 'Text formatting'
     });
     return /*#__PURE__*/ jsxs(FormattingToolbarContainer, {
+        ref: containerRef,
         role: "toolbar",
         "aria-label": toolbarLabel,
         borderColor: borderColor,
         onMouseDown: (e)=>e.preventDefault(),
+        onBlur: onBlur,
         className: "nodrag nowheel",
         children: [
             /*#__PURE__*/ jsx(CanvasTooltip, {
@@ -84,9 +81,11 @@ const FormattingToolbarComponent = ({ textAreaRef, borderColor, activeFormats, o
                 placement: "top",
                 delay: true,
                 children: /*#__PURE__*/ jsx(FormattingButton, {
+                    type: "button",
                     isActive: activeFormats.bold,
                     onClick: handleBold,
                     "aria-label": boldLabel,
+                    "aria-pressed": activeFormats.bold,
                     children: /*#__PURE__*/ jsx(CanvasIcon, {
                         icon: "bold",
                         size: 14
@@ -98,9 +97,11 @@ const FormattingToolbarComponent = ({ textAreaRef, borderColor, activeFormats, o
                 placement: "top",
                 delay: true,
                 children: /*#__PURE__*/ jsx(FormattingButton, {
+                    type: "button",
                     isActive: activeFormats.italic,
                     onClick: handleItalic,
                     "aria-label": italicLabel,
+                    "aria-pressed": activeFormats.italic,
                     children: /*#__PURE__*/ jsx(CanvasIcon, {
                         icon: "italic",
                         size: 14
@@ -112,9 +113,11 @@ const FormattingToolbarComponent = ({ textAreaRef, borderColor, activeFormats, o
                 placement: "top",
                 delay: true,
                 children: /*#__PURE__*/ jsx(FormattingButton, {
+                    type: "button",
                     isActive: activeFormats.strikethrough,
                     onClick: handleStrikethrough,
                     "aria-label": strikethroughLabel,
+                    "aria-pressed": activeFormats.strikethrough,
                     children: /*#__PURE__*/ jsx(CanvasIcon, {
                         icon: "strikethrough",
                         size: 14
@@ -127,9 +130,11 @@ const FormattingToolbarComponent = ({ textAreaRef, borderColor, activeFormats, o
                 placement: "top",
                 delay: true,
                 children: /*#__PURE__*/ jsx(FormattingButton, {
+                    type: "button",
                     isActive: activeFormats.bulletList,
                     onClick: handleBulletList,
                     "aria-label": bulletListLabel,
+                    "aria-pressed": activeFormats.bulletList,
                     children: /*#__PURE__*/ jsx(CanvasIcon, {
                         icon: "list",
                         size: 14
@@ -141,15 +146,31 @@ const FormattingToolbarComponent = ({ textAreaRef, borderColor, activeFormats, o
                 placement: "top",
                 delay: true,
                 children: /*#__PURE__*/ jsx(FormattingButton, {
+                    type: "button",
                     isActive: activeFormats.numberedList,
                     onClick: handleNumberedList,
                     "aria-label": numberedListLabel,
+                    "aria-pressed": activeFormats.numberedList,
                     children: /*#__PURE__*/ jsx(CanvasIcon, {
                         icon: "list-ordered",
                         size: 14
                     })
                 })
-            })
+            }),
+            actions.length > 0 && /*#__PURE__*/ jsx(ToolbarSeparator, {}),
+            actions.map((action)=>/*#__PURE__*/ jsx(CanvasTooltip, {
+                    content: action.label,
+                    placement: "top",
+                    delay: true,
+                    children: /*#__PURE__*/ jsx(FormattingButton, {
+                        type: "button",
+                        isActive: false,
+                        disabled: action.disabled || !onAction,
+                        onClick: (event)=>onAction?.(action, event.currentTarget.getBoundingClientRect()),
+                        "aria-label": action.label,
+                        children: action.icon
+                    })
+                }, action.id))
         ]
     });
 };

package/dist/canvas/components/StickyNoteNode/StickyNoteNode.cjs

@@ -63,7 +63,7 @@ const external_useMarkdownShortcuts_cjs_namespaceObject = require("./useMarkdown
 const external_useScrollCapture_cjs_namespaceObject = require("./useScrollCapture.cjs");
 const minWidth = 8 * external_constants_cjs_namespaceObject.GRID_SPACING;
 const minHeight = 8 * external_constants_cjs_namespaceObject.GRID_SPACING;
-const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = 'Add text', renderPlaceholderOnSelect = false, readOnly = false, onContentChange, onColorChange, onResize, onResizeStart, onResizeEnd })=>{
+const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = 'Add text', renderPlaceholderOnSelect = false, readOnly = false, onContentChange, onColorChange, onResize, onResizeStart, onResizeEnd, formattingActions, markdownComponents: customMarkdownComponents })=>{
     const { _ } = (0, index_cjs_namespaceObject.useSafeLingui)();
     const { updateNodeData, deleteElements } = (0, react_cjs_namespaceObject.useReactFlow)();
     const { multipleNodesSelected } = (0, SelectionStateContext_cjs_namespaceObject.useSelectionState)();
@@ -71,7 +71,9 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
     const [isResizing, setIsResizing] = (0, external_react_namespaceObject.useState)(false);
     const [isColorPickerOpen, setIsColorPickerOpen] = (0, external_react_namespaceObject.useState)(false);
     const [localContent, setLocalContent] = (0, external_react_namespaceObject.useState)(data.content || '');
+    const latestContentRef = (0, external_react_namespaceObject.useRef)(localContent);
     const textAreaRef = (0, external_react_namespaceObject.useRef)(null);
+    const formattingToolbarRef = (0, external_react_namespaceObject.useRef)(null);
     const skipBlurRef = (0, external_react_namespaceObject.useRef)(null);
     const { ref: markdownRef, scrollCaptureProps } = (0, external_useScrollCapture_cjs_namespaceObject.useScrollCapture)();
     const colorButtonRef = (0, external_react_namespaceObject.useRef)(null);
@@ -85,10 +87,15 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
     const colorKey = data.color || 'yellow';
     const color = external_StickyNoteNode_types_cjs_namespaceObject.STICKY_NOTE_COLORS[colorKey] ?? external_StickyNoteNode_types_cjs_namespaceObject.STICKY_NOTE_COLORS.yellow;
     const colorWithAlpha = (0, external_StickyNoteNode_types_cjs_namespaceObject.withAlpha)(color);
+    const updateLocalContent = (0, external_react_namespaceObject.useCallback)((content)=>{
+        latestContentRef.current = content;
+        setLocalContent(content);
+    }, []);
     (0, external_react_namespaceObject.useEffect)(()=>{
-        setLocalContent(data.content || '');
+        updateLocalContent(data.content || '');
     }, [
-        data.content
+        data.content,
+        updateLocalContent
     ]);
     (0, external_react_namespaceObject.useEffect)(()=>{
         if (isEditing && textAreaRef.current) {
@@ -116,11 +123,12 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
     (0, external_react_namespaceObject.useEffect)(()=>{
         if (readOnly) {
             setIsEditing(false);
-            setLocalContent(data.content || '');
+            updateLocalContent(data.content || '');
         }
     }, [
         readOnly,
-        data.content
+        data.content,
+        updateLocalContent
     ]);
     const handleDoubleClick = (0, external_react_namespaceObject.useCallback)(()=>{
         if (readOnly || isEditing) return;
@@ -135,7 +143,9 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
         isEditing,
         readOnly
     ]);
-    const handleBlur = (0, external_react_namespaceObject.useCallback)(()=>{
+    const handleBlur = (0, external_react_namespaceObject.useCallback)((event)=>{
+        const nextTarget = event.relatedTarget;
+        if (nextTarget instanceof Node && (textAreaRef.current?.contains(nextTarget) || formattingToolbarRef.current?.contains(nextTarget))) return;
         setIsEditing(false);
         if (readOnly) return;
         const content = textAreaRef.current?.value ?? localContent;
@@ -159,10 +169,12 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
     ]);
     const handleChange = (0, external_react_namespaceObject.useCallback)((e)=>{
         skipBlurRef.current = null;
-        setLocalContent(e.target.value);
-    }, []);
+        updateLocalContent(e.target.value);
+    }, [
+        updateLocalContent
+    ]);
     const handleFormat = (0, external_react_namespaceObject.useCallback)((result)=>{
-        setLocalContent(result.value);
+        updateLocalContent(result.value);
         setActiveFormats((0, external_markdown_formatting_index_cjs_namespaceObject.detectActiveFormats)(result));
         requestAnimationFrame(()=>{
             if (textAreaRef.current) {
@@ -170,7 +182,68 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
                 textAreaRef.current.selectionEnd = result.selectionEnd;
             }
         });
-    }, []);
+    }, [
+        updateLocalContent
+    ]);
+    const handleFormattingAction = (0, external_react_namespaceObject.useCallback)((action, anchorRect)=>{
+        const textarea = textAreaRef.current;
+        if (!textarea) return;
+        const selection = (0, external_StickyNoteNode_utils_cjs_namespaceObject.readTextSelection)(textarea);
+        skipBlurRef.current = selection.value;
+        let completed = false;
+        const restoreSelection = (next)=>{
+            setIsEditing(true);
+            requestAnimationFrame(()=>{
+                const currentTextarea = textAreaRef.current;
+                if (!currentTextarea) return;
+                const length = next.value.length;
+                currentTextarea.focus();
+                currentTextarea.selectionStart = Math.max(0, Math.min(length, next.selectionStart));
+                currentTextarea.selectionEnd = Math.max(0, Math.min(length, next.selectionEnd));
+            });
+        };
+        const complete = (next, shouldPersist)=>{
+            if (completed) return;
+            completed = true;
+            skipBlurRef.current = shouldPersist ? next.value : null;
+            setActiveFormats((0, external_markdown_formatting_index_cjs_namespaceObject.detectActiveFormats)(next));
+            if (shouldPersist) {
+                updateLocalContent(next.value);
+                onContentChange?.(next.value);
+                updateNodeData(id, {
+                    content: next.value
+                });
+            }
+            restoreSelection(next);
+        };
+        try {
+            action.onAction({
+                selection,
+                anchorRect,
+                currentValue: ()=>textAreaRef.current?.value ?? latestContentRef.current,
+                commit: (next)=>complete(next, true),
+                resume: ()=>{
+                    const currentValue = textAreaRef.current?.value ?? latestContentRef.current;
+                    complete({
+                        ...selection,
+                        value: currentValue
+                    }, false);
+                }
+            });
+        } catch (error) {
+            if (!completed) {
+                completed = true;
+                skipBlurRef.current = null;
+                restoreSelection(selection);
+            }
+            throw error;
+        }
+    }, [
+        id,
+        onContentChange,
+        updateLocalContent,
+        updateNodeData
+    ]);
     const updateActiveFormats = (0, external_react_namespaceObject.useCallback)(()=>{
         if (!textAreaRef.current) return;
         const next = (0, external_markdown_formatting_index_cjs_namespaceObject.detectActiveFormats)({
@@ -185,7 +258,7 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
         if ('Escape' === e.key) {
             skipBlurRef.current = textAreaRef.current?.value ?? localContent;
             setIsEditing(false);
-            setLocalContent(data.content || '');
+            updateLocalContent(data.content || '');
             textAreaRef.current?.blur();
             return;
         }
@@ -209,7 +282,8 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
         data.content,
         localContent,
         shortcutKeyDown,
-        handleFormat
+        handleFormat,
+        updateLocalContent
     ]);
     const handleResizeStart = (0, external_react_namespaceObject.useCallback)(()=>{
         if (isEditing) {
@@ -283,8 +357,8 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
         id,
         deleteElements
     ]);
-    const markdownComponents = (0, external_react_namespaceObject.useMemo)(()=>({
-            a: ({ href, children, ...props })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("a", {
+    const builtInMarkdownComponents = (0, external_react_namespaceObject.useMemo)(()=>({
+            a: ({ node: _node, href, children, ...props })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("a", {
                     ...props,
                     href: href,
                     target: "_blank",
@@ -298,6 +372,13 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
                     children: children
                 })
         }), []);
+    const markdownComponents = (0, external_react_namespaceObject.useMemo)(()=>({
+            ...customMarkdownComponents,
+            ...builtInMarkdownComponents
+        }), [
+        builtInMarkdownComponents,
+        customMarkdownComponents
+    ]);
     const toolbarConfig = (0, external_react_namespaceObject.useMemo)(()=>{
         const actions = [
             {
@@ -453,12 +534,6 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
                             }),
                             isEditing ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
                                 children: [
-                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_FormattingToolbar_cjs_namespaceObject.FormattingToolbar, {
-                                        textAreaRef: textAreaRef,
-                                        borderColor: color,
-                                        activeFormats: activeFormats,
-                                        onFormat: handleFormat
-                                    }),
                                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StickyNoteNode_styles_cjs_namespaceObject.StickyNoteTextArea, {
                                         ref: textAreaRef,
                                         value: localContent,
@@ -470,6 +545,16 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
                                         placeholder: placeholder,
                                         isEditing: isEditing,
                                         className: "nodrag nowheel"
+                                    }),
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_FormattingToolbar_cjs_namespaceObject.FormattingToolbar, {
+                                        containerRef: formattingToolbarRef,
+                                        textAreaRef: textAreaRef,
+                                        borderColor: color,
+                                        activeFormats: activeFormats,
+                                        onFormat: handleFormat,
+                                        onBlur: handleBlur,
+                                        actions: formattingActions,
+                                        onAction: handleFormattingAction
                                     })
                                 ]
                             }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StickyNoteNode_styles_cjs_namespaceObject.StickyNoteMarkdown, {

package/dist/canvas/components/StickyNoteNode/StickyNoteNode.d.ts

@@ -1,5 +1,6 @@
 import type { NodeProps } from '../../xyflow/react.ts';
-import type { StickyNoteColor, StickyNoteData } from './StickyNoteNode.types';
+import { type Components } from 'react-markdown';
+import type { StickyNoteColor, StickyNoteData, StickyNoteFormattingAction } from './StickyNoteNode.types';
 export interface StickyNoteNodeProps extends NodeProps {
     data: StickyNoteData;
     placeholder?: string;
@@ -10,6 +11,8 @@ export interface StickyNoteNodeProps extends NodeProps {
     onResize?: (width: number, height: number) => void;
     onResizeStart?: () => void;
     onResizeEnd?: () => void;
+    formattingActions?: readonly StickyNoteFormattingAction[];
+    markdownComponents?: Omit<Components, 'a'>;
 }
-export declare const StickyNoteNode: import("react").MemoExoticComponent<({ id, data, selected, dragging, placeholder, renderPlaceholderOnSelect, readOnly, onContentChange, onColorChange, onResize, onResizeStart, onResizeEnd, }: StickyNoteNodeProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const StickyNoteNode: import("react").MemoExoticComponent<({ id, data, selected, dragging, placeholder, renderPlaceholderOnSelect, readOnly, onContentChange, onColorChange, onResize, onResizeStart, onResizeEnd, formattingActions, markdownComponents: customMarkdownComponents, }: StickyNoteNodeProps) => import("react/jsx-runtime").JSX.Element>;
 //# sourceMappingURL=StickyNoteNode.d.ts.map

package/dist/canvas/components/StickyNoteNode/StickyNoteNode.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StickyNoteNode.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StickyNoteNode/StickyNoteNode.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,0CAA0C,CAAC;AAoC1E,OAAO,KAAK,EAAE,eAAe,EAAE,cAAc,EAAiB,MAAM,wBAAwB,CAAC;AAM7F,MAAM,WAAW,mBAAoB,SAAQ,SAAS;IACpD,IAAI,EAAE,cAAc,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;IACjD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;CAC1B;AA4cD,eAAO,MAAM,cAAc,kMA1bxB,mBAAmB,6CA0bwE,CAAC"}
+{"version":3,"file":"StickyNoteNode.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StickyNoteNode/StickyNoteNode.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,0CAA0C,CAAC;AAM1E,OAAsB,EAAE,KAAK,UAAU,EAAE,MAAM,gBAAgB,CAAC;AA8BhE,OAAO,KAAK,EACV,eAAe,EACf,cAAc,EACd,0BAA0B,EAE3B,MAAM,wBAAwB,CAAC;AAMhC,MAAM,WAAW,mBAAoB,SAAQ,SAAS;IACpD,IAAI,EAAE,cAAc,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;IACjD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,iBAAiB,CAAC,EAAE,SAAS,0BAA0B,EAAE,CAAC;IAC1D,kBAAkB,CAAC,EAAE,IAAI,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;CAC5C;AA0iBD,eAAO,MAAM,cAAc,mQAthBxB,mBAAmB,6CAshBwE,CAAC"}

package/dist/canvas/components/StickyNoteNode/StickyNoteNode.js

@@ -18,12 +18,12 @@ import { FormattingToolbar } from "./FormattingToolbar.js";
 import { activeFormatsEqual, continueListOnEnter, detectActiveFormats } from "./markdown-formatting/index.js";
 import { BottomCornerIndicators, ColorOption, ColorPickerPanel, RESIZE_CONTROL_Z_INDEX, ResizeHandle, StickyNoteContainer, StickyNoteMarkdown, StickyNoteTextArea, StickyNoteWrapper, TopCornerIndicators, stickyNoteGlobalStyles } from "./StickyNoteNode.styles.js";
 import { STICKY_NOTE_COLORS, withAlpha } from "./StickyNoteNode.types.js";
-import { preserveNewlines } from "./StickyNoteNode.utils.js";
+import { preserveNewlines, readTextSelection } from "./StickyNoteNode.utils.js";
 import { useMarkdownShortcuts } from "./useMarkdownShortcuts.js";
 import { useScrollCapture } from "./useScrollCapture.js";
 const minWidth = 8 * GRID_SPACING;
 const minHeight = 8 * GRID_SPACING;
-const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = 'Add text', renderPlaceholderOnSelect = false, readOnly = false, onContentChange, onColorChange, onResize, onResizeStart, onResizeEnd })=>{
+const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = 'Add text', renderPlaceholderOnSelect = false, readOnly = false, onContentChange, onColorChange, onResize, onResizeStart, onResizeEnd, formattingActions, markdownComponents: customMarkdownComponents })=>{
     const { _ } = useSafeLingui();
     const { updateNodeData, deleteElements } = useReactFlow();
     const { multipleNodesSelected } = useSelectionState();
@@ -31,7 +31,9 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
     const [isResizing, setIsResizing] = useState(false);
     const [isColorPickerOpen, setIsColorPickerOpen] = useState(false);
     const [localContent, setLocalContent] = useState(data.content || '');
+    const latestContentRef = useRef(localContent);
     const textAreaRef = useRef(null);
+    const formattingToolbarRef = useRef(null);
     const skipBlurRef = useRef(null);
     const { ref: markdownRef, scrollCaptureProps } = useScrollCapture();
     const colorButtonRef = useRef(null);
@@ -45,10 +47,15 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
     const colorKey = data.color || 'yellow';
     const color = STICKY_NOTE_COLORS[colorKey] ?? STICKY_NOTE_COLORS.yellow;
     const colorWithAlpha = withAlpha(color);
+    const updateLocalContent = useCallback((content)=>{
+        latestContentRef.current = content;
+        setLocalContent(content);
+    }, []);
     useEffect(()=>{
-        setLocalContent(data.content || '');
+        updateLocalContent(data.content || '');
     }, [
-        data.content
+        data.content,
+        updateLocalContent
     ]);
     useEffect(()=>{
         if (isEditing && textAreaRef.current) {
@@ -76,11 +83,12 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
     useEffect(()=>{
         if (readOnly) {
             setIsEditing(false);
-            setLocalContent(data.content || '');
+            updateLocalContent(data.content || '');
         }
     }, [
         readOnly,
-        data.content
+        data.content,
+        updateLocalContent
     ]);
     const handleDoubleClick = useCallback(()=>{
         if (readOnly || isEditing) return;
@@ -95,7 +103,9 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
         isEditing,
         readOnly
     ]);
-    const handleBlur = useCallback(()=>{
+    const handleBlur = useCallback((event)=>{
+        const nextTarget = event.relatedTarget;
+        if (nextTarget instanceof Node && (textAreaRef.current?.contains(nextTarget) || formattingToolbarRef.current?.contains(nextTarget))) return;
         setIsEditing(false);
         if (readOnly) return;
         const content = textAreaRef.current?.value ?? localContent;
@@ -119,10 +129,12 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
     ]);
     const handleChange = useCallback((e)=>{
         skipBlurRef.current = null;
-        setLocalContent(e.target.value);
-    }, []);
+        updateLocalContent(e.target.value);
+    }, [
+        updateLocalContent
+    ]);
     const handleFormat = useCallback((result)=>{
-        setLocalContent(result.value);
+        updateLocalContent(result.value);
         setActiveFormats(detectActiveFormats(result));
         requestAnimationFrame(()=>{
             if (textAreaRef.current) {
@@ -130,7 +142,68 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
                 textAreaRef.current.selectionEnd = result.selectionEnd;
             }
         });
-    }, []);
+    }, [
+        updateLocalContent
+    ]);
+    const handleFormattingAction = useCallback((action, anchorRect)=>{
+        const textarea = textAreaRef.current;
+        if (!textarea) return;
+        const selection = readTextSelection(textarea);
+        skipBlurRef.current = selection.value;
+        let completed = false;
+        const restoreSelection = (next)=>{
+            setIsEditing(true);
+            requestAnimationFrame(()=>{
+                const currentTextarea = textAreaRef.current;
+                if (!currentTextarea) return;
+                const length = next.value.length;
+                currentTextarea.focus();
+                currentTextarea.selectionStart = Math.max(0, Math.min(length, next.selectionStart));
+                currentTextarea.selectionEnd = Math.max(0, Math.min(length, next.selectionEnd));
+            });
+        };
+        const complete = (next, shouldPersist)=>{
+            if (completed) return;
+            completed = true;
+            skipBlurRef.current = shouldPersist ? next.value : null;
+            setActiveFormats(detectActiveFormats(next));
+            if (shouldPersist) {
+                updateLocalContent(next.value);
+                onContentChange?.(next.value);
+                updateNodeData(id, {
+                    content: next.value
+                });
+            }
+            restoreSelection(next);
+        };
+        try {
+            action.onAction({
+                selection,
+                anchorRect,
+                currentValue: ()=>textAreaRef.current?.value ?? latestContentRef.current,
+                commit: (next)=>complete(next, true),
+                resume: ()=>{
+                    const currentValue = textAreaRef.current?.value ?? latestContentRef.current;
+                    complete({
+                        ...selection,
+                        value: currentValue
+                    }, false);
+                }
+            });
+        } catch (error) {
+            if (!completed) {
+                completed = true;
+                skipBlurRef.current = null;
+                restoreSelection(selection);
+            }
+            throw error;
+        }
+    }, [
+        id,
+        onContentChange,
+        updateLocalContent,
+        updateNodeData
+    ]);
     const updateActiveFormats = useCallback(()=>{
         if (!textAreaRef.current) return;
         const next = detectActiveFormats({
@@ -145,7 +218,7 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
         if ('Escape' === e.key) {
             skipBlurRef.current = textAreaRef.current?.value ?? localContent;
             setIsEditing(false);
-            setLocalContent(data.content || '');
+            updateLocalContent(data.content || '');
             textAreaRef.current?.blur();
             return;
         }
@@ -169,7 +242,8 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
         data.content,
         localContent,
         shortcutKeyDown,
-        handleFormat
+        handleFormat,
+        updateLocalContent
     ]);
     const handleResizeStart = useCallback(()=>{
         if (isEditing) {
@@ -243,8 +317,8 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
         id,
         deleteElements
     ]);
-    const markdownComponents = useMemo(()=>({
-            a: ({ href, children, ...props })=>/*#__PURE__*/ jsx("a", {
+    const builtInMarkdownComponents = useMemo(()=>({
+            a: ({ node: _node, href, children, ...props })=>/*#__PURE__*/ jsx("a", {
                     ...props,
                     href: href,
                     target: "_blank",
@@ -258,6 +332,13 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
                     children: children
                 })
         }), []);
+    const markdownComponents = useMemo(()=>({
+            ...customMarkdownComponents,
+            ...builtInMarkdownComponents
+        }), [
+        builtInMarkdownComponents,
+        customMarkdownComponents
+    ]);
     const toolbarConfig = useMemo(()=>{
         const actions = [
             {
@@ -413,12 +494,6 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
                             }),
                             isEditing ? /*#__PURE__*/ jsxs(Fragment, {
                                 children: [
-                                    /*#__PURE__*/ jsx(FormattingToolbar, {
-                                        textAreaRef: textAreaRef,
-                                        borderColor: color,
-                                        activeFormats: activeFormats,
-                                        onFormat: handleFormat
-                                    }),
                                     /*#__PURE__*/ jsx(StickyNoteTextArea, {
                                         ref: textAreaRef,
                                         value: localContent,
@@ -430,6 +505,16 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
                                         placeholder: placeholder,
                                         isEditing: isEditing,
                                         className: "nodrag nowheel"
+                                    }),
+                                    /*#__PURE__*/ jsx(FormattingToolbar, {
+                                        containerRef: formattingToolbarRef,
+                                        textAreaRef: textAreaRef,
+                                        borderColor: color,
+                                        activeFormats: activeFormats,
+                                        onFormat: handleFormat,
+                                        onBlur: handleBlur,
+                                        actions: formattingActions,
+                                        onAction: handleFormattingAction
                                     })
                                 ]
                             }) : /*#__PURE__*/ jsx(StickyNoteMarkdown, {

package/dist/canvas/components/StickyNoteNode/StickyNoteNode.styles.cjs

@@ -372,6 +372,7 @@ const ColorOption = styled_default().button`
   }
 `;
 const FormattingToolbarContainer = styled_default().div`
+  order: -1;
   display: flex;
   align-items: center;
   gap: 1px;

package/dist/canvas/components/StickyNoteNode/StickyNoteNode.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StickyNoteNode.styles.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StickyNoteNode/StickyNoteNode.styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,8BAA8B,MAAM,CAAC;AA4BlD,eAAO,MAAM,sBAAsB,MAAM,CAAC;AAE1C,eAAO,MAAM,sBAAsB,2CAOlC,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;yGAI7B,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;;iBACjB,MAAM;qBACF,MAAM;eACZ,OAAO;eACP,OAAO;iBACL,OAAO;yGAuBrB,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;;eAAgC,OAAO;2HAsBrE,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;yGA8H9B,CAAC;AAEF,eAAO,MAAM,YAAY;;;;eAA2B,OAAO;aAAW,MAAM;yGAW3E,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;;cAA0B,OAAO;yGA+BhE,CAAC;AAEF,eAAO,MAAM,sBAAsB;;;;cAA0B,OAAO;yGA+BnE,CAAC;AAEF,eAAO,MAAM,gBAAgB;;UAa5B,CAAC;AAEF,eAAO,MAAM,WAAW;;;;WAA0B,MAAM;gBAAc,OAAO;qHAkB5E,CAAC;AAEF,eAAO,MAAM,0BAA0B;;;;iBAA6B,MAAM;yGAQzE,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;cAA6B,OAAO;qHAoBhE,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;yGAK5B,CAAC"}
+{"version":3,"file":"StickyNoteNode.styles.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StickyNoteNode/StickyNoteNode.styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,8BAA8B,MAAM,CAAC;AA4BlD,eAAO,MAAM,sBAAsB,MAAM,CAAC;AAE1C,eAAO,MAAM,sBAAsB,2CAOlC,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;yGAI7B,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;;iBACjB,MAAM;qBACF,MAAM;eACZ,OAAO;eACP,OAAO;iBACL,OAAO;yGAuBrB,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;;eAAgC,OAAO;2HAsBrE,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;yGA8H9B,CAAC;AAEF,eAAO,MAAM,YAAY;;;;eAA2B,OAAO;aAAW,MAAM;yGAW3E,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;;cAA0B,OAAO;yGA+BhE,CAAC;AAEF,eAAO,MAAM,sBAAsB;;;;cAA0B,OAAO;yGA+BnE,CAAC;AAEF,eAAO,MAAM,gBAAgB;;UAa5B,CAAC;AAEF,eAAO,MAAM,WAAW;;;;WAA0B,MAAM;gBAAc,OAAO;qHAkB5E,CAAC;AAEF,eAAO,MAAM,0BAA0B;;;;iBAA6B,MAAM;yGASzE,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;cAA6B,OAAO;qHAoBhE,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;yGAK5B,CAAC"}

package/dist/canvas/components/StickyNoteNode/StickyNoteNode.styles.js

@@ -320,6 +320,7 @@ const ColorOption = styled.button`
   }
 `;
 const FormattingToolbarContainer = styled.div`
+  order: -1;
   display: flex;
   align-items: center;
   gap: 1px;

package/dist/canvas/components/StickyNoteNode/StickyNoteNode.types.d.ts

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react';
 export declare const STICKY_NOTE_COLORS: {
     readonly blue: "#42A1FF";
     readonly green: "#6EB84A";
@@ -17,5 +18,19 @@ export type TextSelection = {
     selectionStart: number;
     selectionEnd: number;
 };
+export interface StickyNoteEditorActionContext {
+    selection: TextSelection;
+    anchorRect: DOMRectReadOnly;
+    currentValue(): string;
+    commit(next: TextSelection): void;
+    resume(): void;
+}
+export interface StickyNoteFormattingAction {
+    id: string;
+    icon: ReactNode;
+    label: string;
+    disabled?: boolean;
+    onAction(context: StickyNoteEditorActionContext): void;
+}
 export type FormattingAction = 'bold' | 'italic' | 'strikethrough' | 'bulletList' | 'numberedList';
 //# sourceMappingURL=StickyNoteNode.types.d.ts.map

package/dist/canvas/components/StickyNoteNode/StickyNoteNode.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StickyNoteNode.types.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StickyNoteNode/StickyNoteNode.types.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,kBAAkB;;;;;;CAMrB,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,kBAAkB,CAAC;AAE9D,MAAM,WAAW,cAAe,SAAQ,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAC7D,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAWD,wBAAgB,SAAS,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,GAAE,MAA6B,GAAG,MAAM,CAyBnF;AAGD,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,EAAE,MAAM,CAAC;IACvB,YAAY,EAAE,MAAM,CAAC;CACtB,CAAC;AAGF,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,QAAQ,GAAG,eAAe,GAAG,YAAY,GAAG,cAAc,CAAC"}
+{"version":3,"file":"StickyNoteNode.types.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StickyNoteNode/StickyNoteNode.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMvC,eAAO,MAAM,kBAAkB;;;;;;CAMrB,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,kBAAkB,CAAC;AAE9D,MAAM,WAAW,cAAe,SAAQ,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAC7D,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAWD,wBAAgB,SAAS,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,GAAE,MAA6B,GAAG,MAAM,CAyBnF;AAGD,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,EAAE,MAAM,CAAC;IACvB,YAAY,EAAE,MAAM,CAAC;CACtB,CAAC;AAGF,MAAM,WAAW,6BAA6B;IAE5C,SAAS,EAAE,aAAa,CAAC;IAEzB,UAAU,EAAE,eAAe,CAAC;IAE5B,YAAY,IAAI,MAAM,CAAC;IAEvB,MAAM,CAAC,IAAI,EAAE,aAAa,GAAG,IAAI,CAAC;IAElC,MAAM,IAAI,IAAI,CAAC;CAChB;AAGD,MAAM,WAAW,0BAA0B;IACzC,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,SAAS,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,OAAO,EAAE,6BAA6B,GAAG,IAAI,CAAC;CACxD;AAGD,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,QAAQ,GAAG,eAAe,GAAG,YAAY,GAAG,cAAc,CAAC"}

package/dist/canvas/components/StickyNoteNode/StickyNoteNode.utils.cjs

@@ -26,8 +26,14 @@ __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
     getModifierKey: ()=>getModifierKey,
     isMac: ()=>isMac,
-    preserveNewlines: ()=>preserveNewlines
+    preserveNewlines: ()=>preserveNewlines,
+    readTextSelection: ()=>readTextSelection
 });
+const readTextSelection = (textarea)=>({
+        value: textarea.value,
+        selectionStart: textarea.selectionStart,
+        selectionEnd: textarea.selectionEnd
+    });
 const preserveNewlines = (markdown)=>{
     const codeBlocks = [];
     let result = markdown.replace(/```[\s\S]*?```/g, (m)=>{
@@ -46,10 +52,12 @@ const getModifierKey = ()=>isMac() ? '⌘' : 'Ctrl';
 exports.getModifierKey = __webpack_exports__.getModifierKey;
 exports.isMac = __webpack_exports__.isMac;
 exports.preserveNewlines = __webpack_exports__.preserveNewlines;
+exports.readTextSelection = __webpack_exports__.readTextSelection;
 for(var __rspack_i in __webpack_exports__)if (-1 === [
     "getModifierKey",
     "isMac",
-    "preserveNewlines"
+    "preserveNewlines",
+    "readTextSelection"
 ].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
 Object.defineProperty(exports, '__esModule', {
     value: true

package/dist/canvas/components/StickyNoteNode/StickyNoteNode.utils.d.ts

@@ -1,3 +1,5 @@
+import type { TextSelection } from './StickyNoteNode.types';
+export declare const readTextSelection: (textarea: HTMLTextAreaElement) => TextSelection;
 export declare const preserveNewlines: (markdown: string) => string;
 export declare const isMac: () => boolean;
 export declare const getModifierKey: () => string;

package/dist/canvas/components/StickyNoteNode/StickyNoteNode.utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StickyNoteNode.utils.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StickyNoteNode/StickyNoteNode.utils.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,gBAAgB,GAAI,UAAU,MAAM,KAAG,MAqBnD,CAAC;AAOF,eAAO,MAAM,KAAK,QAAO,OAExB,CAAC;AAOF,eAAO,MAAM,cAAc,QAAO,MAEjC,CAAC"}
+{"version":3,"file":"StickyNoteNode.utils.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StickyNoteNode/StickyNoteNode.utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAG5D,eAAO,MAAM,iBAAiB,GAAI,UAAU,mBAAmB,KAAG,aAIhE,CAAC;AAIH,eAAO,MAAM,gBAAgB,GAAI,UAAU,MAAM,KAAG,MAqBnD,CAAC;AAOF,eAAO,MAAM,KAAK,QAAO,OAExB,CAAC;AAOF,eAAO,MAAM,cAAc,QAAO,MAEjC,CAAC"}

package/dist/canvas/components/StickyNoteNode/StickyNoteNode.utils.js

@@ -1,3 +1,8 @@
+const readTextSelection = (textarea)=>({
+        value: textarea.value,
+        selectionStart: textarea.selectionStart,
+        selectionEnd: textarea.selectionEnd
+    });
 const preserveNewlines = (markdown)=>{
     const codeBlocks = [];
     let result = markdown.replace(/```[\s\S]*?```/g, (m)=>{
@@ -13,4 +18,4 @@ const preserveNewlines = (markdown)=>{
 };
 const isMac = ()=>"u" > typeof navigator && navigator.platform.includes('Mac');
 const getModifierKey = ()=>isMac() ? '⌘' : 'Ctrl';
-export { getModifierKey, isMac, preserveNewlines };
+export { getModifierKey, isMac, preserveNewlines, readTextSelection };

package/dist/canvas/utils/createPreviewNode.cjs

@@ -229,8 +229,8 @@ function applyPreviewToReactFlow(preview, reactFlowInstance) {
     }, 0);
 }
 function removePreviewFromReactFlow(reactFlowInstance) {
-    reactFlowInstance.setNodes((nodes)=>nodes.filter((n)=>n.id !== external_constants_cjs_namespaceObject.PREVIEW_NODE_ID));
-    reactFlowInstance.setEdges((edges)=>edges.filter((edge)=>!isPreviewEdge(edge)));
+    if (reactFlowInstance.getNodes().some((n)=>n.id === external_constants_cjs_namespaceObject.PREVIEW_NODE_ID)) reactFlowInstance.setNodes((nodes)=>nodes.filter((n)=>n.id !== external_constants_cjs_namespaceObject.PREVIEW_NODE_ID));
+    if (reactFlowInstance.getEdges().some((edge)=>isPreviewEdge(edge))) reactFlowInstance.setEdges((edges)=>edges.filter((edge)=>!isPreviewEdge(edge)));
 }
 exports.PREVIEW_EDGE_STYLE = __webpack_exports__.PREVIEW_EDGE_STYLE;
 exports.applyPreviewToReactFlow = __webpack_exports__.applyPreviewToReactFlow;

package/dist/canvas/utils/createPreviewNode.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createPreviewNode.d.ts","sourceRoot":"","sources":["../../../src/canvas/utils/createPreviewNode.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,IAAI,EACT,KAAK,IAAI,EACT,QAAQ,EACR,KAAK,iBAAiB,EACvB,MAAM,0CAA0C,CAAC;AAGlD,OAAO,EAGL,KAAK,sBAAsB,EAG5B,MAAM,aAAa,CAAC;AAErB,MAAM,MAAM,uBAAuB,GAAG,MAAM,GAAG,QAAQ,CAAC;AAExD,eAAO,MAAM,kBAAkB,EAAE,IAAI,CAAC,OAAO,CAK5C,CAAC;AAEF,wBAAgB,aAAa,CAAC,IAAI,EAAE;IAAE,EAAE,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,OAAO,CAM9F;AAMD,wBAAgB,mBAAmB,CAAC,QAAQ,EAAE,QAAQ,GAAG,QAAQ,CAahE;AAqLD,MAAM,WAAW,wBAAwB;IAEvC,YAAY,EAAE,MAAM,CAAC;IAErB,cAAc,EAAE,MAAM,CAAC;IAEvB,iBAAiB,EAAE,iBAAiB,CAAC;IAMrC,QAAQ,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAEpC,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAM/B,gBAAgB,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAKvC,eAAe,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IAEpD,cAAc,CAAC,EAAE,QAAQ,CAAC;IAE1B,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC;IAM5B,YAAY,CAAC,EAAE,uBAAuB,CAAC;IAOvC,gBAAgB,CAAC,EAAE,sBAAsB,CAAC;CAC3C;AAOD,wBAAgB,iBAAiB,CAC/B,OAAO,EAAE,wBAAwB,GAChC;IAAE,IAAI,EAAE,IAAI,CAAC;IAAC,IAAI,EAAE,IAAI,CAAA;CAAE,GAAG,IAAI,CAwGnC;AAMD,wBAAgB,uBAAuB,CACrC,OAAO,EAAE;IAAE,IAAI,EAAE,IAAI,CAAC;IAAC,IAAI,EAAE,IAAI,CAAA;CAAE,EACnC,iBAAiB,EAAE,iBAAiB,GACnC,IAAI,CAcN;AAKD,wBAAgB,0BAA0B,CAAC,iBAAiB,EAAE,iBAAiB,GAAG,IAAI,CAGrF"}
+{"version":3,"file":"createPreviewNode.d.ts","sourceRoot":"","sources":["../../../src/canvas/utils/createPreviewNode.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,IAAI,EACT,KAAK,IAAI,EACT,QAAQ,EACR,KAAK,iBAAiB,EACvB,MAAM,0CAA0C,CAAC;AAGlD,OAAO,EAGL,KAAK,sBAAsB,EAG5B,MAAM,aAAa,CAAC;AAErB,MAAM,MAAM,uBAAuB,GAAG,MAAM,GAAG,QAAQ,CAAC;AAExD,eAAO,MAAM,kBAAkB,EAAE,IAAI,CAAC,OAAO,CAK5C,CAAC;AAEF,wBAAgB,aAAa,CAAC,IAAI,EAAE;IAAE,EAAE,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,OAAO,CAM9F;AAMD,wBAAgB,mBAAmB,CAAC,QAAQ,EAAE,QAAQ,GAAG,QAAQ,CAahE;AAqLD,MAAM,WAAW,wBAAwB;IAEvC,YAAY,EAAE,MAAM,CAAC;IAErB,cAAc,EAAE,MAAM,CAAC;IAEvB,iBAAiB,EAAE,iBAAiB,CAAC;IAMrC,QAAQ,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAEpC,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAM/B,gBAAgB,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAKvC,eAAe,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IAEpD,cAAc,CAAC,EAAE,QAAQ,CAAC;IAE1B,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC;IAM5B,YAAY,CAAC,EAAE,uBAAuB,CAAC;IAOvC,gBAAgB,CAAC,EAAE,sBAAsB,CAAC;CAC3C;AAOD,wBAAgB,iBAAiB,CAC/B,OAAO,EAAE,wBAAwB,GAChC;IAAE,IAAI,EAAE,IAAI,CAAC;IAAC,IAAI,EAAE,IAAI,CAAA;CAAE,GAAG,IAAI,CAwGnC;AAMD,wBAAgB,uBAAuB,CACrC,OAAO,EAAE;IAAE,IAAI,EAAE,IAAI,CAAC;IAAC,IAAI,EAAE,IAAI,CAAA;CAAE,EACnC,iBAAiB,EAAE,iBAAiB,GACnC,IAAI,CAcN;AAKD,wBAAgB,0BAA0B,CAAC,iBAAiB,EAAE,iBAAiB,GAAG,IAAI,CAOrF"}

package/dist/canvas/utils/createPreviewNode.js

@@ -196,7 +196,7 @@ function applyPreviewToReactFlow(preview, reactFlowInstance) {
     }, 0);
 }
 function removePreviewFromReactFlow(reactFlowInstance) {
-    reactFlowInstance.setNodes((nodes)=>nodes.filter((n)=>n.id !== PREVIEW_NODE_ID));
-    reactFlowInstance.setEdges((edges)=>edges.filter((edge)=>!isPreviewEdge(edge)));
+    if (reactFlowInstance.getNodes().some((n)=>n.id === PREVIEW_NODE_ID)) reactFlowInstance.setNodes((nodes)=>nodes.filter((n)=>n.id !== PREVIEW_NODE_ID));
+    if (reactFlowInstance.getEdges().some((edge)=>isPreviewEdge(edge))) reactFlowInstance.setEdges((edges)=>edges.filter((edge)=>!isPreviewEdge(edge)));
 }
 export { PREVIEW_EDGE_STYLE, applyPreviewToReactFlow, createPreviewNode, getOppositePosition, isPreviewEdge, removePreviewFromReactFlow };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uipath/apollo-react",
-  "version": "4.61.1",
+  "version": "4.62.1",
   "description": "Apollo Design System - React component library with Material UI theming",
   "repository": {
     "type": "git",