@uipath/apollo-react 4.63.0 → 4.65.0

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

@@ -0,0 +1,242 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CanvasIcon } from "../../index.js";
+import { createContext, createElement, useContext, useState } from "react";
+import { useSafeLingui } from "../../../i18n/index.js";
+import { parseStickyNoteMediaMarker, parseStickyNoteMediaSource } from "./StickyNoteMedia.js";
+const StickyNoteMediaMarkdownContext = /*#__PURE__*/ createContext({
+    editable: false
+});
+function StickyNoteMediaMarkdownProvider({ value, children }) {
+    return /*#__PURE__*/ jsx(StickyNoteMediaMarkdownContext.Provider, {
+        value: value,
+        children: children
+    });
+}
+function sourceRange(node) {
+    const start = node?.position?.start?.offset;
+    const end = node?.position?.end?.offset;
+    return 'number' == typeof start && 'number' == typeof end ? {
+        start,
+        end
+    } : null;
+}
+function stopNodeDrag(event) {
+    event.stopPropagation();
+}
+function MediaContainer({ fullWidth, children }) {
+    return /*#__PURE__*/ jsx("span", {
+        className: "relative my-2 block max-w-full overflow-hidden rounded-md",
+        style: {
+            width: fullWidth ? '100%' : 'min(320px, 100%)'
+        },
+        "data-sticky-media": true,
+        "data-sticky-full-width": fullWidth,
+        children: children
+    });
+}
+function MediaEditButton({ onClick }) {
+    const { _ } = useSafeLingui();
+    const label = _({
+        id: 'sticky-note.media.edit',
+        message: 'Edit media'
+    });
+    return /*#__PURE__*/ jsx("button", {
+        type: "button",
+        "data-sticky-media-control": true,
+        "aria-label": label,
+        title: label,
+        className: "nodrag nopan absolute right-1 top-1 z-10 inline-flex h-7 w-7 items-center justify-center rounded bg-surface-raised/95 text-foreground opacity-80 shadow-sm transition-opacity hover:bg-surface-hover hover:opacity-100 focus-visible:opacity-100",
+        onClick: (event)=>{
+            event.preventDefault();
+            event.stopPropagation();
+            onClick();
+        },
+        onDoubleClick: (event)=>event.stopPropagation(),
+        onPointerDown: stopNodeDrag,
+        onMouseDown: stopNodeDrag,
+        children: /*#__PURE__*/ jsx(CanvasIcon, {
+            icon: "pencil",
+            size: 14
+        })
+    });
+}
+function StickyNoteMediaImage({ src, alt = '', title, node, fallbackImage, ...imageProps }) {
+    const { _ } = useSafeLingui();
+    const { editable, onEditMedia } = useContext(StickyNoteMediaMarkdownContext);
+    const [failedImageUrl, setFailedImageUrl] = useState(null);
+    const [loadedYouTubeId, setLoadedYouTubeId] = useState(null);
+    const mediaMarker = parseStickyNoteMediaMarker(title);
+    const media = 'string' == typeof src ? parseStickyNoteMediaSource(src, alt, title) : null;
+    const range = sourceRange(node);
+    if (!media) {
+        if (mediaMarker) {
+            const unavailableLabel = _({
+                id: 'sticky-note.media.unavailable',
+                message: 'Media unavailable'
+            });
+            return /*#__PURE__*/ jsx(MediaContainer, {
+                fullWidth: mediaMarker.fullWidth,
+                children: /*#__PURE__*/ jsx("span", {
+                    role: "img",
+                    "aria-label": alt || unavailableLabel,
+                    className: "flex min-h-20 items-center justify-center bg-black/10 px-3 text-center text-xs text-foreground-muted",
+                    children: unavailableLabel
+                })
+            });
+        }
+        if (fallbackImage) {
+            const fallbackProps = {
+                ...imageProps,
+                src,
+                alt,
+                title
+            };
+            return 'string' == typeof fallbackImage ? /*#__PURE__*/ createElement(fallbackImage, fallbackProps) : /*#__PURE__*/ createElement(fallbackImage, {
+                ...fallbackProps,
+                node
+            });
+        }
+        return /*#__PURE__*/ jsx("img", {
+            ...imageProps,
+            src: src,
+            alt: alt,
+            title: title
+        });
+    }
+    const editButton = editable && range && onEditMedia && /*#__PURE__*/ jsx(MediaEditButton, {
+        onClick: ()=>onEditMedia(media, range)
+    });
+    if ('youtube' === media.kind) {
+        const playLabel = _({
+            id: 'sticky-note.media.play-video',
+            message: 'Play video'
+        });
+        const youtubeLoaded = loadedYouTubeId === media.videoId;
+        return /*#__PURE__*/ jsxs(MediaContainer, {
+            fullWidth: media.fullWidth,
+            children: [
+                youtubeLoaded ? /*#__PURE__*/ jsx("iframe", {
+                    src: `https://www.youtube-nocookie.com/embed/${media.videoId}?autoplay=1`,
+                    title: _({
+                        id: 'sticky-note.media.youtube-title',
+                        message: 'YouTube video'
+                    }),
+                    loading: "lazy",
+                    referrerPolicy: "strict-origin-when-cross-origin",
+                    sandbox: "allow-scripts allow-same-origin allow-presentation",
+                    allow: "autoplay; encrypted-media; fullscreen; picture-in-picture",
+                    allowFullScreen: true,
+                    className: "nodrag nopan block aspect-video w-full border-0",
+                    onPointerDown: stopNodeDrag,
+                    onMouseDown: stopNodeDrag
+                }) : /*#__PURE__*/ jsxs("button", {
+                    type: "button",
+                    "data-sticky-media-control": true,
+                    "aria-label": playLabel,
+                    className: "nodrag nopan group relative flex aspect-video w-full items-center justify-center overflow-hidden bg-black text-sm font-medium text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-white",
+                    onClick: (event)=>{
+                        event.preventDefault();
+                        event.stopPropagation();
+                        setLoadedYouTubeId(media.videoId);
+                    },
+                    onDoubleClick: (event)=>event.stopPropagation(),
+                    onPointerDown: stopNodeDrag,
+                    onMouseDown: stopNodeDrag,
+                    children: [
+                        /*#__PURE__*/ jsx("img", {
+                            src: `https://i.ytimg.com/vi/${media.videoId}/hqdefault.jpg`,
+                            alt: "",
+                            draggable: false,
+                            loading: "lazy",
+                            decoding: "async",
+                            referrerPolicy: "no-referrer",
+                            className: "absolute inset-0 h-full w-full object-cover opacity-80 transition-opacity group-hover:opacity-70"
+                        }),
+                        /*#__PURE__*/ jsxs("span", {
+                            className: "relative z-10 inline-flex items-center gap-2 rounded-full bg-black/70 px-4 py-2 shadow-sm",
+                            children: [
+                                /*#__PURE__*/ jsx(CanvasIcon, {
+                                    icon: "play",
+                                    size: 18
+                                }),
+                                playLabel
+                            ]
+                        })
+                    ]
+                }),
+                editButton
+            ]
+        });
+    }
+    if ('publicVideo' === media.kind) {
+        const videoLabel = alt || _({
+            id: 'sticky-note.media.video-label',
+            message: 'Embedded video'
+        });
+        return /*#__PURE__*/ jsxs(MediaContainer, {
+            fullWidth: media.fullWidth,
+            children: [
+                /*#__PURE__*/ jsx("video", {
+                    src: media.url,
+                    "aria-label": videoLabel,
+                    controls: true,
+                    preload: "metadata",
+                    playsInline: true,
+                    className: "nodrag nopan block h-auto w-full bg-black",
+                    onClick: (event)=>event.stopPropagation(),
+                    onDoubleClick: (event)=>event.stopPropagation(),
+                    onPointerDown: stopNodeDrag,
+                    onMouseDown: stopNodeDrag,
+                    children: _({
+                        id: 'sticky-note.media.video-unavailable',
+                        message: 'Video playback is unavailable.'
+                    })
+                }),
+                editButton
+            ]
+        });
+    }
+    const imageFailed = failedImageUrl === media.url;
+    return /*#__PURE__*/ jsxs(MediaContainer, {
+        fullWidth: media.fullWidth,
+        children: [
+            imageFailed ? /*#__PURE__*/ jsx("span", {
+                role: "img",
+                "aria-label": alt || _({
+                    id: 'sticky-note.media.image-unavailable-label',
+                    message: 'Image unavailable'
+                }),
+                className: "flex min-h-20 items-center justify-center bg-black/10 px-3 text-center text-xs text-foreground-muted",
+                children: _({
+                    id: 'sticky-note.media.image-unavailable',
+                    message: 'Image unavailable'
+                })
+            }) : /*#__PURE__*/ jsx("img", {
+                ...imageProps,
+                src: media.url,
+                alt: alt,
+                draggable: false,
+                loading: "lazy",
+                decoding: "async",
+                referrerPolicy: "no-referrer",
+                style: {
+                    display: 'block',
+                    maxWidth: '100%',
+                    width: media.fullWidth ? '100%' : 'auto',
+                    height: 'auto'
+                },
+                onError: ()=>setFailedImageUrl(media.url)
+            }),
+            editButton
+        ]
+    });
+}
+function createStickyNoteMediaMarkdownComponents(fallbackImage) {
+    return {
+        img: (props)=>/*#__PURE__*/ jsx(StickyNoteMediaImage, {
+                ...props,
+                fallbackImage: fallbackImage
+            })
+    };
+}
+export { StickyNoteMediaMarkdownProvider, createStickyNoteMediaMarkdownComponents };

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

@@ -50,12 +50,17 @@ const external_remark_gfm_namespaceObject = require("remark-gfm");
 var external_remark_gfm_default = /*#__PURE__*/ __webpack_require__.n(external_remark_gfm_namespaceObject);
 const index_cjs_namespaceObject = require("../../../i18n/index.cjs");
 const external_constants_cjs_namespaceObject = require("../../constants.cjs");
+const useLatestRef_cjs_namespaceObject = require("../../hooks/useLatestRef.cjs");
 const nodePropsEqual_cjs_namespaceObject = require("../../utils/nodePropsEqual.cjs");
 const SelectionStateContext_cjs_namespaceObject = require("../BaseCanvas/SelectionStateContext.cjs");
 const external_NodeViewportOverlay_cjs_namespaceObject = require("../NodeViewportOverlay.cjs");
 const external_Toolbar_index_cjs_namespaceObject = require("../Toolbar/index.cjs");
 const external_FormattingToolbar_cjs_namespaceObject = require("./FormattingToolbar.cjs");
 const external_markdown_formatting_index_cjs_namespaceObject = require("./markdown-formatting/index.cjs");
+const external_StickyNoteCanvasOptionsContext_cjs_namespaceObject = require("./StickyNoteCanvasOptionsContext.cjs");
+const external_StickyNoteMedia_cjs_namespaceObject = require("./StickyNoteMedia.cjs");
+const external_StickyNoteMediaDialog_cjs_namespaceObject = require("./StickyNoteMediaDialog.cjs");
+const external_StickyNoteMediaMarkdown_cjs_namespaceObject = require("./StickyNoteMediaMarkdown.cjs");
 const external_StickyNoteNode_styles_cjs_namespaceObject = require("./StickyNoteNode.styles.cjs");
 const external_StickyNoteNode_types_cjs_namespaceObject = require("./StickyNoteNode.types.cjs");
 const external_StickyNoteNode_utils_cjs_namespaceObject = require("./StickyNoteNode.utils.cjs");
@@ -63,18 +68,36 @@ 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, formattingActions, markdownComponents: customMarkdownComponents })=>{
+const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = 'Add text', renderPlaceholderOnSelect = false, readOnly: readOnlyProp, onContentChange, onColorChange, onResize, onResizeStart, onResizeEnd, enableMediaEmbedding: enableMediaEmbeddingProp, formattingActions, markdownComponents: customMarkdownComponents })=>{
     const { _ } = (0, index_cjs_namespaceObject.useSafeLingui)();
+    const canvasOptions = (0, external_StickyNoteCanvasOptionsContext_cjs_namespaceObject.useStickyNoteCanvasOptions)();
+    const readOnly = readOnlyProp ?? canvasOptions.readOnly;
+    const enableMediaEmbedding = enableMediaEmbeddingProp ?? canvasOptions.enableMediaEmbedding;
     const { updateNodeData, deleteElements } = (0, react_cjs_namespaceObject.useReactFlow)();
     const { multipleNodesSelected } = (0, SelectionStateContext_cjs_namespaceObject.useSelectionState)();
     const [isEditing, setIsEditing] = (0, external_react_namespaceObject.useState)(!readOnly && (data.autoFocus ?? false));
     const [isResizing, setIsResizing] = (0, external_react_namespaceObject.useState)(false);
     const [isColorPickerOpen, setIsColorPickerOpen] = (0, external_react_namespaceObject.useState)(false);
+    const [mediaDialog, setMediaDialog] = (0, external_react_namespaceObject.useState)(null);
     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 resizeActiveRef = (0, external_react_namespaceObject.useRef)(false);
+    const resizeLifecycle = {
+        content: data.content,
+        id,
+        isEditing,
+        localContent,
+        onContentChange,
+        onResize,
+        onResizeEnd,
+        onResizeStart,
+        readOnly,
+        updateNodeData
+    };
+    const resizeLifecycleRef = (0, useLatestRef_cjs_namespaceObject.useLatestRef)(resizeLifecycle);
     const { ref: markdownRef, scrollCaptureProps } = (0, external_useScrollCapture_cjs_namespaceObject.useScrollCapture)();
     const colorButtonRef = (0, external_react_namespaceObject.useRef)(null);
     const [activeFormats, setActiveFormats] = (0, external_react_namespaceObject.useState)({
@@ -87,6 +110,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 endResizeLifecycle = (0, external_react_namespaceObject.useCallback)(()=>{
+        if (!resizeActiveRef.current) return;
+        resizeActiveRef.current = false;
+        setIsResizing(false);
+        const latestOnResizeEnd = resizeLifecycleRef.current.onResizeEnd;
+        if (latestOnResizeEnd) queueMicrotask(latestOnResizeEnd);
+    }, [
+        resizeLifecycleRef
+    ]);
     const updateLocalContent = (0, external_react_namespaceObject.useCallback)((content)=>{
         latestContentRef.current = content;
         setLocalContent(content);
@@ -244,6 +276,92 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
         updateLocalContent,
         updateNodeData
     ]);
+    const openMediaDialog = (0, external_react_namespaceObject.useCallback)((context)=>{
+        const { selection } = context;
+        setMediaDialog({
+            source: 'editor',
+            context,
+            token: (0, external_StickyNoteMedia_cjs_namespaceObject.findStickyNoteMediaAtSelection)(selection.value, selection.selectionStart, selection.selectionEnd)
+        });
+    }, []);
+    const mediaFormattingAction = (0, external_react_namespaceObject.useMemo)(()=>({
+            id: 'sticky-note-embed-media',
+            icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_index_cjs_namespaceObject.CanvasIcon, {
+                icon: "image-plus",
+                size: 14
+            }),
+            label: _({
+                id: 'sticky-note.media.embed-action',
+                message: 'Embed image or video'
+            }),
+            onAction: openMediaDialog
+        }), [
+        _,
+        openMediaDialog
+    ]);
+    const effectiveFormattingActions = (0, external_react_namespaceObject.useMemo)(()=>enableMediaEmbedding ? [
+            mediaFormattingAction,
+            ...formattingActions ?? []
+        ] : formattingActions ?? [], [
+        enableMediaEmbedding,
+        formattingActions,
+        mediaFormattingAction
+    ]);
+    const handleEditRenderedMedia = (0, external_react_namespaceObject.useCallback)((media, range)=>{
+        const sourceContent = latestContentRef.current;
+        const renderedTokens = (0, external_StickyNoteMedia_cjs_namespaceObject.parseStickyNoteMediaTokens)((0, external_StickyNoteNode_utils_cjs_namespaceObject.preserveNewlines)(sourceContent));
+        const renderedIndex = renderedTokens.findIndex((token)=>token.start === range.start && token.end === range.end);
+        const sourceToken = renderedIndex >= 0 ? (0, external_StickyNoteMedia_cjs_namespaceObject.parseStickyNoteMediaTokens)(sourceContent)[renderedIndex] : void 0;
+        setMediaDialog({
+            source: 'rendered',
+            token: sourceToken ?? {
+                media,
+                ...range
+            }
+        });
+    }, []);
+    const cancelMediaDialog = (0, external_react_namespaceObject.useCallback)(()=>{
+        const current = mediaDialog;
+        setMediaDialog(null);
+        if (current?.source === 'editor') current.context.resume();
+    }, [
+        mediaDialog
+    ]);
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        if (!mediaDialog || enableMediaEmbedding && !readOnly) return;
+        setMediaDialog(null);
+        skipBlurRef.current = null;
+        if (!readOnly && 'editor' === mediaDialog.source) mediaDialog.context.resume();
+    }, [
+        enableMediaEmbedding,
+        mediaDialog,
+        readOnly
+    ]);
+    const submitMediaDialog = (0, external_react_namespaceObject.useCallback)((media)=>{
+        if (!mediaDialog) return;
+        const block = (0, external_StickyNoteMedia_cjs_namespaceObject.serializeStickyNoteMedia)(media);
+        if ('editor' === mediaDialog.source) {
+            const currentValue = mediaDialog.context.currentValue();
+            const next = mediaDialog.token ? (0, external_StickyNoteMedia_cjs_namespaceObject.replaceStickyNoteMedia)(currentValue, mediaDialog.token, block) ?? (0, external_StickyNoteMedia_cjs_namespaceObject.insertStickyNoteMedia)(currentValue, block, null) : (0, external_StickyNoteMedia_cjs_namespaceObject.insertStickyNoteMedia)(currentValue, block, mediaDialog.context.selection);
+            setMediaDialog(null);
+            mediaDialog.context.commit(next);
+            return;
+        }
+        const currentValue = latestContentRef.current;
+        const next = (0, external_StickyNoteMedia_cjs_namespaceObject.replaceStickyNoteMedia)(currentValue, mediaDialog.token, block) ?? (0, external_StickyNoteMedia_cjs_namespaceObject.insertStickyNoteMedia)(currentValue, block, null);
+        setMediaDialog(null);
+        updateLocalContent(next.value);
+        onContentChange?.(next.value);
+        updateNodeData(id, {
+            content: next.value
+        });
+    }, [
+        id,
+        mediaDialog,
+        onContentChange,
+        updateLocalContent,
+        updateNodeData
+    ]);
     const updateActiveFormats = (0, external_react_namespaceObject.useCallback)(()=>{
         if (!textAreaRef.current) return;
         const next = (0, external_markdown_formatting_index_cjs_namespaceObject.detectActiveFormats)({
@@ -286,13 +404,16 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
         updateLocalContent
     ]);
     const handleResizeStart = (0, external_react_namespaceObject.useCallback)(()=>{
-        if (isEditing) {
-            const content = textAreaRef.current?.value ?? localContent;
-            if (!readOnly && content !== data.content) {
+        if (resizeActiveRef.current) return;
+        resizeActiveRef.current = true;
+        const lifecycle = resizeLifecycleRef.current;
+        if (lifecycle.isEditing) {
+            const content = textAreaRef.current?.value ?? lifecycle.localContent;
+            if (!lifecycle.readOnly && content !== lifecycle.content) {
                 skipBlurRef.current = content;
                 (0, external_react_dom_namespaceObject.flushSync)(()=>{
-                    onContentChange?.(content);
-                    updateNodeData(id, {
+                    lifecycle.onContentChange?.(content);
+                    lifecycle.updateNodeData(lifecycle.id, {
                         content
                     });
                 });
@@ -300,24 +421,20 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
             textAreaRef.current?.blur();
         }
         setIsResizing(true);
-        onResizeStart?.();
+        lifecycle.onResizeStart?.();
     }, [
-        data.content,
-        id,
-        isEditing,
-        localContent,
-        onContentChange,
-        onResizeStart,
-        readOnly,
-        updateNodeData
+        resizeLifecycleRef
     ]);
     const handleResizeEnd = (0, external_react_namespaceObject.useCallback)((_event, params)=>{
-        setIsResizing(false);
-        onResize?.(params.width, params.height);
-        if (onResizeEnd) queueMicrotask(onResizeEnd);
+        if (!resizeActiveRef.current) return;
+        try {
+            resizeLifecycleRef.current.onResize?.(params.width, params.height);
+        } finally{
+            endResizeLifecycle();
+        }
     }, [
-        onResize,
-        onResizeEnd
+        endResizeLifecycle,
+        resizeLifecycleRef
     ]);
     const handleColorChange = (0, external_react_namespaceObject.useCallback)((newColor)=>{
         onColorChange?.(newColor);
@@ -360,9 +477,16 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
     const builtInMarkdownComponents = (0, external_react_namespaceObject.useMemo)(()=>({
             a: ({ node: _node, href, children, ...props })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("a", {
                     ...props,
+                    className: [
+                        'nodrag',
+                        'nopan',
+                        props.className
+                    ].filter(Boolean).join(' '),
                     href: href,
                     target: "_blank",
                     rel: "noopener noreferrer",
+                    onPointerDown: (event)=>event.stopPropagation(),
+                    onMouseDown: (event)=>event.stopPropagation(),
                     onClick: (e)=>{
                         e.stopPropagation();
                     },
@@ -372,12 +496,27 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
                     children: children
                 })
         }), []);
+    const mediaMarkdownComponents = (0, external_react_namespaceObject.useMemo)(()=>(0, external_StickyNoteMediaMarkdown_cjs_namespaceObject.createStickyNoteMediaMarkdownComponents)(customMarkdownComponents?.img), [
+        customMarkdownComponents?.img
+    ]);
     const markdownComponents = (0, external_react_namespaceObject.useMemo)(()=>({
             ...customMarkdownComponents,
+            ...enableMediaEmbedding ? mediaMarkdownComponents : {},
             ...builtInMarkdownComponents
         }), [
         builtInMarkdownComponents,
-        customMarkdownComponents
+        customMarkdownComponents,
+        enableMediaEmbedding,
+        mediaMarkdownComponents
+    ]);
+    const mediaMarkdownOptions = (0, external_react_namespaceObject.useMemo)(()=>({
+            editable: enableMediaEmbedding && selected && !readOnly,
+            onEditMedia: handleEditRenderedMedia
+        }), [
+        enableMediaEmbedding,
+        handleEditRenderedMedia,
+        readOnly,
+        selected
     ]);
     const toolbarConfig = (0, external_react_namespaceObject.useMemo)(()=>{
         const actions = [
@@ -442,6 +581,7 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
         handleDelete
     ]);
     const shouldRenderToolbarOverlay = !readOnly && selected && !dragging && !isResizing && !multipleNodesSelected;
+    const shouldRenderResizeControls = !readOnly || isResizing;
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
         children: [
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_namespaceObject.Global, {
@@ -450,12 +590,13 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_StickyNoteNode_styles_cjs_namespaceObject.StickyNoteWrapper, {
                 "data-sticky-note": true,
                 children: [
-                    !readOnly && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
+                    shouldRenderResizeControls && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
                         children: [
                             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_cjs_namespaceObject.NodeResizeControl, {
                                 style: {
                                     background: 'transparent',
                                     border: 'none',
+                                    pointerEvents: readOnly ? 'none' : void 0,
                                     zIndex: external_StickyNoteNode_styles_cjs_namespaceObject.RESIZE_CONTROL_Z_INDEX
                                 },
                                 position: "top-left",
@@ -464,7 +605,7 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
                                 onResizeStart: handleResizeStart,
                                 onResizeEnd: handleResizeEnd,
                                 children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StickyNoteNode_styles_cjs_namespaceObject.ResizeHandle, {
-                                    selected: selected,
+                                    selected: selected && !readOnly,
                                     cursor: "nwse-resize"
                                 })
                             }),
@@ -472,6 +613,7 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
                                 style: {
                                     background: 'transparent',
                                     border: 'none',
+                                    pointerEvents: readOnly ? 'none' : void 0,
                                     zIndex: external_StickyNoteNode_styles_cjs_namespaceObject.RESIZE_CONTROL_Z_INDEX
                                 },
                                 position: "top-right",
@@ -480,7 +622,7 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
                                 onResizeStart: handleResizeStart,
                                 onResizeEnd: handleResizeEnd,
                                 children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StickyNoteNode_styles_cjs_namespaceObject.ResizeHandle, {
-                                    selected: selected,
+                                    selected: selected && !readOnly,
                                     cursor: "nesw-resize"
                                 })
                             }),
@@ -488,6 +630,7 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
                                 style: {
                                     background: 'transparent',
                                     border: 'none',
+                                    pointerEvents: readOnly ? 'none' : void 0,
                                     zIndex: external_StickyNoteNode_styles_cjs_namespaceObject.RESIZE_CONTROL_Z_INDEX
                                 },
                                 position: "bottom-left",
@@ -496,7 +639,7 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
                                 onResizeStart: handleResizeStart,
                                 onResizeEnd: handleResizeEnd,
                                 children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StickyNoteNode_styles_cjs_namespaceObject.ResizeHandle, {
-                                    selected: selected,
+                                    selected: selected && !readOnly,
                                     cursor: "nesw-resize"
                                 })
                             }),
@@ -504,6 +647,7 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
                                 style: {
                                     background: 'transparent',
                                     border: 'none',
+                                    pointerEvents: readOnly ? 'none' : void 0,
                                     zIndex: external_StickyNoteNode_styles_cjs_namespaceObject.RESIZE_CONTROL_Z_INDEX
                                 },
                                 position: "bottom-right",
@@ -512,7 +656,7 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
                                 onResizeStart: handleResizeStart,
                                 onResizeEnd: handleResizeEnd,
                                 children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StickyNoteNode_styles_cjs_namespaceObject.ResizeHandle, {
-                                    selected: selected,
+                                    selected: selected && !readOnly,
                                     cursor: "nwse-resize"
                                 })
                             })
@@ -553,27 +697,30 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
                                         activeFormats: activeFormats,
                                         onFormat: handleFormat,
                                         onBlur: handleBlur,
-                                        actions: formattingActions,
+                                        actions: effectiveFormattingActions,
                                         onAction: handleFormattingAction
                                     })
                                 ]
                             }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StickyNoteNode_styles_cjs_namespaceObject.StickyNoteMarkdown, {
                                 ref: markdownRef,
                                 ...scrollCaptureProps,
-                                children: localContent ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_react_markdown_default(), {
-                                    remarkPlugins: [
-                                        external_remark_gfm_default(),
-                                        external_remark_breaks_default()
-                                    ],
-                                    components: markdownComponents,
-                                    children: (0, external_StickyNoteNode_utils_cjs_namespaceObject.preserveNewlines)(localContent)
-                                }) : renderPlaceholderOnSelect && selected && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_react_markdown_default(), {
-                                    remarkPlugins: [
-                                        external_remark_gfm_default(),
-                                        external_remark_breaks_default()
-                                    ],
-                                    components: markdownComponents,
-                                    children: placeholder
+                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StickyNoteMediaMarkdown_cjs_namespaceObject.StickyNoteMediaMarkdownProvider, {
+                                    value: mediaMarkdownOptions,
+                                    children: localContent ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_react_markdown_default(), {
+                                        remarkPlugins: [
+                                            external_remark_gfm_default(),
+                                            external_remark_breaks_default()
+                                        ],
+                                        components: markdownComponents,
+                                        children: (0, external_StickyNoteNode_utils_cjs_namespaceObject.preserveNewlines)(localContent)
+                                    }) : renderPlaceholderOnSelect && selected && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_react_markdown_default(), {
+                                        remarkPlugins: [
+                                            external_remark_gfm_default(),
+                                            external_remark_breaks_default()
+                                        ],
+                                        components: markdownComponents,
+                                        children: placeholder
+                                    })
                                 })
                             })
                         ]
@@ -635,6 +782,11 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
                         })
                     })
                 ]
+            }),
+            enableMediaEmbedding && mediaDialog && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StickyNoteMediaDialog_cjs_namespaceObject.StickyNoteMediaDialog, {
+                initialMedia: mediaDialog.token?.media,
+                onCancel: cancelMediaDialog,
+                onSubmit: submitMediaDialog
             })
         ]
     });

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

@@ -11,8 +11,9 @@ export interface StickyNoteNodeProps extends NodeProps {
     onResize?: (width: number, height: number) => void;
     onResizeStart?: () => void;
     onResizeEnd?: () => void;
+    enableMediaEmbedding?: boolean;
     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, formattingActions, markdownComponents: customMarkdownComponents, }: StickyNoteNodeProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const StickyNoteNode: import("react").MemoExoticComponent<({ id, data, selected, dragging, placeholder, renderPlaceholderOnSelect, readOnly: readOnlyProp, onContentChange, onColorChange, onResize, onResizeStart, onResizeEnd, enableMediaEmbedding: enableMediaEmbeddingProp, formattingActions, markdownComponents: customMarkdownComponents, }: StickyNoteNodeProps) => import("react/jsx-runtime").JSX.Element>;
 //# sourceMappingURL=StickyNoteNode.d.ts.map