@jhits/plugin-blog 0.0.1

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

@@ -0,0 +1,826 @@
+/**
+ * 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 React, { useState, useRef, useEffect } from 'react';
+import { Bold, Italic, Underline, Link, Palette } from 'lucide-react';
+
+export interface RichTextFormattingConfig {
+    /** Whether bold formatting is available */
+    bold?: boolean;
+    /** Whether italic formatting is available */
+    italic?: boolean;
+    /** Whether underline formatting is available */
+    underline?: boolean;
+    /** Whether links are available */
+    links?: boolean;
+    /** Available colors (array of color values or Tailwind classes) */
+    colors?: string[];
+    /** Custom CSS classes for formatted text */
+    styles?: {
+        bold?: string;
+        italic?: string;
+        underline?: string;
+        link?: string;
+        /** Color classes mapped by color value */
+        colorClasses?: Record<string, string>;
+    };
+}
+
+export interface RichTextEditorProps {
+    /** HTML content value */
+    value: string;
+    /** Change handler */
+    onChange: (html: string) => void;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Formatting configuration */
+    formatting?: RichTextFormattingConfig;
+    /** Additional CSS classes */
+    className?: string;
+    /** Whether the editor is focused */
+    isFocused?: boolean;
+    /** Custom keydown handler (called before default handler) */
+    onKeyDown?: (e: React.KeyboardEvent) => void;
+}
+
+export function RichTextEditor({
+    value,
+    onChange,
+    placeholder = 'Enter text...',
+    formatting,
+    className = '',
+    isFocused = false,
+    onKeyDown: customOnKeyDown,
+}: RichTextEditorProps) {
+    const editorRef = useRef<HTMLDivElement>(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<string | null>(null);
+
+    // Check which formatting options are available
+    const hasBold = formatting?.bold !== false;
+    const hasItalic = formatting?.italic !== false;
+    const hasUnderline = formatting?.underline !== false;
+    const hasLinks = formatting?.links !== false;
+    const hasColors = 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: MouseEvent) => {
+            const target = e.target as HTMLElement;
+            
+            // 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 = () => {
+        // 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 = editorRef.current?.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<Range | null>(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: string, value?: string) => {
+        document.execCommand(command, false, value);
+        editorRef.current?.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: React.KeyboardEvent) => {
+        // 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 = range.commonAncestorContainer.parentElement?.closest('a');
+                                if (linkElement) {
+                                    setLinkUrl((linkElement as HTMLAnchorElement).href);
+                                }
+                                setShowLinkDialog(true);
+                            }
+                        }
+                    }
+                    break;
+            }
+        }
+    };
+
+    // Handle paste (clean HTML)
+    const handlePaste = (e: React.ClipboardEvent) => {
+        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 = (): string | null => {
+        // Use saved selection if available (when color picker is open)
+        let range: Range | null = 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: Node | null = 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 as HTMLElement;
+                const className = element.className;
+                
+                // Check if this element has any of the configured color classes
+                if (formatting?.styles?.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?.colors) {
+                    for (const color of formatting.colors) {
+                        const colorClass = formatting?.styles?.colorClasses?.[color] || color;
+                        if (typeof className === 'string' && className.includes(colorClass)) {
+                            return color;
+                        }
+                    }
+                }
+            }
+            node = node.parentElement;
+        }
+        
+        return null;
+    };
+
+    // Remove color from selected text
+    const handleRemoveColor = () => {
+        // 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: string[] = [];
+        if (formatting?.styles?.colorClasses) {
+            colorClassesToRemove.push(...Object.values(formatting.styles.colorClasses));
+        }
+        if (formatting?.colors) {
+            for (const color of formatting.colors) {
+                const colorClass = formatting?.styles?.colorClasses?.[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: HTMLElement[] = [];
+        
+        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
+        editorRef.current?.focus();
+    };
+
+    // Apply color
+    const handleApplyColor = (color: string) => {
+        // 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 = formatting?.styles?.colorClasses?.[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
+                editorRef.current?.focus();
+            }
+    };
+
+    // Check if format is active
+    const isFormatActive = (command: string): boolean => {
+        return document.queryCommandState(command);
+    };
+
+    return (
+        <div className={`relative ${className}`}>
+            {/* Toolbar - appears on text selection */}
+            {showToolbar && selectedText && selectedText.trim().length > 0 && (hasBold || hasItalic || hasUnderline || hasLinks || hasColors) && (
+                <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%)',
+                    }}
+                >
+                    {hasBold && (
+                        <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"
+                        >
+                            <Bold size={14} />
+                        </button>
+                    )}
+
+                    {hasItalic && (
+                        <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"
+                        >
+                            <Italic size={14} />
+                        </button>
+                    )}
+
+                    {hasUnderline && (
+                        <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"
+                        >
+                            <Underline size={14} />
+                        </button>
+                    )}
+
+                    {hasLinks && (
+                        <div className="relative">
+                            <button
+                                type="button"
+                                data-link-button
+                                onMouseDown={(e) => e.preventDefault()}
+                                onClick={(e) => {
+                                    e.stopPropagation();
+                                    const selection = window.getSelection();
+                                    if (selection && selection.rangeCount > 0) {
+                                        const range = selection.getRangeAt(0);
+                                        const linkElement = range.commonAncestorContainer.parentElement?.closest('a');
+                                        if (linkElement) {
+                                            setLinkUrl((linkElement as HTMLAnchorElement).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"
+                            >
+                                <Link size={14} />
+                            </button>
+
+                            {showLinkDialog && (
+                                <div 
+                                    data-link-dialog
+                                    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()}
+                                >
+                                    <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
+                                    />
+                                    <div className="flex gap-2 mt-2">
+                                        <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"
+                                        >
+                                            Apply
+                                        </button>
+                                        <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"
+                                        >
+                                            Remove
+                                        </button>
+                                    </div>
+                                </div>
+                            )}
+                        </div>
+                    )}
+
+                    {hasColors && (
+                        <div className="relative">
+                            <button
+                                type="button"
+                                data-color-picker-button
+                                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"
+                            >
+                                <Palette size={14} />
+                            </button>
+
+                            {showColorPicker && (
+                                <div 
+                                    data-color-picker
+                                    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()}
+                                >
+                                    <div className="flex items-center gap-2 flex-nowrap">
+                                        {/* Remove Color Button - only show if a color is currently applied */}
+                                        {currentColor && (
+                                            <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"
+                                            >
+                                                Remove
+                                            </button>
+                                        )}
+                                        
+                                        {formatting?.colors?.map((color) => {
+                                            // Map text color classes to background colors for display
+                                            const getBackgroundColor = (colorKey: string): string => {
+                                                // Remove 'text-' prefix if present
+                                                const baseColor = colorKey.replace(/^text-/, '');
+                                                
+                                                // Map to actual color values
+                                                const colorMap: Record<string, string> = {
+                                                    '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 (
+                                                <button
+                                                    key={color}
+                                                    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)}
+                                                >
+                                                    <span className="sr-only">{colorName}</span>
+                                                </button>
+                                            );
+                                        })}
+                                    </div>
+                                </div>
+                            )}
+                        </div>
+                    )}
+                </div>
+            )}
+
+            {/* Content Editable Editor */}
+            <div
+                ref={editorRef}
+                contentEditable
+                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 as HTMLElement;
+                    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' }}
+            />
+        </div>
+    );
+}
+