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

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

@@ -1,1716 +1,200 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import React__default, { useState, useCallback, useRef, useMemo, useEffect } from 'react';
-import { createPortal } from 'react-dom';
-import { useReducedMotion, AnimatePresence, motion } from 'motion/react';
+import React__default, { useRef, useId, useState, useCallback, useEffect } from 'react';
 import { FormLabel } from '../FormLabel/FormLabel.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 { 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';
+import { richTextEditorTheme } from './RichTextEditor.theme.js';
+import { DEFAULT_TOOLBAR_TOOLS, RichTextToolbar } from './RichTextToolbar.js';
+import { RichTextLinkField } from './RichTextLinkField.js';
+import { sanitizeHtml } from './sanitizeHtml.js';
+import { EMPTY_FORMATTING_STATE, readFormattingState } from './editorState.js';
+import { redo, undo, clearFormatting, toggleCodeBlock, toggleBlockquote, toggleOrderedList, toggleBulletList, toggleStrikethrough, toggleUnderline, toggleItalic, toggleBold, setBlockStyle, insertSanitizedHtml, insertText, createLink, removeLink } from './editorCommands.js';
 
-const FONT_SIZE_OPTIONS = [
-    { 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" },
-];
-/** 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";
-    let minDiff = Number.POSITIVE_INFINITY;
-    FONT_SIZE_OPTIONS.forEach((option) => {
-        const diff = Math.abs(option.px - px);
-        if (diff < minDiff) {
-            minDiff = diff;
-            closest = option.key;
-        }
-    });
-    return closest;
-};
-/**
- * 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).
+ * RichTextEditor — a semantic authoring surface over `contentEditable`.
  *
- * @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.
+ * Produces portable HTML (`<h2>`, `<strong>`, `<ul>`, `<a href>`) with no
+ * framework classes, so stored content renders anywhere. Formatting is applied
+ * through `editorCommands.ts` (the only `execCommand` caller) and read back
+ * through `editorState.ts`.
+ *
+ * 🔴 Every write path is sanitized: the `value` prop, paste, drop, and the string
+ * handed to `onChange` — the last regardless of whether `onChange` was passed, so
+ * an uncontrolled editor is not a hole.
+ *
+ * 🔴 Per §9, `className`, `ref` and `...rest` target the contentEditable surface.
  */
-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",
-    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: [
-        "fontWeight",
-        "italic",
-        "underline",
-        "separator",
-        "fontFamily",
-        "fontSize",
-        "lineHeight",
-        "letterSpacing",
-        "textColor",
-        "separator",
-        "alignLeft",
-        "alignCenter",
-        "alignRight",
-        "separator",
-        "undo",
-        "redo",
-    ],
-};
-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 RichTextEditor = React__default.forwardRef(({ size = "md", state = "default", label, helperText, errorMessage, value, onChange, placeholder, className, wrapperClassName, containerClassName, toolbarClassName, labelClassName, helperTextClassName, required = false, minHeight = 160, maxHeight, toolbar, theme: themeOverrides, sanitize, ...rest }, ref) => {
+    var _a;
+    const theme = { ...richTextEditorTheme, ...themeOverrides };
     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(() => {
-        var _a, _b;
-        return ({
-            ...richTextEditorTheme,
-            ...theme,
-            sizes: {
-                ...richTextEditorTheme.sizes,
-                ...((_a = theme === null || theme === void 0 ? void 0 : theme.sizes) !== null && _a !== void 0 ? _a : {}),
-            },
-            states: {
-                ...richTextEditorTheme.states,
-                ...((_b = theme === null || theme === void 0 ? void 0 : theme.states) !== null && _b !== void 0 ? _b : {}),
-            },
-        });
-    }, [theme]);
-    const toolbarConfig = useMemo(() => {
-        var _a, _b, _c;
-        const base = {
-            show: (_a = DEFAULT_TOOLBAR.show) !== null && _a !== void 0 ? _a : true,
-            position: (_b = DEFAULT_TOOLBAR.position) !== null && _b !== void 0 ? _b : "top",
-            tools: [...((_c = DEFAULT_TOOLBAR.tools) !== null && _c !== void 0 ? _c : [])],
-            className: DEFAULT_TOOLBAR.className,
-        };
-        if (toolbarProp) {
-            if (typeof toolbarProp.show === "boolean") {
-                base.show = toolbarProp.show;
-            }
-            if (toolbarProp.position) {
-                base.position = toolbarProp.position;
-            }
-            if (toolbarProp.tools) {
-                base.tools = [...toolbarProp.tools];
-            }
-            if (typeof toolbarProp.className === "string") {
-                base.className = toolbarProp.className;
-            }
-        }
-        return base;
-    }, [toolbarProp]);
-    const { position: fontSizePortalPosition, cssVariables: fontSizePortalCssVars, contentRef: fontSizePortalContentRef, isReady: fontSizePortalReady, isFlipped: fontSizeIsFlipped, } = useSelectPortal({
-        triggerRef: fontSizeTriggerRef,
-        isOpen: showFontSizePicker,
-        placement: "bottom-start",
-        offset: 6,
-        autoWidth: true,
-    });
-    const { position: 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,
-        placement: "bottom-start",
-        offset: 6,
-        autoWidth: true,
-    });
+    const generatedId = useId();
+    const describedById = `${generatedId}-description`;
     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";
-        if (isInvalid)
-            return "invalid";
-        if (isFocused)
-            return "focus";
-        return "default";
-    };
-    const focusEditor = useCallback(() => {
-        if (editorRef.current && document.activeElement !== editorRef.current) {
-            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();
-        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 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(() => {
+    const [formatting, setFormatting] = useState(EMPTY_FORMATTING_STATE);
+    const [isLinkFieldOpen, setLinkFieldOpen] = useState(false);
+    const [isEmpty, setIsEmpty] = useState(true);
+    // The Range as of the last selection inside the editor. The block <Select>
+    // takes focus when opened, which collapses the selection — restoring this
+    // before a command is what lets focusable toolbar widgets (which cannot use
+    // the preventDefault trick) still act on the user's text.
+    const savedRangeRef = useRef(null);
+    const sanitizeFn = useCallback((html) => (sanitize ? sanitize(html) : sanitizeHtml(html)), [sanitize]);
+    const saveSelection = 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);
-            return;
-        }
-        let bold = false;
-        let italic = false;
-        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 {
-            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("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 (_a) { }
-        try {
-            underline = document.queryCommandState("underline");
-        }
-        catch (_b) { }
-        try {
-            if (document.queryCommandState("justifyCenter")) {
-                textAlign = "center";
-            }
-            else if (document.queryCommandState("justifyRight")) {
-                textAlign = "right";
-            }
-            else if (document.queryCommandState("justifyFull")) {
-                textAlign = "justify";
-            }
-            else {
-                textAlign = "left";
-            }
-        }
-        catch (error) {
-            if (process.env.NODE_ENV !== 'production') {
-                console.warn("queryCommandState alignment failed", error);
-            }
-        }
-        try {
-            fontSize = getCurrentFontSize();
-        }
-        catch (error) {
-            if (process.env.NODE_ENV !== 'production') {
-                console.warn("Failed to determine font size", error);
-            }
-        }
-        try {
-            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("Failed to determine text color", error);
-            }
-        }
-        setFormattingState({
-            bold,
-            italic,
-            underline,
-            textAlign,
-            fontSize,
-            fontWeight,
-            fontFamily,
-            lineHeight,
-            letterSpacing,
-            textColor,
-        });
-    }, [
-        getCurrentFontSize,
-        getCurrentFontWeight,
-        getCurrentFontFamily,
-        getCurrentLineHeight,
-        getCurrentLetterSpacing,
-        isDisabled,
-    ]);
-    const handleContentChange = useCallback(() => {
-        if (!editorRef.current || !onChange)
-            return;
-        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);
-        }
-        catch (error) {
-            if (process.env.NODE_ENV !== 'production') {
-                console.warn(`execCommand ${command} failed`, error);
-            }
-        }
-        requestAnimationFrame(() => {
-            updateFormattingState();
-            handleContentChange();
-        });
-    }, [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 selection = window.getSelection();
         if (!selection || selection.rangeCount === 0)
             return;
         const range = selection.getRangeAt(0);
-        if (selection.isCollapsed) {
-            let node = selection.anchorNode;
-            if (node && node.nodeType === Node.TEXT_NODE)
-                node = node.parentElement;
-            while (node && node !== editorRef.current) {
-                if (node instanceof HTMLElement) {
-                    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: (n) => range.intersectsNode(n) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT,
-        });
-        let current;
-        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);
+        if ((_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.contains(range.commonAncestorContainer)) {
+            savedRangeRef.current = range.cloneRange();
         }
     }, []);
-    /**
-     * 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 restoreSelection = useCallback(() => {
         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;
-            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;
-            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);
-            }
-        }
-    }, []);
-    /**
-     * 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();
-        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();
-        execEditorCommand("italic");
-    }, [execEditorCommand]);
-    const handleUnderline = useCallback((event) => {
-        event === null || event === void 0 ? void 0 : event.preventDefault();
-        event === null || event === void 0 ? void 0 : event.stopPropagation();
-        execEditorCommand("underline");
-    }, [execEditorCommand]);
-    const handleFontSize = useCallback((sizeKey) => {
-        if (isDisabled || !editorRef.current)
+        if (!editor)
             return;
-        focusEditor();
-        const option = getFontSizeOption(sizeKey);
-        const selection = window.getSelection();
-        if (!selection || selection.rangeCount === 0) {
-            closeAllPickers();
-            return;
-        }
-        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)
+        editor.focus();
+        const range = savedRangeRef.current;
+        if (!range)
             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;
-            }
-        }
-        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);
-        }
-        // 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);
-        }
-        else if (range.commonAncestorContainer.nodeType === Node.TEXT_NODE) {
-            const block = findBlock(range.commonAncestorContainer);
-            if (block)
-                blocks.add(block);
-        }
-        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));
+        selection === null || selection === void 0 ? void 0 : selection.removeAllRanges();
+        selection === null || selection === void 0 ? void 0 : selection.addRange(range);
     }, []);
-    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();
-        });
-        closeAllPickers();
-    }, [
-        applyStyleToSelection,
-        closeAllPickers,
-        focusEditor,
-        fontFamilies,
-        handleContentChange,
-        isDisabled,
-        loadFontsOnDemand,
-        pushHistory,
-        updateFormattingState,
-    ]);
-    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",
-            center: "justifyCenter",
-            right: "justifyRight",
-        };
-        execEditorCommand(commandMap[alignment]);
-    }, [execEditorCommand]);
-    const handleSelection = useCallback(() => {
+    const syncFormatting = useCallback(() => {
+        setFormatting(readFormattingState(editorRef.current, window.getSelection()));
+    }, []);
+    /**
+     * Emit the current DOM as sanitized HTML.
+     *
+     * Note what this does NOT do: write the sanitized string back into the
+     * editor. Doing that mid-typing discards every live Range and moves the
+     * caret — the previous implementation's most user-visible bug. Foreign
+     * markup can only arrive via paste/drop/`value`, each sanitized at its own
+     * boundary, so the DOM is already clean by the time we read it.
+     */
+    const emitChange = useCallback(() => {
         var _a;
-        if (!editorRef.current || isDisabled)
-            return;
-        updateFormattingState();
-        if (toolbarConfig.position !== "floating")
-            return;
-        const selection = window.getSelection();
-        if (!selection || selection.rangeCount === 0) {
-            setShowToolbar(false);
-            return;
-        }
-        const range = selection.getRangeAt(0);
-        if (!editorRef.current.contains(range.commonAncestorContainer) || selection.isCollapsed) {
-            setShowToolbar(false);
-            return;
-        }
-        const rect = range.getBoundingClientRect();
-        const editorRect = editorRef.current.getBoundingClientRect();
-        if (rect.width === 0 && rect.height === 0) {
-            setShowToolbar(false);
+        const editor = editorRef.current;
+        if (!editor)
             return;
-        }
-        // 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);
-    }, [isDisabled, toolbarConfig.position, updateFormattingState]);
+        setIsEmpty(((_a = editor.textContent) !== null && _a !== void 0 ? _a : "").trim().length === 0);
+        onChange === null || onChange === void 0 ? void 0 : onChange(sanitizeFn(editor.innerHTML));
+    }, [onChange, sanitizeFn]);
+    // Sync the controlled value in. Guarded on inequality so typing does not
+    // re-enter and reset the caret.
     useEffect(() => {
-        if (!editorRef.current)
-            return;
+        var _a;
         const editor = editorRef.current;
-        const handleInput = () => {
-            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, handleRedo, handleUndo, pushHistory, updateFormattingState]);
+        if (!editor || value === undefined)
+            return;
+        const clean = sanitizeFn(value);
+        if (clean !== editor.innerHTML) {
+            editor.innerHTML = clean;
+        }
+        setIsEmpty(((_a = editor.textContent) !== null && _a !== void 0 ? _a : "").trim().length === 0);
+    }, [value, sanitizeFn]);
+    // Keep the toolbar's pressed states truthful as the caret moves.
     useEffect(() => {
-        const handleSelectionChange = () => {
-            if (!editorRef.current)
-                return;
+        const handler = () => {
             const selection = window.getSelection();
-            if (!selection || selection.rangeCount === 0) {
-                setShowToolbar(false);
-                updateFormattingState();
+            const editor = editorRef.current;
+            if (!selection || !editor || !selection.anchorNode)
                 return;
+            if (editor.contains(selection.anchorNode)) {
+                saveSelection();
+                syncFormatting();
             }
-            const range = selection.getRangeAt(0);
-            if (!editorRef.current.contains(range.commonAncestorContainer)) {
-                setShowToolbar(false);
-                return;
-            }
-            handleSelection();
         };
-        document.addEventListener("selectionchange", handleSelectionChange);
-        return () => document.removeEventListener("selectionchange", handleSelectionChange);
-    }, [handleSelection, updateFormattingState]);
-    useEffect(() => {
-        const handleClickOutside = (event) => {
-            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 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);
-                }
-                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) {
-                closeAllPickers();
-            }
-        };
-        document.addEventListener("mousedown", handleClickOutside);
-        return () => document.removeEventListener("mousedown", handleClickOutside);
-    }, [closeAllPickers, toolbarConfig.position]);
-    useEffect(() => {
-        if (editorRef.current && value !== editorRef.current.innerHTML) {
-            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, sanitizeHtml]);
-    const renderToolbarTool = (tool, toolKey) => {
-        var _a;
-        const isActive = tool === "bold"
-            ? formattingState.bold
-            : tool === "italic"
-                ? formattingState.italic
-                : tool === "underline"
-                    ? formattingState.underline
-                    : tool === "fontSize"
-                        ? formattingState.fontSize !== DEFAULT_FORMATTING_STATE.fontSize
-                        : 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: "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: "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: "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 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;
-                            }, "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();
-                                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();
-                                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();
-                                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: "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" }) }, toolKey));
-            case "alignCenter":
-                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" }) }, toolKey));
-            case "alignRight":
-                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" }) }, toolKey));
-            case "undo":
-                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: "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 }, toolKey);
-            default:
-                return null;
-        }
-    };
-    const renderToolbar = () => {
-        if (!toolbarConfig.show || !toolbarConfig.tools)
-            return null;
-        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, { 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 (jsx("div", { ref: toolbarRef, className: cn(themeStyles.toolbarStyle, toolbarConfig.className), children: tools }));
-    };
-    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") {
-                                            ref(el);
-                                        }
-                                        else if (ref) {
-                                            ref.current = el;
-                                        }
-                                    }
-                                }, id: editorId, contentEditable: !isDisabled, className: cn(themeStyles.editorStyle), "data-state": getDataState(), style: { minHeight: `${minHeight}px`, maxHeight: maxHeight ? `${maxHeight}px` : undefined }, "data-placeholder": placeholder, onFocus: () => {
-                                    setIsFocused(true);
-                                    updateFormattingState();
-                                }, onBlur: () => {
-                                    setIsFocused(false);
-                                    if (toolbarConfig.position === "floating") {
-                                        setShowToolbar(false);
-                                    }
-                                    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))] }));
+        document.addEventListener("selectionchange", handler);
+        return () => document.removeEventListener("selectionchange", handler);
+    }, [saveSelection, syncFormatting]);
+    const runCommand = useCallback((fn) => {
+        if (isDisabled)
+            return;
+        restoreSelection();
+        fn();
+        syncFormatting();
+        emitChange();
+    }, [isDisabled, restoreSelection, syncFormatting, emitChange]);
+    const handleToolCommand = useCallback((tool) => {
+        if (tool === "link") {
+            saveSelection();
+            setLinkFieldOpen((open) => !open);
+            return;
+        }
+        runCommand(() => {
+            switch (tool) {
+                case "bold": return toggleBold();
+                case "italic": return toggleItalic();
+                case "underline": return toggleUnderline();
+                case "strikethrough": return toggleStrikethrough();
+                case "bulletList": return toggleBulletList();
+                case "orderedList": return toggleOrderedList();
+                case "blockquote": return toggleBlockquote(formatting.blockquote);
+                case "code": return toggleCodeBlock(formatting.code);
+                case "clearFormat": return clearFormatting();
+                case "undo": return undo();
+                case "redo": return redo();
+                default: return undefined;
+            }
+        });
+    }, [runCommand, saveSelection, formatting.blockquote, formatting.code]);
+    const handleBlockChange = useCallback((block) => runCommand(() => setBlockStyle(block)), [runCommand]);
+    /**
+     * Paste and drop are the two ways foreign markup reaches the document. Both
+     * are intercepted, sanitized, and re-inserted — the browser's default
+     * handler never runs, so nothing unsanitized touches the DOM.
+     */
+    const insertForeignHtml = useCallback((html, text) => {
+        const clean = sanitizeFn(html);
+        if (clean)
+            insertSanitizedHtml(clean);
+        else if (text)
+            insertText(text);
+        syncFormatting();
+        emitChange();
+    }, [sanitizeFn, syncFormatting, emitChange]);
+    const handlePaste = useCallback((event) => {
+        if (isDisabled)
+            return;
+        event.preventDefault();
+        insertForeignHtml(event.clipboardData.getData("text/html"), event.clipboardData.getData("text/plain"));
+    }, [isDisabled, insertForeignHtml]);
+    const handleDrop = useCallback((event) => {
+        if (isDisabled)
+            return;
+        event.preventDefault();
+        insertForeignHtml(event.dataTransfer.getData("text/html"), event.dataTransfer.getData("text/plain"));
+    }, [isDisabled, insertForeignHtml]);
+    const applyLink = useCallback((href) => {
+        setLinkFieldOpen(false);
+        runCommand(() => createLink(href));
+    }, [runCommand]);
+    const removeLink$1 = useCallback(() => {
+        setLinkFieldOpen(false);
+        runCommand(() => removeLink());
+    }, [runCommand]);
+    const cancelLink = useCallback(() => {
+        setLinkFieldOpen(false);
+        restoreSelection();
+    }, [restoreSelection]);
+    const setRefs = useCallback((node) => {
+        editorRef.current = node;
+        if (typeof ref === "function")
+            ref(node);
+        else if (ref)
+            ref.current = node;
+    }, [ref]);
+    const showToolbar = (toolbar === null || toolbar === void 0 ? void 0 : toolbar.show) !== false;
+    const tools = (_a = toolbar === null || toolbar === void 0 ? void 0 : toolbar.tools) !== null && _a !== void 0 ? _a : DEFAULT_TOOLBAR_TOOLS;
+    const message = isInvalid && errorMessage ? errorMessage : helperText;
+    const hasMessage = Boolean(message);
+    const restAriaLabel = rest["aria-label"];
+    return (jsxs("div", { className: cn(theme.wrapperStyle, wrapperClassName), children: [label && (jsx(FormLabel, { htmlFor: generatedId, state: state, required: required, className: labelClassName, children: label })), jsxs("div", { className: cn(theme.containerStyle, theme.containerStates[state], containerClassName), children: [showToolbar && (jsx(RichTextToolbar, { tools: tools, formatting: formatting, disabled: isDisabled, size: size, className: cn(toolbar === null || toolbar === void 0 ? void 0 : toolbar.className, toolbarClassName), onCommand: handleToolCommand, onBlockChange: handleBlockChange })), isLinkFieldOpen && !isDisabled && (jsx(RichTextLinkField, { initialHref: formatting.link, onApply: applyLink, onRemove: removeLink$1, onCancel: cancelLink })), jsx("div", { ...rest, id: generatedId, ref: setRefs, role: "textbox", "aria-multiline": "true", "aria-label": typeof label === "string" ? label : restAriaLabel !== null && restAriaLabel !== void 0 ? restAriaLabel : "Rich text editor", "aria-required": required || undefined, "aria-invalid": isInvalid || undefined, "aria-describedby": hasMessage ? describedById : undefined, "aria-disabled": isDisabled || undefined, contentEditable: !isDisabled, suppressContentEditableWarning: true, "data-placeholder": placeholder, "data-empty": isEmpty || undefined, tabIndex: isDisabled ? -1 : 0, style: { minHeight, maxHeight }, className: cn(theme.editorStyle, theme.editorSizes[size], isEmpty && placeholder && theme.placeholderStyle, className), onInput: emitChange, onPaste: handlePaste, onDrop: handleDrop, onKeyUp: syncFormatting, onMouseUp: syncFormatting, onBlur: saveSelection })] }), hasMessage && (jsx("div", { id: describedById, className: cn(isInvalid && errorMessage ? theme.errorTextStyle : theme.helperTextStyle, helperTextClassName), children: message }))] }));
 });
 RichTextEditor.displayName = "RichTextEditor";
 
-export { DEFAULT_FONT_FAMILY_OPTIONS, RichTextEditor, loadGoogleFont };
+export { RichTextEditor };