sdaia-ui 1.0.1 → 1.0.2

package/src/components/RichTextEditor/RichTextEditor.tsx

@@ -1,1341 +0,0 @@
-'use client';
-
-import {
-  forwardRef,
-  useRef,
-  useState,
-  useCallback,
-  useEffect,
-} from 'react';
-import { cn } from '../../lib/cn';
-import type { RichTextEditorProps, TextAlignment } from './RichTextEditor.types';
-import {
-  TOOLBAR_DESKTOP,
-  TOOLBAR_MOBILE,
-  TOOLBAR_MOBILE_ROW,
-  TOOLBAR_GROUP_SM,
-  TOOLBAR_GROUP_MD,
-  TOOLBAR_GROUP_XS,
-  TOOLBAR_DIVIDER,
-  TOOLBAR_BTN_BASE,
-  TOOLBAR_BTN_ACTIVE,
-  STYLE_SELECT,
-  STYLE_SELECT_TEXT,
-  STYLE_SELECT_CHEVRON,
-  FLOATING_TOOLBAR,
-  INPUT_CONTAINER,
-  EXPAND_TOOLBAR,
-  INPUT_TEXTAREA,
-  INPUT_BOTTOM_BAR,
-  INPUT_ADD_BTN,
-  INPUT_ACTION_BTN,
-  INPUT_DIVIDER,
-  MOBILE_GROUP_BTN,
-  PANEL_WRAP,
-  EMOJI_GRID,
-  EMOJI_BTN,
-  FONT_OPTION_BTN,
-  LINK_INPUT,
-  LINK_INSERT_BTN,
-  PANEL_CLOSE_BTN,
-  EDITOR_CONTAINER,
-  EDITOR_PANEL_WRAP,
-} from './RichTextEditor.variants';
-import {
-  UndoIcon,
-  RedoIcon,
-  BoldIcon,
-  ItalicIcon,
-  UnderlineIcon,
-  ColorSquareIcon,
-  AlignLeftIcon,
-  AlignCenterIcon,
-  AlignRightIcon,
-  LinkIcon,
-  ImageIcon,
-  AIIcon,
-  TextTIcon,
-  ChevronDownSmIcon,
-  ChevronDownIcon,
-  PlusIcon,
-  AaIcon,
-  SmileIcon,
-  AtIcon,
-} from '../../icons/IconFactory';
-
-/* ── execCommand helpers ─────────────────────────────────────── */
-
-const ALIGN_COMMANDS: Record<TextAlignment, string> = {
-  left: 'justifyLeft',
-  center: 'justifyCenter',
-  right: 'justifyRight',
-};
-
-function applyExecCommand(command: string, value?: string) {
-  document.execCommand(command, false, value ?? '');
-}
-
-/* ── Inline close (×) icon ───────────────────────────────────── */
-function CloseIcon() {
-  return (
-    <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" className="size-4">
-      <path d="M12 4L4 12M4 4L12 12" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
-    </svg>
-  );
-}
-
-/* ── Emoji panel ─────────────────────────────────────────────── */
-
-const EMOJIS = [
-  '😀', '😂', '🤣', '😍', '🥰', '😎', '🤔', '😢',
-  '😡', '🥳', '🤩', '😴', '🤗', '🫡', '🥹', '😅',
-  '👍', '👎', '👏', '🙌', '🤝', '💪', '🫶', '✌️',
-  '❤️', '💙', '💚', '💛', '🧡', '💜', '🖤', '🤍',
-  '🎉', '🔥', '⭐', '✨', '💡', '🚀', '🎯', '✅',
-  '❌', '💬', '🔔', '📌', '🔗', '🎈', '🌟', '💯',
-];
-
-function EmojiPanel({
-  onInsert,
-  onClose,
-}: {
-  onInsert: (emoji: string) => void;
-  onClose: () => void;
-}) {
-  return (
-    <div className={PANEL_WRAP} data-slot="rte-panel-emoji">
-      <div className="flex items-center justify-between mb-spacing-xs">
-        <span className="text-text-xs font-[500] text-[rgba(108,115,127,1)] dark:text-[rgba(156,163,175,1)]">
-          Emoji
-        </span>
-        <button
-          type="button"
-          aria-label="Close emoji panel"
-          onMouseDown={(e) => e.preventDefault()}
-          onClick={onClose}
-          className={PANEL_CLOSE_BTN}
-        >
-          <CloseIcon />
-        </button>
-      </div>
-      <div className={EMOJI_GRID}>
-        {EMOJIS.map((emoji) => (
-          <button
-            key={emoji}
-            type="button"
-            aria-label={emoji}
-            onMouseDown={(e) => e.preventDefault()}
-            onClick={() => onInsert(emoji)}
-            className={EMOJI_BTN}
-          >
-            {emoji}
-          </button>
-        ))}
-      </div>
-    </div>
-  );
-}
-
-/* ── Font style data ─────────────────────────────────────────── */
-
-const FONT_STYLES = [
-  { label: 'Normal', tag: 'p', preview: 'text-sm' },
-  { label: 'Heading 1', tag: 'h1', preview: 'text-xl font-bold' },
-  { label: 'Heading 2', tag: 'h2', preview: 'text-lg font-bold' },
-  { label: 'Heading 3', tag: 'h3', preview: 'text-base font-semibold' },
-];
-
-/* ── Font style panel (shared) ───────────────────────────────── */
-
-function FontPanel({
-  onApply,
-  onClose,
-  panelClassName,
-}: {
-  onApply: (tag: string, label: string) => void;
-  onClose: () => void;
-  panelClassName?: string;
-}) {
-  return (
-    <div className={cn(panelClassName ?? PANEL_WRAP)} data-slot="rte-panel-font">
-      <div className="flex items-center justify-between mb-spacing-xs">
-        <span className="text-text-xs font-[500] text-[rgba(108,115,127,1)] dark:text-[rgba(156,163,175,1)]">
-          Text style
-        </span>
-        <button
-          type="button"
-          aria-label="Close font panel"
-          onMouseDown={(e) => e.preventDefault()}
-          onClick={onClose}
-          className={PANEL_CLOSE_BTN}
-        >
-          <CloseIcon />
-        </button>
-      </div>
-      {FONT_STYLES.map(({ label, tag, preview }) => (
-        <button
-          key={tag}
-          type="button"
-          onMouseDown={(e) => e.preventDefault()}
-          onClick={() => onApply(tag, label)}
-          className={cn(FONT_OPTION_BTN, preview)}
-        >
-          {label}
-        </button>
-      ))}
-    </div>
-  );
-}
-
-/* ── Font size panel ─────────────────────────────────────────── */
-
-const FONT_SIZES = ['10', '12', '14', '16', '18', '20', '24', '32'];
-
-function FontSizePanel({
-  current,
-  onApply,
-  onClose,
-  panelClassName,
-}: {
-  current: string;
-  onApply: (size: string) => void;
-  onClose: () => void;
-  panelClassName?: string;
-}) {
-  return (
-    <div className={cn(panelClassName ?? PANEL_WRAP)} data-slot="rte-panel-font-size">
-      <div className="flex items-center justify-between mb-spacing-xs">
-        <span className="text-text-xs font-[500] text-[rgba(108,115,127,1)] dark:text-[rgba(156,163,175,1)]">
-          Font size
-        </span>
-        <button
-          type="button"
-          aria-label="Close font size panel"
-          onMouseDown={(e) => e.preventDefault()}
-          onClick={onClose}
-          className={PANEL_CLOSE_BTN}
-        >
-          <CloseIcon />
-        </button>
-      </div>
-      <div className="flex flex-wrap gap-spacing-xs">
-        {FONT_SIZES.map((size) => (
-          <button
-            key={size}
-            type="button"
-            onMouseDown={(e) => e.preventDefault()}
-            onClick={() => onApply(size)}
-            className={cn(
-              'min-w-[36px] px-spacing-md py-spacing-xs rounded-[4px] text-text-sm',
-              'text-[rgba(22,22,22,1)] dark:text-[rgba(229,231,235,1)]',
-              'hover:bg-[rgba(243,244,246,1)] dark:hover:bg-[rgba(31,42,55,1)]',
-              'motion-feedback cursor-pointer',
-              current === size && TOOLBAR_BTN_ACTIVE,
-            )}
-          >
-            {size}
-          </button>
-        ))}
-      </div>
-    </div>
-  );
-}
-
-/* ── Link panel ──────────────────────────────────────────────── */
-
-function LinkPanel({
-  inputRef,
-  url,
-  onChange,
-  onInsert,
-  onClose,
-  panelClassName,
-}: {
-  inputRef: React.RefObject<HTMLInputElement | null>;
-  url: string;
-  onChange: (v: string) => void;
-  onInsert: () => void;
-  onClose: () => void;
-  panelClassName?: string;
-}) {
-  return (
-    <div className={cn(panelClassName ?? PANEL_WRAP)} data-slot="rte-panel-link">
-      <div className="flex items-center gap-spacing-sm">
-        <input
-          ref={inputRef}
-          type="url"
-          value={url}
-          onChange={(e) => onChange(e.target.value)}
-          placeholder="https://example.com"
-          onKeyDown={(e) => {
-            if (e.key === 'Enter') { e.preventDefault(); onInsert(); }
-            if (e.key === 'Escape') onClose();
-          }}
-          className={LINK_INPUT}
-          aria-label="URL"
-        />
-        <button
-          type="button"
-          onMouseDown={(e) => e.preventDefault()}
-          onClick={onInsert}
-          className={LINK_INSERT_BTN}
-        >
-          Insert
-        </button>
-        <button
-          type="button"
-          aria-label="Cancel link"
-          onMouseDown={(e) => e.preventDefault()}
-          onClick={onClose}
-          className={PANEL_CLOSE_BTN}
-        >
-          <CloseIcon />
-        </button>
-      </div>
-    </div>
-  );
-}
-
-/* ── ToolbarBtn ──────────────────────────────────────────────── */
-
-function ToolbarBtn({
-  active = false,
-  onClick,
-  label,
-  children,
-  className,
-}: {
-  active?: boolean;
-  onClick?: () => void;
-  label: string;
-  children: React.ReactNode;
-  className?: string;
-}) {
-  return (
-    <button
-      type="button"
-      aria-label={label}
-      aria-pressed={active || undefined}
-      onMouseDown={(e) => e.preventDefault()}
-      onClick={onClick}
-      className={cn(TOOLBAR_BTN_BASE, active && TOOLBAR_BTN_ACTIVE, className)}
-    >
-      {children}
-    </button>
-  );
-}
-
-function VDivider({ className }: { className?: string }) {
-  return <span aria-hidden="true" className={cn(TOOLBAR_DIVIDER, className)} />;
-}
-
-function StyleSelector({
-  icon,
-  value,
-  onClick,
-  label,
-  active,
-}: {
-  icon?: React.ReactNode;
-  value: string;
-  onClick?: () => void;
-  label: string;
-  active?: boolean;
-}) {
-  return (
-    <button
-      type="button"
-      aria-label={label}
-      aria-haspopup="listbox"
-      aria-expanded={active}
-      onMouseDown={(e) => e.preventDefault()}
-      onClick={onClick}
-      className={cn(STYLE_SELECT, active && 'border-[rgba(27,131,84,0.5)] dark:border-[rgba(110,231,160,0.4)]')}
-    >
-      {icon}
-      <span className={STYLE_SELECT_TEXT}>{value}</span>
-      <ChevronDownSmIcon className={STYLE_SELECT_CHEVRON} />
-    </button>
-  );
-}
-
-/* ── Shared sub-toolbar fragments ───────────────────────────────── */
-
-function UndoRedoGroup({ onUndo, onRedo }: Pick<RichTextEditorProps, 'onUndo' | 'onRedo'>) {
-  return (
-    <div className={TOOLBAR_GROUP_SM} data-slot="rte-undo-redo">
-      <ToolbarBtn onClick={onUndo} label="Undo"><UndoIcon className="size-6" /></ToolbarBtn>
-      <ToolbarBtn onClick={onRedo} label="Redo"><RedoIcon className="size-6" /></ToolbarBtn>
-    </div>
-  );
-}
-
-function TextFormatGroup({
-  isBold, isItalic, isUnderline, onBold, onItalic, onUnderline,
-}: Pick<RichTextEditorProps, 'isBold' | 'isItalic' | 'isUnderline' | 'onBold' | 'onItalic' | 'onUnderline'>) {
-  return (
-    <div className={TOOLBAR_GROUP_MD} data-slot="rte-text-format">
-      <ToolbarBtn active={isBold} onClick={onBold} label="Bold"><BoldIcon className="size-6" /></ToolbarBtn>
-      <ToolbarBtn active={isItalic} onClick={onItalic} label="Italic"><ItalicIcon className="size-6" /></ToolbarBtn>
-      <ToolbarBtn active={isUnderline} onClick={onUnderline} label="Underline"><UnderlineIcon className="size-6" /></ToolbarBtn>
-    </div>
-  );
-}
-
-function AlignGroup({ alignment, onAlign }: Pick<RichTextEditorProps, 'alignment' | 'onAlign'>) {
-  return (
-    <div className={TOOLBAR_GROUP_MD} data-slot="rte-alignment">
-      <ToolbarBtn active={alignment === 'left'} onClick={() => onAlign?.('left')} label="Align left">
-        <AlignLeftIcon className="size-6" />
-      </ToolbarBtn>
-      <ToolbarBtn active={alignment === 'center'} onClick={() => onAlign?.('center')} label="Align center">
-        <AlignCenterIcon className="size-6" />
-      </ToolbarBtn>
-      <ToolbarBtn active={alignment === 'right'} onClick={() => onAlign?.('right')} label="Align right">
-        <AlignRightIcon className="size-6" />
-      </ToolbarBtn>
-    </div>
-  );
-}
-
-/* ── size map for execCommand('fontSize') ────────────────────── */
-const FONT_SIZE_MAP: Record<string, string> = {
-  '10': '1', '12': '2', '14': '3', '16': '4',
-  '18': '5', '20': '5', '24': '6', '32': '7',
-};
-
-/* ─────────────────────────────────────────────────────────────────
-   DefaultEditor — self-contained full editor (type="default")
-   ───────────────────────────────────────────────────────────────── */
-
-type DefaultPanelType = 'font' | 'fontSize' | 'link' | null;
-
-interface DefaultEditorProps extends Pick<RichTextEditorProps,
-  | 'mobile' | 'isBold' | 'isItalic' | 'isUnderline' | 'alignment'
-  | 'textStyle' | 'fontSize'
-  | 'onTextStyleChange' | 'onFontSizeChange'
-  | 'onUndo' | 'onRedo' | 'onBold' | 'onItalic' | 'onUnderline'
-  | 'onAlign' | 'onColor' | 'onLink' | 'onImage' | 'onAI'
-  | 'value' | 'placeholder' | 'onChange'
-  | 'className'
-> {
-  containerRef?: React.Ref<HTMLDivElement>;
-  rest?: Record<string, unknown>;
-}
-
-function DefaultEditor({
-  mobile = false,
-  isBold: propIsBold,
-  isItalic: propIsItalic,
-  isUnderline: propIsUnderline,
-  alignment: propAlignment,
-  textStyle: propTextStyle,
-  fontSize: propFontSize,
-  onTextStyleChange,
-  onFontSizeChange,
-  onUndo: propOnUndo,
-  onRedo: propOnRedo,
-  onBold: propOnBold,
-  onItalic: propOnItalic,
-  onUnderline: propOnUnderline,
-  onAlign: propOnAlign,
-  onColor: propOnColor,
-  onLink: propOnLink,
-  onImage: propOnImage,
-  onAI,
-  value,
-  placeholder,
-  onChange,
-  className,
-  containerRef,
-  rest = {},
-}: DefaultEditorProps) {
-  const editorRef = useRef<HTMLDivElement>(null);
-  const fileInputRef = useRef<HTMLInputElement>(null);
-  const colorInputRef = useRef<HTMLInputElement | null>(null);
-  const linkInputRef = useRef<HTMLInputElement | null>(null);
-  const savedRangeRef = useRef<Range | null>(null);
-
-  /* Format state — tracked internally from execCommand */
-  const [activeBold, setActiveBold] = useState(propIsBold ?? false);
-  const [activeItalic, setActiveItalic] = useState(propIsItalic ?? false);
-  const [activeUnderline, setActiveUnderline] = useState(propIsUnderline ?? false);
-  const [activeAlignment, setActiveAlignment] = useState<TextAlignment>(propAlignment ?? 'left');
-  const [activeTextStyle, setActiveTextStyle] = useState(propTextStyle ?? 'Normal');
-  const [activeFontSize, setActiveFontSize] = useState(propFontSize ?? '16');
-  const [isEmpty, setIsEmpty] = useState(true);
-  const [openPanel, setOpenPanel] = useState<DefaultPanelType>(null);
-  const [linkUrl, setLinkUrl] = useState('');
-
-  /* Set initial HTML content */
-  useEffect(() => {
-    if (editorRef.current && value !== undefined) {
-      editorRef.current.innerHTML = value;
-      setIsEmpty(!(editorRef.current.textContent?.trim()));
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  /* Sync format indicators from the document selection */
-  const syncFormatState = useCallback(() => {
-    setActiveBold(document.queryCommandState('bold'));
-    setActiveItalic(document.queryCommandState('italic'));
-    setActiveUnderline(document.queryCommandState('underline'));
-  }, []);
-
-  /* Save / restore editor selection around panel interactions */
-  const saveSelection = useCallback(() => {
-    const sel = window.getSelection();
-    if (sel && sel.rangeCount > 0) {
-      savedRangeRef.current = sel.getRangeAt(0).cloneRange();
-    }
-  }, []);
-
-  const restoreSelection = useCallback(() => {
-    if (!savedRangeRef.current) return;
-    editorRef.current?.focus();
-    const sel = window.getSelection();
-    if (sel) {
-      sel.removeAllRanges();
-      sel.addRange(savedRangeRef.current);
-    }
-  }, []);
-
-  /* Apply a format command inside the editor */
-  const execInEditor = useCallback((command: string, callback?: () => void) => {
-    editorRef.current?.focus();
-    document.execCommand(command, false);
-    syncFormatState();
-    callback?.();
-  }, [syncFormatState]);
-
-  /* Apply alignment */
-  const applyAlignInEditor = useCallback((align: TextAlignment) => {
-    editorRef.current?.focus();
-    document.execCommand(ALIGN_COMMANDS[align], false);
-    setActiveAlignment(align);
-    propOnAlign?.(align);
-  }, [propOnAlign]);
-
-  /* Track content changes */
-  const handleInput = useCallback(() => {
-    const el = editorRef.current;
-    if (!el) return;
-    setIsEmpty(!(el.textContent?.trim()));
-    syncFormatState();
-    onChange?.(el.innerHTML);
-  }, [onChange, syncFormatState]);
-
-  /* Open / close panels — save selection first */
-  const togglePanel = useCallback((panel: DefaultPanelType) => {
-    saveSelection();
-    setOpenPanel((prev) => (prev === panel ? null : panel));
-    if (panel === 'link') setLinkUrl('');
-  }, [saveSelection]);
-
-  /* Auto-focus link URL input when panel opens */
-  useEffect(() => {
-    if (openPanel === 'link') {
-      setTimeout(() => linkInputRef.current?.focus(), 0);
-    }
-  }, [openPanel]);
-
-  /* Apply font style (formatBlock) */
-  const applyFontStyle = useCallback((tag: string, label: string) => {
-    restoreSelection();
-    document.execCommand('formatBlock', false, tag);
-    syncFormatState();
-    setActiveTextStyle(label);
-    onTextStyleChange?.(label);
-    setOpenPanel(null);
-    editorRef.current?.focus();
-  }, [restoreSelection, syncFormatState, onTextStyleChange]);
-
-  /* Apply font size */
-  const applyFontSize = useCallback((size: string) => {
-    restoreSelection();
-    document.execCommand('fontSize', false, FONT_SIZE_MAP[size] ?? '4');
-    setActiveFontSize(size);
-    onFontSizeChange?.(size);
-    setOpenPanel(null);
-    editorRef.current?.focus();
-  }, [restoreSelection, onFontSizeChange]);
-
-  /* Insert link */
-  const insertLink = useCallback(() => {
-    const raw = linkUrl.trim();
-    if (!raw) return;
-    const url = /^https?:\/\//i.test(raw) ? raw : `https://${raw}`;
-    restoreSelection();
-    document.execCommand('createLink', false, url);
-    handleInput();
-    setLinkUrl('');
-    setOpenPanel(null);
-    propOnLink?.();
-  }, [linkUrl, restoreSelection, handleInput, propOnLink]);
-
-  /* Image file upload */
-  const handleImageFile = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
-    const file = e.target.files?.[0];
-    if (!file) return;
-    const reader = new FileReader();
-    reader.onload = () => {
-      restoreSelection();
-      document.execCommand(
-        'insertHTML',
-        false,
-        `<img src="${reader.result as string}" alt="${file.name}" style="max-width:100%;height:auto;border-radius:4px;display:block;margin:4px 0;" />`,
-      );
-      handleInput();
-    };
-    reader.readAsDataURL(file);
-    e.target.value = '';
-  }, [restoreSelection, handleInput]);
-
-  const handleImageClick = useCallback(() => {
-    saveSelection();
-    fileInputRef.current?.click();
-  }, [saveSelection]);
-
-  /* Text color via native color picker */
-  const handleColorChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
-    restoreSelection();
-    document.execCommand('foreColor', false, e.target.value);
-    handleInput();
-    propOnColor?.();
-  }, [restoreSelection, handleInput, propOnColor]);
-
-  const handleColorClick = useCallback(() => {
-    saveSelection();
-    colorInputRef.current?.click();
-  }, [saveSelection]);
-
-  /* Undo / Redo */
-  const handleUndo = useCallback(() => { execInEditor('undo'); propOnUndo?.(); }, [execInEditor, propOnUndo]);
-  const handleRedo = useCallback(() => { execInEditor('redo'); propOnRedo?.(); }, [execInEditor, propOnRedo]);
-
-  /* Current align icon for mobile */
-  const AlignCurrentIcon =
-    activeAlignment === 'center' ? AlignCenterIcon
-      : activeAlignment === 'right' ? AlignRightIcon
-        : AlignLeftIcon;
-
-  /* ── Toolbar (desktop vs mobile) ──────────────────────────── */
-  const toolbar = mobile ? (
-    <div
-      className={cn(TOOLBAR_MOBILE, 'border-b border-[rgba(210,214,219,1)] dark:border-[rgba(44,57,79,1)]')}
-      role="toolbar"
-      aria-label="Text formatting"
-    >
-      <div className={TOOLBAR_MOBILE_ROW}>
-        <UndoRedoGroup onUndo={handleUndo} onRedo={handleRedo} />
-        <div className={TOOLBAR_GROUP_SM}>
-          <StyleSelector
-            icon={<TextTIcon className="size-4 text-[rgba(108,115,127,1)] dark:text-[rgba(156,163,175,1)] shrink-0" />}
-            value={activeTextStyle}
-            active={openPanel === 'font'}
-            onClick={() => togglePanel('font')}
-            label="Text style"
-          />
-          <StyleSelector
-            value={activeFontSize}
-            active={openPanel === 'fontSize'}
-            onClick={() => togglePanel('fontSize')}
-            label="Font size"
-          />
-        </div>
-      </div>
-      <div className={TOOLBAR_MOBILE_ROW}>
-        <button
-          type="button"
-          aria-label="Bold"
-          onMouseDown={(e) => e.preventDefault()}
-          onClick={() => execInEditor('bold', propOnBold)}
-          className={cn(MOBILE_GROUP_BTN, activeBold && TOOLBAR_BTN_ACTIVE)}
-        >
-          <BoldIcon className="size-6" />
-          <ChevronDownIcon className="size-4" />
-        </button>
-        <VDivider />
-        <button
-          type="button"
-          aria-label="Text color"
-          onMouseDown={(e) => e.preventDefault()}
-          onClick={handleColorClick}
-          className={MOBILE_GROUP_BTN}
-        >
-          <ColorSquareIcon className="size-6" />
-          <ChevronDownIcon className="size-4" />
-        </button>
-        <VDivider />
-        <button
-          type="button"
-          aria-label="Alignment"
-          onMouseDown={(e) => e.preventDefault()}
-          onClick={() => {
-            const next: TextAlignment =
-              activeAlignment === 'left' ? 'center'
-                : activeAlignment === 'center' ? 'right' : 'left';
-            applyAlignInEditor(next);
-          }}
-          className={MOBILE_GROUP_BTN}
-        >
-          <AlignCurrentIcon className="size-6" />
-          <ChevronDownIcon className="size-4" />
-        </button>
-        <VDivider />
-        <div className={TOOLBAR_GROUP_SM}>
-          <ToolbarBtn
-            active={openPanel === 'link'}
-            onClick={() => togglePanel('link')}
-            label="Insert link"
-          >
-            <LinkIcon className="size-6" />
-          </ToolbarBtn>
-          <ToolbarBtn onClick={handleImageClick} label="Insert image">
-            <ImageIcon className="size-6" />
-          </ToolbarBtn>
-        </div>
-      </div>
-    </div>
-  ) : (
-    <div
-      className={cn(TOOLBAR_DESKTOP, 'border-b border-[rgba(210,214,219,1)] dark:border-[rgba(44,57,79,1)]')}
-      role="toolbar"
-      aria-label="Text formatting"
-    >
-      <UndoRedoGroup onUndo={handleUndo} onRedo={handleRedo} />
-      <VDivider />
-      <div className={TOOLBAR_GROUP_SM} data-slot="rte-style-selectors">
-        <StyleSelector
-          icon={<TextTIcon className="size-4 text-[rgba(108,115,127,1)] dark:text-[rgba(156,163,175,1)] shrink-0" />}
-          value={activeTextStyle}
-          active={openPanel === 'font'}
-          onClick={() => togglePanel('font')}
-          label="Text style"
-        />
-        <StyleSelector
-          value={activeFontSize}
-          active={openPanel === 'fontSize'}
-          onClick={() => togglePanel('fontSize')}
-          label="Font size"
-        />
-      </div>
-      <VDivider />
-      <TextFormatGroup
-        isBold={activeBold}
-        isItalic={activeItalic}
-        isUnderline={activeUnderline}
-        onBold={() => execInEditor('bold', propOnBold)}
-        onItalic={() => execInEditor('italic', propOnItalic)}
-        onUnderline={() => execInEditor('underline', propOnUnderline)}
-      />
-      <VDivider />
-      <div className={TOOLBAR_GROUP_XS} data-slot="rte-color">
-        <ToolbarBtn onClick={handleColorClick} label="Text color">
-          <ColorSquareIcon className="size-6" />
-        </ToolbarBtn>
-        <button
-          type="button"
-          aria-hidden="true"
-          tabIndex={-1}
-          onMouseDown={(e) => e.preventDefault()}
-          onClick={handleColorClick}
-          className="cursor-pointer text-[rgba(108,115,127,1)] dark:text-[rgba(156,163,175,1)]"
-        >
-          <ChevronDownIcon className="size-4" />
-        </button>
-      </div>
-      <VDivider />
-      <AlignGroup alignment={activeAlignment} onAlign={applyAlignInEditor} />
-      <VDivider />
-      <div className={TOOLBAR_GROUP_MD} data-slot="rte-media">
-        <ToolbarBtn
-          active={openPanel === 'link'}
-          onClick={() => togglePanel('link')}
-          label="Insert link"
-        >
-          <LinkIcon className="size-6" />
-        </ToolbarBtn>
-        <ToolbarBtn onClick={handleImageClick} label="Insert image">
-          <ImageIcon className="size-6" />
-        </ToolbarBtn>
-        <ToolbarBtn onClick={onAI} label="AI assist">
-          <AIIcon className="size-6" />
-        </ToolbarBtn>
-      </div>
-    </div>
-  );
-
-  return (
-    <div
-      ref={containerRef}
-      data-slot="rich-text-editor"
-      data-type="default"
-      className={cn(EDITOR_CONTAINER, className)}
-      {...rest}
-    >
-      {toolbar}
-
-      {/* Inline panels — between toolbar and content area */}
-      {openPanel === 'font' && (
-        <FontPanel
-          panelClassName={EDITOR_PANEL_WRAP}
-          onApply={applyFontStyle}
-          onClose={() => setOpenPanel(null)}
-        />
-      )}
-      {openPanel === 'fontSize' && (
-        <FontSizePanel
-          panelClassName={EDITOR_PANEL_WRAP}
-          current={activeFontSize}
-          onApply={applyFontSize}
-          onClose={() => setOpenPanel(null)}
-        />
-      )}
-      {openPanel === 'link' && (
-        <LinkPanel
-          panelClassName={EDITOR_PANEL_WRAP}
-          inputRef={linkInputRef}
-          url={linkUrl}
-          onChange={setLinkUrl}
-          onInsert={insertLink}
-          onClose={() => setOpenPanel(null)}
-        />
-      )}
-
-      {/* Content area */}
-      <div className="relative flex-1 px-spacing-xl py-spacing-md">
-        {isEmpty && (
-          <span
-            aria-hidden="true"
-            className="absolute top-spacing-md start-spacing-xl pointer-events-none text-text-md font-[400] leading-[24px] text-[rgba(108,115,127,1)] dark:text-[rgba(107,114,128,1)]"
-          >
-            {placeholder ?? 'Type here…'}
-          </span>
-        )}
-        <div
-          ref={editorRef}
-          contentEditable
-          suppressContentEditableWarning
-          data-slot="rte-content"
-          role="textbox"
-          aria-multiline="true"
-          onInput={handleInput}
-          onKeyUp={syncFormatState}
-          onMouseUp={syncFormatState}
-          onSelect={syncFormatState}
-          className="w-full min-h-[120px] outline-none text-text-md font-[400] leading-relaxed text-[rgba(22,22,22,1)] dark:text-[rgba(229,231,235,1)]"
-        />
-      </div>
-
-      {/* Hidden native color picker */}
-      <input
-        ref={colorInputRef}
-        type="color"
-        defaultValue="#161616"
-        className="sr-only"
-        aria-hidden="true"
-        onChange={handleColorChange}
-      />
-      {/* Hidden file input for image upload */}
-      <input
-        ref={fileInputRef}
-        type="file"
-        accept="image/*"
-        className="hidden"
-        aria-hidden="true"
-        onChange={handleImageFile}
-      />
-    </div>
-  );
-}
-
-/* ── InputEditor — self-contained contentEditable editor ────────── */
-
-type PanelType = 'emoji' | 'font' | 'link' | null;
-
-interface InputEditorProps extends Pick<RichTextEditorProps,
-  | 'expand' | 'onBold' | 'onItalic' | 'onUnderline' | 'onAlign'
-  | 'onLink' | 'onImage' | 'onAI'
-  | 'value' | 'placeholder' | 'onChange'
-  | 'onAddContent' | 'onFormatText' | 'onEmoji' | 'onMention'
-  | 'className'
-> {
-  containerRef?: React.Ref<HTMLDivElement>;
-  rest?: Record<string, unknown>;
-}
-
-function InputEditor({
-  expand = false,
-  onBold: propOnBold,
-  onItalic: propOnItalic,
-  onUnderline: propOnUnderline,
-  onAlign: propOnAlign,
-  onLink: propOnLink,
-  onImage: propOnImage,
-  onAI,
-  value,
-  placeholder = 'You can write here…',
-  onChange,
-  onAddContent,
-  onFormatText,
-  onEmoji: propOnEmoji,
-  onMention,
-  className,
-  containerRef,
-  rest = {},
-}: InputEditorProps) {
-  const editorRef = useRef<HTMLDivElement>(null);
-  const fileInputRef = useRef<HTMLInputElement>(null);
-  const linkInputRef = useRef<HTMLInputElement | null>(null);
-  const savedRangeRef = useRef<Range | null>(null);
-
-  /* Format state */
-  const [activeBold, setActiveBold] = useState(false);
-  const [activeItalic, setActiveItalic] = useState(false);
-  const [activeUnderline, setActiveUnderline] = useState(false);
-  const [activeAlignment, setActiveAlignment] = useState<TextAlignment>('left');
-  const [isEmpty, setIsEmpty] = useState(true);
-
-  /* Panel state */
-  const [openPanel, setOpenPanel] = useState<PanelType>(null);
-  const [linkUrl, setLinkUrl] = useState('');
-
-  /* Set initial HTML content on mount */
-  useEffect(() => {
-    if (editorRef.current && value !== undefined) {
-      editorRef.current.innerHTML = value;
-      setIsEmpty(!(editorRef.current.textContent?.trim()));
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  /* Read format state from the current document selection */
-  const syncFormatState = useCallback(() => {
-    setActiveBold(document.queryCommandState('bold'));
-    setActiveItalic(document.queryCommandState('italic'));
-    setActiveUnderline(document.queryCommandState('underline'));
-  }, []);
-
-  /* Save/restore the editor's text selection (needed when focus leaves the editor) */
-  const saveSelection = useCallback(() => {
-    const sel = window.getSelection();
-    if (sel && sel.rangeCount > 0) {
-      savedRangeRef.current = sel.getRangeAt(0).cloneRange();
-    }
-  }, []);
-
-  const restoreSelection = useCallback(() => {
-    if (!savedRangeRef.current) return;
-    editorRef.current?.focus();
-    const sel = window.getSelection();
-    if (sel) {
-      sel.removeAllRanges();
-      sel.addRange(savedRangeRef.current);
-    }
-  }, []);
-
-  /* Apply format command inside the editor */
-  const execInEditor = useCallback((command: string, callback?: () => void) => {
-    editorRef.current?.focus();
-    document.execCommand(command, false);
-    syncFormatState();
-    callback?.();
-  }, [syncFormatState]);
-
-  /* Apply alignment inside the editor */
-  const applyAlignInEditor = useCallback((align: TextAlignment) => {
-    editorRef.current?.focus();
-    document.execCommand(ALIGN_COMMANDS[align], false);
-    setActiveAlignment(align);
-    propOnAlign?.(align);
-  }, [propOnAlign]);
-
-  /* Track content changes */
-  const handleInput = useCallback(() => {
-    const el = editorRef.current;
-    if (!el) return;
-    setIsEmpty(!(el.textContent?.trim()));
-    syncFormatState();
-    onChange?.(el.innerHTML);
-  }, [onChange, syncFormatState]);
-
-  /* Open/close panels — save selection before opening so it can be restored */
-  const togglePanel = useCallback((panel: PanelType) => {
-    saveSelection();
-    setOpenPanel((prev) => (prev === panel ? null : panel));
-    if (panel === 'link') setLinkUrl('');
-  }, [saveSelection]);
-
-  /* Auto-focus the link URL input when that panel opens */
-  useEffect(() => {
-    if (openPanel === 'link') {
-      setTimeout(() => linkInputRef.current?.focus(), 0);
-    }
-  }, [openPanel]);
-
-  /* ── Panel actions ─────────────────────────────────────────── */
-
-  const insertEmoji = useCallback((emoji: string) => {
-    restoreSelection();
-    document.execCommand('insertText', false, emoji);
-    handleInput();
-    setOpenPanel(null);
-  }, [restoreSelection, handleInput]);
-
-  const insertLink = useCallback(() => {
-    const raw = linkUrl.trim();
-    if (!raw) return;
-    const url = /^https?:\/\//i.test(raw) ? raw : `https://${raw}`;
-    restoreSelection();
-    document.execCommand('createLink', false, url);
-    handleInput();
-    setLinkUrl('');
-    setOpenPanel(null);
-    propOnLink?.();
-  }, [linkUrl, restoreSelection, handleInput, propOnLink]);
-
-  const applyFontStyle = useCallback((tag: string, _label?: string) => {
-    restoreSelection();
-    document.execCommand('formatBlock', false, tag);
-    syncFormatState();
-    setOpenPanel(null);
-    editorRef.current?.focus();
-    onFormatText?.();
-  }, [restoreSelection, syncFormatState, onFormatText]);
-
-  /* ── Image file upload ────────────────────────────────────── */
-
-  const handleImageFile = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
-    const file = e.target.files?.[0];
-    if (!file) return;
-    const reader = new FileReader();
-    reader.onload = () => {
-      restoreSelection();
-      document.execCommand(
-        'insertHTML',
-        false,
-        `<img src="${reader.result as string}" alt="${file.name}" style="max-width:100%;height:auto;border-radius:4px;display:block;margin:4px 0;" />`,
-      );
-      handleInput();
-    };
-    reader.readAsDataURL(file);
-    e.target.value = '';
-  }, [restoreSelection, handleInput]);
-
-  /* Capture selection BEFORE file picker steals focus */
-  const handleImageClick = useCallback(() => {
-    saveSelection();
-    fileInputRef.current?.click();
-  }, [saveSelection]);
-
-  return (
-    <div
-      ref={containerRef}
-      data-slot="rich-text-editor"
-      data-type="input"
-      data-expanded={expand || undefined}
-      className={cn(INPUT_CONTAINER, className)}
-      {...rest}
-    >
-      {/* Optional expand toolbar above content area */}
-      {expand && (
-        <div
-          data-slot="rte-expand-toolbar"
-          role="toolbar"
-          aria-label="Text formatting"
-          className={EXPAND_TOOLBAR}
-        >
-          <TextFormatGroup
-            isBold={activeBold}
-            isItalic={activeItalic}
-            isUnderline={activeUnderline}
-            onBold={() => execInEditor('bold', propOnBold)}
-            onItalic={() => execInEditor('italic', propOnItalic)}
-            onUnderline={() => execInEditor('underline', propOnUnderline)}
-          />
-          <VDivider />
-          <AlignGroup alignment={activeAlignment} onAlign={applyAlignInEditor} />
-          <VDivider />
-          {/* Link: saves selection, opens link panel */}
-          <ToolbarBtn
-            active={openPanel === 'link'}
-            onClick={() => togglePanel('link')}
-            label="Insert link"
-          >
-            <LinkIcon className="size-6" />
-          </ToolbarBtn>
-          {/* Image: saves selection, triggers file picker */}
-          <ToolbarBtn onClick={handleImageClick} label="Insert image">
-            <ImageIcon className="size-6" />
-          </ToolbarBtn>
-          <ToolbarBtn onClick={onAI} label="AI assist">
-            <AIIcon className="size-6" />
-          </ToolbarBtn>
-        </div>
-      )}
-
-      {/* Content area */}
-      <div className="relative pt-spacing-sm">
-        {isEmpty && (
-          <span
-            aria-hidden="true"
-            className="absolute top-spacing-sm start-0 pointer-events-none text-text-md font-[400] leading-[24px] text-[rgba(108,115,127,1)] dark:text-[rgba(107,114,128,1)]"
-          >
-            {placeholder}
-          </span>
-        )}
-        <div
-          ref={editorRef}
-          contentEditable
-          suppressContentEditableWarning
-          data-slot="rte-content"
-          role="textbox"
-          aria-multiline="true"
-          aria-label="Rich text input"
-          onInput={handleInput}
-          onKeyUp={syncFormatState}
-          onMouseUp={syncFormatState}
-          onSelect={syncFormatState}
-          className={INPUT_TEXTAREA}
-        />
-      </div>
-
-      {/* Inline panels — rendered between content and bottom bar */}
-      {openPanel === 'emoji' && (
-        <EmojiPanel
-          onInsert={insertEmoji}
-          onClose={() => setOpenPanel(null)}
-        />
-      )}
-      {openPanel === 'font' && (
-        <FontPanel
-          onApply={applyFontStyle}
-          onClose={() => setOpenPanel(null)}
-        />
-      )}
-      {openPanel === 'link' && (
-        <LinkPanel
-          inputRef={linkInputRef}
-          url={linkUrl}
-          onChange={setLinkUrl}
-          onInsert={insertLink}
-          onClose={() => setOpenPanel(null)}
-        />
-      )}
-
-      {/* Bottom action bar */}
-      <div data-slot="rte-bottom-bar" className={INPUT_BOTTOM_BAR}>
-        <button
-          type="button"
-          aria-label="Add content"
-          onMouseDown={(e) => e.preventDefault()}
-          onClick={onAddContent}
-          className={INPUT_ADD_BTN}
-        >
-          <PlusIcon className="size-4" />
-        </button>
-
-        <span aria-hidden="true" className={INPUT_DIVIDER} />
-
-        {/* Aa — toggles font-style panel */}
-        <button
-          type="button"
-          aria-label="Text style"
-          onMouseDown={(e) => e.preventDefault()}
-          onClick={() => togglePanel('font')}
-          className={cn(INPUT_ACTION_BTN, openPanel === 'font' && TOOLBAR_BTN_ACTIVE)}
-        >
-          <AaIcon className="size-5" />
-        </button>
-
-        {/* Emoji — toggles emoji picker panel */}
-        <button
-          type="button"
-          aria-label="Insert emoji"
-          onMouseDown={(e) => e.preventDefault()}
-          onClick={() => togglePanel('emoji')}
-          className={cn(INPUT_ACTION_BTN, openPanel === 'emoji' && TOOLBAR_BTN_ACTIVE)}
-        >
-          <SmileIcon className="size-5" />
-        </button>
-
-        {/* @ — mention (external) */}
-        <button
-          type="button"
-          aria-label="Mention someone"
-          onMouseDown={(e) => e.preventDefault()}
-          onClick={onMention}
-          className={INPUT_ACTION_BTN}
-        >
-          <AtIcon className="size-5" />
-        </button>
-      </div>
-
-      {/* Hidden file input for image upload */}
-      <input
-        ref={fileInputRef}
-        type="file"
-        accept="image/*"
-        className="hidden"
-        aria-hidden="true"
-        onChange={handleImageFile}
-      />
-    </div>
-  );
-}
-
-/* ─────────────────────────────────────────────────────────────────
-   Main component
-   ───────────────────────────────────────────────────────────────── */
-
-/**
- * RichTextEditor — a fully interactive, self-contained formatting component.
- *
- * ### Types
- * `default` — full standalone editor with toolbar + contentEditable area.
- * Every button is interactive: bold/italic/underline apply via execCommand,
- * style selector and font-size selector open inline panels, link inserts an
- * anchor, image triggers a file picker, color opens a native color chooser.
- *
- * `text-selected` — compact floating toolbar shown when text is selected.
- *
- * `input` — compact rich-text input with bottom quick-action bar (emoji,
- * font-style, mention). Set `expand` to reveal the full formatting toolbar.
- *
- * ### RTL
- * No extra configuration — logical CSS properties mirror automatically when
- * an ancestor sets `dir="rtl"`.
- *
- * Figma source: node 6259:88649 (Rich Text Editor)
- */
-export const RichTextEditor = forwardRef<HTMLDivElement, RichTextEditorProps>(
-  function RichTextEditor(
-    {
-      type = 'default',
-      mobile = false,
-      expand = false,
-      isBold = false,
-      isItalic = false,
-      isUnderline = false,
-      alignment,
-      textStyle,
-      fontSize,
-      onTextStyleChange,
-      onFontSizeChange,
-      onUndo,
-      onRedo,
-      onBold,
-      onItalic,
-      onUnderline,
-      onAlign,
-      onColor,
-      onLink,
-      onImage,
-      onAI,
-      value,
-      placeholder,
-      onChange,
-      onAddContent,
-      onFormatText,
-      onEmoji,
-      onMention,
-      className,
-      ...rest
-    },
-    ref,
-  ) {
-    /* ── type="default" — delegate to self-contained DefaultEditor ── */
-    if (type === 'default') {
-      return (
-        <DefaultEditor
-          containerRef={ref}
-          mobile={mobile}
-          isBold={isBold}
-          isItalic={isItalic}
-          isUnderline={isUnderline}
-          alignment={alignment}
-          textStyle={textStyle}
-          fontSize={fontSize}
-          onTextStyleChange={onTextStyleChange}
-          onFontSizeChange={onFontSizeChange}
-          onUndo={onUndo}
-          onRedo={onRedo}
-          onBold={onBold}
-          onItalic={onItalic}
-          onUnderline={onUnderline}
-          onAlign={onAlign}
-          onColor={onColor}
-          onLink={onLink}
-          onImage={onImage}
-          onAI={onAI}
-          value={value}
-          placeholder={placeholder}
-          onChange={onChange}
-          className={className}
-          rest={rest as Record<string, unknown>}
-        />
-      );
-    }
-
-    /* ── type="input" — delegate to InputEditor ─────────────────── */
-    if (type === 'input') {
-      return (
-        <InputEditor
-          containerRef={ref}
-          expand={expand}
-          onBold={onBold}
-          onItalic={onItalic}
-          onUnderline={onUnderline}
-          onAlign={onAlign}
-          onLink={onLink}
-          onImage={onImage}
-          onAI={onAI}
-          value={value}
-          placeholder={placeholder}
-          onChange={onChange}
-          onAddContent={onAddContent}
-          onFormatText={onFormatText}
-          onEmoji={onEmoji}
-          onMention={onMention}
-          className={className}
-          rest={rest as Record<string, unknown>}
-        />
-      );
-    }
-
-    /* ── type="text-selected" — compact floating toolbar ─────────── */
-    const handleBold = () => { applyExecCommand('bold'); onBold?.(); };
-    const handleItalic = () => { applyExecCommand('italic'); onItalic?.(); };
-    const handleUnderline = () => { applyExecCommand('underline'); onUnderline?.(); };
-    const handleAlign = (a: TextAlignment) => { applyExecCommand(ALIGN_COMMANDS[a]); onAlign?.(a); };
-
-    return (
-      <div
-        ref={ref}
-        data-slot="rich-text-editor"
-        data-type="text-selected"
-        role="toolbar"
-        aria-label="Text formatting"
-        className={cn(FLOATING_TOOLBAR, className)}
-        {...rest}
-      >
-        <TextFormatGroup
-          isBold={isBold}
-          isItalic={isItalic}
-          isUnderline={isUnderline}
-          onBold={handleBold}
-          onItalic={handleItalic}
-          onUnderline={handleUnderline}
-        />
-        <VDivider />
-        <AlignGroup alignment={alignment} onAlign={handleAlign} />
-        <VDivider />
-        <ToolbarBtn onClick={onLink} label="Insert link">
-          <LinkIcon className="size-6" />
-        </ToolbarBtn>
-      </div>
-    );
-  },
-);