@scalepad/ui 0.1.0

package/src/components/SlashRichTextEditor/SlashCommandMenu.tsx

@@ -0,0 +1,168 @@
+import { Fragment, useEffect, useMemo, useRef, type MouseEvent } from 'react';
+
+import * as classes from './SlashCommandMenu.css';
+import { UnstyledButton } from '../../mantine';
+import { FormattingToolbar } from '../RichText/FormattingToolbar';
+import { Text } from '../Typography';
+
+import type { SlashCommand } from './types';
+import type { FormattingToolbarCommand } from '../RichText/formattingTypes';
+import type { Editor, Range } from '@tiptap/react';
+
+export interface SlashCommandMenuProps {
+  editor: Editor;
+  /**
+   * Range of the `/<query>` token. Toolbar buttons delete this before applying
+   * formatting, and field commands receive it on `run()`.
+   */
+  range: Range;
+  /** Active query (text after the slash). */
+  query: string;
+  /** Filtered, group-bucketed field commands. */
+  commands: SlashCommand[];
+  /** Toolbar formatting commands. */
+  toolbarCommands: FormattingToolbarCommand[];
+  /** Highlighted index into the visible list. */
+  highlightedIndex: number;
+  onHighlightChange: (index: number) => void;
+  /** Selected via keyboard or click — runs the command and closes the menu. */
+  onSelect: (command: SlashCommand) => void;
+  /**
+   * Notifies the parent of the visible field-command list so keyboard nav
+   * (which is bubbled from the editor, not from focusable buttons) knows
+   * how big the list is.
+   */
+  onVisibleCommandsChange: (commandIds: string[]) => void;
+  ariaLabel?: string;
+}
+
+/**
+ * The popup that opens after the user types `/`. Layout follows the
+ * Option B Figma frame: slim icon toolbar header → hint row → grouped
+ * command list.
+ */
+export function SlashCommandMenu({
+  editor,
+  range,
+  query,
+  commands,
+  toolbarCommands,
+  highlightedIndex,
+  onHighlightChange,
+  onSelect,
+  onVisibleCommandsChange,
+  ariaLabel = 'Slash menu',
+}: SlashCommandMenuProps) {
+  const lastIdsRef = useRef<string[]>([]);
+  useEffect(() => {
+    const ids = commands.map(c => c.id);
+    const prev = lastIdsRef.current;
+    const sameLength = prev.length === ids.length;
+    const allMatch = sameLength && ids.every((id, i) => prev[i] === id);
+    if (!allMatch) {
+      lastIdsRef.current = ids;
+      onVisibleCommandsChange(ids);
+    }
+  }, [commands, onVisibleCommandsChange]);
+
+  const showToolbar = toolbarCommands.length > 0;
+  const showHint = showToolbar && query.trim().length === 0;
+
+  // Bucket the command list by `group` so we can render section headers.
+  const grouped = useMemo(() => {
+    const buckets: Array<{ group: string; items: SlashCommand[] }> = [];
+    const indexByGroup = new Map<string, number>();
+    for (const cmd of commands) {
+      let bucketIdx = indexByGroup.get(cmd.group);
+      if (bucketIdx == null) {
+        bucketIdx = buckets.length;
+        indexByGroup.set(cmd.group, bucketIdx);
+        buckets.push({ group: cmd.group, items: [] });
+      }
+      buckets[bucketIdx].items.push(cmd);
+    }
+    return buckets;
+  }, [commands]);
+
+  // Track the running visible index so each row knows whether it's the
+  // keyboard cursor's current target.
+  let visibleIndex = -1;
+
+  return (
+    <div className={classes.container} role="dialog" aria-label={ariaLabel}>
+      {showToolbar ? (
+        <FormattingToolbar
+          editor={editor}
+          range={range}
+          commands={toolbarCommands}
+          dimmed={query.trim().length > 0}
+        />
+      ) : null}
+
+      {showHint ? (
+        <div className={classes.hintRow}>
+          <Text variant="caption2">
+            Type <kbd>##</kbd> for H2, <kbd>-</kbd> for bullet, <kbd>⌘B</kbd>{' '}
+            bold
+          </Text>
+        </div>
+      ) : null}
+
+      {commands.length === 0 ? (
+        <div className={classes.emptyState}>
+          <Text variant="caption2">No matching commands</Text>
+        </div>
+      ) : (
+        <div role="listbox" className={classes.list}>
+          {grouped.map(bucket => (
+            <Fragment key={bucket.group}>
+              <div className={classes.sectionHeader}>
+                <Text variant="smallCaps">{bucket.group}</Text>
+              </div>
+              {bucket.items.map(cmd => {
+                visibleIndex += 1;
+                const idx = visibleIndex;
+                const isActive = idx === highlightedIndex;
+                const isDisabled = Boolean(cmd.disabled);
+                const Icon = cmd.icon;
+                return (
+                  <UnstyledButton
+                    key={cmd.id}
+                    role="option"
+                    aria-selected={isActive}
+                    aria-disabled={isDisabled}
+                    disabled={isDisabled}
+                    className={`${classes.item} ${isActive ? classes.itemActive : ''}`.trim()}
+                    onMouseDown={(e: MouseEvent) => e.preventDefault()}
+                    onMouseEnter={() => onHighlightChange(idx)}
+                    onClick={() => {
+                      if (!isDisabled) onSelect(cmd);
+                    }}
+                  >
+                    <span className={classes.itemLabel}>
+                      <span className={classes.itemIcon} aria-hidden>
+                        <Icon size={14} />
+                      </span>
+                      <Text variant="caption1.strong">{cmd.label}</Text>
+                    </span>
+                    {isDisabled && cmd.disabledHint ? (
+                      <Text variant="caption2" className={classes.itemHint}>
+                        {cmd.disabledHint}
+                      </Text>
+                    ) : cmd.shortcut ? (
+                      <span className={classes.itemShortcut}>
+                        <Text variant="caption2" c="text.subdued.default">
+                          {cmd.shortcut}
+                        </Text>
+                      </span>
+                    ) : null}
+                  </UnstyledButton>
+                );
+              })}
+            </Fragment>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/SlashRichTextEditor/SlashRichTextEditor.css.ts

@@ -0,0 +1,81 @@
+import { style } from '@vanilla-extract/css';
+
+import { tokens } from '../../theme/themeContract.css';
+
+export const root = style({
+  position: 'relative',
+  display: 'flex',
+  flexDirection: 'column',
+  width: '100%',
+});
+
+/**
+ * Base editor surface — no chrome of its own. Consumers like
+ * `ActionItemQuickCreate` already wrap the editor in a card so the editor
+ * staying transparent avoids the doubled-border visual the user reported.
+ */
+export const editorSurface = style({
+  position: 'relative',
+  color: tokens.color.text.default,
+  selectors: {
+    '&[data-disabled="true"]': {
+      cursor: 'not-allowed',
+      opacity: 0.7,
+    },
+  },
+});
+
+/**
+ * Optional self-contained variant — renders an input-style box around the
+ * editor for screens where the editor stands on its own (Storybook, future
+ * surfaces). Opt in via `variant="bordered"`.
+ */
+export const editorSurfaceBordered = style({
+  borderRadius: tokens.radius.md,
+  background: tokens.color.background.input,
+  border: `1px solid ${tokens.color.stroke.subduedDefault}`,
+  padding: `${tokens.spacing.xs} ${tokens.spacing.sm}`,
+  selectors: {
+    '&[data-focused="true"]': {
+      borderColor: tokens.color.stroke.focusDefault,
+    },
+    '&[data-error="true"]': {
+      borderColor: tokens.color.stroke.dangerDefault,
+    },
+    '&[data-disabled="true"]': {
+      background: tokens.color.background.disabledDefault,
+    },
+  },
+});
+
+export const errorMessage = style({
+  marginTop: tokens.spacing['3xs'],
+  color: tokens.color.text.dangerDefault,
+});
+
+/**
+ * Container for the popup. Positioned absolutely below the editor surface so
+ * it aligns with the slash anchor without needing a portal — keeps focus
+ * inside the editor's contenteditable.
+ */
+export const menuLayer = style({
+  position: 'absolute',
+  left: 0,
+  right: 0,
+  top: '100%',
+  zIndex: 30,
+  pointerEvents: 'none',
+});
+
+export const menuLayerActive = style({
+  pointerEvents: 'auto',
+});
+
+/**
+ * All element-level prose styling (headings, lists, code, blockquote,
+ * marks, placeholder) lives in `richTextProse.css.ts` and is applied
+ * via the shared `prose` class on the editor surface. Keep this file
+ * focused on container chrome (border, focus state, error state,
+ * popup positioning) so the editor and `RichTextView` stay visually
+ * in sync by construction.
+ */