monaco-languageclient-examples 2025.8.6 → 2025.9.1

package/src/langium/statemachine/config/{wrapperStatemachineConfig.ts → statemachineConfig.ts}

@@ -9,7 +9,7 @@ import getLocalizationServiceOverride from '@codingame/monaco-vscode-localizatio
 import { LogLevel } from '@codingame/monaco-vscode-api';
 import { MessageTransports } from 'vscode-languageclient';
 import { createDefaultLocaleConfiguration } from 'monaco-languageclient/vscodeApiLocales';
-import type { MonacoVscodeApiConfig } from 'monaco-languageclient/vscodeApiWrapper';
+import type { HtmlContainerConfig, MonacoVscodeApiConfig } from 'monaco-languageclient/vscodeApiWrapper';
 import type { LanguageClientConfig } from 'monaco-languageclient/lcwrapper';
 import { configureDefaultWorkerFactory } from 'monaco-languageclient/workerFactory';
 import type { CodeContent, EditorAppConfig } from 'monaco-languageclient/editorApp';
@@ -25,13 +25,14 @@ export const createLangiumGlobalConfig = (params: {
     worker: Worker,
     messagePort?: MessagePort,
     messageTransports?: MessageTransports,
-    htmlContainer: HTMLElement
+    htmlContainer: HtmlContainerConfig
 }): ExampleAppConfig => {
     const extensionFilesOrContents = new Map<string, string | URL>();
     extensionFilesOrContents.set(`/${params.languageServerId}-statemachine-configuration.json`, statemachineLanguageConfig);
     extensionFilesOrContents.set(`/${params.languageServerId}-statemachine-grammar.json`, responseStatemachineTm);
 
     const languageClientConfig: LanguageClientConfig = {
+        languageId: 'statemachine',
         clientOptions: {
             documentSelector: ['statemachine']
         },
@@ -47,7 +48,10 @@ export const createLangiumGlobalConfig = (params: {
 
     const vscodeApiConfig: MonacoVscodeApiConfig = {
         $type: 'extended',
-        htmlContainer: params.htmlContainer,
+        viewsConfig: {
+            $type: 'EditorService',
+            htmlContainer: params.htmlContainer
+        },
         logLevel: LogLevel.Debug,
         serviceOverrides: {
             ...getKeybindingsServiceOverride(),
@@ -90,7 +94,6 @@ export const createLangiumGlobalConfig = (params: {
     };
 
     const editorAppConfig: EditorAppConfig = {
-        $type: vscodeApiConfig.$type,
         codeResources: {
             modified: params.codeContent
         }

package/src/langium/statemachine/launcher.ts

@@ -6,5 +6,5 @@
 import { initLocaleLoader } from 'monaco-languageclient/vscodeApiLocales';
 await initLocaleLoader();
 
-const { runStatemachineWrapper } = await import('./main.js');
-runStatemachineWrapper();
+const { runStatemachine } = await import('./main.js');
+runStatemachine();

package/src/langium/statemachine/main-react.tsx

@@ -3,17 +3,17 @@
  * Licensed under the MIT License. See LICENSE in the package root for license information.
  * ------------------------------------------------------------------------------------------ */
 
-import React, { StrictMode, useEffect, useState } from 'react';
+import React, { StrictMode, useState } from 'react';
 import ReactDOM from 'react-dom/client';
 import { BrowserMessageReader, BrowserMessageWriter } from 'vscode-languageclient/browser.js';
 import type { TextContents } from 'monaco-languageclient/editorApp';
 import { MonacoEditorReactComp } from '@typefox/monaco-editor-react';
-import { createLangiumGlobalConfig } from './config/wrapperStatemachineConfig.js';
+import { createLangiumGlobalConfig } from './config/statemachineConfig.js';
 import { loadStatemachineWorkerRegular } from './main.js';
 import text from '../../../resources/langium/statemachine/example.statemachine?raw';
 import { disableElement } from '../../common/client/utils.js';
 
-export const runStatemachineReact = async () => {
+export const runStatemachineReact = async (noControls: boolean) => {
     const worker = loadStatemachineWorkerRegular();
     const reader = new BrowserMessageReader(worker);
     const writer = new BrowserMessageWriter(worker);
@@ -28,68 +28,60 @@ export const runStatemachineReact = async () => {
         },
         worker,
         messageTransports: { reader, writer },
-        htmlContainer: document.getElementById('monaco-editor-root')!
+        htmlContainer: 'ReactPlaceholder'
     });
     const root = ReactDOM.createRoot(document.getElementById('react-root')!);
+    const App = () => {
 
-    try {
-        document.querySelector('#button-start')?.addEventListener('click', async () => {
-            disableElement('button-start', true);
-            disableElement('button-dispose', false);
-
-            const App = () => {
+        const [testState, setTestState] = useState<string>('');
 
-                const [ height, setHeight ] = useState('80vh');
-                const [testState, setTestState] = useState<string>('');
+        const onTextChanged = (textChanges: TextContents) => {
+            console.log(`text: ${textChanges.modified}\ntextOriginal: ${textChanges.original}`);
+            setTestState(textChanges.modified as string);
+        };
 
-                const onTextChanged = (textChanges: TextContents) => {
-                    console.log(`text: ${textChanges.modified}\ntextOriginal: ${textChanges.original}`);
-                    setTestState(textChanges.modified as string);
-                };
+        return (
+            <>
+                <div>
+                    <MonacoEditorReactComp
+                        style={{ 'height': '50vh' }}
+                        vscodeApiConfig={appConfig.vscodeApiConfig}
+                        editorAppConfig={appConfig.editorAppConfig}
+                        languageClientConfig={appConfig.languageClientConfig}
+                        onTextChanged={onTextChanged}
+                    />
+                    <b>Debug:</b><br />{testState}
+                </div>
+            </>
+        );
+    };
 
-                useEffect(() => {
-                    const timer = setTimeout(() => {
-                        console.log('Updating styles');
-                        setHeight('50vh');
-                    }, 1000);
+    const renderApp = () => {
+        const strictMode = (document.getElementById('checkbox-strictmode')! as HTMLInputElement).checked;
+        if (strictMode) {
+            root.render(<StrictMode><App /></StrictMode>);
+        } else {
+            root.render(<App />);
+        }
+    };
 
-                    return () => clearTimeout(timer);
-                }, []);
-
-                const languageClientConfigs = {
-                    configs: {
-                        langium: appConfig.languageClientConfig
-                    }
-                };
-                return (
-                    <>
-                        <div style={{ 'height': height }} >
-                            <MonacoEditorReactComp
-                                style={{ 'height': '100%' }}
-                                vscodeApiConfig={appConfig.vscodeApiConfig}
-                                editorAppConfig={appConfig.editorAppConfig}
-                                languageClientConfigs={languageClientConfigs}
-                                onTextChanged={onTextChanged}
-                            />
-                            <b>Debug:</b><br />{testState}
-                        </div>
-                    </>
-                );
-            };
-            const strictMode = (document.getElementById('checkbox-strictmode')! as HTMLInputElement).checked;
-            if (strictMode) {
-                root.render(<StrictMode><App /></StrictMode>);
-            } else {
-                root.render(<App />);
-            }
-            disableElement('checkbox-strictmode', true);
-        });
-        document.querySelector('#button-dispose')?.addEventListener('click', () => {
-            disableElement('button-start', false);
-            disableElement('button-dispose', true);
+    try {
+        if (noControls) {
+            renderApp();
+        } else {
+            document.querySelector('#button-start')?.addEventListener('click', async () => {
+                disableElement('button-start', true);
+                disableElement('button-dispose', false);
+                renderApp();
+                disableElement('checkbox-strictmode', true);
+            });
+            document.querySelector('#button-dispose')?.addEventListener('click', () => {
+                disableElement('button-start', false);
+                disableElement('button-dispose', true);
 
-            root.render([]);
-        });
+                root.render([]);
+            });
+        }
     } catch (e) {
         console.error(e);
     }

package/src/langium/statemachine/main.ts

@@ -6,7 +6,7 @@
 import * as vscode from 'vscode';
 import { BrowserMessageReader, BrowserMessageWriter } from 'vscode-languageclient/browser.js';
 import { EditorApp } from 'monaco-languageclient/editorApp';
-import { createLangiumGlobalConfig } from './config/wrapperStatemachineConfig.js';
+import { createLangiumGlobalConfig } from './config/statemachineConfig.js';
 import workerUrl from './worker/statemachine-server?worker&url';
 import workerPortUrl from './worker/statemachine-server-port?worker&url';
 import text from '../../../resources/langium/statemachine/example.statemachine?raw';
@@ -60,16 +60,16 @@ const startEditor = async () => {
     });
     editorApp = new EditorApp(appConfig.editorAppConfig);
 
-    // perform global init
+    // perform global monaco-vscode-api init
     const apiWrapper = new MonacoVscodeApiWrapper(appConfig.vscodeApiConfig);
-    await apiWrapper.init();
+    await apiWrapper.start();
 
     // init language client
     lcWrapper = new LanguageClientWrapper(appConfig.languageClientConfig);
     await lcWrapper.start();
 
     // run editorApp
-    await editorApp.start(appConfig.vscodeApiConfig.htmlContainer!);
+    await editorApp.start(apiWrapper.getHtmlContainer());
 
     editorApp.updateCodeResources({
         modified: {
@@ -85,11 +85,10 @@ const startEditor = async () => {
         text: textMod,
         uri: '/workspace/example-mod.statemachine'
     };
-    appConfig2.vscodeApiConfig.htmlContainer = document.getElementById('monaco-editor-root2')!;
     editorApp2 = new EditorApp(appConfig2.editorAppConfig);
 
-    // run editorApp
-    await editorApp2.start(appConfig2.vscodeApiConfig.htmlContainer);
+    // run a second editorApp with another dom element
+    await editorApp2.start(document.getElementById('monaco-editor-root2')!);
 
     vscode.commands.getCommands().then((x) => {
         console.log('Currently registered # of vscode commands: ' + x.length);
@@ -120,7 +119,7 @@ const disposeEditor = async () => {
     console.log(editorApp2?.reportStatus().join('\n'));
 };
 
-export const runStatemachineWrapper = async () => {
+export const runStatemachine = async () => {
     try {
         document.querySelector('#button-start')?.addEventListener('click', startEditor);
         document.querySelector('#button-dispose')?.addEventListener('click', disposeEditor);

package/src/multi/config.ts

@@ -9,7 +9,7 @@ import type { BaseLanguageClient } from 'vscode-languageclient/browser.js';
 
 export const createJsonLanguageClientConfig: () => LanguageClientConfig = () => {
     return {
-        name: 'JSON Client',
+        languageId: 'json',
         clientOptions: {
             documentSelector: ['json']
         },
@@ -27,6 +27,7 @@ export const createJsonLanguageClientConfig: () => LanguageClientConfig = () =>
 
 export const createPythonLanguageClientConfig: () => LanguageClientConfig = () => {
     return {
+        languageId: 'python',
         connection: {
             options: {
                 $type: 'WebSocketParams',

package/src/multi/twoLanguageClients.ts

@@ -14,7 +14,7 @@ import { configureDefaultWorkerFactory } from 'monaco-languageclient/workerFacto
 import { disableElement } from '../common/client/utils.js';
 import { createJsonLanguageClientConfig, createPythonLanguageClientConfig } from './config.js';
 import { MonacoVscodeApiWrapper, type MonacoVscodeApiConfig } from 'monaco-languageclient/vscodeApiWrapper';
-import { LanguageClientsManager } from 'monaco-languageclient/lcwrapper';
+import { LanguageClientsManager, type LanguageClientConfigs } from 'monaco-languageclient/lcwrapper';
 
 export const runMultipleLanguageClientsExample = async () => {
     disableElement('button-flip', true);
@@ -33,10 +33,12 @@ print("Hello Moon!")
     let currentText = textJson;
     let currenFileExt = 'json';
 
-    const htmlContainer = document.getElementById('monaco-editor-root')!;
     const vscodeApiConfig: MonacoVscodeApiConfig = {
         $type: 'extended',
-        htmlContainer,
+        viewsConfig: {
+            $type: 'EditorService',
+            htmlContainer: document.getElementById('monaco-editor-root')!
+        },
         logLevel: LogLevel.Debug,
         serviceOverrides: {
             ...getKeybindingsServiceOverride()
@@ -52,7 +54,6 @@ print("Hello Moon!")
     };
 
     const editorAppConfig: EditorAppConfig = {
-        $type: vscodeApiConfig.$type,
         id: '42',
         codeResources: {
             modified: {
@@ -62,12 +63,12 @@ print("Hello Moon!")
         }
     };
 
-    // perform global init
+    // perform global monaco-vscode-api init
     const apiWrapper = new MonacoVscodeApiWrapper(vscodeApiConfig);
-    await apiWrapper.init();
+    await apiWrapper.start();
 
     const lcManager = new LanguageClientsManager();
-    const languageClientConfigs = {
+    const languageClientConfigs: LanguageClientConfigs = {
         configs: {
             json: createJsonLanguageClientConfig(),
             python: createPythonLanguageClientConfig()
@@ -81,7 +82,7 @@ print("Hello Moon!")
             disableElement('button-start', true);
             disableElement('button-flip', false);
 
-            await editorApp.start(htmlContainer);
+            await editorApp.start(apiWrapper.getHtmlContainer());
             if (editorAppConfig.codeResources?.modified !== undefined) {
                 editorAppConfig.codeResources.modified.text = currentText;
                 editorAppConfig.codeResources.modified.uri = `/workspace/example.${currenFileExt}`;

package/src/python/client/config.ts

@@ -21,11 +21,11 @@ import getTestingServiceOverride from '@codingame/monaco-vscode-testing-service-
 import getBannerServiceOverride from '@codingame/monaco-vscode-view-banner-service-override';
 import getStatusBarServiceOverride from '@codingame/monaco-vscode-view-status-bar-service-override';
 import getTitleBarServiceOverride from '@codingame/monaco-vscode-view-title-bar-service-override';
-import type { EditorAppConfig } from 'monaco-languageclient/editorApp';
 import { createUrl } from 'monaco-languageclient/common';
+import type { EditorAppConfig } from 'monaco-languageclient/editorApp';
 import type { LanguageClientConfig } from 'monaco-languageclient/lcwrapper';
 import { createDefaultLocaleConfiguration } from 'monaco-languageclient/vscodeApiLocales';
-import { defaultHtmlAugmentationInstructions, defaultViewsInit, type MonacoVscodeApiConfig } from 'monaco-languageclient/vscodeApiWrapper';
+import { defaultHtmlAugmentationInstructions, defaultViewsInit, type HtmlContainerConfig, type MonacoVscodeApiConfig } from 'monaco-languageclient/vscodeApiWrapper';
 import { configureDefaultWorkerFactory } from 'monaco-languageclient/workerFactory';
 import * as vscode from 'vscode';
 import type { BaseLanguageClient } from 'vscode-languageclient/browser.js';
@@ -37,7 +37,7 @@ import { createDefaultWorkspaceContent } from '../../common/client/utils.js';
 import { provideDebuggerExtensionConfig } from '../../debugger/client/debugger.js';
 import { createDebugLaunchConfigFile, type ConfigParams, type FileDefinition } from '../../debugger/common/definitions.js';
 
-export const createDefaultConfigParams = (homeDir: string, htmlContainer?: HTMLElement): ConfigParams => {
+export const createDefaultConfigParams = (homeDir: string, htmlContainer: HtmlContainerConfig): ConfigParams => {
     const files = new Map<string, FileDefinition>();
     const workspaceRoot = `${homeDir}/workspace`;
     const configParams: ConfigParams = {
@@ -101,7 +101,6 @@ export const createPythonAppConfig = (): PythonAppConfig => {
 
     const vscodeApiConfig: MonacoVscodeApiConfig = {
         $type: 'extended',
-        htmlContainer: configParams.htmlContainer,
         logLevel: LogLevel.Debug,
         serviceOverrides: {
             ...getKeybindingsServiceOverride(),
@@ -121,7 +120,8 @@ export const createPythonAppConfig = (): PythonAppConfig => {
             ...getPreferencesServiceOverride()
         },
         viewsConfig: {
-            viewServiceType: 'ViewsService',
+            $type: 'ViewsService',
+            htmlContainer: configParams.htmlContainer,
             htmlAugmentationInstructions: defaultHtmlAugmentationInstructions,
             viewsInitFunc: defaultViewsInit
         },
@@ -176,7 +176,7 @@ export const createPythonAppConfig = (): PythonAppConfig => {
     };
 
     const languageClientConfig: LanguageClientConfig = {
-        name: 'Python Language Server Example',
+        languageId: 'python',
         connection: {
             options: {
                 $type: 'WebSocketDirect',
@@ -206,9 +206,7 @@ export const createPythonAppConfig = (): PythonAppConfig => {
         }
     };
 
-    const editorAppConfig: EditorAppConfig = {
-        $type: vscodeApiConfig.$type
-    };
+    const editorAppConfig: EditorAppConfig = {};
 
     return {
         vscodeApiConfig,

package/src/python/client/main.ts

@@ -14,9 +14,9 @@ import { createPythonAppConfig } from './config.js';
 export const runPythonWrapper = async () => {
     const appConfig = createPythonAppConfig();
 
-    // perform global init
+    // perform global monaco-vscode-api init
     const apiWrapper = new MonacoVscodeApiWrapper(appConfig.vscodeApiConfig);
-    await apiWrapper.init();
+    await apiWrapper.start();
 
     const lcWrapper = new LanguageClientWrapper(appConfig.languageClientConfig);
 
@@ -37,7 +37,5 @@ export const runPythonWrapper = async () => {
 
         await vscode.commands.executeCommand('workbench.view.explorer');
         await vscode.window.showTextDocument(appConfig.configParams.files.get('hello2.py')!.uri);
-
-        await editorApp.start(appConfig.vscodeApiConfig.htmlContainer!);
     }
 };

package/src/python/client/reactPython.tsx

@@ -29,19 +29,13 @@ export const runPythonReact = async () => {
     };
 
     const root = ReactDOM.createRoot(document.getElementById('react-root')!);
-
-    const languageClientConfigs = {
-        configs: {
-            langium: appConfig.languageClientConfig
-        }
-    };
     const App = () => {
         return (
             <div style={{ 'backgroundColor': '#1f1f1f' }} >
                 <MonacoEditorReactComp
                     vscodeApiConfig={appConfig.vscodeApiConfig}
                     editorAppConfig={appConfig.editorAppConfig}
-                    languageClientConfigs={languageClientConfigs}
+                    languageClientConfig={appConfig.languageClientConfig}
                     style={{ 'height': '100%' }}
                     onVscodeApiInitDone={onVscodeApiInitDone}
                     onError={(e) => {

package/src/ts/clientTs.ts

@@ -0,0 +1,196 @@
+/* --------------------------------------------------------------------------------------------
+ * Copyright (c) 2024 TypeFox and others.
+ * Licensed under the MIT License. See LICENSE in the package root for license information.
+ * ------------------------------------------------------------------------------------------ */
+
+import { LogLevel } from '@codingame/monaco-vscode-api';
+import { InMemoryFileSystemProvider, registerFileSystemOverlay, type IFileWriteOptions } from '@codingame/monaco-vscode-files-service-override';
+import '@codingame/monaco-vscode-javascript-default-extension';
+import getKeybindingsServiceOverride from '@codingame/monaco-vscode-keybindings-service-override';
+import '@codingame/monaco-vscode-typescript-basics-default-extension';
+import '@codingame/monaco-vscode-typescript-language-features-default-extension';
+import { EditorApp, type EditorAppConfig } from 'monaco-languageclient/editorApp';
+import { MonacoVscodeApiWrapper, type MonacoVscodeApiConfig } from 'monaco-languageclient/vscodeApiWrapper';
+import { configureDefaultWorkerFactory } from 'monaco-languageclient/workerFactory';
+import * as vscode from 'vscode';
+import { createDefaultWorkspaceContent, disableElement } from '../common/client/utils.js';
+
+export const runTsWrapper = async () => {
+    disableElement('button-diff', true);
+
+    const code = `const takesString = (x: string) => {};
+
+// you should see an error marker in the next line
+takesString(0);`;
+
+    const codeOriginal = `const takesNumber = (x: number) => {};
+
+// you should see an error marker in the next line
+takesNumber(0);`;
+
+    const textEncoder = new TextEncoder();
+    const options: IFileWriteOptions = {
+        atomic: false,
+        unlock: false,
+        create: true,
+        overwrite: true
+    };
+    const workspaceUri = vscode.Uri.file('/workspace');
+    const workspaceFileUri = vscode.Uri.file('/workspace.code-workspace');
+    const codeUri = vscode.Uri.file('/workspace/hello.ts');
+    const codeOriginalUri = vscode.Uri.file('/workspace/goodbye.ts');
+    const fileSystemProvider = new InMemoryFileSystemProvider();
+    await fileSystemProvider.mkdir(workspaceUri);
+    await fileSystemProvider.writeFile(codeUri, textEncoder.encode(code), options);
+    await fileSystemProvider.writeFile(codeOriginalUri, textEncoder.encode(codeOriginal), options);
+    await fileSystemProvider.writeFile(workspaceFileUri, textEncoder.encode(createDefaultWorkspaceContent('/workspace')), options);
+    registerFileSystemOverlay(1, fileSystemProvider);
+
+    let currentOriginalCode = codeOriginal;
+    let currentOriginalCodeUri = codeOriginalUri;
+    let currentCode = code;
+    let currentCodeUri = codeUri;
+    let swapCode = false;
+    let diffEditor = false;
+
+    const htmlContainer = document.getElementById('monaco-editor-root')!;
+    const vscodeApiConfig: MonacoVscodeApiConfig = {
+        $type: 'extended',
+        viewsConfig: {
+            $type: 'EditorService',
+            htmlContainer
+        },
+        logLevel: LogLevel.Debug,
+        serviceOverrides: {
+            ...getKeybindingsServiceOverride()
+        },
+        advanced: {
+            enableExtHostWorker: true,
+        },
+        userConfiguration: {
+            json: JSON.stringify({
+                'workbench.colorTheme': 'Default Dark Modern',
+                'editor.wordBasedSuggestions': 'off',
+                'typescript.tsserver.web.projectWideIntellisense.enabled': true,
+                'typescript.tsserver.web.projectWideIntellisense.suppressSemanticErrors': false,
+                'diffEditor.renderSideBySide': false,
+                'editor.guides.bracketPairsHorizontal': true,
+                'editor.experimental.asyncTokenization': true
+            })
+        },
+        workspaceConfig: {
+            enableWorkspaceTrust: true,
+            workspaceProvider: {
+                trusted: true,
+                async open() {
+                    window.open(window.location.href);
+                    return true;
+                },
+                workspace: {
+                    workspaceUri: workspaceFileUri
+                }
+            }
+        },
+        monacoWorkerFactory: configureDefaultWorkerFactory
+    };
+
+    // perform global monaco-vscode-api init
+    const apiWrapper = new MonacoVscodeApiWrapper(vscodeApiConfig);
+    await apiWrapper.start();
+
+    let editorApp: EditorApp | undefined = undefined;
+
+    const createEditorAppConfig = (useDiffEditor: boolean): EditorAppConfig => {
+        return {
+            codeResources: {
+                modified: {
+                    text: currentCode,
+                    uri: currentCodeUri.path
+                },
+                original: {
+                    text: currentOriginalCode,
+                    uri: currentOriginalCodeUri.path,
+                }
+            },
+            useDiffEditor: useDiffEditor
+        };
+    };
+
+    const swapCurrentCode = () => {
+        swapCode = !swapCode;
+        if (swapCode) {
+            currentCode = codeOriginal;
+            currentCodeUri = codeOriginalUri;
+            currentOriginalCode = code;
+            currentOriginalCodeUri = codeUri;
+        } else {
+            currentCode = code;
+            currentCodeUri = codeUri;
+            currentOriginalCode = codeOriginal;
+            currentOriginalCodeUri = codeOriginalUri;
+        }
+    };
+
+    const updateEditorCodeResources = async (editorApp: EditorApp) => {
+        await editorApp.updateCodeResources({
+            modified: {
+                text: currentCode,
+                uri: currentCodeUri.path
+            },
+            original: {
+                text: currentOriginalCode,
+                uri: currentOriginalCodeUri.path
+            }
+        });
+    };
+
+    try {
+        document.querySelector('#button-start')?.addEventListener('click', async () => {
+            disableElement('button-start', true);
+            disableElement('button-diff', false);
+            editorApp = new EditorApp(createEditorAppConfig(diffEditor));
+            await editorApp.start(htmlContainer);
+
+            await vscode.workspace.openTextDocument(codeUri);
+            await vscode.workspace.openTextDocument(codeOriginalUri);
+
+            vscode.commands.getCommands().then((x) => {
+                console.log(`Found ${x.length} commands`);
+                const finding = x.find((elem) => elem === 'actions.find');
+                console.log(`Found command: ${finding}`);
+            });
+
+            editorApp.getEditor()?.focus();
+            await vscode.commands.executeCommand('actions.find');
+
+            await updateEditorCodeResources(editorApp);
+        });
+        document.querySelector('#button-swap-code')?.addEventListener('click', async () => {
+            swapCurrentCode();
+
+            if (editorApp !== undefined) {
+                await updateEditorCodeResources(editorApp);
+            }
+        });
+        document.querySelector('#button-diff')?.addEventListener('click', async () => {
+            diffEditor = !diffEditor;
+            const editorAppConfig = createEditorAppConfig(diffEditor);
+
+            if (editorApp !== undefined) {
+                await editorApp.dispose();
+            }
+            editorApp = new EditorApp(editorAppConfig);
+            await editorApp.start(htmlContainer);
+            await updateEditorCodeResources(editorApp);
+        });
+        document.querySelector('#button-dispose')?.addEventListener('click', async () => {
+            disableElement('button-start', false);
+            disableElement('button-diff', true);
+
+            await editorApp?.dispose();
+        });
+    } catch (e) {
+        console.error(e);
+    }
+};
+

package/tsExtHost.html

@@ -20,7 +20,7 @@
 
     <div id="monaco-editor-root" style="height: 80vh;"></div>
     <script type="module">
-        import { runTsWrapper } from './src/ts/wrapperTs.ts';
+        import { runTsWrapper } from './src/ts/clientTs.ts';
 
         runTsWrapper();
     </script>

package/dist/bare/client.d.ts

@@ -1,3 +0,0 @@
-import '@codingame/monaco-vscode-json-default-extension';
-export declare const runClient: () => Promise<void>;
-//# sourceMappingURL=client.d.ts.map

package/dist/bare/client.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../../src/bare/client.ts"],"names":[],"mappings":"AAYA,OAAO,iDAAiD,CAAC;AAIzD,eAAO,MAAM,SAAS,qBAuDrB,CAAC"}

package/dist/bare/client.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"client.js","sourceRoot":"","sources":["../../src/bare/client.ts"],"names":[],"mappings":"AAAA;;;gGAGgG;AAEhG,OAAO,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AACxD,OAAO,KAAK,MAAM,MAAM,qCAAqC,CAAC;AAC9D,OAAO,0BAA0B,MAAM,oDAAoD,CAAC;AAC5F,OAAO,uBAAuB,MAAM,iDAAiD,CAAC;AACtF,OAAO,EAAE,sBAAsB,EAA8B,MAAM,wCAAwC,CAAC;AAC5G,wEAAwE;AACxE,uDAAuD;AACvD,OAAO,iDAAiD,CAAC;AACzD,OAAO,EAAE,6BAA6B,EAAE,MAAM,qCAAqC,CAAC;AACpF,OAAO,EAAE,qBAAqB,EAA6B,MAAM,iCAAiC,CAAC;AAEnG,MAAM,CAAC,MAAM,SAAS,GAAG,KAAK,IAAI,EAAE;IAChC,MAAM,aAAa,GAAG,QAAQ,CAAC,cAAc,CAAC,oBAAoB,CAAE,CAAC;IACrE,MAAM,eAAe,GAA0B;QAC3C,KAAK,EAAE,SAAS;QAChB,QAAQ,EAAE,QAAQ,CAAC,KAAK;QACxB,gBAAgB,EAAE;YACd,GAAG,0BAA0B,EAAE;YAC/B,GAAG,uBAAuB,EAAE;SAC/B;QACD,iBAAiB,EAAE;YACf,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC;gBACjB,uCAAuC,EAAE,IAAI;aAChD,CAAC;SACL;QACD,mBAAmB,EAAE,6BAA6B;KACrD,CAAC;IAEF,MAAM,UAAU,GAAG,IAAI,sBAAsB,CAAC,eAAe,CAAC,CAAC;IAC/D,MAAM,UAAU,CAAC,IAAI,EAAE,CAAC;IAExB,yCAAyC;IACzC,MAAM,CAAC,SAAS,CAAC,QAAQ,CAAC;QACtB,EAAE,EAAE,MAAM;QACV,UAAU,EAAE,CAAC,OAAO,EAAE,QAAQ,CAAC;QAC/B,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC;QACzB,SAAS,EAAE,CAAC,kBAAkB,CAAC;KAClC,CAAC,CAAC;IAEH,uBAAuB;IACvB,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,aAAa,EAAE;QAChC,KAAK,EAAE;;;EAGb;QACM,QAAQ,EAAE,MAAM;QAChB,eAAe,EAAE,IAAI;QACrB,oBAAoB,EAAE,KAAK;KAC9B,CAAC,CAAC;IAEH,MAAM,oBAAoB,GAAyB;QAC/C,aAAa,EAAE;YACX,gBAAgB,EAAE,CAAC,MAAM,CAAC;SAC7B;QACD,UAAU,EAAE;YACR,OAAO,EAAE;gBACL,KAAK,EAAE,cAAc;gBACrB,GAAG,EAAE,mCAAmC;aAC3C;SACJ;KACJ,CAAC;IACF,MAAM,qBAAqB,GAAG,IAAI,qBAAqB,CACnD,oBAAoB,EACpB,UAAU,CAAC,SAAS,EAAE,CACzB,CAAC;IACF,MAAM,qBAAqB,CAAC,KAAK,EAAE,CAAC;AACxC,CAAC,CAAC"}

package/dist/json/client/client.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../../../src/json/client/client.ts"],"names":[],"mappings":"AAMA,OAAO,iDAAiD,CAAC;AAIzD,eAAO,MAAM,cAAc,qBAM1B,CAAC"}

package/dist/json/client/client.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"client.js","sourceRoot":"","sources":["../../../src/json/client/client.ts"],"names":[],"mappings":"AAAA;;;gGAGgG;AAEhG,uCAAuC;AACvC,OAAO,iDAAiD,CAAC;AACzD,OAAO,EAAE,iBAAiB,EAAE,MAAM,uCAAuC,CAAC;AAC1E,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5C,MAAM,CAAC,MAAM,cAAc,GAAG,KAAK,IAAI,EAAE;IACrC,MAAM,aAAa,GAAG;;;EAGxB,CAAC;IACC,MAAM,iBAAiB,CAAC,aAAa,EAAE,aAAa,CAAC,CAAC;AAC1D,CAAC,CAAC"}

package/dist/langium/langium-dsl/config/extendedConfig.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"extendedConfig.d.ts","sourceRoot":"","sources":["../../../../src/langium/langium-dsl/config/extendedConfig.ts"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AAKxE,eAAO,MAAM,0BAA0B,QAAa,OAAO,CAAC,gBAAgB,CAsI3E,CAAC"}