# y-monaco-hruthik

> Monaco editor bindings for Yjs

Latest version **1.0.0** (published 2022-03-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install y-monaco-hruthik
pnpm add y-monaco-hruthik
yarn add y-monaco-hruthik
bun add y-monaco-hruthik
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2022-03-16 |
| First published | 2022-03-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 13.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Kevin Jahns |
| Maintainers | iamyhr |
| Keywords | Yjs, Monaco |

## Links

- npm: https://www.npmjs.com/package/y-monaco-hruthik
- Repository: https://github.com/y-js/y-monaco
- Homepage: https://github.com/y-js/y-monaco#readme
- Issues: https://github.com/y-js/y-monaco/issues
- npm.io page: https://npm.io/package/y-monaco-hruthik

## Dependencies (1)

- [lib0](https://npm.io/package/lib0.md) ^0.2.43

## Recent versions

- 1.0.0 (latest) — 2022-03-16

## 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

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

## 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

---
_Source: https://npm.io/package/y-monaco-hruthik · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._