@eocrm/design-system 0.0.0-stage → 0.6.18

package/src/components/RichTextEditor/RichTextToolbar.tsx

@@ -0,0 +1,379 @@
+import { memo, useRef, type ReactElement } from 'react';
+import type { BlockType, MarkType } from '../RichText/engine/model';
+import { Button } from '../Button';
+import { DropdownMenu } from '../DropdownMenu';
+import { EmojiPickerPopover } from '../EmojiPicker';
+import { Popover } from '../Popover';
+import { useTranslation } from '../../i18n';
+import { RichTextColorMenu } from './RichTextColorMenu';
+import { preventSelectionLoss } from './preventSelectionLoss';
+import type { ActiveColors } from './commands';
+import {
+  BoldIcon,
+  ItalicIcon,
+  UnderlineIcon,
+  StrikeIcon,
+  BulletListIcon,
+  OrderedListIcon,
+  LinkIcon,
+  UndoIcon,
+  RedoIcon,
+  AttachFileIcon,
+  SmileIcon,
+  TextColorIcon,
+  HighlightIcon,
+} from './icons';
+import styles from './RichTextEditor.module.scss';
+
+/** The block type (+ optional heading level) the toolbar reflects/selects. */
+export type BlockChoice = { type: BlockType; level?: 1 | 2 | 3 };
+
+export interface RichTextToolbarProps {
+  /** Mark types active across the current selection (drives the pressed state). */
+  activeMarks: MarkType[];
+  /** Active color key per type, to ring the current badge in the color menu. */
+  colors: ActiveColors;
+  /** Set a text/highlight color (palette key) — or clear (`null`) — for the selection. */
+  onSetColor: (type: 'textColor' | 'bgColor', key: string | null) => void;
+  /** The block type spanning the selection, or `null` when it's mixed. */
+  block: BlockChoice | null;
+  /** Disable every control (e.g. when the editor is read-only). */
+  disabled?: boolean;
+  /** Toggle a mark over the current selection. */
+  onToggleMark: (type: MarkType) => void;
+  /** Set the block type of every block in the selection. */
+  onSetBlock: (choice: BlockChoice) => void;
+  /** Toggle the selected blocks into/out of a bullet or numbered list. */
+  onToggleList: (listType: 'bullet_item' | 'ordered_item') => void;
+  /** Whether the current selection sits inside a link (drives the Link button's pressed state). */
+  linkActive?: boolean;
+  /** Open the link editor for the current selection. */
+  onOpenLink: () => void;
+  /** Whether an undo step is available (drives the Undo button's enabled state). */
+  canUndo?: boolean;
+  /** Whether a redo step is available. */
+  canRedo?: boolean;
+  /** Undo the last change. */
+  onUndo: () => void;
+  /** Redo the last undone change. */
+  onRedo: () => void;
+  /**
+   * When set, renders an upload button that opens the editor's file picker. The
+   * `<input type="file">` itself lives in the EDITOR, not here: this bar unmounts
+   * on blur under `toolbar="auto"`, which would detach a pending picker's input
+   * and silently drop the user's pick.
+   */
+  onPickFiles?: () => void;
+  /**
+   * Fired with `true` while ANY of this bar's own popovers (block type, emoji,
+   * text/highlight color) is open. `toolbar="auto"` unmounts the bar when the
+   * editable blurs — and every one of those popovers blurs it by opening, which
+   * destroyed the popover along with the bar. The editor keeps the bar mounted
+   * while this is true.
+   */
+  onOverlayOpenChange?: (open: boolean) => void;
+  /** Insert an emoji at the caret. */
+  onInsertEmoji: (emoji: string) => void;
+}
+
+const MARKS: {
+  type: MarkType;
+  Icon: () => ReactElement;
+  key: 'bold' | 'italic' | 'underline' | 'strike';
+}[] = [
+  { type: 'bold', Icon: BoldIcon, key: 'bold' },
+  { type: 'italic', Icon: ItalicIcon, key: 'italic' },
+  { type: 'underline', Icon: UnderlineIcon, key: 'underline' },
+  { type: 'strike', Icon: StrikeIcon, key: 'strike' },
+];
+
+/**
+ * Internal presentational toolbar for `<RichTextEditor toolbar>`. It owns no
+ * state: the editor derives the active marks + current block from its selection
+ * and passes them down, and routes the dispatch callbacks back through the same
+ * commit path the keyboard uses. Renders a block-type dropdown, mark toggle
+ * buttons, and list toggles inside a `role="toolbar"` container.
+ *
+ * @example
+ * <RichTextToolbar
+ *   activeMarks={['bold']}
+ *   block={{ type: 'heading', level: 2 }}
+ *   onToggleMark={(type) => …}
+ *   onSetBlock={(choice) => …}
+ *   onToggleList={(listType) => …}
+ * />
+ */
+function RichTextToolbarImpl({
+  activeMarks,
+  colors,
+  onSetColor,
+  block,
+  disabled,
+  onToggleMark,
+  onSetBlock,
+  onToggleList,
+  linkActive = false,
+  onOpenLink,
+  canUndo = false,
+  canRedo = false,
+  onUndo,
+  onRedo,
+  onPickFiles,
+  onOverlayOpenChange,
+  onInsertEmoji,
+}: RichTextToolbarProps) {
+  const t = useTranslation();
+
+  // Aggregate the open state of every popover in this bar into the single flag
+  // the editor reads. Tracked as a set, not a counter, so a popover reporting
+  // the same state twice can't leave the bar pinned open. Each popover stays
+  // UNCONTROLLED — `onOpenChange` fires alongside its own state, so this only
+  // observes. Any popover added here must register the same way; the
+  // "keeps the bar mounted" test iterates all of them.
+  const openPopovers = useRef(new Set<string>());
+  const trackOpen = (key: string) => (open: boolean) => {
+    const set = openPopovers.current;
+    if (open) set.add(key);
+    else set.delete(key);
+    onOverlayOpenChange?.(set.size > 0);
+  };
+
+  const blockLabel = (() => {
+    if (!block) return t('richTextEditor.mixed');
+    switch (block.type) {
+      case 'heading':
+        return t(`richTextEditor.heading${block.level ?? 1}` as 'richTextEditor.heading1');
+      case 'blockquote':
+        return t('richTextEditor.blockquote');
+      case 'code_block':
+        return t('richTextEditor.codeBlock');
+      case 'bullet_item':
+      case 'ordered_item':
+      case 'paragraph':
+      default:
+        return t('richTextEditor.paragraph');
+    }
+  })();
+
+  const isList = (lt: 'bullet_item' | 'ordered_item') => block?.type === lt;
+
+  return (
+    <div className={styles.toolbar} role="toolbar" aria-label={t('richTextEditor.toolbar')}>
+      <Button
+        size="sm"
+        variant="ghost"
+        iconOnly
+        aria-label={t('richTextEditor.undo')}
+        disabled={disabled || !canUndo}
+        // preventSelectionLoss (see its JSDoc) keeps the editor's DOM selection
+        // live across the click for every toolbar control below.
+        onMouseDown={preventSelectionLoss}
+        onClick={onUndo}
+      >
+        <UndoIcon />
+      </Button>
+      <Button
+        size="sm"
+        variant="ghost"
+        iconOnly
+        aria-label={t('richTextEditor.redo')}
+        disabled={disabled || !canRedo}
+        onMouseDown={preventSelectionLoss}
+        onClick={onRedo}
+      >
+        <RedoIcon />
+      </Button>
+      <span className={styles.toolbarSep} aria-hidden="true" />
+      <DropdownMenu onOpenChange={trackOpen('blockType')}>
+        <DropdownMenu.Trigger>
+          <Button
+            size="sm"
+            variant="ghost"
+            disabled={disabled}
+            aria-label={t('richTextEditor.blockType')}
+          >
+            {blockLabel}
+          </Button>
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Content>
+          <DropdownMenu.Item onSelect={() => onSetBlock({ type: 'paragraph' })}>
+            {t('richTextEditor.paragraph')}
+          </DropdownMenu.Item>
+          <DropdownMenu.Item onSelect={() => onSetBlock({ type: 'heading', level: 1 })}>
+            {t('richTextEditor.heading1')}
+          </DropdownMenu.Item>
+          <DropdownMenu.Item onSelect={() => onSetBlock({ type: 'heading', level: 2 })}>
+            {t('richTextEditor.heading2')}
+          </DropdownMenu.Item>
+          <DropdownMenu.Item onSelect={() => onSetBlock({ type: 'heading', level: 3 })}>
+            {t('richTextEditor.heading3')}
+          </DropdownMenu.Item>
+          <DropdownMenu.Item onSelect={() => onSetBlock({ type: 'blockquote' })}>
+            {t('richTextEditor.blockquote')}
+          </DropdownMenu.Item>
+          <DropdownMenu.Item onSelect={() => onSetBlock({ type: 'code_block' })}>
+            {t('richTextEditor.codeBlock')}
+          </DropdownMenu.Item>
+        </DropdownMenu.Content>
+      </DropdownMenu>
+
+      <span className={styles.toolbarSep} aria-hidden="true" />
+
+      {MARKS.map(({ type, Icon, key }) => {
+        const active = activeMarks.includes(type);
+        return (
+          <Button
+            key={type}
+            size="sm"
+            variant={active ? 'secondary' : 'ghost'}
+            iconOnly
+            aria-label={t(`richTextEditor.${key}`)}
+            aria-pressed={active}
+            disabled={disabled}
+            onMouseDown={preventSelectionLoss}
+            onClick={() => onToggleMark(type)}
+          >
+            <Icon />
+          </Button>
+        );
+      })}
+
+      <Button
+        size="sm"
+        variant={linkActive ? 'secondary' : 'ghost'}
+        iconOnly
+        aria-label={t('richTextEditor.link')}
+        aria-pressed={linkActive}
+        disabled={disabled}
+        onMouseDown={preventSelectionLoss}
+        onClick={onOpenLink}
+      >
+        <LinkIcon />
+      </Button>
+
+      <EmojiPickerPopover
+        trigger={
+          <Button
+            size="sm"
+            variant="ghost"
+            iconOnly
+            aria-label={t('richTextEditor.emoji')}
+            disabled={disabled}
+            onMouseDown={preventSelectionLoss}
+          >
+            <SmileIcon />
+          </Button>
+        }
+        onSelect={onInsertEmoji}
+        onOpenChange={trackOpen('emoji')}
+      />
+
+      <Popover onOpenChange={trackOpen('textColor')}>
+        <Popover.Trigger>
+          <Button
+            size="sm"
+            variant="ghost"
+            iconOnly
+            aria-label={t('richTextEditor.textColor')}
+            disabled={disabled}
+            onMouseDown={preventSelectionLoss}
+          >
+            <TextColorIcon />
+          </Button>
+        </Popover.Trigger>
+        <Popover.Content>
+          <RichTextColorMenu
+            type="textColor"
+            active={colors.textColor}
+            onPick={(key) => onSetColor('textColor', key)}
+          />
+        </Popover.Content>
+      </Popover>
+
+      <Popover onOpenChange={trackOpen('bgColor')}>
+        <Popover.Trigger>
+          <Button
+            size="sm"
+            variant="ghost"
+            iconOnly
+            aria-label={t('richTextEditor.highlight')}
+            disabled={disabled}
+            onMouseDown={preventSelectionLoss}
+          >
+            <HighlightIcon />
+          </Button>
+        </Popover.Trigger>
+        <Popover.Content>
+          <RichTextColorMenu
+            type="bgColor"
+            active={colors.bgColor}
+            onPick={(key) => onSetColor('bgColor', key)}
+          />
+        </Popover.Content>
+      </Popover>
+
+      <span className={styles.toolbarSep} aria-hidden="true" />
+
+      <Button
+        size="sm"
+        variant={isList('bullet_item') ? 'secondary' : 'ghost'}
+        iconOnly
+        aria-label={t('richTextEditor.bulletList')}
+        aria-pressed={isList('bullet_item')}
+        disabled={disabled}
+        onMouseDown={preventSelectionLoss}
+        onClick={() => onToggleList('bullet_item')}
+      >
+        <BulletListIcon />
+      </Button>
+      <Button
+        size="sm"
+        variant={isList('ordered_item') ? 'secondary' : 'ghost'}
+        iconOnly
+        aria-label={t('richTextEditor.orderedList')}
+        aria-pressed={isList('ordered_item')}
+        disabled={disabled}
+        onMouseDown={preventSelectionLoss}
+        onClick={() => onToggleList('ordered_item')}
+      >
+        <OrderedListIcon />
+      </Button>
+
+      {onPickFiles && (
+        <>
+          <span className={styles.toolbarSep} aria-hidden="true" />
+          <Button
+            size="sm"
+            variant="ghost"
+            iconOnly
+            aria-label={t('richTextEditor.upload')}
+            disabled={disabled}
+            onMouseDown={preventSelectionLoss}
+            onClick={onPickFiles}
+          >
+            <AttachFileIcon />
+          </Button>
+        </>
+      )}
+    </div>
+  );
+}
+
+// The editor re-derives `activeMarks` / `colors` / `block` on every keystroke, so
+// they arrive as fresh objects with identical content. Compare those three by
+// value and everything else by identity, so typing doesn't re-render the bar.
+function sameToolbarProps(a: RichTextToolbarProps, b: RichTextToolbarProps): boolean {
+  for (const key of Object.keys({ ...a, ...b }) as (keyof RichTextToolbarProps)[]) {
+    if (key === 'activeMarks') {
+      if (a.activeMarks.join() !== b.activeMarks.join()) return false;
+    } else if (key === 'colors') {
+      if (a.colors.textColor !== b.colors.textColor || a.colors.bgColor !== b.colors.bgColor)
+        return false;
+    } else if (key === 'block') {
+      if (a.block?.type !== b.block?.type || a.block?.level !== b.block?.level) return false;
+    } else if (a[key] !== b[key]) return false;
+  }
+  return true;
+}
+
+export const RichTextToolbar = memo(RichTextToolbarImpl, sameToolbarProps);

package/src/components/RichTextEditor/autolinkInput.ts

@@ -0,0 +1,65 @@
+// autolinkInput.ts — pure helpers the editor's beforeinput handler uses for
+// autolink-on-type and atomic deletion of a resolved-link run. No DOM, no React.
+import type { RichDoc, Range, Point } from '../RichText/engine/model';
+import { findBlockIndex } from '../RichText/engine/position';
+import { runsText } from '../RichText/engine/inlines';
+import { insertText } from '../RichText/engine/transforms';
+import { linkAt, setLink } from './links';
+import { findUrl } from '../RichText/engine/autolink';
+
+/**
+ * When typing `boundary` (e.g. `' '`) at a collapsed caret, link the URL that
+ * ends at the caret AND insert the boundary char — returning the combined
+ * `{ doc, selection }` (caret after the boundary), or `null` when there's no URL
+ * to link or the caret already sits in a link. The boundary char is inserted
+ * BEFORE the link is applied, so it is never swept into the `<a>` (the URL run is
+ * linked over `[start, end]`, excluding the boundary at `end`).
+ */
+export function applyTypeAutolink(
+  doc: RichDoc,
+  caret: Point,
+  boundary: string,
+): { doc: RichDoc; selection: Range } | null {
+  const idx = findBlockIndex(doc, caret.blockId);
+  if (idx === -1) return null;
+  const text = runsText(doc.blocks[idx].inlines).slice(0, caret.offset);
+  const found = findUrl(text);
+  if (!found) return null;
+  // Already linked? (caret inside/after an existing link) → skip.
+  if (linkAt(doc, caret)) return null;
+  // Insert the boundary first (so it carries no link mark), then link only the URL.
+  const inserted = insertText(doc, caret, boundary);
+  const range: Range = {
+    anchor: { blockId: caret.blockId, offset: found.start },
+    focus: { blockId: caret.blockId, offset: found.end },
+  };
+  const linked = setLink(inserted.doc, range, found.href);
+  const after: Point = { blockId: caret.blockId, offset: caret.offset + boundary.length };
+  return { doc: linked.doc, selection: { anchor: after, focus: after } };
+}
+
+/**
+ * If the collapsed caret sits immediately AFTER (`backward`) or BEFORE
+ * (`forward`) a link run that `isResolved(href)` accepts, return the whole-run
+ * range to delete atomically, else `null`. Only fires at the run's exact edge so
+ * a delete inside an editable plain link still removes one character.
+ */
+export function atomicLinkDeleteRange(
+  doc: RichDoc,
+  caret: Point,
+  dir: 'backward' | 'forward',
+  isResolved: (href: string) => boolean,
+): Range | null {
+  if (dir === 'backward') {
+    if (caret.offset <= 0) return null;
+    // Probe the char BEFORE the caret so we pick the link ENDING at the caret
+    // (not a different link starting there, when two are adjacent).
+    const at = linkAt(doc, { blockId: caret.blockId, offset: caret.offset - 1 });
+    if (at && isResolved(at.href) && at.range.focus.offset === caret.offset) return at.range;
+    return null;
+  }
+  // forward: the char AT the caret belongs to the link starting there.
+  const at = linkAt(doc, { blockId: caret.blockId, offset: caret.offset });
+  if (at && isResolved(at.href) && at.range.anchor.offset === caret.offset) return at.range;
+  return null;
+}

package/src/components/RichTextEditor/blockDrop.ts

@@ -0,0 +1,9 @@
+// blockDrop.ts — pure geometry for block drag-to-reorder. Maps a pointer Y to the
+// "gap" index (0..n) where a dropped block should land, by comparing against each
+// block box's vertical midpoint.
+export function gapIndexFromY(rects: { top: number; height: number }[], y: number): number {
+  for (let i = 0; i < rects.length; i += 1) {
+    if (y < rects[i].top + rects[i].height / 2) return i;
+  }
+  return rects.length;
+}

package/src/components/RichTextEditor/blockReflow.ts

@@ -0,0 +1,62 @@
+// blockReflow.ts — pure geometry for the in-place sortable reflow of block drag.
+// From a measure-once snapshot of the block boxes + the pointer, it computes how
+// far the grabbed unit lifts (clamped to the container), where it will drop (the
+// gap handed to moveBlockUnitToIndex), and the translateY each box needs so the
+// neighbours slide apart to open the slot. No DOM access — unit-testable.
+import { gapIndexFromY } from './blockDrop';
+
+/** A block box's vertical geometry, relative to the editor shell. */
+export interface BlockRect {
+  top: number;
+  height: number;
+}
+
+/** Inclusive box-index range of the dragged unit (a block + any nested subtree). */
+export interface UnitRange {
+  u0: number;
+  u1: number;
+}
+
+export interface Reflow {
+  /** translateY for the grabbed unit (pointer-following, clamped to the editor). */
+  liftDy: number;
+  /** Drop gap (0..N) in the full block array — fed to moveBlockUnitToIndex. */
+  gap: number;
+  /** translateY per box (same order as `rects`): the unit gets liftDy; neighbours
+   *  between the unit and the drop gap shift by ±unitHeight; others 0. */
+  shifts: number[];
+}
+
+const clamp = (v: number, lo: number, hi: number) => Math.max(lo, Math.min(hi, v));
+
+/**
+ * @param rects    box geometry snapshot (untransformed), in document order
+ * @param unit     inclusive box-index range of the grabbed unit
+ * @param rawDy    pointer delta Y since drag start (drives the lift)
+ * @param pointerY pointer Y relative to the shell (drives the drop gap)
+ */
+export function computeReflow(
+  rects: BlockRect[],
+  unit: UnitRange,
+  rawDy: number,
+  pointerY: number,
+): Reflow {
+  const n = rects.length;
+  if (n === 0) return { liftDy: 0, gap: 0, shifts: [] };
+
+  const bottom = (i: number) => rects[i].top + rects[i].height;
+  const unitHeight = bottom(unit.u1) - rects[unit.u0].top;
+  const minDy = rects[0].top - rects[unit.u0].top; // unit can rise until its top hits row 0's top
+  const maxDy = bottom(n - 1) - bottom(unit.u1); // ...or fall until its bottom hits the last row's bottom
+  const liftDy = clamp(rawDy, minDy, maxDy);
+  const gap = gapIndexFromY(rects, pointerY);
+
+  const shifts = rects.map((_, i) => {
+    if (i >= unit.u0 && i <= unit.u1) return liftDy; // the lifted unit travels with the pointer
+    if (gap <= unit.u0 && i >= gap && i < unit.u0) return unitHeight; // opening a slot ABOVE → push down
+    if (gap >= unit.u1 + 1 && i > unit.u1 && i <= gap - 1) return -unitHeight; // slot BELOW → push up
+    return 0;
+  });
+
+  return { liftDy, gap, shifts };
+}