@uipath/apollo-react 4.62.1 → 4.64.0

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

@@ -0,0 +1,235 @@
+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 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: "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: (event)=>event.stopPropagation(),
+        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: "block aspect-video w-full border-0",
+                    onPointerDown: (event)=>event.stopPropagation()
+                }) : /*#__PURE__*/ jsxs("button", {
+                    type: "button",
+                    "data-sticky-media-control": true,
+                    "aria-label": playLabel,
+                    className: "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: (event)=>event.stopPropagation(),
+                    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: "block h-auto w-full bg-black",
+                    onClick: (event)=>event.stopPropagation(),
+                    onDoubleClick: (event)=>event.stopPropagation(),
+                    onPointerDown: (event)=>event.stopPropagation(),
+                    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

@@ -56,6 +56,9 @@ const external_NodeViewportOverlay_cjs_namespaceObject = require("../NodeViewpor
 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_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,13 +66,14 @@ 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 = false, onContentChange, onColorChange, onResize, onResizeStart, onResizeEnd, enableMediaEmbedding = false, formattingActions, markdownComponents: customMarkdownComponents })=>{
     const { _ } = (0, index_cjs_namespaceObject.useSafeLingui)();
     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);
@@ -244,6 +248,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)({
@@ -372,12 +462,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 = [
@@ -553,27 +658,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 +743,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, onContentChange, onColorChange, onResize, onResizeStart, onResizeEnd, enableMediaEmbedding, formattingActions, markdownComponents: customMarkdownComponents, }: StickyNoteNodeProps) => import("react/jsx-runtime").JSX.Element>;
 //# sourceMappingURL=StickyNoteNode.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"StickyNoteNode.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StickyNoteNode/StickyNoteNode.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,0CAA0C,CAAC;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"}
+{"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;AA6ChE,OAAO,KAAK,EACV,eAAe,EACf,cAAc,EAEd,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;IAEzB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,iBAAiB,CAAC,EAAE,SAAS,0BAA0B,EAAE,CAAC;IAC1D,kBAAkB,CAAC,EAAE,IAAI,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;CAC5C;AA6qBD,eAAO,MAAM,cAAc,yRAhpBxB,mBAAmB,6CAgpBwE,CAAC"}

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

@@ -16,6 +16,9 @@ import { NodeViewportOverlay } from "../NodeViewportOverlay.js";
 import { NodeToolbar } from "../Toolbar/index.js";
 import { FormattingToolbar } from "./FormattingToolbar.js";
 import { activeFormatsEqual, continueListOnEnter, detectActiveFormats } from "./markdown-formatting/index.js";
+import { findStickyNoteMediaAtSelection, insertStickyNoteMedia, parseStickyNoteMediaTokens, replaceStickyNoteMedia, serializeStickyNoteMedia } from "./StickyNoteMedia.js";
+import { StickyNoteMediaDialog } from "./StickyNoteMediaDialog.js";
+import { StickyNoteMediaMarkdownProvider, createStickyNoteMediaMarkdownComponents } from "./StickyNoteMediaMarkdown.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, readTextSelection } from "./StickyNoteNode.utils.js";
@@ -23,13 +26,14 @@ 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, formattingActions, markdownComponents: customMarkdownComponents })=>{
+const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = 'Add text', renderPlaceholderOnSelect = false, readOnly = false, onContentChange, onColorChange, onResize, onResizeStart, onResizeEnd, enableMediaEmbedding = false, formattingActions, markdownComponents: customMarkdownComponents })=>{
     const { _ } = useSafeLingui();
     const { updateNodeData, deleteElements } = useReactFlow();
     const { multipleNodesSelected } = useSelectionState();
     const [isEditing, setIsEditing] = useState(!readOnly && (data.autoFocus ?? false));
     const [isResizing, setIsResizing] = useState(false);
     const [isColorPickerOpen, setIsColorPickerOpen] = useState(false);
+    const [mediaDialog, setMediaDialog] = useState(null);
     const [localContent, setLocalContent] = useState(data.content || '');
     const latestContentRef = useRef(localContent);
     const textAreaRef = useRef(null);
@@ -204,6 +208,92 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
         updateLocalContent,
         updateNodeData
     ]);
+    const openMediaDialog = useCallback((context)=>{
+        const { selection } = context;
+        setMediaDialog({
+            source: 'editor',
+            context,
+            token: findStickyNoteMediaAtSelection(selection.value, selection.selectionStart, selection.selectionEnd)
+        });
+    }, []);
+    const mediaFormattingAction = useMemo(()=>({
+            id: 'sticky-note-embed-media',
+            icon: /*#__PURE__*/ jsx(CanvasIcon, {
+                icon: "image-plus",
+                size: 14
+            }),
+            label: _({
+                id: 'sticky-note.media.embed-action',
+                message: 'Embed image or video'
+            }),
+            onAction: openMediaDialog
+        }), [
+        _,
+        openMediaDialog
+    ]);
+    const effectiveFormattingActions = useMemo(()=>enableMediaEmbedding ? [
+            mediaFormattingAction,
+            ...formattingActions ?? []
+        ] : formattingActions ?? [], [
+        enableMediaEmbedding,
+        formattingActions,
+        mediaFormattingAction
+    ]);
+    const handleEditRenderedMedia = useCallback((media, range)=>{
+        const sourceContent = latestContentRef.current;
+        const renderedTokens = parseStickyNoteMediaTokens(preserveNewlines(sourceContent));
+        const renderedIndex = renderedTokens.findIndex((token)=>token.start === range.start && token.end === range.end);
+        const sourceToken = renderedIndex >= 0 ? parseStickyNoteMediaTokens(sourceContent)[renderedIndex] : void 0;
+        setMediaDialog({
+            source: 'rendered',
+            token: sourceToken ?? {
+                media,
+                ...range
+            }
+        });
+    }, []);
+    const cancelMediaDialog = useCallback(()=>{
+        const current = mediaDialog;
+        setMediaDialog(null);
+        if (current?.source === 'editor') current.context.resume();
+    }, [
+        mediaDialog
+    ]);
+    useEffect(()=>{
+        if (!mediaDialog || enableMediaEmbedding && !readOnly) return;
+        setMediaDialog(null);
+        skipBlurRef.current = null;
+        if (!readOnly && 'editor' === mediaDialog.source) mediaDialog.context.resume();
+    }, [
+        enableMediaEmbedding,
+        mediaDialog,
+        readOnly
+    ]);
+    const submitMediaDialog = useCallback((media)=>{
+        if (!mediaDialog) return;
+        const block = serializeStickyNoteMedia(media);
+        if ('editor' === mediaDialog.source) {
+            const currentValue = mediaDialog.context.currentValue();
+            const next = mediaDialog.token ? replaceStickyNoteMedia(currentValue, mediaDialog.token, block) ?? insertStickyNoteMedia(currentValue, block, null) : insertStickyNoteMedia(currentValue, block, mediaDialog.context.selection);
+            setMediaDialog(null);
+            mediaDialog.context.commit(next);
+            return;
+        }
+        const currentValue = latestContentRef.current;
+        const next = replaceStickyNoteMedia(currentValue, mediaDialog.token, block) ?? insertStickyNoteMedia(currentValue, block, null);
+        setMediaDialog(null);
+        updateLocalContent(next.value);
+        onContentChange?.(next.value);
+        updateNodeData(id, {
+            content: next.value
+        });
+    }, [
+        id,
+        mediaDialog,
+        onContentChange,
+        updateLocalContent,
+        updateNodeData
+    ]);
     const updateActiveFormats = useCallback(()=>{
         if (!textAreaRef.current) return;
         const next = detectActiveFormats({
@@ -332,12 +422,27 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
                     children: children
                 })
         }), []);
+    const mediaMarkdownComponents = useMemo(()=>createStickyNoteMediaMarkdownComponents(customMarkdownComponents?.img), [
+        customMarkdownComponents?.img
+    ]);
     const markdownComponents = useMemo(()=>({
             ...customMarkdownComponents,
+            ...enableMediaEmbedding ? mediaMarkdownComponents : {},
             ...builtInMarkdownComponents
         }), [
         builtInMarkdownComponents,
-        customMarkdownComponents
+        customMarkdownComponents,
+        enableMediaEmbedding,
+        mediaMarkdownComponents
+    ]);
+    const mediaMarkdownOptions = useMemo(()=>({
+            editable: enableMediaEmbedding && selected && !readOnly,
+            onEditMedia: handleEditRenderedMedia
+        }), [
+        enableMediaEmbedding,
+        handleEditRenderedMedia,
+        readOnly,
+        selected
     ]);
     const toolbarConfig = useMemo(()=>{
         const actions = [
@@ -513,27 +618,30 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
                                         activeFormats: activeFormats,
                                         onFormat: handleFormat,
                                         onBlur: handleBlur,
-                                        actions: formattingActions,
+                                        actions: effectiveFormattingActions,
                                         onAction: handleFormattingAction
                                     })
                                 ]
                             }) : /*#__PURE__*/ jsx(StickyNoteMarkdown, {
                                 ref: markdownRef,
                                 ...scrollCaptureProps,
-                                children: localContent ? /*#__PURE__*/ jsx(react_markdown, {
-                                    remarkPlugins: [
-                                        remark_gfm,
-                                        remark_breaks
-                                    ],
-                                    components: markdownComponents,
-                                    children: preserveNewlines(localContent)
-                                }) : renderPlaceholderOnSelect && selected && /*#__PURE__*/ jsx(react_markdown, {
-                                    remarkPlugins: [
-                                        remark_gfm,
-                                        remark_breaks
-                                    ],
-                                    components: markdownComponents,
-                                    children: placeholder
+                                children: /*#__PURE__*/ jsx(StickyNoteMediaMarkdownProvider, {
+                                    value: mediaMarkdownOptions,
+                                    children: localContent ? /*#__PURE__*/ jsx(react_markdown, {
+                                        remarkPlugins: [
+                                            remark_gfm,
+                                            remark_breaks
+                                        ],
+                                        components: markdownComponents,
+                                        children: preserveNewlines(localContent)
+                                    }) : renderPlaceholderOnSelect && selected && /*#__PURE__*/ jsx(react_markdown, {
+                                        remarkPlugins: [
+                                            remark_gfm,
+                                            remark_breaks
+                                        ],
+                                        components: markdownComponents,
+                                        children: placeholder
+                                    })
                                 })
                             })
                         ]
@@ -595,6 +703,11 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
                         })
                     })
                 ]
+            }),
+            enableMediaEmbedding && mediaDialog && /*#__PURE__*/ jsx(StickyNoteMediaDialog, {
+                initialMedia: mediaDialog.token?.media,
+                onCancel: cancelMediaDialog,
+                onSubmit: submitMediaDialog
             })
         ]
     });