Prevent Markdown image loading

[AnthonyRonning]

Summary

• render Markdown image nodes as escaped alt text only, so remote, relative, data, and blob URLs in assistant or tool Markdown cannot create image elements or load resources
• keep structured user image attachments unchanged; uploads remain separate input_image parts and continue to render in the attachment and message UI
• add server-rendered regression coverage for image URL schemes, alt-text preservation, empty-alt omission, and ordinary links

Companion backend work: OpenSecretCloud/opensecret#237 sanitizes Kagi-provided Markdown before content budgets and safe truncation.

Validation

• Maple pre-commit hook passed: formatting, production frontend build, and all 110 Bun tests
• live macOS Maple app used the local Pro fixture with web-search.kagi enabled
• a live Kagi search and open_urls call rendered the Polymarket page as text with no page-result image accessibility nodes or broken placeholders
• uploading the reported screenshot through Maples native attachment picker still showed the preview and sent-message image, and the model received it successfully

[coderabbitai]

📝 Walkthrough

Walkthrough

MarkdownContent now suppresses Markdown image elements, rendering alt text when present. Tests cover remote, relative, data, and blob image URLs, plus standard Markdown links.

Changes

Markdown rendering

Layer / File(s)	Summary
Image suppression and validation frontend/src/components/markdown.tsx, frontend/src/components/markdown.test.ts	ReactMarkdown renders image alt text in a <span> or renders nothing when alt text is absent. Tests verify image URLs are excluded and ordinary links remain anchors.

Estimated code review effort: 2 (Simple) | ~10 minutes

Poem

I’m a bunny who hops through the Markdown stream,
No image tags disturb the rendered dream.
Alt text stays bright, links still leap,
Remote and blob URLs go to sleep.
Squeak—clean output, neat and deep!

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately summarizes the main change: Markdown image elements are prevented from loading.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch codex-kagi-search-provider-maple

---

_{Comment @coderabbitai help to get the list of available commands.}

[devin-ai-integration]

✅ Devin Review: No Issues Found

Devin Review analyzed this PR and found no bugs or issues to report.

[coderabbitai]

🧹 Nitpick comments (1)

frontend/src/components/markdown.test.ts (1)

11-31: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Cover the empty-alt branch.

markdown.tsx returns null when alt text is empty or missing, but this test only exercises non-empty alt text. Add a ![](https://example.com/hidden.png) case and assert that neither the URL, <img>, nor an alt-text <span> is rendered.

Suggested test

+  it("omits images with no alt text", () => {
+    const rendered = renderMarkdown("![](https://example.com/hidden.png)");
+
+    expect(rendered).not.toContain("<img");
+    expect(rendered).not.toContain("hidden.png");
+    expect(rendered).not.toContain("<span");
+  });

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@frontend/src/components/markdown.test.ts` around lines 11 - 31, Extend the
“MarkdownContent images” test to include an image with empty alt text, such as
![](https://example.com/hidden.png). Assert the rendered output excludes the
image URL, <img>, and alt-text <span>, covering the null-return branch in
markdown.tsx.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@frontend/src/components/markdown.test.ts`:
- Around line 11-31: Extend the “MarkdownContent images” test to include an
image with empty alt text, such as ![](https://example.com/hidden.png). Assert
the rendered output excludes the image URL, <img>, and alt-text <span>, covering
the null-return branch in markdown.tsx.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 3e43913c-268c-4f9f-b6b1-c63fc0edf6c4

📥 Commits

Reviewing files that changed from the base of the PR and between 8cdb5cb and aa3b5ea.

📒 Files selected for processing (2)

• frontend/src/components/markdown.test.ts
• frontend/src/components/markdown.tsx

[cloudflare-workers-and-pages]

Deploying maple with    Cloudflare Pages

Latest commit:	afd3bbf
Status:	✅  Deploy successful!
Preview URL:	https://7143667a.maple-ca8.pages.dev
Branch Preview URL:	https://codex-kagi-search-provider-m.maple-ca8.pages.dev

View logs