@uipath/apollo-react 4.62.1 → 4.64.0

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

@@ -0,0 +1,345 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button, Checkbox, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, Input, Label, RadioGroup, RadioGroupItem } from "@uipath/apollo-wind";
+import { useId, useMemo, useState } from "react";
+import { useSafeLingui } from "../../../i18n/index.js";
+import { parseStickyNoteMediaUrl } from "./StickyNoteMedia.js";
+function initialUrl(media) {
+    if (!media) return '';
+    return 'youtube' === media.kind ? `https://www.youtube.com/watch?v=${media.videoId}` : media.url;
+}
+function initialType(media) {
+    return media?.kind !== 'image' && media ? 'video' : 'image';
+}
+function StickyNoteMediaDialog({ initialMedia, onCancel, onSubmit }) {
+    const { _ } = useSafeLingui();
+    const urlId = useId();
+    const altId = useId();
+    const fullWidthId = useId();
+    const imageTypeId = useId();
+    const videoTypeId = useId();
+    const [mediaType, setMediaType] = useState(()=>initialType(initialMedia));
+    const [url, setUrl] = useState(()=>initialUrl(initialMedia));
+    const [alt, setAlt] = useState(()=>initialMedia?.kind === 'image' ? initialMedia.alt : '');
+    const [fullWidth, setFullWidth] = useState(initialMedia?.fullWidth ?? false);
+    const [touched, setTouched] = useState(false);
+    const [previewState, setPreviewState] = useState(()=>initialMedia?.kind !== 'youtube' && initialMedia ? 'loading' : 'loaded');
+    const parsed = useMemo(()=>parseStickyNoteMediaUrl(url, mediaType, {
+            alt: alt.trim(),
+            fullWidth
+        }), [
+        alt,
+        fullWidth,
+        mediaType,
+        url
+    ]);
+    const previewRequired = parsed.ok && 'youtube' !== parsed.value.kind;
+    const isEditing = void 0 !== initialMedia;
+    const validationMessage = (error)=>{
+        if ('invalid-youtube-url' === error) return _({
+            id: 'sticky-note.media.dialog.invalid-youtube',
+            message: 'Add a valid YouTube video URL'
+        });
+        if ('unsupported-video-url' === error) return _({
+            id: 'sticky-note.media.dialog.unsupported-video',
+            message: 'Add a YouTube URL or a direct public video file URL such as MP4'
+        });
+        return _({
+            id: 'sticky-note.media.dialog.invalid-url',
+            message: 'Enter a valid public HTTPS URL'
+        });
+    };
+    const error = url.trim() && !parsed.ok ? validationMessage(parsed.error) : null;
+    const canSubmit = parsed.ok && (!previewRequired || 'loaded' === previewState);
+    const resetPreview = (nextType, nextUrl)=>{
+        const next = parseStickyNoteMediaUrl(nextUrl, nextType);
+        setPreviewState(next.ok && 'youtube' === next.value.kind ? 'loaded' : 'loading');
+    };
+    return /*#__PURE__*/ jsx(Dialog, {
+        open: true,
+        onOpenChange: (open)=>{
+            if (!open) onCancel();
+        },
+        children: /*#__PURE__*/ jsxs(DialogContent, {
+            className: "sm:max-w-lg",
+            children: [
+                /*#__PURE__*/ jsxs(DialogHeader, {
+                    children: [
+                        /*#__PURE__*/ jsx(DialogTitle, {
+                            children: isEditing ? _({
+                                id: 'sticky-note.media.dialog.edit-title',
+                                message: 'Edit media'
+                            }) : _({
+                                id: 'sticky-note.media.dialog.add-title',
+                                message: 'Embed image or video'
+                            })
+                        }),
+                        /*#__PURE__*/ jsx(DialogDescription, {
+                            children: _({
+                                id: "sticky-note.media.dialog.description",
+                                message: 'Add a public link. Video supports YouTube and direct video files.'
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsxs("form", {
+                    className: "grid gap-4",
+                    onSubmit: (event)=>{
+                        event.preventDefault();
+                        if (canSubmit && parsed.ok) onSubmit(parsed.value);
+                    },
+                    children: [
+                        /*#__PURE__*/ jsxs("div", {
+                            className: "flex flex-col gap-4 py-2",
+                            children: [
+                                /*#__PURE__*/ jsxs("fieldset", {
+                                    className: "m-0 border-0 p-0",
+                                    children: [
+                                        /*#__PURE__*/ jsx("legend", {
+                                            className: "mb-2 text-sm font-medium",
+                                            children: _({
+                                                id: 'sticky-note.media.dialog.type-label',
+                                                message: 'Media type'
+                                            })
+                                        }),
+                                        /*#__PURE__*/ jsxs(RadioGroup, {
+                                            value: mediaType,
+                                            onValueChange: (value)=>{
+                                                const nextType = value;
+                                                setMediaType(nextType);
+                                                setTouched(false);
+                                                resetPreview(nextType, url);
+                                            },
+                                            className: "flex gap-5",
+                                            children: [
+                                                /*#__PURE__*/ jsxs("div", {
+                                                    className: "flex items-center gap-2",
+                                                    children: [
+                                                        /*#__PURE__*/ jsx(RadioGroupItem, {
+                                                            value: "image",
+                                                            id: imageTypeId
+                                                        }),
+                                                        /*#__PURE__*/ jsx(Label, {
+                                                            htmlFor: imageTypeId,
+                                                            children: _({
+                                                                id: 'sticky-note.media.dialog.image-option',
+                                                                message: 'Image'
+                                                            })
+                                                        })
+                                                    ]
+                                                }),
+                                                /*#__PURE__*/ jsxs("div", {
+                                                    className: "flex items-center gap-2",
+                                                    children: [
+                                                        /*#__PURE__*/ jsx(RadioGroupItem, {
+                                                            value: "video",
+                                                            id: videoTypeId
+                                                        }),
+                                                        /*#__PURE__*/ jsx(Label, {
+                                                            htmlFor: videoTypeId,
+                                                            children: _({
+                                                                id: 'sticky-note.media.dialog.video-option',
+                                                                message: 'Video'
+                                                            })
+                                                        })
+                                                    ]
+                                                })
+                                            ]
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ jsxs("div", {
+                                    className: "flex flex-col gap-1.5",
+                                    children: [
+                                        /*#__PURE__*/ jsx(Label, {
+                                            htmlFor: urlId,
+                                            children: 'image' === mediaType ? _({
+                                                id: 'sticky-note.media.dialog.image-url-label',
+                                                message: 'Image URL'
+                                            }) : _({
+                                                id: 'sticky-note.media.dialog.video-url-label',
+                                                message: 'Video URL'
+                                            })
+                                        }),
+                                        /*#__PURE__*/ jsx(Input, {
+                                            id: urlId,
+                                            type: "url",
+                                            autoFocus: true,
+                                            value: url,
+                                            placeholder: 'image' === mediaType ? _({
+                                                id: 'sticky-note.media.dialog.image-url-placeholder',
+                                                message: 'https://example.com/image.png'
+                                            }) : _({
+                                                id: 'sticky-note.media.dialog.video-url-placeholder',
+                                                message: 'https://youtube.com/watch?v=… or https://example.com/video.mp4'
+                                            }),
+                                            "aria-invalid": touched && Boolean(error),
+                                            "aria-describedby": `${urlId}-helper${touched && error ? ` ${urlId}-error` : ''}`,
+                                            onChange: (event)=>{
+                                                const nextUrl = event.target.value;
+                                                setUrl(nextUrl);
+                                                setTouched(true);
+                                                resetPreview(mediaType, nextUrl);
+                                            },
+                                            onBlur: ()=>setTouched(true)
+                                        }),
+                                        /*#__PURE__*/ jsx("p", {
+                                            id: `${urlId}-helper`,
+                                            className: "m-0 text-xs text-foreground-muted",
+                                            children: 'image' === mediaType ? _({
+                                                id: 'sticky-note.media.dialog.image-url-help',
+                                                message: 'Use a public HTTPS image link.'
+                                            }) : _({
+                                                id: 'sticky-note.media.dialog.video-url-help',
+                                                message: 'Use a YouTube link or a direct public HTTPS video file link.'
+                                            })
+                                        }),
+                                        touched && error && /*#__PURE__*/ jsx("p", {
+                                            id: `${urlId}-error`,
+                                            role: "alert",
+                                            className: "m-0 text-xs text-destructive",
+                                            children: error
+                                        })
+                                    ]
+                                }),
+                                'image' === mediaType && /*#__PURE__*/ jsxs("div", {
+                                    className: "flex flex-col gap-1.5",
+                                    children: [
+                                        /*#__PURE__*/ jsx(Label, {
+                                            htmlFor: altId,
+                                            children: _({
+                                                id: 'sticky-note.media.dialog.alt-label',
+                                                message: 'Alternative text'
+                                            })
+                                        }),
+                                        /*#__PURE__*/ jsx(Input, {
+                                            id: altId,
+                                            value: alt,
+                                            onChange: (event)=>setAlt(event.target.value)
+                                        }),
+                                        /*#__PURE__*/ jsx("p", {
+                                            className: "m-0 text-xs text-foreground-muted",
+                                            children: _({
+                                                id: 'sticky-note.media.dialog.alt-help',
+                                                message: 'Describe the image for people who use screen readers.'
+                                            })
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ jsxs("div", {
+                                    className: "flex items-start gap-2",
+                                    children: [
+                                        /*#__PURE__*/ jsx(Checkbox, {
+                                            id: fullWidthId,
+                                            checked: fullWidth,
+                                            onCheckedChange: (checked)=>setFullWidth(true === checked),
+                                            className: "mt-0.5"
+                                        }),
+                                        /*#__PURE__*/ jsxs("div", {
+                                            className: "flex flex-col gap-0.5",
+                                            children: [
+                                                /*#__PURE__*/ jsx(Label, {
+                                                    htmlFor: fullWidthId,
+                                                    className: "text-sm font-medium leading-none",
+                                                    children: _({
+                                                        id: 'sticky-note.media.dialog.full-width-label',
+                                                        message: 'Make full width'
+                                                    })
+                                                }),
+                                                /*#__PURE__*/ jsx("p", {
+                                                    className: "m-0 text-xs text-foreground-muted",
+                                                    children: _({
+                                                        id: 'sticky-note.media.dialog.full-width-help',
+                                                        message: 'The image or video spans the available width of the sticky note.'
+                                                    })
+                                                })
+                                            ]
+                                        })
+                                    ]
+                                }),
+                                parsed.ok && /*#__PURE__*/ jsx("div", {
+                                    className: "rounded-md border border-border-subtle bg-surface p-3",
+                                    children: /*#__PURE__*/ jsx("div", {
+                                        className: "mx-auto max-w-full overflow-hidden rounded",
+                                        style: {
+                                            width: fullWidth ? '100%' : 'min(320px, 100%)'
+                                        },
+                                        children: 'failed' === previewState ? /*#__PURE__*/ jsx("div", {
+                                            role: "alert",
+                                            className: "flex min-h-24 items-center justify-center bg-black/10 px-3 text-center text-xs text-foreground-muted",
+                                            children: _({
+                                                id: 'sticky-note.media.dialog.preview-unavailable',
+                                                message: 'We could not load a preview for this URL.'
+                                            })
+                                        }) : 'image' === parsed.value.kind ? /*#__PURE__*/ jsx("img", {
+                                            src: parsed.value.url,
+                                            alt: alt.trim() || _({
+                                                id: 'sticky-note.media.dialog.image-preview',
+                                                message: 'Image preview'
+                                            }),
+                                            referrerPolicy: "no-referrer",
+                                            className: "block h-auto max-w-full",
+                                            style: {
+                                                width: fullWidth ? '100%' : 'auto'
+                                            },
+                                            onLoad: ()=>setPreviewState('loaded'),
+                                            onError: ()=>setPreviewState('failed')
+                                        }) : 'publicVideo' === parsed.value.kind ? /*#__PURE__*/ jsx("video", {
+                                            src: parsed.value.url,
+                                            "aria-label": _({
+                                                id: 'sticky-note.media.dialog.video-preview',
+                                                message: 'Video preview'
+                                            }),
+                                            controls: true,
+                                            preload: "metadata",
+                                            playsInline: true,
+                                            className: "block h-auto w-full bg-black",
+                                            onLoadedMetadata: ()=>setPreviewState('loaded'),
+                                            onError: ()=>setPreviewState('failed'),
+                                            children: _({
+                                                id: 'sticky-note.media.video-unavailable',
+                                                message: 'Video playback is unavailable.'
+                                            })
+                                        }) : /*#__PURE__*/ jsx("img", {
+                                            src: `https://i.ytimg.com/vi/${parsed.value.videoId}/hqdefault.jpg`,
+                                            alt: _({
+                                                id: 'sticky-note.media.dialog.video-preview',
+                                                message: 'Video preview'
+                                            }),
+                                            referrerPolicy: "no-referrer",
+                                            className: "block aspect-video w-full object-cover"
+                                        })
+                                    })
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ jsxs(DialogFooter, {
+                            children: [
+                                /*#__PURE__*/ jsx(Button, {
+                                    type: "button",
+                                    variant: "outline",
+                                    onClick: onCancel,
+                                    children: _({
+                                        id: 'sticky-note.media.dialog.cancel',
+                                        message: 'Cancel'
+                                    })
+                                }),
+                                /*#__PURE__*/ jsx(Button, {
+                                    type: "submit",
+                                    disabled: !canSubmit,
+                                    children: isEditing ? _({
+                                        id: 'sticky-note.media.dialog.save',
+                                        message: 'Save changes'
+                                    }) : _({
+                                        id: 'sticky-note.media.dialog.embed',
+                                        message: 'Embed media'
+                                    })
+                                })
+                            ]
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+}
+export { StickyNoteMediaDialog };

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

@@ -0,0 +1,272 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    StickyNoteMediaMarkdownProvider: ()=>StickyNoteMediaMarkdownProvider,
+    createStickyNoteMediaMarkdownComponents: ()=>createStickyNoteMediaMarkdownComponents
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_index_cjs_namespaceObject = require("../../index.cjs");
+const external_react_namespaceObject = require("react");
+const index_cjs_namespaceObject = require("../../../i18n/index.cjs");
+const external_StickyNoteMedia_cjs_namespaceObject = require("./StickyNoteMedia.cjs");
+const StickyNoteMediaMarkdownContext = /*#__PURE__*/ (0, external_react_namespaceObject.createContext)({
+    editable: false
+});
+function StickyNoteMediaMarkdownProvider({ value, children }) {
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.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__*/ (0, jsx_runtime_namespaceObject.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 { _ } = (0, index_cjs_namespaceObject.useSafeLingui)();
+    const label = _({
+        id: 'sticky-note.media.edit',
+        message: 'Edit media'
+    });
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.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__*/ (0, jsx_runtime_namespaceObject.jsx)(external_index_cjs_namespaceObject.CanvasIcon, {
+            icon: "pencil",
+            size: 14
+        })
+    });
+}
+function StickyNoteMediaImage({ src, alt = '', title, node, fallbackImage, ...imageProps }) {
+    const { _ } = (0, index_cjs_namespaceObject.useSafeLingui)();
+    const { editable, onEditMedia } = (0, external_react_namespaceObject.useContext)(StickyNoteMediaMarkdownContext);
+    const [failedImageUrl, setFailedImageUrl] = (0, external_react_namespaceObject.useState)(null);
+    const [loadedYouTubeId, setLoadedYouTubeId] = (0, external_react_namespaceObject.useState)(null);
+    const mediaMarker = (0, external_StickyNoteMedia_cjs_namespaceObject.parseStickyNoteMediaMarker)(title);
+    const media = 'string' == typeof src ? (0, external_StickyNoteMedia_cjs_namespaceObject.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__*/ (0, jsx_runtime_namespaceObject.jsx)(MediaContainer, {
+                fullWidth: mediaMarker.fullWidth,
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.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__*/ (0, external_react_namespaceObject.createElement)(fallbackImage, fallbackProps) : /*#__PURE__*/ (0, external_react_namespaceObject.createElement)(fallbackImage, {
+                ...fallbackProps,
+                node
+            });
+        }
+        return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("img", {
+            ...imageProps,
+            src: src,
+            alt: alt,
+            title: title
+        });
+    }
+    const editButton = editable && range && onEditMedia && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.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__*/ (0, jsx_runtime_namespaceObject.jsxs)(MediaContainer, {
+            fullWidth: media.fullWidth,
+            children: [
+                youtubeLoaded ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.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__*/ (0, jsx_runtime_namespaceObject.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__*/ (0, jsx_runtime_namespaceObject.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__*/ (0, jsx_runtime_namespaceObject.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__*/ (0, jsx_runtime_namespaceObject.jsx)(external_index_cjs_namespaceObject.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__*/ (0, jsx_runtime_namespaceObject.jsxs)(MediaContainer, {
+            fullWidth: media.fullWidth,
+            children: [
+                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.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__*/ (0, jsx_runtime_namespaceObject.jsxs)(MediaContainer, {
+        fullWidth: media.fullWidth,
+        children: [
+            imageFailed ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.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__*/ (0, jsx_runtime_namespaceObject.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__*/ (0, jsx_runtime_namespaceObject.jsx)(StickyNoteMediaImage, {
+                ...props,
+                fallbackImage: fallbackImage
+            })
+    };
+}
+exports.StickyNoteMediaMarkdownProvider = __webpack_exports__.StickyNoteMediaMarkdownProvider;
+exports.createStickyNoteMediaMarkdownComponents = __webpack_exports__.createStickyNoteMediaMarkdownComponents;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "StickyNoteMediaMarkdownProvider",
+    "createStickyNoteMediaMarkdownComponents"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

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

@@ -0,0 +1,18 @@
+import { type ReactNode } from 'react';
+import type { Components } from 'react-markdown';
+import { type StickyNoteMedia } from './StickyNoteMedia';
+export interface StickyNoteMediaSourceRange {
+    start: number;
+    end: number;
+}
+interface StickyNoteMediaMarkdownOptions {
+    editable: boolean;
+    onEditMedia?: (media: StickyNoteMedia, range: StickyNoteMediaSourceRange) => void;
+}
+export declare function StickyNoteMediaMarkdownProvider({ value, children, }: {
+    value: StickyNoteMediaMarkdownOptions;
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function createStickyNoteMediaMarkdownComponents(fallbackImage?: Components['img']): Components;
+export {};
+//# sourceMappingURL=StickyNoteMediaMarkdown.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StickyNoteMediaMarkdown.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StickyNoteNode/StickyNoteMediaMarkdown.tsx"],"names":[],"mappings":"AACA,OAAO,EAIL,KAAK,SAAS,EAGf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,UAAU,EAAc,MAAM,gBAAgB,CAAC;AAE7D,OAAO,EAGL,KAAK,eAAe,EACrB,MAAM,mBAAmB,CAAC;AAE3B,MAAM,WAAW,0BAA0B;IACzC,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;CACb;AAED,UAAU,8BAA8B;IACtC,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,EAAE,KAAK,EAAE,0BAA0B,KAAK,IAAI,CAAC;CACnF;AAMD,wBAAgB,+BAA+B,CAAC,EAC9C,KAAK,EACL,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,8BAA8B,CAAC;IACtC,QAAQ,EAAE,SAAS,CAAC;CACrB,2CAMA;AAqND,wBAAgB,uCAAuC,CACrD,aAAa,CAAC,EAAE,UAAU,CAAC,KAAK,CAAC,GAChC,UAAU,CAIZ"}