[Bug] 0.34: bracketPairColorization does not work

[oldrich-svec]

Reproducible in vscode.dev or in VS Code Desktop?

• [X] Not reproducible in vscode.dev or VS Code Desktop

Reproducible in the monaco editor playground?

• [ ] Not reproducible in the monaco editor playground

Monaco Editor Playground Code

monaco.editor.create(document.getElementById('container'), {
	value: "function hello() {\n\talert('Hello world!');\n}",
	language: 'javascript',
    bracketPairColorization: { enabled: true },
    ['bracketPairColorization.enabled']: true
});

Reproduction Steps

No response

Actual (Problematic) Behavior

The brackets are not colorized.

Expected Behavior

The brackets are colorized.

Additional Context

It used to work in Monaco 0.32.1

It seems like to colorization is added and then immediately afterwards on the next render removed.

[yanny7]

Also matchBrackets doesn't work

[NotWearingPants]

This is what caused the problem:

• Idea to use grammars to help with bracket pairs: microsoft/vscode#144736
• Implementing the idea but only for TextMate grammars (VSCode) and not Monarch grammars (monaco-editor): microsoft/vscode#146962
• because Monarch grammars don't support this feature yet, this PR adds the "brackets flag" to all tokens: microsoft/vscode#156450
• Apparently the fix added the flag to TextMate grammars as well, making the flag meaningless, so the fix was reverted: microsoft/vscode#156460

Now Monarch is still broken because of this, i.e. monaco editor. We need to find a place to set the flag but only for Monarch grammars and not TextMate (here for example). @hediet do you have a fix coming?

Also, why do VSCode and Monaco use different syntax highlighters? (TextMate/Monarch). Which one is better?

[oldrich-s]

I actually use vscode-textmate in monaco in my project. Do you know how to make the bracket coloring work there?

EDIT:

I made it working by the following call:

const grammar = await registry.loadGrammarWithConfiguration(
    'source.ts',
    languageId,
    {
      balancedBracketSelectors: ['*'],
      unbalancedBracketSelectors: [],
    }
  )

[oldrich-s]

Also, why do VSCode and Monaco use different syntax highlighters? (TextMate/Monarch). Which one is better?

For historical reasons. Monarch is older, faster, less rich and less accurate. TextMate requires WebAssembly and is slower. That's probably why it is not default highlighter for Monaco (yet)?

[terpimost]

vscode-textmate in monaco in my project. D

Wow, @oldrich-s could you share how are you integrating vscode-textmate in monaco?

[narkreeta]

I actually use vscode-textmate in monaco in my project. Do you know how to make the bracket coloring work there?

EDIT:

I made it working by the following call:

const grammar = await registry.loadGrammarWithConfiguration(
    'source.ts',
    languageId,
    {
      balancedBracketSelectors: ['*'],
      unbalancedBracketSelectors: [],
    }
  )

I used monaco-textmate but Facing same issue bracket pair colorization, can you help on this and is it vscode-textmate grammar registry?

[oldrich-s]

I used monaco-tm example as given in the FAQ of the monaco-editor documentation. There you have the loadGrammarWithConfiguration:

https://github.com/bolinfest/monaco-tm/blob/master/src/providers.ts#L200

which has a type of registry: VSTextmate.Registry

[narkreeta]

I used monaco-tm example as given in the FAQ of the monaco-editor documentation. There you have the loadGrammarWithConfiguration:

https://github.com/bolinfest/monaco-tm/blob/master/src/providers.ts#L200

which has a type of registry: VSTextmate.Registry

I got it but it's showing me error when I use { balancedBracketSelectors: ['*'], unbalancedBracketSelectors: [], }

[oldrich-s]

You probably need to update both vscode-textmate and onigurama to the latest versions.

[narkreeta]

You probably need to update both vscode-textmate and onigurama to the latest versions.

It's already latest version , in registry.loadGrammarwithConfiguration'3 3rd argument type is IGrammarConfiguration and it's interface export interface IGrammarConfiguration { embeddedLanguages?: IEmbeddedLanguagesMap; tokenTypes?: ITokenTypeMap; } so How to use this { balancedBracketSelectors: ['*'], unbalancedBracketSelectors: [], }?

[oldrich-s]

vscode-textmate v7.0.1 contains release/main.d.ts that contains:

export interface IGrammarConfiguration {
    embeddedLanguages?: IEmbeddedLanguagesMap;
    tokenTypes?: ITokenTypeMap;
    balancedBracketSelectors?: string[];
    unbalancedBracketSelectors?: string[];
}

[narkreeta]

vscode-textmate v7.0.1 contains release/main.d.ts that contains:

export interface IGrammarConfiguration {
    embeddedLanguages?: IEmbeddedLanguagesMap;
    tokenTypes?: ITokenTypeMap;
    balancedBracketSelectors?: string[];
    unbalancedBracketSelectors?: string[];
}

Thanks Issue solved

[hediet]

Duplicate of #3449.