@eocrm/design-system 0.0.0-stage → 0.6.17

package/src/components/RichTextEditor/RichTextBlockMenu.tsx

@@ -0,0 +1,162 @@
+// RichTextBlockMenu.tsx — internal block actions menu (DropdownMenu wrapper). The
+// `⠿` handle is the trigger; open is controlled by the editor so a keyboard
+// Shift+F10 can open the SAME menu anchored to the active block's handle.
+import { forwardRef, useEffect, useState } from 'react';
+import { Button } from '../Button';
+import { DropdownMenu } from '../DropdownMenu';
+import { useTranslation } from '../../i18n';
+import type { BlockChoice } from './RichTextToolbar';
+import type { BlockType } from '../RichText/engine/model';
+import { RichTextColorMenu } from './RichTextColorMenu';
+import { preventSelectionLoss } from './preventSelectionLoss';
+import { GripIcon } from './icons';
+import styles from './RichTextEditor.module.scss';
+
+export type BlockAction = 'duplicate' | 'moveUp' | 'moveDown' | 'delete';
+
+export interface RichTextBlockMenuProps {
+  /** Controlled open state of the menu. */
+  open: boolean;
+  /** Fired when the menu wants to open/close. */
+  onOpenChange: (open: boolean) => void;
+  /** Fired for the flat actions (duplicate / move / delete). */
+  onAction: (action: BlockAction) => void;
+  /** Fired for a "Turn into" choice. */
+  onTurnInto: (choice: BlockChoice) => void;
+  /** When set, a Configure item appears at the top of the menu (e.g. attachment
+   *  settings). Omit for blocks with nothing to configure. */
+  onConfigure?: () => void;
+  /** When set, two color submenus (Text color + Highlight) for the whole block are added. */
+  onColor?: (type: 'textColor' | 'bgColor', key: string | null) => void;
+  /** Type of the block the menu targets. "Turn into" is hidden for `attachment`
+   *  (a void block — converting an image to a heading is nonsense). */
+  blockType?: BlockType;
+}
+
+/**
+ * Internal: the `⠿` block-actions handle and its menu. The handle is the
+ * DropdownMenu trigger and is `tabIndex={-1}` (not a tab stop — keyboard users
+ * open it via Shift+F10 in the editor). "Turn into" reuses the block-type labels
+ * and is omitted for void attachment blocks.
+ */
+export const RichTextBlockMenu = forwardRef<HTMLButtonElement, RichTextBlockMenuProps>(
+  function RichTextBlockMenu(
+    { open, onOpenChange, onAction, onTurnInto, onConfigure, onColor, blockType },
+    ref,
+  ) {
+    const t = useTranslation();
+    // Which color submenu is open. Controlled so picking a color can collapse the
+    // submenu (back to the still-open main menu) instead of leaving the palette up.
+    const [openColorSub, setOpenColorSub] = useState<'textColor' | 'bgColor' | null>(null);
+    // Reset when the whole menu closes so it doesn't reopen a palette next time.
+    useEffect(() => {
+      if (!open) setOpenColorSub(null);
+    }, [open]);
+    const colorSubProps = (which: 'textColor' | 'bgColor') => ({
+      open: openColorSub === which,
+      onOpenChange: (next: boolean) =>
+        setOpenColorSub((prev) => (next ? which : prev === which ? null : prev)),
+    });
+    return (
+      <DropdownMenu open={open} onOpenChange={onOpenChange}>
+        <DropdownMenu.Trigger>
+          <Button
+            ref={ref}
+            size="sm"
+            variant="ghost"
+            iconOnly
+            tabIndex={-1}
+            aria-label={t('richTextEditor.blockActions')}
+            className={styles.gutterButton}
+            onMouseDown={preventSelectionLoss}
+          >
+            <GripIcon />
+          </Button>
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Content side="bottom" align="start">
+          {onConfigure && (
+            <DropdownMenu.Item onSelect={onConfigure}>
+              {t('richTextEditor.attachmentConfigure')}
+            </DropdownMenu.Item>
+          )}
+          {onColor && (
+            <>
+              <DropdownMenu.Sub {...colorSubProps('textColor')}>
+                <DropdownMenu.SubTrigger>{t('richTextEditor.textColor')}</DropdownMenu.SubTrigger>
+                <DropdownMenu.SubContent>
+                  {/* The block menu doesn't reflect an active color — omit `active`. The
+                      badges are plain buttons (pointer-first), not registered menu items.
+                      Picking one collapses this submenu but leaves the main menu open. */}
+                  <RichTextColorMenu
+                    type="textColor"
+                    onPick={(key) => {
+                      onColor('textColor', key);
+                      setOpenColorSub(null);
+                    }}
+                  />
+                </DropdownMenu.SubContent>
+              </DropdownMenu.Sub>
+              <DropdownMenu.Sub {...colorSubProps('bgColor')}>
+                <DropdownMenu.SubTrigger>{t('richTextEditor.highlight')}</DropdownMenu.SubTrigger>
+                <DropdownMenu.SubContent>
+                  <RichTextColorMenu
+                    type="bgColor"
+                    onPick={(key) => {
+                      onColor('bgColor', key);
+                      setOpenColorSub(null);
+                    }}
+                  />
+                </DropdownMenu.SubContent>
+              </DropdownMenu.Sub>
+            </>
+          )}
+          {blockType !== 'attachment' && (
+            <DropdownMenu.Sub>
+              <DropdownMenu.SubTrigger>{t('richTextEditor.blockTurnInto')}</DropdownMenu.SubTrigger>
+              <DropdownMenu.SubContent>
+                <DropdownMenu.Item onSelect={() => onTurnInto({ type: 'paragraph' })}>
+                  {t('richTextEditor.paragraph')}
+                </DropdownMenu.Item>
+                <DropdownMenu.Item onSelect={() => onTurnInto({ type: 'heading', level: 1 })}>
+                  {t('richTextEditor.heading1')}
+                </DropdownMenu.Item>
+                <DropdownMenu.Item onSelect={() => onTurnInto({ type: 'heading', level: 2 })}>
+                  {t('richTextEditor.heading2')}
+                </DropdownMenu.Item>
+                <DropdownMenu.Item onSelect={() => onTurnInto({ type: 'heading', level: 3 })}>
+                  {t('richTextEditor.heading3')}
+                </DropdownMenu.Item>
+                <DropdownMenu.Item onSelect={() => onTurnInto({ type: 'bullet_item' })}>
+                  {t('richTextEditor.bulletList')}
+                </DropdownMenu.Item>
+                <DropdownMenu.Item onSelect={() => onTurnInto({ type: 'ordered_item' })}>
+                  {t('richTextEditor.orderedList')}
+                </DropdownMenu.Item>
+                <DropdownMenu.Item onSelect={() => onTurnInto({ type: 'blockquote' })}>
+                  {t('richTextEditor.blockquote')}
+                </DropdownMenu.Item>
+                <DropdownMenu.Item onSelect={() => onTurnInto({ type: 'code_block' })}>
+                  {t('richTextEditor.codeBlock')}
+                </DropdownMenu.Item>
+              </DropdownMenu.SubContent>
+            </DropdownMenu.Sub>
+          )}
+          <DropdownMenu.Separator />
+          <DropdownMenu.Item shortcut="⌘D" onSelect={() => onAction('duplicate')}>
+            {t('richTextEditor.blockDuplicate')}
+          </DropdownMenu.Item>
+          <DropdownMenu.Item shortcut="⌘⇧↑" onSelect={() => onAction('moveUp')}>
+            {t('richTextEditor.blockMoveUp')}
+          </DropdownMenu.Item>
+          <DropdownMenu.Item shortcut="⌘⇧↓" onSelect={() => onAction('moveDown')}>
+            {t('richTextEditor.blockMoveDown')}
+          </DropdownMenu.Item>
+          <DropdownMenu.Separator />
+          <DropdownMenu.Item tone="danger" onSelect={() => onAction('delete')}>
+            {t('richTextEditor.blockDelete')}
+          </DropdownMenu.Item>
+        </DropdownMenu.Content>
+      </DropdownMenu>
+    );
+  },
+);

package/src/components/RichTextEditor/RichTextColorMenu.tsx

@@ -0,0 +1,115 @@
+import clsx from 'clsx';
+import { Stack } from '../Stack';
+import { Cluster } from '../Cluster';
+import { useTranslation, type MessageKey } from '../../i18n';
+import { COLOR_KEYS, textColorVar, bgColorVar, type ColorKey } from '../RichText/engine/colorMarks';
+import { preventSelectionLoss } from './preventSelectionLoss';
+import styles from './RichTextEditor.module.scss';
+
+export interface RichTextColorMenuProps {
+  /** Which mark this menu sets. */
+  type: 'textColor' | 'bgColor';
+  /** The active color key for this type (rings the current badge). */
+  active?: string;
+  /** Pick a color key, or null to clear. */
+  onPick: (key: string | null) => void;
+}
+
+// Palette key → i18n key for the badge label. Exhaustive over every ColorKey
+// (gray + the 30-color palette) — TypeScript enforces the Record is total.
+const BADGE_LABEL: Record<ColorKey, MessageKey> = {
+  gray: 'richTextEditor.colorGray',
+  red: 'richTextEditor.colorRed',
+  coral: 'richTextEditor.colorCoral',
+  orange: 'richTextEditor.colorOrange',
+  amber: 'richTextEditor.colorAmber',
+  gold: 'richTextEditor.colorGold',
+  yellow: 'richTextEditor.colorYellow',
+  olive: 'richTextEditor.colorOlive',
+  lime: 'richTextEditor.colorLime',
+  green: 'richTextEditor.colorGreen',
+  emerald: 'richTextEditor.colorEmerald',
+  mint: 'richTextEditor.colorMint',
+  teal: 'richTextEditor.colorTeal',
+  cyan: 'richTextEditor.colorCyan',
+  sky: 'richTextEditor.colorSky',
+  blue: 'richTextEditor.colorBlue',
+  navy: 'richTextEditor.colorNavy',
+  indigo: 'richTextEditor.colorIndigo',
+  violet: 'richTextEditor.colorViolet',
+  lavender: 'richTextEditor.colorLavender',
+  purple: 'richTextEditor.colorPurple',
+  plum: 'richTextEditor.colorPlum',
+  fuchsia: 'richTextEditor.colorFuchsia',
+  magenta: 'richTextEditor.colorMagenta',
+  pink: 'richTextEditor.colorPink',
+  rose: 'richTextEditor.colorRose',
+  brown: 'richTextEditor.colorBrown',
+  taupe: 'richTextEditor.colorTaupe',
+  slate: 'richTextEditor.colorSlate',
+  stone: 'richTextEditor.colorStone',
+  charcoal: 'richTextEditor.colorCharcoal',
+};
+
+/**
+ * Internal, presentational color picker for ONE mark type (`textColor` OR
+ * `bgColor`). Renders a leading Default/clear badge followed by one named badge
+ * per palette key — each badge styled like the Palette demo chip (subtle bg fill
+ * + strong fg text, both dynamic token `var()`s). Owns no state: the parent
+ * passes the `active` key (to ring the current badge) and an `onPick` dispatcher.
+ *
+ * Every badge is `onMouseDown`-prevented so picking a color never steals the
+ * editor's DOM selection. Not exported from the package index — it's wired into
+ * the toolbar's Text-color / Highlight popovers and the block menu's submenus.
+ *
+ * @example
+ * <RichTextColorMenu type="textColor" active="red" onPick={(key) => …} />
+ */
+export function RichTextColorMenu({ type, active, onPick }: RichTextColorMenuProps) {
+  const t = useTranslation();
+  // The group's accessible name doubles as the menu's heading: textColor → "Text
+  // color", bgColor → "Highlight". Lets AT distinguish the two color menus.
+  const label = t(type === 'textColor' ? 'richTextEditor.textColor' : 'richTextEditor.highlight');
+  const clearLabel = t('richTextEditor.colorClear');
+
+  return (
+    // role=group + aria-label so AT can tell the Text-color menu apart from the
+    // Highlight menu — both render the same "Red"/"Default" badge names.
+    <Stack gap="xs" className={styles.colorMenu} role="group" aria-label={label}>
+      <Cluster gap="xs" wrap>
+        <button
+          type="button"
+          className={clsx(styles.colorBadge, styles.colorBadgeClear)}
+          aria-label={clearLabel}
+          title={clearLabel}
+          // "Default" is the pressed state when no color of this type is active.
+          aria-pressed={!active}
+          onMouseDown={preventSelectionLoss}
+          onClick={() => onPick(null)}
+        >
+          {clearLabel}
+        </button>
+        {COLOR_KEYS.map((key) => {
+          const name = t(BADGE_LABEL[key]);
+          return (
+            <button
+              key={key}
+              type="button"
+              className={clsx(styles.colorBadge, active === key && styles.colorBadgeActive)}
+              // The Palette-demo chip look: subtle bg fill + strong fg text. Both
+              // are dynamic token var()s (like renderDoc), never raw colors.
+              style={{ background: bgColorVar(key), color: textColorVar(key) }}
+              aria-label={name}
+              title={name}
+              aria-pressed={active === key}
+              onMouseDown={preventSelectionLoss}
+              onClick={() => onPick(key)}
+            >
+              {name}
+            </button>
+          );
+        })}
+      </Cluster>
+    </Stack>
+  );
+}

package/src/components/RichTextEditor/RichTextEditor.module.scss

@@ -0,0 +1,298 @@
+@use '../../styles/mixins' as *;
+@use '../RichText/prose';
+
+.root {
+  @include prose.prose;
+
+  position: relative; // anchors the empty-state placeholder ::before
+  min-height: var(--size-lg);
+  padding: var(--space-2);
+  border: var(--border-width) solid var(--color-border);
+  border-radius: var(--radius-md);
+  background: var(--color-bg);
+  outline: none;
+  cursor: text;
+  white-space: pre-wrap;
+}
+
+.root:focus-visible {
+  border-color: var(--color-accent);
+
+  @include focus-ring(var(--ring-accent));
+}
+
+.root[data-empty]::before {
+  content: attr(data-placeholder);
+  position: absolute;
+  color: var(--color-fg-subtle);
+  pointer-events: none;
+}
+
+.root.readOnly {
+  cursor: default;
+  background: var(--color-bg-muted);
+}
+
+// #511: readOnly and placeholder are independent props (e.g. a read-only
+// notes field with no content), so the empty-state placeholder above can
+// land on readOnly's --color-bg-muted, where --color-fg-subtle fails AA.
+// Scoped to the combination rather than retuning the base rule, which stays
+// --color-fg-subtle on the certified --color-bg for the ordinary editable
+// empty case.
+// @contrast --color-fg-muted on --color-bg-muted = 5.10:1 light
+// @contrast --color-fg-muted on --color-bg-muted = 5.60:1 dark
+.root.readOnly[data-empty]::before {
+  color: var(--color-fg-muted);
+}
+
+// The component's own internal wrapper when `toolbar` and/or `blockControls` is
+// set: stacks the toolbar above the editable surface as one bordered control and
+// anchors the absolutely-positioned block gutter (`.gutter`).
+.shell {
+  position: relative; // anchor for the block-controls gutter overlay
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+// When block controls are on, reserve a left column on the editable so the gutter
+// (＋ / ⠿) sits beside the text instead of overlapping it. The gutter holds two
+// ~24px (--size-sm) icon buttons plus gaps (~52px total), so the reservation must
+// clear that. Only applied via the `withGutter` modifier, so editors without block
+// controls are unaffected.
+.root.withGutter {
+  padding-inline-start: var(--space-16);
+}
+
+// The per-block gutter overlay (RichTextBlockControls). Absolutely positioned
+// inside `.shell`; its vertical `top` is set inline by JS from the active block's
+// measured box. `left`/`position` here are the overlay's own anchoring, not
+// in-flow component layout (cf. the Rule 4 notes on `.linkBubble`/`.mentionMenu`).
+.gutter {
+  position: absolute;
+  inset-inline-start: var(--space-05);
+  display: flex;
+  gap: var(--space-05);
+  align-items: center; // vertically centre the buttons within the full-row-height strip
+  cursor: grab;
+}
+
+.gutter:active {
+  cursor: grabbing;
+}
+
+.gutterButton {
+  color: var(--color-fg-muted);
+}
+
+// The image resize handle (RichTextImageResizer): a small square on the active
+// image's bottom-right corner. Absolutely positioned in the shell; its top/left are
+// set inline by JS from the image's measured corner, and `transform` centres it on
+// that corner. A fixed-size square via `height` + `aspect-ratio` (so no `width` —
+// Rule 4), the same "overlay's own intrinsic size" carve-out as the popovers.
+.resizeHandle {
+  position: absolute;
+  height: var(--space-3);
+  aspect-ratio: 1;
+  transform: translate(-50%, -50%);
+  background: var(--color-accent);
+  border: var(--border-width) solid var(--color-bg);
+  border-radius: var(--radius-sm);
+  cursor: nwse-resize;
+  z-index: 1;
+  touch-action: none; // claim touch drags so the page doesn't scroll instead
+}
+
+.toolbar {
+  display: flex;
+  align-items: center;
+  gap: var(--space-1);
+  flex-wrap: wrap;
+  padding: var(--space-1) var(--space-2);
+  border: var(--border-width) solid var(--color-border);
+  border-bottom: 0;
+  border-start-start-radius: var(--radius-md);
+  border-start-end-radius: var(--radius-md);
+  background: var(--color-bg-muted);
+}
+
+// A 1px vertical rule between toolbar groups, drawn as a left border so it
+// carries no explicit width (Rule 4 forbids non-100%/auto widths). A fixed
+// height (not `align-self: stretch`, also Rule-4-disallowed) sizes it to roughly
+// the small-button height.
+.toolbarSep {
+  height: var(--size-sm);
+  border-inline-start: var(--border-width) solid var(--color-border);
+}
+
+// Color menu (toolbar Text-color/Highlight popovers + block menu submenus): a
+// single-type badge grid — a leading Default/clear badge then one named chip per
+// palette key. Badge wrapping/gaps come from the Cluster it renders into; this
+// only styles padding + the overall cap. The max-width caps the wrapping grid so
+// the full palette lands on ~4-5 columns instead of one very wide line.
+.colorMenu {
+  padding: var(--space-1);
+  max-width: var(--measure-sm);
+}
+
+// A named color chip — the Palette-demo look. The bg fill + fg text come from an
+// inline `style` (dynamic token var()s); this is the base chrome. No `width`
+// (Rule 4) — the chip sizes to its label.
+.colorBadge {
+  padding: var(--space-05) var(--space-1);
+  border: var(--border-width) solid transparent;
+  border-radius: var(--radius-sm);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  cursor: pointer;
+}
+
+// The active chip gets a ring (same tokens as the editor's focus ring) so the
+// current color reads at a glance.
+// DECORATIVE, so box-shadow rather than the focus-ring mixin (#505). `.colorBadge`
+// has no :focus-visible rule of its own and relies on the UA outline; an
+// author-origin `outline` here would beat that outline by cascade origin, and
+// the active chip would show no distinguishable focus indicator at all when
+// tabbed to (WCAG 2.4.7). A box-shadow leaves the UA outline free to draw.
+.colorBadgeActive {
+  box-shadow: 0 0 0 var(--ring-width) var(--ring-accent);
+}
+
+// The Default/clear chip: a neutral surface (no palette fill) reading as
+// "no color / default" rather than a real palette color.
+.colorBadgeClear {
+  background: var(--color-bg);
+  color: var(--color-fg-muted);
+  border-color: var(--color-border);
+}
+
+// Square the editable surface's top corners so it tucks under the toolbar.
+.shell .root {
+  border-start-start-radius: 0;
+  border-start-end-radius: 0;
+}
+
+// The floating link-edit bubble (RichTextLinkEditor). A portaled overlay
+// positioned by Floating UI's inline `floatingStyles` (so `position`/offsets are
+// NOT set here). `min-width` is the established sizing convention for floating
+// overlays (cf. LiquidEditor's `.menu`), not page layout — Rule 4 targets
+// in-flow component layout, not a portaled popover's intrinsic size.
+.linkBubble {
+  z-index: var(--z-overlay-floating);
+  min-width: var(--size-dropdown-min-width);
+  padding: var(--space-2);
+  border: var(--border-width) solid var(--color-border);
+  border-radius: var(--radius-md);
+  background: var(--color-bg);
+  box-shadow: var(--shadow-lg);
+}
+
+// The floating @-mention listbox (RichTextMentionMenu). Portaled to <body> and
+// positioned by Floating UI's inline `floatingStyles`. Same Rule 4 note as
+// .linkBubble applies: min/max sizing here describes the overlay's intrinsic
+// size, not in-flow layout.
+.mentionMenu {
+  display: flex;
+  flex-direction: column;
+  min-width: var(--size-dropdown-min-width);
+  max-width: var(--size-popover-max-width);
+  max-height: var(--size-listbox-max-height);
+  overflow-y: auto;
+  padding: var(--space-1);
+  background: var(--color-bg);
+  border: var(--border-width) solid var(--color-border);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-md);
+  z-index: var(--z-overlay-floating);
+}
+
+.mentionOption,
+.mentionOptionActive {
+  display: flex;
+  gap: var(--space-2);
+  align-items: center;
+  padding: var(--space-1) var(--space-2);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+}
+
+.mentionOptionActive {
+  background: var(--color-bg-muted);
+}
+
+.mentionText {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.mentionEmpty {
+  padding: var(--space-2);
+}
+
+// Attachment blocks (RichTextAttachment): the void <figure> wrapper + its loading/
+// error/chip bodies. `margin: 0` resets the UA <figure> default (a reset, not
+// component layout). Tokens only.
+.root figure[data-attachment],
+.shell figure[data-attachment] {
+  // stylelint-disable-next-line property-disallowed-list -- reset UA <figure> default margin; internal
+  margin: 0;
+}
+
+// The floating attachment-config popover (RichTextAttachmentConfig). Portaled to
+// <body> and positioned by Floating UI's inline `floatingStyles` (so
+// `position`/offsets are NOT set here). Same Rule 4 note as `.linkBubble`:
+// `min-width` describes the overlay's intrinsic size, not in-flow page layout.
+.configPopover {
+  z-index: var(--z-overlay-floating);
+  min-width: var(--size-dropdown-min-width);
+  padding: var(--space-2);
+  border: var(--border-width) solid var(--color-border);
+  border-radius: var(--radius-md);
+  background: var(--color-bg);
+  box-shadow: var(--shadow-lg);
+}
+
+.configRow {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+}
+
+.configLabel {
+  font-size: var(--font-size-sm);
+  color: var(--color-fg-muted);
+}
+
+.configLink {
+  font-size: var(--font-size-sm);
+  color: var(--color-accent);
+}
+
+// In-place sortable reflow (block drag). `.reflowing` is toggled on the shell during
+// a drag; block boxes get a transient inline translateY (set by JS) and slide via
+// this transition to open the dragged row's slot. The lifted row itself follows the
+// pointer 1:1, so it opts out of the transition.
+.reflowing [data-block-id]:not(.blockLifted) {
+  transition: transform var(--transition-base);
+}
+
+// The grabbed row while dragging: it follows the pointer in place. No card
+// elevation (border/shadow) — it should read as the same line simply moving, not a
+// detached card. `position: relative` is the stacking context for z-index (Rule 4
+// allows relative for an internal stacking/anchor purpose), not page layout; the
+// raised z-index + opaque background keep it cleanly on top of any row it briefly
+// overlaps before the others slide apart.
+.blockLifted {
+  position: relative;
+  z-index: 1;
+  background: var(--color-bg);
+  cursor: grabbing;
+  transition: none; // track the pointer with no lag
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .reflowing [data-block-id] {
+    transition: none;
+  }
+}