From ffe5bee8026ac2da7bbb698bc10803faa4bd93ef Mon Sep 17 00:00:00 2001 From: Kai Salmen Date: Fri, 29 Sep 2023 16:29:02 +0200 Subject: [PATCH] htmlElement is no longer part of UserConfig and needs to be pass to start --- index.html | 2 +- packages/examples/src/common.ts | 12 ++++++------ .../src/langium/config/langium.monarch.ts | 16 ---------------- .../src/langium/config/wrapperLangiumClassic.ts | 5 +---- .../src/langium/config/wrapperLangiumVscode.ts | 1 - .../langium/config/wrapperStatemachineConfig.ts | 3 +-- .../examples/src/langium/reactStatemachine.tsx | 2 +- packages/examples/src/langium/wrapperLangium.ts | 7 ++++--- .../examples/src/langium/wrapperStatemachine.ts | 8 ++++---- packages/examples/src/reactPython.tsx | 1 - packages/examples/src/reactTs.tsx | 4 +--- packages/examples/src/wrapperAdvanced.ts | 15 ++++++--------- packages/examples/src/wrapperTs.ts | 8 ++++---- packages/examples/src/wrapperWs.ts | 8 ++++---- packages/monaco-editor-react/CHANGELOG.md | 2 ++ packages/monaco-editor-react/src/index.tsx | 3 +-- packages/monaco-editor-wrapper/CHANGELOG.md | 2 ++ .../monaco-editor-wrapper/src/editorAppBase.ts | 4 ++-- packages/monaco-editor-wrapper/src/wrapper.ts | 10 +++++----- packages/monaco-editor-wrapper/test/helper.ts | 1 - .../monaco-editor-wrapper/test/wrapper.test.ts | 10 +++++++++- 21 files changed, 54 insertions(+), 70 deletions(-) diff --git a/index.html b/index.html index 7d184f9..6b3c499 100644 --- a/index.html +++ b/index.html @@ -27,7 +27,7 @@

Monaco Editor Wrapper


Langium Statemachine Client & Language Server (Worker)
- Langium Language Client & Language Server (Worker) + Langium Grammar DSL Language Client & Language Server (Worker)

Please execute npm run start:example:server:json beforehand:
Language Client & Web Socket Language Server example diff --git a/packages/examples/src/common.ts b/packages/examples/src/common.ts index 0207e15..bd3e491 100644 --- a/packages/examples/src/common.ts +++ b/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); }; diff --git a/packages/examples/src/langium/config/langium.monarch.ts b/packages/examples/src/langium/config/langium.monarch.ts index 3b95d7d..3d987b7 100644 --- a/packages/examples/src/langium/config/langium.monarch.ts +++ b/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; diff --git a/packages/examples/src/langium/config/wrapperLangiumClassic.ts b/packages/examples/src/langium/config/wrapperLangiumClassic.ts index 2891874..2420384 100644 --- a/packages/examples/src/langium/config/wrapperLangiumClassic.ts +++ b/packages/examples/src/langium/config/wrapperLangiumClassic.ts @@ -5,7 +5,7 @@ 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 => { @@ -13,7 +13,6 @@ export const setupLangiumClientClassic = async (): Promise => { 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 => { }, languageExtensionConfig: { id: 'langium' }, languageDef: LangiumMonarchContent, - themeData: LangiumTheme, - theme: 'langium-theme', userConfiguration: { // or configure the semantic highlighting like this: // `{ json: "editor.semanticHighlighting.enabled": true }` diff --git a/packages/examples/src/langium/config/wrapperLangiumVscode.ts b/packages/examples/src/langium/config/wrapperLangiumVscode.ts index a6c9457..a95792f 100644 --- a/packages/examples/src/langium/config/wrapperLangiumVscode.ts +++ b/packages/examples/src/langium/config/wrapperLangiumVscode.ts @@ -22,7 +22,6 @@ export const setupLangiumClientVscodeApi = async (): Promise => { const langiumWorker = loadLangiumWorker(); return { - htmlElement: document.getElementById('monaco-editor-root') as HTMLElement, wrapperConfig: { serviceConfig: { userServices: { diff --git a/packages/examples/src/langium/config/wrapperStatemachineConfig.ts b/packages/examples/src/langium/config/wrapperStatemachineConfig.ts index 1003120..a330d7f 100644 --- a/packages/examples/src/langium/config/wrapperStatemachineConfig.ts +++ b/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 => { +export const createLangiumGlobalConfig = async (): Promise => { const code = await getTextContent(new URL('./src/langium/content/example.statemachine', window.location.href)); const extensionFilesOrContents = new Map(); @@ -22,7 +22,6 @@ export const createLangiumGlobalConfig = async (htmlElement: HTMLElement): Promi const stateMachineWorker = loadStatemachinWorker(); return { - htmlElement: htmlElement, wrapperConfig: { serviceConfig: { userServices: { diff --git a/packages/examples/src/langium/reactStatemachine.tsx b/packages/examples/src/langium/reactStatemachine.tsx index 4814ae6..35e82a4 100644 --- a/packages/examples/src/langium/reactStatemachine.tsx +++ b/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 = { 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,7 +39,7 @@ 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); } @@ -46,7 +47,7 @@ export const startLangiumClientClassic = async () => { 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; diff --git a/packages/examples/src/langium/wrapperStatemachine.ts b/packages/examples/src/langium/wrapperStatemachine.ts index 7e1ff6d..f7a3aa6 100644 --- a/packages/examples/src/langium/wrapperStatemachine.ts +++ b/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); diff --git a/packages/examples/src/reactPython.tsx b/packages/examples/src/reactPython.tsx index 34704f7..3af279f 100644 --- a/packages/examples/src/reactPython.tsx +++ b/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', diff --git a/packages/examples/src/reactTs.tsx b/packages/examples/src/reactTs.tsx index 5abd6dd..7267765 100644 --- a/packages/examples/src/reactTs.tsx +++ b/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 = ; -const rootElem = document.getElementById('root')!; const root = ReactDOM.createRoot(rootElem); root.render(comp); diff --git a/packages/examples/src/wrapperAdvanced.ts b/packages/examples/src/wrapperAdvanced.ts index db133f6..2dc1ea3 100644 --- a/packages/examples/src/wrapperAdvanced.ts +++ b/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); }; diff --git a/packages/examples/src/wrapperTs.ts b/packages/examples/src/wrapperTs.ts index 4500837..906fef8 100644 --- a/packages/examples/src/wrapperTs.ts +++ b/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); } diff --git a/packages/examples/src/wrapperWs.ts b/packages/examples/src/wrapperWs.ts index 53f317c..47ffd36 100644 --- a/packages/examples/src/wrapperWs.ts +++ b/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); } diff --git a/packages/monaco-editor-react/CHANGELOG.md b/packages/monaco-editor-react/CHANGELOG.md index 1db3ec8..d6b9db2 100644 --- a/packages/monaco-editor-react/CHANGELOG.md +++ b/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 diff --git a/packages/monaco-editor-react/src/index.tsx b/packages/monaco-editor-react/src/index.tsx index 9eaa628..a15b674 100644 --- a/packages/monaco-editor-react/src/index.tsx +++ b/packages/monaco-editor-react/src/index.tsx @@ -119,8 +119,7 @@ export class MonacoEditorReactComp extends React.Component { 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 diff --git a/packages/monaco-editor-wrapper/CHANGELOG.md b/packages/monaco-editor-wrapper/CHANGELOG.md index 6f499c8..d5fd39c 100644 --- a/packages/monaco-editor-wrapper/CHANGELOG.md +++ b/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 diff --git a/packages/monaco-editor-wrapper/src/editorAppBase.ts b/packages/monaco-editor-wrapper/src/editorAppBase.ts index 9a0c9b3..19d1fcf 100644 --- a/packages/monaco-editor-wrapper/src/editorAppBase.ts +++ b/packages/monaco-editor-wrapper/src/editorAppBase.ts @@ -77,12 +77,12 @@ export abstract class EditorAppBase { } protected async createEditor(container: HTMLElement, editorOptions?: editor.IStandaloneEditorConstructionOptions): Promise { - this.editor = createConfiguredEditor(container!, editorOptions); + this.editor = createConfiguredEditor(container, editorOptions); await this.updateEditorModel(); } protected async createDiffEditor(container: HTMLElement, diffEditorOptions?: editor.IStandaloneDiffEditorConstructionOptions): Promise { - this.diffEditor = createConfiguredDiffEditor(container!, diffEditorOptions); + this.diffEditor = createConfiguredDiffEditor(container, diffEditorOptions); await this.updateDiffEditorModel(); } diff --git a/packages/monaco-editor-wrapper/src/wrapper.ts b/packages/monaco-editor-wrapper/src/wrapper.ts index 1bce48a..079cb35 100644 --- a/packages/monaco-editor-wrapper/src/wrapper.ts +++ b/packages/monaco-editor-wrapper/src/wrapper.ts @@ -15,7 +15,6 @@ export type WrapperConfig = { export type UserConfig = { id?: string; - htmlElement: HTMLElement; loggerConfig?: LoggerConfig; wrapperConfig: WrapperConfig; languageClientConfig?: LanguageClientConfig; @@ -29,7 +28,6 @@ export type UserConfig = { export class MonacoEditorLanguageClientWrapper { private id: string; - private htmlElement: HTMLElement; private editorApp: EditorAppClassic | EditorAppVscodeApi | undefined; private languageClientWrapper: LanguageClientWrapper; @@ -42,7 +40,6 @@ export class MonacoEditorLanguageClientWrapper { } 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 ?? {}; @@ -69,7 +66,10 @@ export class MonacoEditorLanguageClientWrapper { this.languageClientWrapper = new LanguageClientWrapper(userConfig.languageClientConfig, this.logger); } - async start(userConfig: UserConfig) { + async start(userConfig: UserConfig, htmlElement: HTMLElement | null) { + if (!htmlElement) { + throw new Error('No HTMLElement provided for monaco-editor.'); + } await this.init(userConfig); // Always dispose old instances before start @@ -84,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(htmlElement); if (this.languageClientWrapper.haveLanguageClientConfig()) { await this.languageClientWrapper.start(); diff --git a/packages/monaco-editor-wrapper/test/helper.ts b/packages/monaco-editor-wrapper/test/helper.ts index 6fb42f7..2846392 100644 --- a/packages/monaco-editor-wrapper/test/helper.ts +++ b/packages/monaco-editor-wrapper/test/helper.ts @@ -8,7 +8,6 @@ export const createMonacoEditorDiv = () => { export const createBaseConfig = (type: EditorAppType): UserConfig => { return { - htmlElement: document.getElementById('monaco-editor-root') as HTMLElement, wrapperConfig: createWrapperConfig(type) }; }; diff --git a/packages/monaco-editor-wrapper/test/wrapper.test.ts b/packages/monaco-editor-wrapper/test/wrapper.test.ts index 9f04226..4703a81 100644 --- a/packages/monaco-editor-wrapper/test/wrapper.test.ts +++ b/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'), document.getElementById('monaco-editor-root')); 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'), null); + }).rejects.toThrowError('No HTMLElement provided for monaco-editor.'); + }); });