feat: setup project to use hocuspocus v3

Author: nperez0111

hocuspocus-server/package-lock.json

@@ -38,6 +38,7 @@
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^5.5.0",
     "@typescript-eslint/parser": "^5.5.0",
+    "@types/node": "^20.11.18",
     "eslint": "^8.10.0",
     "eslint-config-react-app": "^7.0.0",
     "eslint-plugin-import": "^2.31.0",

hocuspocus-server/package.json

@@ -1,5 +1,5 @@
 import { SQLite } from "@hocuspocus/extension-sqlite";
-import { Document, Server } from "@hocuspocus/server";
+import { type Document, Hocuspocus } from "@hocuspocus/server";
 
 import { serve } from "@hono/node-server";
 import { createNodeWebSocket } from "@hono/node-ws";
@@ -10,7 +10,8 @@ import { FAKE_authInfoFromToken } from "./auth.js";
 import { threadsRouter } from "./threads.js";
 import { RejectUnauthorized } from "./rejectUnauthorized.js";
 // Setup Hocuspocus server
-const hocuspocusServer = Server.configure({
+
+const hocuspocus = new Hocuspocus({
   async onAuthenticate(data) {
     const { token } = data;
 
@@ -19,15 +20,19 @@ const hocuspocusServer = Server.configure({
     if (authInfo === "unauthorized") {
       throw new Error("Not authorized!");
     }
-
-    data.connection.readOnly = authInfo.role === "COMMENT-ONLY";
+    
+    data.connectionConfig.readOnly = authInfo.role === "COMMENT-ONLY";
   },
 
   extensions: [
     new SQLite({
-      database: "db.sqlite",
+      database: ":memory:",
+    }),
+    // TODO we can actually just do the auth check in here, and not need the server to inject the mark or anything
+    new RejectUnauthorized("threads", (payload) => {
+      // eslint-disable-next-line no-console
+      console.warn("rejecting update to document", payload.documentName);
     }),
-    new RejectUnauthorized("threads"),
   ],
 
   // TODO: for good security, you'd want to make sure that either:
@@ -46,7 +51,7 @@ app.get(
   "/hocuspocus",
   upgradeWebSocket((c) => ({
     onOpen(_evt, ws) {
-      hocuspocusServer.handleConnection(ws.raw, c.req.raw);
+      hocuspocus.handleConnection(ws.raw, c.req.raw as any);
     },
   }))
 );
@@ -61,7 +66,7 @@ const documentMiddleware = createMiddleware<{
   };
 }>(async (c, next) => {
   const documentId = c.req.param("documentId");
-  const document = hocuspocusServer.documents.get(documentId!);
+  const document = hocuspocus.documents.get(documentId!);
 
   if (!document) {
     return c.json({ error: "Document not found" }, 404);
@@ -85,6 +90,12 @@ app.route(
 const server = serve({
   fetch: app.fetch,
   port: 8787,
+}, (info) => {
+  hocuspocus.hooks('onListen', {
+    instance: hocuspocus,
+    configuration: hocuspocus.configuration,
+    port: info.port
+  })
 });
 
 // Setup WebSocket support (needed for HocusPocus)

hocuspocus-server/src/index.ts

@@ -1,9 +1,6 @@
-import type { CloseEvent } from "@hocuspocus/common";
 import {
-  beforeHandleMessagePayload,
-  Extension,
-  IncomingMessage,
-  MessageType,
+  type beforeSyncPayload,
+  Extension
 } from "@hocuspocus/server";
 import * as syncProtocol from "y-protocols/sync";
 import * as Y from "yjs";
@@ -18,55 +15,7 @@ import * as Y from "yjs";
  * - if the update is accepted, we do nothing
  */
 export class RejectUnauthorized implements Extension {
-  constructor(private readonly threadsMapKey: string) {}
-  /**
-   * Extract the yjsUpdate from the incoming message
-   * @param message
-   * @returns
-   */
-  private getYUpdate(message: Uint8Array) {
-    /**
-     * The messages we are interested in are of the following format:
-     * [docIdLength: number, ...docIdString: string, hocuspocusMessageType: number,  ySyncMessageType: number, ...yjsUpdate: Uint8Array]
-     *
-     * We check that the hocuspocusMessageType is Sync and that the ySyncMessageType is messageYjsUpdate.
-     */
-    const incomingMessage = new IncomingMessage(message);
-    // Read the docID string, but don't use it
-    incomingMessage.readVarString();
-
-    // Read the hocuspocusMessageType
-    const hocuspocusMessageType = incomingMessage.readVarUint();
-    // If the hocuspocusMessageType is not Sync, we don't handle the message, since it is not an update
-    if (
-      !(
-        hocuspocusMessageType === MessageType.Sync ||
-        hocuspocusMessageType === MessageType.SyncReply
-      )
-    ) {
-      return;
-    }
-
-    // Read the ySyncMessageType
-    const ySyncMessageType = incomingMessage.readVarUint();
-
-    // If the ySyncMessageType is not a messageYjsUpdate or a messageYjsSyncStep2, we don't handle the message, since it is not an update
-    if (
-      !(
-        ySyncMessageType === syncProtocol.messageYjsUpdate ||
-        ySyncMessageType === syncProtocol.messageYjsSyncStep2
-      )
-    ) {
-      // not an update we want to handle
-      return;
-    }
-
-    // Read the yjsUpdate
-    const yUpdate = incomingMessage.readVarUint8Array();
-
-    return yUpdate;
-  }
-
+  constructor(private readonly threadsMapKey: string, private readonly onReject?: (payload: beforeSyncPayload) => void) {}
   /**
    * This function protects against changes to the restricted type.
    * It does this by:
@@ -112,29 +61,31 @@ export class RejectUnauthorized implements Extension {
     return didNeedToUndo;
   }
 
-  async beforeHandleMessage({
-    update,
-    document: ydoc,
-  }: beforeHandleMessagePayload) {
-    const yUpdate = this.getYUpdate(update);
-
-    if (!yUpdate) {
+  /**
+   * Before the document is synchronized, we check if the update modifies the restricted type.
+   * If it does, we reject the update by undoing it, and calling the onReject callback.
+   */
+  async beforeSync(data: beforeSyncPayload) {
+    // If the ySyncMessageType is not a messageYjsUpdate or a messageYjsSyncStep2, we don't handle the message, since it is not an update
+    if (
+      !(
+        data.type === syncProtocol.messageYjsUpdate ||
+        data.type === syncProtocol.messageYjsSyncStep2
+      )
+    ) {
+      // not an update we want to handle
       return;
     }
 
-    const protectedType = ydoc.getMap(this.threadsMapKey);
+    const protectedType = data.document.getMap(this.threadsMapKey);
     const didRollback = this.applyUpdateAndRollbackIfNeeded(
-      yUpdate,
-      ydoc,
+      data.payload,
+      data.document,
       protectedType
     );
 
     if (didRollback) {
-      // TODO, we can close their connection or just let them continue, since we've already undone their changes (and our changes are newer than theirs)
-      const error = {
-        reason: `Modification of a restricted type: ${this.threadsMapKey} was rejected`,
-      } satisfies Partial<CloseEvent>;
-      throw error;
+      this.onReject?.(data)
     }
   }
 }

hocuspocus-server/src/rejectUnauthorized.ts

@@ -10,9 +10,9 @@
   },
   "dependencies": {
     "@hocuspocus/provider": "^2.15.2",
-    "@blocknote/core": "^0.25.1",
-    "@blocknote/mantine": "^0.25.1",
-    "@blocknote/react": "^0.25.1",
+    "@blocknote/core": "^0.26.0",
+    "@blocknote/mantine": "^0.26.0",
+    "@blocknote/react": "^0.26.0",
     "next": "15.1.7",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"