Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use <output> and <pre> to format mermaid errors #1496

Open
wants to merge 3 commits into
base: develop
Choose a base branch
from

Conversation

aloisklink
Copy link
Member

📑 Summary

Use the <output> and <pre> HTML elements to format mermaid errors, instead of just adding the error message as HTML.

📏 Design Decisions

Using <pre> avoids the need for sanitizing any HTML (or using a monospace font in CSS, since <pre> does this automatically). It also prevents line-wrapping, which is good, since JISON errors rely on mono-spaced non-line-wrapped code, as they're pre-formatted.

Using <output> means that users using screen-readers should have a better experience when using the mermaid live editor.

📋 Tasks

Make sure you

  • 📖 have read the contribution guidelines
  • 💻 have added unit/e2e tests (if appropriate)
  • 🔖 targeted develop branch

aloisklink and others added 2 commits July 26, 2024 17:20
This reverts commit 996a20d.

A better way to do fix this bug would be to not parse the syntax error
as HTML in the first place.
Use the `<output>` and `<pre>` HTML elements to format mermaid errors,
instead just adding the error message as HTML.

Using `<pre>` avoids the need for sanitizing any HTML (or using a
`monospace` font in CSS, since `<pre>` does this automatically).

Using `<output>` means that users using screenreaders should have a
better experience when using the mermaid live editor.

on-behalf-of: @Mermaid-Chart <[email protected]>
Copy link

netlify bot commented Jul 26, 2024

Deploy Preview for mermaidjs ready!

Name Link
🔨 Latest commit 82b9bfe
🔍 Latest deploy log https://app.netlify.com/sites/mermaidjs/deploys/66acd4416c5d3f0008868856
😎 Deploy Preview https://deploy-preview-1496--mermaidjs.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants