import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import { Global } from "@emotion/react";
import { CanvasIcon } from "../../index.js";
import { NodeResizeControl, useReactFlow } from "../../xyflow/react.js";
import { AnimatePresence } from "motion/react";
import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
import { flushSync } from "react-dom";
import react_markdown from "react-markdown";
import remark_breaks from "remark-breaks";
import remark_gfm from "remark-gfm";
import { useSafeLingui } from "../../../i18n/index.js";
import { GRID_SPACING } from "../../constants.js";
import { useLatestRef } from "../../hooks/useLatestRef.js";
import { areNodePropsEqualIgnoringPosition } from "../../utils/nodePropsEqual.js";
import { useSelectionState } from "../BaseCanvas/SelectionStateContext.js";
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 { useStickyNoteCanvasOptions } from "./StickyNoteCanvasOptionsContext.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";
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: readOnlyProp, onContentChange, onColorChange, onResize, onResizeStart, onResizeEnd, enableMediaEmbedding: enableMediaEmbeddingProp, formattingActions, markdownComponents: customMarkdownComponents })=>{
    const { _ } = useSafeLingui();
    const canvasOptions = useStickyNoteCanvasOptions();
    const readOnly = readOnlyProp ?? canvasOptions.readOnly;
    const enableMediaEmbedding = enableMediaEmbeddingProp ?? canvasOptions.enableMediaEmbedding;
    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);
    const formattingToolbarRef = useRef(null);
    const skipBlurRef = useRef(null);
    const resizeActiveRef = useRef(false);
    const resizeLifecycle = {
        content: data.content,
        id,
        isEditing,
        localContent,
        onContentChange,
        onResize,
        onResizeEnd,
        onResizeStart,
        readOnly,
        updateNodeData
    };
    const resizeLifecycleRef = useLatestRef(resizeLifecycle);
    const { ref: markdownRef, scrollCaptureProps } = useScrollCapture();
    const colorButtonRef = useRef(null);
    const [activeFormats, setActiveFormats] = useState({
        bold: false,
        italic: false,
        strikethrough: false,
        bulletList: false,
        numberedList: false
    });
    const colorKey = data.color || 'yellow';
    const color = STICKY_NOTE_COLORS[colorKey] ?? STICKY_NOTE_COLORS.yellow;
    const colorWithAlpha = withAlpha(color);
    const endResizeLifecycle = useCallback(()=>{
        if (!resizeActiveRef.current) return;
        resizeActiveRef.current = false;
        setIsResizing(false);
        const latestOnResizeEnd = resizeLifecycleRef.current.onResizeEnd;
        if (latestOnResizeEnd) queueMicrotask(latestOnResizeEnd);
    }, [
        resizeLifecycleRef
    ]);
    const updateLocalContent = useCallback((content)=>{
        latestContentRef.current = content;
        setLocalContent(content);
    }, []);
    useEffect(()=>{
        updateLocalContent(data.content || '');
    }, [
        data.content,
        updateLocalContent
    ]);
    useEffect(()=>{
        if (isEditing && textAreaRef.current) {
            textAreaRef.current.focus();
            textAreaRef.current.select();
        }
        if (!readOnly && data.autoFocus) updateNodeData(id, {
            autoFocus: false
        });
    }, [
        isEditing,
        data.autoFocus,
        id,
        updateNodeData,
        readOnly
    ]);
    useEffect(()=>{
        if (!selected || dragging || isResizing || multipleNodesSelected) setIsColorPickerOpen(false);
    }, [
        selected,
        dragging,
        isResizing,
        multipleNodesSelected
    ]);
    useEffect(()=>{
        if (readOnly) {
            setIsEditing(false);
            updateLocalContent(data.content || '');
        }
    }, [
        readOnly,
        data.content,
        updateLocalContent
    ]);
    const handleDoubleClick = useCallback(()=>{
        if (readOnly || isEditing) return;
        setIsEditing(true);
        setTimeout(()=>{
            if (textAreaRef.current) {
                textAreaRef.current.focus();
                textAreaRef.current.select();
            }
        }, 0);
    }, [
        isEditing,
        readOnly
    ]);
    const handleBlur = useCallback((event)=>{
        const nextTarget = event.relatedTarget;
        if (nextTarget instanceof Node && (textAreaRef.current?.contains(nextTarget) || formattingToolbarRef.current?.contains(nextTarget))) return;
        setIsEditing(false);
        if (readOnly) return;
        const content = textAreaRef.current?.value ?? localContent;
        if (skipBlurRef.current === content) {
            skipBlurRef.current = null;
            return;
        }
        if (content !== data.content) {
            onContentChange?.(content);
            updateNodeData(id, {
                content
            });
        }
    }, [
        id,
        localContent,
        data.content,
        updateNodeData,
        onContentChange,
        readOnly
    ]);
    const handleChange = useCallback((e)=>{
        skipBlurRef.current = null;
        updateLocalContent(e.target.value);
    }, [
        updateLocalContent
    ]);
    const handleFormat = useCallback((result)=>{
        updateLocalContent(result.value);
        setActiveFormats(detectActiveFormats(result));
        requestAnimationFrame(()=>{
            if (textAreaRef.current) {
                textAreaRef.current.selectionStart = result.selectionStart;
                textAreaRef.current.selectionEnd = result.selectionEnd;
            }
        });
    }, [
        updateLocalContent
    ]);
    const handleFormattingAction = useCallback((action, anchorRect)=>{
        const textarea = textAreaRef.current;
        if (!textarea) return;
        const selection = readTextSelection(textarea);
        skipBlurRef.current = selection.value;
        let completed = false;
        const restoreSelection = (next)=>{
            setIsEditing(true);
            requestAnimationFrame(()=>{
                const currentTextarea = textAreaRef.current;
                if (!currentTextarea) return;
                const length = next.value.length;
                currentTextarea.focus();
                currentTextarea.selectionStart = Math.max(0, Math.min(length, next.selectionStart));
                currentTextarea.selectionEnd = Math.max(0, Math.min(length, next.selectionEnd));
            });
        };
        const complete = (next, shouldPersist)=>{
            if (completed) return;
            completed = true;
            skipBlurRef.current = shouldPersist ? next.value : null;
            setActiveFormats(detectActiveFormats(next));
            if (shouldPersist) {
                updateLocalContent(next.value);
                onContentChange?.(next.value);
                updateNodeData(id, {
                    content: next.value
                });
            }
            restoreSelection(next);
        };
        try {
            action.onAction({
                selection,
                anchorRect,
                currentValue: ()=>textAreaRef.current?.value ?? latestContentRef.current,
                commit: (next)=>complete(next, true),
                resume: ()=>{
                    const currentValue = textAreaRef.current?.value ?? latestContentRef.current;
                    complete({
                        ...selection,
                        value: currentValue
                    }, false);
                }
            });
        } catch (error) {
            if (!completed) {
                completed = true;
                skipBlurRef.current = null;
                restoreSelection(selection);
            }
            throw error;
        }
    }, [
        id,
        onContentChange,
        updateLocalContent,
        updateNodeData
    ]);
    const 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({
            value: textAreaRef.current.value,
            selectionStart: textAreaRef.current.selectionStart,
            selectionEnd: textAreaRef.current.selectionEnd
        });
        setActiveFormats((prev)=>activeFormatsEqual(prev, next) ? prev : next);
    }, []);
    const shortcutKeyDown = useMarkdownShortcuts(textAreaRef, handleFormat);
    const handleKeyDown = useCallback((e)=>{
        if ('Escape' === e.key) {
            skipBlurRef.current = textAreaRef.current?.value ?? localContent;
            setIsEditing(false);
            updateLocalContent(data.content || '');
            textAreaRef.current?.blur();
            return;
        }
        if ('Enter' === e.key && !e.shiftKey && !e.metaKey && !e.ctrlKey) {
            const textarea = textAreaRef.current;
            if (textarea) {
                const result = continueListOnEnter({
                    value: textarea.value,
                    selectionStart: textarea.selectionStart,
                    selectionEnd: textarea.selectionEnd
                });
                if (result) {
                    e.preventDefault();
                    handleFormat(result);
                }
            }
            return;
        }
        shortcutKeyDown(e);
    }, [
        data.content,
        localContent,
        shortcutKeyDown,
        handleFormat,
        updateLocalContent
    ]);
    const handleResizeStart = useCallback(()=>{
        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;
                flushSync(()=>{
                    lifecycle.onContentChange?.(content);
                    lifecycle.updateNodeData(lifecycle.id, {
                        content
                    });
                });
            }
            textAreaRef.current?.blur();
        }
        setIsResizing(true);
        lifecycle.onResizeStart?.();
    }, [
        resizeLifecycleRef
    ]);
    const handleResizeEnd = useCallback((_event, params)=>{
        if (!resizeActiveRef.current) return;
        try {
            resizeLifecycleRef.current.onResize?.(params.width, params.height);
        } finally{
            endResizeLifecycle();
        }
    }, [
        endResizeLifecycle,
        resizeLifecycleRef
    ]);
    const handleColorChange = useCallback((newColor)=>{
        onColorChange?.(newColor);
        updateNodeData(id, {
            color: newColor
        });
        setIsColorPickerOpen(false);
    }, [
        id,
        updateNodeData,
        onColorChange
    ]);
    const handleToggleColorPicker = useCallback(()=>{
        setIsColorPickerOpen((prev)=>!prev);
    }, []);
    const handleEditClick = useCallback(()=>{
        if (readOnly) return;
        setIsEditing(true);
        setTimeout(()=>{
            if (textAreaRef.current) {
                textAreaRef.current.focus();
                textAreaRef.current.select();
            }
        }, 0);
    }, [
        readOnly
    ]);
    const handleDelete = useCallback(()=>{
        deleteElements({
            nodes: [
                {
                    id
                }
            ]
        });
    }, [
        id,
        deleteElements
    ]);
    const builtInMarkdownComponents = useMemo(()=>({
            a: ({ node: _node, href, children, ...props })=>/*#__PURE__*/ 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();
                    },
                    onDoubleClick: (e)=>{
                        e.stopPropagation();
                    },
                    children: children
                })
        }), []);
    const mediaMarkdownComponents = useMemo(()=>createStickyNoteMediaMarkdownComponents(customMarkdownComponents?.img), [
        customMarkdownComponents?.img
    ]);
    const markdownComponents = useMemo(()=>({
            ...customMarkdownComponents,
            ...enableMediaEmbedding ? mediaMarkdownComponents : {},
            ...builtInMarkdownComponents
        }), [
        builtInMarkdownComponents,
        customMarkdownComponents,
        enableMediaEmbedding,
        mediaMarkdownComponents
    ]);
    const mediaMarkdownOptions = useMemo(()=>({
            editable: enableMediaEmbedding && selected && !readOnly,
            onEditMedia: handleEditRenderedMedia
        }), [
        enableMediaEmbedding,
        handleEditRenderedMedia,
        readOnly,
        selected
    ]);
    const toolbarConfig = useMemo(()=>{
        const actions = [
            {
                id: 'delete',
                icon: /*#__PURE__*/ jsx(CanvasIcon, {
                    icon: "trash",
                    size: 14
                }),
                label: _({
                    id: 'sticky-note.toolbar.delete',
                    message: 'Delete'
                }),
                onAction: handleDelete
            },
            {
                id: 'edit',
                icon: /*#__PURE__*/ jsx(CanvasIcon, {
                    icon: "pencil",
                    size: 14
                }),
                label: _({
                    id: 'sticky-note.toolbar.edit',
                    message: 'Edit'
                }),
                onAction: handleEditClick
            },
            {
                id: 'separator'
            },
            {
                id: 'color',
                icon: /*#__PURE__*/ jsx("div", {
                    ref: colorButtonRef,
                    style: {
                        width: '16px',
                        height: '16px',
                        borderRadius: '50%',
                        backgroundColor: color,
                        border: '1px solid transparent'
                    }
                }),
                label: _({
                    id: 'sticky-note.toolbar.color',
                    message: 'Color'
                }),
                onAction: handleToggleColorPicker
            }
        ];
        return {
            actions,
            overflowActions: [],
            overflowLabel: '',
            position: 'top',
            align: 'center'
        };
    }, [
        _,
        handleEditClick,
        handleToggleColorPicker,
        color,
        handleDelete
    ]);
    const shouldRenderToolbarOverlay = !readOnly && selected && !dragging && !isResizing && !multipleNodesSelected;
    const shouldRenderResizeControls = !readOnly || isResizing;
    return /*#__PURE__*/ jsxs(Fragment, {
        children: [
            /*#__PURE__*/ jsx(Global, {
                styles: stickyNoteGlobalStyles
            }),
            /*#__PURE__*/ jsxs(StickyNoteWrapper, {
                "data-sticky-note": true,
                children: [
                    shouldRenderResizeControls && /*#__PURE__*/ jsxs(Fragment, {
                        children: [
                            /*#__PURE__*/ jsx(NodeResizeControl, {
                                style: {
                                    background: 'transparent',
                                    border: 'none',
                                    pointerEvents: readOnly ? 'none' : void 0,
                                    zIndex: RESIZE_CONTROL_Z_INDEX
                                },
                                position: "top-left",
                                minWidth: minWidth,
                                minHeight: minHeight,
                                onResizeStart: handleResizeStart,
                                onResizeEnd: handleResizeEnd,
                                children: /*#__PURE__*/ jsx(ResizeHandle, {
                                    selected: selected && !readOnly,
                                    cursor: "nwse-resize"
                                })
                            }),
                            /*#__PURE__*/ jsx(NodeResizeControl, {
                                style: {
                                    background: 'transparent',
                                    border: 'none',
                                    pointerEvents: readOnly ? 'none' : void 0,
                                    zIndex: RESIZE_CONTROL_Z_INDEX
                                },
                                position: "top-right",
                                minWidth: minWidth,
                                minHeight: minHeight,
                                onResizeStart: handleResizeStart,
                                onResizeEnd: handleResizeEnd,
                                children: /*#__PURE__*/ jsx(ResizeHandle, {
                                    selected: selected && !readOnly,
                                    cursor: "nesw-resize"
                                })
                            }),
                            /*#__PURE__*/ jsx(NodeResizeControl, {
                                style: {
                                    background: 'transparent',
                                    border: 'none',
                                    pointerEvents: readOnly ? 'none' : void 0,
                                    zIndex: RESIZE_CONTROL_Z_INDEX
                                },
                                position: "bottom-left",
                                minWidth: minWidth,
                                minHeight: minHeight,
                                onResizeStart: handleResizeStart,
                                onResizeEnd: handleResizeEnd,
                                children: /*#__PURE__*/ jsx(ResizeHandle, {
                                    selected: selected && !readOnly,
                                    cursor: "nesw-resize"
                                })
                            }),
                            /*#__PURE__*/ jsx(NodeResizeControl, {
                                style: {
                                    background: 'transparent',
                                    border: 'none',
                                    pointerEvents: readOnly ? 'none' : void 0,
                                    zIndex: RESIZE_CONTROL_Z_INDEX
                                },
                                position: "bottom-right",
                                minWidth: minWidth,
                                minHeight: minHeight,
                                onResizeStart: handleResizeStart,
                                onResizeEnd: handleResizeEnd,
                                children: /*#__PURE__*/ jsx(ResizeHandle, {
                                    selected: selected && !readOnly,
                                    cursor: "nwse-resize"
                                })
                            })
                        ]
                    }),
                    /*#__PURE__*/ jsxs(StickyNoteContainer, {
                        backgroundColor: colorWithAlpha,
                        borderColor: color,
                        isEditing: isEditing,
                        selected: selected,
                        isReadOnly: readOnly,
                        onDoubleClick: handleDoubleClick,
                        children: [
                            /*#__PURE__*/ jsx(TopCornerIndicators, {
                                visible: selected && !readOnly
                            }),
                            /*#__PURE__*/ jsx(BottomCornerIndicators, {
                                visible: selected && !readOnly
                            }),
                            isEditing ? /*#__PURE__*/ jsxs(Fragment, {
                                children: [
                                    /*#__PURE__*/ jsx(StickyNoteTextArea, {
                                        ref: textAreaRef,
                                        value: localContent,
                                        onChange: handleChange,
                                        onBlur: handleBlur,
                                        onKeyDown: handleKeyDown,
                                        onSelect: updateActiveFormats,
                                        onKeyUp: updateActiveFormats,
                                        placeholder: placeholder,
                                        isEditing: isEditing,
                                        className: "nodrag nowheel"
                                    }),
                                    /*#__PURE__*/ jsx(FormattingToolbar, {
                                        containerRef: formattingToolbarRef,
                                        textAreaRef: textAreaRef,
                                        borderColor: color,
                                        activeFormats: activeFormats,
                                        onFormat: handleFormat,
                                        onBlur: handleBlur,
                                        actions: effectiveFormattingActions,
                                        onAction: handleFormattingAction
                                    })
                                ]
                            }) : /*#__PURE__*/ jsx(StickyNoteMarkdown, {
                                ref: markdownRef,
                                ...scrollCaptureProps,
                                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
                                    })
                                })
                            })
                        ]
                    }),
                    shouldRenderToolbarOverlay && /*#__PURE__*/ jsx(NodeToolbar, {
                        nodeId: id,
                        config: toolbarConfig,
                        expanded: true,
                        portalToNodeOverlay: true
                    }),
                    shouldRenderToolbarOverlay && /*#__PURE__*/ jsx(NodeViewportOverlay, {
                        nodeId: id,
                        layer: "nodeToolbar",
                        children: /*#__PURE__*/ jsx(AnimatePresence, {
                            children: isColorPickerOpen && /*#__PURE__*/ jsx("div", {
                                className: "nodrag nopan nowheel",
                                style: {
                                    position: 'absolute',
                                    top: -40,
                                    left: '50%',
                                    transform: 'translateX(40px)',
                                    zIndex: 1000,
                                    pointerEvents: 'auto'
                                },
                                onMouseDown: (e)=>{
                                    e.preventDefault();
                                    e.stopPropagation();
                                },
                                onClick: (e)=>e.stopPropagation(),
                                children: /*#__PURE__*/ jsx(ColorPickerPanel, {
                                    initial: {
                                        opacity: 0,
                                        y: 10
                                    },
                                    animate: {
                                        opacity: 1,
                                        y: 0
                                    },
                                    exit: {
                                        opacity: 0,
                                        y: 10
                                    },
                                    transition: {
                                        duration: 0.15,
                                        ease: 'easeOut'
                                    },
                                    children: Object.keys(STICKY_NOTE_COLORS).map((stickyColorKey)=>{
                                        const colorName = stickyColorKey;
                                        return /*#__PURE__*/ jsx(ColorOption, {
                                            type: "button",
                                            color: STICKY_NOTE_COLORS[colorName],
                                            isSelected: colorKey === colorName,
                                            onClick: ()=>handleColorChange(colorName),
                                            title: colorName.charAt(0).toUpperCase() + colorName.slice(1)
                                        }, stickyColorKey);
                                    })
                                })
                            })
                        })
                    })
                ]
            }),
            enableMediaEmbedding && mediaDialog && /*#__PURE__*/ jsx(StickyNoteMediaDialog, {
                initialMedia: mediaDialog.token?.media,
                onCancel: cancelMediaDialog,
                onSubmit: submitMediaDialog
            })
        ]
    });
};
const StickyNoteNode = /*#__PURE__*/ memo(StickyNoteNodeComponent, areNodePropsEqualIgnoringPosition);
export { StickyNoteNode };
