Example of using monaco-editor inside a Dojotoolkit based application

[JeanPerriault]

Hello,
I'm trying to use monaco-editor inside a Dojotoolkit based application.

If this is something you've already tried, it will be great to get an example. I know that dojotoolkit is not a new kid but giving the number of industrial application using it due to its past popularity + the fact that it is not providing this kind of widget (they have a rich text editor but not more), that might be worth for monaco-editor adoption.

More info on where I'm stuck with it for now: https://stackoverflow.com/questions/60110776/using-monaco-editor-in-dojotoolkit-based-application

[granicz]

We are having the same issue, can't make dojotoolkit's AMD loader work with Monaco's. Any guidance on how to accomplish this?

[alexdima]

@granicz The AMD distribution in the editor can be loaded with any AMD compliant loader. Here is a sample where the AMD distribution is loaded with requirejs -- https://github.com/microsoft/monaco-editor-samples/blob/master/browser-amd-requirejs/index.html

[JeanPerriault]

There might be some slight differences with dojo require, because the same example using dojo is throwing the following error:
Error: undefined is not an object (evaluating 'this._cssLoader.load')

I've created a stackblitz demo: https://stackblitz.com/edit/monaco-dojo
Also available on GitHub: https://github.com/JeanPerriault/monaco-dojo

[JeanPerriault]

Disclaimer: this is very hacky.
It turns out that using a local variable in CSSPlugin for _cssLoader instead of using this._cssLoader is solving the issue.
If it can give any idea on what could be happening under the wood.

// ------------------------------ Finally, the plugin
    var CSSPlugin = /** @class */ (function () {
        var _cssLoader;
        function CSSPlugin() {
            _cssLoader = new BrowserCSSLoader();
        }
        CSSPlugin.prototype.load = function (name, req, load) {
            var cssUrl = req.toUrl(name + '.css');
            _cssLoader.load(name, cssUrl, function (contents) {
                load({});
            }, function (err) {
                if (typeof load.error === 'function') {
                    load.error('Could not find ' + cssUrl + ' or it was empty');
                }
            });
        };
        return CSSPlugin;
    }());

[JeanPerriault]

Hi,
After digging a little more, looks like dojo require is adding this _cssLoader variable in a def property of this.
So a shorter fix for us would be to replace l.109 in https://github.com/microsoft/vscode/blob/94c9ea46838a9a619aeafb7e8afd1170c967bb55/src/vs/css.js, like
this._cssLoader => this.def._cssLoader

    // ------------------------------ Finally, the plugin
    var CSSPlugin = /** @class */ (function () {
        function CSSPlugin() {
            this._cssLoader = new BrowserCSSLoader();
        }
        CSSPlugin.prototype.load = function (name, req, load, config) {
            config = config || {};
            var cssConfig = config['vs/css'] || {};
            if (cssConfig.disabled) {
                // the plugin is asked to not create any style sheets
                load({});
                return;
            }
            var cssUrl = req.toUrl(name + '.css');
            this.def._cssLoader.load(name, cssUrl, function (contents) {
                load({});
            }, function (err) {
                if (typeof load.error === 'function') {
                    load.error('Could not find ' + cssUrl + ' or it was empty');
                }
            });
        };
        return CSSPlugin;
    }());

I would now need to find the best place for checking if we are using dojo require instead of a "standard" one.

[calvaradocl]

@JeanPerriault I confirm that this fixes the compatibility with dojo.js.

In my case, we had a project using ArcGIS JS. So when Monaco's custom AMD loader was referenced, it wouldn't work. By manually patching the editor.min.js file, we achieved "compatibility."

On our side, I added also an edit to the function so when dojo.js is detected it used one syntax over the other (using this or using a local variable for the _cssLoader).

i = function () {
  function e() {
      // This detects the dojo.js loader, as is named with v, monaco's custom AMD loader uses 'i' as the name of the require variable
      if (require.name == "v") {
          _cssLoader = new t
      }
      else {
          this._cssLoader = new t
      }
  }
  return e.prototype.load = function (e, t, i, n) {
      if (((n = n || {})["vs/css"] || {}).disabled) i({});
      else {
          var o = t.toUrl(e + ".css");
          // Same check on the load stage.
          if (require.name == "v") {
              _cssLoader.load(e, o, (function (e) {
                  i({})
              }), (function (e) {
                  "function" == typeof i.error && i.error("Could not find " + o + " or it was empty")
              }))
          }
          else {
              this._cssLoader.load(e, o, (function (e) {
                  i({})
              }), (function (e) {
                  "function" == typeof i.error && i.error("Could not find " + o + " or it was empty")
              }));
          }
      }
  }, e
}();