Monaco Editor and Monaco Languageclient Wrapper

This packages provides a wrapped monaco-editor with full basic language support and enhanced support via workers for special languages (e.g. TS, HTML). The monaco-languageclient can be activated to connect to a language server either via jsonrpc over a websocket to an exernal server process or via language server protocol for browser where the language server runs in a web worker.

Getting Started

If you have node.js LTS available, then from the root of the project run:

1npm i
2npm run build

Afterwards launch the Vite.js development mode:

1npm run dev

You find examples (manual human testing) in the root of the repository index.html. They can be used once Vite is running.

Usage examples

Monaco Editor with JavaScript language support in web worker

1// helper function for loading monaco-editor's own workers
2import { buildWorkerDefinition } from 'monaco-editor-workers';
3buildWorkerDefinition('./node_modules/monaco-editor-workers/dist/workers', import.meta.url, false);
4import { MonacoEditorLanguageClientWrapper } from 'monaco-editor-wrapper';
5
6const client = new MonacoEditorLanguageClientWrapper();
7const editorConfig = client.getEditorConfig();
8editorConfig.setMainLanguageId('javascript');
9editorConfig.setMainCode(`function logMe() {
10    console.log('Hello monaco-editor-wrapper!');
11};`);
12
13// assuming there is a div element named "monaco-editor-root"
14client.startEditor(document.getElementById('monaco-editor-root') as HTMLElement)
15    .then((s: unknown) => console.log(s))
16    .catch((e: Error) => console.error(e));

Monaco Editor with language server running in a web worker:

1// helper function for loading monaco-editor's own workers
2import { buildWorkerDefinition } from 'monaco-editor-workers';
3buildWorkerDefinition('./node_modules/monaco-editor-workers/dist/workers', import.meta.url, false);
4import { MonacoEditorLanguageClientWrapper } from 'monaco-editor-wrapper';
5
6const client = new MonacoEditorLanguageClientWrapper();
7
8const editorConfig = client.getEditorConfig();
9editorConfig.setMainLanguageId('plaintext');
10editorConfig.setMainCode(`#ff0000 (red)
11#00ff00 (green)
12#0000ff (blue)`);
13
14// use monaco-languageclient with web worker
15editorConfig.setUseLanguageClient(true);
16editorConfig.setUseWebSocket(false);
17
18// load worker
19const workerURL = new URL('./dist/worker.ts', window.location.href).href;
20const lsWorker = new Worker(workerURL, {
21    type: 'classic',
22    name: 'LanguageServer'
23});
24client.setWorker(lsWorker);
25
26// assuming there is a div element named "monaco-editor-root"
27client.startEditor(document.getElementById('monaco-editor-root') as HTMLElement)
28    .then((s: unknown) => console.log(s))
29    .catch((e: Error) => console.error(e));