@eocrm/design-system 0.0.0-stage → 0.6.17

package/src/components/RichTextEditor/RichTextImageResizer.tsx

@@ -0,0 +1,131 @@
+// RichTextImageResizer.tsx — a drag handle overlaid on a ready image attachment's
+// bottom-right corner. Lives in the editor shell (outside the contentEditable),
+// positioned over the image; dragging it resizes the image width live (the same
+// model path the Configure → Width slider drives). It is a POINTER affordance only
+// (mirrors the gutter drag handle); keyboard / assistive-tech users resize via the
+// Configure → Width slider, which is the accessible, keyboard-operable control.
+import { memo, useCallback, useRef, type RefObject } from 'react';
+import { useTranslation } from '../../i18n';
+import { useShellRelativeRect, useDraggingReporter } from './useOverlayRect';
+import styles from './RichTextEditor.module.scss';
+
+/** Smallest width the handle resizes to (matches RichTextAttachmentConfig's MIN_W). */
+const MIN_W = 80;
+const clamp = (v: number, lo: number, hi: number) => Math.max(lo, Math.min(hi, v));
+
+export interface RichTextImageResizerProps {
+  /** The editor shell element ref — to locate the image and anchor the handle. */
+  rootRef: RefObject<HTMLElement | null>;
+  /** Id of the hovered (ready, previewable) image attachment block. */
+  blockId: string;
+  /**
+   * A signature that changes whenever block order or the image's width shifts, so
+   * the handle re-measures and stays glued to the (resizing) image's corner.
+   */
+  layoutKey?: string;
+  /** Upper clamp for the width (the editor's content width, px). */
+  maxWidth: number;
+  /** Live width — fired on every pointer move (the last move seals the value). */
+  onResize: (width: number) => void;
+  /**
+   * Reports drag start/end so the editor can suppress hover-driven active-block
+   * changes while resizing (mirrors RichTextBlockControls' onDraggingChange).
+   */
+  onDraggingChange?: (dragging: boolean) => void;
+  /**
+   * Hide the handle WITHOUT unmounting it — used while a block-controls reorder
+   * drag is in flight (the handle can't track the block's in-place reflow, so it
+   * hides, then reappears at the dropped position). The component stays mounted so
+   * its drag-end unmount cleanup doesn't fire `onDraggingChange(false)` and clobber
+   * the editor's block-drag dragging flag.
+   */
+  hidden?: boolean;
+}
+
+/**
+ * Internal: the bottom-right resize handle for a ready image attachment. Rendered
+ * by `<RichTextEditor>` when a previewable image is hovered (independent of
+ * blockControls/upload — see the editor's image-hover tracking); not exported from
+ * the package.
+ */
+export const RichTextImageResizer = memo(function RichTextImageResizer({
+  rootRef,
+  blockId,
+  layoutKey,
+  maxWidth,
+  onResize,
+  onDraggingChange,
+  hidden,
+}: RichTextImageResizerProps) {
+  const t = useTranslation();
+  // Drag origin, captured on pointerdown. null when not dragging.
+  const dragRef = useRef<{ startX: number; startW: number } | null>(null);
+
+  // Reports drag start/end + fires (false) on a mid-drag unmount (image removed,
+  // blockControls/readOnly toggled, or `value` replaced) so the editor's draggingRef
+  // never sticks `true`. Mirrors RichTextBlockControls.
+  const reportDragging = useDraggingReporter(onDraggingChange);
+
+  const imgEl = useCallback(
+    () =>
+      rootRef.current?.querySelector<HTMLElement>(`[data-block-id="${CSS.escape(blockId)}"] img`) ??
+      null,
+    [rootRef, blockId],
+  );
+
+  // Position the handle on the image's bottom-right corner, measured relative to the
+  // shell. Re-runs on layoutKey so it tracks the corner as the image resizes.
+  const rect = useShellRelativeRect(rootRef, imgEl, layoutKey);
+  const box = rect ? { top: rect.top + rect.height, left: rect.left + rect.width } : null;
+
+  const onPointerDown = (e: React.PointerEvent<HTMLDivElement>) => {
+    const img = imgEl();
+    if (!img) return;
+    e.preventDefault(); // don't move the caret / start a text selection
+    e.stopPropagation(); // don't let the gutter dnd-kit sensor see this press
+    e.currentTarget.setPointerCapture(e.pointerId);
+    dragRef.current = { startX: e.clientX, startW: img.getBoundingClientRect().width };
+    reportDragging(true);
+  };
+
+  const onPointerMove = (e: React.PointerEvent<HTMLDivElement>) => {
+    const d = dragRef.current;
+    if (!d) return;
+    // max(MIN_W, …) guards a sub-MIN_W editor so the upper clamp never falls below
+    // the lower one (mirrors the slider's sliderMax floor).
+    const hi = Math.max(MIN_W, Math.round(maxWidth));
+    const next = clamp(Math.round(d.startW + (e.clientX - d.startX)), MIN_W, hi);
+    onResize(next);
+  };
+
+  const endDrag = (e: React.PointerEvent<HTMLDivElement>) => {
+    if (!dragRef.current) return;
+    dragRef.current = null;
+    try {
+      e.currentTarget.releasePointerCapture(e.pointerId);
+    } catch {
+      // capture may already be gone (pointercancel) — ignore
+    }
+    reportDragging(false);
+  };
+
+  // Early return is AFTER every hook above so hook order stays stable when
+  // `hidden` toggles. The component stays MOUNTED while hidden (the editor keeps
+  // rendering the element) — only its render bails — so the unmount cleanup in
+  // useDraggingReporter never fires mid-reorder.
+  if (hidden || !box) return null;
+
+  return (
+    <div
+      className={styles.resizeHandle}
+      style={{ top: box.top, left: box.left }}
+      contentEditable={false}
+      data-rte-resize-handle=""
+      title={t('richTextEditor.attachmentResize')}
+      onPointerDown={onPointerDown}
+      onPointerMove={onPointerMove}
+      onPointerUp={endDrag}
+      onPointerCancel={endDrag}
+    />
+  );
+});

package/src/components/RichTextEditor/RichTextLinkEditor.tsx

@@ -0,0 +1,151 @@
+// RichTextLinkEditor.tsx — the floating link-edit bubble for <RichTextEditor>.
+// Presentational: the editor owns all state and passes the current href + the
+// selection rect; this renders the URL form and positions it at the rect via a
+// Floating UI virtual element (the same portal+virtual-anchor pattern as
+// LiquidEditor's AutocompleteMenu, so it escapes the editor's overflow and any
+// Drawer/Modal ancestor). Enter applies, Esc / click-outside cancels.
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { overlayStack, useFloatingSurface } from '../_internal/overlay';
+import { createPortal } from 'react-dom';
+import { Button } from '../Button';
+import { Input } from '../Input';
+import { Stack } from '../Stack';
+import { Cluster } from '../Cluster';
+import { useTranslation } from '../../i18n';
+import type { Rect } from './selection';
+import { useAnchoredFloating } from './useAnchoredFloating';
+import { useDismissOnOutsidePointerDown } from './useDismissOnOutsidePointerDown';
+import styles from './RichTextEditor.module.scss';
+
+export interface RichTextLinkEditorProps {
+  /** Initial URL value (empty when creating). */
+  href: string;
+  /** Whether an existing link is being edited (shows the Remove button). */
+  editing: boolean;
+  /** Selection rect (viewport coords) the bubble anchors to. */
+  anchorRect: Rect;
+  /**
+   * Live anchor rect, re-read on every Floating UI reposition so the bubble tracks
+   * the selection line on scroll (the static `anchorRect` is only the initial
+   * position; it goes stale on a pure scroll, which fires no `selectionchange`).
+   * Falls back to `anchorRect` when it returns null.
+   */
+  getAnchorRect?: () => Rect | null;
+  /** Apply the (trimmed) URL. */
+  onApply: (href: string) => void;
+  /** Remove the link (only reachable when `editing`). */
+  onRemove: () => void;
+  /** Dismiss without changes (Esc / click-outside). */
+  onCancel: () => void;
+}
+
+/**
+ * Internal floating bubble for editing a link's URL. Rendered by
+ * `<RichTextEditor>` when the link editor is open; not exported from the
+ * package. Remount it (via `key`) per open so the URL field re-seeds from `href`.
+ */
+export function RichTextLinkEditor({
+  href,
+  editing,
+  anchorRect,
+  getAnchorRect,
+  onApply,
+  onRemove,
+  onCancel,
+}: RichTextLinkEditorProps) {
+  // #274: mounted only while open — register as a floating surface so
+  // Modal/Drawer/Lightbox yield Escape to us (our own Escape handling closes
+  // us; without registration one press would close the host too).
+  useFloatingSurface(true);
+  const t = useTranslation();
+  const [value, setValue] = useState(href);
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  const bubbleRef = useRef<HTMLDivElement | null>(null);
+
+  const { refs, floatingStyles } = useAnchoredFloating(anchorRect, getAnchorRect, { offset: 6 });
+
+  // Focus the URL field on open; select its contents when editing so a re-type
+  // replaces the existing href.
+  useEffect(() => {
+    const input = inputRef.current;
+    if (!input) return;
+    input.focus();
+    if (editing) input.select();
+  }, [editing]);
+
+  // Dismiss on a pointerdown outside the bubble.
+  const onCancelRef = useRef(onCancel);
+  onCancelRef.current = onCancel;
+  useDismissOnOutsidePointerDown(bubbleRef, onCancel);
+
+  // #274: Escape must close the bubble from ANYWHERE — inside a Modal the
+  // focus trap can hold focus on the dialog, so the container-scoped
+  // onKeyDown below never fires; without this the registered bubble makes
+  // the host yield and the press goes dead. Capture + consume so the host
+  // (and the editor) treat the press as handled.
+  useEffect(() => {
+    const onKeyDown = (e: globalThis.KeyboardEvent) => {
+      if (e.key !== 'Escape') return;
+      e.preventDefault();
+      overlayStack.consumeEscape(e);
+      onCancelRef.current();
+    };
+    document.addEventListener('keydown', onKeyDown, true);
+    return () => document.removeEventListener('keydown', onKeyDown, true);
+  }, []);
+
+  const setRefs = useCallback(
+    (node: HTMLDivElement | null) => {
+      bubbleRef.current = node;
+      refs.setFloating(node);
+    },
+    [refs],
+  );
+
+  return createPortal(
+    <div
+      ref={setRefs}
+      className={styles.linkBubble}
+      style={floatingStyles}
+      onKeyDown={(e) => {
+        if (e.key === 'Escape') {
+          e.preventDefault();
+          e.stopPropagation();
+          onCancel();
+        }
+      }}
+    >
+      <form
+        role="group"
+        data-rte-overlay=""
+        aria-label={t('richTextEditor.linkEditorLabel')}
+        onSubmit={(e) => {
+          e.preventDefault();
+          onApply(value.trim());
+        }}
+      >
+        <Stack gap="xs">
+          <Cluster gap="xs">
+            <Input
+              ref={inputRef}
+              size="sm"
+              value={value}
+              onChange={(e) => setValue(e.target.value)}
+              aria-label={t('richTextEditor.linkUrl')}
+              placeholder={t('richTextEditor.linkUrlPlaceholder')}
+            />
+            <Button type="submit" size="sm" variant="primary">
+              {t('richTextEditor.linkApply')}
+            </Button>
+          </Cluster>
+          {editing ? (
+            <Button type="button" size="sm" variant="danger" onClick={onRemove}>
+              {t('richTextEditor.linkRemove')}
+            </Button>
+          ) : null}
+        </Stack>
+      </form>
+    </div>,
+    document.body,
+  );
+}

package/src/components/RichTextEditor/RichTextMentionMenu.tsx

@@ -0,0 +1,99 @@
+// RichTextMentionMenu.tsx — the floating @-mention listbox for <RichTextEditor>.
+// Presentational: the editor (via useMention) owns all state and passes the
+// items + active index + anchor rect; this renders a role="listbox" positioned at
+// the caret rect via a Floating UI virtual element (same portal+virtual-anchor
+// pattern as RichTextLinkEditor). Not exported from the package.
+import { createPortal } from 'react-dom';
+import { useFloatingSurface } from '../_internal/overlay';
+import { Avatar } from '../Avatar';
+import { Text } from '../Text';
+import type { MentionItem } from './mentions';
+import type { Rect } from './selection';
+import { useAnchoredFloating } from './useAnchoredFloating';
+import styles from './RichTextEditor.module.scss';
+
+export interface RichTextMentionMenuProps {
+  items: MentionItem[];
+  activeIndex: number;
+  anchorRect: Rect;
+  /**
+   * Read the caret rect LIVE on each Floating UI `autoUpdate` (scroll/resize) so the
+   * menu tracks the caret. Falls back to the static `anchorRect` when it returns null.
+   */
+  getAnchorRect?: () => Rect | null;
+  listboxId: string;
+  getOptionId: (index: number) => string;
+  /** Accessible name for the listbox. */
+  label: string;
+  /** Shown when there are no candidates. */
+  emptyLabel: string;
+  /** Pick the item at `index`. */
+  onSelect: (index: number) => void;
+  /** Set the active item (pointer hover). */
+  onHover: (index: number) => void;
+}
+
+export function RichTextMentionMenu({
+  items,
+  activeIndex,
+  anchorRect,
+  getAnchorRect,
+  listboxId,
+  getOptionId,
+  label,
+  emptyLabel,
+  onSelect,
+  onHover,
+}: RichTextMentionMenuProps) {
+  // #274: mounted only while open — register as a floating surface so
+  // Modal/Drawer/Lightbox yield Escape to us (our own Escape handling closes
+  // us; without registration one press would close the host too).
+  useFloatingSurface(true);
+  const { refs, floatingStyles } = useAnchoredFloating(anchorRect, getAnchorRect, { offset: 4 });
+
+  return createPortal(
+    <div
+      ref={refs.setFloating}
+      className={styles.mentionMenu}
+      style={floatingStyles}
+      role="listbox"
+      id={listboxId}
+      aria-label={label}
+    >
+      {items.length === 0 ? (
+        <div className={styles.mentionEmpty} aria-disabled="true">
+          <Text size="sm" tone="muted">
+            {emptyLabel}
+          </Text>
+        </div>
+      ) : (
+        items.map((item, i) => (
+          <div
+            key={item.id}
+            id={getOptionId(i)}
+            role="option"
+            aria-selected={i === activeIndex}
+            className={i === activeIndex ? styles.mentionOptionActive : styles.mentionOption}
+            // pointerdown (not click) so the editor doesn't lose its selection first
+            onPointerDown={(e) => {
+              e.preventDefault();
+              onSelect(i);
+            }}
+            onMouseMove={() => onHover(i)}
+          >
+            <Avatar name={item.label} src={item.avatarUrl} size="sm" />
+            <span className={styles.mentionText}>
+              <Text size="sm">{item.label}</Text>
+              {item.description ? (
+                <Text size="xs" tone="muted">
+                  {item.description}
+                </Text>
+              ) : null}
+            </span>
+          </div>
+        ))
+      )}
+    </div>,
+    document.body,
+  );
+}