Monaco-editor: YAML syntax highlighting and red escaped characters

[jayspadie]

monaco-editor version: 0.13.1
Browser: Chrome, any
OS: Windows 10

YAML language syntax highlighting applies a red color to all charaters preceded by '\'. Presumably, this is to indicate any escaped character (valid or invalid?) but it's getting applied for all cases in both double quotes (where escaping should apply) and single quotes (where escaping should not apply). This is particularly noticeable in single-quoted file paths where escaping should not apply with the '\' path separator.

Comparing Monaco to VS Code:

VS Code correctly applies different colors to valid (normal dark red string color) and invalid (bright red) only to escaped characters within double quotes:

Monaco incorrectly highlights every character following '\' whether in single or double quotes:

[alexdima]

This would be a good opportunity for a first pull request.

The Monarch tokenizer is implemented here -- https://github.com/Microsoft/monaco-languages/blob/0aea831f058968319b8084421ce948e43fc1e969/src/yaml/yaml.ts#L159-L170 --

[arshadkazmi42]

@alexandrudima is this issue still available? I would like to work on this

[arshadkazmi42]

How to run it in my local machine to check the editor?

[rsemenov]

@arshadkazmi42 , to test your changes you probably need to run Monaco editor as AMD or ESM version as described here with your updated version of monaco-languages package that you can generate and install locally without publishing. Let me know if you still working on this issue else I will pick it up.

[arshadkazmi42]

@rsemenov Thank you for the documentation. I will be working on it.

[arshadkazmi42]

@rsemenov I am a bit busy for few days. You can take it up if you want.

[nalinbhardwaj]

@rsemenov : hi, are you working on this issue? If not, I’d like to fix this.

[rsemenov]

@nalinbhardwaj, it is in my queue, but you can pick it up.

[grzegorz-wcislo]

I have submitted a pull request :)

[nalinbhardwaj]

@grzegorz-wcislo : I think you missed on fixing the part of the issue where in double quoted strings characters like "\m" are highlighted as invalid as well(the comment has a screenshot with an example of it)?

@rsemenov / @alexandrudima : since this issue was already fixed, I'd love to help contribute to the project if you have any other good starter issues in mind. Let me know of any. :)

[grzegorz-wcislo]

@nalinbhardwaj Incorrect excapes are recognized as such, but I don't know where is the code resonsible for styling. If you know where it is you can fix it :smile: or message me

[euler16]

has the issue been fixed?

[rsemenov]

the reason why invalid escape characters have the same foreground color as valid ones is that neither 'string.escape' nor 'string.escape.invalid' are defined in default vscode themes (themes.ts) . And in both cases token theme parser returns default color. With proper schema these will be solved. So I think this issue can be closed now. @grzegorz-wcislo, thanks for the fix.

[rsemenov]

@alexandrudima , is it worth adding 'string.escape' and 'string.escape.invalid' to the default themes? Looks like multiple languages that use these tokens can benefit from it.

[alexdima]

OCR text content:

variables:
  escDoubleQuotes: "path\to\my\solution.sln \t \n \a \x \c \\"
  escSingleQuotes: 'path\to\my\solution.sln \t \n \a \x \c \\'

[alexdima]

This has actually been fixed in the meantime: