# Yjs で共同編集

> Yjs プロバイダー：共有文書とリアルタイムカーソルを private または presence チャンネルで送るので、Tiptap、BlockNote、ProseMirror、CodeMirror、Monaco、Quill が自前の y-websocket サーバーなしで動きます。

Source: https://hibira.io/ja/guides/y-hibira

Yjs プロバイダー：共有文書とリアルタイムカーソルを private または presence チャンネルで送るので、Tiptap、BlockNote、ProseMirror、CodeMirror、Monaco、Quill が自前の y-websocket サーバーなしで動きます。

Package: y-hibira

- 各クライアントは client events で互いに同期し、オフライン中の編集は再接続時にマージされます。
- 名前・カーソル・選択範囲を awareness で共有。presence チャンネルなら切断したメンバーはすぐに消えます。
- pusher-js でも Laravel Echo のチャンネルでも使え、送信レートの制限と大きな更新の分割を備えています。

## 1. インストール

```shell
npm install y-hibira yjs pusher-js
```

## 2. 使う

```js
import * as Y from 'yjs';
import Pusher from 'pusher-js';
import { HibiraProvider } from 'y-hibira';

const pusher = new Pusher('YOUR_APP_KEY', {
  cluster: 'hkg',
  wsHost: 'ws.hibira.io',
  channelAuthorization: { endpoint: '/broadcasting/auth' },
});

const doc = new Y.Doc();
const provider = new HibiraProvider(pusher, 'presence-doc-42', doc);
provider.awareness.setLocalStateField('user', { name: 'Alice', color: '#f97316' });
// Tiptap: Collaboration.configure({ document: doc }) and CollaborationCaret.configure({ provider })
```

## 始める前に

- アプリの設定で「Allow client events」をオンにしてください。文書の更新は client events でやり取りします。
- プライベートチャンネルとプレゼンスチャンネルには、pusher-js と同じく、アプリのシークレットで購読に署名する認可エンドポイントがバックエンドに必要です。
- サーバーは更新を中継するだけで保存しません。文書は自分で保存し（Y.encodeStateAsUpdate）、接続前に読み込んでください。

- [npm](https://www.npmjs.com/package/y-hibira)
- [GitHub](https://github.com/hibira-io/y-hibira)