@elabs-ai/components-editor 4.0.0

package/src/markdown-toolbar/index.ts

@@ -0,0 +1,8 @@
+export { MarkdownToolbar, type MarkdownToolbarProps } from "./markdown-toolbar";
+export {
+  wrapSelection,
+  toggleLinePrefix,
+  insertLink,
+  insertHorizontalRule,
+  insertDirective,
+} from "./markdown-commands";

package/src/markdown-toolbar/markdown-commands.test.ts

@@ -0,0 +1,84 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+// Mock monaco's Range/Selection value classes (pure data — no real editor engine).
+vi.mock("monaco-editor", () => ({
+  Range: class {
+    constructor(
+      public startLineNumber: number,
+      public startColumn: number,
+      public endLineNumber: number,
+      public endColumn: number,
+    ) {}
+  },
+  Selection: class {
+    constructor(
+      public startLineNumber: number,
+      public startColumn: number,
+      public endLineNumber: number,
+      public endColumn: number,
+    ) {}
+  },
+}));
+
+import { insertHorizontalRule, toggleLinePrefix, wrapSelection } from "./markdown-commands";
+
+type Edit = { text: string; range: { startColumn: number } };
+
+function fakeEditor(lines: string[], selected: string) {
+  const edits: Edit[] = [];
+  const selection = {
+    startLineNumber: 1,
+    startColumn: 1,
+    endLineNumber: lines.length,
+    endColumn: (lines.at(-1)?.length ?? 0) + 1,
+  };
+  const model = {
+    getValueInRange: () => selected,
+    getLineContent: (n: number) => lines[n - 1] ?? "",
+    getLineMaxColumn: (n: number) => (lines[n - 1]?.length ?? 0) + 1,
+  };
+  const editor = {
+    getModel: () => model,
+    getSelection: () => selection,
+    executeEdits: (_src: string, e: Edit[]) => edits.push(...e),
+    setSelection: vi.fn(),
+    focus: vi.fn(),
+  };
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  return { editor: editor as any, edits };
+}
+
+describe("markdown commands", () => {
+  let warn: ReturnType<typeof vi.spyOn>;
+  beforeEach(() => {
+    warn = vi.spyOn(console, "warn").mockImplementation(() => undefined);
+  });
+
+  it("wraps the selection with markers", () => {
+    const { editor, edits } = fakeEditor(["Bold me"], "Bold me");
+    wrapSelection(editor, "**");
+    expect(edits[0]?.text).toBe("**Bold me**");
+    warn.mockRestore();
+  });
+
+  it("adds a line prefix when absent", () => {
+    const { editor, edits } = fakeEditor(["hello"], "hello");
+    toggleLinePrefix(editor, "# ");
+    expect(edits[0]?.text).toBe("# ");
+    warn.mockRestore();
+  });
+
+  it("removes the line prefix when already present (toggle)", () => {
+    const { editor, edits } = fakeEditor(["# hello"], "# hello");
+    toggleLinePrefix(editor, "# ");
+    expect(edits[0]?.text).toBe("");
+    warn.mockRestore();
+  });
+
+  it("inserts a horizontal rule", () => {
+    const { editor, edits } = fakeEditor(["para"], "");
+    insertHorizontalRule(editor);
+    expect(edits[0]?.text).toContain("---");
+    warn.mockRestore();
+  });
+});

package/src/markdown-toolbar/markdown-commands.ts

@@ -0,0 +1,104 @@
+/**
+ * Markdown editing commands that operate on a Monaco editor instance (the source
+ * pane). Pure functions over the editor — the toolbar UI wires buttons to these.
+ */
+import * as monaco from "monaco-editor";
+
+import type { MonacoCodeEditor } from "../code-editor";
+
+/** Wrap the current selection (or insert a placeholder) with `before`/`after`. */
+export function wrapSelection(
+  editor: MonacoCodeEditor,
+  before: string,
+  after: string = before,
+  placeholder = "text",
+): void {
+  const model = editor.getModel();
+  const selection = editor.getSelection();
+  if (!model || !selection) return;
+
+  const selected = model.getValueInRange(selection) || placeholder;
+  editor.executeEdits("markdown-toolbar", [
+    { range: selection, text: `${before}${selected}${after}`, forceMoveMarkers: true },
+  ]);
+  // Re-select the inner text so the user can keep typing over the placeholder.
+  const startCol = selection.startColumn + before.length;
+  editor.setSelection(
+    new monaco.Selection(
+      selection.startLineNumber,
+      startCol,
+      selection.startLineNumber,
+      startCol + selected.length,
+    ),
+  );
+  editor.focus();
+}
+
+/** Toggle a line prefix (`# `, `> `, `- `, `1. `) on every selected line. */
+export function toggleLinePrefix(editor: MonacoCodeEditor, prefix: string): void {
+  const model = editor.getModel();
+  const selection = editor.getSelection();
+  if (!model || !selection) return;
+
+  const edits: monaco.editor.IIdentifiedSingleEditOperation[] = [];
+  const allPrefixed = (() => {
+    for (let line = selection.startLineNumber; line <= selection.endLineNumber; line++) {
+      if (!model.getLineContent(line).startsWith(prefix)) return false;
+    }
+    return true;
+  })();
+
+  for (let line = selection.startLineNumber; line <= selection.endLineNumber; line++) {
+    const content = model.getLineContent(line);
+    if (allPrefixed) {
+      edits.push({
+        range: new monaco.Range(line, 1, line, prefix.length + 1),
+        text: "",
+      });
+    } else if (!content.startsWith(prefix)) {
+      edits.push({ range: new monaco.Range(line, 1, line, 1), text: prefix });
+    }
+  }
+  editor.executeEdits("markdown-toolbar", edits);
+  editor.focus();
+}
+
+/** Insert `[selection](url)` (or a placeholder link). */
+export function insertLink(editor: MonacoCodeEditor): void {
+  const model = editor.getModel();
+  const selection = editor.getSelection();
+  if (!model || !selection) return;
+  const label = model.getValueInRange(selection) || "label";
+  editor.executeEdits("markdown-toolbar", [
+    { range: selection, text: `[${label}](https://)`, forceMoveMarkers: true },
+  ]);
+  editor.focus();
+}
+
+/** Insert a horizontal rule on its own line below the cursor. */
+export function insertHorizontalRule(editor: MonacoCodeEditor): void {
+  const selection = editor.getSelection();
+  if (!selection) return;
+  const line = selection.endLineNumber;
+  const col = editor.getModel()?.getLineMaxColumn(line) ?? 1;
+  editor.executeEdits("markdown-toolbar", [
+    { range: new monaco.Range(line, col, line, col), text: `\n\n---\n`, forceMoveMarkers: true },
+  ]);
+  editor.focus();
+}
+
+/** Insert a brand directive block at the cursor (e.g. card/callout/metric/timeline). */
+export function insertDirective(editor: MonacoCodeEditor, snippet: string): void {
+  const selection = editor.getSelection();
+  if (!selection) return;
+  const line = selection.endLineNumber;
+  const col = editor.getModel()?.getLineMaxColumn(line) ?? 1;
+  editor.executeEdits("markdown-toolbar", [
+    {
+      range: new monaco.Range(line, col, line, col),
+      text: `\n\n${snippet}\n`,
+      forceMoveMarkers: true,
+    },
+  ]);
+  editor.focus();
+}

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

@@ -0,0 +1,56 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, waitFor, within } from "storybook/test";
+
+import type { MonacoCodeEditor } from "../code-editor";
+import { BRAND_SLASH_COMMANDS } from "../markdown-editor/slash";
+import { MarkdownToolbar } from "./markdown-toolbar";
+
+// A no-op stand-in so the toolbar's controls (and the Insert trigger) are enabled
+// in the story. Listing the Insert items never calls editor methods — only an
+// item click does — so an empty object is enough to render and open the menu.
+const fakeEditor = {} as unknown as MonacoCodeEditor;
+
+const meta = {
+  title: "Editor/MarkdownToolbar",
+  component: MarkdownToolbar,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "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.",
+      },
+    },
+  },
+} satisfies Meta<typeof MarkdownToolbar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: { editor: fakeEditor },
+};
+
+/**
+ * Source / split Insert-menu parity (A4): passing the slash registry as
+ * `insertCommands` makes the Insert menu list every command that carries a
+ * source-mode `snippet` — Card · Callout · Metric · Timeline · Iterate · Pivot ·
+ * Calc — so a markdown-first author can insert `/calc`, `/iterate` and `/pivot`
+ * from the toolbar, not only from the WYSIWYG slash menu.
+ */
+export const InsertParity: Story = {
+  args: { editor: fakeEditor, insertCommands: BRAND_SLASH_COMMANDS },
+  play: async ({ canvas, canvasElement, userEvent }) => {
+    await userEvent.click(canvas.getByRole("button", { name: "Insert block" }));
+    const menu = within(canvasElement.ownerDocument.body);
+    // The blocks the old hardcoded 4-item menu lacked are now present.
+    // waitFor rides out the DropdownMenu entrance animation (opacity starts
+    // at 0) — the dropdown-menu.stories.tsx precedent (#278 D2).
+    const calc = await menu.findByRole("menuitem", { name: "Calc" });
+    await waitFor(() => expect(calc).toBeVisible());
+    await waitFor(() => expect(menu.getByRole("menuitem", { name: "Iterate" })).toBeVisible());
+    await waitFor(() => expect(menu.getByRole("menuitem", { name: "Pivot" })).toBeVisible());
+  },
+};

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

@@ -0,0 +1,263 @@
+"use client";
+
+/**
+ * MarkdownToolbar — formatting chrome for the markdown SOURCE pane, composed
+ * entirely from @elabs-ai/components-ui (Button, Tooltip, Separator, DropdownMenu). Actions run
+ * against a Monaco editor instance via the pure commands in markdown-commands.ts.
+ * Buttons disable when no editor is mounted.
+ */
+import {
+  Button,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+  Separator,
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@elabs-ai/components-ui";
+import { cn } from "@elabs-ai/components-ui/lib/cn";
+import {
+  Bold,
+  ChevronDown,
+  Code2,
+  Heading,
+  Italic,
+  Link2,
+  List,
+  ListOrdered,
+  Minus,
+  Quote,
+  SquarePlus,
+} from "lucide-react";
+import { forwardRef, Fragment, type HTMLAttributes, type ReactNode } from "react";
+
+import type { MonacoCodeEditor } from "../code-editor";
+import { groupSlashCommands, type SlashCommand } from "../markdown-editor/slash";
+import {
+  insertDirective,
+  insertHorizontalRule,
+  insertLink,
+  toggleLinePrefix,
+  wrapSelection,
+} from "./markdown-commands";
+
+export interface MarkdownToolbarProps extends HTMLAttributes<HTMLDivElement> {
+  /** The Monaco editor instance to act on (from CodeEditor ref/onMount). */
+  editor: MonacoCodeEditor | null;
+  /** Extra controls rendered on the right (e.g. a mode switch). */
+  actions?: ReactNode;
+  /**
+   * Drives the **Insert** menu. When set, the menu lists every command that
+   * carries a `snippet` (grouped by `group`), inserting that markdown at the
+   * caret — so the source / split pane reaches the SAME blocks as the WYSIWYG
+   * slash menu (`/calc`, `/iterate`, `/pivot`, plus any consumer commands).
+   * When omitted, the menu falls back to the four built-in directive snippets.
+   * (A4)
+   */
+  insertCommands?: SlashCommand[];
+}
+
+/** A command that actually carries a source-mode snippet. */
+type InsertableCommand = SlashCommand & { snippet: string };
+
+const DIRECTIVE_SNIPPETS: { label: string; snippet: string }[] = [
+  { label: "Card", snippet: `:::card{title="Title"}\nContent\n:::` },
+  { label: "Callout", snippet: `:::callout{type="info" title="Note"}\nMessage\n:::` },
+  { label: "Metric", snippet: `::metric{label="Label" value="0" description="detail"}` },
+  {
+    label: "Timeline",
+    snippet: `:::timeline\n- (done) Step one\n- (active) Step two\n- (pending) Step three\n:::`,
+  },
+];
+
+export const MarkdownToolbar = forwardRef<HTMLDivElement, MarkdownToolbarProps>(
+  function MarkdownToolbar({ editor, actions, insertCommands, className, ...props }, ref) {
+    const disabled = !editor;
+    const run = (fn: (e: MonacoCodeEditor) => void) => () => {
+      if (editor) fn(editor);
+    };
+
+    // The Insert menu is driven by the slash registry when provided (A4): only
+    // commands that carry a source-mode `snippet`, grouped by `group`.
+    const insertGroups = insertCommands
+      ? groupSlashCommands(
+          insertCommands.filter((c): c is InsertableCommand => typeof c.snippet === "string"),
+        )
+      : null;
+
+    const IconButton = ({
+      label,
+      icon,
+      onClick,
+    }: {
+      label: string;
+      icon: ReactNode;
+      onClick: () => void;
+    }) => (
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon-sm"
+            disabled={disabled}
+            onClick={onClick}
+            aria-label={label}
+          >
+            {icon}
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>{label}</TooltipContent>
+      </Tooltip>
+    );
+
+    return (
+      <TooltipProvider delayDuration={300}>
+        <div
+          ref={ref}
+          role="toolbar"
+          aria-label="Markdown formatting"
+          className={cn(
+            "flex h-10 shrink-0 items-center gap-0.5 border-b border-border bg-surface px-2",
+            className,
+          )}
+          {...props}
+        >
+          <IconButton
+            label="Bold"
+            icon={<Bold className="size-4" />}
+            onClick={run((e) => wrapSelection(e, "**"))}
+          />
+          <IconButton
+            label="Italic"
+            icon={<Italic className="size-4" />}
+            onClick={run((e) => wrapSelection(e, "*"))}
+          />
+          <IconButton
+            label="Inline code"
+            icon={<Code2 className="size-4" />}
+            onClick={run((e) => wrapSelection(e, "`"))}
+          />
+          <IconButton label="Link" icon={<Link2 className="size-4" />} onClick={run(insertLink)} />
+
+          <Separator orientation="vertical" className="mx-1 h-5" />
+
+          <DropdownMenu>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <DropdownMenuTrigger asChild>
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="sm"
+                    disabled={disabled}
+                    className="gap-1"
+                    aria-label="Heading level"
+                  >
+                    <Heading className="size-4" />
+                    <ChevronDown className="size-3" />
+                  </Button>
+                </DropdownMenuTrigger>
+              </TooltipTrigger>
+              <TooltipContent>Heading</TooltipContent>
+            </Tooltip>
+            <DropdownMenuContent align="start">
+              {([1, 2, 3] as const).map((level) => (
+                <DropdownMenuItem
+                  key={level}
+                  onSelect={run((e) => toggleLinePrefix(e, `${"#".repeat(level)} `))}
+                >
+                  Heading {level}
+                </DropdownMenuItem>
+              ))}
+            </DropdownMenuContent>
+          </DropdownMenu>
+
+          <IconButton
+            label="Quote"
+            icon={<Quote className="size-4" />}
+            onClick={run((e) => toggleLinePrefix(e, "> "))}
+          />
+          <IconButton
+            label="Bullet list"
+            icon={<List className="size-4" />}
+            onClick={run((e) => toggleLinePrefix(e, "- "))}
+          />
+          <IconButton
+            label="Numbered list"
+            icon={<ListOrdered className="size-4" />}
+            onClick={run((e) => toggleLinePrefix(e, "1. "))}
+          />
+          <IconButton
+            label="Divider"
+            icon={<Minus className="size-4" />}
+            onClick={run(insertHorizontalRule)}
+          />
+
+          <Separator orientation="vertical" className="mx-1 h-5" />
+
+          <DropdownMenu>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <DropdownMenuTrigger asChild>
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="sm"
+                    disabled={disabled}
+                    className="gap-1"
+                    aria-label="Insert block"
+                  >
+                    <SquarePlus className="size-4" />
+                    <span className="text-xs">Insert</span>
+                  </Button>
+                </DropdownMenuTrigger>
+              </TooltipTrigger>
+              <TooltipContent>Insert brand block</TooltipContent>
+            </Tooltip>
+            <DropdownMenuContent align="start">
+              {insertGroups && insertGroups.length > 0
+                ? insertGroups.map(({ group, commands }, gi) => (
+                    <Fragment key={group}>
+                      {gi > 0 ? <DropdownMenuSeparator /> : null}
+                      <DropdownMenuLabel className="text-meta font-medium text-muted-foreground">
+                        {group}
+                      </DropdownMenuLabel>
+                      {(commands as InsertableCommand[]).map((cmd) => (
+                        <DropdownMenuItem
+                          key={cmd.id}
+                          className="gap-2"
+                          onSelect={run((e) => insertDirective(e, cmd.snippet))}
+                        >
+                          {cmd.icon ? (
+                            <span className="flex size-4 shrink-0 items-center justify-center text-muted-foreground [&_svg]:size-4">
+                              {cmd.icon}
+                            </span>
+                          ) : null}
+                          {cmd.label}
+                        </DropdownMenuItem>
+                      ))}
+                    </Fragment>
+                  ))
+                : DIRECTIVE_SNIPPETS.map(({ label, snippet }) => (
+                    <DropdownMenuItem
+                      key={label}
+                      onSelect={run((e) => insertDirective(e, snippet))}
+                    >
+                      {label}
+                    </DropdownMenuItem>
+                  ))}
+            </DropdownMenuContent>
+          </DropdownMenu>
+
+          {actions ? <div className="ml-auto flex items-center gap-1.5">{actions}</div> : null}
+        </div>
+      </TooltipProvider>
+    );
+  },
+);

package/src/markdown-workspace/focus-writing.test.ts

@@ -0,0 +1,52 @@
+import { describe, expect, it } from "vitest";
+
+import { topLevelBlockOf, typewriterDelta } from "./focus-writing";
+
+describe("topLevelBlockOf", () => {
+  const build = () => {
+    const root = document.createElement("div");
+    root.innerHTML = `<p id="a">one</p><ul id="list"><li id="li">two <strong id="deep">deep</strong></li></ul>`;
+    return root;
+  };
+
+  it("returns the node itself when it is a direct child", () => {
+    const root = build();
+    const a = root.querySelector("#a")!;
+    expect(topLevelBlockOf(root, a)).toBe(a);
+  });
+
+  it("walks nested nodes up to the top-level block", () => {
+    const root = build();
+    const deep = root.querySelector("#deep")!.firstChild!; // the text node
+    expect(topLevelBlockOf(root, deep)).toBe(root.querySelector("#list"));
+  });
+
+  it("returns null for nodes outside the root (and for null)", () => {
+    const root = build();
+    const stranger = document.createElement("p");
+    expect(topLevelBlockOf(root, stranger)).toBeNull();
+    expect(topLevelBlockOf(root, null)).toBeNull();
+  });
+});
+
+describe("typewriterDelta", () => {
+  // Host: top 100, height 600 → center 400; band 0.22 → tolerance ±66.
+  it("returns 0 while the caret sits inside the center band", () => {
+    expect(typewriterDelta(390, 20, 100, 600)).toBe(0); // mid 400 = center
+    expect(typewriterDelta(440, 20, 100, 600)).toBe(0); // mid 450, off 50 < 66
+  });
+
+  it("returns a positive delta when the caret drifts below center", () => {
+    const d = typewriterDelta(580, 20, 100, 600); // mid 590, off 190
+    expect(d).toBe(190);
+  });
+
+  it("returns a negative delta when the caret drifts above center", () => {
+    const d = typewriterDelta(120, 20, 100, 600); // mid 130, off -270
+    expect(d).toBe(-270);
+  });
+
+  it("is inert for an unmeasured host", () => {
+    expect(typewriterDelta(0, 0, 0, 0)).toBe(0);
+  });
+});

package/src/markdown-workspace/focus-writing.ts

@@ -0,0 +1,38 @@
+/**
+ * Focus-writing helpers (Ulysses Phase A) — the pure half of the workspace's
+ * "Focus" toggle: paragraph focus (mark the top-level block that owns the
+ * selection) and typewriter scrolling (keep the caret in a vertical band
+ * around the scroller's center). Engine-agnostic: plain DOM walking, no
+ * ProseMirror plugin surface — testable in jsdom without booting Milkdown.
+ */
+
+/** The editor-root CHILD that contains `node` (the active top-level block). */
+export function topLevelBlockOf(editorRoot: Element, node: Node | null): Element | null {
+  let current: Node | null = node;
+  while (current && current.parentNode !== editorRoot) {
+    current = current.parentNode;
+  }
+  return current instanceof Element ? current : null;
+}
+
+/**
+ * Typewriter scroll adjustment: how far the scroller must move so the caret
+ * sits back in the center band. Returns 0 while the caret is inside the band
+ * (no jitter on every keystroke — only re-center when it drifts out).
+ *
+ * @param band fraction of the scroller height treated as "centered enough".
+ */
+export function typewriterDelta(
+  caretTop: number,
+  caretHeight: number,
+  hostTop: number,
+  hostHeight: number,
+  band = 0.22,
+): number {
+  if (hostHeight <= 0) return 0;
+  const center = hostTop + hostHeight / 2;
+  const caretMid = caretTop + caretHeight / 2;
+  const tolerance = (hostHeight * band) / 2;
+  const off = caretMid - center;
+  return Math.abs(off) <= tolerance ? 0 : off;
+}

package/src/markdown-workspace/index.ts

@@ -0,0 +1,6 @@
+export {
+  MarkdownWorkspace,
+  type MarkdownWorkspaceHandle,
+  type MarkdownWorkspaceProps,
+  type MarkdownWorkspaceMode,
+} from "./markdown-workspace";