Add HocuspocusProvider compatibility

package.json

@@ -17,6 +17,7 @@
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
     "@fn-sphere/filter": "^1.3.0",
+    "@hocuspocus/provider": "^3.4.4",
     "@mui/material": "^7.3.8",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",

src/components/connect-dialog.tsx

@@ -1,4 +1,5 @@
 import { BlocksuiteWebsocketProvider } from "@/providers/blocksuite/provider";
+import { HocuspocusConnectProvider } from "@/providers/hocuspocus";
 import { WebSocketConnectProvider } from "@/providers/websocket";
 import { RocketIcon, TriangleAlert } from "lucide-react";
 import { useState } from "react";
@@ -31,6 +32,7 @@ import { Switch } from "./ui/switch";
 // See https://github.com/toeverything/blocksuite/blob/db6e9d278e4d821e1d5aea912681e8fd1692b39e/packages/playground/apps/default/utils/collection.ts#L66
 const BLOCKSUITE_PLAYGROUND_DOC_GUID = "collabPlayground";
 const BLOCKSUITE_NAME = "Blocksuite Playground";
+const HOCUSPOCUS_NAME = "hocuspocus";
 
 const dailyRoomSuffix = new Date().toLocaleDateString("en-CA");
 const createDailyRoom = (prefix: string) => `${prefix}-${dailyRoomSuffix}`;
@@ -92,6 +94,7 @@ export function ConnectDialog({
   const [room, setRoom] = useState(() => createDailyRoom("quill-demo"));
   const [provider, setProvider] = useState("Quill");
   const [needCreateNewDoc, setNeedCreateNewDoc] = useState(true);
+  const [token, setToken] = useState("");
   const officialDemo = officialDemos.find((demo) => demo.name === provider);
 
   return (
@@ -150,8 +153,8 @@ export function ConnectDialog({
                 <SelectItem value="liveblocks" disabled>
                   LiveblocksProvider (coming soon)
                 </SelectItem>
-                <SelectItem value="hocuspocus" disabled>
-                  HocuspocusProvider (coming soon)
+                <SelectItem value={HOCUSPOCUS_NAME}>
+                  HocuspocusProvider
                 </SelectItem>
               </SelectGroup>
             </SelectContent>
@@ -186,6 +189,22 @@ export function ConnectDialog({
           />
         </div>
 
+        {provider === HOCUSPOCUS_NAME && (
+          <div className="grid grid-cols-4 items-center gap-4">
+            <Label htmlFor="token-input" className="text-right">
+              Token
+            </Label>
+            <Input
+              id="token-input"
+              type="password"
+              className="col-span-3"
+              value={token}
+              onInput={(e) => setToken(e.currentTarget.value)}
+              placeholder="Optional authentication token"
+            />
+          </div>
+        )}
+
         <div className="grid grid-cols-4 items-center gap-4">
           <Switch
             id="create-new-doc"
@@ -252,6 +271,17 @@ export function ConnectDialog({
               return;
             }
 
+            if (provider === HOCUSPOCUS_NAME) {
+              const connectProvider = new HocuspocusConnectProvider(
+                url,
+                room,
+                doc,
+                token || undefined,
+              );
+              onConnect(connectProvider);
+              return;
+            }
+
             const connectProvider = new WebSocketConnectProvider(
               url,
               room,

src/providers/hocuspocus.ts

@@ -0,0 +1,44 @@
+import { HocuspocusProvider } from "@hocuspocus/provider";
+import * as Y from "yjs";
+import { ConnectProvider } from "./types";
+
+export class HocuspocusConnectProvider implements ConnectProvider {
+  doc: Y.Doc;
+  private provider: HocuspocusProvider;
+
+  constructor(
+    url: string,
+    name: string,
+    doc: Y.Doc,
+    token?: string | (() => string) | (() => Promise<string>),
+  ) {
+    this.doc = doc;
+    this.provider = new HocuspocusProvider({
+      url,
+      name,
+      document: doc,
+      token: token ?? null,
+    });
+  }
+
+  connect() {
+    this.provider.connect();
+  }
+
+  disconnect() {
+    this.provider.destroy();
+  }
+
+  async waitForSynced() {
+    if (this.provider.isSynced) {
+      return;
+    }
+    return new Promise<void>((resolve) => {
+      const handler = () => {
+        this.provider.off("synced", handler);
+        resolve();
+      };
+      this.provider.on("synced", handler);
+    });
+  }
+}