@tangle-network/ui 11.26.0 → 11.27.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @tangle-network/ui
 
+## 11.27.0
+
+### Minor Changes
+
+- 3ceb5fc: Markdown images open full size in a new tab, and an image that is unsafe or fails to load renders a labelled "Image unavailable" placeholder instead of the browser's broken-image icon. Images already wrapped in a Markdown link keep that link.
+
 ## 11.26.0
 
 ### Minor Changes

package/dist/markdown/markdown.d.ts

@@ -9,8 +9,9 @@ export interface MarkdownProps {
   urlTransform?: UrlTransform;
 }
 /**
- * Renders Markdown content with GFM support, XSS sanitisation, and
- * custom code block rendering via our CodeBlock component.
+ * Renders Markdown content with GFM support, XSS sanitisation, custom code
+ * block rendering via our CodeBlock component, and images that open full size
+ * or show a labelled placeholder when unavailable.
  */
 export declare const Markdown: import("react").MemoExoticComponent<({ children, className, urlTransform }: MarkdownProps) => import("react").JSX.Element>;
 //#endregion

package/dist/markdown/markdown.js

@@ -1,7 +1,8 @@
 import { cn } from "../lib/utils.js";
 import { CodeBlock, CopyButton } from "./code-block.js";
-import { memo } from "react";
-import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
+import { createContext, memo, useContext, useEffect, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { ImageOff } from "lucide-react";
 import ReactMarkdown, { defaultUrlTransform } from "react-markdown";
 import remarkGfm from "remark-gfm";
 import rehypeSanitize from "rehype-sanitize";
@@ -27,9 +28,72 @@ function transformMarkdownUrl(url, key, node, urlTransform) {
 	if (key === "href" && transformed === url && url.startsWith("#")) return safeUrl("#" + getSanitizedMarkdownHeadingIdFromRawFragment(url.slice(1)));
 	return safeUrl(transformed);
 }
+const MarkdownLinkContext = createContext(false);
+function MarkdownLink({ node: _node, ...props }) {
+	return /* @__PURE__ */ jsx(MarkdownLinkContext.Provider, {
+		value: true,
+		children: /* @__PURE__ */ jsx("a", { ...props })
+	});
+}
+/**
+* Renders a Markdown image that opens full size in a new tab, or a labelled
+* placeholder when its URL is unsafe or fails to load, instead of the
+* browser's broken-image icon.
+*/
+function MarkdownImage({ node: _node, src, alt, className, ...props }) {
+	const insideLink = useContext(MarkdownLinkContext);
+	const imageRef = useRef(null);
+	const url = typeof src === "string" && src ? src : void 0;
+	const [failedUrl, setFailedUrl] = useState();
+	useEffect(() => {
+		const image = imageRef.current;
+		if (!url || !image?.complete || typeof image.decode !== "function") return;
+		let current = true;
+		image.decode().catch(() => {
+			if (current) setFailedUrl(url);
+		});
+		return () => {
+			current = false;
+		};
+	}, [url]);
+	if (!url || failedUrl === url) {
+		const label = alt ? `Image unavailable: ${alt}` : "Image unavailable";
+		return /* @__PURE__ */ jsxs("span", {
+			role: "img",
+			"aria-label": label,
+			className: "inline-flex max-w-full items-center gap-2 rounded-md border border-dashed border-border bg-muted px-3 py-2 text-sm text-muted-foreground",
+			children: [/* @__PURE__ */ jsx(ImageOff, {
+				"aria-hidden": true,
+				className: "size-4 shrink-0"
+			}), /* @__PURE__ */ jsx("span", {
+				className: "min-w-0 truncate",
+				children: label
+			})]
+		});
+	}
+	const image = /* @__PURE__ */ jsx("img", {
+		...props,
+		ref: imageRef,
+		src: url,
+		alt: alt ?? "",
+		loading: "lazy",
+		decoding: "async",
+		onError: () => setFailedUrl(url),
+		className: cn("h-auto max-w-full rounded-md", className)
+	});
+	if (insideLink) return image;
+	return /* @__PURE__ */ jsx("a", {
+		href: url,
+		target: "_blank",
+		rel: "noopener noreferrer",
+		className: "inline-block max-w-full",
+		children: image
+	});
+}
 /**
-* Renders Markdown content with GFM support, XSS sanitisation, and
-* custom code block rendering via our CodeBlock component.
+* Renders Markdown content with GFM support, XSS sanitisation, custom code
+* block rendering via our CodeBlock component, and images that open full size
+* or show a labelled placeholder when unavailable.
 */
 const Markdown = memo(({ children, className, urlTransform }) => {
 	return /* @__PURE__ */ jsx("div", {
@@ -39,6 +103,8 @@ const Markdown = memo(({ children, className, urlTransform }) => {
 			rehypePlugins: [rehypeSlug, rehypeSanitize],
 			urlTransform: (url, key, node) => transformMarkdownUrl(url, key, node, urlTransform),
 			components: {
+				a: MarkdownLink,
+				img: MarkdownImage,
 				pre({ children: preChildren }) {
 					return /* @__PURE__ */ jsx(Fragment$1, { children: preChildren });
 				},

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/ui",
-  "version": "11.26.0",
+  "version": "11.27.0",
   "description": "Generic React UI components for Tangle products — primitives, chat, run, files, editor, markdown.",
   "type": "module",
   "license": "MIT",
@@ -149,7 +149,7 @@
   "peerDependencies": {
     "@hocuspocus/provider": ">=2.15.0 <5.0.0",
     "@nanostores/react": ">=0.8.4 <3.0.0",
-    "@tangle-network/brand": "^1.17.0",
+    "@tangle-network/brand": "^1.17.1",
     "@tiptap/core": ">=3.20.4 <4.0.0",
     "@tiptap/extension-collaboration": ">=3.20.4 <4.0.0",
     "@tiptap/extension-collaboration-caret": ">=3.7.0 <4.0.0",

package/src/markdown/markdown.test.tsx

@@ -1,5 +1,5 @@
 import { describe, expect, it, vi } from "vitest";
-import { render, screen } from "@testing-library/react";
+import { fireEvent, render, screen } from "@testing-library/react";
 import { getSanitizedMarkdownHeadingIdFromRawFragment, Markdown } from "./markdown";
 
 describe("Markdown", () => {
@@ -60,7 +60,7 @@ describe("Markdown", () => {
       "src",
       "https://example.com/image.png",
     );
-    expect(screen.getByRole("img", { name: "Unsafe" })).not.toHaveAttribute("src");
+    expect(screen.getByRole("img", { name: "Image unavailable: Unsafe" })).not.toHaveAttribute("src");
     expect(urlTransform).toHaveBeenCalledWith(
       "https://example.com/image.png",
       "src",
@@ -100,5 +100,34 @@ describe("Markdown", () => {
       expect.objectContaining({ tagName: "a" }),
     );
   });
-});
 
+  it("links an image to its full-size source unless a Markdown link already wraps it", () => {
+    render(
+      <Markdown>
+        {"![Ad](https://example.com/ad.png)\n\n[![Badge](https://example.com/badge.svg)](https://example.com/docs)"}
+      </Markdown>,
+    );
+
+    const ad = screen.getByRole("img", { name: "Ad" });
+    expect(ad).toHaveAttribute("src", "https://example.com/ad.png");
+    expect(ad.closest("a")).toHaveAttribute("href", "https://example.com/ad.png");
+    expect(ad.closest("a")).toHaveAttribute("target", "_blank");
+    expect(ad.closest("a")).toHaveAttribute("rel", "noopener noreferrer");
+
+    const badge = screen.getByRole("img", { name: "Badge" });
+    expect(badge.closest("a")).toHaveAttribute("href", "https://example.com/docs");
+    expect(badge.closest("a")?.parentElement?.closest("a")).toBeNull();
+  });
+
+  it("replaces an image that fails to load with a labelled placeholder", () => {
+    render(<Markdown>{"![Final ad](campaigns/missing.png)"}</Markdown>);
+
+    fireEvent.error(screen.getByRole("img", { name: "Final ad" }));
+
+    expect(screen.queryByRole("img", { name: "Final ad" })).toBeNull();
+    expect(screen.getByRole("img", { name: "Image unavailable: Final ad" })).toHaveTextContent(
+      "Image unavailable: Final ad",
+    );
+    expect(screen.queryByRole("link")).toBeNull();
+  });
+});

package/src/markdown/markdown.tsx

@@ -1,9 +1,18 @@
-import { memo } from "react";
-import ReactMarkdown, { defaultUrlTransform, type UrlTransform } from "react-markdown";
+import {
+  createContext,
+  memo,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+  type ComponentProps,
+} from "react";
+import ReactMarkdown, { defaultUrlTransform, type ExtraProps, type UrlTransform } from "react-markdown";
 import remarkGfm from "remark-gfm";
 import rehypeSanitize from "rehype-sanitize";
 import rehypeSlug from "rehype-slug";
 import GithubSlugger from "github-slugger";
+import { ImageOff } from "lucide-react";
 import { CodeBlock, CopyButton } from "./code-block";
 import { cn } from "../lib/utils";
 
@@ -41,6 +50,75 @@ function transformMarkdownUrl(
   return safeUrl(transformed);
 }
 
+// An image already wrapped in a Markdown link keeps that link: anchors cannot nest.
+const MarkdownLinkContext = createContext(false);
+
+function MarkdownLink({ node: _node, ...props }: ComponentProps<"a"> & ExtraProps) {
+  return (
+    <MarkdownLinkContext.Provider value>
+      <a {...props} />
+    </MarkdownLinkContext.Provider>
+  );
+}
+
+/**
+ * Renders a Markdown image that opens full size in a new tab, or a labelled
+ * placeholder when its URL is unsafe or fails to load, instead of the
+ * browser's broken-image icon.
+ */
+function MarkdownImage({ node: _node, src, alt, className, ...props }: ComponentProps<"img"> & ExtraProps) {
+  const insideLink = useContext(MarkdownLinkContext);
+  const imageRef = useRef<HTMLImageElement>(null);
+  const url = typeof src === "string" && src ? src : undefined;
+  const [failedUrl, setFailedUrl] = useState<string>();
+
+  // A server-rendered image can fail before hydration attaches onError.
+  useEffect(() => {
+    const image = imageRef.current;
+    if (!url || !image?.complete || typeof image.decode !== "function") return;
+    let current = true;
+    image.decode().catch(() => {
+      if (current) setFailedUrl(url);
+    });
+    return () => {
+      current = false;
+    };
+  }, [url]);
+
+  if (!url || failedUrl === url) {
+    const label = alt ? `Image unavailable: ${alt}` : "Image unavailable";
+    return (
+      <span
+        role="img"
+        aria-label={label}
+        className="inline-flex max-w-full items-center gap-2 rounded-md border border-dashed border-border bg-muted px-3 py-2 text-sm text-muted-foreground"
+      >
+        <ImageOff aria-hidden className="size-4 shrink-0" />
+        <span className="min-w-0 truncate">{label}</span>
+      </span>
+    );
+  }
+
+  const image = (
+    <img
+      {...props}
+      ref={imageRef}
+      src={url}
+      alt={alt ?? ""}
+      loading="lazy"
+      decoding="async"
+      onError={() => setFailedUrl(url)}
+      className={cn("h-auto max-w-full rounded-md", className)}
+    />
+  );
+  if (insideLink) return image;
+  return (
+    <a href={url} target="_blank" rel="noopener noreferrer" className="inline-block max-w-full">
+      {image}
+    </a>
+  );
+}
+
 export interface MarkdownProps {
   children: string;
   className?: string;
@@ -49,8 +127,9 @@ export interface MarkdownProps {
 }
 
 /**
- * Renders Markdown content with GFM support, XSS sanitisation, and
- * custom code block rendering via our CodeBlock component.
+ * Renders Markdown content with GFM support, XSS sanitisation, custom code
+ * block rendering via our CodeBlock component, and images that open full size
+ * or show a labelled placeholder when unavailable.
  */
 export const Markdown = memo(({ children, className, urlTransform }: MarkdownProps) => {
   return (
@@ -62,6 +141,8 @@ export const Markdown = memo(({ children, className, urlTransform }: MarkdownPro
         rehypePlugins={[rehypeSlug, rehypeSanitize]}
         urlTransform={(url, key, node) => transformMarkdownUrl(url, key, node, urlTransform)}
         components={{
+          a: MarkdownLink,
+          img: MarkdownImage,
           pre({ children: preChildren }) {
             return <>{preChildren}</>;
           },