Skip to content

How to automatically run a slow action like a compilation after every change in the Monaco editor without making the UI hang? #200

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
cirosantilli opened this issue Apr 18, 2025 · 0 comments
Open

How to automatically run a slow action like a compilation after every change in the Monaco editor without making the UI hang? #200

cirosantilli opened this issue Apr 18, 2025 · 0 comments
Labels
stack-exchange Posts that were deleted by in that stupid website that allows post deletion.

Comments

@cirosantilli
Copy link
Owner

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.
@cirosantilli cirosantilli added the stack-exchange Posts that were deleted by in that stupid website that allows post deletion. label Apr 18, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
stack-exchange Posts that were deleted by in that stupid website that allows post deletion.
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@cirosantilli