Skip to content

fix editor so accented letters get the same color as the rest of the …#1906

Open
joelkemkeng wants to merge 1 commit intomermaid-js:developfrom
joelkemkeng:bug/1657_editor-accented-chars-same-color
Open

fix editor so accented letters get the same color as the rest of the …#1906
joelkemkeng wants to merge 1 commit intomermaid-js:developfrom
joelkemkeng:bug/1657_editor-accented-chars-same-color

Conversation

@joelkemkeng
Copy link
Copy Markdown

📑 Summary
Fix for the code editor: accented characters (é, ñ, ü, etc.) in diagram labels no longer get a different color than the rest of the text. They’re now highlighted like the rest of the label.

Resolves #1657

📏 Design Decisions
The syntax highlighting uses the Monarch tokenizer with regexes that relied on \w for “word” characters. In JavaScript that’s only [a-zA-Z0-9_], so letters with accents or other diacritics weren’t part of the same token and were colored differently. I extended the tokenizer patterns to include the Latin extended range (U+00C0–U+024F) so those characters are treated as part of the same token (variable/string) and keep the same color as the rest of the label. No change to the themes, only to which characters are grouped into each token.

📋 Tasks
Make sure you

📖 have read the
contribution guidelines

💻 have added unit/e2e tests (if appropriate)

🔖 targeted
develop
branch

…label

The Monarch tokenizer was using \w for word characters, which only covers basic ASCII letters. So when you had something like cafe with an accent or other diacritics in a diagram, that part was getting a different token and showed up in a different color. Extended the patterns to include Latin extended (U+00C0 to U+024F) so those characters are treated as part of the same token. Resolves mermaid-js#1657

Made-with: Cursor
@netlify
Copy link
Copy Markdown

netlify bot commented Mar 8, 2026

Deploy Preview for mermaidjs ready!

Name Link
🔨 Latest commit 6f39a9d
🔍 Latest deploy log https://app.netlify.com/projects/mermaidjs/deploys/69ad0b51e5813c00084d9a7c
😎 Deploy Preview https://deploy-preview-1906--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 project configuration.

@gy-mate
Copy link
Copy Markdown

gy-mate commented Mar 19, 2026

I've checked the preview deploy and it works! Thank you so much! :)

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.

Code editor: accented characters have the wrong color

2 participants