sdaia-ui 1.0.1

package/src/components/RichTextEditor/RichTextEditor.tsx

@@ -0,0 +1,1341 @@
+'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>
+    );
+  },
+);