flikkui 0.1.0-beta.9 → 0.2.0-beta.1

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

@@ -1,50 +1,145 @@
-import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
-import React__default, { useState, useRef, useCallback, useEffect } from 'react';
+import React__default, { useState, useRef, useMemo, useCallback, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { useReducedMotion, AnimatePresence, motion } from 'motion/react';
 import { FormLabel } from '../FormLabel/FormLabel.js';
 import { richTextEditorTheme, colorOptions } from './RichTextEditor.theme.js';
+import { floatingToolbarVariants } from './RichTextEditor.animations.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';
+import { Button } from '../../core/Button/Button.js';
+import { ArrowUturnRightIcon, ArrowUturnLeftIcon, Bars3BottomRightIcon, Bars3Icon, Bars3BottomLeftIcon, UnderlineIcon, ItalicIcon, BoldIcon } from '@heroicons/react/24/outline';
+import { useSelectPortal } from '../../../hooks/useSelectPortal.js';
+import { PaintBrushIcon } from '@heroicons/react/24/solid';
+import { createDropdownAnimations } from '../Select/Select.animations.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 () {
+const FONT_SIZE_OPTIONS = [
+    { key: "xs", label: "XS", value: "0.75rem", px: 12 },
+    { key: "sm", label: "SM", value: "0.875rem", px: 14 },
+    { key: "md", label: "MD", value: "1rem", px: 16 },
+    { key: "lg", label: "LG", value: "1.125rem", px: 18 },
+    { key: "xl", label: "XL", value: "1.25rem", px: 20 },
+    { key: "2xl", label: "2XL", value: "1.5rem", px: 24 },
+    { key: "3xl", label: "3XL", value: "1.875rem", px: 30 },
+    { key: "4xl", label: "4XL", value: "2.25rem", px: 36 },
+];
+const FONT_SIZE_COMMAND_VALUE = {
+    xs: "1",
+    sm: "2",
+    md: "3",
+    lg: "4",
+    xl: "5",
+    "2xl": "6",
+    "3xl": "7",
+    "4xl": "7",
+};
+const getFontSizeOption = (key) => { var _a; return (_a = FONT_SIZE_OPTIONS.find((option) => option.key === key)) !== null && _a !== void 0 ? _a : FONT_SIZE_OPTIONS[2]; };
+const getClosestFontSizeKey = (px) => {
+    let closest = "md";
+    let minDiff = Number.POSITIVE_INFINITY;
+    FONT_SIZE_OPTIONS.forEach((option) => {
+        const diff = Math.abs(option.px - px);
+        if (diff < minDiff) {
+            minDiff = diff;
+            closest = option.key;
+        }
+    });
+    return closest;
+};
+const DEFAULT_FORMATTING_STATE = {
+    bold: false,
+    italic: false,
+    underline: false,
+    textAlign: "left",
+    fontSize: "md",
+    textColor: "#000000",
+};
+const DEFAULT_TOOLBAR = {
+    show: true,
+    position: "top",
+    tools: [
+        "bold",
+        "italic",
+        "underline",
+        "separator",
+        "fontSize",
+        "textColor",
+        "separator",
+        "alignLeft",
+        "alignCenter",
+        "alignRight",
+        "separator",
+        "undo",
+        "redo",
+    ],
+};
+const RichTextEditor = React__default.forwardRef(({ size = "md", state = "default", className = "", label, labelClassName = "", helperText, helperTextClassName = "", value = "", onChange, placeholder = "Start typing...", id, required, minHeight = 120, maxHeight, toolbar: toolbarProp = DEFAULT_TOOLBAR, theme = {}, ...props }, ref) => {
+    const [isFocused, setIsFocused] = useState(false);
+    const [showToolbar, setShowToolbar] = useState(false);
+    const [toolbarPosition, setToolbarPosition] = useState({ top: 0, left: 0 });
+    const [formattingState, setFormattingState] = useState(DEFAULT_FORMATTING_STATE);
+    const [showFontSizePicker, setShowFontSizePicker] = useState(false);
+    const [showColorPicker, setShowColorPicker] = useState(false);
+    const shouldReduceMotion = useReducedMotion();
+    const editorRef = useRef(null);
+    const toolbarRef = useRef(null);
+    const fontSizeTriggerRef = useRef(null);
+    const colorTriggerRef = useRef(null);
+    const editorId = id || `rich-text-editor-${Math.random().toString(36).substring(2, 9)}`;
+    const themeStyles = useMemo(() => {
+        var _a, _b;
+        return ({
+            ...richTextEditorTheme,
+            ...theme,
+            sizes: {
+                ...richTextEditorTheme.sizes,
+                ...((_a = theme === null || theme === void 0 ? void 0 : theme.sizes) !== null && _a !== void 0 ? _a : {}),
+            },
+            states: {
+                ...richTextEditorTheme.states,
+                ...((_b = theme === null || theme === void 0 ? void 0 : theme.states) !== null && _b !== void 0 ? _b : {}),
+            },
+        });
+    }, [theme]);
+    const toolbarConfig = useMemo(() => {
+        var _a, _b, _c;
+        const base = {
+            show: (_a = DEFAULT_TOOLBAR.show) !== null && _a !== void 0 ? _a : true,
+            position: (_b = DEFAULT_TOOLBAR.position) !== null && _b !== void 0 ? _b : "top",
+            tools: [...((_c = DEFAULT_TOOLBAR.tools) !== null && _c !== void 0 ? _c : [])],
+            className: DEFAULT_TOOLBAR.className,
+        };
+        if (toolbarProp) {
+            if (typeof toolbarProp.show === "boolean") {
+                base.show = toolbarProp.show;
+            }
+            if (toolbarProp.position) {
+                base.position = toolbarProp.position;
+            }
+            if (toolbarProp.tools) {
+                base.tools = [...toolbarProp.tools];
+            }
+            if (typeof toolbarProp.className === "string") {
+                base.className = toolbarProp.className;
+            }
+        }
+        return base;
+    }, [toolbarProp]);
+    const { position: fontSizePortalPosition, cssVariables: fontSizePortalCssVars, contentRef: fontSizePortalContentRef, isReady: fontSizePortalReady, isFlipped: fontSizeIsFlipped, } = useSelectPortal({
+        triggerRef: fontSizeTriggerRef,
+        isOpen: showFontSizePicker,
+        placement: "bottom-start",
+        offset: 6,
+        autoWidth: true,
+    });
+    const { position: colorPortalPosition, cssVariables: colorPortalCssVars, contentRef: colorPortalContentRef, isReady: colorPortalReady, isFlipped: colorIsFlipped, } = useSelectPortal({
+        triggerRef: colorTriggerRef,
+        isOpen: showColorPicker,
+        placement: "bottom-start",
+        offset: 6,
+        autoWidth: true,
+    });
+    const isDisabled = state === "disabled";
+    const isInvalid = state === "invalid";
+    const getDataState = () => {
         if (isDisabled)
             return "disabled";
         if (isInvalid)
@@ -53,908 +148,580 @@ var RichTextEditor = React__default.forwardRef(function (_a, ref) {
             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;
+    const focusEditor = useCallback(() => {
+        if (editorRef.current && document.activeElement !== editorRef.current) {
+            editorRef.current.focus();
         }
-    };
-    // 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();
+    }, []);
+    const getCurrentFontSize = useCallback(() => {
+        if (!editorRef.current)
+            return DEFAULT_FORMATTING_STATE.fontSize;
+        const selection = window.getSelection();
+        if (!selection || selection.rangeCount === 0) {
+            const editorComputed = window.getComputedStyle(editorRef.current);
+            const editorSize = parseFloat(editorComputed.fontSize || "");
+            return Number.isFinite(editorSize)
+                ? getClosestFontSizeKey(editorSize)
+                : DEFAULT_FORMATTING_STATE.fontSize;
+        }
+        const range = selection.getRangeAt(0);
+        let node = range.startContainer;
+        if (node.nodeType === Node.TEXT_NODE) {
+            node = node.parentElement;
+        }
+        while (node && node !== editorRef.current) {
+            if (node instanceof HTMLElement) {
+                const computed = window.getComputedStyle(node);
+                const size = parseFloat(computed.fontSize || "");
+                if (Number.isFinite(size)) {
+                    return getClosestFontSizeKey(size);
                 }
             }
+            node = node ? node.parentNode : null;
+        }
+        const editorComputed = window.getComputedStyle(editorRef.current);
+        const editorSize = parseFloat(editorComputed.fontSize || "");
+        return Number.isFinite(editorSize)
+            ? getClosestFontSizeKey(editorSize)
+            : DEFAULT_FORMATTING_STATE.fontSize;
+    }, []);
+    const updateFormattingState = useCallback(() => {
+        if (!editorRef.current || isDisabled) {
+            setFormattingState(DEFAULT_FORMATTING_STATE);
+            return;
+        }
+        let bold = false;
+        let italic = false;
+        let underline = false;
+        let textAlign = "left";
+        let fontSize = DEFAULT_FORMATTING_STATE.fontSize;
+        let textColor = DEFAULT_FORMATTING_STATE.textColor;
+        try {
+            bold = document.queryCommandState("bold");
         }
         catch (error) {
-            console.warn('Failed to restore selection:', error);
-            // Simple fallback: don't restore selection, let user reselect
+            if (process.env.NODE_ENV !== 'production') {
+                console.warn("queryCommandState bold failed", error);
+            }
         }
-    };
-    // 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();
+            italic = document.queryCommandState("italic");
         }
         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;
+            if (process.env.NODE_ENV !== 'production') {
+                console.warn("queryCommandState italic failed", error);
             }
-            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);
+            underline = document.queryCommandState("underline");
         }
         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;
+            if (process.env.NODE_ENV !== 'production') {
+                console.warn("queryCommandState underline failed", error);
             }
-            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;
+        try {
+            if (document.queryCommandState("justifyCenter")) {
+                textAlign = "center";
             }
-        });
-        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;
+            else if (document.queryCommandState("justifyRight")) {
+                textAlign = "right";
             }
-            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;
+            else if (document.queryCommandState("justifyFull")) {
+                textAlign = "justify";
             }
-            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 {
+                textAlign = "left";
             }
         }
-        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);
+        catch (error) {
+            if (process.env.NODE_ENV !== 'production') {
+                console.warn("queryCommandState alignment failed", error);
+            }
         }
-        else {
-            // Apply the style
-            applyInlineStyle(range, styleName, styleValue);
+        try {
+            fontSize = getCurrentFontSize();
         }
-    };
-    // 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;
-                }
+        catch (error) {
+            if (process.env.NODE_ENV !== 'production') {
+                console.warn("Failed to determine font size", error);
             }
-            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;
-                }
+        }
+        try {
+            const colorValue = document.queryCommandValue("foreColor");
+            if (typeof colorValue === "string" && colorValue.trim().length > 0) {
+                textColor = colorValue;
             }
         }
-    };
-    // 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;
+        catch (error) {
+            if (process.env.NODE_ENV !== 'production') {
+                console.warn("queryCommandValue foreColor failed", error);
+            }
         }
-        // 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(),
+            bold,
+            italic,
+            underline,
+            textAlign,
+            fontSize,
+            textColor,
         });
-    }, [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;
+    }, [getCurrentFontSize, isDisabled]);
+    const handleContentChange = useCallback(() => {
+        if (!editorRef.current || !onChange)
+            return;
+        onChange(editorRef.current.innerHTML);
+    }, [onChange]);
+    const execEditorCommand = useCallback((command, value) => {
+        if (isDisabled || !editorRef.current)
+            return;
+        focusEditor();
+        try {
+            document.execCommand(command, false, value);
         }
-        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;
+        catch (error) {
+            if (process.env.NODE_ENV !== 'production') {
+                console.warn(`execCommand ${command} failed`, error);
             }
-            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)
+        requestAnimationFrame(() => {
+            updateFormattingState();
+            handleContentChange();
+        });
+    }, [focusEditor, handleContentChange, isDisabled, updateFormattingState]);
+    const normalizeFontSizeSelection = useCallback((sizeKey) => {
+        if (!editorRef.current)
             return;
-        if (!editorRef.current || isDisabled)
+        const option = getFontSizeOption(sizeKey);
+        const selection = window.getSelection();
+        if (!selection || selection.rangeCount === 0)
             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);
+        const range = selection.getRangeAt(0);
+        const value = option.value;
+        if (selection.isCollapsed) {
+            let node = selection.anchorNode;
+            if (node && node.nodeType === Node.TEXT_NODE) {
+                node = node.parentElement;
+            }
+            while (node && node !== editorRef.current) {
+                if (node instanceof HTMLElement) {
+                    node.style.fontSize = value;
+                    if (node.tagName.toLowerCase() === "font") {
+                        node.removeAttribute("size");
+                    }
+                    break;
                 }
+                node = node.parentElement;
             }
             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);
+        const walker = document.createTreeWalker(range.commonAncestorContainer, NodeFilter.SHOW_TEXT, {
+            acceptNode: (node) => range.intersectsNode(node) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT,
+        });
+        const updated = new Set();
+        let current;
+        while ((current = walker.nextNode())) {
+            const parent = current.parentElement;
+            if (!parent || !editorRef.current.contains(parent))
+                continue;
+            if (updated.has(parent))
+                continue;
+            parent.style.fontSize = value;
+            if (parent.tagName.toLowerCase() === "font") {
+                parent.removeAttribute("size");
             }
+            updated.add(parent);
+        }
+    }, []);
+    const handleUndo = useCallback((event) => {
+        event === null || event === void 0 ? void 0 : event.preventDefault();
+        event === null || event === void 0 ? void 0 : event.stopPropagation();
+        execEditorCommand("undo");
+    }, [execEditorCommand]);
+    const handleRedo = useCallback((event) => {
+        event === null || event === void 0 ? void 0 : event.preventDefault();
+        event === null || event === void 0 ? void 0 : event.stopPropagation();
+        execEditorCommand("redo");
+    }, [execEditorCommand]);
+    const handleBold = useCallback((event) => {
+        event === null || event === void 0 ? void 0 : event.preventDefault();
+        event === null || event === void 0 ? void 0 : event.stopPropagation();
+        execEditorCommand("bold");
+    }, [execEditorCommand]);
+    const handleItalic = useCallback((event) => {
+        event === null || event === void 0 ? void 0 : event.preventDefault();
+        event === null || event === void 0 ? void 0 : event.stopPropagation();
+        execEditorCommand("italic");
+    }, [execEditorCommand]);
+    const handleUnderline = useCallback((event) => {
+        event === null || event === void 0 ? void 0 : event.preventDefault();
+        event === null || event === void 0 ? void 0 : event.stopPropagation();
+        execEditorCommand("underline");
+    }, [execEditorCommand]);
+    const handleFontSize = useCallback((sizeKey) => {
+        if (isDisabled || !editorRef.current)
             return;
+        focusEditor();
+        try {
+            document.execCommand("styleWithCSS", false, "true");
         }
-        // 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);
+        catch (error) {
+            if (process.env.NODE_ENV !== 'production') {
+                console.warn("styleWithCSS command failed", error);
             }
         }
-    }, [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();
+        try {
+            document.execCommand("fontSize", false, FONT_SIZE_COMMAND_VALUE[sizeKey]);
         }
-        if (toolbar.position === 'floating') {
-            restoreSelection();
+        catch (error) {
+            if (process.env.NODE_ENV !== 'production') {
+                console.warn("fontSize command failed", error);
+            }
         }
-        applyFormatting('underline');
-    };
-    var handleTextColor = function (color, event) {
-        if (event) {
-            event.preventDefault();
-            event.stopPropagation();
+        normalizeFontSizeSelection(sizeKey);
+        try {
+            document.execCommand("styleWithCSS", false, "false");
         }
-        if (toolbar.position === 'floating') {
-            restoreSelection();
+        catch (error) {
+            // Some browsers do not support toggling this flag; ignore.
         }
-        applyFormatting('textColor', color);
+        requestAnimationFrame(() => {
+            updateFormattingState();
+            handleContentChange();
+        });
+        setShowFontSizePicker(false);
         setShowColorPicker(false);
-    };
-    var handleAlign = function (alignment, event) {
-        if (event) {
-            event.preventDefault();
-            event.stopPropagation();
+    }, [
+        focusEditor,
+        handleContentChange,
+        isDisabled,
+        normalizeFontSizeSelection,
+        updateFormattingState,
+    ]);
+    const handleTextColor = useCallback((color) => {
+        execEditorCommand("foreColor", color);
+        setShowColorPicker(false);
+        setShowFontSizePicker(false);
+    }, [execEditorCommand]);
+    const handleAlign = useCallback((alignment) => {
+        const commandMap = {
+            left: "justifyLeft",
+            center: "justifyCenter",
+            right: "justifyRight",
+        };
+        execEditorCommand(commandMap[alignment]);
+    }, [execEditorCommand]);
+    const handleSelection = useCallback(() => {
+        if (!editorRef.current || isDisabled)
+            return;
+        updateFormattingState();
+        if (toolbarConfig.position !== "floating")
+            return;
+        const selection = window.getSelection();
+        if (!selection || selection.rangeCount === 0) {
+            setShowToolbar(false);
+            return;
         }
-        if (toolbar.position === 'floating') {
-            restoreSelection();
+        const range = selection.getRangeAt(0);
+        if (!editorRef.current.contains(range.commonAncestorContainer) || selection.isCollapsed) {
+            setShowToolbar(false);
+            return;
         }
-        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)
+        const rect = range.getBoundingClientRect();
+        const editorRect = editorRef.current.getBoundingClientRect();
+        if (rect.width === 0 && rect.height === 0) {
+            setShowToolbar(false);
             return;
-        var selectionTimeout;
-        var handleSelectionChange = function () {
-            // Debounce selection changes to prevent excessive updates
-            clearTimeout(selectionTimeout);
-            selectionTimeout = setTimeout(handleSelection, 10);
-        };
-        var handleInput = function () {
+        }
+        const toolbarWidth = 200;
+        const 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 });
+        setShowToolbar(true);
+    }, [isDisabled, toolbarConfig.position, updateFormattingState]);
+    useEffect(() => {
+        if (!editorRef.current)
+            return;
+        const editor = editorRef.current;
+        const handleInput = () => {
             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;
+            updateFormattingState();
         };
-        var handleToolbarMouseUp = function () {
-            // Release the interaction lock shortly after mouseup to allow click handlers to run
-            setTimeout(function () {
-                isInteractingRef.current = false;
-            }, 0);
+        editor.addEventListener("input", handleInput);
+        return () => {
+            editor.removeEventListener("input", handleInput);
         };
-        // 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);
+    }, [handleContentChange, updateFormattingState]);
+    useEffect(() => {
+        const handleSelectionChange = () => {
+            if (!editorRef.current)
+                return;
+            const selection = window.getSelection();
+            if (!selection || selection.rangeCount === 0) {
+                setShowToolbar(false);
+                updateFormattingState();
+                return;
+            }
+            const range = selection.getRangeAt(0);
+            if (!editorRef.current.contains(range.commonAncestorContainer)) {
+                setShowToolbar(false);
+                return;
             }
+            handleSelection();
         };
-    }, [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);
+        document.addEventListener("selectionchange", handleSelectionChange);
+        return () => document.removeEventListener("selectionchange", handleSelectionChange);
+    }, [handleSelection, updateFormattingState]);
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            var _a, _b, _c, _d;
+            const target = event.target;
+            const isInEditor = (_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.contains(target);
+            const isInToolbar = (_b = toolbarRef.current) === null || _b === void 0 ? void 0 : _b.contains(target);
+            const isInFontSizeDropdown = (_c = fontSizePortalContentRef.current) === null || _c === void 0 ? void 0 : _c.contains(target);
+            const isInColorDropdown = (_d = colorPortalContentRef.current) === null || _d === void 0 ? void 0 : _d.contains(target);
+            if (!isInEditor && !isInToolbar && !isInFontSizeDropdown && !isInColorDropdown) {
+                if (toolbarConfig.position === "floating") {
+                    setShowToolbar(false);
                 }
                 setShowColorPicker(false);
+                setShowFontSizePicker(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"]');
+            else if (isInToolbar || isInFontSizeDropdown || isInColorDropdown) {
+                const colorMatch = target === null || target === void 0 ? void 0 : target.closest("[data-tool=\"textColor\"]");
+                const isColorRelated = Boolean(colorMatch) || isInColorDropdown;
+                const fontSizeMatch = target === null || target === void 0 ? void 0 : target.closest("[data-tool=\"fontSize\"]");
+                const isFontSizeRelated = isInFontSizeDropdown || Boolean(fontSizeMatch);
                 if (!isColorRelated) {
                     setShowColorPicker(false);
                 }
+                if (!isFontSizeRelated) {
+                    setShowFontSizePicker(false);
+                }
             }
             else if (isInEditor) {
-                // Clicked in editor - close color picker but keep toolbar if we have a selection
                 setShowColorPicker(false);
+                setShowFontSizePicker(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];
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => document.removeEventListener("mousedown", handleClickOutside);
+    }, [toolbarConfig.position]);
+    useEffect(() => {
+        if (editorRef.current && value !== editorRef.current.innerHTML) {
+            editorRef.current.innerHTML = value;
+            updateFormattingState();
+        }
+    }, [updateFormattingState, value]);
+    const renderToolbarTool = (tool, index) => {
+        var _a, _b;
+        const isActive = tool === "bold"
+            ? formattingState.bold
+            : tool === "italic"
+                ? formattingState.italic
+                : tool === "underline"
+                    ? formattingState.underline
+                    : tool === "fontSize"
+                        ? formattingState.fontSize !== DEFAULT_FORMATTING_STATE.fontSize
+                        : tool === "alignLeft"
+                            ? formattingState.textAlign === "left"
+                            : tool === "alignCenter"
+                                ? formattingState.textAlign === "center"
+                                : tool === "alignRight"
+                                    ? formattingState.textAlign === "right"
+                                    : false;
+        const isFloatingToolbar = toolbarConfig.position === "floating";
+        const handleMouseDown = (event) => {
+            event.preventDefault();
+            focusEditor();
+        };
         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 });
+            case "bold":
+                return (React__default.createElement(Button, { key: index, size: "sm", color: "neutral", variant: "ghost", iconOnly: true, className: cn(themeStyles.toolbarButtonStyle), "data-state": isActive ? "active" : "inactive", "data-pressed": isActive ? "true" : "false", onMouseDown: handleMouseDown, onClick: handleBold, disabled: isDisabled, "aria-label": "Bold", "aria-pressed": isActive ? "true" : "false" },
+                    React__default.createElement(BoldIcon, { className: "w-4 h-4" })));
+            case "italic":
+                return (React__default.createElement(Button, { key: index, size: "sm", color: "neutral", variant: "ghost", iconOnly: true, className: cn(themeStyles.toolbarButtonStyle), "data-state": isActive ? "active" : "inactive", "data-pressed": isActive ? "true" : "false", onMouseDown: handleMouseDown, onClick: handleItalic, disabled: isDisabled, "aria-label": "Italic", "aria-pressed": isActive ? "true" : "false" },
+                    React__default.createElement(ItalicIcon, { className: "w-4 h-4" })));
+            case "underline":
+                return (React__default.createElement(Button, { key: index, size: "sm", color: "neutral", variant: "ghost", iconOnly: true, className: cn(themeStyles.toolbarButtonStyle), "data-state": isActive ? "active" : "inactive", "data-pressed": isActive ? "true" : "false", onMouseDown: handleMouseDown, onClick: handleUnderline, disabled: isDisabled, "aria-label": "Underline", "aria-pressed": isActive ? "true" : "false" },
+                    React__default.createElement(UnderlineIcon, { className: "w-4 h-4" })));
+            case "fontSize": {
+                const currentOption = getFontSizeOption(formattingState.fontSize);
+                const dropdownClassName = themeStyles.dropdownStyle;
+                const fontSizeAnimations = createDropdownAnimations(fontSizeIsFlipped);
+                const dropdownList = (React__default.createElement("div", { className: dropdownClassName, role: "listbox" }, FONT_SIZE_OPTIONS.map((option) => (React__default.createElement("button", { key: option.key, className: cn(themeStyles.dropdownItemStyle, option.key === formattingState.fontSize
+                        ? "bg-[var(--color-primary-50)] text-[var(--color-primary-900)]"
+                        : undefined), "data-active": option.key === formattingState.fontSize ? "true" : "false", onMouseDown: (event) => {
+                        event.preventDefault();
+                        focusEditor();
+                    }, onClick: (event) => {
+                        event.preventDefault();
+                        event.stopPropagation();
+                        handleFontSize(option.key);
+                    }, role: "option", "aria-selected": option.key === formattingState.fontSize },
+                    React__default.createElement("span", { className: "flex items-center justify-between gap-3" },
+                        React__default.createElement("span", { className: "uppercase text-xs font-medium" }, option.label),
+                        React__default.createElement("span", { className: "text-xs text-[var(--color-text-muted)]" },
+                            option.px,
+                            "px")))))));
+                let renderedDropdown = null;
+                if (isFloatingToolbar && typeof document !== "undefined") {
+                    const triggerWidth = (_a = fontSizeTriggerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width;
+                    const computedWidth = fontSizePortalPosition.width || triggerWidth || undefined;
+                    const dropdownStyle = {
+                        position: "fixed",
+                        top: fontSizePortalPosition.top,
+                        left: fontSizePortalPosition.left,
+                        zIndex: 1000,
+                        ...fontSizePortalCssVars,
+                    };
+                    if (computedWidth) {
+                        dropdownStyle.minWidth = computedWidth;
+                        dropdownStyle.width = computedWidth;
+                    }
+                    renderedDropdown = createPortal(React__default.createElement(AnimatePresence, { mode: "wait" }, showFontSizePicker && (React__default.createElement(motion.div, { ref: (el) => {
+                            fontSizePortalContentRef.current = el;
+                        }, style: dropdownStyle, variants: shouldReduceMotion ? undefined : fontSizeAnimations, initial: "initial", animate: fontSizePortalReady ? "visible" : "initial", exit: "exit" }, dropdownList))), document.body);
+                }
+                else {
+                    renderedDropdown = showFontSizePicker ? dropdownList : null;
+                    if (!showFontSizePicker) {
+                        fontSizePortalContentRef.current = null;
+                    }
+                }
+                return (React__default.createElement("div", { key: index, className: "relative", "data-tool": "fontSize" },
+                    React__default.createElement(Button, { ref: fontSizeTriggerRef, size: "sm", color: "neutral", variant: "ghost", className: cn(themeStyles.toolbarButtonStyle, "px-2 min-w-[3rem] gap-1"), "data-state": isActive ? "active" : "inactive", "data-pressed": isActive ? "true" : "false", onMouseDown: handleMouseDown, onClick: (event) => {
+                            event.preventDefault();
+                            event.stopPropagation();
+                            focusEditor();
+                            setShowFontSizePicker((previous) => !previous);
+                            setShowColorPicker(false);
+                        }, disabled: isDisabled, "aria-label": "Font size", "aria-expanded": showFontSizePicker, "aria-haspopup": "listbox" },
+                        React__default.createElement("span", { className: "text-xs font-medium tracking-wide uppercase" }, currentOption.label)),
+                    toolbarConfig.position === "floating" ? null : renderedDropdown,
+                    toolbarConfig.position === "floating" ? renderedDropdown : null));
+            }
+            case "textColor":
+                {
+                    const colorDropdownClassName = cn(themeStyles.dropdownStyle, themeStyles.colorPickerStyle);
+                    const colorAnimations = createDropdownAnimations(colorIsFlipped);
+                    const colorDropdownList = (React__default.createElement("div", { className: cn(colorDropdownClassName, "p-2") }, colorOptions.map((color) => (React__default.createElement("button", { key: color.value, className: themeStyles.colorSwatchStyle, style: { backgroundColor: color.value }, onMouseDown: (event) => {
+                            event.preventDefault();
+                            focusEditor();
+                        }, onClick: (event) => {
+                            event.preventDefault();
+                            event.stopPropagation();
+                            handleTextColor(color.value);
+                        }, "aria-label": `Set text color to ${color.label}` })))));
+                    let renderedColorDropdown = null;
+                    if (isFloatingToolbar && typeof document !== "undefined") {
+                        const triggerWidth = (_b = colorTriggerRef.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect().width;
+                        const computedWidth = colorPortalPosition.width || triggerWidth || undefined;
+                        const dropdownStyle = {
+                            position: "fixed",
+                            top: colorPortalPosition.top,
+                            left: colorPortalPosition.left,
+                            zIndex: 1000,
+                            ...colorPortalCssVars,
+                        };
+                        if (computedWidth) {
+                            dropdownStyle.minWidth = computedWidth;
+                            dropdownStyle.width = computedWidth;
+                        }
+                        renderedColorDropdown = createPortal(React__default.createElement(AnimatePresence, { mode: "wait" }, showColorPicker && (React__default.createElement(motion.div, { ref: (el) => {
+                                colorPortalContentRef.current = el;
+                            }, style: dropdownStyle, variants: shouldReduceMotion ? undefined : colorAnimations, initial: "initial", animate: colorPortalReady ? "visible" : "initial", exit: "exit" }, colorDropdownList))), document.body);
+                    }
+                    else {
+                        renderedColorDropdown = showColorPicker ? colorDropdownList : null;
+                        if (!showColorPicker) {
+                            colorPortalContentRef.current = null;
+                        }
+                    }
+                    return (React__default.createElement("div", { key: index, className: "relative", "data-tool": "textColor" },
+                        React__default.createElement(Button, { ref: colorTriggerRef, size: "sm", color: "neutral", variant: "ghost", iconOnly: true, className: cn(themeStyles.toolbarButtonStyle), onMouseDown: handleMouseDown, onClick: (event) => {
+                                event.preventDefault();
+                                event.stopPropagation();
+                                focusEditor();
+                                setShowFontSizePicker(false);
+                                setShowColorPicker((previous) => !previous);
+                            }, disabled: isDisabled, "aria-label": "Text Color", "aria-expanded": showColorPicker },
+                            React__default.createElement(PaintBrushIcon, { className: "w-4 h-4" })),
+                        isFloatingToolbar ? null : renderedColorDropdown,
+                        isFloatingToolbar ? renderedColorDropdown : null));
+                }
+            case "alignLeft":
+                return (React__default.createElement(Button, { key: index, size: "sm", color: "neutral", variant: "ghost", iconOnly: true, className: cn(themeStyles.toolbarButtonStyle), "data-state": isActive ? "active" : "inactive", "data-pressed": isActive ? "true" : "false", onMouseDown: handleMouseDown, onClick: (event) => {
+                        event.preventDefault();
+                        event.stopPropagation();
+                        handleAlign("left");
+                    }, disabled: isDisabled, "aria-label": "Align Left", "aria-pressed": isActive ? "true" : "false" },
+                    React__default.createElement(Bars3BottomLeftIcon, { className: "w-4 h-4" })));
+            case "alignCenter":
+                return (React__default.createElement(Button, { key: index, size: "sm", color: "neutral", variant: "ghost", iconOnly: true, className: cn(themeStyles.toolbarButtonStyle), "data-state": isActive ? "active" : "inactive", "data-pressed": isActive ? "true" : "false", onMouseDown: handleMouseDown, onClick: (event) => {
+                        event.preventDefault();
+                        event.stopPropagation();
+                        handleAlign("center");
+                    }, disabled: isDisabled, "aria-label": "Align Center", "aria-pressed": isActive ? "true" : "false" },
+                    React__default.createElement(Bars3Icon, { className: "w-4 h-4" })));
+            case "alignRight":
+                return (React__default.createElement(Button, { key: index, size: "sm", color: "neutral", variant: "ghost", iconOnly: true, className: cn(themeStyles.toolbarButtonStyle), "data-state": isActive ? "active" : "inactive", "data-pressed": isActive ? "true" : "false", onMouseDown: handleMouseDown, onClick: (event) => {
+                        event.preventDefault();
+                        event.stopPropagation();
+                        handleAlign("right");
+                    }, disabled: isDisabled, "aria-label": "Align Right", "aria-pressed": isActive ? "true" : "false" },
+                    React__default.createElement(Bars3BottomRightIcon, { className: "w-4 h-4" })));
+            case "undo":
+                return (React__default.createElement(Button, { key: index, size: "sm", color: "neutral", variant: "ghost", iconOnly: true, className: cn(themeStyles.toolbarButtonStyle), onMouseDown: handleMouseDown, onClick: handleUndo, disabled: isDisabled, "aria-label": "Undo" },
+                    React__default.createElement(ArrowUturnLeftIcon, { className: "w-4 h-4" })));
+            case "redo":
+                return (React__default.createElement(Button, { key: index, size: "sm", color: "neutral", variant: "ghost", iconOnly: true, className: cn(themeStyles.toolbarButtonStyle), onMouseDown: handleMouseDown, onClick: handleRedo, disabled: isDisabled, "aria-label": "Redo" },
+                    React__default.createElement(ArrowUturnRightIcon, { className: "w-4 h-4" })));
+            case "separator":
+                return React__default.createElement("div", { key: index, className: themeStyles.separatorStyle });
             default:
                 return null;
         }
     };
-    // Render toolbar
-    var renderToolbar = function () {
-        if (!toolbar.show || !toolbar.tools)
+    const renderToolbar = () => {
+        if (!toolbarConfig.show || !toolbarConfig.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;
+        const toolbarClass = cn(themeStyles.toolbarStyle, toolbarConfig.className);
+        const toolbarContent = (React__default.createElement("div", { ref: toolbarRef, className: toolbarClass }, toolbarConfig.tools.map((tool, index) => renderToolbarTool(tool, index))));
+        if (toolbarConfig.position === "floating") {
+            return (React__default.createElement(AnimatePresence, { mode: "wait" }, showToolbar && (React__default.createElement(motion.div, { key: "floating-toolbar", variants: shouldReduceMotion ? undefined : floatingToolbarVariants, initial: "initial", animate: "animate", exit: "exit", 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))));
         }
         return toolbarContent;
     };
-    return (React__default.createElement("div", __assign({ className: cn(richTextEditorTheme.baseStyle, richTextEditorTheme.sizes[size], className) }, props),
+    return (React__default.createElement("div", { className: cn(themeStyles.wrapperStyle, 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) {
+            React__default.createElement("div", { className: cn(themeStyles.containerStyle, themeStyles.states[state], themeStyles.sizes[size]), "data-state": getDataState() },
+                toolbarConfig.position === "top" && renderToolbar(),
+                React__default.createElement("div", { ref: (el) => {
                         if (el) {
                             editorRef.current = el;
-                            if (typeof ref === 'function') {
+                            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 () {
+                    }, id: editorId, contentEditable: !isDisabled, className: cn(themeStyles.editorStyle), "data-state": getDataState(), style: { minHeight: `${minHeight}px`, maxHeight: maxHeight ? `${maxHeight}px` : undefined }, "data-placeholder": placeholder, onFocus: () => {
                         setIsFocused(true);
                         updateFormattingState();
-                    }, onBlur: function (e) {
-                        var _a;
+                    }, onBlur: () => {
                         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') {
+                        if (toolbarConfig.position === "floating") {
                             setShowToolbar(false);
                         }
                         setShowColorPicker(false);
+                        setShowFontSizePicker(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))));
+            toolbarConfig.position === "floating" && renderToolbar()),
+        helperText && (React__default.createElement("div", { className: cn(themeStyles.helperText, helperTextClassName) }, helperText))));
 });
 RichTextEditor.displayName = "RichTextEditor";
 
-export { RichTextEditor, RichTextEditor as default };
+export { RichTextEditor };