Add a more featureful editor for the input

[pchampin]

It would be nice to replace the input textarea with a more featureful editor such as Code Mirror, Ace or Monaco.

[vemonet]

I would love to see Monaco integrated. It might be a bit trickier to add, but more features, more familiar for most people, and good highlighting support

I recently had a quick try at adding Monaco to a client html/js: it is quite not well documented, but should not be too hard

Most documentation and discussions I found recommend to use require. Something like that:

require.config({ paths: { 'vs': 'https://unpkg.com/monaco-editor@latest/min/vs' }});
window.MonacoEnvironment = { getWorkerUrl: () => proxy };

let proxy = URL.createObjectURL(new Blob([`
	self.MonacoEnvironment = {
		baseUrl: 'https://unpkg.com/monaco-editor@latest/min/'
	};
	importScripts('https://unpkg.com/monaco-editor@latest/min/vs/base/worker/workerMain.js');
`], { type: 'text/javascript' }));

require(["vs/editor/editor.main"], function () {
	let editor = monaco.editor.create(document.getElementById('container'), {
		value: [
			'function x() {',
			'\tconsole.log("Hello world!");',
			'}'
		].join('\n'),
		language: 'javascript',
		theme: 'vs-dark'
	});
});

But whenever I use a require I am getting require not defined. I need to check how you are supposed to import this require in the browser, because all those examples where pretending like "it work out of the box in a HTML", but it doesn't.

That said, we can now import ESM modules inside HTML files (e.g. that's what I did with my nanopub wasm lib)

So we should not need to go through all these dirty require (this is is so ugly)

There is a nice implementation using monaco ESM module here: https://github.com/mapbox/mapbox-gl-js/blob/main/debug/standard-style.html#L68

So we can now import with import monacoLoader from 'https://cdn.jsdelivr.net/npm/@monaco-editor/loader@1.4.0/+esm'; (yeah modern JS! Not sure why they needed to add a + before esm, just to confuse people more and make sure we struggle figuring out import URLs?)

But when we try to run init the monacoLoader we get an error related to an e not defined.

[pchampin]

thanks a lot @vemonet for the help. We now have Monaco well integrated.