add mermaid buttons

[qdaxb]

Related GitHub Issue

Closes: #4546

Description

Test Procedure

Type of Change

• 🐛 Bug Fix: Non-breaking change that fixes an issue.
• [ x] ✨ 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

Adds interactive buttons to Mermaid diagrams for zoom, copy, and code view, with clipboard support for images.

• New Feature:
  • Adds MermaidButton component in MermaidButton.tsx for interactive buttons on Mermaid diagrams.
  • Supports zoom, copy to clipboard, and view code functionalities.
• Behavior:
  • openImage function in open-file.ts now supports a "copy" action to copy images to clipboard.
  • webviewMessageHandler.ts updated to handle "openImage" message with copy action.
• UI Components:
  • MermaidBlock.tsx integrates MermaidButton for enhanced diagram interaction.
  • Adds modals for zoom and code view in MermaidButton.tsx.

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

[daniel-lxs]

I made some adjustments to make the UX a bit better, I think the tabs work better:

And also internationalized the strings.

LGTM

[mrubens]

UX-wise, main feedback is that clicking to drag doesn't work like I expect when I zoom in. Are you all seeing the same thing? The zoom buttons zoom you in pretty slow too, and it would be nice to be able to hold them down to keep zooming.

[qdaxb]

UX-wise, main feedback is that clicking to drag doesn't work like I expect when I zoom in. Are you all seeing the same thing? The zoom buttons zoom you in pretty slow too, and it would be nice to be able to hold them down to keep zooming.

@mrubens fixed

@daniel-lxs
I added the active color of the tabbutton to distinguish the currently active tab.

I also found a problem, in this commit:
11cc721
The previous copying of images to the clipboard has become copying datauri, and pasting in other applications will display text instead of images. Why did you make this change?

[daniel-lxs]

@qdaxb
It's better to use the vscode clipboard functionality rather than a child process and running a clipboard command.

I can fix the issue with the copy button, sorry about that!

[daniel-lxs]

@qdaxb
I fixed the copy button! now it should copy the actual diagram.

This looks awesome!

[mrubens]

I just pushed a change to increase the max zoom - at least for the one I tested on I needed more.

I'm still struggling to figure out how to copy the image instead of the markup @daniel-lxs - am I missing something?

[daniel-lxs]

@mrubens
I honestly didn't thought of actually copying the image, I'll look into it.

[mrubens]

@mrubens I honestly didn't thought of actually copying the image, I'll look into it.

Ah yeah, I think that's how @qdaxb had it set up previously with the datauri

[daniel-lxs]

@mrubens
I added a new button:

Since I don't think is possible to directly copy the image using the vscode API that doesn't involve copying the datauri or spawning a child process with a command, which in my opinion isn't very clean, I added the save button to directly save the image.

Let me know what you think!