flikkui 0.1.0-beta.11

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

@@ -0,0 +1,717 @@
+import { __rest, __assign, __spreadArray } from '../../../node_modules/tslib/tslib.es6.js';
+import React__default, { useState, useRef, useMemo, useCallback, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+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 { useSelectPortal } from '../../../hooks/useSelectPortal.js';
+import { createDropdownAnimations } from '../Select/Select.animations.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 { useReducedMotion } from '../../../node_modules/framer-motion/dist/es/utils/reduced-motion/use-reduced-motion.js';
+import { AnimatePresence } from '../../../node_modules/framer-motion/dist/es/components/AnimatePresence/index.js';
+import { motion } from '../../../node_modules/framer-motion/dist/es/render/components/motion/proxy.js';
+
+var 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 },
+];
+var FONT_SIZE_COMMAND_VALUE = {
+    xs: "1",
+    sm: "2",
+    md: "3",
+    lg: "4",
+    xl: "5",
+    "2xl": "6",
+    "3xl": "7",
+    "4xl": "7",
+};
+var getFontSizeOption = function (key) { var _a; return (_a = FONT_SIZE_OPTIONS.find(function (option) { return option.key === key; })) !== null && _a !== void 0 ? _a : FONT_SIZE_OPTIONS[2]; };
+var getClosestFontSizeKey = function (px) {
+    var closest = "md";
+    var minDiff = Number.POSITIVE_INFINITY;
+    FONT_SIZE_OPTIONS.forEach(function (option) {
+        var diff = Math.abs(option.px - px);
+        if (diff < minDiff) {
+            minDiff = diff;
+            closest = option.key;
+        }
+    });
+    return closest;
+};
+var DEFAULT_FORMATTING_STATE = {
+    bold: false,
+    italic: false,
+    underline: false,
+    textAlign: "left",
+    fontSize: "md",
+    textColor: "#000000",
+};
+var DEFAULT_TOOLBAR = {
+    show: true,
+    position: "top",
+    tools: [
+        "bold",
+        "italic",
+        "underline",
+        "separator",
+        "fontSize",
+        "textColor",
+        "separator",
+        "alignLeft",
+        "alignCenter",
+        "alignRight",
+        "separator",
+        "undo",
+        "redo",
+    ],
+};
+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, toolbarProp = _k === void 0 ? DEFAULT_TOOLBAR : _k, _l = _a.theme, theme = _l === void 0 ? {} : _l, 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(DEFAULT_FORMATTING_STATE), formattingState = _q[0], setFormattingState = _q[1];
+    var _r = useState(false), showFontSizePicker = _r[0], setShowFontSizePicker = _r[1];
+    var _s = useState(false), showColorPicker = _s[0], setShowColorPicker = _s[1];
+    var shouldReduceMotion = useReducedMotion();
+    var editorRef = useRef(null);
+    var toolbarRef = useRef(null);
+    var fontSizeTriggerRef = useRef(null);
+    var colorTriggerRef = useRef(null);
+    var editorId = id || "rich-text-editor-".concat(Math.random().toString(36).substring(2, 9));
+    var themeStyles = useMemo(function () {
+        var _a, _b;
+        return (__assign(__assign(__assign({}, richTextEditorTheme), theme), { sizes: __assign(__assign({}, richTextEditorTheme.sizes), ((_a = theme === null || theme === void 0 ? void 0 : theme.sizes) !== null && _a !== void 0 ? _a : {})), states: __assign(__assign({}, richTextEditorTheme.states), ((_b = theme === null || theme === void 0 ? void 0 : theme.states) !== null && _b !== void 0 ? _b : {})) }));
+    }, [theme]);
+    var toolbarConfig = useMemo(function () {
+        var _a, _b, _c;
+        var base = {
+            show: (_a = DEFAULT_TOOLBAR.show) !== null && _a !== void 0 ? _a : true,
+            position: (_b = DEFAULT_TOOLBAR.position) !== null && _b !== void 0 ? _b : "top",
+            tools: __spreadArray([], ((_c = DEFAULT_TOOLBAR.tools) !== null && _c !== void 0 ? _c : []), true),
+            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 = __spreadArray([], toolbarProp.tools, true);
+            }
+            if (typeof toolbarProp.className === "string") {
+                base.className = toolbarProp.className;
+            }
+        }
+        return base;
+    }, [toolbarProp]);
+    var _t = useSelectPortal({
+        triggerRef: fontSizeTriggerRef,
+        isOpen: showFontSizePicker,
+        placement: "bottom-start",
+        offset: 6,
+        autoWidth: true,
+    }), fontSizePortalPosition = _t.position, fontSizePortalCssVars = _t.cssVariables, fontSizePortalContentRef = _t.contentRef, fontSizePortalReady = _t.isReady, fontSizeIsFlipped = _t.isFlipped;
+    var _u = useSelectPortal({
+        triggerRef: colorTriggerRef,
+        isOpen: showColorPicker,
+        placement: "bottom-start",
+        offset: 6,
+        autoWidth: true,
+    }), colorPortalPosition = _u.position, colorPortalCssVars = _u.cssVariables, colorPortalContentRef = _u.contentRef, colorPortalReady = _u.isReady, colorIsFlipped = _u.isFlipped;
+    var isDisabled = state === "disabled";
+    var isInvalid = state === "invalid";
+    var getDataState = function () {
+        if (isDisabled)
+            return "disabled";
+        if (isInvalid)
+            return "invalid";
+        if (isFocused)
+            return "focus";
+        return "default";
+    };
+    var focusEditor = useCallback(function () {
+        if (editorRef.current && document.activeElement !== editorRef.current) {
+            editorRef.current.focus();
+        }
+    }, []);
+    var getCurrentFontSize = useCallback(function () {
+        if (!editorRef.current)
+            return DEFAULT_FORMATTING_STATE.fontSize;
+        var selection = window.getSelection();
+        if (!selection || selection.rangeCount === 0) {
+            var editorComputed_1 = window.getComputedStyle(editorRef.current);
+            var editorSize_1 = parseFloat(editorComputed_1.fontSize || "");
+            return Number.isFinite(editorSize_1)
+                ? getClosestFontSizeKey(editorSize_1)
+                : DEFAULT_FORMATTING_STATE.fontSize;
+        }
+        var range = selection.getRangeAt(0);
+        var node = range.startContainer;
+        if (node.nodeType === Node.TEXT_NODE) {
+            node = node.parentElement;
+        }
+        while (node && node !== editorRef.current) {
+            if (node instanceof HTMLElement) {
+                var computed = window.getComputedStyle(node);
+                var size_1 = parseFloat(computed.fontSize || "");
+                if (Number.isFinite(size_1)) {
+                    return getClosestFontSizeKey(size_1);
+                }
+            }
+            node = node ? node.parentNode : null;
+        }
+        var editorComputed = window.getComputedStyle(editorRef.current);
+        var editorSize = parseFloat(editorComputed.fontSize || "");
+        return Number.isFinite(editorSize)
+            ? getClosestFontSizeKey(editorSize)
+            : DEFAULT_FORMATTING_STATE.fontSize;
+    }, []);
+    var updateFormattingState = useCallback(function () {
+        if (!editorRef.current || isDisabled) {
+            setFormattingState(DEFAULT_FORMATTING_STATE);
+            return;
+        }
+        var bold = false;
+        var italic = false;
+        var underline = false;
+        var textAlign = "left";
+        var fontSize = DEFAULT_FORMATTING_STATE.fontSize;
+        var textColor = DEFAULT_FORMATTING_STATE.textColor;
+        try {
+            bold = document.queryCommandState("bold");
+        }
+        catch (error) {
+            if (process.env.NODE_ENV !== 'production') {
+                console.warn("queryCommandState bold failed", error);
+            }
+        }
+        try {
+            italic = document.queryCommandState("italic");
+        }
+        catch (error) {
+            if (process.env.NODE_ENV !== 'production') {
+                console.warn("queryCommandState italic failed", error);
+            }
+        }
+        try {
+            underline = document.queryCommandState("underline");
+        }
+        catch (error) {
+            if (process.env.NODE_ENV !== 'production') {
+                console.warn("queryCommandState underline failed", error);
+            }
+        }
+        try {
+            if (document.queryCommandState("justifyCenter")) {
+                textAlign = "center";
+            }
+            else if (document.queryCommandState("justifyRight")) {
+                textAlign = "right";
+            }
+            else if (document.queryCommandState("justifyFull")) {
+                textAlign = "justify";
+            }
+            else {
+                textAlign = "left";
+            }
+        }
+        catch (error) {
+            if (process.env.NODE_ENV !== 'production') {
+                console.warn("queryCommandState alignment failed", error);
+            }
+        }
+        try {
+            fontSize = getCurrentFontSize();
+        }
+        catch (error) {
+            if (process.env.NODE_ENV !== 'production') {
+                console.warn("Failed to determine font size", error);
+            }
+        }
+        try {
+            var colorValue = document.queryCommandValue("foreColor");
+            if (typeof colorValue === "string" && colorValue.trim().length > 0) {
+                textColor = colorValue;
+            }
+        }
+        catch (error) {
+            if (process.env.NODE_ENV !== 'production') {
+                console.warn("queryCommandValue foreColor failed", error);
+            }
+        }
+        setFormattingState({
+            bold: bold,
+            italic: italic,
+            underline: underline,
+            textAlign: textAlign,
+            fontSize: fontSize,
+            textColor: textColor,
+        });
+    }, [getCurrentFontSize, isDisabled]);
+    var handleContentChange = useCallback(function () {
+        if (!editorRef.current || !onChange)
+            return;
+        onChange(editorRef.current.innerHTML);
+    }, [onChange]);
+    var execEditorCommand = useCallback(function (command, value) {
+        if (isDisabled || !editorRef.current)
+            return;
+        focusEditor();
+        try {
+            document.execCommand(command, false, value);
+        }
+        catch (error) {
+            if (process.env.NODE_ENV !== 'production') {
+                console.warn("execCommand ".concat(command, " failed"), error);
+            }
+        }
+        requestAnimationFrame(function () {
+            updateFormattingState();
+            handleContentChange();
+        });
+    }, [focusEditor, handleContentChange, isDisabled, updateFormattingState]);
+    var normalizeFontSizeSelection = useCallback(function (sizeKey) {
+        if (!editorRef.current)
+            return;
+        var option = getFontSizeOption(sizeKey);
+        var selection = window.getSelection();
+        if (!selection || selection.rangeCount === 0)
+            return;
+        var range = selection.getRangeAt(0);
+        var value = option.value;
+        if (selection.isCollapsed) {
+            var 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 walker = document.createTreeWalker(range.commonAncestorContainer, NodeFilter.SHOW_TEXT, {
+            acceptNode: function (node) {
+                return range.intersectsNode(node) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
+            },
+        });
+        var updated = new Set();
+        var current;
+        while ((current = walker.nextNode())) {
+            var parent_1 = current.parentElement;
+            if (!parent_1 || !editorRef.current.contains(parent_1))
+                continue;
+            if (updated.has(parent_1))
+                continue;
+            parent_1.style.fontSize = value;
+            if (parent_1.tagName.toLowerCase() === "font") {
+                parent_1.removeAttribute("size");
+            }
+            updated.add(parent_1);
+        }
+    }, []);
+    var handleUndo = useCallback(function (event) {
+        event === null || event === void 0 ? void 0 : event.preventDefault();
+        event === null || event === void 0 ? void 0 : event.stopPropagation();
+        execEditorCommand("undo");
+    }, [execEditorCommand]);
+    var handleRedo = useCallback(function (event) {
+        event === null || event === void 0 ? void 0 : event.preventDefault();
+        event === null || event === void 0 ? void 0 : event.stopPropagation();
+        execEditorCommand("redo");
+    }, [execEditorCommand]);
+    var handleBold = useCallback(function (event) {
+        event === null || event === void 0 ? void 0 : event.preventDefault();
+        event === null || event === void 0 ? void 0 : event.stopPropagation();
+        execEditorCommand("bold");
+    }, [execEditorCommand]);
+    var handleItalic = useCallback(function (event) {
+        event === null || event === void 0 ? void 0 : event.preventDefault();
+        event === null || event === void 0 ? void 0 : event.stopPropagation();
+        execEditorCommand("italic");
+    }, [execEditorCommand]);
+    var handleUnderline = useCallback(function (event) {
+        event === null || event === void 0 ? void 0 : event.preventDefault();
+        event === null || event === void 0 ? void 0 : event.stopPropagation();
+        execEditorCommand("underline");
+    }, [execEditorCommand]);
+    var handleFontSize = useCallback(function (sizeKey) {
+        if (isDisabled || !editorRef.current)
+            return;
+        focusEditor();
+        try {
+            document.execCommand("styleWithCSS", false, "true");
+        }
+        catch (error) {
+            if (process.env.NODE_ENV !== 'production') {
+                console.warn("styleWithCSS command failed", error);
+            }
+        }
+        try {
+            document.execCommand("fontSize", false, FONT_SIZE_COMMAND_VALUE[sizeKey]);
+        }
+        catch (error) {
+            if (process.env.NODE_ENV !== 'production') {
+                console.warn("fontSize command failed", error);
+            }
+        }
+        normalizeFontSizeSelection(sizeKey);
+        try {
+            document.execCommand("styleWithCSS", false, "false");
+        }
+        catch (error) {
+            // Some browsers do not support toggling this flag; ignore.
+        }
+        requestAnimationFrame(function () {
+            updateFormattingState();
+            handleContentChange();
+        });
+        setShowFontSizePicker(false);
+        setShowColorPicker(false);
+    }, [
+        focusEditor,
+        handleContentChange,
+        isDisabled,
+        normalizeFontSizeSelection,
+        updateFormattingState,
+    ]);
+    var handleTextColor = useCallback(function (color) {
+        execEditorCommand("foreColor", color);
+        setShowColorPicker(false);
+        setShowFontSizePicker(false);
+    }, [execEditorCommand]);
+    var handleAlign = useCallback(function (alignment) {
+        var commandMap = {
+            left: "justifyLeft",
+            center: "justifyCenter",
+            right: "justifyRight",
+        };
+        execEditorCommand(commandMap[alignment]);
+    }, [execEditorCommand]);
+    var handleSelection = useCallback(function () {
+        if (!editorRef.current || isDisabled)
+            return;
+        updateFormattingState();
+        if (toolbarConfig.position !== "floating")
+            return;
+        var selection = window.getSelection();
+        if (!selection || selection.rangeCount === 0) {
+            setShowToolbar(false);
+            return;
+        }
+        var range = selection.getRangeAt(0);
+        if (!editorRef.current.contains(range.commonAncestorContainer) || selection.isCollapsed) {
+            setShowToolbar(false);
+            return;
+        }
+        var rect = range.getBoundingClientRect();
+        var editorRect = editorRef.current.getBoundingClientRect();
+        if (rect.width === 0 && rect.height === 0) {
+            setShowToolbar(false);
+            return;
+        }
+        var toolbarWidth = 200;
+        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, toolbarConfig.position, updateFormattingState]);
+    useEffect(function () {
+        if (!editorRef.current)
+            return;
+        var editor = editorRef.current;
+        var handleInput = function () {
+            handleContentChange();
+            updateFormattingState();
+        };
+        editor.addEventListener("input", handleInput);
+        return function () {
+            editor.removeEventListener("input", handleInput);
+        };
+    }, [handleContentChange, updateFormattingState]);
+    useEffect(function () {
+        var handleSelectionChange = function () {
+            if (!editorRef.current)
+                return;
+            var selection = window.getSelection();
+            if (!selection || selection.rangeCount === 0) {
+                setShowToolbar(false);
+                updateFormattingState();
+                return;
+            }
+            var range = selection.getRangeAt(0);
+            if (!editorRef.current.contains(range.commonAncestorContainer)) {
+                setShowToolbar(false);
+                return;
+            }
+            handleSelection();
+        };
+        document.addEventListener("selectionchange", handleSelectionChange);
+        return function () { return document.removeEventListener("selectionchange", handleSelectionChange); };
+    }, [handleSelection, updateFormattingState]);
+    useEffect(function () {
+        var handleClickOutside = function (event) {
+            var _a, _b, _c, _d;
+            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);
+            var isInFontSizeDropdown = (_c = fontSizePortalContentRef.current) === null || _c === void 0 ? void 0 : _c.contains(target);
+            var 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 || isInFontSizeDropdown || isInColorDropdown) {
+                var colorMatch = target === null || target === void 0 ? void 0 : target.closest("[data-tool=\"textColor\"]");
+                var isColorRelated = Boolean(colorMatch) || isInColorDropdown;
+                var fontSizeMatch = target === null || target === void 0 ? void 0 : target.closest("[data-tool=\"fontSize\"]");
+                var isFontSizeRelated = isInFontSizeDropdown || Boolean(fontSizeMatch);
+                if (!isColorRelated) {
+                    setShowColorPicker(false);
+                }
+                if (!isFontSizeRelated) {
+                    setShowFontSizePicker(false);
+                }
+            }
+            else if (isInEditor) {
+                setShowColorPicker(false);
+                setShowFontSizePicker(false);
+            }
+        };
+        document.addEventListener("mousedown", handleClickOutside);
+        return function () { return document.removeEventListener("mousedown", handleClickOutside); };
+    }, [toolbarConfig.position]);
+    useEffect(function () {
+        if (editorRef.current && value !== editorRef.current.innerHTML) {
+            editorRef.current.innerHTML = value;
+            updateFormattingState();
+        }
+    }, [updateFormattingState, value]);
+    var renderToolbarTool = function (tool, index) {
+        var _a, _b;
+        var 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;
+        var isFloatingToolbar = toolbarConfig.position === "floating";
+        var handleMouseDown = function (event) {
+            event.preventDefault();
+            focusEditor();
+        };
+        switch (tool) {
+            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(ForwardRef$8, { 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(ForwardRef$7, { 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(ForwardRef$6, { className: "w-4 h-4" })));
+            case "fontSize": {
+                var currentOption = getFontSizeOption(formattingState.fontSize);
+                var dropdownClassName = themeStyles.dropdownStyle;
+                var fontSizeAnimations = createDropdownAnimations(fontSizeIsFlipped);
+                var dropdownList = (React__default.createElement("div", { className: dropdownClassName, role: "listbox" }, FONT_SIZE_OPTIONS.map(function (option) { return (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: function (event) {
+                        event.preventDefault();
+                        focusEditor();
+                    }, onClick: function (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")))); })));
+                var renderedDropdown = null;
+                if (isFloatingToolbar && typeof document !== "undefined") {
+                    var triggerWidth = (_a = fontSizeTriggerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width;
+                    var computedWidth = fontSizePortalPosition.width || triggerWidth || undefined;
+                    var dropdownStyle = __assign({ 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: function (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: function (event) {
+                            event.preventDefault();
+                            event.stopPropagation();
+                            focusEditor();
+                            setShowFontSizePicker(function (previous) { return !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":
+                {
+                    var colorDropdownClassName = cn(themeStyles.dropdownStyle, themeStyles.colorPickerStyle);
+                    var colorAnimations = createDropdownAnimations(colorIsFlipped);
+                    var colorDropdownList = (React__default.createElement("div", { className: cn(colorDropdownClassName, "p-2") }, colorOptions.map(function (color) { return (React__default.createElement("button", { key: color.value, className: themeStyles.colorSwatchStyle, style: { backgroundColor: color.value }, onMouseDown: function (event) {
+                            event.preventDefault();
+                            focusEditor();
+                        }, onClick: function (event) {
+                            event.preventDefault();
+                            event.stopPropagation();
+                            handleTextColor(color.value);
+                        }, "aria-label": "Set text color to ".concat(color.label) })); })));
+                    var renderedColorDropdown = null;
+                    if (isFloatingToolbar && typeof document !== "undefined") {
+                        var triggerWidth = (_b = colorTriggerRef.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect().width;
+                        var computedWidth = colorPortalPosition.width || triggerWidth || undefined;
+                        var dropdownStyle = __assign({ 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: function (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: function (event) {
+                                event.preventDefault();
+                                event.stopPropagation();
+                                focusEditor();
+                                setShowFontSizePicker(false);
+                                setShowColorPicker(function (previous) { return !previous; });
+                            }, disabled: isDisabled, "aria-label": "Text Color", "aria-expanded": showColorPicker },
+                            React__default.createElement(ForwardRef$5, { 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: function (event) {
+                        event.preventDefault();
+                        event.stopPropagation();
+                        handleAlign("left");
+                    }, disabled: isDisabled, "aria-label": "Align Left", "aria-pressed": isActive ? "true" : "false" },
+                    React__default.createElement(ForwardRef$4, { 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: function (event) {
+                        event.preventDefault();
+                        event.stopPropagation();
+                        handleAlign("center");
+                    }, disabled: isDisabled, "aria-label": "Align Center", "aria-pressed": isActive ? "true" : "false" },
+                    React__default.createElement(ForwardRef$3, { 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: function (event) {
+                        event.preventDefault();
+                        event.stopPropagation();
+                        handleAlign("right");
+                    }, disabled: isDisabled, "aria-label": "Align Right", "aria-pressed": isActive ? "true" : "false" },
+                    React__default.createElement(ForwardRef$2, { 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(ForwardRef$1, { 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(ForwardRef, { className: "w-4 h-4" })));
+            case "separator":
+                return React__default.createElement("div", { key: index, className: themeStyles.separatorStyle });
+            default:
+                return null;
+        }
+    };
+    var renderToolbar = function () {
+        if (!toolbarConfig.show || !toolbarConfig.tools)
+            return null;
+        var toolbarClass = cn(themeStyles.toolbarStyle, toolbarConfig.className);
+        var toolbarContent = (React__default.createElement("div", { ref: toolbarRef, className: toolbarClass }, toolbarConfig.tools.map(function (tool, index) { return 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(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(themeStyles.containerStyle, themeStyles.states[state], themeStyles.sizes[size]), "data-state": getDataState() },
+                toolbarConfig.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(themeStyles.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 () {
+                        setIsFocused(false);
+                        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 })),
+            toolbarConfig.position === "floating" && renderToolbar()),
+        helperText && (React__default.createElement("div", { className: cn(themeStyles.helperText, helperTextClassName) }, helperText))));
+});
+RichTextEditor.displayName = "RichTextEditor";
+
+export { RichTextEditor };