npm - @uipath/apollo-react - Versions diffs - 4.61.0 → 4.62.0 - Mend

@uipath/apollo-react 4.61.0 → 4.62.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (25) hide show

package/dist/canvas/components/BaseNode/BaseNode.cjs CHANGED Viewed

@@ -57,7 +57,7 @@ const getContainerWidth = (shape, width)=>{
     if (width && width !== external_constants_cjs_namespaceObject.DEFAULT_NODE_SIZE && width !== external_constants_cjs_namespaceObject.DEFAULT_RECTANGLE_NODE_WIDTH) return width;
     return defaultWidth;
 };
-const getContainerHeight = (height, hasFooter, footerVariant)=>{
+const getIntrinsicHeight = (hasFooter, footerVariant)=>{
     if (hasFooter) switch(footerVariant){
         case 'button':
             return external_constants_cjs_namespaceObject.NODE_HEIGHT_FOOTER_BUTTON;
@@ -65,22 +65,17 @@ const getContainerHeight = (height, hasFooter, footerVariant)=>{
             return external_constants_cjs_namespaceObject.NODE_HEIGHT_FOOTER_SINGLE;
         case 'double':
             return external_constants_cjs_namespaceObject.NODE_HEIGHT_FOOTER_DOUBLE;
-        default:
-            return 'auto';
     }
-    return height || external_constants_cjs_namespaceObject.NODE_HEIGHT_DEFAULT;
+    return external_constants_cjs_namespaceObject.NODE_HEIGHT_DEFAULT;
 };
 const BaseNodeComponent = (props)=>{
-    const { type, data, selected, id, dragging, width, height, parentId } = props;
+    const { type, data, selected, id, dragging, width, parentId } = props;
     const { onHandleAction: onHandleActionProp, onHandleMouseEnter: onHandleMouseEnterProp, onHandleMouseLeave: onHandleMouseLeaveProp, onActionNeeded, shouldShowAddButtonFn: shouldShowAddButtonFnProp, shouldShowButtonHandleNotchesFn: shouldShowButtonHandleNotchesFnProp, toolbarConfig: toolbarConfigProp, handleConfigurations: handleConfigurationsProp, adornments: adornmentsProp, suggestionType, disabled, executionStatusOverride, labelTooltip, labelBackgroundColor, footerVariant, footerComponent, subLabelComponent, iconComponent } = (0, external_BaseNodeConfigContext_cjs_namespaceObject.useBaseNodeOverrideConfig)();
     const updateNodeInternals = (0, react_cjs_namespaceObject.useUpdateNodeInternals)();
-    const { updateNodeData, updateNode } = (0, react_cjs_namespaceObject.useReactFlow)();
+    const { updateNodeData, updateNode, getNode } = (0, react_cjs_namespaceObject.useReactFlow)();
     const containerRef = (0, external_react_namespaceObject.useRef)(null);
     const [isHovered, setIsHovered] = (0, external_react_namespaceObject.useState)(false);
     const [isFocused, setIsFocused] = (0, external_react_namespaceObject.useState)(false);
-    const syncedHeightRef = (0, external_react_namespaceObject.useRef)(void 0);
-    const baseHeightRef = (0, external_react_namespaceObject.useRef)(external_constants_cjs_namespaceObject.DEFAULT_NODE_SIZE);
-    if (height && height !== syncedHeightRef.current) baseHeightRef.current = height;
     const executionState = (0, external_hooks_index_cjs_namespaceObject.useNodeExecutionState)(id);
     const validationState = (0, external_hooks_index_cjs_namespaceObject.useElementValidationStatus)(id);
     const nodeTypeRegistry = (0, index_cjs_namespaceObject.useNodeTypeRegistry)();
@@ -191,36 +186,23 @@ const BaseNodeComponent = (props)=>{
         const leftHandles = handleConfigurations.filter((config)=>config.position === react_cjs_namespaceObject.Position.Left && false !== config.visible).reduce((count, config)=>count + config.handles.filter((h)=>false !== h.visible).length, 0);
         const rightHandles = handleConfigurations.filter((config)=>config.position === react_cjs_namespaceObject.Position.Right && false !== config.visible).reduce((count, config)=>count + config.handles.filter((h)=>false !== h.visible).length, 0);
         const leftRightHandles = Math.max(leftHandles, rightHandles);
-        const minNodeHeight = (2 * leftRightHandles + 2) * external_constants_cjs_namespaceObject.GRID_SPACING;
-        return Math.max(baseHeightRef.current, minNodeHeight);
+        const handleFloor = (2 * leftRightHandles + 2) * external_constants_cjs_namespaceObject.GRID_SPACING;
+        return Math.max(getIntrinsicHeight(!!footerComponent, footerVariant), handleFloor);
     }, [
         handleConfigurations,
-        height
+        footerComponent,
+        footerVariant
     ]);
     (0, external_react_namespaceObject.useEffect)(()=>{
+        if (getNode(id)?.height !== computedHeight) updateNode(id, {
+            height: computedHeight
+        });
         updateNodeInternals(id);
     }, [
         handleConfigurations,
-        id,
-        updateNodeInternals
-    ]);
-    (0, external_react_namespaceObject.useEffect)(()=>{
-        if (void 0 !== computedHeight && computedHeight !== height) {
-            syncedHeightRef.current = computedHeight;
-            const frameId = requestAnimationFrame(()=>{
-                updateNode(id, {
-                    height: computedHeight
-                });
-                updateNodeInternals(id);
-            });
-            return ()=>{
-                cancelAnimationFrame(frameId);
-            };
-        }
-    }, [
         computedHeight,
-        height,
         id,
+        getNode,
         updateNode,
         updateNodeInternals
     ]);
@@ -232,7 +214,6 @@ const BaseNodeComponent = (props)=>{
     const displayIconBackground = isDarkMode ? display.iconBackgroundDark ?? display.iconBackground : display.iconBackground;
     const displayLabelTooltip = labelTooltip;
     const displayLabelBackgroundColor = labelBackgroundColor;
-    const displayFooterVariant = footerVariant;
     const displaySubLabel = (0, external_react_namespaceObject.useMemo)(()=>{
         if (void 0 !== subLabelComponent) return subLabelComponent;
         return display.subLabel;
@@ -243,9 +224,9 @@ const BaseNodeComponent = (props)=>{
     const displayFooter = footerComponent;
     const hasFooter = !!displayFooter;
     const containerWidth = getContainerWidth(displayShape, width);
-    const containerHeight = getContainerHeight(height, hasFooter, displayFooterVariant);
+    const containerHeight = computedHeight;
     const nodeVars = (0, external_react_namespaceObject.useMemo)(()=>{
-        const numH = 'number' == typeof containerHeight ? containerHeight : external_constants_cjs_namespaceObject.DEFAULT_NODE_SIZE;
+        const numH = containerHeight;
         const getRadius = (basis, ratio)=>'circle' === displayShape ? '50%' : hasFooter ? `${external_constants_cjs_namespaceObject.GRID_SPACING}px` : `${basis * ratio}px`;
         const radiusBasis = Math.min(containerWidth, numH);
         const nodeRadius = getRadius(radiusBasis, external_constants_cjs_namespaceObject.NODE_CONTAINER_RADIUS_RATIO);
@@ -259,7 +240,7 @@ const BaseNodeComponent = (props)=>{
         const innerH = keepSquare ? innerBasis - gap : effectiveH - gap;
         return {
             '--node-w': `${containerWidth}px`,
-            '--node-h': 'number' == typeof containerHeight ? `${containerHeight}px` : 'auto',
+            '--node-h': `${containerHeight}px`,
             '--node-radius': nodeRadius,
             '--node-gap': `${(gap - 2 * external_constants_cjs_namespaceObject.NODE_BORDER_SIZE) / 2}px`,
             '--inner-w': `${innerW}px`,
@@ -391,8 +372,8 @@ const BaseNodeComponent = (props)=>{
         hovered: isHovered,
         showAddButton: 'design' === mode && !multipleNodesSelected && !isConnecting && !dragging,
         showNotches,
-        nodeWidth: width,
-        nodeHeight: height,
+        nodeWidth: containerWidth,
+        nodeHeight: computedHeight,
         shouldShowAddButtonFn,
         portalActions: !!parentId
     });
@@ -413,8 +394,8 @@ const BaseNodeComponent = (props)=>{
                     id: handle.id,
                     defaultPosition: defaultPosition,
                     handleType: handleVisualType,
-                    nodeWidth: width,
-                    nodeHeight: height,
+                    nodeWidth: containerWidth,
+                    nodeHeight: computedHeight,
                     label: handle.label,
                     showButton: shouldShowButton,
                     selected: selected,
@@ -429,8 +410,8 @@ const BaseNodeComponent = (props)=>{
         useSmartHandles,
         handleConfigurations,
         shouldShowHandles,
-        width,
-        height,
+        containerWidth,
+        computedHeight,
         mode,
         selected,
         showNotches,
@@ -560,8 +541,8 @@ const BaseNodeComponent = (props)=>{
         ]
     });
     if (useSmartHandles) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(SmartHandle_cjs_namespaceObject.SmartHandleProvider, {
-        nodeWidth: width,
-        nodeHeight: height,
+        nodeWidth: containerWidth,
+        nodeHeight: computedHeight,
         children: nodeContent
     });
     return nodeContent;

package/dist/canvas/components/BaseNode/BaseNode.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BaseNode.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseNode/BaseNode.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,0CAA0C,CAAC;AA4ChF,OAAO,KAAK,EACV,YAAY,EAIb,MAAM,kBAAkB,CAAC;~~AA0sB1B~~,eAAO,MAAM,QAAQ,~~8CApqBa~~,SAAS,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,~~6CAoqBmB~~,CAAC"}
1	+ {"version":3,"file":"BaseNode.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseNode/BaseNode.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,0CAA0C,CAAC;AA4ChF,OAAO,KAAK,EACV,YAAY,EAIb,MAAM,kBAAkB,CAAC;AAkrB1B,eAAO,MAAM,QAAQ,8CAhpBa,SAAS,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,6CAgpBmB,CAAC"}

package/dist/canvas/components/BaseNode/BaseNode.js CHANGED Viewed

@@ -29,7 +29,7 @@ const getContainerWidth = (shape, width)=>{
     if (width && width !== DEFAULT_NODE_SIZE && width !== DEFAULT_RECTANGLE_NODE_WIDTH) return width;
     return defaultWidth;
 };
-const getContainerHeight = (height, hasFooter, footerVariant)=>{
+const getIntrinsicHeight = (hasFooter, footerVariant)=>{
     if (hasFooter) switch(footerVariant){
         case 'button':
             return NODE_HEIGHT_FOOTER_BUTTON;
@@ -37,22 +37,17 @@ const getContainerHeight = (height, hasFooter, footerVariant)=>{
             return NODE_HEIGHT_FOOTER_SINGLE;
         case 'double':
             return NODE_HEIGHT_FOOTER_DOUBLE;
-        default:
-            return 'auto';
     }
-    return height || NODE_HEIGHT_DEFAULT;
+    return NODE_HEIGHT_DEFAULT;
 };
 const BaseNodeComponent = (props)=>{
-    const { type, data, selected, id, dragging, width, height, parentId } = props;
+    const { type, data, selected, id, dragging, width, parentId } = props;
     const { onHandleAction: onHandleActionProp, onHandleMouseEnter: onHandleMouseEnterProp, onHandleMouseLeave: onHandleMouseLeaveProp, onActionNeeded, shouldShowAddButtonFn: shouldShowAddButtonFnProp, shouldShowButtonHandleNotchesFn: shouldShowButtonHandleNotchesFnProp, toolbarConfig: toolbarConfigProp, handleConfigurations: handleConfigurationsProp, adornments: adornmentsProp, suggestionType, disabled, executionStatusOverride, labelTooltip, labelBackgroundColor, footerVariant, footerComponent, subLabelComponent, iconComponent } = useBaseNodeOverrideConfig();
     const updateNodeInternals = useUpdateNodeInternals();
-    const { updateNodeData, updateNode } = useReactFlow();
+    const { updateNodeData, updateNode, getNode } = useReactFlow();
     const containerRef = useRef(null);
     const [isHovered, setIsHovered] = useState(false);
     const [isFocused, setIsFocused] = useState(false);
-    const syncedHeightRef = useRef(void 0);
-    const baseHeightRef = useRef(DEFAULT_NODE_SIZE);
-    if (height && height !== syncedHeightRef.current) baseHeightRef.current = height;
     const executionState = useNodeExecutionState(id);
     const validationState = useElementValidationStatus(id);
     const nodeTypeRegistry = useNodeTypeRegistry();
@@ -163,36 +158,23 @@ const BaseNodeComponent = (props)=>{
         const leftHandles = handleConfigurations.filter((config)=>config.position === Position.Left && false !== config.visible).reduce((count, config)=>count + config.handles.filter((h)=>false !== h.visible).length, 0);
         const rightHandles = handleConfigurations.filter((config)=>config.position === Position.Right && false !== config.visible).reduce((count, config)=>count + config.handles.filter((h)=>false !== h.visible).length, 0);
         const leftRightHandles = Math.max(leftHandles, rightHandles);
-        const minNodeHeight = (2 * leftRightHandles + 2) * GRID_SPACING;
-        return Math.max(baseHeightRef.current, minNodeHeight);
+        const handleFloor = (2 * leftRightHandles + 2) * GRID_SPACING;
+        return Math.max(getIntrinsicHeight(!!footerComponent, footerVariant), handleFloor);
     }, [
         handleConfigurations,
-        height
+        footerComponent,
+        footerVariant
     ]);
     useEffect(()=>{
+        if (getNode(id)?.height !== computedHeight) updateNode(id, {
+            height: computedHeight
+        });
         updateNodeInternals(id);
     }, [
         handleConfigurations,
-        id,
-        updateNodeInternals
-    ]);
-    useEffect(()=>{
-        if (void 0 !== computedHeight && computedHeight !== height) {
-            syncedHeightRef.current = computedHeight;
-            const frameId = requestAnimationFrame(()=>{
-                updateNode(id, {
-                    height: computedHeight
-                });
-                updateNodeInternals(id);
-            });
-            return ()=>{
-                cancelAnimationFrame(frameId);
-            };
-        }
-    }, [
         computedHeight,
-        height,
         id,
+        getNode,
         updateNode,
         updateNodeInternals
     ]);
@@ -204,7 +186,6 @@ const BaseNodeComponent = (props)=>{
     const displayIconBackground = isDarkMode ? display.iconBackgroundDark ?? display.iconBackground : display.iconBackground;
     const displayLabelTooltip = labelTooltip;
     const displayLabelBackgroundColor = labelBackgroundColor;
-    const displayFooterVariant = footerVariant;
     const displaySubLabel = useMemo(()=>{
         if (void 0 !== subLabelComponent) return subLabelComponent;
         return display.subLabel;
@@ -215,9 +196,9 @@ const BaseNodeComponent = (props)=>{
     const displayFooter = footerComponent;
     const hasFooter = !!displayFooter;
     const containerWidth = getContainerWidth(displayShape, width);
-    const containerHeight = getContainerHeight(height, hasFooter, displayFooterVariant);
+    const containerHeight = computedHeight;
     const nodeVars = useMemo(()=>{
-        const numH = 'number' == typeof containerHeight ? containerHeight : DEFAULT_NODE_SIZE;
+        const numH = containerHeight;
         const getRadius = (basis, ratio)=>'circle' === displayShape ? '50%' : hasFooter ? `${GRID_SPACING}px` : `${basis * ratio}px`;
         const radiusBasis = Math.min(containerWidth, numH);
         const nodeRadius = getRadius(radiusBasis, NODE_CONTAINER_RADIUS_RATIO);
@@ -231,7 +212,7 @@ const BaseNodeComponent = (props)=>{
         const innerH = keepSquare ? innerBasis - gap : effectiveH - gap;
         return {
             '--node-w': `${containerWidth}px`,
-            '--node-h': 'number' == typeof containerHeight ? `${containerHeight}px` : 'auto',
+            '--node-h': `${containerHeight}px`,
             '--node-radius': nodeRadius,
             '--node-gap': `${(gap - 2 * NODE_BORDER_SIZE) / 2}px`,
             '--inner-w': `${innerW}px`,
@@ -363,8 +344,8 @@ const BaseNodeComponent = (props)=>{
         hovered: isHovered,
         showAddButton: 'design' === mode && !multipleNodesSelected && !isConnecting && !dragging,
         showNotches,
-        nodeWidth: width,
-        nodeHeight: height,
+        nodeWidth: containerWidth,
+        nodeHeight: computedHeight,
         shouldShowAddButtonFn,
         portalActions: !!parentId
     });
@@ -385,8 +366,8 @@ const BaseNodeComponent = (props)=>{
                     id: handle.id,
                     defaultPosition: defaultPosition,
                     handleType: handleVisualType,
-                    nodeWidth: width,
-                    nodeHeight: height,
+                    nodeWidth: containerWidth,
+                    nodeHeight: computedHeight,
                     label: handle.label,
                     showButton: shouldShowButton,
                     selected: selected,
@@ -401,8 +382,8 @@ const BaseNodeComponent = (props)=>{
         useSmartHandles,
         handleConfigurations,
         shouldShowHandles,
-        width,
-        height,
+        containerWidth,
+        computedHeight,
         mode,
         selected,
         showNotches,
@@ -532,8 +513,8 @@ const BaseNodeComponent = (props)=>{
         ]
     });
     if (useSmartHandles) return /*#__PURE__*/ jsx(SmartHandleProvider, {
-        nodeWidth: width,
-        nodeHeight: height,
+        nodeWidth: containerWidth,
+        nodeHeight: computedHeight,
         children: nodeContent
     });
     return nodeContent;

package/dist/canvas/components/BaseNode/BaseNodeConfigContext.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BaseNodeConfigContext.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseNode/BaseNodeConfigContext.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AACxE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,KAAK,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AACxF,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AACpD,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AActE,MAAM,WAAW,sBAAsB;IAErC,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAEpD,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAEvD,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAC;IACvD,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,qBAAqB,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,aAAa,EAAE,OAAO,CAAC;QAAC,QAAQ,EAAE,OAAO,CAAA;KAAE,KAAK,OAAO,CAAC;IACzF,+BAA+B,CAAC,EAAE,CAAC,IAAI,EAAE;QACvC,YAAY,EAAE,OAAO,CAAC;QACtB,UAAU,EAAE,OAAO,CAAC;QACpB,SAAS,EAAE,OAAO,CAAC;KACpB,KAAK,OAAO,CAAC;IAGd,aAAa,CAAC,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACzC,oBAAoB,CAAC,EAAE,mBAAmB,EAAE,CAAC;IAC7C,UAAU,CAAC,EAAE,cAAc,CAAC;IAG5B,cAAc,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uBAAuB,CAAC,EAAE,mBAAmB,CAAC;IAG9C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oBAAoB,CAAC,EAAE,MAAM,CAAC;~~IAC9B~~,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACpC,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACjC;AAMD,eAAO,MAAM,8BAA8B,kDAAyC,CAAC;AAMrF,wBAAgB,yBAAyB,IAAI,sBAAsB,CAElE"}
1	+ {"version":3,"file":"BaseNodeConfigContext.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseNode/BaseNodeConfigContext.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AACxE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,KAAK,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AACxF,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AACpD,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AActE,MAAM,WAAW,sBAAsB;IAErC,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAEpD,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAEvD,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAC;IACvD,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,qBAAqB,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,aAAa,EAAE,OAAO,CAAC;QAAC,QAAQ,EAAE,OAAO,CAAA;KAAE,KAAK,OAAO,CAAC;IACzF,+BAA+B,CAAC,EAAE,CAAC,IAAI,EAAE;QACvC,YAAY,EAAE,OAAO,CAAC;QACtB,UAAU,EAAE,OAAO,CAAC;QACpB,SAAS,EAAE,OAAO,CAAC;KACpB,KAAK,OAAO,CAAC;IAGd,aAAa,CAAC,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACzC,oBAAoB,CAAC,EAAE,mBAAmB,EAAE,CAAC;IAC7C,UAAU,CAAC,EAAE,cAAc,CAAC;IAG5B,cAAc,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uBAAuB,CAAC,EAAE,mBAAmB,CAAC;IAG9C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAE9B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACpC,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACjC;AAMD,eAAO,MAAM,8BAA8B,kDAAyC,CAAC;AAMrF,wBAAgB,yBAAyB,IAAI,sBAAsB,CAElE"}

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
1	+ {"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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
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;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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
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;yGASzE,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;cAA6B,OAAO;qHAoBhE,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;yGAK5B,CAAC"}

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
1	+ {"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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
1	+ {"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 CHANGED Viewed

@@ -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/stores/animatedViewportManager.cjs CHANGED Viewed

@@ -144,8 +144,8 @@ class AnimatedViewportManager {
         const nodeBounds = {
             x: node.position.x,
             y: node.position.y,
-            width: node.width || 200,
-            height: node.height || 100
+            width: node.measured?.width || node.width || 200,
+            height: node.measured?.height || node.height || 100
         };
         const nodeFocusViewport = (0, transitions_cjs_namespaceObject.calculateNodeFocusViewport)(nodeBounds, canvasSize, transitions_cjs_namespaceObject.ANIMATION_CONSTANTS.NODE_FOCUS_PADDING);
         const fromViewport = this.getCurrentViewport();
@@ -206,8 +206,8 @@ class AnimatedViewportManager {
         return {
             x: node.position.x,
             y: node.position.y,
-            width: node.width || 200,
-            height: node.height || 100
+            width: node.measured?.width || node.width || 200,
+            height: node.measured?.height || node.height || 100
         };
     }
     cancelTransition() {

package/dist/canvas/stores/animatedViewportManager.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"animatedViewportManager.d.ts","sourceRoot":"","sources":["../../../src/canvas/stores/animatedViewportManager.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,iBAAiB,EAAE,QAAQ,EAAE,MAAM,0CAA0C,CAAC;AAClG,OAAO,EAOL,KAAK,UAAU,EAEhB,MAAM,sBAAsB,CAAC;AAK9B,MAAM,MAAM,cAAc,GAAG,UAAU,GAAG,WAAW,GAAG,UAAU,GAAG,MAAM,CAAC;AAK5E,MAAM,WAAW,eAAe;IAC9B,eAAe,EAAE,OAAO,CAAC;IACzB,IAAI,EAAE,cAAc,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,CAAC,EAAE,QAAQ,CAAC;IACxB,UAAU,CAAC,EAAE,QAAQ,CAAC;CACvB;AAMD,cAAM,uBAAuB;IAC3B,OAAO,CAAC,iBAAiB,CAAkC;IAC3D,OAAO,CAAC,eAAe,CAAqC;IAC5D,OAAO,CAAC,eAAe,CAKrB;IACF,OAAO,CAAC,mBAAmB,CAAC,CAAS;IAGrC,OAAO,CAAC,iBAAiB,CAAC,CAAiC;IAC3D,OAAO,CAAC,kBAAkB,CAAC,CAAmC;IAC9D,OAAO,CAAC,oBAAoB,CAAC,CAAiC;IAE9D,oBAAoB,CAAC,QAAQ,EAAE,iBAAiB,GAAG,IAAI;IAIvD,oBAAoB,IAAI,iBAAiB,GAAG,IAAI;IAIhD,kBAAkB,CAAC,QAAQ,EAAE,QAAQ;IAIrC,kBAAkB,IAAI,QAAQ;IAU9B,kBAAkB,IAAI,eAAe;IAOrC,eAAe,IAAI,OAAO;IAO1B,sBAAsB,CAAC,SAAS,EAAE;QAChC,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,cAAc,KAAK,IAAI,CAAC;QACzC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;QAC5C,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,cAAc,KAAK,IAAI,CAAC;KAC7C;IASD,OAAO,CAAC,qBAAqB;IAW7B,OAAO,CAAC,eAAe;IA6BvB,OAAO,CAAC,kBAAkB;IAmB1B,OAAO,CAAC,sBAAsB;IAUxB,iBAAiB,CACrB,cAAc,EAAE,QAAQ,EACxB,QAAQ,CAAC,EAAE,MAAM,EACjB,IAAI,GAAE,cAA2B,GAChC,OAAO,CAAC,IAAI,CAAC;IAiDV,aAAa,CAAC,IAAI,EAAE,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC;~~IA6DxC~~,gBAAgB,CAAC,cAAc,EAAE,QAAQ,GAAG,OAAO,CAAC,IAAI,CAAC;IAqC/D,oBAAoB,CAAC,QAAQ,EAAE,QAAQ;IAUvC,aAAa,CAAC,MAAM,EAAE,MAAM,GAAG,UAAU,GAAG,IAAI;~~IAiBhD~~,gBAAgB;IAUhB,OAAO;CAKR;AAGD,eAAO,MAAM,uBAAuB,yBAAgC,CAAC"}
1	+ {"version":3,"file":"animatedViewportManager.d.ts","sourceRoot":"","sources":["../../../src/canvas/stores/animatedViewportManager.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,iBAAiB,EAAE,QAAQ,EAAE,MAAM,0CAA0C,CAAC;AAClG,OAAO,EAOL,KAAK,UAAU,EAEhB,MAAM,sBAAsB,CAAC;AAK9B,MAAM,MAAM,cAAc,GAAG,UAAU,GAAG,WAAW,GAAG,UAAU,GAAG,MAAM,CAAC;AAK5E,MAAM,WAAW,eAAe;IAC9B,eAAe,EAAE,OAAO,CAAC;IACzB,IAAI,EAAE,cAAc,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,CAAC,EAAE,QAAQ,CAAC;IACxB,UAAU,CAAC,EAAE,QAAQ,CAAC;CACvB;AAMD,cAAM,uBAAuB;IAC3B,OAAO,CAAC,iBAAiB,CAAkC;IAC3D,OAAO,CAAC,eAAe,CAAqC;IAC5D,OAAO,CAAC,eAAe,CAKrB;IACF,OAAO,CAAC,mBAAmB,CAAC,CAAS;IAGrC,OAAO,CAAC,iBAAiB,CAAC,CAAiC;IAC3D,OAAO,CAAC,kBAAkB,CAAC,CAAmC;IAC9D,OAAO,CAAC,oBAAoB,CAAC,CAAiC;IAE9D,oBAAoB,CAAC,QAAQ,EAAE,iBAAiB,GAAG,IAAI;IAIvD,oBAAoB,IAAI,iBAAiB,GAAG,IAAI;IAIhD,kBAAkB,CAAC,QAAQ,EAAE,QAAQ;IAIrC,kBAAkB,IAAI,QAAQ;IAU9B,kBAAkB,IAAI,eAAe;IAOrC,eAAe,IAAI,OAAO;IAO1B,sBAAsB,CAAC,SAAS,EAAE;QAChC,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,cAAc,KAAK,IAAI,CAAC;QACzC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;QAC5C,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,cAAc,KAAK,IAAI,CAAC;KAC7C;IASD,OAAO,CAAC,qBAAqB;IAW7B,OAAO,CAAC,eAAe;IA6BvB,OAAO,CAAC,kBAAkB;IAmB1B,OAAO,CAAC,sBAAsB;IAUxB,iBAAiB,CACrB,cAAc,EAAE,QAAQ,EACxB,QAAQ,CAAC,EAAE,MAAM,EACjB,IAAI,GAAE,cAA2B,GAChC,OAAO,CAAC,IAAI,CAAC;IAiDV,aAAa,CAAC,IAAI,EAAE,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC;IAgExC,gBAAgB,CAAC,cAAc,EAAE,QAAQ,GAAG,OAAO,CAAC,IAAI,CAAC;IAqC/D,oBAAoB,CAAC,QAAQ,EAAE,QAAQ;IAUvC,aAAa,CAAC,MAAM,EAAE,MAAM,GAAG,UAAU,GAAG,IAAI;IAoBhD,gBAAgB;IAUhB,OAAO;CAKR;AAGD,eAAO,MAAM,uBAAuB,yBAAgC,CAAC"}

package/dist/canvas/stores/animatedViewportManager.js CHANGED Viewed

@@ -116,8 +116,8 @@ class AnimatedViewportManager {
         const nodeBounds = {
             x: node.position.x,
             y: node.position.y,
-            width: node.width || 200,
-            height: node.height || 100
+            width: node.measured?.width || node.width || 200,
+            height: node.measured?.height || node.height || 100
         };
         const nodeFocusViewport = calculateNodeFocusViewport(nodeBounds, canvasSize, ANIMATION_CONSTANTS.NODE_FOCUS_PADDING);
         const fromViewport = this.getCurrentViewport();
@@ -178,8 +178,8 @@ class AnimatedViewportManager {
         return {
             x: node.position.x,
             y: node.position.y,
-            width: node.width || 200,
-            height: node.height || 100
+            width: node.measured?.width || node.width || 200,
+            height: node.measured?.height || node.height || 100
         };
     }
     cancelTransition() {

package/package.json CHANGED Viewed

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