fix(Editor): fix loading vue & custom languages in monaco

hatemhosny · hatemhosny · commit b7bbb80356b8 · 2025-05-11T07:05:41.000+03:00
diff --git a/src/livecodes/editor/monaco/monaco.ts b/src/livecodes/editor/monaco/monaco.ts
@@ -249,6 +249,49 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
     listeners.forEach((fn) => editor.getModel()?.onDidChangeContent(fn));
   };
 
+  const customLanguages: Partial<Record<Language, string>> = {
+    astro: baseUrl + '{{hash:monaco-lang-astro.js}}',
+    clio: baseUrl + '{{hash:monaco-lang-clio.js}}',
+    imba: baseUrl + '{{hash:monaco-lang-imba.js}}',
+    // sql: baseUrl + '{{hash:monaco-lang-sql.js}}', // TODO: add autocomplete
+    wat: baseUrl + '{{hash:monaco-lang-wat.js}}',
+  };
+
+  interface CustomLanguageDefinition {
+    config?: Monaco.languages.LanguageConfiguration;
+    tokens?: Monaco.languages.IMonarchLanguage;
+  }
+
+  const addVueSupport = async () => {
+    if (vueRegistered) return;
+    vueRegistered = true;
+    const { registerVue, registerHighlighter } = await import(monacoVolarUrl);
+    const tsCompilerOptions = { ...getCompilerOptions('vue'), jsx: 'preserve' };
+    await registerVue({ editor, monaco, tsCompilerOptions, silent: true });
+    shikiThemes = registerHighlighter(monaco);
+    shikiThemes['custom-vs-light'] = shikiThemes.vs;
+    shikiThemes['custom-vs-dark'] = shikiThemes['vs-dark'];
+    setTheme(currentTheme, currentEditorTheme);
+  };
+
+  const loadMonacoLanguage = async (lang: Language) => {
+    if (monacoMapLanguage(lang) === 'vue') {
+      await addVueSupport();
+      return;
+    }
+    const langUrl = customLanguages[lang];
+    if (langUrl && !monaco.languages.getLanguages().find((l) => l.id === lang)) {
+      const mod: CustomLanguageDefinition = (await import(langUrl)).default;
+      monaco.languages.register({ id: lang });
+      if (mod.config) {
+        monaco.languages.setLanguageConfiguration(lang, mod.config);
+      }
+      if (mod.tokens) {
+        monaco.languages.setMonarchTokensProvider(lang, mod.tokens);
+      }
+    }
+  };
+
   let modelUri = '';
   const setModel = (
     editor: Monaco.editor.IStandaloneCodeEditor,
@@ -276,9 +319,17 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
 
   const editor = monaco.editor.create(container, {
     ...editorOptions,
-    language: monacoMapLanguage(language),
+    language: language.startsWith('vue') ? 'html' : monacoMapLanguage(language),
   });
-  setModel(editor, options.value, language);
+  setModel(editor, options.value, language.startsWith('vue') ? 'html' : language);
+  loadMonacoLanguage(language);
+
+  // avoid a race condition that prevents loading vue worker
+  if (language.startsWith('vue')) {
+    setTimeout(() => {
+      setLanguage(language);
+    }, 50);
+  }
 
   const getOrCreateModel = (value: string, lang: string | undefined, uri: Monaco.Uri) => {
     const model = monaco.editor.getModel(uri);
@@ -305,49 +356,6 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
       });
   }
 
-  const customLanguages: Partial<Record<Language, string>> = {
-    astro: baseUrl + '{{hash:monaco-lang-astro.js}}',
-    clio: baseUrl + '{{hash:monaco-lang-clio.js}}',
-    imba: baseUrl + '{{hash:monaco-lang-imba.js}}',
-    // sql: baseUrl + '{{hash:monaco-lang-sql.js}}', // TODO: add autocomplete
-    wat: baseUrl + '{{hash:monaco-lang-wat.js}}',
-  };
-
-  interface CustomLanguageDefinition {
-    config?: Monaco.languages.LanguageConfiguration;
-    tokens?: Monaco.languages.IMonarchLanguage;
-  }
-
-  const addVueSupport = async () => {
-    if (vueRegistered) return;
-    vueRegistered = true;
-    const { registerVue, registerHighlighter } = await import(monacoVolarUrl);
-    const tsCompilerOptions = { ...getCompilerOptions('vue'), jsx: 'preserve' };
-    await registerVue({ editor, monaco, tsCompilerOptions, silent: true });
-    shikiThemes = registerHighlighter(monaco);
-    shikiThemes['custom-vs-light'] = shikiThemes.vs;
-    shikiThemes['custom-vs-dark'] = shikiThemes['vs-dark'];
-    setTheme(currentTheme, currentEditorTheme);
-  };
-
-  const loadMonacoLanguage = async (lang: Language) => {
-    if (monacoMapLanguage(lang) === 'vue') {
-      await addVueSupport();
-      return;
-    }
-    const langUrl = customLanguages[lang];
-    if (langUrl && !monaco.languages.getLanguages().find((l) => l.id === lang)) {
-      const mod: CustomLanguageDefinition = (await import(langUrl)).default;
-      monaco.languages.register({ id: lang });
-      if (mod.config) {
-        monaco.languages.setLanguageConfiguration(lang, mod.config);
-      }
-      if (mod.tokens) {
-        monaco.languages.setMonarchTokensProvider(lang, mod.tokens);
-      }
-    }
-  };
-
   const getEditorId = () => editorId;
   const getValue = () => editor.getValue();
   const setValue = (value = '') => {
@@ -440,12 +448,12 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
   const setLanguage = (lang: Language, value?: string) => {
     language = lang;
     clearTypes(false);
-    const valueToIsert = value ?? editor.getValue();
+    const valueToInsert = value ?? editor.getValue();
     if (monacoMapLanguage(lang) === 'vue') {
       // avoid race condition of value changing while valor is loading
-      setValue(valueToIsert);
+      setValue(valueToInsert);
     } else {
-      setModel(editor, valueToIsert, language);
+      setModel(editor, valueToInsert, language);
     }
     loadMonacoLanguage(lang).then(() => {
       if (monacoMapLanguage(lang) === 'vue') {
