# แก้ไขเอกสารร่วมกันด้วย Yjs

> Yjs provider: เอกสารที่แชร์และเคอร์เซอร์สดส่งผ่านช่อง private หรือ presence ทำให้ Tiptap, BlockNote, ProseMirror, CodeMirror, Monaco และ Quill ใช้งานได้โดยไม่ต้องตั้งเซิร์ฟเวอร์ y-websocket เอง

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

Yjs provider: เอกสารที่แชร์และเคอร์เซอร์สดส่งผ่านช่อง 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
- แชนเนล private และ presence ต้องมี auth endpoint บนแบ็กเอนด์ที่ลงนามการสมัครรับด้วยซีเคร็ตของแอป เหมือนกับ pusher-js
- เซิร์ฟเวอร์ส่งต่อการอัปเดตแต่ไม่ได้เก็บไว้ บันทึกเอกสารเอง (Y.encodeStateAsUpdate) และโหลดก่อนเชื่อมต่อ

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