Description
I want to create a side-by-side live preview for a markup language with the Monaco editor, say something along https://markdown-it.github.io
I am able to automatically compile the HTML output whenever the content changes. But the problem is that if my markup compilation is slow (e.g. on a large document) that make the editor unresponsive.
Is there any Monaco-specific way to running the compilation on the background, while the editor remains responsive? I would then only start a compilation if one is not already ongoing.
Or do I just have to use Web Workers myself manually?
My problem can be reproduced with this dummy sample:
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>monaco editor</title>
<link rel="stylesheet" data-name="vs/editor/editor.main" href="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.20.0/min/vs/editor/editor.main.min.css">
</head>
<body>
<div id="container" style="height:400px;border:1px solid black;">
<script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.20.0/min/vs/loader.min.js"></script>
<script>
// Based on https://jsfiddle.net/developit/bwgkr6uq/ which just works but is based on unpkg.com.
// Provided by loader.min.js.
require.config({ paths: { 'vs': 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.20.0/min/vs' }});
window.MonacoEnvironment = { getWorkerUrl: () => proxy };
let proxy = URL.createObjectURL(new Blob([`
self.MonacoEnvironment = {
baseUrl: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.20.0/min'
};
importScripts('https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.20.0/min/vs/base/worker/workerMain.min.js');
`], { type: 'text/javascript' }));
require(["vs/editor/editor.main"], function () {
let editor = monaco.editor.create(document.getElementById('container'), {
value: `function x() {
console.log("Hello world!");
}`,
language: 'javascript',
theme: 'vs-dark'
});
editor.onDidChangeModelContent(function (e) {
convert_input();
});
function convert_input() {
for (let i = 0; i < 1000000000; i++) {}
console.error('converted');
}
});
</script>
</body>
</html>
If I type several characters in editor in quick succession, it just takes a really long time to see those characters show up on the editor UK.