@elabs-ai/components-editor 4.0.0

package/src/markdown-editor/completions/completions-widget.tsx

@@ -0,0 +1,75 @@
+"use client";
+
+/**
+ * CompletionWidget — the React widget the completions plugin mounts at the
+ * caret (the `slash-widget.tsx` precedent). Reads the live plugin state,
+ * renders the branded `<CompletionMenu>` floating below the caret, and inserts
+ * the chosen candidate through the SAME path as the plugin's own Enter/Tab
+ * handler (`insertCompletionItem`), so mouse and keyboard behave identically.
+ */
+import type { ReactWidgetViewComponent } from "@prosemirror-adapter/react";
+import { useWidgetViewContext } from "@prosemirror-adapter/react";
+import { useLayoutEffect, useRef } from "react";
+
+import { CompletionMenu, completionOptionId } from "./completions-menu";
+import {
+  completionsPluginKey,
+  insertCompletionItem,
+  type CompletionPluginState,
+} from "./completions-prose";
+
+const ID_PREFIX = "brand-completions";
+
+/** Build the widget component (no external state — everything reads off the view). */
+export function createCompletionWidget(): ReactWidgetViewComponent {
+  function CompletionWidget() {
+    const { view } = useWidgetViewContext();
+    const wrapperRef = useRef<HTMLSpanElement>(null);
+
+    const state = completionsPluginKey.getState(view.state) as CompletionPluginState | undefined;
+    const items = state?.items ?? [];
+    const activeIndex = state ? Math.min(state.index, Math.max(0, items.length - 1)) : 0;
+    const activeId = items.length > 0 ? completionOptionId(ID_PREFIX, activeIndex) : undefined;
+
+    // Mirror the active option onto the editor's `textbox` for AT, same wiring
+    // as the slash widget.
+    useLayoutEffect(() => {
+      const dom = view.dom as HTMLElement;
+      const listEl = wrapperRef.current?.querySelector<HTMLElement>('[role="listbox"]');
+      if (listEl && !listEl.id) listEl.id = `${ID_PREFIX}-listbox`;
+      dom.setAttribute("aria-expanded", "true");
+      if (listEl) dom.setAttribute("aria-controls", listEl.id);
+      if (activeId) dom.setAttribute("aria-activedescendant", activeId);
+      else dom.removeAttribute("aria-activedescendant");
+      return () => {
+        dom.removeAttribute("aria-expanded");
+        dom.removeAttribute("aria-controls");
+        dom.removeAttribute("aria-activedescendant");
+      };
+    }, [view, activeId]);
+
+    const onSelect = (index: number) => {
+      if (!state) return;
+      const item = items[index];
+      if (item) insertCompletionItem(view, state, item);
+    };
+
+    return (
+      <span
+        ref={wrapperRef}
+        contentEditable={false}
+        className="brand-completions-anchor relative inline-block h-0 w-0 align-baseline"
+      >
+        <span className="absolute left-0 top-1 z-50 block">
+          <CompletionMenu
+            items={items}
+            activeIndex={activeIndex}
+            onSelect={onSelect}
+            idPrefix={ID_PREFIX}
+          />
+        </span>
+      </span>
+    );
+  }
+  return CompletionWidget;
+}

package/src/markdown-editor/completions/index.ts

@@ -0,0 +1,37 @@
+"use client";
+
+/**
+ * WYSIWYG completions mirror — public surface for the Milkdown `MarkdownEditor`
+ * (the `../slash/index.ts` precedent). See `completions-prose.ts` for what this
+ * mirror does and does NOT cover relative to the Monaco path.
+ */
+import type { MilkdownPlugin } from "@milkdown/kit/ctx";
+
+import type { EditorCompletionProvider } from "../../lib/editor-completions";
+import { completionsProsePlugin, type CompletionWidgetFactory } from "./completions-prose";
+import { createCompletionWidget } from "./completions-widget";
+
+/**
+ * Build the `.use()`-ready plugin array for the WYSIWYG completions mirror.
+ * Call with the widget factory from `useWidgetViewFactory()` (must run inside a
+ * `<ProsemirrorAdapterProvider>`), mirroring `brandSlashViewPlugins`.
+ */
+export function completionsViewPlugins(
+  widgetFactory: CompletionWidgetFactory,
+  getProviders: () => EditorCompletionProvider[] | undefined,
+): MilkdownPlugin[] {
+  const widgetComponent = createCompletionWidget();
+  return [completionsProsePlugin({ widgetFactory, widgetComponent, getProviders })];
+}
+
+export {
+  CLOSED,
+  completionsPluginKey,
+  nextCompletionState,
+  buildCompletionContext,
+  completionReplaceRange,
+  insertCompletionItem,
+  type CompletionPluginState,
+  type CompletionWidgetFactory,
+} from "./completions-prose";
+export { CompletionMenu, completionOptionId, type CompletionMenuProps } from "./completions-menu";

package/src/markdown-editor/directive-nodes.ts

@@ -0,0 +1,151 @@
+/**
+ * WYSIWYG support for the brand `:::` directives inside the Milkdown editor.
+ *
+ * Adds remark-directive to Milkdown's pipeline (so `:::card` / `:::callout` /
+ * `:::timeline` / `::metric` PARSE and SERIALIZE — lossless round-trip), plus two
+ * generic ProseMirror node schemas:
+ *   - a CONTAINER node (editable body) for `:::` block directives
+ *   - a LEAF node (atomic) for `::` directives like `::metric`
+ *
+ * Rendering is ProseMirror-native `toDOM` chrome styled from semantic tokens
+ * (see markdown-editor.css) — deliberately NOT a React node-view adapter, so the
+ * editor has zero extra runtime deps and the chrome stays token-driven. The
+ * branded PREVIEW still renders the real @brand React components; this gives the
+ * WYSIWYG surface a matching, editable representation.
+ */
+import type { MilkdownPlugin } from "@milkdown/kit/ctx";
+import { $nodeSchema, $remark } from "@milkdown/kit/utils";
+import remarkDirective from "remark-directive";
+
+interface DirectiveMdast {
+  type: string;
+  name?: string;
+  attributes?: Record<string, string> | null;
+  children?: unknown[];
+}
+
+/** Add remark-directive to Milkdown's unified processor (parse + stringify). */
+export const directiveRemark = $remark("brandDirective", () => remarkDirective);
+
+/** `:::name` block directives → an editable container node with branded chrome. */
+export const containerDirectiveSchema = $nodeSchema("brand_container_directive", () => ({
+  content: "block+",
+  group: "block",
+  defining: true,
+  attrs: {
+    name: { default: "card" },
+    attributes: { default: {} as Record<string, string> },
+  },
+  parseDOM: [
+    {
+      tag: "div[data-brand-directive]",
+      getAttrs: (dom: HTMLElement | string) => {
+        if (typeof dom === "string") return false;
+        return {
+          name: dom.getAttribute("data-brand-directive") ?? "card",
+          attributes: JSON.parse(dom.getAttribute("data-brand-attrs") ?? "{}"),
+        };
+      },
+    },
+  ],
+  toDOM: (node) => {
+    const name = String(node.attrs.name);
+    const attrs = (node.attrs.attributes ?? {}) as Record<string, string>;
+    const heading = attrs.title || (name === "callout" ? (attrs.type ?? "note") : "");
+    const chrome: unknown[] = [
+      "div",
+      {
+        "data-brand-directive": name,
+        "data-brand-attrs": JSON.stringify(attrs),
+        class: `brand-directive brand-directive--${name}`,
+        "data-callout-type": name === "callout" ? (attrs.type ?? "note") : null,
+      },
+    ];
+    if (heading)
+      chrome.push(["div", { class: "brand-directive__title", contenteditable: "false" }, heading]);
+    chrome.push(["div", { class: "brand-directive__body" }, 0]);
+    return chrome as never;
+  },
+  parseMarkdown: {
+    match: (node) => (node as DirectiveMdast).type === "containerDirective",
+    runner: (state, node, type) => {
+      const d = node as DirectiveMdast;
+      state.openNode(type, { name: d.name ?? "card", attributes: d.attributes ?? {} });
+      state.next((d.children ?? []) as never);
+      state.closeNode();
+    },
+  },
+  toMarkdown: {
+    match: (node) => node.type.name === "brand_container_directive",
+    runner: (state, node) => {
+      state.openNode("containerDirective", undefined, {
+        name: node.attrs.name,
+        attributes: node.attrs.attributes,
+      });
+      state.next(node.content);
+      state.closeNode();
+    },
+  },
+}));
+
+/** `::name` leaf directives (e.g. `::metric`) → an atomic node with branded chrome. */
+export const leafDirectiveSchema = $nodeSchema("brand_leaf_directive", () => ({
+  group: "block",
+  atom: true,
+  isolating: true,
+  attrs: {
+    name: { default: "metric" },
+    attributes: { default: {} as Record<string, string> },
+  },
+  parseDOM: [
+    {
+      tag: "div[data-brand-leaf]",
+      getAttrs: (dom: HTMLElement | string) => {
+        if (typeof dom === "string") return false;
+        return {
+          name: dom.getAttribute("data-brand-leaf") ?? "metric",
+          attributes: JSON.parse(dom.getAttribute("data-brand-attrs") ?? "{}"),
+        };
+      },
+    },
+  ],
+  toDOM: (node) => {
+    const name = String(node.attrs.name);
+    const a = (node.attrs.attributes ?? {}) as Record<string, string>;
+    return [
+      "div",
+      {
+        "data-brand-leaf": name,
+        "data-brand-attrs": JSON.stringify(a),
+        class: `brand-directive brand-directive--leaf brand-directive--${name}`,
+        contenteditable: "false",
+      },
+      ["div", { class: "brand-metric__label" }, a.label ?? name],
+      ["div", { class: "brand-metric__value" }, a.value ?? ""],
+      ...(a.description ? [["div", { class: "brand-metric__desc" }, a.description]] : []),
+    ] as never;
+  },
+  parseMarkdown: {
+    match: (node) => (node as DirectiveMdast).type === "leafDirective",
+    runner: (state, node, type) => {
+      const d = node as DirectiveMdast;
+      state.addNode(type, { name: d.name ?? "metric", attributes: d.attributes ?? {} });
+    },
+  },
+  toMarkdown: {
+    match: (node) => node.type.name === "brand_leaf_directive",
+    runner: (state, node) => {
+      state.addNode("leafDirective", undefined, undefined, {
+        name: node.attrs.name,
+        attributes: node.attrs.attributes,
+      });
+    },
+  },
+}));
+
+/** All plugins needed to parse, render and serialize brand directives in the editor. */
+export const directivePlugins: MilkdownPlugin[] = [
+  directiveRemark,
+  containerDirectiveSchema,
+  leafDirectiveSchema,
+].flat() as MilkdownPlugin[];

package/src/markdown-editor/directive-views.test.tsx

@@ -0,0 +1,189 @@
+/**
+ * Regression tests for the iteration node-view's `⋯` / right-click menu
+ * (directive-views.tsx, #223). Milkdown mounts fine in jsdom for these
+ * interaction paths (the `markdown-editor.directives.test.tsx` precedent) —
+ * only the canvas/Monaco-backed surfaces need a browser.
+ */
+import { createRef, type ReactNode } from "react";
+import { cleanup, fireEvent, render, screen, waitFor, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, describe, expect, test } from "vitest";
+
+import {
+  IterationEditContext,
+  type IterationEditRequest,
+} from "../markdown-iteration/edit-context";
+import { MarkdownEditor, type MarkdownEditorHandle } from "./markdown-editor";
+
+afterEach(cleanup);
+
+/** A no-op handler is enough to make the ⋯ / right-click menu render at all. */
+function withEditHandler(children: ReactNode) {
+  return <IterationEditContext.Provider value={() => {}}>{children}</IterationEditContext.Provider>;
+}
+
+const PIVOT_WITH_CONSUMER_ATTRS = `:::pivot{source="sales" region="EU" rows="Q1, Q2" cols="North, South"}
+{{row}} · {{col}}
+:::
+`;
+
+const ITERATE_CONSUMER_EVALUATED = `:::iterate{as="repo" source="repos" layout="grid"}
+{{repo.name}}
+:::
+`;
+
+const PIVOT_CONSUMER_EVALUATED = `:::pivot{source="sales" layout="matrix"}
+{{row}} · {{col}}
+:::
+`;
+
+async function openNodeMenu(): Promise<HTMLElement> {
+  const user = userEvent.setup();
+  const menuButton = await screen.findByRole("button", { name: "Iteration actions" });
+  await user.click(menuButton);
+  return screen.findByRole("menu");
+}
+
+describe("IterationDirectiveView — Edit iteration… merges instead of replacing attributes", () => {
+  test("onSaveData merges the guided builder's write-back WITHOUT dropping unrelated consumer attributes", async () => {
+    const user = userEvent.setup();
+    const ref = createRef<MarkdownEditorHandle>();
+    let captured: IterationEditRequest | null = null;
+    render(
+      <IterationEditContext.Provider
+        value={(request) => {
+          captured = request;
+        }}
+      >
+        <MarkdownEditor ref={ref} defaultValue={PIVOT_WITH_CONSUMER_ATTRS} />
+      </IterationEditContext.Provider>,
+    );
+
+    const menu = await openNodeMenu();
+    await user.click(within(menu).getByText("Edit iteration…"));
+    await waitFor(() => expect(captured).not.toBeNull());
+
+    // Simulate the guided builder dialog saving — its model only knows
+    // `layout`/`rows`/`cols`, so its write-back must NOT drop `source`/`region`.
+    captured!.onSaveData!({
+      attributes: { layout: "matrix", rows: "Q1, Q2, Q3", cols: "North, South" },
+      template: "{{row}} · {{col}}",
+    });
+
+    await waitFor(() => {
+      const md = ref.current!.getMarkdown();
+      expect(md).toContain('rows="Q1, Q2, Q3"');
+      expect(md).toContain('cols="North, South"');
+      // The consumer's own attributes (its `evaluate`'s data-source reference)
+      // must survive the save — they are NOT part of the builder's model.
+      expect(md).toContain('source="sales"');
+      expect(md).toContain('region="EU"');
+    });
+  });
+});
+
+describe("IterationDirectiveView — Transpose merges instead of replacing attributes", () => {
+  test("Transpose swaps rows/cols WITHOUT dropping unrelated consumer attributes", async () => {
+    const user = userEvent.setup();
+    const ref = createRef<MarkdownEditorHandle>();
+    render(withEditHandler(<MarkdownEditor ref={ref} defaultValue={PIVOT_WITH_CONSUMER_ATTRS} />));
+
+    const menu = await openNodeMenu();
+    await user.click(within(menu).getByText("Transpose"));
+
+    await waitFor(() => {
+      const md = ref.current!.getMarkdown();
+      expect(md).toContain('rows="North, South"');
+      expect(md).toContain('cols="Q1, Q2"');
+      // The consumer's own attributes (its `evaluate`'s data-source reference)
+      // must survive the transpose — they are NOT part of the transpose model.
+      expect(md).toContain('source="sales"');
+      expect(md).toContain('region="EU"');
+    });
+  });
+});
+
+describe("IterationDirectiveView — Transpose is disabled with no embedded pivot axes", () => {
+  test("a pivot with embedded rows/cols is NOT disabled", async () => {
+    render(withEditHandler(<MarkdownEditor defaultValue={PIVOT_WITH_CONSUMER_ATTRS} />));
+    const menu = await openNodeMenu();
+    const item = within(menu).getByText("Transpose").closest('[role="menuitem"]')!;
+    expect(item).not.toHaveAttribute("aria-disabled", "true");
+  });
+
+  test("a pivot resolved by the consumer's evaluate (no rows/cols) is disabled, its reason is VISIBLE, and it's inert", async () => {
+    const user = userEvent.setup();
+    const ref = createRef<MarkdownEditorHandle>();
+    render(withEditHandler(<MarkdownEditor ref={ref} defaultValue={PIVOT_CONSUMER_EVALUATED} />));
+
+    const menu = await openNodeMenu();
+    // The disabled reason is folded into the item's own visible label (NOT a
+    // `title` attribute — a disabled Radix item is `pointer-events-none`, so a
+    // hover tooltip could never fire, and it's skipped by keyboard focus).
+    const label = within(menu).getByText("Transpose — needs embedded values");
+    const item = label.closest('[role="menuitem"]')!;
+    expect(item).toHaveAttribute("aria-disabled", "true");
+
+    const before = ref.current!.getMarkdown();
+    await user.click(label);
+    // A disabled Radix item never fires `onSelect` — the block is byte-identical
+    // afterwards (previously Transpose silently wrote bare `rows`/`cols` FLAGS —
+    // `mdast-util-directive`'s serialization of an empty-string attribute value —
+    // as a visual no-op that still dirtied the document).
+    expect(ref.current!.getMarkdown()).toBe(before);
+  });
+});
+
+describe("IterationDirectiveView — Convert to static is disabled with no embedded data", () => {
+  test("a block with embedded values is NOT disabled", async () => {
+    render(withEditHandler(<MarkdownEditor defaultValue={PIVOT_WITH_CONSUMER_ATTRS} />));
+    const menu = await openNodeMenu();
+    const item = within(menu).getByText("Convert to static").closest('[role="menuitem"]')!;
+    expect(item).not.toHaveAttribute("aria-disabled", "true");
+  });
+
+  test("a block resolved by the consumer's evaluate (no embedded values) is disabled, its reason is VISIBLE, and it's inert", async () => {
+    const user = userEvent.setup();
+    const ref = createRef<MarkdownEditorHandle>();
+    render(withEditHandler(<MarkdownEditor ref={ref} defaultValue={ITERATE_CONSUMER_EVALUATED} />));
+
+    const menu = await openNodeMenu();
+    // Same rationale as Transpose above: the reason lives in the visible label,
+    // not an unreachable `title`.
+    const label = within(menu).getByText("Convert to static — needs embedded values");
+    const item = label.closest('[role="menuitem"]')!;
+    expect(item).toHaveAttribute("aria-disabled", "true");
+
+    const before = ref.current!.getMarkdown();
+    await user.click(label);
+    // A disabled Radix item never fires `onSelect` — the document is untouched
+    // (previously this silently replaced the block with an empty string / no-op
+    // with zero user feedback).
+    expect(ref.current!.getMarkdown()).toBe(before);
+  });
+});
+
+describe("IterationDirectiveView — context menu is scoped to the header chrome", () => {
+  test("right-click on the header row opens the node menu", async () => {
+    render(withEditHandler(<MarkdownEditor defaultValue={PIVOT_WITH_CONSUMER_ATTRS} />));
+    const label = await screen.findByText("Pivot");
+    fireEvent.contextMenu(label);
+    expect(await screen.findByRole("menu")).toBeInTheDocument();
+  });
+
+  test("right-click INSIDE the editable template body does not open it (native menu stays reachable)", async () => {
+    render(withEditHandler(<MarkdownEditor defaultValue={PIVOT_WITH_CONSUMER_ATTRS} />));
+    // Wait for the frame to mount before querying its body.
+    await screen.findByText("Pivot");
+    const body = document.querySelector(".brand-directive__body");
+    expect(body).toBeTruthy();
+
+    fireEvent.contextMenu(body!);
+    // Let any (non-)handling settle, then confirm no Radix menu opened — a
+    // right-click that hits the ProseMirror content must fall through to the
+    // browser's native context menu (spellcheck, Paste, Look Up, Emoji), which
+    // jsdom doesn't render but which our own menu must not have hijacked.
+    await new Promise((resolve) => setTimeout(resolve, 50));
+    expect(screen.queryByRole("menu")).toBeNull();
+  });
+});