@flikk/ui 1.0.0-beta.3 → 1.0.0-beta.30

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

@@ -1,38 +1,39 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import React__default, { useState, useRef, useMemo, useCallback, useEffect } from 'react';
+import React__default, { useState, useCallback, useRef, useMemo, 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 { MONO_COLORS, TAILWIND_COLOR_FAMILIES, getTailwindShadeTokens, richTextEditorTheme, resolveTailwindColor } from './RichTextEditor.theme.js';
 import { floatingToolbarVariants } from './RichTextEditor.animations.js';
 import { cn } from '../../../utils/cn.js';
 import { Button } from '../../core/Button/Button.js';
-import { ArrowUturnRightIcon, ArrowUturnLeftIcon, Bars3BottomRightIcon, Bars3Icon, Bars3BottomLeftIcon, UnderlineIcon, ItalicIcon, BoldIcon } from '@heroicons/react/24/outline';
+import { ScrollArea } from '../../core/ScrollArea/ScrollArea.js';
+import '../../core/ScrollArea/smooth/SmoothScrollEngine.js';
+import { ArrowUturnRightIcon, ArrowUturnLeftIcon, Bars3BottomRightIcon, Bars3Icon, Bars3BottomLeftIcon, ArrowsRightLeftIcon, ArrowsUpDownIcon, BoldIcon, UnderlineIcon, ItalicIcon } 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';
 import { useIsClient } from '../../../hooks/useIsClient.js';
+import { useSurfaceElevation, SurfaceProvider, surfaceClasses } from '../../../theme/SurfaceContext.js';
 
 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 },
+    { key: "xs", label: "XS", value: "0.75rem", px: 12, className: "text-xs" },
+    { key: "sm", label: "SM", value: "0.875rem", px: 14, className: "text-sm" },
+    { key: "md", label: "MD", value: "1rem", px: 16, className: "text-base" },
+    { key: "lg", label: "LG", value: "1.125rem", px: 18, className: "text-lg" },
+    { key: "xl", label: "XL", value: "1.25rem", px: 20, className: "text-xl" },
+    { key: "2xl", label: "2XL", value: "1.5rem", px: 24, className: "text-2xl" },
+    { key: "3xl", label: "3XL", value: "1.875rem", px: 30, className: "text-3xl" },
+    { key: "4xl", label: "4XL", value: "2.25rem", px: 36, className: "text-4xl" },
+    { key: "5xl", label: "5XL", value: "3rem", px: 48, className: "text-5xl" },
+    { key: "6xl", label: "6XL", value: "3.75rem", px: 60, className: "text-6xl" },
+    { key: "7xl", label: "7XL", value: "4.5rem", px: 72, className: "text-7xl" },
+    { key: "8xl", label: "8XL", value: "6rem", px: 96, className: "text-8xl" },
+    { key: "9xl", label: "9XL", value: "8rem", px: 128, className: "text-9xl" },
 ];
-const FONT_SIZE_COMMAND_VALUE = {
-    xs: "1",
-    sm: "2",
-    md: "3",
-    lg: "4",
-    xl: "5",
-    "2xl": "6",
-    "3xl": "7",
-    "4xl": "7",
-};
+/** All font-size class names — used to scrub stale classes when swapping. */
+const FONT_SIZE_CLASSES = FONT_SIZE_OPTIONS.map((o) => o.className);
 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";
@@ -46,23 +47,153 @@ const getClosestFontSizeKey = (px) => {
     });
     return closest;
 };
+/**
+ * Curated default list of font families shipped with the editor.
+ * The `Default` entry clears the inline font-family. The rest are popular
+ * Google Fonts chosen for broad weight coverage. Each stack ends in a sensible
+ * fallback so text stays readable while the font is loading.
+ */
+const DEFAULT_FONT_FAMILY_OPTIONS = [
+    { key: "default", label: "Default", stack: "" },
+    { key: "inter", label: "Inter", family: "Inter", stack: "'Inter', system-ui, sans-serif" },
+    { key: "roboto", label: "Roboto", family: "Roboto", stack: "'Roboto', system-ui, sans-serif" },
+    { key: "manrope", label: "Manrope", family: "Manrope", stack: "'Manrope', system-ui, sans-serif" },
+    { key: "poppins", label: "Poppins", family: "Poppins", stack: "'Poppins', system-ui, sans-serif" },
+    { key: "lora", label: "Lora", family: "Lora", stack: "'Lora', Georgia, serif" },
+    { key: "playfair", label: "Playfair Display", family: "Playfair Display", stack: "'Playfair Display', Georgia, serif" },
+    { key: "merriweather", label: "Merriweather", family: "Merriweather", stack: "'Merriweather', Georgia, serif" },
+    { key: "jetbrains", label: "JetBrains Mono", family: "JetBrains Mono", stack: "'JetBrains Mono', Menlo, monospace" },
+];
+// Bumped when migrating from raw hex values to Tailwind shade tokens
+// (e.g. "rose-500"). Old hex entries from prior versions are ignored — the
+// picker now applies color via `text-{token}` classes, not via execCommand.
+const RECENT_COLORS_KEY = "flikkui-rte-recent-colors-v2";
+const RECENT_COLORS_LIMIT = 10;
+const DEFAULT_FONT_WEIGHT_REQUEST = [100, 200, 300, 400, 500, 600, 700, 800, 900];
+const loadedGoogleFonts = new Set();
+/**
+ * Lazily injects a Google Fonts `<link rel="stylesheet">` for the given family.
+ * Idempotent: each family is requested at most once per page lifetime.
+ * SSR-safe (no-ops when `document` is undefined).
+ *
+ * @example
+ * import { loadGoogleFont } from "@flikk/ui";
+ * loadGoogleFont("Inter");
+ */
+const loadGoogleFont = (family, weights = DEFAULT_FONT_WEIGHT_REQUEST) => {
+    if (typeof document === "undefined")
+        return;
+    if (!family)
+        return;
+    const cacheKey = `${family}:${weights.join(",")}`;
+    if (loadedGoogleFonts.has(cacheKey))
+        return;
+    loadedGoogleFonts.add(cacheKey);
+    const familyParam = family.replace(/\s+/g, "+");
+    const weightsParam = weights.length > 0 ? `:wght@${weights.join(";")}` : "";
+    const href = `https://fonts.googleapis.com/css2?family=${familyParam}${weightsParam}&display=swap`;
+    const link = document.createElement("link");
+    link.rel = "stylesheet";
+    link.href = href;
+    link.setAttribute("data-flikkui-font", family);
+    document.head.appendChild(link);
+};
+const FONT_WEIGHT_OPTIONS = [
+    { key: "thin", label: "Thin", value: "100", weight: 100, className: "font-thin" },
+    { key: "extralight", label: "Extra Light", value: "200", weight: 200, className: "font-extralight" },
+    { key: "light", label: "Light", value: "300", weight: 300, className: "font-light" },
+    { key: "normal", label: "Regular", value: "400", weight: 400, className: "font-normal" },
+    { key: "medium", label: "Medium", value: "500", weight: 500, className: "font-medium" },
+    { key: "semibold", label: "Semibold", value: "600", weight: 600, className: "font-semibold" },
+    { key: "bold", label: "Bold", value: "700", weight: 700, className: "font-bold" },
+    { key: "extrabold", label: "Extra Bold", value: "800", weight: 800, className: "font-extrabold" },
+    { key: "black", label: "Black", value: "900", weight: 900, className: "font-black" },
+];
+const FONT_WEIGHT_CLASSES = FONT_WEIGHT_OPTIONS.map((o) => o.className);
+const getFontWeightOption = (key) => { var _a; return (_a = FONT_WEIGHT_OPTIONS.find((option) => option.key === key)) !== null && _a !== void 0 ? _a : FONT_WEIGHT_OPTIONS[3]; };
+const getClosestFontWeightKey = (weight) => {
+    let closest = "normal";
+    let minDiff = Number.POSITIVE_INFINITY;
+    FONT_WEIGHT_OPTIONS.forEach((option) => {
+        const diff = Math.abs(option.weight - weight);
+        if (diff < minDiff) {
+            minDiff = diff;
+            closest = option.key;
+        }
+    });
+    return closest;
+};
+const LINE_HEIGHT_OPTIONS = [
+    { key: "tight", label: "Tight", value: "1.25", className: "leading-tight" },
+    { key: "snug", label: "Snug", value: "1.375", className: "leading-snug" },
+    { key: "normal", label: "Normal", value: "1.5", className: "leading-normal" },
+    { key: "relaxed", label: "Relaxed", value: "1.625", className: "leading-relaxed" },
+    { key: "loose", label: "Loose", value: "2", className: "leading-loose" },
+];
+const LINE_HEIGHT_CLASSES = LINE_HEIGHT_OPTIONS.map((o) => o.className);
+const getLineHeightOption = (key) => { var _a; return (_a = LINE_HEIGHT_OPTIONS.find((option) => option.key === key)) !== null && _a !== void 0 ? _a : LINE_HEIGHT_OPTIONS[2]; };
+const LETTER_SPACING_OPTIONS = [
+    { key: "tighter", label: "Tighter", value: "-0.05em", em: -0.05, className: "tracking-tighter" },
+    { key: "tight", label: "Tight", value: "-0.025em", em: -0.025, className: "tracking-tight" },
+    { key: "normal", label: "Normal", value: "0em", em: 0, className: "tracking-normal" },
+    { key: "wide", label: "Wide", value: "0.025em", em: 0.025, className: "tracking-wide" },
+    { key: "wider", label: "Wider", value: "0.05em", em: 0.05, className: "tracking-wider" },
+    { key: "widest", label: "Widest", value: "0.1em", em: 0.1, className: "tracking-widest" },
+];
+const LETTER_SPACING_CLASSES = LETTER_SPACING_OPTIONS.map((o) => o.className);
+/**
+ * Every text-color class the picker can apply: `text-white`, `text-black`,
+ * and `text-{family}-{shade}` for each Tailwind family/shade. Used both to
+ * apply the new color and to scrub stale color classes off ancestor wrappers.
+ * Derived once at module load — list size is static.
+ */
+const TEXT_COLOR_CLASSES = [
+    ...MONO_COLORS.map((c) => `text-${c.token}`),
+    ...TAILWIND_COLOR_FAMILIES.flatMap((family) => getTailwindShadeTokens(family).map((token) => `text-${token}`)),
+];
+/** Returns the active text-color token (e.g. `"rose-500"`) walking up from the
+ * given element, or `""` if no `text-{token}` class is found before the editor
+ * boundary. */
+const matchTextColorClass = (el, editor) => {
+    let n = el;
+    while (n && n !== editor) {
+        for (let i = 0; i < n.classList.length; i++) {
+            const cls = n.classList.item(i);
+            if (cls && TEXT_COLOR_CLASSES.includes(cls))
+                return cls.slice("text-".length);
+        }
+        n = n.parentElement;
+    }
+    return "";
+};
+const getLetterSpacingOption = (key) => { var _a; return (_a = LETTER_SPACING_OPTIONS.find((option) => option.key === key)) !== null && _a !== void 0 ? _a : LETTER_SPACING_OPTIONS[2]; };
 const DEFAULT_FORMATTING_STATE = {
     bold: false,
     italic: false,
     underline: false,
     textAlign: "left",
     fontSize: "md",
-    textColor: "#000000",
+    fontWeight: "normal",
+    fontFamily: "default",
+    lineHeight: "normal",
+    letterSpacing: "normal",
+    // Token like "rose-500" / "white" / "black"; "" means inherit (no class
+    // applied). The picker now applies color via `text-{token}` classes
+    // rather than execCommand("foreColor"), so the state holds tokens.
+    textColor: "",
 };
 const DEFAULT_TOOLBAR = {
     show: true,
     position: "top",
     tools: [
-        "bold",
+        "fontWeight",
         "italic",
         "underline",
         "separator",
+        "fontFamily",
         "fontSize",
+        "lineHeight",
+        "letterSpacing",
         "textColor",
         "separator",
         "alignLeft",
@@ -73,19 +204,104 @@ const DEFAULT_TOOLBAR = {
         "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 RichTextEditor = React__default.forwardRef(({ size = "md", state = "default", className = "", label, labelClassName = "", helperText, errorMessage, helperTextClassName = "", value = "", onChange, placeholder = "Start typing...", id, required, minHeight = 120, maxHeight, toolbar: toolbarProp = DEFAULT_TOOLBAR, theme = {}, fontFamilies = DEFAULT_FONT_FAMILY_OPTIONS, loadFontsOnDemand = true, sanitize, elevation, lift, ...props }, ref) => {
+    // Relative elevation: the floating toolbar (bubble menu) and the toolbar
+    // dropdowns lift above their host surface (overlay base = 5) so an editor
+    // inside a Popover/Modal still reads its floating chrome as a higher plane.
+    const surfaceLevel = useSurfaceElevation({ baseRung: 5, offset: 2, elevation, lift });
     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 [showFontWeightPicker, setShowFontWeightPicker] = useState(false);
+    const [showFontFamilyPicker, setShowFontFamilyPicker] = useState(false);
+    const [showLineHeightPicker, setShowLineHeightPicker] = useState(false);
+    const [showLetterSpacingPicker, setShowLetterSpacingPicker] = useState(false);
     const [showColorPicker, setShowColorPicker] = useState(false);
+    // Recently used text colors — persisted to localStorage so they survive reloads.
+    const [recentColors, setRecentColors] = useState(() => {
+        if (typeof window === "undefined")
+            return [];
+        try {
+            const stored = window.localStorage.getItem(RECENT_COLORS_KEY);
+            if (!stored)
+                return [];
+            const parsed = JSON.parse(stored);
+            return Array.isArray(parsed)
+                ? parsed.filter((v) => typeof v === "string").slice(0, RECENT_COLORS_LIMIT)
+                : [];
+        }
+        catch (_a) {
+            return [];
+        }
+    });
+    const addRecentColor = useCallback((token) => {
+        if (!token)
+            return;
+        setRecentColors((prev) => {
+            const next = [token, ...prev.filter((c) => c !== token)].slice(0, RECENT_COLORS_LIMIT);
+            if (typeof window !== "undefined") {
+                try {
+                    window.localStorage.setItem(RECENT_COLORS_KEY, JSON.stringify(next));
+                }
+                catch (_a) {
+                    // localStorage unavailable (private mode, quota exceeded, etc.) — ignore.
+                }
+            }
+            return next;
+        });
+    }, []);
     const shouldReduceMotion = useReducedMotion();
     const isClient = useIsClient();
+    // Built-in basic sanitizer: strips <script> tags and on* event handlers
+    const sanitizeHtml = useCallback((html) => {
+        if (sanitize)
+            return sanitize(html);
+        // Basic sanitization — strips script tags and inline event handlers
+        return html
+            .replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '')
+            .replace(/\bon\w+\s*=\s*(?:"[^"]*"|'[^']*'|[^\s>]+)/gi, '');
+    }, [sanitize]);
     const editorRef = useRef(null);
     const toolbarRef = useRef(null);
     const fontSizeTriggerRef = useRef(null);
+    const fontWeightTriggerRef = useRef(null);
+    const fontFamilyTriggerRef = useRef(null);
+    const lineHeightTriggerRef = useRef(null);
+    const letterSpacingTriggerRef = useRef(null);
     const colorTriggerRef = useRef(null);
+    // Single linear history covering ALL mutations: typing, execCommand
+    // (bold/italic/foreColor/justify/…), and direct-DOM style ops. Typing is
+    // coalesced into one undo entry per ~500 ms run, so users get coarse-grained
+    // word-level undo instead of per-keystroke. Discrete style ops always start
+    // a fresh entry by passing kind='op'.
+    const historyRef = useRef({ undo: [], redo: [], lastPushKind: null, lastPushAt: 0 });
+    const HISTORY_LIMIT = 100;
+    const TYPING_COALESCE_MS = 500;
+    const pushHistory = useCallback((kind = "op") => {
+        if (!editorRef.current)
+            return;
+        const now = Date.now();
+        const stack = historyRef.current;
+        // Coalesce successive typing events into a single undo entry while the
+        // user is mid-word. Skip when the previous push was also typing AND it
+        // happened recently — the existing entry already represents this group.
+        if (kind === "typing" &&
+            stack.lastPushKind === "typing" &&
+            now - stack.lastPushAt < TYPING_COALESCE_MS) {
+            stack.lastPushAt = now;
+            // Any new mutation still invalidates the redo stack.
+            stack.redo = [];
+            return;
+        }
+        stack.undo.push(editorRef.current.innerHTML);
+        stack.redo = [];
+        stack.lastPushKind = kind;
+        stack.lastPushAt = now;
+        if (stack.undo.length > HISTORY_LIMIT)
+            stack.undo.shift();
+    }, []);
     const generatedId = React__default.useId();
     const editorId = id || generatedId;
     const themeStyles = useMemo(() => {
@@ -134,6 +350,34 @@ const RichTextEditor = React__default.forwardRef(({ size = "md", state = "defaul
         offset: 6,
         autoWidth: true,
     });
+    const { position: fontWeightPortalPosition, cssVariables: fontWeightPortalCssVars, contentRef: fontWeightPortalContentRef, isReady: fontWeightPortalReady, isFlipped: fontWeightIsFlipped, } = useSelectPortal({
+        triggerRef: fontWeightTriggerRef,
+        isOpen: showFontWeightPicker,
+        placement: "bottom-start",
+        offset: 6,
+        autoWidth: true,
+    });
+    const { position: fontFamilyPortalPosition, cssVariables: fontFamilyPortalCssVars, contentRef: fontFamilyPortalContentRef, isReady: fontFamilyPortalReady, isFlipped: fontFamilyIsFlipped, } = useSelectPortal({
+        triggerRef: fontFamilyTriggerRef,
+        isOpen: showFontFamilyPicker,
+        placement: "bottom-start",
+        offset: 6,
+        autoWidth: true,
+    });
+    const { position: lineHeightPortalPosition, cssVariables: lineHeightPortalCssVars, contentRef: lineHeightPortalContentRef, isReady: lineHeightPortalReady, isFlipped: lineHeightIsFlipped, } = useSelectPortal({
+        triggerRef: lineHeightTriggerRef,
+        isOpen: showLineHeightPicker,
+        placement: "bottom-start",
+        offset: 6,
+        autoWidth: true,
+    });
+    const { position: letterSpacingPortalPosition, cssVariables: letterSpacingPortalCssVars, contentRef: letterSpacingPortalContentRef, isReady: letterSpacingPortalReady, isFlipped: letterSpacingIsFlipped, } = useSelectPortal({
+        triggerRef: letterSpacingTriggerRef,
+        isOpen: showLetterSpacingPicker,
+        placement: "bottom-start",
+        offset: 6,
+        autoWidth: true,
+    });
     const { position: colorPortalPosition, cssVariables: colorPortalCssVars, contentRef: colorPortalContentRef, isReady: colorPortalReady, isFlipped: colorIsFlipped, } = useSelectPortal({
         triggerRef: colorTriggerRef,
         isOpen: showColorPicker,
@@ -143,6 +387,10 @@ const RichTextEditor = React__default.forwardRef(({ size = "md", state = "defaul
     });
     const isDisabled = state === "disabled";
     const isInvalid = state === "invalid";
+    // errorMessage takes precedence over helperText while invalid; helperText
+    // behavior is unchanged otherwise.
+    const displayedMessage = isInvalid && errorMessage ? errorMessage : helperText;
+    const messageId = `${editorId}-message`;
     const getDataState = () => {
         if (isDisabled)
             return "disabled";
@@ -157,38 +405,151 @@ const RichTextEditor = React__default.forwardRef(({ size = "md", state = "defaul
             editorRef.current.focus();
         }
     }, []);
+    const closeAllPickers = useCallback(() => {
+        setShowFontSizePicker(false);
+        setShowFontWeightPicker(false);
+        setShowFontFamilyPicker(false);
+        setShowLineHeightPicker(false);
+        setShowLetterSpacingPicker(false);
+        setShowColorPicker(false);
+    }, []);
+    const togglePicker = useCallback((which) => {
+        setShowFontSizePicker((prev) => (which === "fontSize" ? !prev : false));
+        setShowFontWeightPicker((prev) => (which === "fontWeight" ? !prev : false));
+        setShowFontFamilyPicker((prev) => (which === "fontFamily" ? !prev : false));
+        setShowLineHeightPicker((prev) => (which === "lineHeight" ? !prev : false));
+        setShowLetterSpacingPicker((prev) => (which === "letterSpacing" ? !prev : false));
+        setShowColorPicker((prev) => (which === "color" ? !prev : false));
+    }, []);
     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;
+        let node = null;
+        if (selection && selection.rangeCount > 0) {
+            node = selection.getRangeAt(0).startContainer;
+            if (node && node.nodeType === Node.TEXT_NODE)
+                node = node.parentElement;
         }
+        // Walk up looking for a `text-*` class (the size classes also bundle a
+        // matching line-height — that's why class-based size is reliable).
         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);
-                }
+                const match = FONT_SIZE_OPTIONS.find((o) => node && node.classList.contains(o.className));
+                if (match)
+                    return match.key;
             }
             node = node ? node.parentNode : null;
         }
+        // No explicit class found — fall back to the editor's computed font-size
+        // mapped to the closest preset. Handles initial/no-selection state.
         const editorComputed = window.getComputedStyle(editorRef.current);
         const editorSize = parseFloat(editorComputed.fontSize || "");
         return Number.isFinite(editorSize)
             ? getClosestFontSizeKey(editorSize)
             : DEFAULT_FORMATTING_STATE.fontSize;
     }, []);
+    const getCurrentFontFamily = useCallback(() => {
+        if (!editorRef.current)
+            return "default";
+        const selection = window.getSelection();
+        let element = null;
+        if (selection && selection.rangeCount > 0) {
+            let node = selection.getRangeAt(0).startContainer;
+            if (node && node.nodeType === Node.TEXT_NODE)
+                node = node.parentElement;
+            if (node instanceof HTMLElement)
+                element = node;
+        }
+        while (element && editorRef.current.contains(element)) {
+            const inline = element.style.fontFamily;
+            if (inline) {
+                // Match against the first family in the inline stack
+                const firstFamily = inline.split(",")[0].trim().replace(/^['"]|['"]$/g, "");
+                const match = fontFamilies.find((opt) => {
+                    if (!opt.family)
+                        return false;
+                    return opt.family.toLowerCase() === firstFamily.toLowerCase();
+                });
+                if (match)
+                    return match.key;
+            }
+            element = element.parentElement;
+        }
+        return "default";
+    }, [fontFamilies]);
+    const getCurrentFontWeight = useCallback(() => {
+        var _a;
+        if (!editorRef.current)
+            return DEFAULT_FORMATTING_STATE.fontWeight;
+        const selection = window.getSelection();
+        let node = null;
+        if (selection && selection.rangeCount > 0) {
+            node = selection.getRangeAt(0).startContainer;
+            if (node && node.nodeType === Node.TEXT_NODE)
+                node = node.parentElement;
+        }
+        while (node && node !== editorRef.current) {
+            if (node instanceof HTMLElement) {
+                const match = FONT_WEIGHT_OPTIONS.find((o) => node && node.classList.contains(o.className));
+                if (match)
+                    return match.key;
+            }
+            node = node ? node.parentNode : null;
+        }
+        // Fallback: read computed font-weight (covers <strong>/<b> tags from
+        // the Bold toggle which produce semantic markup, not classes).
+        const target = (_a = (selection && selection.rangeCount > 0
+            ? (selection.getRangeAt(0).startContainer instanceof HTMLElement
+                ? selection.getRangeAt(0).startContainer
+                : selection.getRangeAt(0).startContainer.parentElement)
+            : null)) !== null && _a !== void 0 ? _a : editorRef.current;
+        const computed = window.getComputedStyle(target);
+        const weight = parseInt(computed.fontWeight, 10);
+        return Number.isFinite(weight)
+            ? getClosestFontWeightKey(weight)
+            : DEFAULT_FORMATTING_STATE.fontWeight;
+    }, []);
+    const getCurrentLineHeight = useCallback(() => {
+        if (!editorRef.current)
+            return DEFAULT_FORMATTING_STATE.lineHeight;
+        const selection = window.getSelection();
+        let element = null;
+        if (selection && selection.rangeCount > 0) {
+            let node = selection.getRangeAt(0).startContainer;
+            if (node && node.nodeType === Node.TEXT_NODE)
+                node = node.parentElement;
+            if (node instanceof HTMLElement)
+                element = node;
+        }
+        while (element && editorRef.current.contains(element)) {
+            const match = LINE_HEIGHT_OPTIONS.find((o) => element && element.classList.contains(o.className));
+            if (match)
+                return match.key;
+            element = element.parentElement;
+        }
+        return DEFAULT_FORMATTING_STATE.lineHeight;
+    }, []);
+    const getCurrentLetterSpacing = useCallback(() => {
+        if (!editorRef.current)
+            return DEFAULT_FORMATTING_STATE.letterSpacing;
+        const selection = window.getSelection();
+        let element = null;
+        if (selection && selection.rangeCount > 0) {
+            let node = selection.getRangeAt(0).startContainer;
+            if (node && node.nodeType === Node.TEXT_NODE)
+                node = node.parentElement;
+            if (node instanceof HTMLElement)
+                element = node;
+        }
+        while (element && editorRef.current.contains(element)) {
+            const match = LETTER_SPACING_OPTIONS.find((o) => element && element.classList.contains(o.className));
+            if (match)
+                return match.key;
+            element = element.parentElement;
+        }
+        return DEFAULT_FORMATTING_STATE.letterSpacing;
+    }, []);
     const updateFormattingState = useCallback(() => {
         if (!editorRef.current || isDisabled) {
             setFormattingState(DEFAULT_FORMATTING_STATE);
@@ -199,31 +560,61 @@ const RichTextEditor = React__default.forwardRef(({ size = "md", state = "defaul
         let underline = false;
         let textAlign = "left";
         let fontSize = DEFAULT_FORMATTING_STATE.fontSize;
+        let fontWeight = DEFAULT_FORMATTING_STATE.fontWeight;
+        let fontFamily = DEFAULT_FORMATTING_STATE.fontFamily;
+        let lineHeight = DEFAULT_FORMATTING_STATE.lineHeight;
+        let letterSpacing = DEFAULT_FORMATTING_STATE.letterSpacing;
         let textColor = DEFAULT_FORMATTING_STATE.textColor;
+        // Bold is class-driven — the toolbar Bold button and Weight=Bold
+        // dropdown share `font-bold`, so we walk class ancestors and only fall
+        // back to computed font-weight when no class is found (covers legacy
+        // <strong>/<b> tags from pasted content).
         try {
-            bold = document.queryCommandState("bold");
+            const sel = window.getSelection();
+            let startEl = null;
+            if (sel && sel.rangeCount > 0) {
+                let node = sel.getRangeAt(0).startContainer;
+                if (node && node.nodeType === Node.TEXT_NODE)
+                    node = node.parentElement;
+                if (node instanceof HTMLElement)
+                    startEl = node;
+            }
+            const boldClasses = ["font-bold", "font-extrabold", "font-black"];
+            const notBoldClasses = ["font-thin", "font-extralight", "font-light", "font-normal", "font-medium", "font-semibold"];
+            let n = startEl;
+            let boldClassFound = null;
+            while (n && n !== editorRef.current) {
+                if (boldClasses.some((c) => n.classList.contains(c))) {
+                    boldClassFound = true;
+                    break;
+                }
+                if (notBoldClasses.some((c) => n.classList.contains(c))) {
+                    boldClassFound = false;
+                    break;
+                }
+                n = n.parentElement;
+            }
+            bold = boldClassFound !== null
+                ? boldClassFound
+                : startEl
+                    ? parseInt(window.getComputedStyle(startEl).fontWeight, 10) >= 600
+                    : false;
         }
         catch (error) {
             if (process.env.NODE_ENV !== 'production') {
-                console.warn("queryCommandState bold failed", error);
+                console.warn("Failed to determine bold state", error);
             }
         }
+        // Italic and underline route through execCommand and produce semantic
+        // <em>/<u> tags, so queryCommandState is the canonical read.
         try {
             italic = document.queryCommandState("italic");
         }
-        catch (error) {
-            if (process.env.NODE_ENV !== 'production') {
-                console.warn("queryCommandState italic failed", error);
-            }
-        }
+        catch (_a) { }
         try {
             underline = document.queryCommandState("underline");
         }
-        catch (error) {
-            if (process.env.NODE_ENV !== 'production') {
-                console.warn("queryCommandState underline failed", error);
-            }
-        }
+        catch (_b) { }
         try {
             if (document.queryCommandState("justifyCenter")) {
                 textAlign = "center";
@@ -252,14 +643,56 @@ const RichTextEditor = React__default.forwardRef(({ size = "md", state = "defaul
             }
         }
         try {
-            const colorValue = document.queryCommandValue("foreColor");
-            if (typeof colorValue === "string" && colorValue.trim().length > 0) {
-                textColor = colorValue;
+            fontWeight = getCurrentFontWeight();
+        }
+        catch (error) {
+            if (process.env.NODE_ENV !== 'production') {
+                console.warn("Failed to determine font weight", error);
+            }
+        }
+        try {
+            fontFamily = getCurrentFontFamily();
+        }
+        catch (error) {
+            if (process.env.NODE_ENV !== 'production') {
+                console.warn("Failed to determine font family", error);
+            }
+        }
+        try {
+            lineHeight = getCurrentLineHeight();
+        }
+        catch (error) {
+            if (process.env.NODE_ENV !== 'production') {
+                console.warn("Failed to determine line height", error);
+            }
+        }
+        try {
+            letterSpacing = getCurrentLetterSpacing();
+        }
+        catch (error) {
+            if (process.env.NODE_ENV !== 'production') {
+                console.warn("Failed to determine letter spacing", error);
+            }
+        }
+        try {
+            // Walk up from the selection's start container to find the nearest
+            // ancestor carrying a `text-{token}` class; that token (e.g.
+            // "rose-500", "white") is the active color. queryCommandValue is no
+            // longer used because color is applied via class swaps, not foreColor.
+            const sel = window.getSelection();
+            let startEl = null;
+            if (sel && sel.rangeCount > 0) {
+                let node = sel.getRangeAt(0).startContainer;
+                if (node && node.nodeType === Node.TEXT_NODE)
+                    node = node.parentElement;
+                if (node instanceof HTMLElement)
+                    startEl = node;
             }
+            textColor = matchTextColorClass(startEl, editorRef.current);
         }
         catch (error) {
             if (process.env.NODE_ENV !== 'production') {
-                console.warn("queryCommandValue foreColor failed", error);
+                console.warn("Failed to determine text color", error);
             }
         }
         setFormattingState({
@@ -268,18 +701,39 @@ const RichTextEditor = React__default.forwardRef(({ size = "md", state = "defaul
             underline,
             textAlign,
             fontSize,
+            fontWeight,
+            fontFamily,
+            lineHeight,
+            letterSpacing,
             textColor,
         });
-    }, [getCurrentFontSize, isDisabled]);
+    }, [
+        getCurrentFontSize,
+        getCurrentFontWeight,
+        getCurrentFontFamily,
+        getCurrentLineHeight,
+        getCurrentLetterSpacing,
+        isDisabled,
+    ]);
     const handleContentChange = useCallback(() => {
         if (!editorRef.current || !onChange)
             return;
-        onChange(editorRef.current.innerHTML);
-    }, [onChange]);
+        const raw = editorRef.current.innerHTML;
+        const clean = sanitizeHtml(raw);
+        // If sanitizer stripped something (e.g. pasted <script> or on*= handlers),
+        // reconcile the DOM so what's rendered matches what we emit.
+        if (clean !== raw) {
+            editorRef.current.innerHTML = clean;
+        }
+        onChange(clean);
+    }, [onChange, sanitizeHtml]);
     const execEditorCommand = useCallback((command, value) => {
         if (isDisabled || !editorRef.current)
             return;
         focusEditor();
+        // Snapshot before mutating so bold/italic/foreColor/justify/… land on
+        // the same undo stack as direct-DOM style ops and typing.
+        pushHistory("op");
         try {
             document.execCommand(command, false, value);
         }
@@ -292,66 +746,236 @@ const RichTextEditor = React__default.forwardRef(({ size = "md", state = "defaul
             updateFormattingState();
             handleContentChange();
         });
-    }, [focusEditor, handleContentChange, isDisabled, updateFormattingState]);
-    const normalizeFontSizeSelection = useCallback((sizeKey) => {
+    }, [focusEditor, handleContentChange, isDisabled, pushHistory, updateFormattingState]);
+    const handleUndo = useCallback((event) => {
+        event === null || event === void 0 ? void 0 : event.preventDefault();
+        event === null || event === void 0 ? void 0 : event.stopPropagation();
+        const stack = historyRef.current;
+        if (stack.undo.length === 0 || !editorRef.current)
+            return;
+        const previous = stack.undo.pop();
+        stack.redo.push(editorRef.current.innerHTML);
+        // Reset the typing-coalesce window so the next keystroke after an
+        // undo always starts a fresh entry.
+        stack.lastPushKind = null;
+        editorRef.current.innerHTML = sanitizeHtml(previous);
+        requestAnimationFrame(() => {
+            updateFormattingState();
+            handleContentChange();
+        });
+    }, [handleContentChange, sanitizeHtml, updateFormattingState]);
+    const handleRedo = useCallback((event) => {
+        event === null || event === void 0 ? void 0 : event.preventDefault();
+        event === null || event === void 0 ? void 0 : event.stopPropagation();
+        const stack = historyRef.current;
+        if (stack.redo.length === 0 || !editorRef.current)
+            return;
+        const next = stack.redo.pop();
+        stack.undo.push(editorRef.current.innerHTML);
+        stack.lastPushKind = null;
+        editorRef.current.innerHTML = sanitizeHtml(next);
+        requestAnimationFrame(() => {
+            updateFormattingState();
+            handleContentChange();
+        });
+    }, [handleContentChange, sanitizeHtml, updateFormattingState]);
+    const applyStyleToSelection = useCallback((apply) => {
+        var _a, _b, _c;
         if (!editorRef.current)
             return;
-        const option = getFontSizeOption(sizeKey);
         const selection = window.getSelection();
         if (!selection || selection.rangeCount === 0)
             return;
         const range = selection.getRangeAt(0);
-        const value = option.value;
         if (selection.isCollapsed) {
             let node = selection.anchorNode;
-            if (node && node.nodeType === Node.TEXT_NODE) {
+            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");
-                    }
+                    apply(node);
                     break;
                 }
                 node = node.parentElement;
             }
             return;
         }
+        // Non-collapsed: try to wrap just the selected range in a styled span so
+        // only the selected text changes. surroundContents works when the range
+        // doesn't cross element boundaries (the common case for inline selections).
+        const span = document.createElement("span");
+        apply(span);
+        try {
+            range.surroundContents(span);
+            selection.removeAllRanges();
+            const restored = document.createRange();
+            restored.selectNodeContents(span);
+            selection.addRange(restored);
+            return;
+        }
+        catch (_d) {
+            // Range crosses element boundaries — fall through to per-parent walker.
+        }
+        // Cross-element fallback: split each intersecting text node at the
+        // range boundaries so only the selected characters end up wrapped.
+        // Collect first — splitText() mutates the tree and breaks live walking.
+        const startContainer = range.startContainer;
+        const startOffset = range.startOffset;
+        const endContainer = range.endContainer;
+        const endOffset = range.endOffset;
+        const textNodes = [];
         const walker = document.createTreeWalker(range.commonAncestorContainer, NodeFilter.SHOW_TEXT, {
-            acceptNode: (node) => range.intersectsNode(node) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT,
+            acceptNode: (n) => range.intersectsNode(n) ? 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))
+        while ((current = walker.nextNode()))
+            textNodes.push(current);
+        const editor = editorRef.current;
+        let firstWrap = null;
+        let lastWrap = null;
+        for (const textNode of textNodes) {
+            if (!editor.contains(textNode))
+                continue;
+            // Trim leading portion when range starts inside this text node
+            let target = textNode;
+            if (textNode === startContainer && startOffset > 0) {
+                target = textNode.splitText(startOffset);
+            }
+            // Trim trailing portion when range ends inside this text node
+            if (textNode === endContainer) {
+                const endInTarget = textNode === startContainer ? endOffset - startOffset : endOffset;
+                if (endInTarget < target.length) {
+                    target.splitText(endInTarget);
+                }
+            }
+            // Wrap the precise text fragment in a styled span
+            const wrap = document.createElement("span");
+            apply(wrap);
+            (_a = target.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(wrap, target);
+            wrap.appendChild(target);
+            if (!firstWrap)
+                firstWrap = wrap;
+            lastWrap = wrap;
+        }
+        // Restore the visible selection across the wrapped fragments so the
+        // user doesn't have to re-highlight before chaining another action.
+        if (firstWrap && lastWrap) {
+            selection.removeAllRanges();
+            const restored = document.createRange();
+            restored.setStartBefore((_b = firstWrap.firstChild) !== null && _b !== void 0 ? _b : firstWrap);
+            restored.setEndAfter((_c = lastWrap.lastChild) !== null && _c !== void 0 ? _c : lastWrap);
+            selection.addRange(restored);
+        }
+    }, []);
+    /**
+     * Strip a redundant class from any element whose every non-whitespace text
+     * descendant already sits under a closer descendant carrying a class from
+     * the same group. The outer declaration is dead weight at that point —
+     * leaving it in place causes nested wrappers to win on properties whose
+     * line box height (e.g. `text-7xl`'s `line-height: 1`) is computed from the
+     * outer's own font-size, regardless of what the inner element declares.
+     * After stripping, span/font wrappers that are now attribute-less are
+     * unwrapped so we don't accumulate empty markup over time.
+     */
+    const flattenClassGroup = useCallback((classes) => {
+        if (!editorRef.current || classes.length === 0)
+            return;
+        const editor = editorRef.current;
+        const selector = classes.map((c) => `.${c}`).join(",");
+        const candidates = Array.from(editor.querySelectorAll(selector));
+        for (const ancestor of candidates) {
+            const ancestorClass = classes.find((c) => ancestor.classList.contains(c));
+            if (!ancestorClass)
                 continue;
-            if (updated.has(parent))
+            const walker = document.createTreeWalker(ancestor, NodeFilter.SHOW_TEXT);
+            let everyTextHasCloser = true;
+            let sawAnyText = false;
+            let textNode;
+            while ((textNode = walker.nextNode())) {
+                const data = textNode.data;
+                if (!data || !data.trim())
+                    continue;
+                sawAnyText = true;
+                let p = textNode.parentElement;
+                let foundCloser = false;
+                while (p && p !== ancestor) {
+                    if (classes.some((c) => p.classList.contains(c))) {
+                        foundCloser = true;
+                        break;
+                    }
+                    p = p.parentElement;
+                }
+                if (!foundCloser) {
+                    everyTextHasCloser = false;
+                    break;
+                }
+            }
+            if (!sawAnyText || !everyTextHasCloser)
                 continue;
-            parent.style.fontSize = value;
-            if (parent.tagName.toLowerCase() === "font") {
-                parent.removeAttribute("size");
+            ancestor.classList.remove(ancestorClass);
+            if (ancestor.classList.length === 0)
+                ancestor.removeAttribute("class");
+            const tag = ancestor.tagName.toLowerCase();
+            if ((tag === "span" || tag === "font") &&
+                ancestor.attributes.length === 0 &&
+                ancestor.parentNode) {
+                const parent = ancestor.parentNode;
+                while (ancestor.firstChild)
+                    parent.insertBefore(ancestor.firstChild, ancestor);
+                parent.removeChild(ancestor);
             }
-            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]);
+    /**
+     * Generic class-swap helper. Wraps the selected text in a span carrying
+     * `nextClass` (also stripping any sibling class from the same group on
+     * that wrap, so we never end up with `text-sm text-7xl`), then runs a
+     * flatten pass over the editor to collapse newly-redundant outer wrappers.
+     */
+    const applyClassSwap = useCallback((group, nextClass) => {
+        applyStyleToSelection((el) => {
+            for (const cls of group) {
+                if (cls !== nextClass)
+                    el.classList.remove(cls);
+            }
+            el.classList.add(nextClass);
+        });
+        flattenClassGroup(group);
+    }, [applyStyleToSelection, flattenClassGroup]);
     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]);
+        if (isDisabled || !editorRef.current)
+            return;
+        focusEditor();
+        const selection = window.getSelection();
+        if (!selection || selection.rangeCount === 0)
+            return;
+        pushHistory();
+        // Bold lives in the font-weight class group: ON → font-bold,
+        // OFF → font-normal. The toolbar Bold button and the Weight=Bold
+        // dropdown entry share the same underlying class, so they stay in
+        // sync automatically — toggling one lights up the other.
+        const next = formattingState.bold ? "font-normal" : "font-bold";
+        applyClassSwap(FONT_WEIGHT_CLASSES, next);
+        requestAnimationFrame(() => {
+            updateFormattingState();
+            handleContentChange();
+        });
+    }, [
+        applyClassSwap,
+        focusEditor,
+        formattingState.bold,
+        handleContentChange,
+        isDisabled,
+        pushHistory,
+        updateFormattingState,
+    ]);
+    // Italic and underline route through execCommand because it produces
+    // semantic <em>/<u> tags, handles toggle-on/off (including unwrap) without
+    // a hand-rolled negation-class scheme, and the editor's CSS already
+    // styles those tags via descendant selectors. execEditorCommand
+    // pre-snapshots history so undo/redo ordering is preserved.
     const handleItalic = useCallback((event) => {
         event === null || event === void 0 ? void 0 : event.preventDefault();
         event === null || event === void 0 ? void 0 : event.stopPropagation();
@@ -366,47 +990,264 @@ const RichTextEditor = React__default.forwardRef(({ size = "md", state = "defaul
         if (isDisabled || !editorRef.current)
             return;
         focusEditor();
-        try {
-            document.execCommand("styleWithCSS", false, "true");
+        const option = getFontSizeOption(sizeKey);
+        const selection = window.getSelection();
+        if (!selection || selection.rangeCount === 0) {
+            closeAllPickers();
+            return;
         }
-        catch (error) {
-            if (process.env.NODE_ENV !== 'production') {
-                console.warn("styleWithCSS command failed", error);
+        pushHistory();
+        // Tailwind's `text-*` utilities bundle font-size + a matching
+        // line-height in one rule, so swapping the size class swaps both —
+        // no separate flattening pass needed for the line-height.
+        applyClassSwap(FONT_SIZE_CLASSES, option.className);
+        requestAnimationFrame(() => {
+            updateFormattingState();
+            handleContentChange();
+        });
+        closeAllPickers();
+    }, [
+        applyClassSwap,
+        closeAllPickers,
+        focusEditor,
+        handleContentChange,
+        isDisabled,
+        pushHistory,
+        updateFormattingState,
+    ]);
+    const applyToBlockAncestors = useCallback((apply) => {
+        if (!editorRef.current)
+            return;
+        const selection = window.getSelection();
+        if (!selection || selection.rangeCount === 0)
+            return;
+        const editor = editorRef.current;
+        // Normalize: ensure no text node or inline element is a *direct*
+        // child of the editor. Otherwise `findBlock` would fall back to the
+        // editor itself, and any class set on it would live on the live DOM
+        // but never serialize through `editor.innerHTML` — line-height
+        // changes would silently disappear from saved HTML. Wrap each
+        // contiguous run of inline-or-text top-level children in a fresh
+        // `<div>`. Idempotent: blocks that are already block-level are left
+        // alone, so calling this on every block-level mutation is cheap.
+        const isInlineChild = (node) => {
+            if (node.nodeType === Node.TEXT_NODE)
+                return true;
+            if (node instanceof HTMLElement) {
+                const d = window.getComputedStyle(node).display;
+                return d === "inline" || d === "inline-block";
+            }
+            return false;
+        };
+        const groups = [];
+        let currentGroup = null;
+        for (const child of Array.from(editor.childNodes)) {
+            if (isInlineChild(child)) {
+                if (!currentGroup) {
+                    currentGroup = [];
+                    groups.push(currentGroup);
+                }
+                currentGroup.push(child);
+            }
+            else {
+                currentGroup = null;
             }
         }
-        try {
-            document.execCommand("fontSize", false, FONT_SIZE_COMMAND_VALUE[sizeKey]);
+        for (const group of groups) {
+            if (group.length === 0)
+                continue;
+            const wrap = document.createElement("div");
+            editor.insertBefore(wrap, group[0]);
+            for (const node of group)
+                wrap.appendChild(node);
         }
-        catch (error) {
-            if (process.env.NODE_ENV !== 'production') {
-                console.warn("fontSize command failed", error);
+        // Re-read range after potential mutations — Range objects survive
+        // moves but offsets into reparented text nodes stay valid, so
+        // `selection.getRangeAt(0)` still points at the same characters.
+        const range = selection.getRangeAt(0);
+        const findBlock = (node) => {
+            let n = node;
+            if (n && n.nodeType === Node.TEXT_NODE)
+                n = n.parentElement;
+            while (n && n !== editor && editor.contains(n)) {
+                if (n instanceof HTMLElement) {
+                    const d = window.getComputedStyle(n).display;
+                    if (d === "block" || d === "list-item" || d === "table-cell" || d === "flex" || d === "grid") {
+                        return n;
+                    }
+                }
+                n = n.parentElement;
             }
+            // After normalization above, an inline node always has a non-editor
+            // block ancestor; this branch is now only reached for malformed
+            // cases. Returning null is safer than returning the editor (which
+            // wouldn't serialize anyway).
+            return null;
+        };
+        const blocks = new Set();
+        if (selection.isCollapsed) {
+            const block = findBlock(range.startContainer);
+            if (block)
+                blocks.add(block);
         }
-        normalizeFontSizeSelection(sizeKey);
-        try {
-            document.execCommand("styleWithCSS", false, "false");
+        else if (range.commonAncestorContainer.nodeType === Node.TEXT_NODE) {
+            const block = findBlock(range.commonAncestorContainer);
+            if (block)
+                blocks.add(block);
         }
-        catch (error) {
-            // Some browsers do not support toggling this flag; ignore.
+        else {
+            const walker = document.createTreeWalker(range.commonAncestorContainer, NodeFilter.SHOW_TEXT, {
+                acceptNode: (n) => range.intersectsNode(n) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT,
+            });
+            let current;
+            while ((current = walker.nextNode())) {
+                const block = findBlock(current);
+                if (block)
+                    blocks.add(block);
+            }
         }
+        blocks.forEach((b) => apply(b));
+    }, []);
+    const handleFontFamily = useCallback((key) => {
+        if (isDisabled || !editorRef.current)
+            return;
+        focusEditor();
+        const option = fontFamilies.find((opt) => opt.key === key);
+        if (!option)
+            return;
+        if (loadFontsOnDemand && option.family) {
+            loadGoogleFont(option.family, option.weights);
+        }
+        pushHistory();
+        applyStyleToSelection((el) => {
+            el.style.fontFamily = option.stack;
+        });
         requestAnimationFrame(() => {
             updateFormattingState();
             handleContentChange();
         });
-        setShowFontSizePicker(false);
-        setShowColorPicker(false);
+        closeAllPickers();
     }, [
+        applyStyleToSelection,
+        closeAllPickers,
         focusEditor,
+        fontFamilies,
         handleContentChange,
         isDisabled,
-        normalizeFontSizeSelection,
+        loadFontsOnDemand,
+        pushHistory,
         updateFormattingState,
     ]);
-    const handleTextColor = useCallback((color) => {
-        execEditorCommand("foreColor", color);
-        setShowColorPicker(false);
-        setShowFontSizePicker(false);
-    }, [execEditorCommand]);
+    const handleFontWeight = useCallback((key) => {
+        if (isDisabled || !editorRef.current)
+            return;
+        focusEditor();
+        const option = getFontWeightOption(key);
+        pushHistory();
+        applyClassSwap(FONT_WEIGHT_CLASSES, option.className);
+        requestAnimationFrame(() => {
+            updateFormattingState();
+            handleContentChange();
+        });
+        closeAllPickers();
+    }, [
+        applyClassSwap,
+        closeAllPickers,
+        focusEditor,
+        handleContentChange,
+        isDisabled,
+        pushHistory,
+        updateFormattingState,
+    ]);
+    const handleLineHeight = useCallback((key) => {
+        if (isDisabled || !editorRef.current)
+            return;
+        focusEditor();
+        const option = getLineHeightOption(key);
+        pushHistory();
+        // Line height is paragraph-level, so swap the `leading-*` class on the
+        // block ancestors that contain the selection rather than wrapping in a
+        // span. Each block carries at most one `leading-*` class — clear any
+        // existing one first, then add the new one.
+        applyToBlockAncestors((el) => {
+            for (const cls of LINE_HEIGHT_CLASSES) {
+                if (cls !== option.className)
+                    el.classList.remove(cls);
+            }
+            el.classList.add(option.className);
+        });
+        requestAnimationFrame(() => {
+            updateFormattingState();
+            handleContentChange();
+        });
+        closeAllPickers();
+    }, [
+        applyToBlockAncestors,
+        closeAllPickers,
+        focusEditor,
+        handleContentChange,
+        isDisabled,
+        pushHistory,
+        updateFormattingState,
+    ]);
+    const handleLetterSpacing = useCallback((key) => {
+        if (isDisabled || !editorRef.current)
+            return;
+        focusEditor();
+        const option = getLetterSpacingOption(key);
+        pushHistory();
+        applyClassSwap(LETTER_SPACING_CLASSES, option.className);
+        requestAnimationFrame(() => {
+            updateFormattingState();
+            handleContentChange();
+        });
+        closeAllPickers();
+    }, [
+        applyClassSwap,
+        closeAllPickers,
+        focusEditor,
+        handleContentChange,
+        isDisabled,
+        pushHistory,
+        updateFormattingState,
+    ]);
+    const handleTextColor = useCallback((token) => {
+        if (isDisabled || !editorRef.current || !token)
+            return;
+        focusEditor();
+        const selection = window.getSelection();
+        if (!selection || selection.rangeCount === 0) {
+            closeAllPickers();
+            return;
+        }
+        pushHistory();
+        applyClassSwap(TEXT_COLOR_CLASSES, `text-${token}`);
+        addRecentColor(token);
+        requestAnimationFrame(() => {
+            updateFormattingState();
+            handleContentChange();
+        });
+        closeAllPickers();
+    }, [
+        addRecentColor,
+        applyClassSwap,
+        closeAllPickers,
+        focusEditor,
+        handleContentChange,
+        isDisabled,
+        pushHistory,
+        updateFormattingState,
+    ]);
+    const handleMouseDown = useCallback((event) => {
+        event.preventDefault();
+        focusEditor();
+    }, [focusEditor]);
+    const fontSizeAnimations = useMemo(() => createDropdownAnimations(fontSizeIsFlipped), [fontSizeIsFlipped]);
+    const fontWeightAnimations = useMemo(() => createDropdownAnimations(fontWeightIsFlipped), [fontWeightIsFlipped]);
+    const fontFamilyAnimations = useMemo(() => createDropdownAnimations(fontFamilyIsFlipped), [fontFamilyIsFlipped]);
+    const lineHeightAnimations = useMemo(() => createDropdownAnimations(lineHeightIsFlipped), [lineHeightIsFlipped]);
+    const letterSpacingAnimations = useMemo(() => createDropdownAnimations(letterSpacingIsFlipped), [letterSpacingIsFlipped]);
+    const colorAnimations = useMemo(() => createDropdownAnimations(colorIsFlipped), [colorIsFlipped]);
     const handleAlign = useCallback((alignment) => {
         const commandMap = {
             left: "justifyLeft",
@@ -416,6 +1257,7 @@ const RichTextEditor = React__default.forwardRef(({ size = "md", state = "defaul
         execEditorCommand(commandMap[alignment]);
     }, [execEditorCommand]);
     const handleSelection = useCallback(() => {
+        var _a;
         if (!editorRef.current || isDisabled)
             return;
         updateFormattingState();
@@ -437,7 +1279,12 @@ const RichTextEditor = React__default.forwardRef(({ size = "md", state = "defaul
             setShowToolbar(false);
             return;
         }
-        const toolbarWidth = 200;
+        // Measure the actual toolbar width — the floating toolbar grows with
+        // the active control set (font family, font size, …) and a static
+        // 200 px constant clipped it off-canvas at the editor's right edge.
+        // offsetWidth is 0 while the toolbar is unmounted via AnimatePresence;
+        // fall back to a realistic default for the very first frame.
+        const toolbarWidth = ((_a = toolbarRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 320;
         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);
@@ -450,11 +1297,42 @@ const RichTextEditor = React__default.forwardRef(({ size = "md", state = "defaul
             handleContentChange();
             updateFormattingState();
         };
+        // beforeinput fires synchronously *before* the DOM mutation, so
+        // editorRef.current.innerHTML is still the pre-keystroke snapshot —
+        // exactly what undo needs. Coalescing in pushHistory groups successive
+        // keystrokes into one undo entry per ~500 ms run.
+        const handleBeforeInput = () => {
+            pushHistory("typing");
+        };
+        // Intercept native undo/redo shortcuts so the browser's contentEditable
+        // stack doesn't drift out of sync with our linear history. Without this
+        // the browser would still honor Cmd/Ctrl+Z on its own internal stack.
+        const handleKeyDown = (event) => {
+            const mod = event.metaKey || event.ctrlKey;
+            if (!mod)
+                return;
+            const key = event.key.toLowerCase();
+            if (key === "z") {
+                event.preventDefault();
+                if (event.shiftKey)
+                    handleRedo(event);
+                else
+                    handleUndo(event);
+            }
+            else if (key === "y" && !event.shiftKey) {
+                event.preventDefault();
+                handleRedo(event);
+            }
+        };
         editor.addEventListener("input", handleInput);
+        editor.addEventListener("beforeinput", handleBeforeInput);
+        editor.addEventListener("keydown", handleKeyDown);
         return () => {
             editor.removeEventListener("input", handleInput);
+            editor.removeEventListener("beforeinput", handleBeforeInput);
+            editor.removeEventListener("keydown", handleKeyDown);
         };
-    }, [handleContentChange, updateFormattingState]);
+    }, [handleContentChange, handleRedo, handleUndo, pushHistory, updateFormattingState]);
     useEffect(() => {
         const handleSelectionChange = () => {
             if (!editorRef.current)
@@ -477,47 +1355,73 @@ const RichTextEditor = React__default.forwardRef(({ size = "md", state = "defaul
     }, [handleSelection, updateFormattingState]);
     useEffect(() => {
         const handleClickOutside = (event) => {
-            var _a, _b, _c, _d;
+            var _a, _b, _c, _d, _e, _f, _g, _h;
             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) {
+            const isInFontWeightDropdown = (_d = fontWeightPortalContentRef.current) === null || _d === void 0 ? void 0 : _d.contains(target);
+            const isInFontFamilyDropdown = (_e = fontFamilyPortalContentRef.current) === null || _e === void 0 ? void 0 : _e.contains(target);
+            const isInLineHeightDropdown = (_f = lineHeightPortalContentRef.current) === null || _f === void 0 ? void 0 : _f.contains(target);
+            const isInLetterSpacingDropdown = (_g = letterSpacingPortalContentRef.current) === null || _g === void 0 ? void 0 : _g.contains(target);
+            const isInColorDropdown = (_h = colorPortalContentRef.current) === null || _h === void 0 ? void 0 : _h.contains(target);
+            const isInAnyDropdown = isInFontSizeDropdown ||
+                isInFontWeightDropdown ||
+                isInFontFamilyDropdown ||
+                isInLineHeightDropdown ||
+                isInLetterSpacingDropdown ||
+                isInColorDropdown;
+            if (!isInEditor && !isInToolbar && !isInAnyDropdown) {
                 if (toolbarConfig.position === "floating") {
                     setShowToolbar(false);
                 }
-                setShowColorPicker(false);
-                setShowFontSizePicker(false);
-            }
-            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) {
+                closeAllPickers();
+            }
+            else if (isInToolbar || isInAnyDropdown) {
+                const targetEl = target;
+                const isFontSizeRelated = isInFontSizeDropdown || Boolean(targetEl === null || targetEl === void 0 ? void 0 : targetEl.closest('[data-tool="fontSize"]'));
+                const isFontWeightRelated = isInFontWeightDropdown || Boolean(targetEl === null || targetEl === void 0 ? void 0 : targetEl.closest('[data-tool="fontWeight"]'));
+                const isFontFamilyRelated = isInFontFamilyDropdown || Boolean(targetEl === null || targetEl === void 0 ? void 0 : targetEl.closest('[data-tool="fontFamily"]'));
+                const isLineHeightRelated = isInLineHeightDropdown || Boolean(targetEl === null || targetEl === void 0 ? void 0 : targetEl.closest('[data-tool="lineHeight"]'));
+                const isLetterSpacingRelated = isInLetterSpacingDropdown ||
+                    Boolean(targetEl === null || targetEl === void 0 ? void 0 : targetEl.closest('[data-tool="letterSpacing"]'));
+                const isColorRelated = isInColorDropdown || Boolean(targetEl === null || targetEl === void 0 ? void 0 : targetEl.closest('[data-tool="textColor"]'));
+                if (!isFontSizeRelated)
                     setShowFontSizePicker(false);
-                }
+                if (!isFontWeightRelated)
+                    setShowFontWeightPicker(false);
+                if (!isFontFamilyRelated)
+                    setShowFontFamilyPicker(false);
+                if (!isLineHeightRelated)
+                    setShowLineHeightPicker(false);
+                if (!isLetterSpacingRelated)
+                    setShowLetterSpacingPicker(false);
+                if (!isColorRelated)
+                    setShowColorPicker(false);
             }
             else if (isInEditor) {
-                setShowColorPicker(false);
-                setShowFontSizePicker(false);
+                closeAllPickers();
             }
         };
         document.addEventListener("mousedown", handleClickOutside);
         return () => document.removeEventListener("mousedown", handleClickOutside);
-    }, [toolbarConfig.position]);
+    }, [closeAllPickers, toolbarConfig.position]);
     useEffect(() => {
         if (editorRef.current && value !== editorRef.current.innerHTML) {
-            editorRef.current.innerHTML = value;
+            editorRef.current.innerHTML = sanitizeHtml(value);
+            // External `value` change — flush undo history. Snapshots taken
+            // from the previous document point at HTML that no longer matches
+            // anything reachable via the new value, so leaving them in place
+            // would let Undo restore content from a prior session/document.
+            historyRef.current.undo = [];
+            historyRef.current.redo = [];
+            historyRef.current.lastPushKind = null;
+            historyRef.current.lastPushAt = 0;
             updateFormattingState();
         }
-    }, [updateFormattingState, value]);
-    const renderToolbarTool = (tool, index) => {
-        var _a, _b;
+    }, [updateFormattingState, value, sanitizeHtml]);
+    const renderToolbarTool = (tool, toolKey) => {
+        var _a;
         const isActive = tool === "bold"
             ? formattingState.bold
             : tool === "italic"
@@ -526,141 +1430,253 @@ const RichTextEditor = React__default.forwardRef(({ size = "md", state = "defaul
                     ? 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();
-        };
+                        : tool === "fontWeight"
+                            ? formattingState.fontWeight !== DEFAULT_FORMATTING_STATE.fontWeight
+                            : tool === "fontFamily"
+                                ? formattingState.fontFamily !== DEFAULT_FORMATTING_STATE.fontFamily
+                                : tool === "lineHeight"
+                                    ? formattingState.lineHeight !== DEFAULT_FORMATTING_STATE.lineHeight
+                                    : tool === "letterSpacing"
+                                        ? formattingState.letterSpacing !== DEFAULT_FORMATTING_STATE.letterSpacing
+                                        : tool === "alignLeft"
+                                            ? formattingState.textAlign === "left"
+                                            : tool === "alignCenter"
+                                                ? formattingState.textAlign === "center"
+                                                : tool === "alignRight"
+                                                    ? formattingState.textAlign === "right"
+                                                    : false;
         switch (tool) {
             case "bold":
-                return (jsx(Button, { 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", children: jsx(BoldIcon, { className: "w-4 h-4" }) }, index));
+                return (jsx(Button, { size: "sm", color: "neutral", variant: "soft", iconOnly: true, className: cn(themeStyles.toolbarButtonStyle), "data-state": isActive ? "active" : "inactive", onMouseDown: handleMouseDown, onClick: handleBold, disabled: isDisabled, "aria-label": "Bold", "aria-pressed": isActive ? "true" : "false", children: jsx(BoldIcon, { className: "size-4" }) }, toolKey));
             case "italic":
-                return (jsx(Button, { 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", children: jsx(ItalicIcon, { className: "w-4 h-4" }) }, index));
+                return (jsx(Button, { size: "sm", color: "neutral", variant: "soft", iconOnly: true, className: cn(themeStyles.toolbarButtonStyle), "data-state": isActive ? "active" : "inactive", onMouseDown: handleMouseDown, onClick: handleItalic, disabled: isDisabled, "aria-label": "Italic", "aria-pressed": isActive ? "true" : "false", children: jsx(ItalicIcon, { className: "size-4" }) }, toolKey));
             case "underline":
-                return (jsx(Button, { 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", children: jsx(UnderlineIcon, { className: "w-4 h-4" }) }, index));
+                return (jsx(Button, { size: "sm", color: "neutral", variant: "soft", iconOnly: true, className: cn(themeStyles.toolbarButtonStyle), "data-state": isActive ? "active" : "inactive", onMouseDown: handleMouseDown, onClick: handleUnderline, disabled: isDisabled, "aria-label": "Underline", "aria-pressed": isActive ? "true" : "false", children: jsx(UnderlineIcon, { className: "size-4" }) }, toolKey));
+            case "fontFamily": {
+                // The `fontFamily` tool is opt-in via toolbar config, but
+                // `fontFamilies` is also a public prop — if a consumer passes an
+                // empty array the dropdown has nothing to show and the trigger
+                // can't compute a current option to display. Skip rendering the
+                // tool entirely in that case rather than crashing on undefined.
+                if (fontFamilies.length === 0) {
+                    if (process.env.NODE_ENV !== "production") {
+                        console.warn("[RichTextEditor]: `fontFamily` toolbar tool was requested but `fontFamilies` is empty — the tool will not render. Either remove `fontFamily` from toolbar.tools or supply at least one option.");
+                    }
+                    return null;
+                }
+                const currentOption = (_a = fontFamilies.find((opt) => opt.key === formattingState.fontFamily)) !== null && _a !== void 0 ? _a : fontFamilies[0];
+                const portalStyle = {
+                    position: "fixed",
+                    top: fontFamilyPortalPosition.top,
+                    left: fontFamilyPortalPosition.left,
+                    zIndex: 1000,
+                    ...fontFamilyPortalCssVars,
+                };
+                const renderedDropdown = isClient
+                    ? createPortal(jsx(AnimatePresence, { mode: "wait", children: showFontFamilyPicker && (jsx(motion.div, { ref: (el) => {
+                                fontFamilyPortalContentRef.current = el;
+                            }, "data-flikkui-portal": "", role: "listbox", className: cn(surfaceClasses(surfaceLevel, { translucent: true, shadow: false }), themeStyles.dropdownStyle), style: portalStyle, variants: shouldReduceMotion ? undefined : fontFamilyAnimations, initial: "initial", animate: fontFamilyPortalReady ? "visible" : "initial", exit: "exit", children: jsx(SurfaceProvider, { level: surfaceLevel, children: fontFamilies.map((option) => {
+                                    const selected = option.key === formattingState.fontFamily;
+                                    return (jsx("button", { className: themeStyles.dropdownItemStyle, "data-active": selected ? "true" : "false", onMouseDown: (event) => {
+                                            event.preventDefault();
+                                            focusEditor();
+                                        }, onClick: (event) => {
+                                            event.preventDefault();
+                                            event.stopPropagation();
+                                            handleFontFamily(option.key);
+                                        }, role: "option", "aria-selected": selected, children: jsxs("span", { className: "flex items-center justify-between gap-3", children: [jsx("span", { className: "text-sm", style: { fontFamily: option.stack || undefined }, children: option.label }), option.family && (jsx("span", { className: "text-xs text-[var(--color-text-muted)]", children: "Google" }))] }) }, option.key));
+                                }) }) })) }), document.body)
+                    : null;
+                return (jsxs("div", { className: "relative", "data-tool": "fontFamily", children: [jsx(Button, { ref: fontFamilyTriggerRef, size: "sm", color: "neutral", variant: "soft", className: cn(themeStyles.toolbarButtonStyle, "!justify-start !w-auto px-2 min-w-[4rem] gap-1"), "data-state": isActive ? "active" : "inactive", onMouseDown: handleMouseDown, onClick: (event) => {
+                                event.preventDefault();
+                                event.stopPropagation();
+                                focusEditor();
+                                togglePicker("fontFamily");
+                            }, disabled: isDisabled, "aria-label": `Font family (${currentOption.label})`, "aria-expanded": showFontFamilyPicker, "aria-haspopup": "listbox", children: jsx("span", { className: "text-sm font-medium truncate text-left max-w-[5.5rem] block", style: { fontFamily: currentOption.stack || undefined }, children: currentOption.label }) }), renderedDropdown] }, toolKey));
+            }
+            case "fontWeight": {
+                const currentOption = getFontWeightOption(formattingState.fontWeight);
+                const portalStyle = {
+                    position: "fixed",
+                    top: fontWeightPortalPosition.top,
+                    left: fontWeightPortalPosition.left,
+                    zIndex: 1000,
+                    ...fontWeightPortalCssVars,
+                };
+                const renderedDropdown = isClient
+                    ? createPortal(jsx(AnimatePresence, { mode: "wait", children: showFontWeightPicker && (jsx(motion.div, { ref: (el) => {
+                                fontWeightPortalContentRef.current = el;
+                            }, "data-flikkui-portal": "", role: "listbox", className: cn(surfaceClasses(surfaceLevel, { translucent: true, shadow: false }), themeStyles.dropdownStyle), style: portalStyle, variants: shouldReduceMotion ? undefined : fontWeightAnimations, initial: "initial", animate: fontWeightPortalReady ? "visible" : "initial", exit: "exit", children: jsx(SurfaceProvider, { level: surfaceLevel, children: FONT_WEIGHT_OPTIONS.map((option) => {
+                                    const selected = option.key === formattingState.fontWeight;
+                                    return (jsx("button", { className: themeStyles.dropdownItemStyle, "data-active": selected ? "true" : "false", onMouseDown: (event) => {
+                                            event.preventDefault();
+                                            focusEditor();
+                                        }, onClick: (event) => {
+                                            event.preventDefault();
+                                            event.stopPropagation();
+                                            handleFontWeight(option.key);
+                                        }, role: "option", "aria-selected": selected, children: jsxs("span", { className: "flex items-center justify-between gap-3", children: [jsx("span", { className: "text-sm", style: { fontWeight: option.value }, children: option.label }), jsx("span", { className: "text-sm text-[var(--color-text-muted)]", children: option.value })] }) }, option.key));
+                                }) }) })) }), document.body)
+                    : null;
+                return (jsxs("div", { className: "relative", "data-tool": "fontWeight", children: [jsx(Button, { ref: fontWeightTriggerRef, size: "sm", color: "neutral", variant: "soft", iconOnly: true, className: cn(themeStyles.toolbarButtonStyle), "data-state": isActive ? "active" : "inactive", onMouseDown: handleMouseDown, onClick: (event) => {
+                                event.preventDefault();
+                                event.stopPropagation();
+                                focusEditor();
+                                togglePicker("fontWeight");
+                            }, disabled: isDisabled, "aria-label": `Font weight (${currentOption.label})`, "aria-expanded": showFontWeightPicker, "aria-haspopup": "listbox", children: jsx(BoldIcon, { className: "w-4 h-4" }) }), renderedDropdown] }, toolKey));
+            }
             case "fontSize": {
                 const currentOption = getFontSizeOption(formattingState.fontSize);
-                const dropdownClassName = themeStyles.dropdownStyle;
-                const fontSizeAnimations = createDropdownAnimations(fontSizeIsFlipped);
-                const dropdownList = (jsx("div", { className: dropdownClassName, role: "listbox", children: FONT_SIZE_OPTIONS.map((option) => (jsx("button", { 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, children: jsxs("span", { className: "flex items-center justify-between gap-3", children: [jsx("span", { className: "uppercase text-xs font-medium", children: option.label }), jsxs("span", { className: "text-xs text-[var(--color-text-muted)]", children: [option.px, "px"] })] }) }, option.key))) }));
-                let renderedDropdown = null;
-                if (isFloatingToolbar && isClient) {
-                    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(jsx(AnimatePresence, { mode: "wait", children: showFontSizePicker && (jsx(motion.div, { ref: (el) => {
+                const portalStyle = {
+                    position: "fixed",
+                    top: fontSizePortalPosition.top,
+                    left: fontSizePortalPosition.left,
+                    zIndex: 1000,
+                    ...fontSizePortalCssVars,
+                };
+                const renderedDropdown = isClient
+                    ? createPortal(jsx(AnimatePresence, { mode: "wait", children: showFontSizePicker && (jsx(motion.div, { ref: (el) => {
                                 fontSizePortalContentRef.current = el;
-                            }, style: dropdownStyle, variants: shouldReduceMotion ? undefined : fontSizeAnimations, initial: "initial", animate: fontSizePortalReady ? "visible" : "initial", exit: "exit", children: dropdownList })) }), document.body);
-                }
-                else {
-                    renderedDropdown = showFontSizePicker ? dropdownList : null;
-                    if (!showFontSizePicker) {
-                        fontSizePortalContentRef.current = null;
-                    }
-                }
-                return (jsxs("div", { className: "relative", "data-tool": "fontSize", children: [jsx(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) => {
+                            }, "data-flikkui-portal": "", role: "listbox", className: cn(surfaceClasses(surfaceLevel, { translucent: true, shadow: false }), themeStyles.dropdownStyle), style: portalStyle, variants: shouldReduceMotion ? undefined : fontSizeAnimations, initial: "initial", animate: fontSizePortalReady ? "visible" : "initial", exit: "exit", children: jsx(SurfaceProvider, { level: surfaceLevel, children: FONT_SIZE_OPTIONS.map((option) => {
+                                    const selected = option.key === formattingState.fontSize;
+                                    return (jsx("button", { className: themeStyles.dropdownItemStyle, "data-active": selected ? "true" : "false", onMouseDown: (event) => {
+                                            event.preventDefault();
+                                            focusEditor();
+                                        }, onClick: (event) => {
+                                            event.preventDefault();
+                                            event.stopPropagation();
+                                            handleFontSize(option.key);
+                                        }, role: "option", "aria-selected": selected, children: jsxs("span", { className: "flex items-center justify-between gap-3", children: [jsx("span", { className: "uppercase text-sm font-medium", children: option.label }), jsxs("span", { className: "text-sm text-[var(--color-text-muted)]", children: [option.px, "px"] })] }) }, option.key));
+                                }) }) })) }), document.body)
+                    : null;
+                return (jsxs("div", { className: "relative", "data-tool": "fontSize", children: [jsx(Button, { ref: fontSizeTriggerRef, size: "sm", color: "neutral", variant: "soft", className: cn(themeStyles.toolbarButtonStyle, "px-2 min-w-[3rem] gap-1"), "data-state": isActive ? "active" : "inactive", 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", children: jsx("span", { className: "text-xs font-medium tracking-wide uppercase", children: currentOption.label }) }), toolbarConfig.position === "floating" ? null : renderedDropdown, toolbarConfig.position === "floating" ? renderedDropdown : null] }, index));
-            }
-            case "textColor":
-                {
-                    const colorDropdownClassName = cn(themeStyles.dropdownStyle, themeStyles.colorPickerStyle);
-                    const colorAnimations = createDropdownAnimations(colorIsFlipped);
-                    const colorDropdownList = (jsx("div", { className: cn(colorDropdownClassName, "p-2"), children: colorOptions.map((color) => (jsx("button", { className: themeStyles.colorSwatchStyle, style: { backgroundColor: color.value }, onMouseDown: (event) => {
+                                togglePicker("fontSize");
+                            }, disabled: isDisabled, "aria-label": "Font size", "aria-expanded": showFontSizePicker, "aria-haspopup": "listbox", children: jsx("span", { className: "text-sm font-medium tracking-wide uppercase", children: currentOption.label }) }), renderedDropdown] }, toolKey));
+            }
+            case "lineHeight": {
+                const currentOption = getLineHeightOption(formattingState.lineHeight);
+                const portalStyle = {
+                    position: "fixed",
+                    top: lineHeightPortalPosition.top,
+                    left: lineHeightPortalPosition.left,
+                    zIndex: 1000,
+                    ...lineHeightPortalCssVars,
+                };
+                const renderedDropdown = isClient
+                    ? createPortal(jsx(AnimatePresence, { mode: "wait", children: showLineHeightPicker && (jsx(motion.div, { ref: (el) => {
+                                lineHeightPortalContentRef.current = el;
+                            }, "data-flikkui-portal": "", role: "listbox", className: cn(surfaceClasses(surfaceLevel, { translucent: true, shadow: false }), themeStyles.dropdownStyle), style: portalStyle, variants: shouldReduceMotion ? undefined : lineHeightAnimations, initial: "initial", animate: lineHeightPortalReady ? "visible" : "initial", exit: "exit", children: jsx(SurfaceProvider, { level: surfaceLevel, children: LINE_HEIGHT_OPTIONS.map((option) => {
+                                    const selected = option.key === formattingState.lineHeight;
+                                    return (jsx("button", { className: themeStyles.dropdownItemStyle, "data-active": selected ? "true" : "false", onMouseDown: (event) => {
+                                            event.preventDefault();
+                                            focusEditor();
+                                        }, onClick: (event) => {
+                                            event.preventDefault();
+                                            event.stopPropagation();
+                                            handleLineHeight(option.key);
+                                        }, role: "option", "aria-selected": selected, children: jsxs("span", { className: "flex items-center justify-between gap-3", children: [jsx("span", { className: "text-sm font-medium", children: option.label }), jsx("span", { className: "text-sm text-[var(--color-text-muted)]", children: option.value })] }) }, option.key));
+                                }) }) })) }), document.body)
+                    : null;
+                return (jsxs("div", { className: "relative", "data-tool": "lineHeight", children: [jsx(Button, { ref: lineHeightTriggerRef, size: "sm", color: "neutral", variant: "soft", iconOnly: true, className: cn(themeStyles.toolbarButtonStyle), "data-state": isActive ? "active" : "inactive", onMouseDown: handleMouseDown, onClick: (event) => {
                                 event.preventDefault();
+                                event.stopPropagation();
                                 focusEditor();
-                            }, onClick: (event) => {
+                                togglePicker("lineHeight");
+                            }, disabled: isDisabled, "aria-label": `Line height (${currentOption.label})`, "aria-expanded": showLineHeightPicker, "aria-haspopup": "listbox", children: jsx(ArrowsUpDownIcon, { className: "w-4 h-4" }) }), renderedDropdown] }, toolKey));
+            }
+            case "letterSpacing": {
+                const currentOption = getLetterSpacingOption(formattingState.letterSpacing);
+                const portalStyle = {
+                    position: "fixed",
+                    top: letterSpacingPortalPosition.top,
+                    left: letterSpacingPortalPosition.left,
+                    zIndex: 1000,
+                    ...letterSpacingPortalCssVars,
+                };
+                const renderedDropdown = isClient
+                    ? createPortal(jsx(AnimatePresence, { mode: "wait", children: showLetterSpacingPicker && (jsx(motion.div, { ref: (el) => {
+                                letterSpacingPortalContentRef.current = el;
+                            }, "data-flikkui-portal": "", role: "listbox", className: cn(surfaceClasses(surfaceLevel, { translucent: true, shadow: false }), themeStyles.dropdownStyle), style: portalStyle, variants: shouldReduceMotion ? undefined : letterSpacingAnimations, initial: "initial", animate: letterSpacingPortalReady ? "visible" : "initial", exit: "exit", children: jsx(SurfaceProvider, { level: surfaceLevel, children: LETTER_SPACING_OPTIONS.map((option) => {
+                                    const selected = option.key === formattingState.letterSpacing;
+                                    return (jsx("button", { className: themeStyles.dropdownItemStyle, "data-active": selected ? "true" : "false", onMouseDown: (event) => {
+                                            event.preventDefault();
+                                            focusEditor();
+                                        }, onClick: (event) => {
+                                            event.preventDefault();
+                                            event.stopPropagation();
+                                            handleLetterSpacing(option.key);
+                                        }, role: "option", "aria-selected": selected, children: jsxs("span", { className: "flex items-center justify-between gap-3", children: [jsx("span", { className: "text-sm font-medium", children: option.label }), jsx("span", { className: "text-sm text-[var(--color-text-muted)]", children: option.value })] }) }, option.key));
+                                }) }) })) }), document.body)
+                    : null;
+                return (jsxs("div", { className: "relative", "data-tool": "letterSpacing", children: [jsx(Button, { ref: letterSpacingTriggerRef, size: "sm", color: "neutral", variant: "soft", iconOnly: true, className: cn(themeStyles.toolbarButtonStyle), "data-state": isActive ? "active" : "inactive", onMouseDown: handleMouseDown, onClick: (event) => {
                                 event.preventDefault();
                                 event.stopPropagation();
-                                handleTextColor(color.value);
-                            }, "aria-label": `Set text color to ${color.label}` }, color.value))) }));
-                    let renderedColorDropdown = null;
-                    if (isFloatingToolbar && isClient) {
-                        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(jsx(AnimatePresence, { mode: "wait", children: showColorPicker && (jsx(motion.div, { ref: (el) => {
-                                    colorPortalContentRef.current = el;
-                                }, style: dropdownStyle, variants: shouldReduceMotion ? undefined : colorAnimations, initial: "initial", animate: colorPortalReady ? "visible" : "initial", exit: "exit", children: colorDropdownList })) }), document.body);
-                    }
-                    else {
-                        renderedColorDropdown = showColorPicker ? colorDropdownList : null;
-                        if (!showColorPicker) {
-                            colorPortalContentRef.current = null;
-                        }
-                    }
-                    return (jsxs("div", { className: "relative", "data-tool": "textColor", children: [jsx(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, children: jsx(PaintBrushIcon, { className: "w-4 h-4" }) }), isFloatingToolbar ? null : renderedColorDropdown, isFloatingToolbar ? renderedColorDropdown : null] }, index));
-                }
+                                focusEditor();
+                                togglePicker("letterSpacing");
+                            }, disabled: isDisabled, "aria-label": `Letter spacing (${currentOption.label})`, "aria-expanded": showLetterSpacingPicker, "aria-haspopup": "listbox", children: jsx(ArrowsRightLeftIcon, { className: "w-4 h-4" }) }), renderedDropdown] }, toolKey));
+            }
+            case "textColor": {
+                const portalStyle = {
+                    position: "fixed",
+                    top: colorPortalPosition.top,
+                    left: colorPortalPosition.left,
+                    zIndex: 1000,
+                    ...colorPortalCssVars,
+                };
+                const currentToken = formattingState.textColor;
+                // `bgValue` paints the swatch (resolved hex/oklch); `token` is the
+                // Tailwind shade fragment (`rose-500`, `white`, …) used to build
+                // the `text-{token}` class applied to the editor content.
+                const renderSwatch = (bgValue, token, label) => {
+                    const isActiveSwatch = token === currentToken;
+                    return (jsx("button", { className: themeStyles.colorSwatchStyle, style: { backgroundColor: bgValue }, "data-active": isActiveSwatch ? "true" : "false", onMouseDown: (event) => {
+                            event.preventDefault();
+                            focusEditor();
+                        }, onClick: (event) => {
+                            event.preventDefault();
+                            event.stopPropagation();
+                            handleTextColor(token);
+                        }, "aria-label": `Set text color to ${label}` }, `swatch-${label}`));
+                };
+                const renderedColorDropdown = isClient
+                    ? createPortal(jsx(AnimatePresence, { mode: "wait", children: showColorPicker && (jsx(motion.div, { ref: (el) => {
+                                colorPortalContentRef.current = el;
+                            }, "data-flikkui-portal": "", className: cn(surfaceClasses(surfaceLevel, { translucent: true, shadow: false }), themeStyles.dropdownStyle, "!max-h-none !overflow-visible"), style: portalStyle, variants: shouldReduceMotion ? undefined : colorAnimations, initial: "initial", animate: colorPortalReady ? "visible" : "initial", exit: "exit", children: jsx(SurfaceProvider, { level: surfaceLevel, children: jsx(ScrollArea, { type: "none", className: "max-h-[20rem]", children: jsxs("div", { className: themeStyles.colorPickerStyle, children: [recentColors.length > 0 && (jsxs("div", { className: "flex flex-col gap-1 pb-2 mb-1 border-b border-[var(--color-border)]", children: [jsx("span", { className: "text-[11px] font-medium uppercase tracking-wide text-[var(--color-text-muted)]", children: "Recent" }), jsx("div", { className: "flex gap-0.5", children: recentColors.map((token) => renderSwatch(resolveTailwindColor(token), token, `recent ${token}`)) })] })), jsxs("div", { className: "flex flex-col gap-1", children: [jsx("span", { className: "text-[11px] font-medium uppercase tracking-wide text-[var(--color-text-muted)]", children: "Mono" }), jsx("div", { className: "flex gap-0.5", children: MONO_COLORS.map((color) => renderSwatch(color.value, color.token, color.name)) }), jsx("span", { className: "mt-2 text-[11px] font-medium uppercase tracking-wide text-[var(--color-text-muted)]", children: "Spectrum" }), TAILWIND_COLOR_FAMILIES.map((family) => (jsx("div", { className: "flex gap-0.5", children: getTailwindShadeTokens(family).map((token) => renderSwatch(resolveTailwindColor(token), token, token)) }, family)))] })] }) }) }) })) }), document.body)
+                    : null;
+                return (jsxs("div", { className: "relative", "data-tool": "textColor", children: [jsx(Button, { ref: colorTriggerRef, size: "sm", color: "neutral", variant: "soft", iconOnly: true, className: cn(themeStyles.toolbarButtonStyle), onMouseDown: handleMouseDown, onClick: (event) => {
+                                event.preventDefault();
+                                event.stopPropagation();
+                                focusEditor();
+                                togglePicker("color");
+                            }, disabled: isDisabled, "aria-label": "Text Color", "aria-expanded": showColorPicker, children: jsx(PaintBrushIcon, { className: "w-4 h-4" }) }), renderedColorDropdown] }, toolKey));
+            }
             case "alignLeft":
-                return (jsx(Button, { 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) => {
+                return (jsx(Button, { size: "sm", color: "neutral", variant: "soft", iconOnly: true, className: cn(themeStyles.toolbarButtonStyle), "data-state": isActive ? "active" : "inactive", onMouseDown: handleMouseDown, onClick: (event) => {
                         event.preventDefault();
                         event.stopPropagation();
                         handleAlign("left");
-                    }, disabled: isDisabled, "aria-label": "Align Left", "aria-pressed": isActive ? "true" : "false", children: jsx(Bars3BottomLeftIcon, { className: "w-4 h-4" }) }, index));
+                    }, disabled: isDisabled, "aria-label": "Align Left", "aria-pressed": isActive ? "true" : "false", children: jsx(Bars3BottomLeftIcon, { className: "w-4 h-4" }) }, toolKey));
             case "alignCenter":
-                return (jsx(Button, { 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) => {
+                return (jsx(Button, { size: "sm", color: "neutral", variant: "soft", iconOnly: true, className: cn(themeStyles.toolbarButtonStyle), "data-state": isActive ? "active" : "inactive", onMouseDown: handleMouseDown, onClick: (event) => {
                         event.preventDefault();
                         event.stopPropagation();
                         handleAlign("center");
-                    }, disabled: isDisabled, "aria-label": "Align Center", "aria-pressed": isActive ? "true" : "false", children: jsx(Bars3Icon, { className: "w-4 h-4" }) }, index));
+                    }, disabled: isDisabled, "aria-label": "Align Center", "aria-pressed": isActive ? "true" : "false", children: jsx(Bars3Icon, { className: "w-4 h-4" }) }, toolKey));
             case "alignRight":
-                return (jsx(Button, { 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) => {
+                return (jsx(Button, { size: "sm", color: "neutral", variant: "soft", iconOnly: true, className: cn(themeStyles.toolbarButtonStyle), "data-state": isActive ? "active" : "inactive", onMouseDown: handleMouseDown, onClick: (event) => {
                         event.preventDefault();
                         event.stopPropagation();
                         handleAlign("right");
-                    }, disabled: isDisabled, "aria-label": "Align Right", "aria-pressed": isActive ? "true" : "false", children: jsx(Bars3BottomRightIcon, { className: "w-4 h-4" }) }, index));
+                    }, disabled: isDisabled, "aria-label": "Align Right", "aria-pressed": isActive ? "true" : "false", children: jsx(Bars3BottomRightIcon, { className: "w-4 h-4" }) }, toolKey));
             case "undo":
-                return (jsx(Button, { size: "sm", color: "neutral", variant: "ghost", iconOnly: true, className: cn(themeStyles.toolbarButtonStyle), onMouseDown: handleMouseDown, onClick: handleUndo, disabled: isDisabled, "aria-label": "Undo", children: jsx(ArrowUturnLeftIcon, { className: "w-4 h-4" }) }, index));
+                return (jsx(Button, { size: "sm", color: "neutral", variant: "soft", iconOnly: true, className: cn(themeStyles.toolbarButtonStyle), onMouseDown: handleMouseDown, onClick: handleUndo, disabled: isDisabled, "aria-label": "Undo", children: jsx(ArrowUturnLeftIcon, { className: "w-4 h-4" }) }, toolKey));
             case "redo":
-                return (jsx(Button, { size: "sm", color: "neutral", variant: "ghost", iconOnly: true, className: cn(themeStyles.toolbarButtonStyle), onMouseDown: handleMouseDown, onClick: handleRedo, disabled: isDisabled, "aria-label": "Redo", children: jsx(ArrowUturnRightIcon, { className: "w-4 h-4" }) }, index));
+                return (jsx(Button, { size: "sm", color: "neutral", variant: "soft", iconOnly: true, className: cn(themeStyles.toolbarButtonStyle), onMouseDown: handleMouseDown, onClick: handleRedo, disabled: isDisabled, "aria-label": "Redo", children: jsx(ArrowUturnRightIcon, { className: "w-4 h-4" }) }, toolKey));
             case "separator":
-                return jsx("div", { className: themeStyles.separatorStyle }, index);
+                return jsx("div", { className: themeStyles.separatorStyle }, toolKey);
             default:
                 return null;
         }
@@ -668,14 +1684,13 @@ const RichTextEditor = React__default.forwardRef(({ size = "md", state = "defaul
     const renderToolbar = () => {
         if (!toolbarConfig.show || !toolbarConfig.tools)
             return null;
-        const toolbarClass = cn(themeStyles.toolbarStyle, toolbarConfig.className);
-        const toolbarContent = (jsx("div", { ref: toolbarRef, className: toolbarClass, children: toolbarConfig.tools.map((tool, index) => renderToolbarTool(tool, index)) }));
+        const tools = toolbarConfig.tools.map((tool, index) => renderToolbarTool(tool, `${tool}-${index}`));
         if (toolbarConfig.position === "floating") {
-            return (jsx(AnimatePresence, { mode: "wait", children: showToolbar && (jsx(motion.div, { 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 }, children: toolbarContent }, "floating-toolbar")) }));
+            return (jsx(AnimatePresence, { mode: "wait", children: showToolbar && (jsx(motion.div, { ref: toolbarRef, variants: shouldReduceMotion ? undefined : floatingToolbarVariants, initial: "initial", animate: "animate", exit: "exit", className: cn(surfaceClasses(surfaceLevel, { translucent: true }), themeStyles.floatingToolbarStyle, toolbarConfig.className), style: { position: "absolute", top: toolbarPosition.top, left: toolbarPosition.left, zIndex: 50 }, children: jsx(SurfaceProvider, { level: surfaceLevel, children: tools }) }, "floating-toolbar")) }));
         }
-        return toolbarContent;
+        return (jsx("div", { ref: toolbarRef, className: cn(themeStyles.toolbarStyle, toolbarConfig.className), children: tools }));
     };
-    return (jsxs("div", { className: cn(themeStyles.wrapperStyle, className), ...props, children: [label && (jsx("div", { className: "mb-1", children: jsx(FormLabel, { htmlFor: editorId, className: labelClassName, state: state, required: required, children: label }) })), jsxs("div", { className: "relative", children: [jsxs("div", { className: cn(themeStyles.containerStyle, themeStyles.states[state], themeStyles.sizes[size]), "data-state": getDataState(), children: [toolbarConfig.position === "top" && renderToolbar(), jsx("div", { ref: (el) => {
+    return (jsxs("div", { className: cn(themeStyles.wrapperStyle, className), ...props, children: [label && (typeof label === 'string' ? (jsx("div", { className: "mb-1", children: jsx(FormLabel, { htmlFor: editorId, className: labelClassName, state: state, required: required, children: label }) })) : (label)), jsxs("div", { className: "relative", children: [jsxs("div", { className: cn(themeStyles.containerStyle, themeStyles.states[state], themeStyles.sizes[size]), "data-state": getDataState(), children: [toolbarConfig.position === "top" && renderToolbar(), jsx("div", { ref: (el) => {
                                     if (el) {
                                         editorRef.current = el;
                                         if (typeof ref === "function") {
@@ -693,10 +1708,9 @@ const RichTextEditor = React__default.forwardRef(({ size = "md", state = "defaul
                                     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 && (jsx("div", { className: cn(themeStyles.helperText, helperTextClassName), children: helperText }))] }));
+                                    closeAllPickers();
+                                }, "aria-invalid": isInvalid, "aria-required": required, "aria-describedby": displayedMessage ? messageId : undefined, role: "textbox", "aria-multiline": "true", "aria-label": typeof label === 'string' ? label : "Rich text editor", suppressContentEditableWarning: true })] }), toolbarConfig.position === "floating" && renderToolbar()] }), displayedMessage && (typeof displayedMessage === 'string' ? (jsx("div", { id: messageId, role: isInvalid ? "alert" : undefined, className: cn(themeStyles.helperText, helperTextClassName), children: displayedMessage })) : (displayedMessage))] }));
 });
 RichTextEditor.displayName = "RichTextEditor";
 
-export { RichTextEditor };
+export { DEFAULT_FONT_FAMILY_OPTIONS, RichTextEditor, loadGoogleFont };