feat: integrate Markdown into NotificationDetail

[naman-bruno]

Description

Contribution Checklist:

• I've used AI significantly to create this pull request
• The pull request only addresses one issue or adds one feature.
• The pull request does not introduce any breaking changes
• I have added screenshots or gifs to help explain the change if applicable.
• I have read the contribution guidelines.
• Create an issue and link to the pull request.

Note: Keeping the PR small and focused helps make it easier to review and merge. If you have multiple changes you want to make, please consider submitting them as separate pull requests.

Publishing to New Package Managers

Please see here for more information.

Summary by CodeRabbit

• New Features

  • Added configurable HTML rendering for markdown content

• Improvements

  • Enhanced notification descriptions with improved styling, scrolling support, and refined markdown layout formatting

[coderabbitai]

Walkthrough

Adds an allowHtml prop (default true) to the Markdown component and wires it into markdown-it options. NotificationDetail migrates from a sandboxed iframe with DOMPurify-built srcDoc to an inline Markdown component with allowHtml={false}. The styled wrapper gains scroll behavior and markdown typography CSS.

Changes

Notification Description: iframe → Markdown

Layer / File(s)	Summary
Markdown allowHtml prop packages/bruno-app/src/components/MarkDown/index.jsx	Adds allowHtml prop (default true) to Markdown, passes it to markdown-it's html option, and includes it in the useMemo dependency array.
NotificationDetail iframe removal packages/bruno-app/src/components/Notifications/NotificationsModal/NotificationDetail.js	Replaces DOMPurify import and sandboxed iframe with inline <Markdown allowHtml={false} />, removing the prior srcDoc document-building and sanitization logic.
StyledWrapper markdown layout packages/bruno-app/src/components/Notifications/NotificationsModal/StyledWrapper.js	Replaces .notif-detail-body border/background rules with overflow-y: auto, padding, and nested .markdown-body CSS for paragraphs, links, headings, lists, and images.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Suggested reviewers

• helloanoop
• lohit-bruno
• bijin-bruno

Poem

🖼️ The iframe has left the building, no more sandbox to maintain,
Markdown steps up inline now, with allowHtml on a chain.
DOMPurify still stands guard, but HTML tags won't sneak through,
Styled scrollbars and headings, a cleaner notification view.
🎉 One less <iframe> in the world — that's worth a small hooray!

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately reflects the main feature: integrating Markdown component into NotificationDetail to replace iframe-based HTML rendering.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
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.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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

[utkarsh-bruno]

Looks good

[coderabbitai]

Actionable comments posted: 3

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

packages/bruno-app/src/components/MarkDown/index.jsx (1)

9-15: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

Default collectionPath before using it in link rewriting.

NotificationDetail now calls Markdown without collectionPath; any markdown link beginning with . is rewritten with undefined because String.replace() coerces the replacement value. Default the prop or guard replaceLink.

Proposed minimal fix

-const Markdown = ({ collectionPath, onDoubleClick, content, allowHtml = true }) => {
+const Markdown = ({ collectionPath = '', onDoubleClick, content, allowHtml = true }) => {

🤖 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 `@packages/bruno-app/src/components/MarkDown/index.jsx` around lines 9 - 15,
The collectionPath prop is used in the replaceLink function without a default
value or guard, causing markdown links starting with a dot to be replaced with
the string "undefined" when NotificationDetail calls Markdown without providing
collectionPath. In the Markdown component function signature, either provide a
default value for collectionPath (e.g., collectionPath = '') in the parameter
destructuring, or add a guard within the replaceLink function to check if
collectionPath is defined before using it in the String.replace() call.

🤖 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.

Inline comments:
In
`@packages/bruno-app/src/components/Notifications/NotificationsModal/NotificationDetail.js`:
- Line 47: Add a test for the NotificationDetail component that verifies the
Markdown rendering behavior with the security boundary. The test should cover
two scenarios: first, verify that valid Markdown content is properly rendered in
the notification description, and second, verify that raw HTML tags in the
notification description are not interpreted or executed (ensuring the
allowHtml={false} safety boundary is working correctly). These tests will ensure
the Markdown component with HTML disabled is functioning as intended for
displaying notification descriptions safely.
- Line 47: The Markdown component's empty onDoubleClick handler in
NotificationDetail does not properly intercept link clicks now that content is
displayed inline without iframe sandbox protection. Clicks on child elements
within links (like bold text or images inside markdown links) bypass the handler
and cause navigation. Replace the empty onDoubleClick handler with an onClick
handler that uses event.target.closest('a') to find the nearest anchor element
regardless of which child was clicked, then call preventDefault() and use
window.open with _blank to safely handle navigation for valid URLs instead of
allowing default link behavior.

In
`@packages/bruno-app/src/components/Notifications/NotificationsModal/StyledWrapper.js`:
- Around line 247-248: The detail body content in the modal has padding applied
to a flex item with width: 100%, which causes the padding to extend beyond the
container width and get clipped by the parent's overflow: hidden. In the CSS
rule containing the overflow-y: auto; and padding: 8px 12px; properties (which
appears to be for the detail body element), add box-sizing: border-box; to
ensure the padding is included within the 100% width calculation rather than
extending beyond it.

---

Outside diff comments:
In `@packages/bruno-app/src/components/MarkDown/index.jsx`:
- Around line 9-15: The collectionPath prop is used in the replaceLink function
without a default value or guard, causing markdown links starting with a dot to
be replaced with the string "undefined" when NotificationDetail calls Markdown
without providing collectionPath. In the Markdown component function signature,
either provide a default value for collectionPath (e.g., collectionPath = '') in
the parameter destructuring, or add a guard within the replaceLink function to
check if collectionPath is defined before using it in the String.replace() call.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 6485f6eb-ae9f-4113-9e12-583430ff449b

📥 Commits

Reviewing files that changed from the base of the PR and between bf0e9bc and 3d5ba0a.

📒 Files selected for processing (3)

• packages/bruno-app/src/components/MarkDown/index.jsx
• packages/bruno-app/src/components/Notifications/NotificationsModal/NotificationDetail.js
• packages/bruno-app/src/components/Notifications/NotificationsModal/StyledWrapper.js