Direct htmlElement is preferred over user-element

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/langium/config/langium.monarch.ts

@@ -87,17 +87,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

@@ -1,14 +1,13 @@
 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
@@ -36,8 +35,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

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

packages/examples/src/langium/wrapperLangium.ts

@@ -13,6 +13,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', async () => {
@@ -21,9 +22,6 @@ export const run = async () => {
         document.querySelector('#button-start-vscode-api')?.addEventListener('click', async () => {
             await startLangiumClientVscodeApi();
         });
-        document.querySelector('#button-dispose')?.addEventListener('click', async () => {
-            await disposeEditor();
-        });
     } catch (e) {
         console.error(e);
     }
@@ -34,7 +32,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);
     }
@@ -45,27 +43,20 @@ 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;
 };
 
-export const disposeEditor = async () => {
-    if (!wrapper) return;
-    wrapper.reportStatus();
-    await wrapper.dispose();
-    wrapper = undefined;
-};
-
 export const loadLangiumWorker = () => {
     // Language Server preparation
     const workerUrl = new URL('./src/servers/langium-server.ts', window.location.href);

packages/examples/src/reactTs.tsx

@@ -9,11 +9,11 @@ import 'monaco-editor/esm/vs/language/typescript/monaco.contribution.js';
 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: {
@@ -58,6 +58,5 @@ const EditorDemo: React.FC = () => {
 };
 
 const comp = <EditorDemo />;
-const rootElem = document.getElementById('root')!;
 const root = ReactDOM.createRoot(rootElem);
 root.render(comp);

packages/examples/wrapper_langium.html

@@ -12,7 +12,6 @@ <h2>Langium Grammar DSL Language Client & Server (Worker)</h2>
     <div style="padding: 0px 5px 5px 0px">
         <button type="button" id="button-start-classic">Start Classic</button>
         <button type="button" id="button-start-vscode-api">Start VscodeApi</button>
-        <button type="button" id="button-dispose">Dispose</button>
     </div>
     <div id="monaco-editor-root" style="height: 80vh; border: 1px solid grey"></div>
     <script type="module">

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/src/wrapper.ts

@@ -13,7 +13,7 @@ export type WrapperConfig = {
 
 export type UserConfig = {
     id?: string;
-    htmlElement: HTMLElement;
+    htmlElement?: HTMLElement;
     loggerConfig?: LoggerConfig;
     wrapperConfig: WrapperConfig;
     languageClientConfig?: LanguageClientConfig;
@@ -27,20 +27,25 @@ export type UserConfig = {
 export class MonacoEditorLanguageClientWrapper {
 
     private id: string;
-    private htmlElement: HTMLElement;
 
     private editorApp: EditorAppClassic | EditorAppVscodeApi | undefined;
     private languageClientWrapper: LanguageClientWrapper;
     private serviceConfig: InitializeServiceConfig;
     private logger: Logger;
 
-    private async init(userConfig: UserConfig) {
+    private async init(userConfig: UserConfig, htmlElement?: HTMLElement | undefined | null) {
         if (userConfig.wrapperConfig.editorAppConfig.useDiffEditor && !userConfig.wrapperConfig.editorAppConfig.codeOriginal) {
             throw new Error('Use diff editor was used without a valid config.');
         }
 
+        // Direct htmlElement is preferred over userConfig.htmlElement
+        const html = htmlElement ?? userConfig.htmlElement ?? undefined;
+        console.log(html);
+        if (!html) {
+            throw new Error('No HTMLElement provided for monaco-editor.');
+        }
+
         this.id = userConfig.id ?? Math.floor(Math.random() * 101).toString();
-        this.htmlElement = userConfig.htmlElement;
         this.logger = new Logger(userConfig.loggerConfig);
         this.serviceConfig = userConfig.wrapperConfig.serviceConfig ?? {};
 
@@ -60,10 +65,12 @@ export class MonacoEditorLanguageClientWrapper {
             await initServices(this.serviceConfig);
         }
         this.languageClientWrapper = new LanguageClientWrapper(userConfig.languageClientConfig, this.logger);
+
+        return html;
     }
 
-    async start(userConfig: UserConfig) {
-        await this.init(userConfig);
+    async start(userConfig: UserConfig, htmlElement?: HTMLElement | undefined | null) {
+        const html = await this.init(userConfig, htmlElement);
 
         // Always dispose old instances before start
         this.editorApp?.disposeApp();
@@ -77,7 +84,7 @@ export class MonacoEditorLanguageClientWrapper {
         this.logger.info(`Starting monaco-editor (${this.id})`);
 
         await this.editorApp?.init();
-        await this.editorApp.createEditors(this.htmlElement);
+        await this.editorApp.createEditors(html);
 
         if (this.languageClientWrapper.haveLanguageClientConfig()) {
             await this.languageClientWrapper.start();

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

@@ -15,7 +15,7 @@ describe('Test EditorAppBase', () => {
     });
 
     test('config defaults', () => {
-        const config = createBaseConfig('classic');
+        const config = createBaseConfig('classic', true);
         const app = new EditorAppClassic('config defaults', config);
         expect(app.getConfig().languageId).toEqual('typescript');
         expect(app.getConfig().code).toEqual('');
@@ -29,7 +29,7 @@ describe('Test EditorAppBase', () => {
     });
 
     test('config userConfiguration', () => {
-        const config = createBaseConfig('classic');
+        const config = createBaseConfig('classic', true);
         config.wrapperConfig.editorAppConfig.userConfiguration = {
             json: '{ "editor.semanticHighlighting.enabled": true }'
         };

packages/monaco-editor-wrapper/test/editorAppClassic.test.ts

@@ -3,7 +3,7 @@ import { EditorAppClassic, EditorAppConfigClassic } from 'monaco-editor-wrapper'
 import { createBaseConfig } from './helper.js';
 
 const buildConfig = () => {
-    const config = createBaseConfig('classic');
+    const config = createBaseConfig('classic', true);
     (config.wrapperConfig.editorAppConfig as EditorAppConfigClassic).editorOptions = {};
     return config;
 };

packages/monaco-editor-wrapper/test/helper.ts

@@ -6,9 +6,9 @@ export const createMonacoEditorDiv = () => {
     document.body.insertAdjacentElement('beforeend', div);
 };
 
-export const createBaseConfig = (type: EditorAppType): UserConfig => {
+export const createBaseConfig = (type: EditorAppType, createHTMLElement: boolean): UserConfig => {
     return {
-        htmlElement: document.getElementById('monaco-editor-root') as HTMLElement,
+        htmlElement: createHTMLElement ? document.getElementById('monaco-editor-root') as HTMLElement : undefined,
         wrapperConfig: createWrapperConfig(type)
     };
 };

packages/monaco-editor-wrapper/test/wrapper.test.ts

@@ -20,7 +20,7 @@ describe('Test MonacoEditorLanguageClientWrapper', () => {
     test('Check default values', async () => {
         createMonacoEditorDiv();
         const wrapper = new MonacoEditorLanguageClientWrapper();
-        await wrapper.start(createBaseConfig('classic'));
+        await wrapper.start(createBaseConfig('classic', true));
 
         const app = wrapper.getMonacoEditorApp() as EditorAppClassic;
         expect(app).toBeDefined();
@@ -30,4 +30,12 @@ describe('Test MonacoEditorLanguageClientWrapper', () => {
         expect(appConfig.automaticLayout).toBeTruthy();
         expect(appConfig.theme).toBe('vs-light');
     });
+
+    test('No HTML in Userconfig', async () => {
+        createMonacoEditorDiv();
+        const wrapper = new MonacoEditorLanguageClientWrapper();
+        await expect(async () => {
+            await wrapper.start(createBaseConfig('classic', false));
+        }).rejects.toThrowError('No HTMLElement provided for monaco-editor.');
+    });
 });