y-monaco
v0.1.6
Published
Monaco editor bindings for Yjs
Downloads
19,199
Readme
y-monaco
This binding maps a Y.Text to the Monaco editor (the editor that power VS Code).
Features
- Shared Cursors
Example
import * as Y from 'yjs'
import { WebsocketProvider } from 'y-websocket'
import { MonacoBinding } from 'y-monaco'
import * as monaco from 'monaco-editor'
const ydocument = new Y.Doc()
const provider = new WebsocketProvider(`${location.protocol === 'http:' ? 'ws:' : 'wss:'}//localhost:1234`, 'monaco', ydocument)
const type = ydocument.getText('monaco')
const editor = monaco.editor.create(document.getElementById('monaco-editor'), {
value: '', // MonacoBinding overwrites this value with the content of type
language: "javascript"
})
// Bind Yjs to the editor model
const monacoBinding = new MonacoBinding(type, editor.getModel(), new Set([editor]), provider.awareness)
Also look here for a working example.
API
import { MonacoBinding } from 'y-monaco'
const binding = new MonacoBinding(type, editor.getModel(), new Set([editor]), provider.awareness)
Class:MonacoBinding
Styling
You can use the following CSS classes to style remote cursor selections:
yRemoteSelection
yRemoteSelectionHead
See demo/index.html for example styles. Additionally, you can enable per-user styling (e.g.: different colors per user). The recommended approach for this is to listen to awareness.on("update", () => ...));
and inject custom styles for every available clientId. You can use the following classnames for this:
yRemoteSelection-${clientId}
yRemoteSelectionHead-${clientId
(where ${clientId}
is the Yjs clientId of the specific user).
License
The MIT License © Kevin Jahns