htmlElement is no longer part of UserConfig. Must be passed at start

index.html

@@ -27,7 +27,7 @@ <h2>Monaco Editor Wrapper</h2>
         <br>
         <a href="./packages/examples/wrapper_statemachine.html">Langium Statemachine Client & Language Server (Worker)</a>
         <br>
-        <a href="./packages/examples/wrapper_langium.html">Langium Language Client & Language Server (Worker)</a>
+        <a href="./packages/examples/wrapper_langium.html">Langium Grammar DSL Language Client & Language Server (Worker)</a>
         <br><br>
         Please execute <b><code>npm run start:example:server:json</code></b> beforehand:<br>
         <a href="./packages/examples/wrapper_ws.html">Language Client & Web Socket Language Server example</a>

packages/examples/src/common.ts

@@ -3,14 +3,14 @@ import { languages } from 'monaco-editor';
 
 export const wrapper = new MonacoEditorLanguageClientWrapper();
 
-export const startEditor = async (userConfig: UserConfig, code: string, codeOriginal?: string) => {
+export const startEditor = async (userConfig: UserConfig, htmlElement: HTMLElement | null, code: string, codeOriginal?: string) => {
     if (wrapper.isStarted()) {
         alert('Editor was already started!');
         return;
     }
     configureCodeEditors(userConfig, code, codeOriginal);
     toggleSwapDiffButton(true);
-    await restartEditor(userConfig);
+    await restartEditor(userConfig, htmlElement);
 };
 
 export const updateModel = async (modelUpdate: ModelUpdate) => {
@@ -21,11 +21,11 @@ export const updateModel = async (modelUpdate: ModelUpdate) => {
     }
 };
 
-export const swapEditors = async (userConfig: UserConfig, code: string, codeOriginal?: string) => {
+export const swapEditors = async (userConfig: UserConfig, htmlElement: HTMLElement | null, code: string, codeOriginal?: string) => {
     userConfig.wrapperConfig.editorAppConfig.useDiffEditor = !userConfig.wrapperConfig.editorAppConfig.useDiffEditor;
     saveMainCode(!userConfig.wrapperConfig.editorAppConfig.useDiffEditor);
     configureCodeEditors(userConfig, code, codeOriginal);
-    await restartEditor(userConfig);
+    await restartEditor(userConfig, htmlElement);
 };
 
 export const disposeEditor = async (useDiffEditor: boolean) => {
@@ -37,8 +37,8 @@ export const disposeEditor = async (useDiffEditor: boolean) => {
     return codeMain;
 };
 
-const restartEditor = async (userConfig: UserConfig) => {
-    await wrapper.start(userConfig);
+const restartEditor = async (userConfig: UserConfig, htmlElement: HTMLElement | null) => {
+    await wrapper.start(userConfig, htmlElement);
     logEditorInfo(userConfig);
 };
 

packages/examples/src/langium/config/langium.monarch.ts

@@ -1,5 +1,3 @@
-import { editor } from 'monaco-editor';
-
 export const LangiumMonarchContent = {
     keywords: [
         'bigint',
@@ -87,17 +85,3 @@ export const LangiumMonarchContent = {
         ],
     },
 };
-
-export const LangiumTheme = {
-    base: 'vs-dark',
-    inherit: true,
-    rules: [],
-    colors: {},
-    semanticHighlighting: true,
-    semanticTokenColors: {
-        newOperator: '#d4d4d4#',
-        stringLiteral: '#ce9178',
-        customLiteral: '#D4D4D4',
-        numberLiteral: '#b5cea8'
-    }
-} as editor.IStandaloneThemeData;

packages/examples/src/langium/config/wrapperLangiumClassic.ts

@@ -5,15 +5,14 @@ import getKeybindingsServiceOverride from '@codingame/monaco-vscode-keybindings-
 import { useOpenEditorStub } from 'monaco-languageclient';
 import { UserConfig } from 'monaco-editor-wrapper';
 import { getTextContent } from '../../common.js';
-import { LangiumMonarchContent, LangiumTheme } from './langium.monarch.js';
+import { LangiumMonarchContent } from './langium.monarch.js';
 import { loadLangiumWorker } from '../wrapperLangium.js';
 
 export const setupLangiumClientClassic = async (): Promise<UserConfig> => {
     const code = await getTextContent(new URL('./src/langium/content/example.langium', window.location.href));
 
     const langiumWorker = loadLangiumWorker();
     return {
-        htmlElement: document.getElementById('monaco-editor-root') as HTMLElement,
         loggerConfig: {
             enabled: true,
             debugEnabled: true
@@ -38,8 +37,6 @@ export const setupLangiumClientClassic = async (): Promise<UserConfig> => {
                 },
                 languageExtensionConfig: { id: 'langium' },
                 languageDef: LangiumMonarchContent,
-                themeData: LangiumTheme,
-                theme: 'langium-theme',
                 userConfiguration: {
                     // or configure the semantic highlighting like this:
                     // `{ json: "editor.semanticHighlighting.enabled": true }`

packages/examples/src/langium/config/wrapperLangiumVscode.ts

@@ -22,7 +22,6 @@ export const setupLangiumClientVscodeApi = async (): Promise<UserConfig> => {
 
     const langiumWorker = loadLangiumWorker();
     return {
-        htmlElement: document.getElementById('monaco-editor-root') as HTMLElement,
         wrapperConfig: {
             serviceConfig: {
                 userServices: {

packages/examples/src/langium/config/wrapperStatemachineConfig.ts

@@ -10,7 +10,7 @@ import { UserConfig } from 'monaco-editor-wrapper';
 import { loadStatemachinWorker } from '../wrapperStatemachine.js';
 import { getTextContent } from '../../common.js';
 
-export const createLangiumGlobalConfig = async (htmlElement: HTMLElement): Promise<UserConfig> => {
+export const createLangiumGlobalConfig = async (): Promise<UserConfig> => {
     const code = await getTextContent(new URL('./src/langium/content/example.statemachine', window.location.href));
 
     const extensionFilesOrContents = new Map<string, string | URL>();
@@ -22,7 +22,6 @@ export const createLangiumGlobalConfig = async (htmlElement: HTMLElement): Promi
     const stateMachineWorker = loadStatemachinWorker();
 
     return {
-        htmlElement: htmlElement,
         wrapperConfig: {
             serviceConfig: {
                 userServices: {

packages/examples/src/langium/reactStatemachine.tsx

@@ -7,7 +7,7 @@ import { buildWorkerDefinition } from 'monaco-editor-workers';
 buildWorkerDefinition('../../../../node_modules/monaco-editor-workers/dist/workers', import.meta.url, false);
 
 const startEditor = async () => {
-    const langiumGlobalConfig = await createLangiumGlobalConfig(document.getElementById('root')!);
+    const langiumGlobalConfig = await createLangiumGlobalConfig();
     const comp = <MonacoEditorReactComp
         userConfig={langiumGlobalConfig}
         style={{

packages/examples/src/langium/wrapperLangium.ts

@@ -12,6 +12,7 @@ buildWorkerDefinition('../../../node_modules/monaco-editor-workers/dist/workers/
 
 let wrapper: MonacoEditorLanguageClientWrapper | undefined;
 
+const htmlElement = document.getElementById('monaco-editor-root');
 export const run = async () => {
     try {
         document.querySelector('#button-start-classic')?.addEventListener('click', startLangiumClientClassic);
@@ -27,7 +28,7 @@ export const startLangiumClientVscodeApi = async () => {
         if (checkStarted()) return;
         const config = await setupLangiumClientVscodeApi();
         wrapper = new MonacoEditorLanguageClientWrapper();
-        wrapper.start(config);
+        wrapper.start(config, htmlElement);
     } catch (e) {
         console.log(e);
     }
@@ -38,15 +39,15 @@ export const startLangiumClientClassic = async () => {
         if (checkStarted()) return;
         const config = await setupLangiumClientClassic();
         wrapper = new MonacoEditorLanguageClientWrapper();
-        await wrapper.start(config);
+        await wrapper.start(config, htmlElement!);
     } catch (e) {
         console.log(e);
     }
 };
 
 const checkStarted = () => {
     if (wrapper?.isStarted()) {
-        alert('Editor was already started!');
+        alert('Editor was already started!\nPlease reload the page to test the alternative editor.');
         return true;
     }
     return false;

packages/examples/src/langium/wrapperStatemachine.ts

@@ -13,10 +13,10 @@ const startEditor = async () => {
         alert('Editor was already started!');
         return;
     }
-    const langiumGlobalConfig = await createLangiumGlobalConfig(document.getElementById('monaco-editor-root') as HTMLElement);
-    await wrapper.start(langiumGlobalConfig);
-    const langiumGlobalConfig2 = await createLangiumGlobalConfig(document.getElementById('monaco-editor-root2') as HTMLElement);
-    await wrapper2.start(langiumGlobalConfig2);
+    const langiumGlobalConfig = await createLangiumGlobalConfig();
+    await wrapper.start(langiumGlobalConfig, document.getElementById('monaco-editor-root'));
+    const langiumGlobalConfig2 = await createLangiumGlobalConfig();
+    await wrapper2.start(langiumGlobalConfig2, document.getElementById('monaco-editor-root2'));
 
     vscode.commands.getCommands().then((x) => {
         console.log('Currently registered # of vscode commands: ' + x.length);

packages/examples/src/reactPython.tsx

@@ -22,7 +22,6 @@ const code = `def main():
 
 const rootElem = document.getElementById('root')!;
 const userConfig: UserConfig = {
-    htmlElement: rootElem,
     languageClientConfig: {
         options: {
             name: 'Python Language Server Example',

packages/examples/src/reactTs.tsx

@@ -9,13 +9,12 @@ import { buildWorkerDefinition } from 'monaco-editor-workers';
 
 buildWorkerDefinition('../../../../node_modules/monaco-editor-workers/dist/workers', import.meta.url, false);
 
+const rootElem = document.getElementById('root')!;
 const EditorDemo: React.FC = () => {
     const logMessage = 'console.log(\'hello\')';
     const [content, setContent] = useState(logMessage);
 
-    const rootElem = document.getElementById('root')!;
     const userConfig: UserConfig = {
-        htmlElement: rootElem,
         wrapperConfig: {
             serviceConfig: {
                 userServices: {
@@ -60,6 +59,5 @@ const EditorDemo: React.FC = () => {
 };
 
 const comp = <EditorDemo />;
-const rootElem = document.getElementById('root')!;
 const root = ReactDOM.createRoot(rootElem);
 root.render(comp);

packages/examples/src/wrapperAdvanced.ts

@@ -11,7 +11,6 @@ const wrapper44 = new MonacoEditorLanguageClientWrapper();
 
 const wrapper42Config: UserConfig = {
     id: '42',
-    htmlElement: document.getElementById('monaco-editor-root-42') as HTMLElement,
     wrapperConfig: {
         serviceConfig: {
             userServices: {
@@ -47,7 +46,6 @@ Same again.`
 
 const wrapper43Config: UserConfig = {
     id: '43',
-    htmlElement: document.getElementById('monaco-editor-root-43') as HTMLElement,
     wrapperConfig: {
         serviceConfig: {
             userServices: {
@@ -73,7 +71,6 @@ const wrapper43Config: UserConfig = {
 
 const wrapper44Config: UserConfig = {
     id: '44',
-    htmlElement: document.getElementById('monaco-editor-root-44') as HTMLElement,
     wrapperConfig: {
         serviceConfig: {
             userServices: {
@@ -99,16 +96,16 @@ const wrapper44Config: UserConfig = {
 };
 
 const startWrapper42 = async () => {
-    await wrapper42.start(wrapper42Config);
+    await wrapper42.start(wrapper42Config, document.getElementById('monaco-editor-root-42'));
     console.log('wrapper42 was started.');
 };
 
 const startWrapper43 = async () => {
-    await wrapper43.start(wrapper43Config);
+    await wrapper43.start(wrapper43Config, document.getElementById('monaco-editor-root-43'));
     console.log('wrapper43 was started.');
 };
 const startWrapper44 = async () => {
-    await wrapper44.start(wrapper44Config);
+    await wrapper44.start(wrapper44Config, document.getElementById('monaco-editor-root-44'));
     console.log('wrapper44 was started.');
 
 };
@@ -124,7 +121,7 @@ const sleepOne = (milliseconds: number) => {
         appConfig42.code = `function logMe() {
     console.log('Hello swap editors!');
 };`;
-        const w42Start = wrapper42.start(wrapper42Config);
+        const w42Start = wrapper42.start(wrapper42Config, document.getElementById('monaco-editor-root-42'));
 
         const w43Start = wrapper43.updateDiffModel({
             languageId: 'javascript',
@@ -140,7 +137,7 @@ const sleepOne = (milliseconds: number) => {
         // This affects all editors globally and is only effective
         // if it is not in contrast to one configured later
         appConfig44.theme = 'vs-light';
-        const w44Start = wrapper44.start(wrapper44Config);
+        const w44Start = wrapper44.start(wrapper44Config, document.getElementById('monaco-editor-root-44'));
 
         await w42Start;
         console.log('Restarted wrapper42.');
@@ -159,7 +156,7 @@ const sleepTwo = (milliseconds: number) => {
         appConfig44.useDiffEditor = false;
         appConfig44.theme = 'vs-dark';
 
-        await wrapper44.start(wrapper44Config);
+        await wrapper44.start(wrapper44Config, document.getElementById('monaco-editor-root-44'));
         console.log('Restarted wrapper44.');
     }, milliseconds);
 };

packages/examples/src/wrapperTs.ts

@@ -30,7 +30,6 @@ const monacoEditorConfig = {
 };
 
 const userConfig: UserConfig = {
-    htmlElement: document.getElementById('monaco-editor-root') as HTMLElement,
     wrapperConfig: {
         serviceConfig: {
             userServices: {
@@ -52,11 +51,12 @@ const userConfig: UserConfig = {
 };
 
 try {
+    const htmlElement = document.getElementById('monaco-editor-root');
     document.querySelector('#button-start')?.addEventListener('click', () => {
-        startEditor(userConfig, code, codeOriginal);
+        startEditor(userConfig, htmlElement, code, codeOriginal);
     });
     document.querySelector('#button-swap')?.addEventListener('click', () => {
-        swapEditors(userConfig, code, codeOriginal);
+        swapEditors(userConfig, htmlElement, code, codeOriginal);
     });
     document.querySelector('#button-swap-code')?.addEventListener('click', () => {
         if (wrapper.getMonacoEditorApp()?.getConfig().codeUri === codeUri) {
@@ -81,7 +81,7 @@ try {
         }
     });
 
-    startEditor(userConfig, code, codeOriginal);
+    startEditor(userConfig, htmlElement, code, codeOriginal);
 } catch (e) {
     console.error(e);
 }

packages/examples/src/wrapperWs.ts

@@ -30,7 +30,6 @@ const monacoEditorConfig = {
 };
 
 const userConfig: UserConfig = {
-    htmlElement: document.getElementById('monaco-editor-root') as HTMLElement,
     wrapperConfig: {
         serviceConfig: {
             userServices: {
@@ -80,17 +79,18 @@ const userConfig: UserConfig = {
 };
 
 try {
+    const htmlElement = document.getElementById('monaco-editor-root');
     document.querySelector('#button-start')?.addEventListener('click', () => {
-        startEditor(userConfig, codeMain, codeOrg);
+        startEditor(userConfig, htmlElement, codeMain, codeOrg);
     });
     document.querySelector('#button-swap')?.addEventListener('click', () => {
-        swapEditors(userConfig, codeMain, codeOrg);
+        swapEditors(userConfig, htmlElement, codeMain, codeOrg);
     });
     document.querySelector('#button-dispose')?.addEventListener('click', async () => {
         codeMain = await disposeEditor(userConfig.wrapperConfig.editorAppConfig.useDiffEditor);
     });
 
-    startEditor(userConfig, codeMain, codeOrg);
+    startEditor(userConfig, htmlElement, codeMain, codeOrg);
 } catch (e) {
     console.error(e);
 }

packages/monaco-editor-react/CHANGELOG.md

@@ -5,6 +5,8 @@ All notable changes to npm module [@typefox/monaco-editor-react](https://www.npm
 ## [2.2.0] - 2023-09-29
 
 - Updated to `monaco-editor-wrapper` `3.2.0`
+- htmlElement is no longer part of UserConfig. Must be passed at start [#51](https://github.com/TypeFox/monaco-components/pull/51)
+  - The HTMLElement it is no longer part of the UserConfig. The component just uses its root.
 
 ## [2.1.0] - 2023-09-21
 

packages/monaco-editor-react/src/index.tsx

@@ -119,8 +119,7 @@ export class MonacoEditorReactComp extends React.Component<MonacoEditorProps> {
         if (this.containerElement) {
             this.containerElement.className = className ?? '';
 
-            userConfig.htmlElement = this.containerElement;
-            this.isStarting = this.wrapper.start(userConfig);
+            this.isStarting = this.wrapper.start(userConfig, this.containerElement);
             await this.isStarting;
 
             // once awaiting isStarting is done onLoad is called if available

packages/monaco-editor-wrapper/CHANGELOG.md

@@ -11,6 +11,8 @@ All notable changes to npm module [monaco-editor-wrapper](https://www.npmjs.com/
     - languages and model services are always added by `monaco-languagclient`
     - layout, environment, extension, files and quickAccess servies are always added by `monaco-vscode-api`
     - Additional services need to be added to the package dependencies and imported and configured as shown in the [examples](https://github.com/TypeFox/monaco-languageclient#examples)
+- htmlElement is no longer part of UserConfig. Must be passed at start [#51](https://github.com/TypeFox/monaco-components/pull/51)
+  - The HTMLElement must now be passed at `wrapper.start`. It is no longer part of the UserConfig.
 
 ## [3.1.0] - 2023-09-21
 

packages/monaco-editor-wrapper/src/editorAppBase.ts

@@ -77,12 +77,12 @@ export abstract class EditorAppBase {
     }
 
     protected async createEditor(container: HTMLElement, editorOptions?: editor.IStandaloneEditorConstructionOptions): Promise<void> {
-        this.editor = createConfiguredEditor(container!, editorOptions);
+        this.editor = createConfiguredEditor(container, editorOptions);
         await this.updateEditorModel();
     }
 
     protected async createDiffEditor(container: HTMLElement, diffEditorOptions?: editor.IStandaloneDiffEditorConstructionOptions): Promise<void> {
-        this.diffEditor = createConfiguredDiffEditor(container!, diffEditorOptions);
+        this.diffEditor = createConfiguredDiffEditor(container, diffEditorOptions);
         await this.updateDiffEditorModel();
     }