fix: disable error rendering

[mlopezFC]

Fixes #26

Summary by CodeRabbit

• Bug Fixes
  • Improved Mermaid diagram rendering stability by suppressing error rendering in the markdown editor.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

Adds Mermaid error suppression configuration to the markdown editor component by calling mermaid.initialize({ suppressErrorRendering: true }) in two locations. This prevents Mermaid diagram rendering errors from appearing outside the editor container, addressing incorrect error placement behavior.

Changes

Cohort / File(s)	Summary
Mermaid Configuration src/main/resources/META-INF/resources/frontend/markdown-editor.tsx	Adds mermaid.initialize({ suppressErrorRendering: true }) after imports and before Code usage to suppress Mermaid error rendering

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

• Single file modification with repetitive configuration pattern applied twice
• No control flow or structural changes
• Verify placement correctness and that suppression adequately resolves issue #26 without masking legitimate errors

Suggested reviewers

• javier-godoy

Pre-merge checks and finishing touches

✅ 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 clearly and concisely summarizes the main change: disabling error rendering for Mermaid diagrams, which directly addresses the bug in the linked issue.
Linked Issues check	✅ Passed	The code change directly addresses issue #26 by calling mermaid.initialize({ suppressErrorRendering: true }) to prevent error messages from appearing outside the editor when malformed Mermaid diagrams are encountered.
Out of Scope Changes check	✅ Passed	All changes are narrowly scoped to the Mermaid configuration initialization and directly address the bug described in issue #26 without introducing unrelated modifications.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch issue-26

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 97f82d8 and db3f57a.

📒 Files selected for processing (1)

• src/main/resources/META-INF/resources/frontend/markdown-editor.tsx (1 hunks)

🧰 Additional context used

🧠 Learnings (1)

📚 Learning: 2025-11-04T19:51:55.401Z

Learnt from: mlopezFC
Repo: FlowingCode/MarkdownEditor PR: 25
File: src/main/resources/META-INF/resources/frontend/markdown-viewer.tsx:110-114
Timestamp: 2025-11-04T19:51:55.401Z
Learning: In src/main/resources/META-INF/resources/frontend/markdown-viewer.tsx, the MarkdownViewerElement intentionally does not call super.disconnectedCallback() to avoid a race condition with VirtualList component recycling. The base method's this.reactRoot.unmount() is asynchronous, but VirtualList synchronously re-runs connectedCallback, causing attempts to render on a root that is still unmounting. The fix keeps the root alive and only clears content synchronously with this.root.render(null).
<!-- [add_learning]
When working with React components in VirtualList that recycle elements, avoid calling asynchronous unmount() in disconnectedCallback() if the component can be immediately reconnected, as this causes race conditions with createRoot() errors.

Applied to files:

• src/main/resources/META-INF/resources/frontend/markdown-editor.tsx

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: build-vaadin25

🔇 Additional comments (1)

src/main/resources/META-INF/resources/frontend/markdown-editor.tsx (1)

38-40: Fix is correct and properly verified.

The suppressErrorRendering: true configuration is a valid Mermaid API option that prevents Mermaid from inserting error divs into the DOM when diagram rendering fails. Combined with the .catch() handler that logs errors to the console (lines 62-64), this correctly addresses issue #26 by preventing malformed diagrams from creating visual errors outside the editor while maintaining developer debugging capability.

Tip

📝 Customizable high-level summaries are now available in beta!

You can now customize how CodeRabbit generates the high-level summary in your pull requests — including its content, structure, tone, and formatting.

• Provide your own instructions using the high_level_summary_instructions setting.
• Format the summary however you like (bullet lists, tables, multi-section layouts, contributor stats, etc.).
• Use high_level_summary_in_walkthrough to move the summary from the description to the walkthrough section.

Example instruction:

"Divide the high-level summary into five sections:

1. 📝 Description — Summarize the main change in 50–60 words, explaining what was done.
2. 📓 References — List relevant issues, discussions, documentation, or related PRs.
3. 📦 Dependencies & Requirements — Mention any new/updated dependencies, environment variable changes, or configuration updates.
4. 📊 Contributor Summary — Include a Markdown table showing contributions:
   | Contributor | Lines Added | Lines Removed | Files Changed |
5. ✔️ Additional Notes — Add any extra reviewer context.
   Keep each section concise (under 200 words) and use bullet or numbered lists for clarity."

Note: This feature is currently in beta for Pro-tier users, and pricing will be announced later.

---

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

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud