frontend: pass monaco instance itself

redpanda-data · Oct 10, 2024 · 7b698a5 · 7b698a5
1 parent 7ef3d3f
commit 7b698a5
Showing 1 changed file with 40 additions and 56 deletions.
diff --git a/frontend/src/config.ts b/frontend/src/config.ts
@@ -239,67 +239,51 @@ export const setup = memoizeOne((setupArgs: SetConfigArguments) => {
     setConfig(setupArgs);
 
 
-    const pathToMonacoEditor = uriFromPath(path.join(__dirname, '../node_modules/monaco-editor/min/vs'));
+    // const pathToMonacoEditor = uriFromPath(path.join(__dirname, '../node_modules/monaco-editor/min/vs'));
 
-    console.log('pathToMonacoEditor: ', pathToMonacoEditor);
+    // console.log('pathToMonacoEditor: ', pathToMonacoEditor);
 
 
-    loader.config({
-        /**
-         * Configure Monaco loader
-         * @see https://github.com/suren-atoyan/monaco-react?tab=readme-ov-file#loader-config
-         */
-        paths: {
-            vs: pathToMonacoEditor,
-        },
-        /**
-         * Configure Monaco instance
-         * @see https://github.com/suren-atoyan/monaco-react?tab=readme-ov-file#use-monaco-editor-as-an-npm-package
-         */
-        monaco // Point @monaco-editor/react to monaco-editor instance
-    })
-    loader.init().then(async (monaco) => {
-        window.MonacoEnvironment = {
-            getWorker: function (_moduleId: string, label: string) {
-                console.log('label: ', label);
-                switch(label) {
-                    case 'editorWorkerService': {
-                        return new Worker(new URL('monaco-editor/esm/vs/editor/editor.worker', import.meta.url));
-                    }
-                    case 'json': {
-                        return new Worker(new URL('monaco-editor/esm/vs/language/json/json.worker', import.meta.url));
-                    }
-                    case 'css':
-                    case 'scss':
-                    case 'less': {
-                        return new Worker(new URL('monaco-editor/esm/vs/language/css/css.worker', import.meta.url));
-                    }
-                    case 'html':
-                    case 'handlebars':
-                    case 'razor': {
-                        return new Worker(new URL('monaco-editor/esm/vs/language/html/html.worker', import.meta.url));
-                    }
-                    case 'typescript':
-                    case 'javascript': {
-                        return new Worker(
-                            new URL('monaco-editor/esm/vs/language/typescript/ts.worker', import.meta.url),
-                        );
-                    }
-                    case 'yaml':
-                    case 'yml': {
-                        console.log('returning yaml worker');
-                        return new Worker(new URL('monaco-yaml/yaml.worker', import.meta.url));
-                    }
-                    default: {
-                        throw new Error(`Unknown label ${label}`);
-                    }
+    loader.config({ monaco });
+    window.MonacoEnvironment = {
+        getWorker: function (_moduleId: string, label: string) {
+            console.log('label: ', label);
+            switch(label) {
+                case 'editorWorkerService': {
+                    return new Worker(new URL('monaco-editor/esm/vs/editor/editor.worker', import.meta.url));
                 }
-            },
-        };
-
-        configureMonacoYaml(monaco, monacoYamlOptions);
-    })
+                case 'json': {
+                    return new Worker(new URL('monaco-editor/esm/vs/language/json/json.worker', import.meta.url));
+                }
+                case 'css':
+                case 'scss':
+                case 'less': {
+                    return new Worker(new URL('monaco-editor/esm/vs/language/css/css.worker', import.meta.url));
+                }
+                case 'html':
+                case 'handlebars':
+                case 'razor': {
+                    return new Worker(new URL('monaco-editor/esm/vs/language/html/html.worker', import.meta.url));
+                }
+                case 'typescript':
+                case 'javascript': {
+                    return new Worker(
+                        new URL('monaco-editor/esm/vs/language/typescript/ts.worker', import.meta.url),
+                    );
+                }
+                case 'yaml':
+                case 'yml': {
+                    console.log('returning yaml worker');
+                    return new Worker(new URL('monaco-yaml/yaml.worker', import.meta.url));
+                }
+                default: {
+                    throw new Error(`Unknown label ${label}`);
+                }
+            }
+        },
+    };
 
+    configureMonacoYaml(monaco, monacoYamlOptions);
 
     // Configure MobX
     configure({