How to make sure a theme is defined for token provider

[camargo]

Great library! I am working on attaching it to the java-language-server. I have it all working, but I am not able to get syntax highlighting to work because of an error:

errors.js:15 Uncaught Error: Cannot read properties of undefined (reading 'match')
TypeError: Cannot read properties of undefined (reading 'match')

This is thrown in the MonarchModernTokensCollector because theme is undefined. Here is my updated common.ts file from the example directory:

import 'monaco-editor/esm/vs/editor/edcore.main.js';
import { Uri, languages } from 'monaco-editor/esm/vs/editor/editor.api.js';
import { MonacoLanguageClient, initServices } from 'monaco-languageclient';
import normalizeUrl from 'normalize-url';
import { CloseAction, ErrorAction, MessageTransports } from 'vscode-languageclient';
import { WebSocketMessageReader, WebSocketMessageWriter, toSocket } from 'vscode-ws-jsonrpc';
import { createConfiguredEditor, createModelReference } from 'vscode/monaco';

// @ts-ignore
import { conf, language } from 'monaco-editor/esm/vs/basic-languages/java/java.js';

export const createUrl = (hostname: string, port: number, path: string): string => {
    const protocol = location.protocol === 'https:' ? 'wss' : 'ws';
    return normalizeUrl(`${protocol}://${hostname}:${port}${path}`);
};

export const createLanguageClient = (transports: MessageTransports): MonacoLanguageClient => {
    return new MonacoLanguageClient({
        name: 'Java Language Client',
        clientOptions: {
            // use a language id as a document selector
            documentSelector: ['java'],
            // disable the default error handler
            errorHandler: {
                error: () => ({ action: ErrorAction.Continue }),
                closed: () => ({ action: CloseAction.DoNotRestart })
            }
        },
        // create a language client connection from the JSON RPC connection on demand
        connectionProvider: {
            get: () => {
                return Promise.resolve(transports);
            }
        }
    });
};

export const createWebSocket = (url: string) => {
    const webSocket = new WebSocket(url);
    webSocket.onopen = () => {
        const socket = toSocket(webSocket);
        const reader = new WebSocketMessageReader(socket);
        const writer = new WebSocketMessageWriter(socket);
        const languageClient = createLanguageClient({
            reader,
            writer
        });
        languageClient.start();
        reader.onClose(() => languageClient.stop());
    };
    return webSocket;
};

export const createDefaultJavaContent = (): string => {
    return `public class Test {
    public static void main(String[] args) {
        System.out.println("Hello, World!");
    }
}`;
};

export const createJavaEditor = async (config: { htmlElement: HTMLElement; content: string; init: boolean }) => {
    const languageId = 'java';

    if (config.init === true) {
        await initServices({
            configurationServiceConfig: {
                defaultWorkspaceUri: '/tmp'
            },
            debugLogging: true,
            enableConfigurationService: true,
            enableModelEditorService: true,
            enableTextmateService: true,
            enableThemeService: true,
            modelEditorServiceConfig: { useDefaultFunction: true }
        });
    }

    // register the JAVA language with Monaco
    languages.register({
        id: languageId,
        extensions: ['.java', '.jav'],
        aliases: ['Java', 'java'],
        mimetypes: ['text/x-java-source', 'text/x-java']
    });

    console.log(conf);
    console.log(language);

    languages.setLanguageConfiguration('java', conf);
    languages.setMonarchTokensProvider('java', language);

    // create the model
    const uri = Uri.parse('Test.java');
    const modelRef = await createModelReference(uri, config.content);
    modelRef.object.setLanguageId(languageId);

    // create monaco editor
    const editor = createConfiguredEditor(config.htmlElement, {
        autoClosingBrackets: 'always',
        automaticLayout: true,
        glyphMargin: true,
        lightbulb: { enabled: true },
        model: modelRef.object.textEditorModel
    });

    return {
        languageId,
        editor,
        uri,
        modelRef
    };
};

I am importing monaco-editor/esm/vs/basic-languages/java/java.js manually and trying to set the tokens provider. If I comment out languages.setMonarchTokensProvider('java', language); everything works (no error thrown). Any ideas on how I can fix to get syntax highlighting for Java working? I feel there is some config I'm missing. Or is there another way I should be doing this to avoid this error all together?

Thanks!

[CGNonofr]

You enabled the textmate and theme service so you're not supposed to use monarch anymore.

You're supposed to used a vscode theme and a textmate grammar

[kaisalmen]

@camargo if you want to use monarch you cannot use the services supplied by monaco-vscode-api.
But, thanks to @CGNonofr you can just use the java default extension(s) from vscode that are now exposed by monaco-vscode-api.

At the top import the following:

import 'vscode/default-extensions/theme-defaults';
import 'vscode/default-extensions/java';

And add enableLanguagesService to initServices:

await initServices({
	enableThemeService: true,
	enableModelEditorService: true,
	modelEditorServiceConfig: {
		useDefaultFunction: true
	},
	enableLanguagesService: true,
	debugLogging: true
});

For java you don't not need to use any further code/supply configuration.

We do the same thing "by hand" for a Langium DSL here in the repo:
https://github.com/TypeFox/monaco-languageclient/blob/main/packages/examples/main/src/langium/main.ts

[camargo]

Worked great. Thank you so much!

[umiiw2010]

Thanks!!!