fix: prevent Mermaid text clipping in SVG foreignObject

[praxstack]

Adds targeted CSS resets for p, span, and div elements inside .mermaid-diagram to override global #markdown-preview p styling (which applied excessive line-height and margins). This ensures text nodes exactly fit the bounding box calculated by Mermaid during render.

Summary by CodeRabbit

Release Notes

• Bug Fixes

  • Strengthened navigation history management with automatic size limiting and deduplication to improve performance
  • Enhanced path normalization to better handle multiple slashes and prevent path traversal issues

• Style

  • Simplified admonition presentation with emoji icons replacing SVG graphics
  • Improved Mermaid diagram rendering with refined spacing and styling consistency

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 05419ccf-76fa-4294-9f49-36726acd6751

📥 Commits

Reviewing files that changed from the base of the PR and between 93f5d2f and d7ec352.

⛔ Files ignored due to path filters (1)

• pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

📒 Files selected for processing (13)

• script.js
• src/js/services/LinkNavigationService.js
• src/js/services/MermaidService.js
• src/js/services/PDFService.js
• src/js/services/PrismService.js
• src/js/utils/pathHelpers.js
• style.css
• tests/unit/config/errorMessages.test.js
• tests/unit/services/LinkNavigationService.test.js
• tests/unit/services/MermaidService.test.js
• tests/unit/utils/colorHelpers.test.js
• tests/unit/utils/pathHelpers.test.js
• vite.config.js

---

📝 Walkthrough

Walkthrough

This pull request refactors code formatting throughout the codebase, simplifies admonition rendering by replacing SVG icons with emojis, enhances LinkNavigationService with cache error handling and history size management, normalizes path handling with slash collapsing, removes Mermaid configuration options, and updates corresponding tests to reflect these changes.

Changes

Cohort / File(s)	Summary
Script Rendering Engine script.js	Refactors conditional guards to single-line format, replaces SVG admonition icons with emoji equivalents, and simplifies admonition rendering to use token.admonitionType and marked.parseInline().
Navigation Service src/js/services/LinkNavigationService.js	Adds try-catch error handling for cache building with logging, introduces MAX_HISTORY_SIZE static field to limit history length, enforces deduplication of consecutive entries, and streamlines string concatenation patterns.
Path Resolution Utilities src/js/utils/pathHelpers.js	Enhances path normalization to collapse multiple slashes and trim leading/trailing slashes, converts multi-line guard blocks to compact single-line early returns, preserves path traversal prevention logic.
Service Configuration src/js/services/MermaidService.js, src/js/services/PrismService.js, src/js/services/PDFService.js	Removes Mermaid initialization options (securityLevel: 'loose' and htmlLabels: true); applies minor trailing comma and formatting adjustments.
Styling Refinements style.css	Removes admonition typography overrides and global line-height reset; introduces targeted Mermaid diagram styling with margin and line-height set to !important for p, span, and div elements.
Test Suite Updates tests/unit/services/LinkNavigationService.test.js, tests/unit/services/MermaidService.test.js, tests/unit/utils/colorHelpers.test.js, tests/unit/utils/pathHelpers.test.js, tests/unit/config/errorMessages.test.js	Adjusts test mocks (async generator syntax), removes anchor null field expectations, updates path normalization test expectations, removes trailing commas.
Build Configuration vite.config.js	Minor formatting: removes trailing comma from console.log call reporting theme CSS file count.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~22 minutes

Possibly related PRs

• Fix Mermaid text clipping and enable custom HTML labels #6 — Both PRs modify Mermaid service configuration and .mermaid-diagram CSS line-height handling (related PR adds htmlLabels/securityLevel while this PR removes those options).

Poem

🐰 Hops through the code with glee,
SVGs become emojis free!
Paths now normalize with care,
History capped beyond compare,
Lines of code, leaner and bright,
Refactoring done just right! ✨

✨ Finishing Touches

• 📝 Generate docstrings (stacked PR)
• 📝 Generate docstrings (commit on current branch)

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/mermaid-text-clipping-and-html-labels-4041251571326236476

---

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 and usage tips.}