Как автоматически запускать медленное действие, такое как компиляция, после каждого изменения в редакторе Monaco, не заставляя пользовательский интерфейс зависать? - PullRequest
Новая
       25

Как автоматически запускать медленное действие, такое как компиляция, после каждого изменения в редакторе Monaco, не заставляя пользовательский интерфейс зависать?

0 голосов

Я хочу создать параллельный предварительный просмотр для языка разметки с помощью редактора Monaco, скажите что-нибудь вместе https://markdown-it.github.io

Я могу автоматически скомпилировать HTML выводить при изменении содержимого. Но проблема в том, что если моя компиляция разметки выполняется медленно (например, в большом документе), из-за чего редактор перестает отвечать на запросы. редактор остается отзывчивым? Тогда я бы начал компиляцию, только если она еще не выполняется.

Или мне просто нужно самому использовать Web Workers вручную?

Моя проблема может быть воспроизведена с помощью этого фиктивного образца:

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>

Если я набираю несколько символов в редакторе в быстрой последовательности, просто очень много времени уходит на то, чтобы увидеть эти символы в редакторе UK.

...