fix(markdown): render own-line images as blocks (#7237)

An image alone on its line, inside a paragraph with other lines, rendered inline
on iOS and web: the library only treats sole-child paragraph images as blocks,
and with hardSoftBreaks every newline is a break node. The source adaptation now
gives such images their own paragraph (keeping quote markers and list
indentation), so all platforms render them as blocks with image margins. Images
sharing a line with text stay inline. Verified through the library's md4c wasm
parser in the renderer tests.

packages/app/src/components/markdown/renderer.test.ts

@@ -1,5 +1,8 @@
 import { fromMarkdown } from "mdast-util-from-markdown";
 import { toNativeLinkRecognition } from "react-native-enriched-markdown/src/utils/regexParser";
+import { parseMarkdown } from "react-native-enriched-markdown/src/web/parseMarkdown";
+import { markInlineImages } from "react-native-enriched-markdown/src/web/utils";
+import type { ASTNode } from "react-native-enriched-markdown/src/web/types";
 import { QueryClient } from "@tanstack/react-query";
 import { decodeMarkdownImage, getMarkdownImageStatus } from "./image-decoding";
 import { describe, expect, it } from "vitest";
@@ -31,6 +34,56 @@ describe("shared Markdown source adaptation", () => {
       "> - ![Image](<file:///cache/a.png>)\n\n[picture]: ../a.png",
     );
   });
+  it("gives an image alone on its line its own paragraph", () => {
+    expect(
+      prepareMarkdownSource("Before the shot:\n![Shot](https://x/a.png)\nAfter it.").render(),
+    ).toBe("Before the shot:\n\n![Shot](https://x/a.png)\n\nAfter it.");
+    expect(prepareMarkdownSource("![A](https://x/a.png)\n![B](https://x/b.png)").render()).toBe(
+      "![A](https://x/a.png)\n\n![B](https://x/b.png)",
+    );
+    expect(
+      prepareMarkdownSource(
+        "Line one\\\n[![Linked](https://x/a.png)](https://x)\nLine three",
+      ).render(),
+    ).toBe("Line one\n\n[![Linked](https://x/a.png)](https://x)\n\nLine three");
+  });
+  it("keeps images that share a line with text inline", () => {
+    const source = "Icon ![i](https://x/i.png) in text\n![a](https://x/a.png) caption\nNext line";
+    expect(prepareMarkdownSource(source).render()).toBe(source);
+  });
+  it("splits own-line images inside quotes and list items without ending the container", () => {
+    expect(prepareMarkdownSource("> Quote text\n> ![Shot](https://x/a.png)\n> More").render()).toBe(
+      "> Quote text\n>\n> ![Shot](https://x/a.png)\n>\n> More",
+    );
+    expect(
+      prepareMarkdownSource("- Item text\n  ![Shot](https://x/a.png)\n  More\n- Next").render(),
+    ).toBe("- Item text\n\n  ![Shot](https://x/a.png)\n\n  More\n- Next");
+    expect(prepareMarkdownSource("- ![Shot](https://x/a.png)\n  Caption line").render()).toBe(
+      "- ![Shot](https://x/a.png)\n\n  Caption line",
+    );
+  });
+  it("renders own-line images as blocks through the library parser", async () => {
+    const source =
+      "Before:\n![Shot](https://x/a.png)\nIcon ![i](https://x/i.png) in text\n> Quoted\n> ![Q](https://x/q.png)";
+    const tree = await parseMarkdown(prepareMarkdownSource(source).render(), {
+      hardSoftBreaks: true,
+      latexMath: false,
+    });
+    markInlineImages(tree);
+    const images: ASTNode[] = [];
+    const collect = (node: ASTNode) => {
+      if (node.type === "Image") images.push(node);
+      node.children?.forEach(collect);
+    };
+    collect(tree);
+    expect(
+      images.map((image) => [image.attributes?.url, image.attributes?.isInline === true]),
+    ).toEqual([
+      ["https://x/a.png", false],
+      ["https://x/i.png", true],
+      ["https://x/q.png", false],
+    ]);
+  });
   it("escapes spoiler delimiters only in prose", () => {
     expect(prepareMarkdownSource("Show ||words|| and `||code||`.").render()).toBe(
       "Show \\|\\|words\\|\\| and `||code||`.",

packages/app/src/components/markdown/source.ts

@@ -5,7 +5,7 @@ import { gfmTableFromMarkdown } from "mdast-util-gfm-table";
 import type { AssistantFileLinkSource } from "@/assistant-file-links";
 import { decodeString } from "micromark-util-decode-string";
 import { fromMarkdown } from "mdast-util-from-markdown";
-import type { Link, Nodes, Root } from "mdast";
+import type { Link, Nodes, Paragraph, PhrasingContent, Root } from "mdast";
 
 // Keep this regex in the syntax shared by JavaScript, ICU and java.util.regex.
 // The Unicode flag makes Metro expand it to escapes rejected by native engines.
@@ -130,10 +130,50 @@ export function prepareMarkdownSource(
         end,
       });
   }
+  // Line boundaries already turned into paragraph breaks, by offset of their newline.
+  const splitBoundaries = new Set<number>();
+  function isImageLike(node: PhrasingContent): boolean {
+    if (node.type === "image" || node.type === "imageReference") return true;
+    return (
+      (node.type === "link" || node.type === "linkReference") &&
+      node.children.length === 1 &&
+      isImageLike(node.children[0])
+    );
+  }
+  // An image alone on its line becomes its own paragraph, so every platform renders
+  // it as a block. The library only treats sole-child paragraph images as blocks;
+  // with hardSoftBreaks every newline is a break node, which made these inline.
+  function splitStandaloneImages(paragraph: Paragraph, start: number, end: number) {
+    for (const child of paragraph.children) {
+      const childStart = child.position?.start.offset;
+      const childEnd = child.position?.end.offset;
+      if (childStart === undefined || childEnd === undefined || !isImageLike(child)) continue;
+      const lineStart = source.lastIndexOf("\n", childStart - 1) + 1;
+      const newline = source.indexOf("\n", childEnd);
+      const lineEnd = newline === -1 ? source.length : newline;
+      const prefix = source.slice(lineStart, childStart);
+      const suffix = source.slice(childEnd, lineEnd);
+      const aloneBefore = childStart === start || /^[\s>]*$/.test(prefix);
+      const aloneAfter = /^\s*\\?$/.test(suffix);
+      if (!aloneBefore || !aloneAfter) continue;
+      // Continuation lines inside quotes and lists keep their quote markers on the blank line.
+      const blank = prefix.replace(/[^>]/g, " ").trimEnd();
+      const split = (boundary: number) => {
+        if (splitBoundaries.has(boundary)) return;
+        splitBoundaries.add(boundary);
+        // A trailing backslash was a hard break; at a paragraph end it would render literally.
+        const cut = source[boundary - 1] === "\\" ? boundary - 1 : boundary;
+        edits.push({ start: cut, end: boundary + 1, text: `\n${blank}\n` });
+      };
+      if (lineStart > start) split(lineStart - 1);
+      if (lineEnd < end) split(lineEnd);
+    }
+  }
   function visit(node: Nodes) {
     const start = node.position?.start.offset;
     const end = node.position?.end.offset;
     if (start !== undefined && end !== undefined) {
+      if (node.type === "paragraph") splitStandaloneImages(node, start, end);
       if (node.type === "link") {
         const title = workspaceHoverTitle(node, source.slice(start, end), workspaceRoot);
         if (title !== null)