https://github.com/yjs/y-monaco

Monaco editor bindings for Yjs
https://github.com/yjs/y-monaco

Last synced: about 21 hours ago
JSON representation

Monaco editor bindings for Yjs

• Host: GitHub
• URL: https://github.com/yjs/y-monaco
• Owner: yjs
• License: mit
• Created: 2019-05-17T10:05:51.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2024-07-31T13:00:27.000Z (5 months ago)
• Last Synced: 2024-10-29T22:45:56.580Z (2 months ago)
• Language: JavaScript
• Size: 455 KB
• Stars: 166
• Watchers: 7
• Forks: 32
• Open Issues: 8
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-github-star - y-monaco
• awesome-frontend-graph-library - y-monaco

README

        
# y-monaco

> [Monaco](https://microsoft.github.io/monaco-editor/index.html) Editor Binding for [Yjs](https://github.com/y-js/yjs) - [Demo](https://demos.yjs.dev/monaco/monaco.html)

This binding maps a Y.Text to the Monaco editor (the editor that power VS Code).

### Features

* Shared Cursors

### Example

```js

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](https://github.com/y-js/yjs-demos/tree/master/monaco) for a working example.

## API

```js

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](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](./LICENSE) © Kevin Jahns