Doesn't work if the Monaco editor is initialised with loader.js like CDN

[faizananwerali]

Every example you have written, node js compile, then it works in brower.

I'm using the loader.js method to initialize Monaco Editor. Which doesn't compile, instead it loads files like cdn.

Here you can see it in action How to initialize Microsoft Monaco editor in a browser using simple JavaScript or jQuery

How do I use monaco-tailwindcss with this method?

This plugin https://www.npmjs.com/package/@monaco-editor/loader also does the same thing but in different style than the one mentioned above.

Here is also another example How to run the Monaco editor from a CDN like cdnjs?

[remcohaszing]

configureMonacoTailwindcss accepts the Monaco editor module as its first argument. I see this is missing from the documentation in the readme. Based on the examples you linked, you should be able to use the following:

import { configureMonacoTailwindcss } from 'monaco-tailwindcss';

require(['vs/editor/editor.main'], () => {
  configureMonacoTailwindcss(monaco, { /* options */ })
})

I personally don’t use it like that, so I’m curious to see if it works for you.

It’s the same when using @monaco-editor/loader:

import loader from '@monaco-editor/loader';
import { configureMonacoTailwindcss } from 'monaco-tailwindcss';

loader.init().then((monaco) => {
  configureMonacoTailwindcss(monaco, { /* options */ })
})

[faizananwerali]

Just wondering, don't I need the worker also to work? or will it work without the worker?

[faizananwerali]

Just as I suspected. Tailwindcss worker not found.

zone.js:1061 Unhandled Promise rejection: Not Found ; Zone: <root> ; Task: Promise.then ; Value: Error: Not Found
    at workerMain.js:6:14682 Error: Not Found
    at http://localhost:4200/assets/monaco-editor/min/vs/base/worker/workerMain.js#tailwindcss:6:14682

[remcohaszing]

Ah yes, as you found out you really do need to configure the worker. It contains most logic.

I suspect Monaco editor from the CDN already sets MonacoEnvironment, so you need to patch it.

[faizananwerali]

Yes, Since I work on Angular, I was finally able to make it work without webpack.config.js by setting the window.MonacoEnvironment.

There is just one issue.

require(['vs/editor/editor.main'], () => {
  configureMonacoTailwindcss(monaco, { /* options */ })
})

Since I'm loading after the editor.main file load, it's working perfectly.

But when I call the configureMonacoTailwindcss function again to update the tailwind config, it regenerates the color picker and autocomplete list multiple times. In this case, I updated it twice, so it's showing three color pickers. First time when it loads, then every time when I update the tailwind config.

[remcohaszing]

Good to hear!

To update the tailwind config, you could simply call setTailwindConfig. I.e.:

require(['vs/editor/editor.main'], () => {
  const monacoTailwindcss = configureMonacoTailwindcss(monaco, { /* options */ })
  monacoTailwindcss.setTailwindConfig({
    theme: {
      extend: {
        colors: {
          lava: '#b5332e',
          ocean: {
            50: '#f2fcff',
            100: '#c1f2fe',
            200: '#90e9ff',
            300: '#5fdfff',
            400: '#2ed5ff',
            500: '#00cafc',
            600: '#00a3cc',
            700: '#007c9b',
            800: '#00546a',
            900: '#002d39'
          }
        }
      }
    }
  })
})

[faizananwerali]

Thanks, Bro. That's solved my issue.

[igorbrasileiro]

I'm facing some issues by using monaco from cdn, because the monaco is trying to fetch worker from cdnjs instead. Do you have something in mind that I could set to monaco to fetch monaco-tailwind worker from https://esm.sh/monaco-tailwindcss@0.6.0/tailwindcss.worker.js ?

The error:

errors.ts:26 Uncaught Error: Failed to execute 'importScripts' on 'WorkerGlobalScope': The script at
'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.47.0/min/monaco-tailwindcss/tailwindcss.worker.js'
failed to load.

let configureMonacoTailwindcss, tailwindcssData;
if (IS_BROWSER) {
  // need this because deno import the module and document isn't defined in the server.
  const monacoTailwind = await import(
    "https://esm.sh/monaco-tailwindcss@0.6.0"
  );
  configureMonacoTailwindcss = monacoTailwind.configureMonacoTailwindcss;
  tailwindcssData = monacoTailwind.tailwindcssData;
}

const VERSION = "0.47.0";
const MONACO_CDN = "https://cdnjs.cloudflare.com/ajax/libs/monaco-editor";

const init = () => {
  const id = "monaco-loader";
  const elem = document.getElementById(id);

  if (elem) return;

  const script = document.createElement("script");
  script.id = id;
  script.src = `${MONACO_CDN}/${VERSION}/min/vs/loader.min.js`;
  script.type = "text/javascript";
  script.onload = () => {
    // runs on second load
    if (monaco.value) {
      return;
    }

    globalThis.window.require.config({
      paths: { vs: `${MONACO_CDN}/${VERSION}/min/vs` },
    });

    globalThis.window.require(["vs/editor/editor.main"], () => {
      const m = globalThis.window.monaco;

      window.MonacoEnvironment = {
        getWorkerUrl(moduleId, label) {
          if (label === "tailwindcss") {
            return "https://esm.sh/monaco-tailwindcss@0.6.0/tailwindcss.worker.js";
          }

          return `${MONACO_CDN}/${VERSION}/min/vs/language/${label}/${label}Worker.min.js`;
        },
      };

      configureMonacoTailwindcss && configureMonacoTailwindcss(m);

      monaco.value = m;
    });
  };

  document.body.appendChild(script);
};

[igorbrasileiro]

I'm also trying it to work here: https://codepen.io/Igor-Brasileiro/pen/vYMWPKo?editors=0011

[wkd-kapsule]

The error:

errors.ts:26 Uncaught Error: Failed to execute 'importScripts' on 'WorkerGlobalScope': The script at
'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.47.0/min/monaco-tailwindcss/tailwindcss.worker.js'
failed to load.

Have you found a solution to this? I'm facing the same issue. It seems to be coming from monaco's worker. I guess that tailwindcss is communicating its worker's url to monaco's but somehow, monaco decides to append it to its own baseUrl. Or for some reason, monaco picks up the presence of tailwindcss, when it shouldn't, and does thing as if it was supposed to handle it.

Something to note is that the tailwindcss worker's url in the error is the default one. In my implementation, I use a custom worker file. I would expect to find that file's path appended to the failed request, but it's not.