feat(react): added usePluvDoc to access the root yjs doc (#540)

pluv-io · Dec 6, 2023 · 4c4b47f · 4c4b47f · vercel · Dec 6, 2023
1 parent 1126215
commit 4c4b47f
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 3 deletions.
diff --git a/.changeset/mighty-maps-lie.md b/.changeset/mighty-maps-lie.md
@@ -0,0 +1,11 @@
+---
+"@pluv/react": minor
+---
+
+Added `usePluvDoc` to access the root Yjs doc.
+
+```ts
+import type { Doc } from "yjs";
+
+const doc: Doc = usePluvDoc();
+```
diff --git a/packages/client/src/AbstractRoom.ts b/packages/client/src/AbstractRoom.ts
@@ -6,7 +6,7 @@ import type {
     IOLike,
     JsonObject,
 } from "@pluv/types";
-import type { AbstractType } from "yjs";
+import type { AbstractType, Doc } from "yjs";
 import type { EventNotifierSubscriptionCallback } from "./EventNotifier";
 import type { OtherNotifierSubscriptionCallback } from "./OtherNotifier";
 import type {
@@ -35,6 +35,8 @@ export abstract class AbstractRoom<
 
     public abstract canUndo(): boolean;
 
+    public abstract getDoc(): Doc;
+
     public abstract event<TEvent extends keyof InferIOOutput<TIO>>(
         event: TEvent,
         callback: EventNotifierSubscriptionCallback<TIO, TEvent>,

diff --git a/packages/client/src/MockedRoom.ts b/packages/client/src/MockedRoom.ts
@@ -6,7 +6,7 @@ import type {
     IOLike,
     JsonObject,
 } from "@pluv/types";
-import type { AbstractType } from "yjs";
+import type { AbstractType, Doc } from "yjs";
 import { AbstractRoom } from "./AbstractRoom";
 import { CrdtManager, CrdtManagerOptions } from "./CrdtManager";
 import { CrdtNotifier } from "./CrdtNotifier";
@@ -139,6 +139,10 @@ export class MockedRoom<
         );
     }
 
+    public getDoc(): Doc {
+        return this._crdtManager.doc.value;
+    }
+
     public getMyPresence = (): TPresence => {
         return this._usersManager.myPresence;
     };

diff --git a/packages/react/src/createRoomBundle.tsx b/packages/react/src/createRoomBundle.tsx
@@ -30,7 +30,7 @@ import {
     useEffect,
     useState,
 } from "react";
-import type { AbstractType } from "yjs";
+import type { AbstractType, Doc } from "yjs";
 import {
     identity,
     shallowArrayEqual,
@@ -104,6 +104,7 @@ export interface CreateRoomBundle<
         selector: (connection: WebSocketConnection) => T,
         options?: SubscriptionHookOptions<Id<T>>,
     ) => Id<T>;
+    usePluvDoc: () => Doc;
     usePluvEvent: <TType extends keyof InferIOOutput<TIO>>(
         type: TType,
         callback: (data: Id<IOEventMessage<TIO, TType>>) => void,
@@ -350,6 +351,12 @@ export const createRoomBundle = <
         );
     };
 
+    const usePluvDoc = () => {
+        const room = usePluvRoom();
+
+        return room.getDoc();
+    };
+
     const usePluvEvent = <TType extends keyof InferIOOutput<TIO>>(
         type: TType,
         callback: (data: Id<IOEventMessage<TIO, TType>>) => void,
@@ -574,6 +581,7 @@ export const createRoomBundle = <
         usePluvCanRedo,
         usePluvCanUndo,
         usePluvConnection,
+        usePluvDoc,
         usePluvEvent,
         usePluvMyPresence,
         usePluvMyself,