monaco-languageclient-examples 2025.6.2 → 2025.6.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "monaco-languageclient-examples",
-  "version": "2025.6.2",
+  "version": "2025.6.3",
   "description": "Monaco Language client examples",
   "author": {
     "name": "TypeFox GmbH",
@@ -82,66 +82,65 @@
     "LICENSE"
   ],
   "dependencies": {
-    "@codingame/monaco-vscode-configuration-service-override": "~18.1.0",
-    "@codingame/monaco-vscode-cpp-default-extension": "~18.1.0",
-    "@codingame/monaco-vscode-debug-service-override": "~18.1.0",
-    "@codingame/monaco-vscode-editor-api": "~18.1.0",
-    "@codingame/monaco-vscode-environment-service-override": "~18.1.0",
-    "@codingame/monaco-vscode-explorer-service-override": "~18.1.0",
-    "@codingame/monaco-vscode-files-service-override": "~18.1.0",
-    "@codingame/monaco-vscode-groovy-default-extension": "~18.1.0",
-    "@codingame/monaco-vscode-java-default-extension": "~18.1.0",
-    "@codingame/monaco-vscode-javascript-default-extension": "~18.1.0",
-    "@codingame/monaco-vscode-json-default-extension": "~18.1.0",
-    "@codingame/monaco-vscode-keybindings-service-override": "~18.1.0",
-    "@codingame/monaco-vscode-lifecycle-service-override": "~18.1.0",
-    "@codingame/monaco-vscode-localization-service-override": "~18.1.0",
-    "@codingame/monaco-vscode-preferences-service-override": "~18.1.0",
-    "@codingame/monaco-vscode-python-default-extension": "~18.1.0",
-    "@codingame/monaco-vscode-remote-agent-service-override": "~18.1.0",
-    "@codingame/monaco-vscode-search-result-default-extension": "~18.1.0",
-    "@codingame/monaco-vscode-search-service-override": "~18.1.0",
-    "@codingame/monaco-vscode-secret-storage-service-override": "~18.1.0",
-    "@codingame/monaco-vscode-standalone-json-language-features": "~18.1.0",
-    "@codingame/monaco-vscode-standalone-typescript-language-features": "~18.1.0",
-    "@codingame/monaco-vscode-testing-service-override": "~18.1.0",
-    "@codingame/monaco-vscode-storage-service-override": "~18.1.0",
-    "@codingame/monaco-vscode-textmate-service-override": "~18.1.0",
-    "@codingame/monaco-vscode-theme-defaults-default-extension": "~18.1.0",
-    "@codingame/monaco-vscode-theme-service-override": "~18.1.0",
-    "@codingame/monaco-vscode-typescript-basics-default-extension": "~18.1.0",
-    "@codingame/monaco-vscode-typescript-language-features-default-extension": "~18.1.0",
-    "@codingame/monaco-vscode-views-service-override": "~18.1.0",
-    "@codingame/monaco-vscode-outline-service-override": "~18.1.0",
-    "@typefox/monaco-editor-react": "~6.9.0",
-    "cors": "^2.8.5",
+    "@codingame/monaco-vscode-configuration-service-override": "~18.2.0",
+    "@codingame/monaco-vscode-cpp-default-extension": "~18.2.0",
+    "@codingame/monaco-vscode-debug-service-override": "~18.2.0",
+    "@codingame/monaco-vscode-editor-api": "~18.2.0",
+    "@codingame/monaco-vscode-environment-service-override": "~18.2.0",
+    "@codingame/monaco-vscode-explorer-service-override": "~18.2.0",
+    "@codingame/monaco-vscode-files-service-override": "~18.2.0",
+    "@codingame/monaco-vscode-groovy-default-extension": "~18.2.0",
+    "@codingame/monaco-vscode-java-default-extension": "~18.2.0",
+    "@codingame/monaco-vscode-javascript-default-extension": "~18.2.0",
+    "@codingame/monaco-vscode-json-default-extension": "~18.2.0",
+    "@codingame/monaco-vscode-keybindings-service-override": "~18.2.0",
+    "@codingame/monaco-vscode-lifecycle-service-override": "~18.2.0",
+    "@codingame/monaco-vscode-localization-service-override": "~18.2.0",
+    "@codingame/monaco-vscode-preferences-service-override": "~18.2.0",
+    "@codingame/monaco-vscode-python-default-extension": "~18.2.0",
+    "@codingame/monaco-vscode-remote-agent-service-override": "~18.2.0",
+    "@codingame/monaco-vscode-search-result-default-extension": "~18.2.0",
+    "@codingame/monaco-vscode-search-service-override": "~18.2.0",
+    "@codingame/monaco-vscode-secret-storage-service-override": "~18.2.0",
+    "@codingame/monaco-vscode-standalone-json-language-features": "~18.2.0",
+    "@codingame/monaco-vscode-standalone-typescript-language-features": "~18.2.0",
+    "@codingame/monaco-vscode-testing-service-override": "~18.2.0",
+    "@codingame/monaco-vscode-storage-service-override": "~18.2.0",
+    "@codingame/monaco-vscode-textmate-service-override": "~18.2.0",
+    "@codingame/monaco-vscode-theme-defaults-default-extension": "~18.2.0",
+    "@codingame/monaco-vscode-theme-service-override": "~18.2.0",
+    "@codingame/monaco-vscode-typescript-basics-default-extension": "~18.2.0",
+    "@codingame/monaco-vscode-typescript-language-features-default-extension": "~18.2.0",
+    "@codingame/monaco-vscode-views-service-override": "~18.2.0",
+    "@codingame/monaco-vscode-outline-service-override": "~18.2.0",
+    "@typefox/monaco-editor-react": "~7.0.0-next.0",
+    "cors": "~2.8.5",
     "express": "~5.1.0",
     "jszip": "~3.10.1",
     "langium": "~3.5.0",
-    "monaco-editor-wrapper": "~6.9.0",
-    "monaco-languageclient": "~9.8.0",
+    "monaco-languageclient": "~10.0.0-next.0",
     "pyright": "~1.1.402",
     "react": "~19.1.0",
     "react-dom": "~19.1.0",
     "request-light": "~0.8.0",
-    "vscode": "npm:@codingame/monaco-vscode-extension-api@~18.1.0",
-    "vscode-json-languageservice": "~5.6.0",
+    "vscode": "npm:@codingame/monaco-vscode-extension-api@~18.2.0",
+    "vscode-json-languageservice": "~5.6.1",
     "vscode-languageclient": "~9.0.1",
     "vscode-languageserver": "~9.0.1",
     "vscode-uri": "~3.1.0",
     "vscode-ws-jsonrpc": "~3.4.0",
-    "ws": "~8.18.2",
+    "ws": "~8.18.3",
     "wtd-core": "~4.0.1"
   },
   "devDependencies": {
-    "@types/cors": "^2.8.19",
+    "@types/cors": "~2.8.19",
     "@types/emscripten": "~1.40.1",
     "@types/express": "~5.0.3",
     "@types/ws": "~8.18.1",
-    "langium-cli": "~3.5.0",
+    "langium-cli": "~3.5.2",
     "mini-coi": "~0.4.2",
     "ts-node": "~10.9.1",
-    "vite-plugin-static-copy": "~3.0.2",
+    "vite-plugin-static-copy": "~3.1.0",
     "vscode-languageserver-types": "~3.17.5"
   },
   "scripts": {

package/src/appPlayground/common.ts

@@ -5,11 +5,11 @@
 
 import * as vscode from 'vscode';
 import type { RegisterLocalProcessExtensionResult } from '@codingame/monaco-vscode-api/extensions';
-import { MonacoEditorLanguageClientWrapper } from 'monaco-editor-wrapper';
 import type { ConfigResult } from './config.js';
+import type { MonacoVscodeApiWrapper } from 'monaco-languageclient/vscodeApiWrapper';
 
-export const configurePostStart = async (wrapper: MonacoEditorLanguageClientWrapper, configResult: ConfigResult) => {
-    const result = wrapper.getExtensionRegisterResult('mlc-app-playground') as RegisterLocalProcessExtensionResult;
+export const configurePostStart = async (apiWrapper: MonacoVscodeApiWrapper, configResult: ConfigResult) => {
+    const result = apiWrapper.getExtensionRegisterResult('mlc-app-playground') as RegisterLocalProcessExtensionResult;
     result.setAsDefaultApi();
 
     // WA: Force show explorer and not search

package/src/appPlayground/config.ts

@@ -10,6 +10,7 @@ import { InMemoryFileSystemProvider, registerFileSystemOverlay, type IFileWriteO
 import getKeybindingsServiceOverride from '@codingame/monaco-vscode-keybindings-service-override';
 import getLifecycleServiceOverride from '@codingame/monaco-vscode-lifecycle-service-override';
 import getLocalizationServiceOverride from '@codingame/monaco-vscode-localization-service-override';
+import getOutlineServiceOverride from '@codingame/monaco-vscode-outline-service-override';
 import getRemoteAgentServiceOverride from '@codingame/monaco-vscode-remote-agent-service-override';
 import getSearchServiceOverride from '@codingame/monaco-vscode-search-service-override';
 import getSecretStorageServiceOverride from '@codingame/monaco-vscode-secret-storage-service-override';
@@ -17,7 +18,6 @@ import getStorageServiceOverride from '@codingame/monaco-vscode-storage-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 getOutlineServiceOverride from '@codingame/monaco-vscode-outline-service-override';
 import * as vscode from 'vscode';
 
 // this is required syntax highlighting
@@ -27,16 +27,17 @@ import '@codingame/monaco-vscode-typescript-language-features-default-extension'
 
 import '../../resources/vsix/open-collaboration-tools.vsix';
 
-import type { WrapperConfig } from 'monaco-editor-wrapper';
-import { defaultHtmlAugmentationInstructions, defaultViewsInit } from 'monaco-editor-wrapper/vscode/services';
-import { configureDefaultWorkerFactory } from 'monaco-editor-wrapper/workers/workerLoaders';
-import { createDefaultLocaleConfiguration } from 'monaco-languageclient/vscode/services';
+import { defaultHtmlAugmentationInstructions, defaultViewsInit, type MonacoVscodeApiConfig } from 'monaco-languageclient/vscodeApiWrapper';
+import type { EditorAppConfig } from 'monaco-languageclient/editorApp';
+import { createDefaultLocaleConfiguration } from 'monaco-languageclient/vscodeApiLocales';
+import { configureDefaultWorkerFactory } from 'monaco-languageclient/workerFactory';
 import helloTsCode from '../../resources/appPlayground/hello.ts?raw';
 import testerTsCode from '../../resources/appPlayground/tester.ts?raw';
 import { createDefaultWorkspaceContent } from '../common/client/utils.js';
 
 export type ConfigResult = {
-    wrapperConfig: WrapperConfig
+    vscodeApiConfig: MonacoVscodeApiConfig;
+    editorAppConfig: EditorAppConfig
     workspaceFileUri: vscode.Uri;
     helloTsUri: vscode.Uri;
     testerTsUri: vscode.Uri;
@@ -45,69 +46,65 @@ export type ConfigResult = {
 export const configure = async (htmlContainer?: HTMLElement): Promise<ConfigResult> => {
     const workspaceFileUri = vscode.Uri.file('/workspace.code-workspace');
 
-    const wrapperConfig: WrapperConfig = {
+    const vscodeApiConfig: MonacoVscodeApiConfig = {
         $type: 'extended',
-        id: 'AAP',
         logLevel: LogLevel.Debug,
         htmlContainer,
-        vscodeApiConfig: {
-            serviceOverrides: {
-                ...getKeybindingsServiceOverride(),
-                ...getLifecycleServiceOverride(),
-                ...getLocalizationServiceOverride(createDefaultLocaleConfiguration()),
-                ...getBannerServiceOverride(),
-                ...getStatusBarServiceOverride(),
-                ...getTitleBarServiceOverride(),
-                ...getExplorerServiceOverride(),
-                ...getRemoteAgentServiceOverride(),
-                ...getEnvironmentServiceOverride(),
-                ...getSecretStorageServiceOverride(),
-                ...getStorageServiceOverride(),
-                ...getSearchServiceOverride(),
-                ...getOutlineServiceOverride()
-            },
-            enableExtHostWorker: true,
-            viewsConfig: {
-                viewServiceType: 'ViewsService',
-                htmlAugmentationInstructions: defaultHtmlAugmentationInstructions,
-                viewsInitFunc: defaultViewsInit
+        serviceOverrides: {
+            ...getKeybindingsServiceOverride(),
+            ...getLifecycleServiceOverride(),
+            ...getLocalizationServiceOverride(createDefaultLocaleConfiguration()),
+            ...getBannerServiceOverride(),
+            ...getStatusBarServiceOverride(),
+            ...getTitleBarServiceOverride(),
+            ...getExplorerServiceOverride(),
+            ...getRemoteAgentServiceOverride(),
+            ...getEnvironmentServiceOverride(),
+            ...getSecretStorageServiceOverride(),
+            ...getStorageServiceOverride(),
+            ...getSearchServiceOverride(),
+            ...getOutlineServiceOverride()
+        },
+        viewsConfig: {
+            viewServiceType: 'ViewsService',
+            htmlAugmentationInstructions: defaultHtmlAugmentationInstructions,
+            viewsInitFunc: defaultViewsInit
+        },
+        workspaceConfig: {
+            enableWorkspaceTrust: true,
+            windowIndicator: {
+                label: 'mlc-app-playground',
+                tooltip: '',
+                command: ''
             },
-            workspaceConfig: {
-                enableWorkspaceTrust: true,
-                windowIndicator: {
-                    label: 'mlc-app-playground',
-                    tooltip: '',
-                    command: ''
-                },
-                workspaceProvider: {
-                    trusted: true,
-                    async open() {
-                        window.open(window.location.href);
-                        return true;
-                    },
-                    workspace: {
-                        workspaceUri: workspaceFileUri
-                    }
+            workspaceProvider: {
+                trusted: true,
+                async open() {
+                    window.open(window.location.href);
+                    return true;
                 },
-                configurationDefaults: {
-                    'window.title': 'mlc-app-playground${separator}${dirty}${activeEditorShort}'
-                },
-                productConfiguration: {
-                    nameShort: 'mlc-app-playground',
-                    nameLong: 'mlc-app-playground'
+                workspace: {
+                    workspaceUri: workspaceFileUri
                 }
             },
-            userConfiguration: {
-                json: JSON.stringify({
-                    'workbench.colorTheme': 'Default Dark Modern',
-                    'editor.wordBasedSuggestions': 'off',
-                    'typescript.tsserver.web.projectWideIntellisense.enabled': true,
-                    'typescript.tsserver.web.projectWideIntellisense.suppressSemanticErrors': false,
-                    'editor.guides.bracketPairsHorizontal': true,
-                    'oct.serverUrl': 'https://api.open-collab.tools/',
-                    'editor.experimental.asyncTokenization': false
-                })
+            configurationDefaults: {
+                'window.title': 'mlc-app-playground${separator}${dirty}${activeEditorShort}'
             },
+            productConfiguration: {
+                nameShort: 'mlc-app-playground',
+                nameLong: 'mlc-app-playground'
+            }
+        },
+        userConfiguration: {
+            json: JSON.stringify({
+                'workbench.colorTheme': 'Default Dark Modern',
+                'editor.wordBasedSuggestions': 'off',
+                'typescript.tsserver.web.projectWideIntellisense.enabled': true,
+                'typescript.tsserver.web.projectWideIntellisense.suppressSemanticErrors': false,
+                'editor.guides.bracketPairsHorizontal': true,
+                'oct.serverUrl': 'https://api.open-collab.tools/',
+                'editor.experimental.asyncTokenization': false
+            })
         },
         extensions: [{
             config: {
@@ -119,9 +116,15 @@ export const configure = async (htmlContainer?: HTMLElement): Promise<ConfigResu
                 }
             }
         }],
-        editorAppConfig: {
-            monacoWorkerFactory: configureDefaultWorkerFactory
-        }
+        advanced: {
+            enableExtHostWorker: true,
+        },
+        monacoWorkerFactory: configureDefaultWorkerFactory
+    };
+
+    const editorAppConfig: EditorAppConfig = {
+        $type: vscodeApiConfig.$type,
+        id: 'AAP',
     };
 
     const workspaceUri = vscode.Uri.file('/workspace');
@@ -143,7 +146,8 @@ export const configure = async (htmlContainer?: HTMLElement): Promise<ConfigResu
     registerFileSystemOverlay(1, fileSystemProvider);
 
     return {
-        wrapperConfig,
+        vscodeApiConfig,
+        editorAppConfig,
         workspaceFileUri,
         helloTsUri,
         testerTsUri

package/src/appPlayground/launcher.ts

@@ -3,7 +3,8 @@
  * Licensed under the MIT License. See LICENSE in the package root for license information.
  * ------------------------------------------------------------------------------------------ */
 
-import { initLocaleLoader } from 'monaco-editor-wrapper/vscode/locale';
+import { initLocaleLoader } from 'monaco-languageclient/vscodeApiLocales';
+
 await initLocaleLoader();
 
 const { runApplicationPlayground } = await import('./main.js');

package/src/appPlayground/main.ts

@@ -3,16 +3,19 @@
  * Licensed under the MIT License. See LICENSE in the package root for license information.
  * ------------------------------------------------------------------------------------------ */
 
-import { MonacoEditorLanguageClientWrapper } from 'monaco-editor-wrapper';
 import { configure } from './config.js';
 import { configurePostStart } from './common.js';
 import { disableElement } from '../common/client/utils.js';
-
-const wrapper = new MonacoEditorLanguageClientWrapper();
+import { MonacoVscodeApiWrapper } from 'monaco-languageclient/vscodeApiWrapper';
 
 export const runApplicationPlayground = async () => {
     disableElement('button-start', true);
+
     const configResult = await configure(document.body);
-    await wrapper.init(configResult.wrapperConfig);
-    await configurePostStart(wrapper, configResult);
+
+    // perform global init
+    const apiWrapper = new MonacoVscodeApiWrapper(configResult.vscodeApiConfig);
+    await apiWrapper.init();
+
+    await configurePostStart(apiWrapper, configResult);
 };

package/src/appPlayground/reactLauncher.ts

@@ -3,7 +3,8 @@
  * Licensed under the MIT License. See LICENSE in the package root for license information.
  * ------------------------------------------------------------------------------------------ */
 
-import { initLocaleLoader } from 'monaco-editor-wrapper/vscode/locale';
+import { initLocaleLoader } from 'monaco-languageclient/vscodeApiLocales';
+
 await initLocaleLoader();
 
 const { runApplicationPlaygroundReact } = await import('./reactMain.js');

package/src/appPlayground/reactMain.tsx

@@ -5,7 +5,6 @@
 
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import { MonacoEditorLanguageClientWrapper } from 'monaco-editor-wrapper';
 import { MonacoEditorReactComp } from '@typefox/monaco-editor-react';
 import { configure } from './config.js';
 import { configurePostStart } from './common.js';
@@ -18,9 +17,10 @@ export const runApplicationPlaygroundReact = async () => {
         return (
             <div style={{ 'backgroundColor': '#1f1f1f' }}>
                 <MonacoEditorReactComp
-                    wrapperConfig={configResult.wrapperConfig}
-                    onLoad={async (wrapper: MonacoEditorLanguageClientWrapper) => {
-                        await configurePostStart(wrapper, configResult);
+                    vscodeApiConfig={configResult.vscodeApiConfig}
+                    editorAppConfig={configResult.editorAppConfig}
+                    onVscodeApiInitDone={async (apiWrapper) => {
+                        await configurePostStart(apiWrapper, configResult);
                     }}
                     onError={(e) => {
                         console.error(e);

package/src/bare/client.ts

@@ -3,22 +3,22 @@
  * Licensed under the MIT License. See License.txt in the project root for license information.
  * ------------------------------------------------------------------------------------------ */
 
+import { LogLevel } from '@codingame/monaco-vscode-api';
 import * as monaco from '@codingame/monaco-vscode-editor-api';
-import { initServices } from 'monaco-languageclient/vscode/services';
 import getTextmateServiceOverride from '@codingame/monaco-vscode-textmate-service-override';
 import getThemeServiceOverride from '@codingame/monaco-vscode-theme-service-override';
-import { LogLevel } from '@codingame/monaco-vscode-api';
+import { MonacoVscodeApiWrapper, type MonacoVscodeApiConfig } from 'monaco-languageclient/vscodeApiWrapper';
 // monaco-editor does not supply json highlighting with the json worker,
 // that's why we use the textmate extension from VSCode
 import '@codingame/monaco-vscode-json-default-extension';
-import { ConsoleLogger } from 'monaco-languageclient/tools';
-import { configureDefaultWorkerFactory } from 'monaco-editor-wrapper/workers/workerLoaders';
-import { LanguageClientWrapper, type LanguageClientConfig } from 'monaco-editor-wrapper';
+import { configureDefaultWorkerFactory } from 'monaco-languageclient/workerFactory';
+import { LanguageClientWrapper, type LanguageClientConfig } from 'monaco-languageclient/lcwrapper';
 
 export const runClient = async () => {
-    const logger = new ConsoleLogger(LogLevel.Debug);
     const htmlContainer = document.getElementById('monaco-editor-root')!;
-    await initServices({
+    const vscodeApiConfig: MonacoVscodeApiConfig = {
+        $type: 'classic',
+        logLevel: LogLevel.Debug,
         serviceOverrides: {
             ...getTextmateServiceOverride(),
             ...getThemeServiceOverride()
@@ -28,9 +28,11 @@ export const runClient = async () => {
                 'editor.experimental.asyncTokenization': true
             })
         },
-    }, {
-        logger
-    });
+        monacoWorkerFactory: configureDefaultWorkerFactory
+    };
+
+    const apiWrapper = new MonacoVscodeApiWrapper(vscodeApiConfig);
+    await apiWrapper.init();
 
     // register the JSON language with Monaco
     monaco.languages.register({
@@ -40,8 +42,6 @@ export const runClient = async () => {
         mimetypes: ['application/json']
     });
 
-    configureDefaultWorkerFactory(logger);
-
     // create monaco editor
     monaco.editor.create(htmlContainer, {
         value: `{
@@ -64,10 +64,9 @@ export const runClient = async () => {
             }
         }
     };
-    const languageClientWrapper = new LanguageClientWrapper({
+    const languageClientWrapper = new LanguageClientWrapper(
         languageClientConfig,
-        logger
-    });
-
+        apiWrapper.getLogger()
+    );
     await languageClientWrapper.start();
 };

package/src/browser/main.ts

@@ -11,8 +11,9 @@ import { getLanguageService, TextDocument } from 'vscode-json-languageservice';
 import { createConverter as createCodeConverter } from 'vscode-languageclient/lib/common/codeConverter.js';
 import { createConverter as createProtocolConverter } from 'vscode-languageclient/lib/common/protocolConverter.js';
 import { LogLevel } from '@codingame/monaco-vscode-api';
-import { MonacoEditorLanguageClientWrapper, type WrapperConfig } from 'monaco-editor-wrapper';
-import { configureDefaultWorkerFactory } from 'monaco-editor-wrapper/workers/workerLoaders';
+import { EditorApp, type EditorAppConfig } from 'monaco-languageclient/editorApp';
+import { configureDefaultWorkerFactory } from 'monaco-languageclient/workerFactory';
+import { MonacoVscodeApiWrapper, type MonacoVscodeApiConfig } from 'monaco-languageclient/vscodeApiWrapper';
 
 export const runBrowserEditor = async () => {
     const codeConverter = createCodeConverter();
@@ -27,35 +28,36 @@ export const runBrowserEditor = async () => {
 }`;
     const codeUri = '/workspace/model.json';
 
-    const wrapper = new MonacoEditorLanguageClientWrapper();
-    const jsonClientUserConfig: WrapperConfig = {
+    const vscodeApiConfig: MonacoVscodeApiConfig = {
         $type: 'extended',
         htmlContainer,
         logLevel: LogLevel.Debug,
-        vscodeApiConfig: {
-            serviceOverrides: {
-                ...getKeybindingsServiceOverride(),
-            },
-            userConfiguration: {
-                json: JSON.stringify({
-                    'workbench.colorTheme': 'Default Dark Modern',
-                    'editor.guides.bracketPairsHorizontal': 'active',
-                    'editor.lightbulb.enabled': 'On',
-                    'editor.experimental.asyncTokenization': true
-                })
-            }
+        serviceOverrides: {
+            ...getKeybindingsServiceOverride(),
+        },
+        userConfiguration: {
+            json: JSON.stringify({
+                'workbench.colorTheme': 'Default Dark Modern',
+                'editor.guides.bracketPairsHorizontal': 'active',
+                'editor.lightbulb.enabled': 'On',
+                'editor.experimental.asyncTokenization': true
+            })
         },
-        editorAppConfig: {
-            codeResources: {
-                modified: {
-                    text: code,
-                    uri: codeUri
-                }
-            },
-            monacoWorkerFactory: configureDefaultWorkerFactory
+        monacoWorkerFactory: configureDefaultWorkerFactory
+    };
+    const editorAppConfig: EditorAppConfig = {
+        $type: vscodeApiConfig.$type,
+        codeResources: {
+            modified: {
+                text: code,
+                uri: codeUri
+            }
         }
     };
-    await wrapper.init(jsonClientUserConfig);
+    const apiWrapper = new MonacoVscodeApiWrapper(vscodeApiConfig);
+    await apiWrapper.init();
+
+    const editorApp = new EditorApp(editorAppConfig);
 
     vscode.workspace.onDidOpenTextDocument((_event) => {
         mainVscodeDocument = _event;
@@ -155,9 +157,9 @@ export const runBrowserEditor = async () => {
         diagnosticCollection.clear();
     };
 
-    await wrapper.start();
+    await editorApp.start(htmlContainer);
 
-    wrapper.getTextModels()?.modified?.onDidChangeContent(() => {
+    editorApp.getTextModels().modified?.onDidChangeContent(() => {
         validate();
     });
 };