Semantic Highlighting

[cdietrich]

Hi, is there a way to enable semantic highlighting in 2.x
(I am using the classic variant)
Somehow i don’t find a way to properly pass
“semanticHighlighting.enabled”: true
Down to Monaco anymore
(Was working before in 1.6 cdietrich/langium-inject-files-webworker@138d71e)

[kaisalmen]

Hi @cdietrich for example if you add it here:
https://github.com/TypeFox/monaco-components/blob/main/packages/examples/src/wrapperWs.ts#L20-L28
The config can be applied here:
https://github.com/TypeFox/monaco-components/blob/main/packages/examples/src/wrapperWs.ts#L52-L61

The wrapper is then started with the full config object.

If that does not work, please let me know. Thanks

[cdietrich]

@kaisalmen i got it running with the vscode config
(as this one has the user config)
but not with the classic one (the langium docs recommend to use that one)
main...cdietrich:monaco-components:cd_monaco_classic_semantic_highlighting

[montymxb]

@cdietrich Although we happened to write the Langium docs targeting the classic config, we utilize both in our own implementations (ex. the showcase statemachine example uses the VSCode config, while others use the classic config). Going with the VSCode config is a perfectly fine choice, and we should support this in documentation as well; we just need to get to get around to adding it in.

[kaisalmen]

@cdietrich thanks for your feedback. The semantic highlighting should work when using the classic configuration. I need to investigate.

[kaisalmen]

@cdietrich yes, it is a bug in the initialization. The configured user parameters where not taken into account. They were initialized always empty

[kaisalmen]

I will fix this together with in #31

[cdietrich]

thx. i found this workaround

await new EditorVscodeApi("unused", {editorConfig: {languageId:"egal"},wrapperConfig:{
}}).updateConfig({
    json: `{
    "workbench.colorTheme": "Default Dark Modern",
    "editor.fontSize": 14,
    "editor.lightbulb.enabled": true,
    "editor.lineHeight": 20,
    "editor.guides.bracketPairsHorizontal": "active",
    "editor.lightbulb.enabled": true,
    "editor.semanticHighlighting.enabled": true
    }`})
    ```

[kaisalmen]

@cdietrich This is fixed with #31. The configuration changed again, sorry, but now you configure the respective editor application at one place and either the classic or the vscode-api one, see the two examples:
https://github.com/TypeFox/monaco-components/blob/main/packages/examples/src/wrapperWs.ts#L11-L78
https://github.com/TypeFox/monaco-components/blob/main/packages/examples/src/langium/langiumWrapperConfig.ts#L14-L90
Next preview releases are available:
https://www.npmjs.com/package/monaco-editor-wrapper/v/2.2.0-next.2
https://www.npmjs.com/package/@typefox/monaco-editor-react/v/1.2.0-next.2

[cdietrich]

cool. works smooth now. thx

[cdietrich]

@kaisalmen should it be possible to use
classic and semantic highlighting and monarch grammar in combination?

[kaisalmen]

Yes, as long as you don't enable theme and textmate service, see also this explanation:
TypeFox/monaco-languageclient#528 (comment)

[cdietrich]

yes but this works neither (it crashes with)

TypeError: Cannot read properties of undefined (reading 'match')
    at P5.emit (index-4c11c534.js:100621:27)
    at yTe._myTokenize (index-4c11c534.js:100881:20)
    at yTe._tokenize (index-4c11c534.js:100717:80)
    at yTe.tokenizeEncoded (index-4c11c534.js:100713:112)
    at AL (index-4c11c534.js:36759:13)
    at g$e.updateTokensUntilLine (index-4c11c534.js:36574:67)
    at m$e._tokenizeOneInvalidLine (index-4c11c534.js:36806:47)
    at m$e._backgroundTokenizeForAtLeast1ms (index-4c11c534.js:36795:35)
    at i (index-4c11c534.js:36785:130)
    at m$e._backgroundTokenizeWithDeadline (index-4c11c534.js:36787:5)
    at index-4c11c534.js:32:16

see https://github.com/cdietrich/hello-world-sem-high

[kaisalmen]

Thank you, I will investigate. My understanding is that this should work.

[kaisalmen]

@cdietrich there is now an example available (moved over from monaco-languageclient) that allows to start the Langium Grammar language client and editor in classic or vscodeApi mode. As usual the Langium LS runs in a web worker. Semantic highlighting currently only works in vscodeApi mode:
https://github.com/TypeFox/monaco-components/blob/main/packages/examples/src/langium/wrapperLangium.ts

I will continue the investigation. This new examples shows how to achieve the same editor behavior in both modes (almost 😅 ).

[kaisalmen]

@cdietrich there is a workaround now available in the Langium grammar example:
https://github.com/TypeFox/monaco-components/blob/main/packages/examples/src/langium/wrapperLangium.ts#L50-L52

Full fix for the wrapper comes tomorrow.

[cdietrich]

@kaisalmen did you change something again in mer 2.2.0 / mew 3.2.0?
it seems to be broken again

[kaisalmen]

It was working fine. Justed checked it with this:
https://github.com/TypeFox/monaco-components/blob/main/packages/examples/src/langium/config/wrapperLangiumClassic.ts

Did you adjust the service loading? See also:
https://github.com/TypeFox/monaco-components/blob/main/packages/monaco-editor-wrapper/CHANGELOG.md#320---2023-09-29
All things need to be separately imported (new with [email protected]). This allowed us to reduce bundle sizes.

[kaisalmen]

@cdietrich but I found another issue that I overlook/broke again: Waiting for extension loading is broken. Will release a 3.2.1 soon.

[cdietrich]

the funny thing is: it works in wrapper but does not work in react.
maybe i find the time to build a reproducer with react
at the weekend as well.
unfortunately our prod env is a mess thus i will need that anyway.

[kaisalmen]

the funny thing is: it works in wrapper but does not work in react.

classic or vscodeApi mode?

[cdietrich]

we use

editorAppConfig: {
      $type: 'classic' as const,

[kaisalmen]

maybe i find the time to build a reproducer with react

Easiest approach is to use this config from https://github.com/TypeFox/monaco-components/blob/main/packages/examples/src/langium/config/wrapperLangiumClassic.ts

and use it here:
https://github.com/TypeFox/monaco-components/blob/main/packages/examples/src/langium/reactStatemachine.tsx

[kaisalmen]

You can just plug the same config into the react component

[kaisalmen]

New versions are available
https://www.npmjs.com/package/monaco-editor-wrapper/v/3.2.1
https://www.npmjs.com/package/@typefox/monaco-editor-react/v/2.2.1

[cdietrich]

problem is we use old node, so we also need to cross compile etc .... :(

[cdietrich]

ok got it running. problem was on our side

[cdietrich]

@kaisalmen tried so create a simplified example with vite
https://github.com/cdietrich/my-monaco-editor-react-example
the problem here is that
i get the following error message:

assert.js:22 Uncaught Error: Assertion failed (There is already an extension with this id)
at ok (assert.js:22:15)
at RegistryImpl.add (platform.js:14:16)
at editor.js:313:10

any idea?

solved by deduping monaco and vscode

[rajialtooro]

solved by deduping monaco and vscode

Hello,

I'm facing the same issue as you ("(There is already an extension with this id")

Can you please explain what you mean by "deduping monaco and vscode"

Thanks!

[cdietrich]

See TypeFox/monaco-languageclient#546 (comment)

[kaisalmen]

Updated monaco-languageclient troubleshooting section: https://github.com/TypeFox/monaco-languageclient#vite-dev-server-troubleshooting