From b43540d80cff419fae83ddf350a7e8fbea326ca2 Mon Sep 17 00:00:00 2001
From: Sipke Schoorstra <sipkeschoorstra@outlook.com>
Date: Wed, 7 Jun 2023 22:53:13 +0200
Subject: [PATCH] Fix Monaco initialisation race condition

---
 .../shared/monaco-editor/monaco-editor.tsx    | 24 +++++++++++--------
 .../components/shared/monaco-editor/utils.ts  |  3 ---
 2 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/src/designer/designer_packages/elsa-workflows-designer/src/components/shared/monaco-editor/monaco-editor.tsx b/src/designer/designer_packages/elsa-workflows-designer/src/components/shared/monaco-editor/monaco-editor.tsx
index b15a25ae8..0112c162f 100644
--- a/src/designer/designer_packages/elsa-workflows-designer/src/components/shared/monaco-editor/monaco-editor.tsx
+++ b/src/designer/designer_packages/elsa-workflows-designer/src/components/shared/monaco-editor/monaco-editor.tsx
@@ -26,12 +26,13 @@ export class ElsaMonaco {
   editor: any;
 
   @Watch('language')
-  languageChangeHandler(newValue: string) {
+  async languageChangeHandler(newValue: string) {
     if (!this.editor)
       return;
 
     const model = this.editor.getModel();
-    this.monaco.editor.setModelLanguage(model, this.language);
+    const monaco = await this.getMonaco();
+    monaco.editor.setModelLanguage(model, this.language);
   }
 
   @Method()
@@ -45,7 +46,7 @@ export class ElsaMonaco {
 
   @Method()
   async addJavaScriptLib(libSource: string, libUri: string) {
-    const monaco = this.monaco;
+    const monaco = await this.getMonaco();
 
     monaco.languages.typescript.javascriptDefaults.setExtraLibs([{
       filePath: "lib.es5.d.ts"
@@ -69,13 +70,8 @@ export class ElsaMonaco {
     }
   }
 
-  async componentWillLoad() {
-    const monacoLibPath = monacoStore.monacoLibPath;
-    this.monaco = await initializeMonacoWorker(monacoLibPath);
-  }
-
-  componentDidLoad() {
-    const monaco = this.monaco;
+  async componentDidLoad() {
+    const monaco = await this.getMonaco();
     const language = this.language;
 
     // Validation settings.
@@ -162,6 +158,14 @@ export class ElsaMonaco {
     }
   }
 
+  private async getMonaco() {
+    if(!!this.monaco)
+      return this.monaco;
+
+    const monacoLibPath = monacoStore.monacoLibPath;
+    return this.monaco = await initializeMonacoWorker(monacoLibPath);
+  }
+
   disconnectedCallback() {
     const editor = this.editor;
 
diff --git a/src/designer/designer_packages/elsa-workflows-designer/src/components/shared/monaco-editor/utils.ts b/src/designer/designer_packages/elsa-workflows-designer/src/components/shared/monaco-editor/utils.ts
index 309ea3f08..a061817d5 100644
--- a/src/designer/designer_packages/elsa-workflows-designer/src/components/shared/monaco-editor/utils.ts
+++ b/src/designer/designer_packages/elsa-workflows-designer/src/components/shared/monaco-editor/utils.ts
@@ -26,7 +26,6 @@ export async function initializeMonacoWorker(libPath?: string): Promise<Monaco>
   return await mutex.runExclusive(async () => {
 
     if (isInitialized) {
-
       return win.monaco;
     }
 
@@ -41,8 +40,6 @@ export async function initializeMonacoWorker(libPath?: string): Promise<Monaco>
         const startTime = Date.now();
         const timeout = 3000;
 
-        debugger;
-
         const checkForMonaco = () => {
           if (win.monaco) {
             resolve(win.monaco);