@tangle-network/ui 11.25.0 → 11.27.0

package/src/lib/optional-peer.ts

@@ -0,0 +1,30 @@
+/**
+ * Shared handling for optional peers that an entry reaches through a dynamic
+ * `import()`: `./editor` for tiptap, yjs and Hocuspocus, `./files` for
+ * pdfjs-dist. `scripts/validate-dist.mjs` holds the rules these helpers serve.
+ */
+
+/** The messages a bundler or a runtime gives for a module it cannot resolve. */
+const RESOLUTION_FAILURE =
+  /could not resolve|cannot find (?:module|package)|can't resolve|failed to resolve|module not found/i;
+
+/**
+ * True when the rejection says the package is not installed. Only such an
+ * error gets the install list: a transient chunk-fetch failure that reads as
+ * "install the peers" sends the reader to the wrong fix. An error this
+ * predicate does not match keeps its own message, so it can only
+ * under-report.
+ */
+export function isMissingPeerError(error: unknown): boolean {
+  return error instanceof Error && RESOLUTION_FAILURE.test(error.message);
+}
+
+/**
+ * Hands an `import()` rejection on unchanged. esbuild reports an unresolvable
+ * literal `import()` as a build error and defers it to run time only when the
+ * call carries a `.catch()`, so every peer import attaches this handler. It
+ * changes nothing at run time.
+ */
+export function rethrow(error: unknown): never {
+  throw error;
+}

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}</>;
           },