feat(Editor): add support for tailwindcss in monaco editor

hatemhosny · hatemhosny · commit c7f166b9672c · 2025-01-30T01:27:19.000+02:00
diff --git a/src/livecodes/core.ts b/src/livecodes/core.ts
@@ -1367,6 +1367,7 @@ const applyConfig = async (newConfig: Partial<Config>) => {
   if (newConfig.autotest) {
     UI.getWatchTestsButton()?.classList.remove('disabled');
   }
+  let shouldReloadEditors = false;
   const editorConfig = {
     ...getEditorConfig(newConfig as Config),
     ...getFormatterConfig(newConfig as Config),
@@ -1379,11 +1380,26 @@ const applyConfig = async (newConfig: Partial<Config>) => {
     };
     for (const key in editorConfig) {
       if ((editorConfig as any)[key] !== (currentEditorConfig as any)[key]) {
-        await reloadEditors({ ...currentConfig, ...newConfig });
+        shouldReloadEditors = true;
         break;
       }
     }
   }
+  if ('configureTailwindcss' in editors.markup) {
+    if (newConfig.processors?.includes('tailwindcss')) {
+      editors.markup.configureTailwindcss?.(true);
+    }
+    if (
+      currentConfig.processors?.includes('tailwindcss') &&
+      !newConfig.processors?.includes('tailwindcss')
+    ) {
+      editors.markup.configureTailwindcss?.(false);
+      shouldReloadEditors = true;
+    }
+  }
+  if (shouldReloadEditors) {
+    await reloadEditors({ ...currentConfig, ...newConfig });
+  }
 };
 
 const setUserConfig = (newConfig: Partial<UserConfig> | null, save = true) => {
@@ -2892,6 +2908,14 @@ const handleProcessors = () => {
               : getConfig().processors.filter((p) => p !== processorName)),
           ],
         });
+        if (processorName === 'tailwindcss' && 'configureTailwindcss' in editors.markup) {
+          if (toggle.checked) {
+            editors.markup.configureTailwindcss?.(true);
+          } else {
+            editors.markup.configureTailwindcss?.(false);
+            await reloadEditors(getConfig());
+          }
+        }
         if (getConfig().autoupdate) {
           await run();
         }
diff --git a/src/livecodes/editor/monaco/monaco.ts b/src/livecodes/editor/monaco/monaco.ts
@@ -23,6 +23,7 @@ import {
   monacoBaseUrl,
   monacoEmacsUrl,
   monacoVimUrl,
+  vendorsBaseUrl,
 } from '../../vendors';
 import { getImports } from '../../compiler/import-map';
 import { getEditorModeNode } from '../../UI/selectors';
@@ -41,6 +42,7 @@ const loadedThemes = new Set<string>();
 let codeiumProvider: { dispose: () => void } | undefined;
 // track editors for providing context for AI
 let editors: Monaco.editor.IStandaloneCodeEditor[] = [];
+let tailwindcssConfig: any | undefined;
 
 export const createEditor = async (options: EditorOptions): Promise<CodeEditor> => {
   const {
@@ -553,6 +555,28 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
     });
   };
 
+  const configureTailwindcss = (enabled: boolean) => {
+    if (!enabled) {
+      tailwindcssConfig?.dispose();
+      tailwindcssConfig = undefined;
+      return;
+    }
+    if (tailwindcssConfig) return;
+    tailwindcssConfig = true; // avoid multiple loads
+    import(vendorsBaseUrl + 'tailwindcss/monaco-tailwindcss.js').then(
+      ({ configureMonacoTailwindcss, tailwindcssData }) => {
+        monaco.languages.css.cssDefaults.setOptions({
+          data: {
+            dataProviders: {
+              tailwindcssData,
+            },
+          },
+        });
+        tailwindcssConfig = configureMonacoTailwindcss(monaco);
+      },
+    );
+  };
+
   const changeSettings = (settings: EditorConfig) => {
     editorOptions = {
       ...convertOptions(settings),
@@ -809,6 +833,7 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
     layout,
     addTypes,
     changeSettings,
+    configureTailwindcss,
     onContentChanged,
     keyCodes,
     addKeyBinding,
diff --git a/src/livecodes/vendors.ts b/src/livecodes/vendors.ts
@@ -4,7 +4,7 @@ import { modulesService } from './services/modules';
 const { getUrl, getModuleUrl } = modulesService;
 
 export const vendorsBaseUrl = // 'https://127.0.0.1:8081/';
-  /* @__PURE__ */ getUrl('@live-codes/browser-compilers@0.19.1/dist/');
+  /* @__PURE__ */ getUrl('@live-codes/browser-compilers@0.20.0/dist/');
 
 export const acornUrl = /* @__PURE__ */ getUrl('acorn@8.12.1/dist/acorn.js');
 
@@ -286,7 +286,7 @@ export const mermaidCdnUrl = /* @__PURE__ */ getUrl('mermaid@10.2.2/dist/mermaid
 
 export const mjmlUrl = /* @__PURE__ */ getUrl('mjml-browser@4.15.3/lib/index.js');
 
-export const monacoBaseUrl = /* @__PURE__ */ getUrl('@live-codes/monaco-editor@0.2.2/');
+export const monacoBaseUrl = /* @__PURE__ */ getUrl('@live-codes/monaco-editor@0.3.0/');
 
 export const monacoEmacsUrl = /* @__PURE__ */ getUrl('monaco-emacs@0.3.0/dist/monaco-emacs.js');
 
diff --git a/src/sdk/models.ts b/src/sdk/models.ts
@@ -1493,6 +1493,7 @@ export interface CodeEditor {
     ShiftAltF: any;
   };
   changeSettings: (editorSettings: EditorConfig) => void;
+  configureTailwindcss?: (enabled: boolean) => void;
   registerFormatter: (formatFn: FormatFn | undefined) => void;
   format: () => Promise<void>;
   isReadonly: boolean;
