flikkui 0.1.0-beta.8 → 0.1.0-beta.9

package/dist/components/forms/RichTextEditor/RichTextEditor.js

@@ -0,0 +1,960 @@
+import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import React__default, { useState, useRef, useCallback, useEffect } from 'react';
+import { FormLabel } from '../FormLabel/FormLabel.js';
+import { richTextEditorTheme, colorOptions } from './RichTextEditor.theme.js';
+import { cn } from '../../../utils/cn.js';
+import Button from '../../core/Button/Button.js';
+import ForwardRef from '../../../node_modules/@heroicons/react/24/outline/esm/ArrowUturnRightIcon.js';
+import ForwardRef$1 from '../../../node_modules/@heroicons/react/24/outline/esm/ArrowUturnLeftIcon.js';
+import ForwardRef$2 from '../../../node_modules/@heroicons/react/24/outline/esm/Bars3BottomRightIcon.js';
+import ForwardRef$3 from '../../../node_modules/@heroicons/react/24/outline/esm/Bars3Icon.js';
+import ForwardRef$4 from '../../../node_modules/@heroicons/react/24/outline/esm/Bars3BottomLeftIcon.js';
+import ForwardRef$5 from '../../../node_modules/@heroicons/react/24/solid/esm/PaintBrushIcon.js';
+import ForwardRef$6 from '../../../node_modules/@heroicons/react/24/outline/esm/UnderlineIcon.js';
+import ForwardRef$7 from '../../../node_modules/@heroicons/react/24/outline/esm/ItalicIcon.js';
+import ForwardRef$8 from '../../../node_modules/@heroicons/react/24/outline/esm/BoldIcon.js';
+
+var RichTextEditor = React__default.forwardRef(function (_a, ref) {
+    var _b = _a.size, size = _b === void 0 ? "md" : _b, _c = _a.state, state = _c === void 0 ? "default" : _c, _d = _a.className, className = _d === void 0 ? "" : _d, label = _a.label, _e = _a.labelClassName, labelClassName = _e === void 0 ? "" : _e, helperText = _a.helperText, _f = _a.helperTextClassName, helperTextClassName = _f === void 0 ? "" : _f, _g = _a.value, value = _g === void 0 ? "" : _g, onChange = _a.onChange, _h = _a.placeholder, placeholder = _h === void 0 ? "Start typing..." : _h, id = _a.id, required = _a.required, _j = _a.minHeight, minHeight = _j === void 0 ? 120 : _j, maxHeight = _a.maxHeight, _k = _a.toolbar, toolbar = _k === void 0 ? {
+        show: true,
+        position: "top",
+        tools: ["bold", "italic", "underline", "separator", "textColor", "separator", "alignLeft", "alignCenter", "alignRight", "separator", "undo", "redo"]
+    } : _k; _a.theme; var props = __rest(_a, ["size", "state", "className", "label", "labelClassName", "helperText", "helperTextClassName", "value", "onChange", "placeholder", "id", "required", "minHeight", "maxHeight", "toolbar", "theme"]);
+    var _m = useState(false), isFocused = _m[0], setIsFocused = _m[1];
+    var _o = useState(false), showToolbar = _o[0], setShowToolbar = _o[1];
+    var _p = useState({ top: 0, left: 0 }), toolbarPosition = _p[0], setToolbarPosition = _p[1];
+    var _q = useState({
+        bold: false,
+        italic: false,
+        underline: false,
+        textAlign: 'left',
+        fontSize: '14px',
+        textColor: '#000000',
+    }), formattingState = _q[0], setFormattingState = _q[1];
+    var _r = useState(false), showColorPicker = _r[0], setShowColorPicker = _r[1];
+    var _s = useState(['']), history = _s[0], setHistory = _s[1];
+    var _t = useState(0), historyIndex = _t[0], setHistoryIndex = _t[1];
+    var _u = useState(null), savedSelection = _u[0], setSavedSelection = _u[1];
+    var editorRef = useRef(null);
+    var toolbarRef = useRef(null);
+    var isInteractingRef = useRef(false);
+    var savedSelectionRangeRef = useRef(null);
+    var editorId = id || "rich-text-editor-".concat(Math.random().toString(36).substring(2, 9));
+    // Derived state flags
+    var isDisabled = state === "disabled";
+    var isInvalid = state === "invalid";
+    // Get data attributes for state handling
+    var getDataState = function () {
+        if (isDisabled)
+            return "disabled";
+        if (isInvalid)
+            return "invalid";
+        if (isFocused)
+            return "focus";
+        return "default";
+    };
+    // Save current selection position with simplified approach
+    var saveSelection = function () {
+        try {
+            var selection = window.getSelection();
+            if (!selection || !editorRef.current || selection.rangeCount === 0 || selection.isCollapsed) {
+                setSavedSelection(null);
+                savedSelectionRangeRef.current = null;
+                return;
+            }
+            var range = selection.getRangeAt(0);
+            // Only save if the selection is within our editor
+            if (!editorRef.current.contains(range.commonAncestorContainer)) {
+                setSavedSelection(null);
+                savedSelectionRangeRef.current = null;
+                return;
+            }
+            // Simple approach: save the range directly instead of converting to offsets
+            // This avoids complex text offset calculations that can fail
+            var clonedRange = range.cloneRange();
+            savedSelection = clonedRange; // We'll store the actual range
+            // For compatibility with existing code, still calculate offsets as backup
+            var preCaretRange = range.cloneRange();
+            preCaretRange.selectNodeContents(editorRef.current);
+            preCaretRange.setEnd(range.startContainer, range.startOffset);
+            var start = preCaretRange.toString().length;
+            preCaretRange.setEnd(range.endContainer, range.endOffset);
+            var end = preCaretRange.toString().length;
+            // Store both offset-based selection and range for compatibility
+            setSavedSelection({ start: start, end: end });
+            // Store the actual range separately on the ref to avoid type issues
+            savedSelectionRangeRef.current = clonedRange;
+        }
+        catch (error) {
+            console.warn('Failed to save selection:', error);
+            setSavedSelection(null);
+            savedSelectionRangeRef.current = null;
+        }
+    };
+    // Restore saved selection with simplified approach
+    var restoreSelection = function () {
+        var _a;
+        if (!savedSelection || !editorRef.current)
+            return;
+        try {
+            var selection = window.getSelection();
+            if (!selection)
+                return;
+            // First try to restore from the saved range if available
+            if (savedSelectionRangeRef.current) {
+                var savedRange = savedSelectionRangeRef.current;
+                // Verify the range is still valid
+                try {
+                    if (editorRef.current.contains(savedRange.commonAncestorContainer)) {
+                        selection.removeAllRanges();
+                        selection.addRange(savedRange.cloneRange());
+                        editorRef.current.focus();
+                        return;
+                    }
+                }
+                catch (rangeError) {
+                    console.warn('Saved range invalid, falling back to offset method:', rangeError);
+                }
+            }
+            // Fallback to offset-based restoration
+            if (typeof savedSelection.start === 'number' && typeof savedSelection.end === 'number') {
+                var range = document.createRange();
+                var walker = document.createTreeWalker(editorRef.current, NodeFilter.SHOW_TEXT);
+                var currentPos = 0;
+                var startNode = null;
+                var endNode = null;
+                var startOffset = 0;
+                var endOffset = 0;
+                var node = void 0;
+                while (node = walker.nextNode()) {
+                    var nodeLength = ((_a = node.textContent) === null || _a === void 0 ? void 0 : _a.length) || 0;
+                    if (startNode === null && currentPos + nodeLength >= savedSelection.start) {
+                        startNode = node;
+                        startOffset = Math.min(savedSelection.start - currentPos, nodeLength);
+                    }
+                    if (endNode === null && currentPos + nodeLength >= savedSelection.end) {
+                        endNode = node;
+                        endOffset = Math.min(savedSelection.end - currentPos, nodeLength);
+                        break;
+                    }
+                    currentPos += nodeLength;
+                }
+                if (startNode && endNode) {
+                    range.setStart(startNode, Math.max(0, startOffset));
+                    range.setEnd(endNode, Math.max(0, endOffset));
+                    selection.removeAllRanges();
+                    selection.addRange(range);
+                    editorRef.current.focus();
+                }
+            }
+        }
+        catch (error) {
+            console.warn('Failed to restore selection:', error);
+            // Simple fallback: don't restore selection, let user reselect
+        }
+    };
+    // Modern text formatting using Selection and Range APIs
+    var applyFormatting = useCallback(function (command, value) {
+        if (isDisabled || !editorRef.current)
+            return;
+        var selection = window.getSelection();
+        if (!selection || selection.rangeCount === 0)
+            return;
+        var range = selection.getRangeAt(0);
+        try {
+            switch (command) {
+                case 'bold':
+                    toggleInlineStyle(range, 'font-weight', 'bold');
+                    break;
+                case 'italic':
+                    toggleInlineStyle(range, 'font-style', 'italic');
+                    break;
+                case 'underline':
+                    toggleInlineStyle(range, 'text-decoration', 'underline');
+                    break;
+                case 'textColor':
+                    if (value)
+                        applyInlineStyle(range, 'color', value);
+                    break;
+                case 'fontSize':
+                    if (value)
+                        applyInlineStyle(range, 'font-size', value);
+                    break;
+                case 'alignLeft':
+                case 'alignCenter':
+                case 'alignRight':
+                case 'alignJustify':
+                    applyAlignment(command.replace('align', '').toLowerCase());
+                    break;
+            }
+            updateFormattingState();
+            handleContentChange();
+            saveToHistory();
+        }
+        catch (error) {
+            console.warn('Formatting command failed:', error);
+        }
+    }, [isDisabled]);
+    // Modern inline style application with span reuse
+    var applyInlineStyle = function (range, styleName, styleValue) {
+        var _a;
+        // Check if we can reuse an existing span
+        if (range.collapsed) {
+            // For collapsed range (cursor position), look for existing span to modify
+            var element = range.commonAncestorContainer;
+            if (element && element.nodeType === Node.TEXT_NODE) {
+                element = element.parentElement;
+            }
+            while (element && element !== editorRef.current) {
+                if (element.nodeType === Node.ELEMENT_NODE && element.tagName === 'SPAN') {
+                    var span_1 = element;
+                    span_1.style.setProperty(styleName, styleValue);
+                    return; // Style applied to existing span
+                }
+                element = element.parentElement;
+            }
+            return; // For cursor position without existing span, do nothing
+        }
+        // For text selections, check if we can extend existing spans
+        var contents = range.extractContents();
+        // Check if the extracted contents are already in a single span
+        if (contents.childNodes.length === 1 &&
+            ((_a = contents.firstChild) === null || _a === void 0 ? void 0 : _a.nodeType) === Node.ELEMENT_NODE &&
+            contents.firstChild.tagName === 'SPAN') {
+            var existingSpan = contents.firstChild;
+            existingSpan.style.setProperty(styleName, styleValue);
+            range.insertNode(contents);
+            return;
+        }
+        // Create new span only if we can't reuse
+        var span = document.createElement('span');
+        span.style.setProperty(styleName, styleValue);
+        try {
+            span.appendChild(contents);
+            range.insertNode(span);
+        }
+        catch (error) {
+            console.warn('Failed to apply inline style:', error);
+            // Fallback: insert contents back without styling
+            range.insertNode(contents);
+        }
+    };
+    // Check if a style is currently applied to the selection (only explicit formatting)
+    var isStyleApplied = function (styleName, styleValue) {
+        var selection = window.getSelection();
+        if (!selection || selection.rangeCount === 0)
+            return false;
+        var range = selection.getRangeAt(0);
+        // For collapsed selections (cursor), check if we're inside a formatted element
+        if (range.collapsed) {
+            var element = range.commonAncestorContainer;
+            if (element && element.nodeType === Node.TEXT_NODE) {
+                element = element.parentElement;
+            }
+            // Only check for explicitly applied formatting (spans with inline styles or semantic tags)
+            while (element && element !== editorRef.current) {
+                if (element.nodeType === Node.ELEMENT_NODE) {
+                    var htmlElement = element;
+                    // Check for explicit inline styles first
+                    if (htmlElement.style) {
+                        var inlineValue = htmlElement.style.getPropertyValue(styleName);
+                        if (inlineValue) {
+                            if (styleName === 'font-weight') {
+                                return inlineValue === 'bold' || inlineValue === '700' || parseInt(inlineValue) >= 600;
+                            }
+                            else if (styleName === 'font-style') {
+                                return inlineValue === 'italic';
+                            }
+                            else if (styleName === 'text-decoration') {
+                                return inlineValue.includes('underline');
+                            }
+                            else {
+                                return inlineValue === styleValue;
+                            }
+                        }
+                    }
+                    // Check for semantic HTML elements
+                    var tagName = htmlElement.tagName.toLowerCase();
+                    if (styleName === 'font-weight' && (tagName === 'strong' || tagName === 'b')) {
+                        return true;
+                    }
+                    if (styleName === 'font-style' && (tagName === 'em' || tagName === 'i')) {
+                        return true;
+                    }
+                    if (styleName === 'text-decoration' && tagName === 'u') {
+                        return true;
+                    }
+                }
+                element = element && element.nodeType === Node.ELEMENT_NODE ? element.parentElement : null;
+            }
+            return false;
+        }
+        // For text selections, check if all selected text has the formatting
+        var textNodes = [];
+        var walker = document.createTreeWalker(range.commonAncestorContainer, NodeFilter.SHOW_TEXT, {
+            acceptNode: function (node) {
+                return range.intersectsNode(node) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
+            }
+        });
+        var node;
+        while (node = walker.nextNode()) {
+            textNodes.push(node);
+        }
+        if (textNodes.length === 0)
+            return false;
+        // All text nodes must be formatted for the style to be considered "applied"
+        return textNodes.every(function (textNode) {
+            var element = textNode.parentElement;
+            while (element && element !== editorRef.current) {
+                // Check inline styles
+                if (element.style) {
+                    var inlineValue = element.style.getPropertyValue(styleName);
+                    if (inlineValue) {
+                        if (styleName === 'font-weight') {
+                            return inlineValue === 'bold' || inlineValue === '700' || parseInt(inlineValue) >= 600;
+                        }
+                        else if (styleName === 'font-style') {
+                            return inlineValue === 'italic';
+                        }
+                        else if (styleName === 'text-decoration') {
+                            return inlineValue.includes('underline');
+                        }
+                        else {
+                            return inlineValue === styleValue;
+                        }
+                    }
+                }
+                // Check semantic elements
+                var tagName = element.tagName.toLowerCase();
+                if (styleName === 'font-weight' && (tagName === 'strong' || tagName === 'b')) {
+                    return true;
+                }
+                if (styleName === 'font-style' && (tagName === 'em' || tagName === 'i')) {
+                    return true;
+                }
+                if (styleName === 'text-decoration' && tagName === 'u') {
+                    return true;
+                }
+                element = element.parentElement;
+            }
+            return false;
+        });
+    };
+    // Remove inline style from selection with improved cleanup
+    var removeInlineStyle = function (range, styleName) {
+        if (range.collapsed) {
+            // For cursor position, find and modify the parent span
+            var element = range.commonAncestorContainer;
+            if (element && element.nodeType === Node.TEXT_NODE) {
+                element = element.parentElement;
+            }
+            while (element && element !== editorRef.current) {
+                if (element.nodeType === Node.ELEMENT_NODE && element.tagName === 'SPAN') {
+                    var span = element;
+                    span.style.removeProperty(styleName);
+                    // If span has no more styles and no other attributes, unwrap it
+                    if (!span.style.cssText && !span.hasAttributes()) {
+                        var parent_1 = span.parentNode;
+                        var fragment = document.createDocumentFragment();
+                        while (span.firstChild) {
+                            fragment.appendChild(span.firstChild);
+                        }
+                        parent_1 === null || parent_1 === void 0 ? void 0 : parent_1.replaceChild(fragment, span);
+                    }
+                    break;
+                }
+                element = element.parentElement;
+            }
+        }
+        else {
+            // For selected text, extract and clean up spans
+            var contents_1 = range.extractContents();
+            // Find all spans in the extracted contents
+            var spans = contents_1.querySelectorAll('span');
+            spans.forEach(function (span) {
+                span.style.removeProperty(styleName);
+                // If span has no more styles and no other attributes, unwrap it
+                if (!span.style.cssText && !span.hasAttributes()) {
+                    var parent_2 = span.parentNode;
+                    var fragment = document.createDocumentFragment();
+                    while (span.firstChild) {
+                        fragment.appendChild(span.firstChild);
+                    }
+                    if (parent_2) {
+                        parent_2.replaceChild(fragment, span);
+                    }
+                }
+            });
+            // Also handle direct span children
+            var directSpans = Array.from(contents_1.childNodes).filter(function (node) {
+                return node.nodeType === Node.ELEMENT_NODE && node.tagName === 'SPAN';
+            });
+            directSpans.forEach(function (span) {
+                span.style.removeProperty(styleName);
+                if (!span.style.cssText && !span.hasAttributes()) {
+                    var fragment = document.createDocumentFragment();
+                    while (span.firstChild) {
+                        fragment.appendChild(span.firstChild);
+                    }
+                    contents_1.replaceChild(fragment, span);
+                }
+            });
+            range.insertNode(contents_1);
+        }
+    };
+    // Toggle inline style (for bold, italic, underline)
+    var toggleInlineStyle = function (range, styleName, styleValue) {
+        if (isStyleApplied(styleName, styleValue)) {
+            // Remove the style
+            removeInlineStyle(range, styleName);
+        }
+        else {
+            // Apply the style
+            applyInlineStyle(range, styleName, styleValue);
+        }
+    };
+    // Apply text alignment to block-level elements
+    var applyAlignment = function (alignment) {
+        var _a;
+        if (!editorRef.current)
+            return;
+        var selection = window.getSelection();
+        if (!selection || selection.rangeCount === 0)
+            return;
+        var range = selection.getRangeAt(0);
+        var blockElement = null;
+        // Find existing block element containing the selection
+        var element = range.commonAncestorContainer;
+        // If we're in a text node, get its parent
+        if (element && element.nodeType === Node.TEXT_NODE) {
+            element = element.parentElement;
+        }
+        // Walk up the tree to find a block element
+        while (element && element !== editorRef.current) {
+            if (element.nodeType === Node.ELEMENT_NODE) {
+                var tagName = element.tagName.toLowerCase();
+                if (['p', 'div', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'blockquote', 'li'].includes(tagName)) {
+                    blockElement = element;
+                    break;
+                }
+            }
+            element = element.parentElement;
+        }
+        if (blockElement) {
+            // Apply alignment to existing block element
+            blockElement.style.textAlign = alignment;
+        }
+        else {
+            // No block element found, need to create one or apply to editor
+            if (range.collapsed) {
+                // For cursor position, apply to nearest parent or create paragraph
+                var parentElement = range.commonAncestorContainer;
+                if (parentElement.nodeType === Node.TEXT_NODE) {
+                    parentElement = parentElement.parentElement;
+                }
+                if (parentElement === editorRef.current) {
+                    // We're directly in the editor, create a paragraph
+                    var p = document.createElement('p');
+                    p.style.textAlign = alignment;
+                    // If there's content at cursor, wrap it
+                    if ((_a = editorRef.current.textContent) === null || _a === void 0 ? void 0 : _a.trim()) {
+                        // Move cursor content to paragraph
+                        var restOfContent = range.extractContents();
+                        p.appendChild(restOfContent);
+                    }
+                    range.insertNode(p);
+                    // Place cursor inside the paragraph
+                    var newRange = document.createRange();
+                    newRange.setStart(p, p.childNodes.length);
+                    newRange.collapse(true);
+                    selection.removeAllRanges();
+                    selection.addRange(newRange);
+                }
+                else {
+                    // Apply to the parent element if it's reasonable
+                    parentElement.style.textAlign = alignment;
+                }
+            }
+            else {
+                // For text selection, wrap selected content in paragraph
+                var p = document.createElement('p');
+                p.style.textAlign = alignment;
+                try {
+                    var contents = range.extractContents();
+                    p.appendChild(contents);
+                    range.insertNode(p);
+                    // Restore selection within the new paragraph
+                    var newRange = document.createRange();
+                    newRange.selectNodeContents(p);
+                    selection.removeAllRanges();
+                    selection.addRange(newRange);
+                }
+                catch (error) {
+                    console.warn('Failed to wrap selection in paragraph:', error);
+                    // Fallback: apply alignment to editor itself
+                    editorRef.current.style.textAlign = alignment;
+                }
+            }
+        }
+    };
+    // Update formatting state based on current selection
+    var updateFormattingState = useCallback(function () {
+        if (!editorRef.current || isDisabled)
+            return;
+        var selection = window.getSelection();
+        if (!selection || selection.rangeCount === 0) {
+            // No selection, reset to default state
+            setFormattingState({
+                bold: false,
+                italic: false,
+                underline: false,
+                textAlign: 'left',
+                fontSize: '14px',
+                textColor: '#000000',
+            });
+            return;
+        }
+        // Use the same logic as isStyleApplied for consistency
+        setFormattingState({
+            bold: isStyleApplied('font-weight', 'bold'),
+            italic: isStyleApplied('font-style', 'italic'),
+            underline: isStyleApplied('text-decoration', 'underline'),
+            textAlign: getCurrentAlignment(),
+            fontSize: '14px', // We'll keep this simple for now
+            textColor: getCurrentColor(),
+        });
+    }, [isDisabled]);
+    // Get current text alignment (only explicit alignment)
+    var getCurrentAlignment = function () {
+        var selection = window.getSelection();
+        if (!selection || selection.rangeCount === 0)
+            return 'left';
+        var range = selection.getRangeAt(0);
+        var element = range.commonAncestorContainer;
+        // If we're in a text node, get its parent
+        if (element && element.nodeType === Node.TEXT_NODE) {
+            element = element.parentElement;
+        }
+        // Find the block element with explicit text-align style
+        while (element && element !== editorRef.current) {
+            if (element.nodeType === Node.ELEMENT_NODE) {
+                var htmlElement = element;
+                var tagName = htmlElement.tagName.toLowerCase();
+                if (['p', 'div', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'].includes(tagName)) {
+                    // Check for explicit inline style first
+                    var inlineAlign = htmlElement.style.textAlign;
+                    if (inlineAlign) {
+                        return inlineAlign;
+                    }
+                    // If no inline style, this block has no explicit alignment
+                    break;
+                }
+            }
+            element = element.parentElement;
+        }
+        return 'left'; // Default alignment
+    };
+    // Get current text color
+    var getCurrentColor = function () {
+        var selection = window.getSelection();
+        if (!selection || selection.rangeCount === 0)
+            return '#000000';
+        var range = selection.getRangeAt(0);
+        var element = range.commonAncestorContainer;
+        if (element && element.nodeType === Node.TEXT_NODE) {
+            element = element.parentElement;
+        }
+        while (element && element !== editorRef.current) {
+            var computedStyle = window.getComputedStyle(element);
+            var color = computedStyle.color;
+            if (color && color !== 'inherit') {
+                return color;
+            }
+            element = element ? element.parentElement : null;
+        }
+        return '#000000';
+    };
+    // Handle text selection for floating toolbar with improved UX
+    var handleSelection = useCallback(function () {
+        // If interacting with toolbar (mousedown on a toolbar control), do not change toolbar visibility or saved selection
+        if (isInteractingRef.current)
+            return;
+        if (!editorRef.current || isDisabled)
+            return;
+        var selection = window.getSelection();
+        if (!selection || selection.rangeCount === 0) {
+            // Update formatting state even when no selection
+            updateFormattingState();
+            if (toolbar.position === 'floating') {
+                // Only hide toolbar if we don't have a saved selection
+                if (!savedSelection) {
+                    setShowToolbar(false);
+                }
+            }
+            return;
+        }
+        var range = selection.getRangeAt(0);
+        // Ensure selection is within our editor
+        if (!editorRef.current.contains(range.commonAncestorContainer)) {
+            updateFormattingState();
+            if (toolbar.position === 'floating') {
+                setShowToolbar(false);
+                setSavedSelection(null);
+            }
+            return;
+        }
+        // Always update formatting state when there's a valid selection
+        updateFormattingState();
+        if (toolbar.position === 'floating') {
+            // If selection is collapsed (just cursor), hide toolbar unless it's from clicking in toolbar
+            if (selection.isCollapsed) {
+                // Check if we're clicking in the toolbar area - if so, keep it visible
+                if (savedSelection && showToolbar) {
+                    return; // Keep toolbar visible
+                }
+                setShowToolbar(false);
+                setSavedSelection(null);
+                return;
+            }
+            var rect = range.getBoundingClientRect();
+            var editorRect = editorRef.current.getBoundingClientRect();
+            if (rect.width > 0 && rect.height > 0) {
+                // Save the selection before showing toolbar
+                saveSelection();
+                // Position toolbar above the selection, centered
+                var toolbarWidth = 200; // Approximate toolbar width
+                var left = Math.max(10, Math.min(rect.left - editorRect.left + (rect.width / 2) - (toolbarWidth / 2), editorRect.width - toolbarWidth - 10));
+                setToolbarPosition({
+                    top: rect.top - editorRect.top - 50,
+                    left: left,
+                });
+                setShowToolbar(true);
+            }
+        }
+    }, [isDisabled, toolbar.position, updateFormattingState, savedSelection, showToolbar]);
+    // Handle content change
+    var handleContentChange = useCallback(function () {
+        if (!editorRef.current || !onChange)
+            return;
+        var content = editorRef.current.innerHTML;
+        onChange(content);
+    }, [onChange]);
+    // Save content to history for undo/redo
+    var saveToHistory = useCallback(function () {
+        if (!editorRef.current)
+            return;
+        var content = editorRef.current.innerHTML;
+        setHistory(function (prev) {
+            var newHistory = prev.slice(0, historyIndex + 1);
+            newHistory.push(content);
+            return newHistory.slice(-50); // Keep last 50 changes
+        });
+        setHistoryIndex(function (prev) { return Math.min(prev + 1, 49); });
+    }, [historyIndex]);
+    // Undo functionality
+    var handleUndo = useCallback(function (event) {
+        if (event) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+        if (historyIndex > 0 && editorRef.current) {
+            var newIndex = historyIndex - 1;
+            setHistoryIndex(newIndex);
+            editorRef.current.innerHTML = history[newIndex];
+            handleContentChange();
+        }
+    }, [historyIndex, history, handleContentChange]);
+    // Redo functionality
+    var handleRedo = useCallback(function (event) {
+        if (event) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+        if (historyIndex < history.length - 1 && editorRef.current) {
+            var newIndex = historyIndex + 1;
+            setHistoryIndex(newIndex);
+            editorRef.current.innerHTML = history[newIndex];
+            handleContentChange();
+        }
+    }, [historyIndex, history, handleContentChange]);
+    // Toolbar button handlers with selection preservation for floating toolbar
+    var handleBold = function (event) {
+        if (event) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+        if (toolbar.position === 'floating') {
+            restoreSelection();
+        }
+        applyFormatting('bold');
+    };
+    var handleItalic = function (event) {
+        if (event) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+        if (toolbar.position === 'floating') {
+            restoreSelection();
+        }
+        applyFormatting('italic');
+    };
+    var handleUnderline = function (event) {
+        if (event) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+        if (toolbar.position === 'floating') {
+            restoreSelection();
+        }
+        applyFormatting('underline');
+    };
+    var handleTextColor = function (color, event) {
+        if (event) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+        if (toolbar.position === 'floating') {
+            restoreSelection();
+        }
+        applyFormatting('textColor', color);
+        setShowColorPicker(false);
+    };
+    var handleAlign = function (alignment, event) {
+        if (event) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+        if (toolbar.position === 'floating') {
+            restoreSelection();
+        }
+        applyFormatting("align".concat(alignment.charAt(0).toUpperCase() + alignment.slice(1)));
+    };
+    // Set initial content
+    useEffect(function () {
+        if (editorRef.current && value !== editorRef.current.innerHTML) {
+            editorRef.current.innerHTML = value;
+            setHistory([value]);
+            setHistoryIndex(0);
+        }
+    }, [value]);
+    // Add event listeners
+    useEffect(function () {
+        var editor = editorRef.current;
+        if (!editor)
+            return;
+        var selectionTimeout;
+        var handleSelectionChange = function () {
+            // Debounce selection changes to prevent excessive updates
+            clearTimeout(selectionTimeout);
+            selectionTimeout = setTimeout(handleSelection, 10);
+        };
+        var handleInput = function () {
+            handleContentChange();
+            saveToHistory();
+        };
+        document.addEventListener('selectionchange', handleSelectionChange);
+        editor.addEventListener('input', handleInput);
+        // Remove duplicate updateFormattingState calls since handleSelection now handles them
+        // editor.addEventListener('keyup', updateFormattingState);
+        // editor.addEventListener('mouseup', updateFormattingState);
+        // Toolbar interaction handlers
+        var handleToolbarMouseDown = function () {
+            // Mark that we are interacting with the toolbar (prevents selectionchange from clearing selection)
+            isInteractingRef.current = true;
+        };
+        var handleToolbarMouseUp = function () {
+            // Release the interaction lock shortly after mouseup to allow click handlers to run
+            setTimeout(function () {
+                isInteractingRef.current = false;
+            }, 0);
+        };
+        // Attach to toolbar container if present
+        if (toolbarRef.current) {
+            toolbarRef.current.addEventListener('mousedown', handleToolbarMouseDown);
+            toolbarRef.current.addEventListener('mouseup', handleToolbarMouseUp);
+        }
+        return function () {
+            clearTimeout(selectionTimeout);
+            document.removeEventListener('selectionchange', handleSelectionChange);
+            editor.removeEventListener('input', handleInput);
+            if (toolbarRef.current) {
+                toolbarRef.current.removeEventListener('mousedown', handleToolbarMouseDown);
+                toolbarRef.current.removeEventListener('mouseup', handleToolbarMouseUp);
+            }
+        };
+    }, [handleSelection, handleContentChange, saveToHistory]);
+    // Handle clicks outside editor and toolbar with improved behavior
+    useEffect(function () {
+        var handleClickOutside = function (event) {
+            var _a, _b;
+            var target = event.target;
+            var isInEditor = (_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.contains(target);
+            var isInToolbar = (_b = toolbarRef.current) === null || _b === void 0 ? void 0 : _b.contains(target);
+            if (!isInEditor && !isInToolbar) {
+                // Clicked outside both editor and toolbar
+                if (toolbar.position === 'floating') {
+                    // Delay hiding to allow for double-clicks and other interactions
+                    setTimeout(function () {
+                        setShowToolbar(false);
+                        setSavedSelection(null);
+                    }, 100);
+                }
+                setShowColorPicker(false);
+            }
+            else if (isInToolbar) {
+                // Clicked in toolbar - close color picker unless clicking on color-related elements
+                var isColorRelated = target === null || target === void 0 ? void 0 : target.closest('[data-tool="textColor"]');
+                if (!isColorRelated) {
+                    setShowColorPicker(false);
+                }
+            }
+            else if (isInEditor) {
+                // Clicked in editor - close color picker but keep toolbar if we have a selection
+                setShowColorPicker(false);
+            }
+        };
+        // Use mousedown instead of click for faster response
+        document.addEventListener('mousedown', handleClickOutside);
+        return function () { return document.removeEventListener('mousedown', handleClickOutside); };
+    }, [toolbar.position]);
+    // Render toolbar tool
+    var renderToolbarTool = function (tool, index) {
+        var isActive = formattingState[tool];
+        switch (tool) {
+            case 'bold':
+                return (React__default.createElement(Button, { key: index, size: "sm", variant: "ghost", iconOnly: true, className: cn(richTextEditorTheme.toolbarButtonStyle), "data-state": isActive ? 'active' : 'inactive', onMouseDown: function (e) {
+                        // Prevent selection from collapsing and restore before click
+                        e.preventDefault();
+                        restoreSelection();
+                    }, onClick: function (e) { return handleBold(e); }, disabled: isDisabled, "aria-label": "Bold", "aria-pressed": isActive ? "true" : "false" },
+                    React__default.createElement(ForwardRef$8, { className: "w-4 h-4" })));
+            case 'italic':
+                return (React__default.createElement(Button, { key: index, size: "sm", variant: "ghost", iconOnly: true, className: cn(richTextEditorTheme.toolbarButtonStyle), "data-state": isActive ? 'active' : 'inactive', onMouseDown: function (e) {
+                        e.preventDefault();
+                        restoreSelection();
+                    }, onClick: function (e) { return handleItalic(e); }, disabled: isDisabled, "aria-label": "Italic", "aria-pressed": isActive ? "true" : "false" },
+                    React__default.createElement(ForwardRef$7, { className: "w-4 h-4" })));
+            case 'underline':
+                return (React__default.createElement(Button, { key: index, size: "sm", variant: "ghost", iconOnly: true, className: cn(richTextEditorTheme.toolbarButtonStyle), "data-state": isActive ? 'active' : 'inactive', onMouseDown: function (e) {
+                        e.preventDefault();
+                        restoreSelection();
+                    }, onClick: function (e) { return handleUnderline(e); }, disabled: isDisabled, "aria-label": "Underline", "aria-pressed": isActive ? "true" : "false" },
+                    React__default.createElement(ForwardRef$6, { className: "w-4 h-4" })));
+            case 'textColor':
+                return (React__default.createElement("div", { key: index, className: "relative", "data-tool": "textColor" },
+                    React__default.createElement(Button, { size: "sm", variant: "ghost", iconOnly: true, className: cn(richTextEditorTheme.toolbarButtonStyle), onClick: function (e) {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            // For floating toolbar, restore selection when opening color picker
+                            if (toolbar.position === 'floating' && !showColorPicker) {
+                                restoreSelection();
+                            }
+                            setShowColorPicker(!showColorPicker);
+                        }, disabled: isDisabled, "aria-label": "Text Color", "aria-expanded": showColorPicker },
+                        React__default.createElement(ForwardRef$5, { className: "w-4 h-4" })),
+                    showColorPicker && (React__default.createElement("div", { className: cn(richTextEditorTheme.dropdownStyle, richTextEditorTheme.colorPickerStyle) }, colorOptions.map(function (color) { return (React__default.createElement("button", { key: color.value, className: richTextEditorTheme.colorSwatchStyle, style: { backgroundColor: color.value }, onClick: function (e) {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            handleTextColor(color.value, e);
+                        }, onMouseDown: function (e) {
+                            // Prevent the mousedown from clearing the selection
+                            e.preventDefault();
+                        }, "aria-label": color.label, title: color.label })); })))));
+            case 'alignLeft':
+                return (React__default.createElement(Button, { key: index, size: "sm", variant: "ghost", iconOnly: true, className: cn(richTextEditorTheme.toolbarButtonStyle), "data-state": formattingState.textAlign === 'left' ? 'active' : 'inactive', onMouseDown: function (e) {
+                        e.preventDefault();
+                        restoreSelection();
+                    }, onClick: function (e) { return handleAlign('left', e); }, disabled: isDisabled, "aria-label": "Align Left", "aria-pressed": formattingState.textAlign === 'left' ? "true" : "false" },
+                    React__default.createElement(ForwardRef$4, { className: "w-4 h-4" })));
+            case 'alignCenter':
+                return (React__default.createElement(Button, { key: index, size: "sm", variant: "ghost", iconOnly: true, className: cn(richTextEditorTheme.toolbarButtonStyle), "data-state": formattingState.textAlign === 'center' ? 'active' : 'inactive', onMouseDown: function (e) {
+                        e.preventDefault();
+                        restoreSelection();
+                    }, onClick: function (e) { return handleAlign('center', e); }, disabled: isDisabled, "aria-label": "Align Center", "aria-pressed": formattingState.textAlign === 'center' ? "true" : "false" },
+                    React__default.createElement(ForwardRef$3, { className: "w-4 h-4" })));
+            case 'alignRight':
+                return (React__default.createElement(Button, { key: index, size: "sm", variant: "ghost", iconOnly: true, className: cn(richTextEditorTheme.toolbarButtonStyle), "data-state": formattingState.textAlign === 'right' ? 'active' : 'inactive', onMouseDown: function (e) {
+                        e.preventDefault();
+                        restoreSelection();
+                    }, onClick: function (e) { return handleAlign('right', e); }, disabled: isDisabled, "aria-label": "Align Right", "aria-pressed": formattingState.textAlign === 'right' ? "true" : "false" },
+                    React__default.createElement(ForwardRef$2, { className: "w-4 h-4" })));
+            case 'undo':
+                return (React__default.createElement(Button, { key: index, size: "sm", variant: "ghost", iconOnly: true, className: cn(richTextEditorTheme.toolbarButtonStyle), onClick: function (e) { return handleUndo(e); }, disabled: isDisabled || historyIndex <= 0, "aria-label": "Undo" },
+                    React__default.createElement(ForwardRef$1, { className: "w-4 h-4" })));
+            case 'redo':
+                return (React__default.createElement(Button, { key: index, size: "sm", variant: "ghost", iconOnly: true, className: cn(richTextEditorTheme.toolbarButtonStyle), onClick: function (e) { return handleRedo(e); }, disabled: isDisabled || historyIndex >= history.length - 1, "aria-label": "Redo" },
+                    React__default.createElement(ForwardRef, { className: "w-4 h-4" })));
+            case 'separator':
+                return React__default.createElement("div", { key: index, className: richTextEditorTheme.separatorStyle });
+            default:
+                return null;
+        }
+    };
+    // Render toolbar
+    var renderToolbar = function () {
+        if (!toolbar.show || !toolbar.tools)
+            return null;
+        var toolbarClass = cn(richTextEditorTheme.toolbarStyle, toolbar.className);
+        var toolbarContent = (React__default.createElement("div", { ref: toolbarRef, className: toolbarClass }, toolbar.tools.map(function (tool, index) { return renderToolbarTool(tool, index); })));
+        if (toolbar.position === 'floating') {
+            return showToolbar ? (React__default.createElement("div", { className: "bg-white/70 backdrop-blur-sm shadow-2xl rounded-xl border border-[var(--color-border)]  overflow-hidden", style: {
+                    position: 'absolute',
+                    top: toolbarPosition.top,
+                    left: toolbarPosition.left,
+                    zIndex: 50,
+                } }, toolbarContent)) : null;
+        }
+        return toolbarContent;
+    };
+    return (React__default.createElement("div", __assign({ className: cn(richTextEditorTheme.baseStyle, richTextEditorTheme.sizes[size], className) }, props),
+        label && (React__default.createElement("div", { className: "mb-1" },
+            React__default.createElement(FormLabel, { htmlFor: editorId, className: labelClassName, state: state, required: required }, label))),
+        React__default.createElement("div", { className: "relative" },
+            React__default.createElement("div", { className: cn(richTextEditorTheme.containerStyle), "data-state": getDataState() },
+                toolbar.position === 'top' && renderToolbar(),
+                React__default.createElement("div", { ref: function (el) {
+                        if (el) {
+                            editorRef.current = el;
+                            if (typeof ref === 'function') {
+                                ref(el);
+                            }
+                            else if (ref) {
+                                ref.current = el;
+                            }
+                        }
+                    }, id: editorId, contentEditable: !isDisabled, className: cn(richTextEditorTheme.editorStyle), "data-state": getDataState(), style: {
+                        minHeight: "".concat(minHeight, "px"),
+                        maxHeight: maxHeight ? "".concat(maxHeight, "px") : undefined,
+                    }, "data-placeholder": placeholder, onFocus: function () {
+                        setIsFocused(true);
+                        updateFormattingState();
+                    }, onBlur: function (e) {
+                        var _a;
+                        setIsFocused(false);
+                        // Only hide floating toolbar if focus is not moving to the toolbar
+                        var relatedTarget = e.relatedTarget;
+                        var isMovingToToolbar = relatedTarget && ((_a = toolbarRef.current) === null || _a === void 0 ? void 0 : _a.contains(relatedTarget));
+                        if (toolbar.position === 'floating' && !isMovingToToolbar) {
+                            // Delay hiding to allow toolbar interactions
+                            setTimeout(function () {
+                                var _a;
+                                // Check if toolbar is still focused
+                                var activeElement = document.activeElement;
+                                var isToolbarActive = activeElement && ((_a = toolbarRef.current) === null || _a === void 0 ? void 0 : _a.contains(activeElement));
+                                if (!isToolbarActive) {
+                                    setShowToolbar(false);
+                                    setSavedSelection(null);
+                                }
+                            }, 150);
+                        }
+                        else if (toolbar.position === 'top') {
+                            setShowToolbar(false);
+                        }
+                        setShowColorPicker(false);
+                    }, "aria-invalid": isInvalid, "aria-required": required, role: "textbox", "aria-multiline": "true", "aria-label": label || "Rich text editor", suppressContentEditableWarning: true })),
+            toolbar.position === 'floating' && renderToolbar()),
+        helperText && (React__default.createElement("div", { className: cn("mt-1 text-sm text-text-muted", helperTextClassName) }, helperText))));
+});
+RichTextEditor.displayName = "RichTextEditor";
+
+export { RichTextEditor, RichTextEditor as default };