Microsoft/monaco-editor

[Bug] Incorrect syntax highlighting of Perl regex string

Open

#4165 opened on Sep 8, 2023

View on GitHub
 (0 comments) (1 reaction) (0 assignees)JavaScript (14,836 stars) (1,283 forks)batch import
bughelp wantedlanguages-basic

Description

Reproducible in vscode.dev or in VS Code Desktop?

  • Not reproducible in vscode.dev or VS Code Desktop

Reproducible in the monaco editor playground?

Monaco Editor Playground Link

https://microsoft.github.io/monaco-editor/playground.html?source=v0.41.0#XQAAAAJGAQAAAAAAAABBqQkHQ5NjdMjwa-jY7SIQ9S7DNlzs5W-mwj0fe1ZCDRFc9ws9XQE0SJE1jc2VKxhaLFIw9vEWSxW3yscwzPYGRgmSaumWUF-TBOsVJ4S4FwfCDQb5-2uUHXTVAefbVSd9IzaZ_vv9VR9KugtAtrZZl00gBtQ18GrD0DOEiukzBVguDDmDX0oDR0pbCK0JNW3wlzPpgDoOYFvE5HbmEwFq8ZBVlbrwj5M3U91pgpasFYsomPXmsFfzUy1pUsnf-Jdmt1Jb68B9zkz7gfrevYd8HIa_II2BKE8V-dbXVHIGNLgqWBXGR7HOoE5TEEm0SgAMw0TWrgXRI0mnJxrMF3yP_bgKxNkSIVTpsM6D7fuwaus

Monaco Editor Playground Code

const value = /* set from `myEditor.getModel()`: */ `my \$regex = qr{\\W{1,10}}`;

// Hover on each property to see its docs!
const myEditor = monaco.editor.create(document.getElementById("container"), {
	value,
	language: "perl",
	automaticLayout: true,
});

Reproduction Steps

Put the editor in Perl mode, type in my $regex = qr{\\W{1,10}}

Actual (Problematic) Behavior

The regular expression was interpreted as being closed by the first instance of } resulting in the second instance being highlighted red. See below:

Expected Behavior

The regular expression string should continue to be highlighted up to and including the second } as show in the vscode.dev screenshot below.

Additional Context

Correct syntax highlighting on vscode.dev:

Contributor guide

Tech stack
typescriptjavascript
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
Perl regex syntaxMonaco Editor TextMate grammars
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
60
Research direction
Investigate the Perl TextMate grammar file (likely `perl.tmLanguage.json`) in the Monaco editor source. Locate the rule for `qr` operator and adjust the regex pattern to properly match balanced curly braces. Check the TextMate scope for the regex string and ensure the closing `}` is included in the string highlight.