Skip to content

Latest commit

 

History

History
65 lines (44 loc) · 2.43 KB

README.md

File metadata and controls

65 lines (44 loc) · 2.43 KB
Raw

y-monaco

Monaco Editor Binding for Yjs - Demo

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

constructor(Y.Text, monaco.editor.ITextModel, [Set<monaco.editor.IStandaloneCodeEditor>, [Awareness]])
If the editor(s) are specified, MonacoBinding adjusts selections when remote changes happen. Awareness is an implementation of the awareness protocol of y-protocols/awareness. If Awareness is specified, MonacoBinding renders remote selections.
destroy()
Unregister all event listeners. This is automatically called when the model is disposed.

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