# Yjs로 공동 편집

> Yjs 프로바이더: 공유 문서와 실시간 커서가 private 또는 presence 채널로 오가므로, Tiptap, BlockNote, ProseMirror, CodeMirror, Monaco, Quill을 y-websocket 서버 없이 쓸 수 있습니다.

Source: https://hibira.io/ko/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)