/
monaco.js
52 lines (46 loc) · 1.59 KB
/
monaco.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
/* eslint-env browser */
import * as Y from 'yjs'
import { WebsocketProvider } from 'y-websocket'
import { MonacoBinding } from 'y-monaco'
import * as monaco from 'monaco-editor'
// @ts-ignore
window.MonacoEnvironment = {
getWorkerUrl: function (moduleId, label) {
if (label === 'json') {
return '/monaco/dist/json.worker.bundle.js'
}
if (label === 'css') {
return '/monaco/dist/css.worker.bundle.js'
}
if (label === 'html') {
return '/monaco/dist/html.worker.bundle.js'
}
if (label === 'typescript' || label === 'javascript') {
return '/monaco/dist/ts.worker.bundle.js'
}
return '/monaco/dist/editor.worker.bundle.js'
}
}
window.addEventListener('load', () => {
const ydoc = new Y.Doc()
const provider = new WebsocketProvider('wss://demos.yjs.dev', 'monaco-demo', ydoc)
const ytext = ydoc.getText('monaco')
const editor = monaco.editor.create(/** @type {HTMLElement} */ (document.getElementById('monaco-editor')), {
value: '',
language: 'javascript',
theme: 'vs-dark'
})
const monacoBinding = new MonacoBinding(ytext, /** @type {monaco.editor.ITextModel} */ (editor.getModel()), new Set([editor]), provider.awareness)
const connectBtn = /** @type {HTMLElement} */ (document.getElementById('y-connect-btn'))
connectBtn.addEventListener('click', () => {
if (provider.shouldConnect) {
provider.disconnect()
connectBtn.textContent = 'Connect'
} else {
provider.connect()
connectBtn.textContent = 'Disconnect'
}
})
// @ts-ignore
window.example = { provider, ydoc, ytext, monacoBinding }
})