I need help to integrate the Monaco Editor

Just starting out? Need help? Post your questions and find answers here.
User avatar
Peter
Posts: 1086
Joined: Mon Feb 24, 2014 10:17 pm
Location: 127.0.0.1:9080
Contact:

I need help to integrate the Monaco Editor

Post by Peter »

Hello,

i need help to integrate the excellent Monaco Editor into SpiderBasic.

Since SpiderBasic uses the internal Dojo require() implementation, my knowledge is not sufficient to load it via require.

Loading the Editor via a WebGadget would not be a solution.

Who can help?

Thanks in advance & Greetings ... Peter
User avatar
Peter
Posts: 1086
Joined: Mon Feb 24, 2014 10:17 pm
Location: 127.0.0.1:9080
Contact:

Re: I need help to integrate the Monaco Editor

Post by Peter »

*Bump*

The topic is still relevant for me

I still want to use the Monaco Editor [1] in SpiderBasic.

However, this does not work as planned, because Monaco Editor uses its own loader (require), which collides with SpiderBasic - require.

Here [2] it is recommended to save the existing SB-require, load the Loader.js and then restore the SB-require.

But no matter what I tried so far: it does not work.

Maybe one of you has an idea?

[1]: https://microsoft.github.io/monaco-editor/
[2]: https://github.com/microsoft/monaco-edi ... index.html

Thanks in advance & Greetings ... Peter
User avatar
DanLJr
Posts: 58
Joined: Wed Jul 04, 2018 4:24 am
Location: USA

Re: I need help to integrate the Monaco Editor

Post by DanLJr »

According to this...

Code: Select all

<script>
		// Monaco uses a custom amd loader that over-rides node's require.
		// Keep a reference to node's require so we can restore it after executing the amd loader file.
		var nodeRequire = require;
	</script>
	<script src="node_modules/monaco-editor/min/vs/loader.js"></script>
	<script>
		// Save Monaco's amd require and restore Node's require
		var amdRequire = require;
		require = nodeRequire;
		require.nodeRequire = require;
	</script>
...found within...

https://github.com/microsoft/monaco-edi ... index.html

...your reasoning is sound, but obviously I can't see your implementation to comment on any particular logic errors.

Looking at the older/other referenced thread, could it be a path problem?

viewtopic.php?p=3701#p3708

Though, within...

Code: Select all

<script>
		amdRequire.config({
			baseUrl: 'node_modules/monaco-editor/min'
		});
		// workaround monaco-css not understanding the environment
		self.module = undefined;
		// workaround monaco-typescript not understanding the environment
		self.process.browser = true;
		amdRequire(['vs/editor/editor.main'], function() {
			var editor = monaco.editor.create(document.getElementById('container'), {
				value: [
					'function x() {',
					'\tconsole.log("Hello world!");',
					'}'
				].join('\n'),
				language: 'javascript'
			});
		});
	</script>
...you should be able to set the path, unless you CAN'T here for SB for some other reason and need to go about it differently? Some behind-the-scenes magic?

According to the samples, this should demonstrate setting the path, and does seem to match what Fred was referring to in the other thread:

Don't know if you've been fully down this road already.
-Dan L.
:: falling on my face a lot lately; learning even more because of it! ::
User avatar
Peter
Posts: 1086
Joined: Mon Feb 24, 2014 10:17 pm
Location: 127.0.0.1:9080
Contact:

Re: I need help to integrate the Monaco Editor

Post by Peter »

The problem has now been solved for me. I use an iFrame now to load the editor after all.

Greeting ... Peter
Post Reply