@elabs-ai/components-editor 4.0.0 → 4.1.0

package/src/markdown-outline/document-outline.tsx

@@ -55,7 +55,7 @@ export const DocumentOutline = forwardRef<HTMLElement, DocumentOutlineProps>(
                   className={cn(
                     "-ms-px block w-full truncate border-s-2 py-1 pe-2 text-start text-caption",
                     "transition-colors duration-fast ease-standard motion-reduce:transition-none",
-                    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
+                    "focus-ring-inset",
                     item.id === activeId
                       ? "border-s-primary font-medium text-foreground"
                       : "border-s-transparent text-muted-foreground hover:border-s-border-strong hover:text-foreground",

package/src/markdown-preview/markdown-preview-transclusion.test.tsx

@@ -11,7 +11,7 @@ afterEach(cleanup);
  * nested mount is perturbed by prior Streamdown renders (an env-only gremlin — the
  * feature renders correctly in the browser and in isolation). So transclusion gets
  * its OWN file with the resolved (nested-render) case asserted FIRST in a clean
- * module context. Six-theme pixel sweep still owed.
+ * module context. Cross-theme pixel sweep still owed.
  */
 describe("MarkdownPreview — transclusion (resolveTransclusion)", () => {
   it("embeds resolved markdown in a labelled figure", async () => {

package/src/markdown-preview/markdown-preview.stories.tsx

@@ -12,11 +12,33 @@ const meta = {
     docs: {
       description: {
         component:
+          "The EDITOR preview pane, which understands the brand `:::` directives. " +
+          "Pick a markdown renderer by where the markdown is going to be READ: a " +
+          "read-only document in a chat or a side rail → `AI/MarkdownView`; the preview " +
+          "pane of the markdown editor → `Editor/MarkdownPreview`; a file the app did " +
+          "not write → the markdown adapter behind `Viewer/FileViewer`; streaming into " +
+          "a message as the model writes it → `MessageResponse` on `AI/Message`. See " +
+          "[Choosing between similar components](?path=/docs/docs-choosing-between-similar-components--docs)." +
+          "\n\n" +
           "Renders markdown to REAL @brand components (Streamdown + a branded components " +
           "map): `#` → Heading, link → Link, table → Table, `---` → Separator, and the brand " +
           "directives `:::card` / `:::callout` / `::metric` / `:::timeline` → Card / Alert / " +
           "MetricBlock / Timeline. Uses the SAME shared remark pipeline as the Milkdown editor. " +
-          "Unknown directives render an explicit error block instead of disappearing.",
+          "Unknown directives render an explicit error block instead of disappearing.\n\n" +
+          "Its map is NOT a superset or a subset of `MarkdownView`'s — it is a different " +
+          "job. Every standard element here is wrapped to attach `data-sourcepos` (the " +
+          "seam the editor scroll-sync, the ghost-diff wash and the search wash all read), " +
+          "and a heading additionally carries a TOC slug id, a heading-action slot and " +
+          "hover-reveal anchor chrome. It has no `baseHeadingLevel`; it does have " +
+          "wikilinks, transclusion, `resolveUrl` and mermaid fences.\n\n" +
+          "All three map their element tree onto the same `Prose*` primitives owned " +
+          "by `@elabs-ai/components-ui` (`@elabs-ai/components-editor` re-exports them " +
+          "under short names). The element MAPS stay per-surface on purpose — " +
+          "`@elabs-ai/components-ai`, `@elabs-ai/components-editor` and " +
+          "`@elabs-ai/components-viewer` are leaves that may not import one another, and " +
+          "`streamdown` deliberately never moves down into `@elabs-ai/components-ui`, or " +
+          "every consumer of every foundation component would carry it. One prose source, " +
+          "several renderers.",
       },
     },
   },
@@ -88,7 +110,7 @@ export const HeadingActions: Story = {
         type="button"
         aria-label={`Pin section “${h.text}”`}
         aria-pressed={h.text === "Timeline"}
-        className="rounded-sm p-0.5 text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        className="rounded-sm p-0.5 text-muted-foreground hover:text-foreground focus-ring"
       >
         <Pin className="size-3.5" aria-hidden="true" />
       </button>

package/src/markdown-preview/markdown-preview.test.tsx

@@ -1,5 +1,5 @@
 import { cleanup, render, screen, waitFor } from "@testing-library/react";
-import { afterEach, describe, expect, it } from "vitest";
+import { afterEach, beforeAll, describe, expect, it } from "vitest";
 
 import { MarkdownPreview } from "./markdown-preview";
 
@@ -249,16 +249,33 @@ describe("MarkdownPreview — code fences (highlight + chip + copy)", () => {
 });
 
 describe("MarkdownPreview — mermaid fences (#L1)", () => {
+  // #64 — under a full, parallel, uncached monorepo run this describe block's
+  // FIRST `import("mermaid")` (fired inside MermaidDiagram's effect,
+  // mermaid-diagram.tsx) is a large, cold module-graph evaluation
+  // (d3/dagre/cytoscape/khroma/katex) that can lose the race against Vitest's
+  // 5000ms default test timeout — not because the spec is wrong, but because it
+  // shares the event loop with every other worker on a CPU-starved host. Warm
+  // the module graph here, OUTSIDE any timed assertion, so the two specs below
+  // only ever pay a warm re-import. `mermaid` stays a dynamic import in
+  // mermaid-diagram.tsx (`pnpm heavy-deps:check` requires it) — this does not
+  // change that, it just pays the cold cost once, up front, off the clock.
+  beforeAll(async () => {
+    await import("mermaid");
+  });
+
+  // Explicit, generous timeouts as the second, independent half of the fix —
+  // belt-and-suspenders alongside the warm-up above, in case the warm-up itself
+  // lands inside a contended window. See #64.
   it("routes ```mermaid fences to the MermaidDiagram component", async () => {
     render(<MarkdownPreview>{"```mermaid\ngraph TD; A-->B\n```"}</MarkdownPreview>);
     await waitFor(() => expect(screen.getByTestId("mermaid-diagram")).toBeInTheDocument());
-  });
+  }, 15_000);
 
   it("keeps non-mermaid fences as plain pre blocks", async () => {
     const { container } = render(<MarkdownPreview>{"```ts\nconst x = 1;\n```"}</MarkdownPreview>);
     await waitFor(() => expect(container.querySelector("pre")).toBeInTheDocument());
     expect(container.querySelector('[data-testid="mermaid-diagram"]')).toBeNull();
-  });
+  }, 15_000);
 });
 
 describe("MarkdownPreview — colon false-positives (#workbench live finding)", () => {

package/src/markdown-toolbar/markdown-toolbar.stories.tsx

@@ -18,6 +18,9 @@ const meta = {
     docs: {
       description: {
         component:
+          "The markdown SOURCE-pane toolbar; the general-purpose roving control strip is " +
+          "`Layout/Toolbar` — see " +
+          "[Choosing between similar components](?path=/docs/docs-choosing-between-similar-components--docs). " +
           "Formatting chrome for the markdown SOURCE pane, composed from @elabs-ai/components-ui. " +
           "The Insert menu is driven by the slash-command registry, so source mode " +
           "reaches the same brand blocks as the WYSIWYG `/` menu.",

package/src/markdown-workspace/markdown-workspace.test.tsx

@@ -3,6 +3,10 @@ import { createRef } from "react";
 import { afterEach, expect, test, vi } from "vitest";
 
 import type { SlashCommand } from "../markdown-editor/slash";
+import {
+  hasPendingMilkdownTeardown,
+  waitForPendingMilkdownTeardown,
+} from "../markdown-editor/milkdown-react/use-get-editor";
 
 // ---------------------------------------------------------------------------
 // Monaco mock — extended with revealLine / revealLineInCenter / getLineCount
@@ -83,8 +87,15 @@ vi.mock("monaco-editor", () => ({
 
 import { MarkdownWorkspace, type MarkdownWorkspaceHandle } from "./markdown-workspace";
 
-afterEach(() => {
+// #65 — `cleanup()` unmounts synchronously but Milkdown's own `editor.destroy()`
+// is async (`@milkdown/ctx` schedules an internal cleanup timer inside it), so
+// returning here without waiting let that timer fire after Vitest recycled this
+// file's jsdom environment: `ReferenceError: removeEventListener is not defined`.
+// Await every pending Milkdown teardown (tracked in `use-get-editor.ts`) before
+// the next test's `vi.clearAllMocks()` / setup runs.
+afterEach(async () => {
   cleanup();
+  await waitForPendingMilkdownTeardown();
   vi.clearAllMocks();
 });
 
@@ -98,6 +109,25 @@ test("renders the mode switcher and the WYSIWYG editor", async () => {
   await waitFor(() => expect(screen.getByText("Hello")).toBeInTheDocument());
 });
 
+// #65 — regression lock for the awaitable Milkdown-destroy handle itself. Proves
+// (a) unmounting a Milkdown-backed surface registers a real pending teardown
+// (not a no-op — a reverted fix would leave nothing tracked and fail the first
+// assertion), and (b) awaiting the exposed handle actually drains it rather than
+// resolving early. Five mount/unmount cycles back to back so a leak in the
+// tracking Set itself (an entry that never gets removed) would also fail.
+test("#65 awaits Milkdown teardown on unmount via the exposed handle", async () => {
+  for (let i = 0; i < 5; i += 1) {
+    const { unmount } = render(<MarkdownWorkspace defaultMode="wysiwyg" defaultValue="# Hello" />);
+    await waitFor(() => expect(screen.getByText("Hello")).toBeInTheDocument());
+
+    unmount();
+    expect(hasPendingMilkdownTeardown()).toBe(true);
+
+    await waitForPendingMilkdownTeardown();
+    expect(hasPendingMilkdownTeardown()).toBe(false);
+  }
+});
+
 // #270 — focusWriting opt-out
 test("focusWriting={false} hides the Focus toggle in wysiwyg mode", () => {
   render(<MarkdownWorkspace defaultMode="wysiwyg" focusWriting={false} />);

package/src/mermaid-diagram/mermaid-viewer.tsx

@@ -278,7 +278,7 @@ export function MermaidViewer({ svg, label }: { svg: string; label: string }) {
                 className={cn(
                   "w-full truncate rounded-md px-2 py-1.5 text-start text-caption transition-colors duration-fast ease-standard motion-reduce:transition-none",
                   "hover:bg-accent hover:text-accent-foreground",
-                  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
+                  "focus-ring-inset",
                   activeHit === hit.id
                     ? "bg-accent font-medium text-foreground"
                     : "text-muted-foreground",

package/src/prose/prose.stories.tsx

@@ -9,6 +9,9 @@ const meta = {
     docs: {
       description: {
         component:
+          "The typographic primitives every markdown renderer maps onto, not a renderer " +
+          "itself — see " +
+          "[Choosing between similar components](?path=/docs/docs-choosing-between-similar-components--docs). " +
           "Token-driven typography primitives the markdown preview maps onto: Heading, " +
           "Text, Link, List, Blockquote, InlineCode. Generic and theme-safe.",
       },

package/src/prose/prose.test.ts

@@ -0,0 +1,54 @@
+/**
+ * The teeth behind "one prose source, several renderers".
+ *
+ * `@elabs-ai/components-ui` owns the canonical `Prose*` set; this package
+ * re-exports it under the short names the `@elabs-ai/components-editor/markdown`
+ * surface has always used (ADR-0012 own/re-export model, #188). The whole claim
+ * that a `Prose*` change cannot drift the editor is that these are the SAME
+ * function objects — not two implementations that happen to agree today.
+ *
+ * Nothing enforced that. A future refactor could quietly replace a line here
+ * with a local component of the same name and every render test in
+ * `prose.test.tsx` would keep passing, because those assert BEHAVIOUR. These
+ * assert IDENTITY, which is the property the re-export actually promises.
+ *
+ * The import below is the package BARREL (`@elabs-ai/components-ui`), never a
+ * deep path into its source. A deep path can resolve to a second module
+ * instance whose exports are different objects with identical behaviour — the
+ * assertion would then fail for a reason that has nothing to do with the
+ * re-export, or (worse, with a different resolver) pass vacuously. The barrel is
+ * exactly what `prose.tsx` imports, so this compares like with like.
+ */
+import { describe, expect, it } from "vitest";
+
+import {
+  ProseBlockquote,
+  ProseHeading,
+  ProseInlineCode,
+  ProseLink,
+  ProseList,
+  ProseListItem,
+  ProseText,
+} from "@elabs-ai/components-ui";
+
+import { Blockquote, Heading, InlineCode, Link, List, ListItem, Text } from "./prose";
+
+describe("prose re-export identity", () => {
+  it.each([
+    ["Heading", Heading, ProseHeading],
+    ["Text", Text, ProseText],
+    ["Link", Link, ProseLink],
+    ["List", List, ProseList],
+    ["ListItem", ListItem, ProseListItem],
+    ["Blockquote", Blockquote, ProseBlockquote],
+    ["InlineCode", InlineCode, ProseInlineCode],
+  ])("%s is the same object as the ui primitive it re-exports", (_name, short, canonical) => {
+    expect(short).toBe(canonical);
+  });
+
+  it("re-exports all seven, so the list above cannot silently shrink", () => {
+    const shortNames = [Heading, Text, Link, List, ListItem, Blockquote, InlineCode];
+    expect(shortNames).toHaveLength(7);
+    expect(shortNames.every((c) => typeof c !== "undefined")).toBe(true);
+  });
+});

package/src/prose/prose.tsx

@@ -4,6 +4,13 @@
  * `components/typography/prose.tsx`; this package derives). The
  * `@elabs-ai/components-editor/markdown` public surface keeps the original names
  * (Heading, Text, Link, List, ListItem, Blockquote, InlineCode).
+ *
+ * These must stay the SAME objects, not lookalikes: that identity is the whole
+ * reason a `Prose*` change cannot drift the editor away from the chat view or
+ * the file viewer. `prose.test.ts` asserts it against the package barrel — if
+ * you replace a line below with a local component, that test goes red while the
+ * behaviour tests in `prose.test.tsx` stay green, which is exactly the failure
+ * it exists to catch.
  */
 export {
   ProseHeading as Heading,