@tangle-network/ui 11.13.0 → 11.13.1

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @tangle-network/ui
 
+## 11.13.1
+
+### Patch Changes
+
+- 5cbda07: Load the full Highlight.js syntax renderer only when a code block mounts.
+  Keep code readable until highlighting arrives, and leave prose-only Markdown free of syntax-engine requests.
+
 ## 11.13.0
 
 ### Minor Changes

package/dist/markdown/code-block.js

@@ -3,7 +3,6 @@ import { cn } from "../lib/utils.js";
 import { memo, useCallback, useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Check, Copy } from "lucide-react";
-import SyntaxHighlighter from "react-syntax-highlighter";
 //#region src/markdown/code-block.tsx
 const syntaxTheme = (() => {
 	const comment = "var(--syntax-comment, currentColor)";
@@ -65,9 +64,35 @@ const syntaxTheme = (() => {
 		}
 	};
 })();
+let highlighterPromise;
+function loadHighlighter() {
+	return highlighterPromise ??= import("react-syntax-highlighter/dist/esm/default-highlight").then((module) => module.default).catch((error) => {
+		highlighterPromise = void 0;
+		throw error;
+	});
+}
 const CodeBlock = memo(({ code, language, label, showLineNumbers = false, light, className, children, ...props }) => {
+	const [Highlighter, setHighlighter] = useState(null);
+	useEffect(() => {
+		let active = true;
+		loadHighlighter().then((component) => {
+			if (active) setHighlighter(() => component);
+		}).catch(() => {});
+		return () => {
+			active = false;
+		};
+	}, []);
 	const headerLabel = label ?? language;
 	const mode = light === void 0 ? {} : { "data-theme": light ? "light" : "dark" };
+	const customStyle = {
+		margin: 0,
+		padding: "var(--code-padding-y, 0.625rem) var(--code-padding-x, 0.75rem)",
+		background: "transparent",
+		fontSize: "var(--code-font-size, 0.8125rem)",
+		lineHeight: "var(--code-line-height, 1.5)",
+		overflowX: "auto"
+	};
+	const codeTagProps = { style: { fontFamily: "var(--font-mono, 'JetBrains Mono', ui-monospace, monospace)" } };
 	return /* @__PURE__ */ jsxs("div", {
 		className: cn("group relative overflow-hidden rounded-lg border font-mono", "bg-card border-border", className),
 		...props,
@@ -84,7 +109,7 @@ const CodeBlock = memo(({ code, language, label, showLineNumbers = false, light,
 				className: "absolute right-2 top-2 z-10 flex items-center gap-2 opacity-0 transition-opacity group-hover:opacity-100",
 				children
 			}),
-			/* @__PURE__ */ jsx(SyntaxHighlighter, {
+			Highlighter ? /* @__PURE__ */ jsx(Highlighter, {
 				language: language ?? "text",
 				style: syntaxTheme,
 				showLineNumbers,
@@ -93,17 +118,22 @@ const CodeBlock = memo(({ code, language, label, showLineNumbers = false, light,
 					minWidth: "2.5em",
 					paddingRight: "1em"
 				},
-				customStyle: {
-					margin: 0,
-					padding: "var(--code-padding-y, 0.625rem) var(--code-padding-x, 0.75rem)",
-					background: "transparent",
-					fontSize: "var(--code-font-size, 0.8125rem)",
-					lineHeight: "var(--code-line-height, 1.5)",
-					overflowX: "auto"
-				},
-				codeTagProps: { style: { fontFamily: "var(--font-mono, 'JetBrains Mono', ui-monospace, monospace)" } },
+				customStyle,
+				codeTagProps,
 				wrapLines: false,
 				children: code
+			}) : /* @__PURE__ */ jsx("pre", {
+				style: {
+					...syntaxTheme.hljs,
+					...customStyle
+				},
+				children: /* @__PURE__ */ jsx("code", {
+					style: {
+						...codeTagProps.style,
+						whiteSpace: "pre"
+					},
+					children: code
+				})
 			})
 		]
 	});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/ui",
-  "version": "11.13.0",
+  "version": "11.13.1",
   "description": "Generic React UI components for Tangle products — primitives, chat, run, files, editor, markdown.",
   "type": "module",
   "license": "MIT",

package/src/markdown/code-block.test.tsx

@@ -1,16 +1,20 @@
-import { cleanup, render, screen } from "@testing-library/react";
+import { cleanup, render, screen, waitFor } from "@testing-library/react";
 import { renderToString } from "react-dom/server";
+import SyntaxHighlighter from "react-syntax-highlighter";
 import { afterEach, describe, expect, it } from "vitest";
 import { CodeBlock, CopyButton } from "./code-block";
 
 afterEach(cleanup);
 
 describe("CodeBlock scoped semantic colors", () => {
-  it("emits live CSS variables through the real highlighter, not sampled root colors", () => {
+  it("keeps code readable before the renderer loads, then applies live semantic colors and line numbers", async () => {
     const { container } = render(<CodeBlock code={'const message = "hello";'} language="javascript" showLineNumbers />);
-    expect(container.innerHTML).toContain("var(--syntax-keyword, currentColor)");
+    expect(container.querySelector("pre code")?.textContent).toBe('const message = "hello";');
+    await waitFor(() => expect(container.innerHTML).toContain("var(--syntax-keyword, currentColor)"));
     expect(container.innerHTML).toContain("var(--syntax-string, currentColor)");
     expect(container.innerHTML).toContain("var(--syntax-comment, currentColor)");
+    expect(container.querySelector(".react-syntax-highlighter-line-number")).not.toBeNull();
+    expect(container.querySelector("pre code")?.textContent?.replace(/^1/, "")).toBe('const message = "hello";');
   });
 
   it("inherits a named scope by default without inserting its own mode", () => {
@@ -35,10 +39,12 @@ describe("CodeBlock scoped semantic colors", () => {
     expect(screen.getByRole("button", { name: "Copy example" })).toBeTruthy();
   });
 
-  it("server-renders the same semantic references independent of document theme", () => {
+  it("server-renders readable code with the same semantic references independent of document theme", () => {
     const source = <CodeBlock code="const x = 1" language="javascript" />;
     document.documentElement.className = "dark";
     const dark = renderToString(source);
+    expect(dark).toContain("const x = 1");
+    expect(dark).toContain("var(--syntax-foreground, currentColor)");
     document.documentElement.className = "light";
     expect(renderToString(source)).toBe(dark);
     document.documentElement.removeAttribute("class");
@@ -52,6 +58,34 @@ describe("CodeBlock", () => {
     expect(container.querySelector("code")).not.toBeNull();
   });
 
+  it.each([
+    ["javascript", "const answer = 42;"],
+    ["js", "const answer = 42;"],
+    ["brainfuck", "++[>+++<-]"],
+    ["not-a-language", "const answer = 42;"],
+  ])("keeps the default highlighter's tokens for language %s", async (language, code) => {
+    const baseline = document.createElement("div");
+    baseline.innerHTML = renderToString(<SyntaxHighlighter language={language}>{code}</SyntaxHighlighter>);
+    const expected = Array.from(baseline.querySelectorAll("pre code span"), (span) => span.textContent);
+    expect(expected.length).toBeGreaterThan(0);
+
+    const { container } = render(<CodeBlock code={code} language={language} />);
+    await waitFor(() => expect(container.querySelectorAll("pre code span").length).toBe(expected.length));
+    expect(Array.from(container.querySelectorAll("pre code span"), (span) => span.textContent)).toEqual(expected);
+    expect(container.querySelector("pre code")?.textContent).toBe(code);
+  });
+
+  it("preserves whitespace and line numbering after the renderer loads", async () => {
+    const code = "\tfirst  \n  second\n";
+    const baseline = document.createElement("div");
+    baseline.innerHTML = renderToString(<SyntaxHighlighter language="text" showLineNumbers>{code}</SyntaxHighlighter>);
+    const { container } = render(<CodeBlock code={code} language="text" showLineNumbers />);
+    expect(container.querySelector("pre code")?.textContent).toBe(code);
+    await waitFor(() => expect(container.querySelectorAll(".react-syntax-highlighter-line-number").length)
+      .toBe(baseline.querySelectorAll(".react-syntax-highlighter-line-number").length));
+    expect(container.querySelector("pre code")?.textContent).toBe(baseline.querySelector("pre code")?.textContent);
+  });
+
   it("uses `label` as the header text, overriding `language`", () => {
     const { getByText, queryByText } = render(
       <CodeBlock code={"x"} language="typescript" label="config.ts" />,

package/src/markdown/code-block.tsx

@@ -7,7 +7,7 @@ import {
   type HTMLAttributes,
   type ReactNode,
 } from "react";
-import SyntaxHighlighter from "react-syntax-highlighter";
+import type SyntaxHighlighter from "react-syntax-highlighter";
 import { Check, Copy } from "lucide-react";
 import { focusRing } from "../lib/focus";
 import { cn } from "../lib/utils";
@@ -65,6 +65,20 @@ const syntaxTheme: { [key: string]: React.CSSProperties } = (() => {
   };
 })();
 
+type Highlighter = typeof SyntaxHighlighter;
+let highlighterPromise: Promise<Highlighter> | undefined;
+
+function loadHighlighter(): Promise<Highlighter> {
+  // Preserve the default renderer's language behavior, including alias inputs
+  // and unknown-language auto-detection. Its light async variant differs.
+  return highlighterPromise ??= import("react-syntax-highlighter/dist/esm/default-highlight")
+    .then((module) => module.default)
+    .catch((error: unknown) => {
+      highlighterPromise = undefined;
+      throw error;
+    });
+}
+
 export interface CodeBlockProps extends HTMLAttributes<HTMLDivElement> {
   code: string;
   language?: string;
@@ -82,8 +96,28 @@ export interface CodeBlockProps extends HTMLAttributes<HTMLDivElement> {
 
 export const CodeBlock = memo(
   ({ code, language, label, showLineNumbers = false, light, className, children, ...props }: CodeBlockProps) => {
+    const [Highlighter, setHighlighter] = useState<Highlighter | null>(null);
+    useEffect(() => {
+      let active = true;
+      void loadHighlighter().then((component) => {
+        if (active) setHighlighter(() => component);
+      }).catch(() => {
+        // A failed chunk leaves the code readable; a later mount can retry.
+      });
+      return () => { active = false; };
+    }, []);
+
     const headerLabel = label ?? language;
     const mode = light === undefined ? {} : { "data-theme": light ? "light" : "dark" };
+    const customStyle = {
+      margin: 0,
+      padding: "var(--code-padding-y, 0.625rem) var(--code-padding-x, 0.75rem)",
+      background: "transparent",
+      fontSize: "var(--code-font-size, 0.8125rem)",
+      lineHeight: "var(--code-line-height, 1.5)",
+      overflowX: "auto" as const,
+    };
+    const codeTagProps = { style: { fontFamily: "var(--font-mono, 'JetBrains Mono', ui-monospace, monospace)" } };
 
     return (
       <div
@@ -104,28 +138,27 @@ export const CodeBlock = memo(
             {children}
           </div>
         )}
-        <SyntaxHighlighter
-          language={language ?? "text"}
-          style={syntaxTheme}
-          showLineNumbers={showLineNumbers}
-          lineNumberStyle={{
-            color: "var(--syntax-comment, currentColor)",
-            minWidth: "2.5em",
-            paddingRight: "1em",
-          }}
-          customStyle={{
-            margin: 0,
-            padding: "var(--code-padding-y, 0.625rem) var(--code-padding-x, 0.75rem)",
-            background: "transparent",
-            fontSize: "var(--code-font-size, 0.8125rem)",
-            lineHeight: "var(--code-line-height, 1.5)",
-            overflowX: "auto",
-          }}
-          codeTagProps={{ style: { fontFamily: "var(--font-mono, 'JetBrains Mono', ui-monospace, monospace)" } }}
-          wrapLines={false}
-        >
-          {code}
-        </SyntaxHighlighter>
+        {Highlighter ? (
+          <Highlighter
+            language={language ?? "text"}
+            style={syntaxTheme}
+            showLineNumbers={showLineNumbers}
+            lineNumberStyle={{
+              color: "var(--syntax-comment, currentColor)",
+              minWidth: "2.5em",
+              paddingRight: "1em",
+            }}
+            customStyle={customStyle}
+            codeTagProps={codeTagProps}
+            wrapLines={false}
+          >
+            {code}
+          </Highlighter>
+        ) : (
+          <pre style={{ ...syntaxTheme.hljs, ...customStyle }}>
+            <code style={{ ...codeTagProps.style, whiteSpace: "pre" }}>{code}</code>
+          </pre>
+        )}
       </div>
     );
   },