@jhits/plugin-blog 0.0.7 → 0.0.9

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

@@ -0,0 +1,556 @@
+/**
+ * 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, }) {
+    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?.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) => {
+            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 = () => {
+        // 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(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) => {
+        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) => {
+        // 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.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 = () => {
+        // 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 (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 = [];
+        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 = [];
+        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) => {
+        // 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) => {
+        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) => {
+                                    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.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" })), formatting?.colors?.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' } })] }));
+}

package/dist/lib/rich-text/RichTextPreview.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Rich Text Preview Component
+ * Renders HTML content with client-provided styles
+ * Also supports plain text with formatting markers using the plugin-content parser
+ */
+import { RichTextFormattingConfig } from './RichTextEditor';
+export interface RichTextPreviewProps {
+    /** HTML content or plain text with formatting markers to render */
+    content: string;
+    /** Formatting configuration (for applying client styles to HTML) */
+    formatting?: RichTextFormattingConfig;
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare function RichTextPreview({ content, formatting, className, }: RichTextPreviewProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=RichTextPreview.d.ts.map

package/dist/lib/rich-text/RichTextPreview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RichTextPreview.d.ts","sourceRoot":"","sources":["../../../src/lib/rich-text/RichTextPreview.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAKH,OAAO,EAAE,wBAAwB,EAAE,MAAM,kBAAkB,CAAC;AAG5D,MAAM,WAAW,oBAAoB;IACjC,mEAAmE;IACnE,OAAO,EAAE,MAAM,CAAC;IAChB,oEAAoE;IACpE,UAAU,CAAC,EAAE,wBAAwB,CAAC;IACtC,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAkBD,wBAAgB,eAAe,CAAC,EAC5B,OAAO,EACP,UAAU,EACV,SAAc,GACjB,EAAE,oBAAoB,2CAuKtB"}