@typefox/monaco-editor-react only has plaintext syntax highlighting

[dmeij]

I've been trying to get syntax highlighting working for a while now. I just can't seem to get it working and I hope someone here can help me. It looks like only plaintext is recognized as a language.

These are the versions I'm using:

"monaco-languageclient": "^8.8.3" "@typefox/monaco-editor-react": "^4.5.3"

I've also tried adding other languages ​​via "monaco-languages": "^2.11.1", but that didn't work either.

Does anyone here know how I can get syntax highlighting working for a language like PHP or Javascript.

[kaisalmen]

Hi @dmeij please take a look at the Python react example https://github.com/TypeFox/monaco-languageclient/blob/main/packages/examples/src/python/client/reactPython.tsx

The syntax highlighting is loaded here: https://github.com/TypeFox/monaco-languageclient/blob/main/packages/examples/src/python/client/config.ts#L9

Does the codeUri in your configuration match the expected file ending for the syntax highlighting?

[dmeij]

Hi @kaisalmen, thnx for the quick reply! I just tried it but it didn't work. I doubt if example is old. Because when I pass wrapperConfig as a prop directly to MonacoEditorReactComp I get an error message that loggerConfig cannot be found. Because the prop should be userConfig that you pass to the component. If I adjust it like this it still doesn't work:

<MonacoEditorReactComp userConfig={{wrapperConfig: this.wrapperConfig}}

This is the Setup I use:

`import * as vscode from 'vscode'; import getEditorServiceOverride from '@codingame/monaco-vscode-editor-service-override'; import getKeybindingsServiceOverride from '@codingame/monaco-vscode-keybindings-service-override'; import '@codingame/monaco-vscode-php-default-extension'; import { LogLevel } from 'vscode/services'; import { createUrl, WrapperConfig } from 'monaco-editor-wrapper'; import { useOpenEditorStub } from 'monaco-editor-wrapper/vscode/services'; import { toSocket, WebSocketMessageReader, WebSocketMessageWriter } from 'vscode-ws-jsonrpc'; import { useWorkerFactory } from 'monaco-editor-wrapper/workerFactory';

function configureMonacoWorkers(Logger) { useWorkerFactory({ workerOverrides: { ignoreMapping: true, workerLoaders: { TextEditorWorker: () => new Worker(new URL('monaco-editor/esm/vs/editor/editor.worker.js', import.meta.url), { type: 'module' }), TextMateWorker: () => new Worker(new URL('@codingame/monaco-vscode-textmate-service-override/worker', import.meta.url), { type: 'module' }) } }, logger }); };

export default function createUserConfig(workspaceRoot, code, codeUri) { const url = createUrl({ secured: false, host: '192.168.178.65', port: 13454, }); console.log(url); const webSocket = new WebSocket(url); const iWebSocket = toSocket(webSocket); const reader = new WebSocketMessageReader(iWebSocket); const writer = new WebSocketMessageWriter(iWebSocket);

return {
    languageClientConfig: {
        php: {
            languageId: 'php',
            name: 'php Language Server Example',
            connection: {
                options: {
                    $type: 'WebSocketDirect',
                    webSocket: webSocket,
                    startOptions: {
                        onCall: (languageClient) => {
                            console.log('onCall', languageClient);
                        },
                        reportStatus: true,
                    }
                },
                messageTransports: { reader, writer }
            },
            clientOptions: {
                documentSelector: ['php'],
                workspaceFolder: {
                    index: 0,
                    name: 'workspace',
                    uri: vscode.Uri.parse(workspaceRoot)
                },
            }
        }
    },
    logLevel: LogLevel.Debug,
    vscodeApiConfig: {
        userServices: {
            ...getEditorServiceOverride(useOpenEditorStub),
            ...getKeybindingsServiceOverride()
        },
        userConfiguration: {
            json: JSON.stringify({
                'workbench.colorTheme': 'Default Dark Modern',
                'editor.guides.bracketPairsHorizontal': 'active',
                'editor.wordBasedSuggestions': 'off',
                'editor.experimental.asyncTokenization': true,
            })
        }
    },
    editorAppConfig: {
        $type: 'extended',
        codeResources: {
            main: {
                text: code,
                uri: codeUri,
                theme: 'vs-dark'
            }
        },
        useDiffEditor: false,
        monacoWorkerFactory: configureMonacoWorkers
    }
};

};`

[kaisalmen]

@dmeij the current code on main changed quite a bit. The new major versions are not yet released, but there are preview versions available ("-next.4" were released yesterday and match the current code).

[dmeij]

Ok, is there an example for the current version?

[kaisalmen]

@dmeij have you tried cloning this repo, building it and playing around with the examples as described in the README?

[dmeij]

Hi @kaisalmen. I cloned the repo en managed to make ik work, so that's great! But when I try this in my own project I can't get it to work. I have now used the same version as in the repo:

"monaco-languageclient": "^9.0.0-next.4" "@typefox/monaco-editor-react": "^6.0.0-next.4"

I do use webpack instead of vite. Should I set something for that? I saw in the readme that you had to set things for that, but it is not entirely clear to me what exactly I have to do. Isn't there an example of the config? Maybe it has nothing to do with this. I hope you can help me further. If you need more information, please let me know!

[kaisalmen]

Hey @dmeij we have a webpack verification example, so we can make sure things work there as well: https://github.com/TypeFox/monaco-languageclient/blob/main/verify/webpack/

Especially the config could be helpful: https://github.com/TypeFox/monaco-languageclient/blob/main/verify/webpack/webpack.config.js

[dmeij]

Hi @kaisalmen, the webpack.config looks pretty straightforward. I did found out that the TextMateWorker isn't loaded in my application. Could this be the problem?

[dmeij]

TextEditorWorker is loaded btw.

[kaisalmen]

What happens when you set 'editor.experimental.asyncTokenization': false in the userConfiguration. Then the textmate worker is not used.

[dmeij]

Unfortunately this makes no difference :(.

My Log still shows no sign of the TextMateWorker. En although my TextEditorWorker seems to get initiated. The theme of the editor isn't loaded. It's white instead of dark.

DEBUG Initializing vscode services. Caller: monaco-editor (56)
DEBUG Loading service: codeEditorService
DEBUG Loading service: editorService
DEBUG Loading service: textEditorService
DEBUG Loading service: editorGroupsService
DEBUG Loading service: fileService
DEBUG Loading service: textFileService
DEBUG Loading service: filesConfigurationService
DEBUG Loading service: elevatedFileService
DEBUG Loading service: keybindingService
DEBUG Loading service: keyboardLayoutService
DEBUG Loading service: commandService
DEBUG Loading service: configurationService
DEBUG Loading service: contextService
DEBUG Loading service: textResourceConfigurationService
DEBUG Loading service: workspaceEditingService
DEBUG Loading service: workspacesService
DEBUG Loading service: textResourcePropertiesService
DEBUG Loading service: configurationResolverService
DEBUG Loading service: textMateTokenizationFeature
DEBUG Loading service: themeService
DEBUG Loading service: languageService
DEBUG Loading service: ILanguageStatusService
DEBUG Loading service: environmentService
DEBUG Loading service: loggerService
DEBUG Loading service: logService
DEBUG Loading service: IDefaultLogLevelsService
DEBUG Loading service: textModelService
DEBUG Initialization of vscode services completed successfully.
INFO Init of Extended App was completed.
INFO Starting monaco-editor (56)
INFO getWorker: moduleId: workerMain.js label: TextEditorWorker
INFO languageClientWrapper (php Language Server Example): Started successfully.

This is my Setup:

`/* --------------------------------------------------------------------------------------------

• Copyright (c) 2024 TypeFox and others.
• Licensed under the MIT License. See LICENSE in the package root for license information.
• ------------------------------------------------------------------------------------------ */

import * as vscode from 'vscode'; import getEditorServiceOverride from '@codingame/monaco-vscode-editor-service-override'; import getKeybindingsServiceOverride from '@codingame/monaco-vscode-keybindings-service-override'; import '@codingame/monaco-vscode-php-default-extension'; import { LogLevel } from 'vscode/services'; // import { createUrl } from 'monaco-languageclient/tools'; import { WrapperConfig, createUrl } from 'monaco-editor-wrapper'; import { useOpenEditorStub } from 'monaco-editor-wrapper/vscode/services'; import { toSocket, WebSocketMessageReader, WebSocketMessageWriter } from 'vscode-ws-jsonrpc'; import { configureMonacoWorkers } from 'root/globals/utils';

export const createUserConfig = (workspaceRoot: string, code: string, codeUri: string): WrapperConfig => { const url = createUrl({ secured: false, host: '...', port: **, path: 'intelephense', extraParams: { authorization: 'UserAuth' } }); const webSocket = new WebSocket(url); const iWebSocket = toSocket(webSocket); const reader = new WebSocketMessageReader(iWebSocket); const writer = new WebSocketMessageWriter(iWebSocket);

return {
    languageClientConfigs: {
        php: {
            languageId: 'php',
            name: 'php Language Server Example',
            connection: {
                options: {
                    $type: 'WebSocketDirect',
                    webSocket: webSocket,
                    startOptions: {
                        onCall: (languageClient) => {
                            console.log(languageClient);
                        },
                    }
                },
                messageTransports: { reader, writer }
            },
            clientOptions: {
                documentSelector: ['php'],
                workspaceFolder: {
                    index: 0,
                    name: 'workspace',
                    uri: vscode.Uri.parse(workspaceRoot)
                },
            }
        }
    },
    logLevel: LogLevel.Debug,
    vscodeApiConfig: {
        userServices: {
            ...getEditorServiceOverride(useOpenEditorStub),
            ...getKeybindingsServiceOverride()
        },
        userConfiguration: {
            json: JSON.stringify({
                'workbench.colorTheme': 'Default Dark Modern',
                'editor.guides.bracketPairsHorizontal': 'active',
                'editor.wordBasedSuggestions': 'off',
                'editor.experimental.asyncTokenization': true
            })
        }
    },
    editorAppConfig: {
        $type: 'extended',
        codeResources: {
            main: {
                text: code,
                uri: codeUri,
            }
        },
        useDiffEditor: false,
        monacoWorkerFactory: configureMonacoWorkers,
        htmlContainer: document.getElementById('application'),
    }
};

}; `