@elabs-ai/components-editor 5.1.0 → 5.3.0

package/dist/index.js

@@ -10,7 +10,7 @@ import {
   buildBrandThemeData,
   monacoContentAccess,
   useDataTheme
-} from "./chunk-FO5S3YZM.js";
+} from "./chunk-VTGYYWGH.js";
 
 // src/diff-editor/diff-editor.tsx
 import { cn } from "@elabs-ai/components-ui/lib/cn";

package/dist/markdown/index.js

@@ -54,7 +54,7 @@ import {
   transposeIterationValue,
   triggerQueryStart,
   useMarkdownOutline
-} from "../chunk-FO5S3YZM.js";
+} from "../chunk-VTGYYWGH.js";
 
 // src/lib/editor-completions-monaco.ts
 import * as monaco from "monaco-editor";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elabs-ai/components-editor",
-  "version": "5.1.0",
+  "version": "5.3.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -55,6 +55,8 @@
     "katex": "^0.16.11",
     "lucide-react": "^0.577.0",
     "mermaid": "^11.15.0",
+    "mdast-util-directive": "^3.1.0",
+    "micromark-extension-directive": "^4.0.0",
     "remark-directive": "^4.0.0",
     "remark-frontmatter": "^5.0.0",
     "remark-gfm": "^4.0.1",
@@ -69,8 +71,8 @@
     "monaco-editor": "^0.55.1",
     "react": "^18.2.0 || ^19.0.0",
     "react-dom": "^18.2.0 || ^19.0.0",
-    "@elabs-ai/components-tokens": "^5.1.0",
-    "@elabs-ai/components-ui": "^5.1.0"
+    "@elabs-ai/components-tokens": "^5.3.0",
+    "@elabs-ai/components-ui": "^5.3.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",
@@ -90,9 +92,9 @@
     "typescript": "^5.7.3",
     "vitest": "^3.0.2",
     "@elabs-ai/components-eslint-config": "0.1.0",
-    "@elabs-ai/components-tokens": "5.1.0",
+    "@elabs-ai/components-tokens": "5.3.0",
     "@elabs-ai/components-typescript-config": "0.1.0",
-    "@elabs-ai/components-ui": "5.1.0"
+    "@elabs-ai/components-ui": "5.3.0"
   },
   "scripts": {
     "build": "rm -rf dist && tsup && node ../../scripts/link-dist-css.mjs",

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

@@ -15,7 +15,9 @@
  */
 import type { MilkdownPlugin } from "@milkdown/kit/ctx";
 import { $nodeSchema, $remark } from "@milkdown/kit/utils";
-import remarkDirective from "remark-directive";
+import { directiveFromMarkdown, directiveToMarkdown } from "mdast-util-directive";
+import { directive } from "micromark-extension-directive";
+import type { Processor } from "unified";
 
 interface DirectiveMdast {
   type: string;
@@ -24,8 +26,33 @@ interface DirectiveMdast {
   children?: unknown[];
 }
 
-/** Add remark-directive to Milkdown's unified processor (parse + stringify). */
-export const directiveRemark = $remark("brandDirective", () => remarkDirective);
+/**
+ * remark-directive, BLOCK forms only (`::leaf`, `:::container`).
+ *
+ * The stock plugin also parses every inline `:word` as a TEXT directive — a
+ * `${{msr:id:Title}}` placeholder, `ratio :a`, an emoji shortcode — which the brand has
+ * no vocabulary for and which crashed the editor ("Cannot match target parser"); its
+ * serializer then escaped every `word:Word` as `word\:Word`. This variant drops the
+ * inline tokenizer and the matching escape rule, so inline colons stay ordinary text
+ * both ways.
+ */
+function remarkBlockDirectives(this: Processor): void {
+  const data = this.data() as Record<string, unknown[] | undefined>;
+  const micromark = (data.micromarkExtensions ??= []);
+  const from = (data.fromMarkdownExtensions ??= []);
+  const to = (data.toMarkdownExtensions ??= []);
+  const { flow } = directive();
+  micromark.push({ flow });
+  from.push(directiveFromMarkdown());
+  const serializer = directiveToMarkdown();
+  serializer.unsafe = (serializer.unsafe ?? []).filter(
+    (rule) => !(rule.character === ":" && rule.inConstruct !== undefined && !rule.atBreak),
+  );
+  to.push(serializer);
+}
+
+/** Add block directives to Milkdown's unified processor (parse + stringify). */
+export const directiveRemark = $remark("brandDirective", () => remarkBlockDirectives);
 
 /** `:::name` block directives → an editable container node with branded chrome. */
 export const containerDirectiveSchema = $nodeSchema("brand_container_directive", () => ({

package/src/markdown-editor/markdown-editor.directives.test.tsx

@@ -103,3 +103,15 @@ test("#37 — an unknown container directive is role=note, not an assertive aler
   // It must NOT be an assertive live region (role=alert) that re-announces on re-parse.
   expect(screen.queryByRole("alert")).toBeNull();
 });
+
+test("inline `word:Word` (e.g. `${{msr:id:Title}}` placeholders) stays plain text, unescaped, both ways", async () => {
+  const ref = createRef<MarkdownEditorHandle>();
+  const doc = "Revenue: ${{msr:rev-ytd:Revenue YTD}} and a ratio :a\n";
+  const { container } = render(<MarkdownEditor ref={ref} defaultValue={doc} />);
+  await waitFor(() => expect(container.textContent).toContain("${{msr:rev-ytd:Revenue YTD}}"));
+  const md = ref.current!.getMarkdown();
+  expect(md).toContain(":rev-ytd");
+  expect(md).toContain(":Revenue");
+  expect(md).toContain("ratio :a");
+  expect(md).not.toContain("\\:");
+});

package/src/markdown-editor/markdown-editor.insert.test.tsx

@@ -0,0 +1,37 @@
+import { createRef } from "react";
+import { cleanup, render, waitFor } from "@testing-library/react";
+import { afterEach, expect, test } from "vitest";
+
+import { MarkdownEditor, type MarkdownEditorHandle } from "./markdown-editor";
+
+afterEach(cleanup);
+
+async function mount(doc: string) {
+  const ref = createRef<MarkdownEditorHandle>();
+  const { container } = render(<MarkdownEditor ref={ref} defaultValue={doc} />);
+  await waitFor(() =>
+    expect(container.querySelector(".ProseMirror")?.textContent).toContain("Hello"),
+  );
+  return ref;
+}
+
+test("insertAtCursor lands a one-line fragment INLINE, not as a new block", async () => {
+  const ref = await mount("Hello\n");
+  ref.current!.focus();
+  ref.current!.insertAtCursor("${{variables.target}} **bold**");
+  await waitFor(() =>
+    expect(ref.current!.getMarkdown()).toContain("${{variables.target}} **bold**Hello"),
+  );
+  // One paragraph — the fragment joined the existing line.
+  const md = ref.current!.getMarkdown().trim();
+  expect(md.split(/\n\s*\n/)).toHaveLength(1);
+  expect(md).toContain("Hello");
+});
+
+test("insertAtCursor keeps multi-block markdown as blocks", async () => {
+  const ref = await mount("Hello\n");
+  ref.current!.focus();
+  ref.current!.insertAtCursor("# Title\n\nBody");
+  await waitFor(() => expect(ref.current!.getMarkdown()).toContain("# Title"));
+  expect(ref.current!.getMarkdown()).toContain("Body");
+});

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

@@ -33,7 +33,7 @@ import { commonmark } from "@milkdown/kit/preset/commonmark";
 import { gfm } from "@milkdown/kit/preset/gfm";
 import { history } from "@milkdown/kit/plugin/history";
 import { listener, listenerCtx } from "@milkdown/kit/plugin/listener";
-import type { Node as ProseNode } from "@milkdown/kit/prose/model";
+import { Slice, type Node as ProseNode } from "@milkdown/kit/prose/model";
 import { TextSelection } from "@milkdown/kit/prose/state";
 import type { EditorView } from "@milkdown/kit/prose/view";
 import { getMarkdown, replaceAll } from "@milkdown/kit/utils";
@@ -430,8 +430,14 @@ const MarkdownEditorView = forwardRef<MarkdownEditorHandle, ViewProps>(function
               view.dispatch(view.state.tr.insertText(md));
               return;
             }
-            // Replace the current selection with the parsed content.
-            const tr = view.state.tr.replaceSelectionWith(parsed);
+            // A single paragraph lands INLINE at the caret (a `**bold**` fragment, a
+            // `${{placeholder}}` from an insert rail); anything else replaces the
+            // selection as blocks.
+            const only = parsed.childCount === 1 ? parsed.firstChild : null;
+            const tr =
+              only && only.type.name === "paragraph"
+                ? view.state.tr.replaceSelection(new Slice(only.content, 0, 0))
+                : view.state.tr.replaceSelectionWith(parsed);
             view.dispatch(tr);
           });
         } catch {