context-menu.ts

context-menu.tspackages/editor/src/context-menu.tsraw ← src7,696 B← Back to the app
1/**
2 * @factory/editor — block context menu definition (TASK-0055, PRODUCT-SPEC §7).
3 *
4 * A single data-driven menu: rows are plain data (`{label, shortcut?,
5 * divider?, submenu?, disabled?, run(ctx)}`) rendered by the shared Radix
6 * menu in `packages/ui`. This package owns the row model + the row
7 * computation (which rows appear, which are disabled, for which block
8 * type/selection) — the UI is not.
9 *
10 * Row order (PRODUCT-SPEC §7): Turn into ▸ · Duplicate · Copy · Copy link ·
11 * Move to ▸ · Delete · — · Comment · Ask AI ▸ · — · Color ▸ · Background ▸ ·
12 * — · Convert to ▸ · — · More ▸.
13 *
14 * "Ask AI" is a frozen Phase-12 shape (rows present, `disabled: true`,
15 * tooltip "Available in Phase 12"); Phase 12 only flips `enabled`.
16 */
17 
18import type { BlockType } from "@factory/shared/dto";
19 
20/** Execution context handed to a row's `run` callback. */
21export interface MenuContext {
22  /** The blocks this menu operates on (single block or selection). */
23  readonly blockIds: readonly string[];
24  readonly pageId: string;
25  readonly workspaceId: string;
26  readonly readOnly: boolean;
27}
28 
29/** A computed row of the block context menu (data only — no React). */
30export interface MenuRow {
31  readonly id: string;
32  readonly label: string;
33  readonly shortcut?: string;
34  readonly divider?: boolean;
35  readonly disabled?: boolean;
36  readonly tooltip?: string;
37  readonly submenu?: readonly MenuRow[];
38  readonly run?: (ctx: MenuContext) => void;
39}
40 
41/** The 9 text + 9 background color tokens (closed palette — never raw hex). */
42export const TEXT_COLOR_TOKENS: readonly string[] = [
43  "default",
44  "gray",
45  "brown",
46  "orange",
47  "yellow",
48  "green",
49  "blue",
50  "purple",
51  "pink",
52];
53export const BACKGROUND_COLOR_TOKENS: readonly string[] = [
54  "default",
55  "gray_background",
56  "brown_background",
57  "orange_background",
58  "yellow_background",
59  "green_background",
60  "blue_background",
61  "purple_background",
62  "pink_background",
63];
64 
65/** Block types that accept a text `content.text` (turn-into/convert-to targets). */
66export const TEXT_BLOCK_TYPES: readonly BlockType[] = [
67  "paragraph",
68  "heading_1",
69  "heading_2",
70  "heading_3",
71  "quote",
72  "callout",
73  "bulleted_list",
74  "numbered_list",
75  "todo",
76  "toggle",
77];
78 
79/** The "Turn into ▸" submenu: every text-capable type (checkmark = current). */
80export function turnIntoRows(currentType: BlockType): readonly MenuRow[] {
81  return TEXT_BLOCK_TYPES.map((type) => ({
82    id: `turn_into:${type}`,
83    label: turnIntoLabel(type),
84    // `disabled` is ALWAYS explicit (the UI renders it truthily; the
85    // current type is the only disabled row — the checkmark itself is
86    // conveyed by the renderer via `id === turnIntoId(type)`).
87    disabled: type === currentType,
88  }));
89}
90 
91export function turnIntoId(type: BlockType): string {
92  return `turn_into:${type}`;
93}
94 
95function turnIntoLabel(type: BlockType): string {
96  const labels: Record<string, string> = {
97    paragraph: "Text",
98    heading_1: "Heading 1",
99    heading_2: "Heading 2",
100    heading_3: "Heading 3",
101    quote: "Quote",
102    callout: "Callout",
103    bulleted_list: "Bulleted list",
104    numbered_list: "Numbered list",
105    todo: "To-do",
106    toggle: "Toggle",
107  };
108  return labels[type] ?? type;
109}
110 
111/** The "Convert to ▸" quick submenu (heading 1–3 / quote / callout / todo). */
112export function convertToRows(): readonly MenuRow[] {
113  return (
114    ["heading_1", "heading_2", "heading_3", "quote", "callout", "todo"] as const
115  ).map((type) => ({
116    id: `convert_to:${type}`,
117    label: turnIntoLabel(type),
118  }));
119}
120 
121/** The frozen Phase-12 "Ask AI ▸" shape. */
122export const ASK_AI_ROWS: readonly MenuRow[] = [
123  { id: "ai:summarize", label: "Summarize", disabled: true, tooltip: "Available in Phase 12" },
124  { id: "ai:rewrite", label: "Rewrite", disabled: true, tooltip: "Available in Phase 12" },
125  { id: "ai:improve", label: "Improve", disabled: true, tooltip: "Available in Phase 12" },
126  { id: "ai:translate", label: "Translate", disabled: true, tooltip: "Available in Phase 12" },
127];
128 
129/**
130 * The "More ▸" submenu. `synced_block` (Phase 5) and `template` (Phase 14
131 * scaffold) are disabled placeholders; `permissions` is enabled only for
132 * page-root blocks (handled by the caller via `ctx` gating).
133 */
134export function moreRows(isPageRoot: boolean): readonly MenuRow[] {
135  return [
136    { id: "more:synced", label: "Duplicate as synced block", disabled: true, tooltip: "Available in Phase 5" },
137    { id: "more:template", label: "Save as template", disabled: true, tooltip: "Available in Phase 14" },
138    { id: "more:permissions", label: "Permissions", disabled: !isPageRoot },
139  ];
140}
141 
142export interface BuildBlockMenuOptions {
143  readonly blockIds: readonly string[];
144  readonly type: BlockType;
145  readonly isPageRoot?: boolean;
146  readonly readOnly?: boolean;
147  /** Color/background setters (wire the properties write-back). */
148  readonly onTextColor?: (token: string, ctx: MenuContext) => void;
149  readonly onBackgroundColor?: (token: string, ctx: MenuContext) => void;
150}
151 
152/**
153 * Compute the full menu for a block (or selection) per PRODUCT-SPEC §7.
154 * Selection > 1 adjusts the duplicate label ("Duplicate 3 blocks") and the
155 * `run` callbacks receive all `blockIds`.
156 */
157export function buildBlockMenu(options: BuildBlockMenuOptions): readonly MenuRow[] {
158  const many = options.blockIds.length > 1;
159  const readOnly = options.readOnly ?? false;
160  const type = options.type;
161  const isPageRoot = options.isPageRoot ?? false;
162 
163  const rows: MenuRow[] = [
164    {
165      id: "turn_into",
166      label: "Turn into",
167      submenu: turnIntoRows(type),
168      ...(readOnly ? { disabled: true } : {}),
169    },
170    { id: "duplicate", label: many ? `Duplicate ${options.blockIds.length} blocks` : "Duplicate", shortcut: "⌘⇧D", disabled: readOnly },
171    { id: "copy", label: "Copy", shortcut: "⌘C", disabled: options.blockIds.length === 0 },
172    { id: "copy_link", label: "Copy link", shortcut: "⌘⇧C", disabled: options.blockIds.length === 0 },
173    { id: "move_to", label: "Move to", shortcut: "⌘⇧M", disabled: readOnly },
174    { id: "delete", label: "Delete", disabled: readOnly },
175    { id: "sep-1", label: "", divider: true },
176    { id: "comment", label: "Comment" },
177    { id: "ask_ai", label: "Ask AI", submenu: ASK_AI_ROWS },
178    { id: "sep-2", label: "", divider: true },
179    {
180      id: "color",
181      label: "Color",
182      disabled: readOnly,
183      submenu: TEXT_COLOR_TOKENS.map((token) => ({
184        id: `color:${token}`,
185        label: colorLabel(token),
186        run: (c: MenuContext) => options.onTextColor?.(token, c),
187      })),
188    },
189    {
190      id: "background",
191      label: "Background",
192      disabled: readOnly,
193      submenu: BACKGROUND_COLOR_TOKENS.map((token) => ({
194        id: `background:${token}`,
195        label: colorLabel(token),
196        run: (c: MenuContext) => options.onBackgroundColor?.(token, c),
197      })),
198    },
199    { id: "sep-3", label: "", divider: true },
200    { id: "convert_to", label: "Convert to", submenu: convertToRows(), ...(readOnly ? { disabled: true } : {}) },
201    { id: "sep-4", label: "", divider: true },
202    { id: "more", label: "More", submenu: moreRows(isPageRoot) },
203  ];
204 
205  // Rows without an explicit `run` (duplicate/copy/copy_link/move_to/delete/
206  // comment/turn_into/convert_to) are wired by the renderer through their
207  // stable `id`; the ones with a `run` (color/background swatches) capture
208  // their callbacks here.
209  return rows;
210}
211 
212function colorLabel(token: string): string {
213  if (token === "default") return "Default";
214  const name = token.replace(/_background$/, "");
215  return name.charAt(0).toUpperCase() + name.slice(1);
216}
217