Skip to content

yjs/y-monaco

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Folders and files

NameName
Last commit message
Last commit date

Latest commit

a2a37a3 Â· Jan 30, 2024

History

38 Commits
Jul 30, 2022
Jan 30, 2024
Jul 30, 2022
May 19, 2019
May 19, 2019
Jan 7, 2022
Nov 3, 2023
Nov 3, 2023
Jul 30, 2022
May 19, 2019
Jul 30, 2022
Jul 30, 2022

Repository files navigation

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