Handle Mermaid validation errors#3112
Conversation
|
There was a problem hiding this comment.
Should we run this past the "Design Engineer" mode? Seems like a lot of could be done with Tailwind.
There was a problem hiding this comment.
I did use the Design Engineer mode fwiw... maybe because there's so much surrounding styled components it decided to match?
There was a problem hiding this comment.
I didn't explicitly ask for Tailwind - I just asked it to build an error display like we have for unsuccessful diffs.
There was a problem hiding this comment.
Use which is what all the other tool chevron-expander things use (it embeds <CodeAccordian><CodeBlock> and Shiki supports mermaid).
Correction, that may not be 100% right... I know code accordion is used for terminal output expansion, but I am sure about the larger chevrons for the API drop downs... however I can say for certain that the other larger chevrons for tool API output use something like <CodeBlock language="mermaid" source={code}>.
it is a common enough structure that maybe we should have one.
There was a problem hiding this comment.
I just updated to use <CodeBlock language="mermaid" source={code}> for consistency, though I'm not sure how well the syntax highlighting will work on the invalid mermaid.
There was a problem hiding this comment.
Is there not an existing component for this?
There was a problem hiding this comment.
Not in a shared place, I don't think. Probably should be though.
There was a problem hiding this comment.
This seems like something that we probably already have in a common / shared section.
There was a problem hiding this comment.
We don't have this exact translation anywhere else, but in theory it would be nice to use a shared "Copied" or something. Doesn't seem to exist yet though.
You could use |
* Update Reset Button color to Red * Add Changeset
* Handle Mermaid validation errors * PR feedback * More PR feedback
Before:

After:

Important
Enhances Mermaid diagram error handling and UI with internationalized messages and copy-to-clipboard functionality.
errorand toggleisErrorExpandedinMermaidBlock.tsx.CopyButtonfor copying code with feedback inMermaidBlock.tsx.common.jsonfiles for multiple languages.mermaid.loadingandmermaid.render_errortranslations incommon.jsonfor languages includingen,de,fr,es,ru,zh-CN, and others.This description was created by
for 54ae7b1. You can customize this summary. It will automatically update as commits are pushed.