@jhits/plugin-blog 0.0.10 → 0.0.12

package/src/lib/rich-text/RichTextEditor.js

@@ -1,564 +0,0 @@
-/**
- * Rich Text Editor Component
- * Provides formatting toolbar (bold, italic, underline, links, colors)
- * Only shows options if client has provided styles for them
- */
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useRef, useEffect } from 'react';
-import { Bold, Italic, Underline, Link, Palette } from 'lucide-react';
-export function RichTextEditor({ value, onChange, placeholder = 'Enter text...', formatting, className = '', isFocused = false, onKeyDown: customOnKeyDown, }) {
-    var _a;
-    const editorRef = useRef(null);
-    const [showToolbar, setShowToolbar] = useState(false);
-    const [toolbarPosition, setToolbarPosition] = useState({ top: 0, left: 0 });
-    const [showLinkDialog, setShowLinkDialog] = useState(false);
-    const [linkUrl, setLinkUrl] = useState('');
-    const [showColorPicker, setShowColorPicker] = useState(false);
-    const [selectedText, setSelectedText] = useState('');
-    const [currentColor, setCurrentColor] = useState(null);
-    // Check which formatting options are available
-    const hasBold = (formatting === null || formatting === void 0 ? void 0 : formatting.bold) !== false;
-    const hasItalic = (formatting === null || formatting === void 0 ? void 0 : formatting.italic) !== false;
-    const hasUnderline = (formatting === null || formatting === void 0 ? void 0 : formatting.underline) !== false;
-    const hasLinks = (formatting === null || formatting === void 0 ? void 0 : formatting.links) !== false;
-    const hasColors = (formatting === null || formatting === void 0 ? void 0 : formatting.colors) && formatting.colors.length > 0;
-    // Initialize content when component mounts
-    useEffect(() => {
-        if (editorRef.current && !editorRef.current.innerHTML && value) {
-            editorRef.current.innerHTML = value;
-        }
-    }, []); // Only run on mount
-    // Update content when value prop changes (but avoid if user is editing)
-    useEffect(() => {
-        if (editorRef.current && document.activeElement !== editorRef.current) {
-            if (editorRef.current.innerHTML !== value) {
-                editorRef.current.innerHTML = value || '';
-            }
-        }
-    }, [value]);
-    // Handle focus prop
-    useEffect(() => {
-        if (isFocused && editorRef.current) {
-            // Use requestAnimationFrame to ensure DOM is ready
-            requestAnimationFrame(() => {
-                if (editorRef.current) {
-                    editorRef.current.focus();
-                    // Place cursor at the end
-                    const range = document.createRange();
-                    range.selectNodeContents(editorRef.current);
-                    range.collapse(false);
-                    const selection = window.getSelection();
-                    if (selection) {
-                        selection.removeAllRanges();
-                        selection.addRange(range);
-                    }
-                }
-            });
-        }
-    }, [isFocused]);
-    // Close color picker and link dialog when clicking outside, and hide toolbar when no selection
-    useEffect(() => {
-        const handleClickOutside = (e) => {
-            const target = e.target;
-            // Check if click is outside color picker
-            if (showColorPicker) {
-                const colorPicker = target.closest('[data-color-picker]');
-                const colorPickerButton = target.closest('[data-color-picker-button]');
-                if (!colorPicker && !colorPickerButton) {
-                    setShowColorPicker(false);
-                }
-            }
-            // Check if click is outside link dialog
-            if (showLinkDialog) {
-                const linkDialog = target.closest('[data-link-dialog]');
-                const linkButton = target.closest('[data-link-button]');
-                if (!linkDialog && !linkButton) {
-                    setShowLinkDialog(false);
-                }
-            }
-            // Check if click is outside editor and toolbar - hide toolbar if no selection
-            if (editorRef.current && !editorRef.current.contains(target)) {
-                const toolbar = target.closest('[class*="z-50"]');
-                if (!toolbar) {
-                    // Check if there's actually a selection
-                    setTimeout(() => {
-                        const selection = window.getSelection();
-                        if (!selection || selection.rangeCount === 0 || selection.getRangeAt(0).collapsed) {
-                            setShowToolbar(false);
-                            setSelectedText('');
-                        }
-                        else {
-                            // Re-check selection to ensure it's still valid
-                            handleSelectionChange();
-                        }
-                    }, 0);
-                }
-            }
-            else if (editorRef.current && editorRef.current.contains(target)) {
-                // Clicked inside editor - check selection after a brief delay
-                setTimeout(() => {
-                    handleSelectionChange();
-                }, 10);
-            }
-        };
-        document.addEventListener('mousedown', handleClickOutside);
-        return () => {
-            document.removeEventListener('mousedown', handleClickOutside);
-        };
-    }, [showColorPicker, showLinkDialog]);
-    // Handle selection change to show/hide toolbar
-    const handleSelectionChange = () => {
-        var _a;
-        // Don't hide toolbar if color picker or link dialog is open
-        if (showColorPicker || showLinkDialog) {
-            return;
-        }
-        const selection = window.getSelection();
-        if (!selection || selection.rangeCount === 0) {
-            setShowToolbar(false);
-            setSelectedText('');
-            return;
-        }
-        const range = selection.getRangeAt(0);
-        // Check if selection is collapsed (no text selected)
-        if (range.collapsed) {
-            setShowToolbar(false);
-            setSelectedText('');
-            return;
-        }
-        // Check if the selection is within our editor
-        if (!editorRef.current || !editorRef.current.contains(range.commonAncestorContainer)) {
-            setShowToolbar(false);
-            setSelectedText('');
-            return;
-        }
-        // Get selected text and check if it's not empty
-        const selectedText = selection.toString().trim();
-        if (!selectedText) {
-            setShowToolbar(false);
-            setSelectedText('');
-            return;
-        }
-        setSelectedText(selectedText);
-        // Calculate toolbar position
-        const rect = range.getBoundingClientRect();
-        const editorRect = (_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-        if (editorRect) {
-            setToolbarPosition({
-                top: rect.top - editorRect.top - 40,
-                left: rect.left - editorRect.left + (rect.width / 2),
-            });
-            setShowToolbar(true);
-        }
-    };
-    // Store selection range before button clicks
-    const savedRangeRef = useRef(null);
-    // Save selection before it's lost
-    const saveSelection = () => {
-        const selection = window.getSelection();
-        if (selection && selection.rangeCount > 0) {
-            savedRangeRef.current = selection.getRangeAt(0).cloneRange();
-        }
-    };
-    // Restore saved selection
-    const restoreSelection = () => {
-        if (savedRangeRef.current && editorRef.current) {
-            const selection = window.getSelection();
-            if (selection) {
-                selection.removeAllRanges();
-                selection.addRange(savedRangeRef.current);
-            }
-        }
-    };
-    // Apply formatting command
-    // Note: Client styles are applied in RichTextPreview component
-    // The editor stores standard HTML tags, and preview applies client styles
-    const applyFormat = (command, value) => {
-        var _a;
-        document.execCommand(command, false, value);
-        (_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-        updateContent();
-    };
-    // Update content from editor
-    const updateContent = () => {
-        if (editorRef.current) {
-            onChange(editorRef.current.innerHTML);
-        }
-    };
-    // Handle input
-    const handleInput = () => {
-        updateContent();
-    };
-    // Handle keyboard shortcuts
-    const handleKeyDown = (e) => {
-        var _a;
-        // Call custom handler first (allows parent to intercept keys like Enter)
-        if (customOnKeyDown) {
-            customOnKeyDown(e);
-            // If custom handler prevented default, don't process further
-            if (e.defaultPrevented) {
-                return;
-            }
-        }
-        // Check for Ctrl/Cmd + key combinations
-        const isModifierPressed = e.ctrlKey || e.metaKey;
-        if (isModifierPressed) {
-            switch (e.key.toLowerCase()) {
-                case 'b':
-                    if (hasBold) {
-                        e.preventDefault();
-                        e.stopPropagation(); // Prevent event from bubbling to window-level listeners
-                        applyFormat('bold');
-                    }
-                    break;
-                case 'i':
-                    if (hasItalic) {
-                        e.preventDefault();
-                        e.stopPropagation(); // Prevent event from bubbling to window-level listeners
-                        applyFormat('italic');
-                    }
-                    break;
-                case 'u':
-                    if (hasUnderline) {
-                        e.preventDefault();
-                        e.stopPropagation(); // Prevent event from bubbling to window-level listeners
-                        applyFormat('underline');
-                    }
-                    break;
-                case 'k':
-                    if (hasLinks) {
-                        e.preventDefault();
-                        e.stopPropagation(); // Prevent event from bubbling to window-level listeners
-                        // Get selected text and open link dialog
-                        const selection = window.getSelection();
-                        if (selection && selection.rangeCount > 0) {
-                            const range = selection.getRangeAt(0);
-                            if (!range.collapsed) {
-                                // Check if selection is already a link
-                                const linkElement = (_a = range.commonAncestorContainer.parentElement) === null || _a === void 0 ? void 0 : _a.closest('a');
-                                if (linkElement) {
-                                    setLinkUrl(linkElement.href);
-                                }
-                                setShowLinkDialog(true);
-                            }
-                        }
-                    }
-                    break;
-            }
-        }
-    };
-    // Handle paste (clean HTML)
-    const handlePaste = (e) => {
-        e.preventDefault();
-        const text = e.clipboardData.getData('text/plain');
-        document.execCommand('insertText', false, text);
-        updateContent();
-    };
-    // Handle link creation
-    const handleCreateLink = () => {
-        if (!linkUrl.trim())
-            return;
-        const selection = window.getSelection();
-        if (selection && selection.rangeCount > 0) {
-            const range = selection.getRangeAt(0);
-            if (!range.collapsed) {
-                applyFormat('createLink', linkUrl);
-                setShowLinkDialog(false);
-                setLinkUrl('');
-            }
-        }
-    };
-    // Check if selected text has a color applied
-    const getSelectedColor = () => {
-        var _a, _b, _c;
-        // Use saved selection if available (when color picker is open)
-        let range = null;
-        if (savedRangeRef.current) {
-            range = savedRangeRef.current;
-        }
-        else {
-            const selection = window.getSelection();
-            if (!selection || selection.rangeCount === 0)
-                return null;
-            range = selection.getRangeAt(0);
-        }
-        if (!range || range.collapsed)
-            return null;
-        // Check if the selection is within a span with a color class
-        let node = range.commonAncestorContainer;
-        // If the node is a text node, check its parent
-        if (node.nodeType === Node.TEXT_NODE) {
-            node = node.parentElement;
-        }
-        // Check if the node or any parent has a color class
-        while (node && node !== editorRef.current) {
-            if (node.nodeType === Node.ELEMENT_NODE) {
-                const element = node;
-                const className = element.className;
-                // Check if this element has any of the configured color classes
-                if ((_a = formatting === null || formatting === void 0 ? void 0 : formatting.styles) === null || _a === void 0 ? void 0 : _a.colorClasses) {
-                    for (const [colorKey, colorClass] of Object.entries(formatting.styles.colorClasses)) {
-                        if (typeof className === 'string' && className.includes(colorClass)) {
-                            return colorKey;
-                        }
-                    }
-                }
-                // Also check direct color classes
-                if (formatting === null || formatting === void 0 ? void 0 : formatting.colors) {
-                    for (const color of formatting.colors) {
-                        const colorClass = ((_c = (_b = formatting === null || formatting === void 0 ? void 0 : formatting.styles) === null || _b === void 0 ? void 0 : _b.colorClasses) === null || _c === void 0 ? void 0 : _c[color]) || color;
-                        if (typeof className === 'string' && className.includes(colorClass)) {
-                            return color;
-                        }
-                    }
-                }
-            }
-            node = node.parentElement;
-        }
-        return null;
-    };
-    // Remove color from selected text
-    const handleRemoveColor = () => {
-        var _a, _b, _c, _d;
-        // Restore the saved selection first
-        restoreSelection();
-        const selection = window.getSelection();
-        if (!selection || selection.rangeCount === 0)
-            return;
-        const range = selection.getRangeAt(0);
-        if (range.collapsed)
-            return;
-        // Get all color classes to check for
-        const colorClassesToRemove = [];
-        if ((_a = formatting === null || formatting === void 0 ? void 0 : formatting.styles) === null || _a === void 0 ? void 0 : _a.colorClasses) {
-            colorClassesToRemove.push(...Object.values(formatting.styles.colorClasses));
-        }
-        if (formatting === null || formatting === void 0 ? void 0 : formatting.colors) {
-            for (const color of formatting.colors) {
-                const colorClass = ((_c = (_b = formatting === null || formatting === void 0 ? void 0 : formatting.styles) === null || _b === void 0 ? void 0 : _b.colorClasses) === null || _c === void 0 ? void 0 : _c[color]) || color;
-                if (!colorClassesToRemove.includes(colorClass)) {
-                    colorClassesToRemove.push(colorClass);
-                }
-            }
-        }
-        if (colorClassesToRemove.length === 0)
-            return;
-        // Get the editor element
-        if (!editorRef.current)
-            return;
-        // Find all spans in the editor that intersect with the selection
-        const allSpans = editorRef.current.querySelectorAll('span');
-        const spansToProcess = [];
-        allSpans.forEach(span => {
-            // Check if span intersects with selection
-            if (range.intersectsNode(span)) {
-                const className = span.className || '';
-                // Check if span has any color class
-                for (const colorClass of colorClassesToRemove) {
-                    if (className.includes(colorClass)) {
-                        spansToProcess.push(span);
-                        break;
-                    }
-                }
-            }
-        });
-        // Process spans - remove color classes or unwrap
-        spansToProcess.forEach(span => {
-            const className = span.className || '';
-            let newClassName = className;
-            // Remove all color classes
-            for (const colorClass of colorClassesToRemove) {
-                const escapedClass = colorClass.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-                newClassName = newClassName
-                    .replace(new RegExp(`\\b${escapedClass}\\b`, 'g'), '')
-                    .replace(/\s+/g, ' ')
-                    .trim();
-            }
-            // Update or remove class
-            if (!newClassName) {
-                // Unwrap the span - move children to parent
-                const parent = span.parentNode;
-                if (parent) {
-                    const fragment = document.createDocumentFragment();
-                    while (span.firstChild) {
-                        fragment.appendChild(span.firstChild);
-                    }
-                    parent.replaceChild(fragment, span);
-                }
-            }
-            else {
-                span.className = newClassName;
-            }
-        });
-        // Normalize to merge text nodes
-        if (editorRef.current) {
-            editorRef.current.normalize();
-        }
-        // Update content
-        updateContent();
-        setShowColorPicker(false);
-        setCurrentColor(null);
-        // Restore focus
-        (_d = editorRef.current) === null || _d === void 0 ? void 0 : _d.focus();
-    };
-    // Apply color
-    const handleApplyColor = (color) => {
-        var _a, _b, _c;
-        // Restore the saved selection first
-        restoreSelection();
-        const selection = window.getSelection();
-        if (!selection || selection.rangeCount === 0) {
-            return;
-        }
-        const range = selection.getRangeAt(0);
-        if (!range.collapsed) {
-            // Check if the selected text already has this color
-            const currentColor = getSelectedColor();
-            if (currentColor === color) {
-                // If clicking the same color, remove it
-                handleRemoveColor();
-                return;
-            }
-            // Remove any existing color first
-            if (currentColor) {
-                handleRemoveColor();
-                // Restore selection after removing color
-                restoreSelection();
-            }
-            const colorClass = ((_b = (_a = formatting === null || formatting === void 0 ? void 0 : formatting.styles) === null || _a === void 0 ? void 0 : _a.colorClasses) === null || _b === void 0 ? void 0 : _b[color]) || color;
-            // Create a span with the color class
-            const span = document.createElement('span');
-            span.className = colorClass;
-            try {
-                range.surroundContents(span);
-            }
-            catch (e) {
-                // If surroundContents fails, try a different approach
-                span.appendChild(range.extractContents());
-                range.insertNode(span);
-            }
-            updateContent();
-            setShowColorPicker(false);
-            setCurrentColor(null);
-            // Ensure the cursor stays active
-            (_c = editorRef.current) === null || _c === void 0 ? void 0 : _c.focus();
-        }
-    };
-    // Check if format is active
-    const isFormatActive = (command) => {
-        return document.queryCommandState(command);
-    };
-    return (_jsxs("div", { className: `relative ${className}`, children: [showToolbar && selectedText && selectedText.trim().length > 0 && (hasBold || hasItalic || hasUnderline || hasLinks || hasColors) && (_jsxs("div", { className: "absolute z-50 flex items-center gap-1 p-2 bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-lg shadow-lg", style: {
-                    top: `${toolbarPosition.top}px`,
-                    left: `${toolbarPosition.left}px`,
-                    transform: 'translateX(-50%)',
-                }, children: [hasBold && (_jsx("button", { type: "button", onMouseDown: (e) => e.preventDefault(), onClick: () => applyFormat('bold'), className: `p-1.5 rounded hover:bg-neutral-100 dark:hover:bg-neutral-700 transition-colors ${isFormatActive('bold') ? 'bg-primary/10 text-primary' : 'text-neutral-600 dark:text-neutral-400'}`, title: "Bold", children: _jsx(Bold, { size: 14 }) })), hasItalic && (_jsx("button", { type: "button", onMouseDown: (e) => e.preventDefault(), onClick: () => applyFormat('italic'), className: `p-1.5 rounded hover:bg-neutral-100 dark:hover:bg-neutral-700 transition-colors ${isFormatActive('italic') ? 'bg-primary/10 text-primary' : 'text-neutral-600 dark:text-neutral-400'}`, title: "Italic", children: _jsx(Italic, { size: 14 }) })), hasUnderline && (_jsx("button", { type: "button", onMouseDown: (e) => e.preventDefault(), onClick: () => applyFormat('underline'), className: `p-1.5 rounded hover:bg-neutral-100 dark:hover:bg-neutral-700 transition-colors ${isFormatActive('underline') ? 'bg-primary/10 text-primary' : 'text-neutral-600 dark:text-neutral-400'}`, title: "Underline", children: _jsx(Underline, { size: 14 }) })), hasLinks && (_jsxs("div", { className: "relative", children: [_jsx("button", { type: "button", "data-link-button": true, onMouseDown: (e) => e.preventDefault(), onClick: (e) => {
-                                    var _a;
-                                    e.stopPropagation();
-                                    const selection = window.getSelection();
-                                    if (selection && selection.rangeCount > 0) {
-                                        const range = selection.getRangeAt(0);
-                                        const linkElement = (_a = range.commonAncestorContainer.parentElement) === null || _a === void 0 ? void 0 : _a.closest('a');
-                                        if (linkElement) {
-                                            setLinkUrl(linkElement.href);
-                                        }
-                                    }
-                                    setShowLinkDialog(!showLinkDialog);
-                                }, className: `p-1.5 rounded hover:bg-neutral-100 dark:hover:bg-neutral-700 transition-colors ${isFormatActive('unlink') ? 'bg-primary/10 text-primary' : 'text-neutral-600 dark:text-neutral-400'}`, title: "Link", children: _jsx(Link, { size: 14 }) }), showLinkDialog && (_jsxs("div", { "data-link-dialog": true, className: "absolute top-full left-0 mt-2 p-3 bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-lg shadow-lg min-w-[300px] z-[60]", onMouseDown: (e) => e.stopPropagation(), onClick: (e) => e.stopPropagation(), children: [_jsx("input", { type: "url", value: linkUrl, onChange: (e) => setLinkUrl(e.target.value), placeholder: "Enter URL...", className: "w-full px-3 py-2 text-sm border border-neutral-300 dark:border-neutral-700 rounded-lg bg-white dark:bg-neutral-900 text-neutral-900 dark:text-neutral-100 outline-none focus:border-primary", onKeyDown: (e) => {
-                                            if (e.key === 'Enter') {
-                                                handleCreateLink();
-                                            }
-                                            else if (e.key === 'Escape') {
-                                                setShowLinkDialog(false);
-                                            }
-                                        }, autoFocus: true }), _jsxs("div", { className: "flex gap-2 mt-2", children: [_jsx("button", { type: "button", onClick: handleCreateLink, className: "flex-1 px-3 py-1.5 text-xs font-bold bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors", children: "Apply" }), _jsx("button", { type: "button", onClick: () => {
-                                                    applyFormat('unlink');
-                                                    setShowLinkDialog(false);
-                                                }, className: "px-3 py-1.5 text-xs font-bold border border-neutral-300 dark:border-neutral-700 rounded-lg hover:bg-neutral-100 dark:hover:bg-neutral-700 transition-colors", children: "Remove" })] })] }))] })), hasColors && (_jsxs("div", { className: "relative", children: [_jsx("button", { type: "button", "data-color-picker-button": true, onMouseDown: (e) => {
-                                    e.preventDefault();
-                                    saveSelection(); // Save selection before opening color picker
-                                    // Also check current color when saving selection
-                                    setTimeout(() => {
-                                        const color = getSelectedColor();
-                                        setCurrentColor(color);
-                                    }, 0);
-                                }, onClick: (e) => {
-                                    e.stopPropagation();
-                                    // Check current color before opening picker
-                                    const color = getSelectedColor();
-                                    setCurrentColor(color);
-                                    setShowColorPicker(!showColorPicker);
-                                }, className: "p-1.5 rounded hover:bg-neutral-100 dark:hover:bg-neutral-700 transition-colors text-neutral-600 dark:text-neutral-400", title: "Text Color", children: _jsx(Palette, { size: 14 }) }), showColorPicker && (_jsx("div", { "data-color-picker": true, className: "absolute top-full left-1/2 -translate-x-1/2 mt-2 p-2.5 bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-lg shadow-xl z-[60]", style: {
-                                    minWidth: 'fit-content',
-                                    maxWidth: 'none',
-                                    isolation: 'isolate'
-                                }, onMouseDown: (e) => e.stopPropagation(), onClick: (e) => e.stopPropagation(), children: _jsxs("div", { className: "flex items-center gap-2 flex-nowrap", children: [currentColor && (_jsx("button", { type: "button", onMouseDown: (e) => {
-                                                e.preventDefault();
-                                                e.stopPropagation();
-                                            }, onClick: (e) => {
-                                                e.preventDefault();
-                                                e.stopPropagation();
-                                                handleRemoveColor();
-                                                setCurrentColor(null);
-                                            }, className: "flex-shrink-0 px-2.5 py-1.5 text-xs font-medium border border-neutral-300 dark:border-neutral-600 rounded-md hover:bg-neutral-100 dark:hover:bg-neutral-700 transition-colors text-neutral-700 dark:text-neutral-300", title: "Remove Color", children: "Remove" })), (_a = formatting === null || formatting === void 0 ? void 0 : formatting.colors) === null || _a === void 0 ? void 0 : _a.map((color) => {
-                                            // Map text color classes to background colors for display
-                                            const getBackgroundColor = (colorKey) => {
-                                                // Remove 'text-' prefix if present
-                                                const baseColor = colorKey.replace(/^text-/, '');
-                                                // Map to actual color values
-                                                const colorMap = {
-                                                    'forest': '#6B7C5A',
-                                                    'sage': '#9CAF88',
-                                                    'primary': '#94b17b',
-                                                    'soft-green': '#A8C09A',
-                                                };
-                                                return colorMap[baseColor] || '#6B7C5A'; // Default to forest
-                                            };
-                                            const bgColor = getBackgroundColor(color);
-                                            const colorName = color.replace(/^text-/, '');
-                                            return (_jsx("button", { type: "button", onMouseDown: (e) => {
-                                                    e.preventDefault();
-                                                    e.stopPropagation();
-                                                }, onClick: (e) => {
-                                                    e.preventDefault();
-                                                    e.stopPropagation();
-                                                    handleApplyColor(color);
-                                                }, className: "relative group flex-shrink-0 w-8 h-8 rounded-md border border-neutral-300 dark:border-neutral-600 hover:border-neutral-500 dark:hover:border-neutral-400 transition-all duration-150 hover:scale-110 active:scale-95", style: {
-                                                    backgroundColor: bgColor,
-                                                    boxShadow: 'inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.1)'
-                                                }, title: colorName.charAt(0).toUpperCase() + colorName.slice(1), children: _jsx("span", { className: "sr-only", children: colorName }) }, color));
-                                        })] }) }))] }))] })), _jsx("div", { ref: editorRef, contentEditable: true, onInput: handleInput, onPaste: handlePaste, onKeyDown: handleKeyDown, onSelect: () => {
-                    // Small delay to ensure selection is updated
-                    setTimeout(() => {
-                        handleSelectionChange();
-                    }, 0);
-                }, onMouseUp: (e) => {
-                    // Don't trigger selection change if clicking on toolbar/dropdowns
-                    const target = e.target;
-                    if (!target.closest('[class*="z-50"], [class*="z-[60]"]')) {
-                        // Small delay to ensure selection is updated
-                        setTimeout(() => {
-                            handleSelectionChange();
-                        }, 0);
-                    }
-                }, onKeyUp: () => {
-                    // Small delay to ensure selection is updated
-                    setTimeout(() => {
-                        handleSelectionChange();
-                    }, 0);
-                }, onBlur: () => {
-                    // Hide toolbar when editor loses focus (unless dropdowns are open)
-                    if (!showColorPicker && !showLinkDialog) {
-                        setTimeout(() => {
-                            const selection = window.getSelection();
-                            if (!selection || selection.rangeCount === 0 || selection.getRangeAt(0).collapsed) {
-                                setShowToolbar(false);
-                                setSelectedText('');
-                            }
-                        }, 100); // Small delay to allow dropdown clicks
-                    }
-                }, "data-placeholder": placeholder, className: `outline-none min-h-[24px] ${!value || value === '<br>' || value === '<div><br></div>'
-                    ? 'before:content-[attr(data-placeholder)] before:text-neutral-400 dark:before:text-neutral-500 before:pointer-events-none'
-                    : ''}`, style: { userSelect: 'text' } })] }));
-}