add comments

Author: YousefED

hocuspocus-server/src/auth.ts

@@ -1,4 +1,9 @@
-export function authInfoFromToken(token: string) {
+/**
+ * This is a fake implementation of authentication.
+ *
+ * It parses a token (like userid__READ-WRITE) and returns the userId and role.
+ */
+export function FAKE_authInfoFromToken(token: string) {
   const parts = token.split("__");
 
   if (parts.length !== 2) {

hocuspocus-server/src/index.ts

@@ -6,14 +6,15 @@ import { createNodeWebSocket } from "@hono/node-ws";
 import { Hono } from "hono";
 import { cors } from "hono/cors";
 import { createMiddleware } from "hono/factory";
-import { authInfoFromToken } from "./auth.js";
+import { FAKE_authInfoFromToken } from "./auth.js";
 import { threadsRouter } from "./threads.js";
 
+// Setup Hocuspocus server
 const hocuspocusServer = Server.configure({
   async onAuthenticate(data) {
     const { token } = data;
 
-    const authInfo = authInfoFromToken(token);
+    const authInfo = FAKE_authInfoFromToken(token);
 
     if (authInfo === "unauthorized") {
       throw new Error("Not authorized!");
@@ -33,12 +34,13 @@ const hocuspocusServer = Server.configure({
   // - alternatively, use a separate Y.Doc for the thread data that can only be written to via the thread API
 });
 
+// Setup Hono server
 const app = new Hono();
-
 app.use(cors());
 
 const { injectWebSocket, upgradeWebSocket } = createNodeWebSocket({ app });
 
+// We mount HocusPocus in the Hono server
 app.get(
   "/hocuspocus",
   upgradeWebSocket((c) => ({
@@ -48,8 +50,10 @@ app.get(
   }))
 );
 
+// Simple route for testing
 app.get("/", (c) => c.text("Hello World"));
 
+// Middleware so all requests to /documents/:documentId/ have the yjs document available
 const documentMiddleware = createMiddleware<{
   Variables: {
     document: Document;
@@ -69,14 +73,17 @@ const documentMiddleware = createMiddleware<{
 
 app.use("/documents/:documentId/*", documentMiddleware);
 
+// Mount the thread REST API
 app.route(
   "/documents/:documentId/threads",
   threadsRouter({ threadsMapKey: "threads" })
 );
 
+// Start server
 const server = serve({
   fetch: app.fetch,
   port: 8787,
 });
 
+// Setup WebSocket support (needed for HocusPocus)
 injectWebSocket(server);

hocuspocus-server/src/threads.ts

@@ -2,8 +2,11 @@ import { DefaultThreadStoreAuth, YjsThreadStore } from "@blocknote/core";
 import { Document } from "@hocuspocus/server";
 import { Hono, Next } from "hono";
 import { createMiddleware } from "hono/factory";
-import { authInfoFromToken } from "./auth.js";
+import { FAKE_authInfoFromToken } from "./auth.js";
 
+// Middleware that parses the Authorization header and sets the userId and role
+// based on the token.
+// NOTE: This is a fake implementation for demo purposes.
 const authMiddleware = createMiddleware<{
   Variables: {
     userId: string;
@@ -18,7 +21,7 @@ const authMiddleware = createMiddleware<{
     return c.json({ error: "Unauthorized" });
   }
 
-  const authInfo = authInfoFromToken(parts[1]);
+  const authInfo = FAKE_authInfoFromToken(parts[1]);
 
   if (authInfo === "unauthorized") {
     c.status(401);
@@ -32,6 +35,7 @@ const authMiddleware = createMiddleware<{
   return;
 });
 
+// Middleware that based on the auth info creates a YjsThreadStore and makes it available to the request
 const threadStoreMiddleware = (options: { threadsMapKey: string }) =>
   createMiddleware<{
     Variables: {
@@ -55,6 +59,7 @@ const threadStoreMiddleware = (options: { threadsMapKey: string }) =>
     await next();
   });
 
+// The REST API that handles thread operations and executes them using the threadStore
 export const threadsRouter = (options: { threadsMapKey: string }) => {
   const router = new Hono<{
     Variables: {
@@ -93,7 +98,7 @@ export const threadsRouter = (options: { threadsMapKey: string }) => {
     const json = await c.req.json();
     // TODO: you'd probably validate the request json here
 
-    const comment = await c.get("threadStore").updateComment({
+    await c.get("threadStore").updateComment({
       threadId: c.req.param("threadId"),
       commentId: c.req.param("commentId"),
       ...json,

next-app/components/Editor.tsx

@@ -6,36 +6,45 @@ import "@blocknote/mantine/style.css";
 import { useCreateBlockNote } from "@blocknote/react";
 import { HocuspocusProvider } from "@hocuspocus/provider";
 
+// Hardcoded settings for demo purposes
 const USER_ID = "user123";
 const USER_ROLE: "COMMENT-ONLY" | "READ-WRITE" = "READ-WRITE";
 const DOCUMENT_ID = "mydoc123";
 const TOKEN = `${USER_ID}__${USER_ROLE}`;
 
+// Setup Hocuspocus provider
 const provider = new HocuspocusProvider({
   url: "ws://localhost:8787/hocuspocus",
   token: TOKEN,
   name: DOCUMENT_ID,
 });
 
-// const threadStore = new YjsThreadStore(
-//   "123",
-//   provider.document.getMap("threads"),
-//   new DefaultThreadStoreAuth("123", "editor")
-// );
+// The thread store auth is used by the BlockNote interface to determine which actions are allowed
+// (and which elements should be shown)
+const threadStoreAuth = new DefaultThreadStoreAuth(
+  USER_ID,
+  USER_ROLE === "READ-WRITE" ? "editor" : "comment"
+);
 
-debugger;
+// set up the thread store using the REST API
 const threadStore = new RESTYjsThreadStore(
   `http://localhost:8787/documents/${DOCUMENT_ID}/threads`,
   {
     Authorization: `Bearer ${TOKEN}`,
   },
   provider.document.getMap("threads"),
-  new DefaultThreadStoreAuth(
-    USER_ID,
-    USER_ROLE === "READ-WRITE" ? "editor" : "comment"
-  )
+  threadStoreAuth
 );
 
+// Instead of using the REST API, you could also use a YjsThreadStore
+// however, this lacks good authentication on comment operations
+//
+// const threadStore = new YjsThreadStore(
+//   USER_ID,
+//   provider.document.getMap("threads"),
+//   threadStoreAuth
+// );
+
 // Our <Editor> component we can reuse later
 export default function Editor() {
   // Creates a new editor instance.