@elabs-ai/components-editor 4.0.0

package/src/editor-context-menu/editor-context-menu.tsx

@@ -0,0 +1,120 @@
+"use client";
+
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuTrigger,
+} from "@elabs-ai/components-ui";
+import type * as Monaco from "monaco-editor";
+import { type ReactNode } from "react";
+
+export interface EditorContextMenuProps {
+  /** The Monaco editor instance to act on (null until mounted). */
+  editor: Monaco.editor.IStandaloneCodeEditor | null;
+  /** Hide editing items (cut/paste/format) for read-only editors. */
+  readOnly?: boolean;
+  /** The editor element wrapped as the right-click trigger. */
+  children: ReactNode;
+}
+
+/**
+ * Replaces Monaco's built-in context menu with brand-ui's `ContextMenu`, wired
+ * to the editor instance. This is the "reuse our components instead of Monaco's
+ * built-in ones" path for the right-click menu — set `contextMenu="brand"` on
+ * `CodeEditor` (the default) and it disables Monaco's menu and renders this.
+ *
+ * Clipboard ops use the async Clipboard API + `executeEdits` (reliable in the
+ * browser); other entries delegate to the editor's own actions.
+ */
+export function EditorContextMenu({ editor, readOnly = false, children }: EditorContextMenuProps) {
+  const selection = () => {
+    if (!editor) return null;
+    const model = editor.getModel();
+    const sel = editor.getSelection();
+    return model && sel ? { editor, model, sel } : null;
+  };
+
+  const copy = async () => {
+    const ctx = selection();
+    if (!ctx) return;
+    const text = ctx.model.getValueInRange(ctx.sel);
+    if (text && typeof navigator !== "undefined" && navigator.clipboard) {
+      await navigator.clipboard.writeText(text);
+    }
+    ctx.editor.focus();
+  };
+
+  const cut = async () => {
+    const ctx = selection();
+    if (!ctx) return;
+    const text = ctx.model.getValueInRange(ctx.sel);
+    if (text && typeof navigator !== "undefined" && navigator.clipboard) {
+      await navigator.clipboard.writeText(text);
+      ctx.editor.executeEdits("brand-cut", [{ range: ctx.sel, text: "", forceMoveMarkers: true }]);
+    }
+    ctx.editor.focus();
+  };
+
+  const paste = async () => {
+    const ctx = selection();
+    if (!ctx || typeof navigator === "undefined" || !navigator.clipboard) return;
+    const text = await navigator.clipboard.readText();
+    ctx.editor.executeEdits("brand-paste", [{ range: ctx.sel, text, forceMoveMarkers: true }]);
+    ctx.editor.focus();
+  };
+
+  const selectAll = () => {
+    const ctx = selection();
+    if (!ctx) return;
+    ctx.editor.setSelection(ctx.model.getFullModelRange());
+    ctx.editor.focus();
+  };
+
+  const runAction = (id: string) => {
+    editor?.focus();
+    void editor?.getAction(id)?.run();
+  };
+
+  return (
+    <ContextMenu>
+      <ContextMenuTrigger asChild>{children}</ContextMenuTrigger>
+      <ContextMenuContent className="w-52">
+        {!readOnly ? (
+          <ContextMenuItem onSelect={() => void cut()}>
+            Cut
+            <ContextMenuShortcut>⌘X</ContextMenuShortcut>
+          </ContextMenuItem>
+        ) : null}
+        <ContextMenuItem onSelect={() => void copy()}>
+          Copy
+          <ContextMenuShortcut>⌘C</ContextMenuShortcut>
+        </ContextMenuItem>
+        {!readOnly ? (
+          <ContextMenuItem onSelect={() => void paste()}>
+            Paste
+            <ContextMenuShortcut>⌘V</ContextMenuShortcut>
+          </ContextMenuItem>
+        ) : null}
+        <ContextMenuSeparator />
+        <ContextMenuItem onSelect={selectAll}>
+          Select all
+          <ContextMenuShortcut>⌘A</ContextMenuShortcut>
+        </ContextMenuItem>
+        {!readOnly ? (
+          <ContextMenuItem onSelect={() => runAction("editor.action.formatDocument")}>
+            Format document
+            <ContextMenuShortcut>⇧⌥F</ContextMenuShortcut>
+          </ContextMenuItem>
+        ) : null}
+        <ContextMenuSeparator />
+        <ContextMenuItem onSelect={() => runAction("editor.action.quickCommand")}>
+          Command palette
+          <ContextMenuShortcut>F1</ContextMenuShortcut>
+        </ContextMenuItem>
+      </ContextMenuContent>
+    </ContextMenu>
+  );
+}

package/src/editor-context-menu/index.ts

@@ -0,0 +1 @@
+export { EditorContextMenu, type EditorContextMenuProps } from "./editor-context-menu";

package/src/editor-toolbar/editor-toolbar.tsx

@@ -0,0 +1,83 @@
+"use client";
+
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@elabs-ai/components-ui";
+import { cn } from "@elabs-ai/components-ui/lib/cn";
+import { forwardRef, type HTMLAttributes, type ReactNode } from "react";
+import { CopyButton } from "../copy-button";
+import { EDITOR_LANGUAGES, type EditorLanguage } from "../lib/languages";
+
+export interface EditorToolbarProps extends HTMLAttributes<HTMLDivElement> {
+  /** Filename shown on the left (e.g. "index.ts"). */
+  filename?: ReactNode;
+  /** Active language id; shows a language picker when `onLanguageChange` is set. */
+  language?: string;
+  /** Called when the user picks a language. Omit to hide the picker. */
+  onLanguageChange?: (language: string) => void;
+  /** Languages offered in the picker. Defaults to {@link EDITOR_LANGUAGES}. */
+  languages?: EditorLanguage[];
+  /** Text copied by the copy button. Omit to hide the button. */
+  copyValue?: string;
+  /** Extra actions rendered before the copy button (brand-ui buttons, etc.). */
+  actions?: ReactNode;
+}
+
+/**
+ * Brand-ui chrome for the editors — the part that genuinely reuses our
+ * components. Renders a filename label, an optional language `Select` and a copy
+ * `Button`. The editing surface itself is Monaco; this is the frame around it.
+ */
+export const EditorToolbar = forwardRef<HTMLDivElement, EditorToolbarProps>(function EditorToolbar(
+  {
+    filename,
+    language,
+    onLanguageChange,
+    languages = EDITOR_LANGUAGES,
+    copyValue,
+    actions,
+    className,
+    ...props
+  },
+  ref,
+) {
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        "flex h-10 shrink-0 items-center gap-2 border-b border-border bg-surface px-3",
+        className,
+      )}
+      {...props}
+    >
+      {filename != null ? (
+        <span className="truncate text-sm font-medium text-foreground">{filename}</span>
+      ) : null}
+
+      <div className="ml-auto flex items-center gap-1.5">
+        {actions}
+
+        {onLanguageChange ? (
+          <Select value={language} onValueChange={onLanguageChange}>
+            <SelectTrigger size="sm" className="h-7 w-[140px]" aria-label="Language">
+              <SelectValue placeholder="Language" />
+            </SelectTrigger>
+            <SelectContent>
+              {languages.map((l) => (
+                <SelectItem key={l.id} value={l.id}>
+                  {l.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        ) : null}
+
+        {copyValue != null ? <CopyButton value={copyValue} /> : null}
+      </div>
+    </div>
+  );
+});

package/src/editor-toolbar/index.ts

@@ -0,0 +1 @@
+export { EditorToolbar, type EditorToolbarProps } from "./editor-toolbar";

package/src/index.ts

@@ -0,0 +1,48 @@
+/**
+ * @elabs-ai/components-editor — a token-themed Monaco (VS Code) editor wrapped as brand-ui
+ * components.
+ *
+ * Monaco is a self-rendering editor engine; this package wraps it the way
+ * @elabs-ai/components-flow wraps React Flow and @elabs-ai/components-data wraps TanStack. The editing
+ * surface + widgets are Monaco's, recolored from the active brand theme via the
+ * theming bridge; the chrome (toolbar, file tabs, copy button) is brand-ui.
+ *
+ * Worker setup (for completions/diagnostics) — import ONCE at the app entry:
+ *   import "@elabs-ai/components-editor/monaco-environment";   // Vite apps
+ */
+export {
+  CodeEditor,
+  type CodeEditorProps,
+  type MonacoCodeEditor,
+  type EditorAction,
+} from "./code-editor";
+export { DiffEditor, type DiffEditorProps, type MonacoDiffEditor } from "./diff-editor";
+export {
+  MarkdownEditor,
+  type MarkdownEditorProps,
+  type MarkdownEditorHandle,
+  type EmbedAssetFn,
+} from "./markdown-editor";
+export {
+  CodeWorkspace,
+  type CodeWorkspaceHandle,
+  type CodeWorkspaceProps,
+  type EditorFile,
+} from "./code-workspace";
+export {
+  monacoContentAccess,
+  type EditorContentAccess,
+  type EditorSelection,
+} from "./lib/editor-content-access";
+export { EditorToolbar, type EditorToolbarProps } from "./editor-toolbar";
+export { EditorContextMenu, type EditorContextMenuProps } from "./editor-context-menu";
+export { CopyButton, type CopyButtonProps } from "./copy-button";
+
+// Theming bridge + language helpers (advanced consumers / custom chrome).
+export { applyBrandTheme, buildBrandThemeData, brandThemeId } from "./lib/monaco-theme-bridge";
+export { useDataTheme, type DataThemeState } from "./lib/use-data-theme";
+export { EDITOR_LANGUAGES, languageLabel, type EditorLanguage } from "./lib/languages";
+
+// Re-export the monaco namespace so consumers can build custom editors / wire
+// commands without adding a direct dependency.
+export * as monaco from "monaco-editor";

package/src/lib/editor-completions-monaco.test.ts

@@ -0,0 +1,206 @@
+/**
+ * Unit tests for the Monaco registration lifecycle (#283) —
+ * `attachCompletionsMonaco`'s refcount/dispose behavior + the per-model
+ * scoping that keeps suggestions out of markdown models `@elabs-ai/components-editor` never
+ * attached. Monaco can't render in jsdom, so `monaco-editor` is mocked (the
+ * `markdown-workspace.test.tsx` / `calc-editor-monaco.ts` precedent); the real
+ * suggest-widget UI is verified via `test-storybook`.
+ *
+ * These tests run as ONE ordered sequence (not `vi.resetModules()` per test) so
+ * they exercise the REAL module-singleton refcount across "two workspaces
+ * mounted" the same way the app would: attach, attach again, detach, detach —
+ * asserting `registerCompletionItemProvider` is called exactly once per live
+ * span and disposed only once the last consumer detaches.
+ */
+import { describe, expect, it, vi } from "vitest";
+
+const { registerCompletionItemProvider } = vi.hoisted(() => ({
+  registerCompletionItemProvider: vi.fn(),
+}));
+
+vi.mock("monaco-editor", () => ({
+  languages: {
+    registerCompletionItemProvider,
+    CompletionItemKind: { Text: 18 },
+  },
+}));
+
+import { attachCompletionsMonaco } from "./editor-completions-monaco";
+import type { EditorCompletionProvider } from "./editor-completions";
+
+// ---------------------------------------------------------------------------
+// Minimal Monaco editor mock — mirrors the shape used by
+// markdown-workspace.test.tsx, extended with a mutable model + trigger().
+// ---------------------------------------------------------------------------
+
+function makeModel(id: string, value = "", lineText = "") {
+  return {
+    id,
+    getValue: vi.fn(() => value),
+    getLineContent: vi.fn(() => lineText),
+  };
+}
+
+function makeEditor(initialModel: ReturnType<typeof makeModel>) {
+  let model = initialModel;
+  const contentHandlers: Array<(e: { changes: { text: string }[] }) => void> = [];
+  const modelHandlers: Array<() => void> = [];
+  const disposeContent = vi.fn();
+  const disposeModel = vi.fn();
+
+  return {
+    getModel: vi.fn(() => model),
+    setModel: (m: ReturnType<typeof makeModel>) => {
+      model = m;
+    },
+    onDidChangeModelContent: vi.fn((cb: (e: { changes: { text: string }[] }) => void) => {
+      contentHandlers.push(cb);
+      return { dispose: disposeContent };
+    }),
+    onDidChangeModel: vi.fn((cb: () => void) => {
+      modelHandlers.push(cb);
+      return { dispose: disposeModel };
+    }),
+    trigger: vi.fn(),
+    fireContentChange: (text: string) =>
+      contentHandlers.forEach((cb) => cb({ changes: [{ text }] })),
+    fireModelChange: () => modelHandlers.forEach((cb) => cb()),
+    disposeContent,
+    disposeModel,
+  };
+}
+
+const wikilinkProvider: EditorCompletionProvider = {
+  id: "wikilink",
+  triggerCharacters: ["["],
+  provide: () => [{ label: "note-one", insertText: "note-one]]" }],
+};
+
+// NOTE: no `beforeEach` mock reset here — this suite is intentionally ONE
+// ordered sequence sharing `registerCompletionItemProvider`'s call history, to
+// exercise the real module-singleton refcount across "two workspaces mounted"
+// exactly like the app would (see file doc).
+describe("attachCompletionsMonaco — refcount + dispose lifecycle", () => {
+  const registrationDispose = vi.fn();
+  registerCompletionItemProvider.mockReturnValue({ dispose: registrationDispose });
+
+  const modelA = makeModel("A", "[[no", "[[no");
+  const editorA = makeEditor(modelA);
+  const modelB = makeModel("B", "", "");
+  const editorB = makeEditor(modelB);
+
+  let detachA: () => void;
+  let detachB: () => void;
+  // Mutable so the "rebuilt provider list" test can swap it out from UNDER the
+  // already-attached editorA — exactly what a re-rendered `completions` prop
+  // (a fresh array identity) does, read live via this same getter.
+  let editorAProviders: EditorCompletionProvider[] = [wikilinkProvider];
+
+  it("registers the global provider exactly once for the first attach", () => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    detachA = attachCompletionsMonaco(editorA as any, () => editorAProviders);
+    expect(registerCompletionItemProvider).toHaveBeenCalledTimes(1);
+    expect(registerCompletionItemProvider).toHaveBeenCalledWith("markdown", expect.any(Object));
+  });
+
+  it("a second attach (a second mounted workspace) does NOT re-register", () => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    detachB = attachCompletionsMonaco(editorB as any, () => undefined);
+    expect(registerCompletionItemProvider).toHaveBeenCalledTimes(1);
+  });
+
+  it("scopes suggestions to models THIS module attached — modelA gets suggestions, an unattached model doesn't", async () => {
+    const provideCompletionItems = registerCompletionItemProvider.mock.calls[0]?.[1]
+      .provideCompletionItems as (
+      model: unknown,
+      position: unknown,
+    ) => Promise<{ suggestions: unknown[] }>;
+    const position = { lineNumber: 1, column: 5 };
+
+    const resultA = await provideCompletionItems(modelA, position);
+    expect(resultA.suggestions).toHaveLength(1);
+    expect((resultA.suggestions[0] as { insertText: string }).insertText).toBe("note-one]]");
+
+    const unattached = makeModel("unattached", "[[no", "[[no");
+    const resultUnattached = await provideCompletionItems(unattached, position);
+    expect(resultUnattached.suggestions).toHaveLength(0);
+  });
+
+  it("reads a rebuilt provider list live — no re-registration needed", async () => {
+    const provideCompletionItems = registerCompletionItemProvider.mock.calls[0]?.[1]
+      .provideCompletionItems as (
+      model: unknown,
+      position: unknown,
+    ) => Promise<{ suggestions: unknown[] }>;
+    const position = { lineNumber: 1, column: 5 };
+
+    const before = await provideCompletionItems(modelA, position);
+    expect(before.suggestions).toHaveLength(1);
+
+    // Rebuild the candidate list (a fresh array identity, like a re-rendered
+    // `completions` prop) WITHOUT calling attach again — the SAME attach from
+    // the first test reads this live through the `editorAProviders` closure.
+    editorAProviders = [
+      wikilinkProvider,
+      { id: "second", triggerCharacters: ["["], provide: () => [{ label: "x", insertText: "x" }] },
+    ];
+    const after = await provideCompletionItems(modelA, position);
+    expect(after.suggestions).toHaveLength(2);
+    expect(registerCompletionItemProvider).toHaveBeenCalledTimes(1);
+  });
+
+  it("force-opens the suggest widget when a typed char matches a trigger character", () => {
+    editorA.fireContentChange("[");
+    expect(editorA.trigger).toHaveBeenCalledWith(
+      "brand-completions",
+      "editor.action.triggerSuggest",
+      {},
+    );
+  });
+
+  it("does NOT force-open the suggest widget for a non-trigger character", () => {
+    editorA.trigger.mockClear();
+    editorA.fireContentChange("x");
+    expect(editorA.trigger).not.toHaveBeenCalled();
+  });
+
+  it("moving to a new model re-scopes the registry (old model drops out)", async () => {
+    const provideCompletionItems = registerCompletionItemProvider.mock.calls[0]?.[1]
+      .provideCompletionItems as (
+      model: unknown,
+      position: unknown,
+    ) => Promise<{ suggestions: unknown[] }>;
+    const position = { lineNumber: 1, column: 5 };
+
+    const modelA2 = makeModel("A2", "[[no", "[[no");
+    editorA.setModel(modelA2);
+    editorA.fireModelChange();
+
+    const resultOld = await provideCompletionItems(modelA, position);
+    expect(resultOld.suggestions).toHaveLength(0);
+    // 2 providers by this point (the previous test rebuilt `editorAProviders`
+    // to include a second one) — the exact count isn't the point, only that
+    // the NEW model is now scoped in.
+    const resultNew = await provideCompletionItems(modelA2, position);
+    expect(resultNew.suggestions.length).toBeGreaterThan(0);
+  });
+
+  it("detaching a NON-last consumer does not dispose the global registration", () => {
+    detachB();
+    expect(registrationDispose).not.toHaveBeenCalled();
+  });
+
+  it("detaching the LAST consumer disposes the global registration (no leak)", () => {
+    detachA();
+    expect(registrationDispose).toHaveBeenCalledTimes(1);
+  });
+
+  it("a later attach re-registers fresh once refcount has dropped to zero", () => {
+    const modelC = makeModel("C", "", "");
+    const editorC = makeEditor(modelC);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const detachC = attachCompletionsMonaco(editorC as any, () => [wikilinkProvider]);
+    expect(registerCompletionItemProvider).toHaveBeenCalledTimes(2);
+    detachC();
+  });
+});

package/src/lib/editor-completions-monaco.ts

@@ -0,0 +1,127 @@
+"use client";
+
+/**
+ * Monaco registration lifecycle for the declarative completion-provider API
+ * (#283) — the engine that backs the `completions` prop on `MarkdownWorkspace`.
+ *
+ * `monaco.languages.registerCompletionItemProvider` is GLOBAL PER LANGUAGE, not
+ * per editor instance (the root cause #283 exists to fix — see the issue). So
+ * this module owns a single, REFCOUNTED registration for the "markdown"
+ * language: the first `attachCompletionsMonaco` call registers it, each
+ * subsequent call (a second mounted `MarkdownWorkspace`) bumps the refcount,
+ * and the registration is disposed ONLY when the LAST attached editor's
+ * disposer runs — no leak, no double-registration (#283 acceptance).
+ *
+ * Suggestions are scoped to the models THIS module attached (a `REGISTRY` keyed
+ * by `ITextModel`) — any other "markdown" model in the app (one the host built
+ * itself, outside `@elabs-ai/components-editor`) is ignored, never suggested into.
+ *
+ * `getProviders` is read fresh from the registry on every `provideCompletionItems`
+ * call — NOT captured as a closure at registration time — so a rebuilt provider
+ * list (a new `completions` array identity from React state/props) is picked up
+ * WITHOUT re-registering (#283 acceptance). Mirrors the calc layer's
+ * `REGISTRY`/`getHooks` pattern in `calc-block/calc-editor-monaco.ts`.
+ */
+import * as monaco from "monaco-editor";
+
+import {
+  collectCompletions,
+  resolveReplaceRange,
+  type EditorCompletionProvider,
+} from "./editor-completions";
+
+/** Resolver of the latest provider list for a model (read fresh on every call). */
+type ProvidersGetter = () => EditorCompletionProvider[] | undefined;
+
+/** Per-model provider registry — scopes suggestions to OUR editor instances. */
+const REGISTRY = new Map<monaco.editor.ITextModel, ProvidersGetter>();
+
+let refCount = 0;
+let registration: monaco.IDisposable | null = null;
+
+/** Register the "markdown" completion provider once (idempotent while refs > 0). */
+function ensureRegistered(): void {
+  if (registration) return;
+  registration = monaco.languages.registerCompletionItemProvider("markdown", {
+    provideCompletionItems(model, position) {
+      const getProviders = REGISTRY.get(model);
+      if (!getProviders) return { suggestions: [] };
+      const providers = getProviders();
+      if (!providers || providers.length === 0) return { suggestions: [] };
+      const lineText = model.getLineContent(position.lineNumber);
+      const ctx = {
+        source: model.getValue(),
+        line: position.lineNumber,
+        column: position.column,
+        lineText,
+      };
+      return collectCompletions(providers, ctx).then((matches) => ({
+        suggestions: matches.map(({ provider, item }) => ({
+          label: item.label,
+          kind: monaco.languages.CompletionItemKind.Text,
+          insertText: item.insertText,
+          detail: item.detail,
+          range: resolveReplaceRange(item, position, lineText, provider.triggerCharacters),
+        })),
+      }));
+    },
+  });
+}
+
+/**
+ * Attach the declarative completion providers to a Monaco editor instance.
+ * `getProviders` is read live on every suggestion request (see module doc) —
+ * pass a ref-backed getter so a fresh `completions` array identity on every
+ * render never forces a re-attach.
+ *
+ * Also force-opens Monaco's native suggest widget (`editor.action.triggerSuggest`)
+ * whenever the user types a character matching one of the CURRENTLY-configured
+ * providers' `triggerCharacters` — read live, so changing that set never needs a
+ * re-registration either. Markdown punctuation like `[` doesn't extend a "word",
+ * so without this Monaco's own quick-suggestions heuristic would never invoke a
+ * provider on it.
+ *
+ * Returns a disposer. Call it on unmount / when `completions` is removed —
+ * refcounted, so the GLOBAL "markdown" registration is only torn down once the
+ * LAST attached editor calls its disposer (#283 acceptance: no leak, no
+ * double-registration with two workspaces mounted).
+ */
+export function attachCompletionsMonaco(
+  editor: monaco.editor.IStandaloneCodeEditor,
+  getProviders: ProvidersGetter,
+): () => void {
+  ensureRegistered();
+  refCount++;
+
+  let model = editor.getModel();
+  if (model) REGISTRY.set(model, getProviders);
+
+  const contentSub = editor.onDidChangeModelContent((e) => {
+    const providers = getProviders();
+    if (!providers || providers.length === 0) return;
+    for (const change of e.changes) {
+      if (change.text.length !== 1) continue;
+      if (providers.some((p) => p.triggerCharacters?.includes(change.text))) {
+        editor.trigger("brand-completions", "editor.action.triggerSuggest", {});
+        return;
+      }
+    }
+  });
+
+  const modelSub = editor.onDidChangeModel(() => {
+    if (model) REGISTRY.delete(model);
+    model = editor.getModel();
+    if (model) REGISTRY.set(model, getProviders);
+  });
+
+  return () => {
+    contentSub.dispose();
+    modelSub.dispose();
+    if (model) REGISTRY.delete(model);
+    refCount = Math.max(0, refCount - 1);
+    if (refCount === 0) {
+      registration?.dispose();
+      registration = null;
+    }
+  };
+}