{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "examples-collaboration-example-docs",
  "title": "Collaboration Demo",
  "description": "Real-time Plate collaboration example with Yjs providers and remote cursors.",
  "files": [
    {
      "path": "../../content/docs/examples/collaboration-example.mdx",
      "content": "---\ntitle: Collaboration Demo\ndescription: Real-time Plate collaboration example with Yjs providers and remote cursors.\n---\n\nThis example shows a Plate editor bound to a shared Yjs document. It uses the\n`collaboration-demo` registry example with `YjsPlugin`, Hocuspocus, WebRTC, room\nstate, connection controls, and remote cursor rendering.\n\n## Demo\n\n<ComponentPreview name=\"collaboration-demo\" />\n\n## Source\n\nThe demo creates a room id in `localStorage`, gives each tab a random user name\nand cursor color, then initializes Yjs after mount.\n\n<ComponentSource name=\"collaboration-demo\" />\n\n## Runtime Shape\n\n| Piece | Owner | Notes |\n| --- | --- | --- |\n| `YjsPlugin` | `@platejs/yjs/react` | Binds Plate to a shared `Y.Doc`, provider list, awareness data, and cursor data. |\n| Hocuspocus provider | App infrastructure | The demo points to `ws://localhost:8888`; run your own server for durable collaboration. |\n| WebRTC provider | `y-webrtc` | The demo uses `ws://localhost:4444` in dev and `wss://signaling.yjs.dev` in production. |\n| Room state | Registry example | The room id is stored in `localStorage` and passed to every provider plus `yjs.init`. |\n| Connection controls | Registry example | The status bar reads `_providers` and `_isConnected`, then calls `connect` or `disconnect`. |\n\nSet `skipInitialization: true` on the editor. Yjs owns the initial document\nload, and `editor.getApi(YjsPlugin).yjs.init()` seeds the value only when the\nshared document is empty.\n\n## Remote Cursors\n\nThe demo renders remote selections with the registry `remote-cursor-overlay`\ncomponent.\n\n<ComponentSource name=\"remote-cursor-overlay\" />\n\n`RemoteCursorOverlay` waits for `_isSynced`, reads cursor positions with\n`useRemoteCursorOverlayPositions`, then paints selection rectangles and a named\ncaret.\n\n## Try It\n\nOpen the same demo in two tabs and use the same room id. Each tab receives a\ndifferent random user name and cursor color, so typing and selections are easy\nto distinguish.\n\n## Related\n\n- [Yjs](/docs/yjs) covers provider setup, lifecycle methods, and API reference.\n- [Remote Cursor Overlay](/docs/components/remote-cursor-overlay) covers the reusable cursor UI component.\n",
      "type": "registry:file",
      "target": "content/docs/plate/examples/collaboration-example.mdx"
    }
  ],
  "type": "registry:file"
}