Fixed the issue that mermaid cannot open images when it contains utf-8 characters

[qdaxb]

…8 characters

Related GitHub Issue

Closes: #4544

Description

Test Procedure

Type of Change

• [x ] 🐛 Bug Fix: Non-breaking change that fixes an issue.
• ✨ New Feature: Non-breaking change that adds functionality.
• 💥 Breaking Change: Fix or feature that would cause existing functionality to not work as expected.
• ♻️ Refactor: Code change that neither fixes a bug nor adds a feature.
• 💅 Style: Changes that do not affect the meaning of the code (white-space, formatting, etc.).
• 📚 Documentation: Updates to documentation files.
• ⚙️ Build/CI: Changes to the build process or CI configuration.
• 🧹 Chore: Other changes that don't modify src or test files.

Pre-Submission Checklist

• Issue Linked: This PR is linked to an approved GitHub Issue (see "Related GitHub Issue" above).
• Scope: My changes are focused on the linked issue (one major feature/fix per PR).
• Self-Review: I have performed a thorough self-review of my code.
• Code Quality:
  • My code adheres to the project's style guidelines.
  • There are no new linting errors or warnings (npm run lint).
  • All debug code (e.g., console.log) has been removed.
• Testing:
  • New and/or updated tests have been added to cover my changes.
  • All tests pass locally (npm test).
  • The application builds successfully with my changes.
• Branch Hygiene: My branch is up-to-date (rebased) with the main branch.
• Documentation Impact: I have considered if my changes require documentation updates (see "Documentation Updates" section below).
• Changeset: A changeset has been created using npm run changeset if this PR includes user-facing changes or dependency updates.
• Contribution Guidelines: I have read and agree to the Contributor Guidelines.

Screenshots / Videos

Documentation Updates

Additional Notes

Get in Touch

---

Important

Fixes UTF-8 character handling in Mermaid image opening by updating SVG data URL encoding in MermaidBlock.tsx.

• Bug Fix:
  • Fixes issue with opening images containing UTF-8 characters in MermaidBlock.tsx.
  • Changes svgToPng() function to encode SVG strings properly using encodeURIComponent and replaces certain characters to ensure valid data URLs.
• Misc:
  • Updates svgDataUrl creation in svgToPng() to use charset=utf-8 for encoding.

^{This description was created by for 41e4c98. You can customize this summary. It will automatically update as commits are pushed.}

[daniel-lxs]

Fixed on #4547