@blocknote/core 0.24.2 → 0.25.0

package/src/comments/threadstore/yjs/YjsThreadStore.ts

@@ -0,0 +1,340 @@
+import { v4 } from "uuid";
+import * as Y from "yjs";
+import { CommentBody, CommentData, ThreadData } from "../../types.js";
+import { ThreadStoreAuth } from "../ThreadStoreAuth.js";
+import { YjsThreadStoreBase } from "./YjsThreadStoreBase.js";
+import {
+  commentToYMap,
+  threadToYMap,
+  yMapToComment,
+  yMapToThread,
+} from "./yjsHelpers.js";
+
+/**
+ * This is a Yjs-based implementation of the ThreadStore interface.
+ *
+ * It reads and writes thread / comments information directly to the underlying Yjs Document.
+ *
+ * @important While this is the easiest to add to your app, there are two challenges:
+ * - The user needs to be able to write to the Yjs document to store the information.
+ *   So a user without write access to the Yjs document cannot leave any comments.
+ * - Even with write access, the operations are not secure. Unless your Yjs server
+ *   guards against malicious operations, it's technically possible for one user to make changes to another user's comments, etc.
+ *   (even though these options are not visible in the UI, a malicious user can make unauthorized changes to the underlying Yjs document)
+ */
+export class YjsThreadStore extends YjsThreadStoreBase {
+  constructor(
+    private readonly userId: string,
+    threadsYMap: Y.Map<any>,
+    auth: ThreadStoreAuth
+  ) {
+    super(threadsYMap, auth);
+  }
+
+  private transact = <T, R>(
+    fn: (options: T) => R
+  ): ((options: T) => Promise<R>) => {
+    return async (options: T) => {
+      return this.threadsYMap.doc!.transact(() => {
+        return fn(options);
+      });
+    };
+  };
+
+  public createThread = this.transact(
+    (options: {
+      initialComment: {
+        body: CommentBody;
+        metadata?: any;
+      };
+      metadata?: any;
+    }) => {
+      if (!this.auth.canCreateThread()) {
+        throw new Error("Not authorized");
+      }
+
+      const date = new Date();
+
+      const comment: CommentData = {
+        type: "comment",
+        id: v4(),
+        userId: this.userId,
+        createdAt: date,
+        updatedAt: date,
+        reactions: [],
+        metadata: options.initialComment.metadata,
+        body: options.initialComment.body,
+      };
+
+      const thread: ThreadData = {
+        type: "thread",
+        id: v4(),
+        createdAt: date,
+        updatedAt: date,
+        comments: [comment],
+        resolved: false,
+        metadata: options.metadata,
+      };
+
+      this.threadsYMap.set(thread.id, threadToYMap(thread));
+
+      return thread;
+    }
+  );
+
+  // YjsThreadStore does not support addThreadToDocument
+  public addThreadToDocument = undefined;
+
+  public addComment = this.transact(
+    (options: {
+      comment: {
+        body: CommentBody;
+        metadata?: any;
+      };
+      threadId: string;
+    }) => {
+      const yThread = this.threadsYMap.get(options.threadId);
+      if (!yThread) {
+        throw new Error("Thread not found");
+      }
+
+      if (!this.auth.canAddComment(yMapToThread(yThread))) {
+        throw new Error("Not authorized");
+      }
+
+      const date = new Date();
+      const comment: CommentData = {
+        type: "comment",
+        id: v4(),
+        userId: this.userId,
+        createdAt: date,
+        updatedAt: date,
+        deletedAt: undefined,
+        reactions: [],
+        metadata: options.comment.metadata,
+        body: options.comment.body,
+      };
+
+      (yThread.get("comments") as Y.Array<Y.Map<any>>).push([
+        commentToYMap(comment),
+      ]);
+
+      yThread.set("updatedAt", new Date().getTime());
+      return comment;
+    }
+  );
+
+  public updateComment = this.transact(
+    (options: {
+      comment: {
+        body: CommentBody;
+        metadata?: any;
+      };
+      threadId: string;
+      commentId: string;
+    }) => {
+      const yThread = this.threadsYMap.get(options.threadId);
+      if (!yThread) {
+        throw new Error("Thread not found");
+      }
+
+      const yCommentIndex = yArrayFindIndex(
+        yThread.get("comments"),
+        (comment) => comment.get("id") === options.commentId
+      );
+
+      if (yCommentIndex === -1) {
+        throw new Error("Comment not found");
+      }
+
+      const yComment = yThread.get("comments").get(yCommentIndex);
+
+      if (!this.auth.canUpdateComment(yMapToComment(yComment))) {
+        throw new Error("Not authorized");
+      }
+
+      yComment.set("body", options.comment.body);
+      yComment.set("updatedAt", new Date().getTime());
+      yComment.set("metadata", options.comment.metadata);
+    }
+  );
+
+  public deleteComment = this.transact(
+    (options: {
+      threadId: string;
+      commentId: string;
+      softDelete?: boolean;
+    }) => {
+      const yThread = this.threadsYMap.get(options.threadId);
+      if (!yThread) {
+        throw new Error("Thread not found");
+      }
+
+      const yCommentIndex = yArrayFindIndex(
+        yThread.get("comments"),
+        (comment) => comment.get("id") === options.commentId
+      );
+
+      if (yCommentIndex === -1) {
+        throw new Error("Comment not found");
+      }
+
+      const yComment = yThread.get("comments").get(yCommentIndex);
+
+      if (!this.auth.canDeleteComment(yMapToComment(yComment))) {
+        throw new Error("Not authorized");
+      }
+
+      if (yComment.get("deletedAt")) {
+        throw new Error("Comment already deleted");
+      }
+
+      if (options.softDelete) {
+        yComment.set("deletedAt", new Date().getTime());
+        yComment.set("body", undefined);
+      } else {
+        yThread.get("comments").delete(yCommentIndex);
+      }
+
+      if (
+        (yThread.get("comments") as Y.Array<any>)
+          .toArray()
+          .every((comment) => comment.get("deletedAt"))
+      ) {
+        // all comments deleted
+        if (options.softDelete) {
+          yThread.set("deletedAt", new Date().getTime());
+        } else {
+          this.threadsYMap.delete(options.threadId);
+        }
+      }
+
+      yThread.set("updatedAt", new Date().getTime());
+    }
+  );
+
+  public deleteThread = this.transact((options: { threadId: string }) => {
+    if (
+      !this.auth.canDeleteThread(
+        yMapToThread(this.threadsYMap.get(options.threadId))
+      )
+    ) {
+      throw new Error("Not authorized");
+    }
+
+    this.threadsYMap.delete(options.threadId);
+  });
+
+  public resolveThread = this.transact((options: { threadId: string }) => {
+    const yThread = this.threadsYMap.get(options.threadId);
+    if (!yThread) {
+      throw new Error("Thread not found");
+    }
+
+    if (!this.auth.canResolveThread(yMapToThread(yThread))) {
+      throw new Error("Not authorized");
+    }
+
+    yThread.set("resolved", true);
+    yThread.set("resolvedUpdatedAt", new Date().getTime());
+  });
+
+  public unresolveThread = this.transact((options: { threadId: string }) => {
+    const yThread = this.threadsYMap.get(options.threadId);
+    if (!yThread) {
+      throw new Error("Thread not found");
+    }
+
+    if (!this.auth.canUnresolveThread(yMapToThread(yThread))) {
+      throw new Error("Not authorized");
+    }
+
+    yThread.set("resolved", false);
+    yThread.set("resolvedUpdatedAt", new Date().getTime());
+  });
+
+  public addReaction = this.transact(
+    (options: { threadId: string; commentId: string; emoji: string }) => {
+      const yThread = this.threadsYMap.get(options.threadId);
+      if (!yThread) {
+        throw new Error("Thread not found");
+      }
+
+      const yCommentIndex = yArrayFindIndex(
+        yThread.get("comments"),
+        (comment) => comment.get("id") === options.commentId
+      );
+
+      if (yCommentIndex === -1) {
+        throw new Error("Comment not found");
+      }
+
+      const yComment = yThread.get("comments").get(yCommentIndex);
+
+      if (!this.auth.canAddReaction(yMapToComment(yComment), options.emoji)) {
+        throw new Error("Not authorized");
+      }
+
+      const date = new Date();
+
+      const key = `${this.userId}-${options.emoji}`;
+
+      const reactionsByUser = yComment.get("reactionsByUser");
+
+      if (reactionsByUser.has(key)) {
+        // already exists
+        return;
+      } else {
+        const reaction = new Y.Map();
+        reaction.set("emoji", options.emoji);
+        reaction.set("createdAt", date.getTime());
+        reaction.set("userId", this.userId);
+        reactionsByUser.set(key, reaction);
+      }
+    }
+  );
+
+  public deleteReaction = this.transact(
+    (options: { threadId: string; commentId: string; emoji: string }) => {
+      const yThread = this.threadsYMap.get(options.threadId);
+      if (!yThread) {
+        throw new Error("Thread not found");
+      }
+
+      const yCommentIndex = yArrayFindIndex(
+        yThread.get("comments"),
+        (comment) => comment.get("id") === options.commentId
+      );
+
+      if (yCommentIndex === -1) {
+        throw new Error("Comment not found");
+      }
+
+      const yComment = yThread.get("comments").get(yCommentIndex);
+
+      if (
+        !this.auth.canDeleteReaction(yMapToComment(yComment), options.emoji)
+      ) {
+        throw new Error("Not authorized");
+      }
+
+      const key = `${this.userId}-${options.emoji}`;
+
+      const reactionsByUser = yComment.get("reactionsByUser");
+
+      reactionsByUser.delete(key);
+    }
+  );
+}
+
+function yArrayFindIndex(
+  yArray: Y.Array<any>,
+  predicate: (item: any) => boolean
+) {
+  for (let i = 0; i < yArray.length; i++) {
+    if (predicate(yArray.get(i))) {
+      return i;
+    }
+  }
+  return -1;
+}

package/src/comments/threadstore/yjs/YjsThreadStoreBase.ts

@@ -0,0 +1,48 @@
+import * as Y from "yjs";
+import { ThreadData } from "../../types.js";
+import { ThreadStore } from "../ThreadStore.js";
+import { ThreadStoreAuth } from "../ThreadStoreAuth.js";
+import { yMapToThread } from "./yjsHelpers.js";
+
+/**
+ * This is an abstract class that only implements the READ methods required by the ThreadStore interface.
+ * The data is read from a Yjs Map.
+ */
+export abstract class YjsThreadStoreBase extends ThreadStore {
+  constructor(
+    protected readonly threadsYMap: Y.Map<any>,
+    auth: ThreadStoreAuth
+  ) {
+    super(auth);
+  }
+
+  // TODO: async / reactive interface?
+  public getThread(threadId: string) {
+    const yThread = this.threadsYMap.get(threadId);
+    if (!yThread) {
+      throw new Error("Thread not found");
+    }
+    const thread = yMapToThread(yThread);
+    return thread;
+  }
+
+  public getThreads(): Map<string, ThreadData> {
+    const threadMap = new Map<string, ThreadData>();
+    this.threadsYMap.forEach((yThread, id) => {
+      threadMap.set(id, yMapToThread(yThread));
+    });
+    return threadMap;
+  }
+
+  public subscribe(cb: (threads: Map<string, ThreadData>) => void) {
+    const observer = () => {
+      cb(this.getThreads());
+    };
+
+    this.threadsYMap.observeDeep(observer);
+
+    return () => {
+      this.threadsYMap.unobserveDeep(observer);
+    };
+  }
+}

package/src/comments/threadstore/yjs/yjsHelpers.ts

@@ -0,0 +1,121 @@
+import * as Y from "yjs";
+import { CommentData, CommentReactionData, ThreadData } from "../../types.js";
+
+export function commentToYMap(comment: CommentData) {
+  const yMap = new Y.Map<any>();
+  yMap.set("id", comment.id);
+  yMap.set("userId", comment.userId);
+  yMap.set("createdAt", comment.createdAt.getTime());
+  yMap.set("updatedAt", comment.updatedAt.getTime());
+  if (comment.deletedAt) {
+    yMap.set("deletedAt", comment.deletedAt.getTime());
+    yMap.set("body", undefined);
+  } else {
+    yMap.set("body", comment.body);
+  }
+  if (comment.reactions.length > 0) {
+    throw new Error("Reactions should be empty in commentToYMap");
+  }
+
+  /**
+   * Reactions are stored in a map keyed by {userId-emoji},
+   * this makes it easy to add / remove reactions and in a way that works local-first.
+   * The cost is that "reading" the reactions is a bit more complex (see yMapToReactions).
+   */
+  yMap.set("reactionsByUser", new Y.Map());
+  yMap.set("metadata", comment.metadata);
+
+  return yMap;
+}
+
+export function threadToYMap(thread: ThreadData) {
+  const yMap = new Y.Map();
+  yMap.set("id", thread.id);
+  yMap.set("createdAt", thread.createdAt.getTime());
+  yMap.set("updatedAt", thread.updatedAt.getTime());
+  const commentsArray = new Y.Array<Y.Map<any>>();
+
+  commentsArray.push(thread.comments.map((comment) => commentToYMap(comment)));
+
+  yMap.set("comments", commentsArray);
+  yMap.set("resolved", thread.resolved);
+  yMap.set("resolvedUpdatedAt", thread.resolvedUpdatedAt?.getTime());
+  yMap.set("metadata", thread.metadata);
+  return yMap;
+}
+
+type SingleUserCommentReactionData = {
+  emoji: string;
+  createdAt: Date;
+  userId: string;
+};
+
+export function yMapToReaction(
+  yMap: Y.Map<any>
+): SingleUserCommentReactionData {
+  return {
+    emoji: yMap.get("emoji"),
+    createdAt: new Date(yMap.get("createdAt")),
+    userId: yMap.get("userId"),
+  };
+}
+
+function yMapToReactions(yMap: Y.Map<any>): CommentReactionData[] {
+  const flatReactions = [...yMap.values()].map((reaction: Y.Map<any>) =>
+    yMapToReaction(reaction)
+  );
+  // combine reactions by the same emoji
+  return flatReactions.reduce(
+    (acc: CommentReactionData[], reaction: SingleUserCommentReactionData) => {
+      const existingReaction = acc.find((r) => r.emoji === reaction.emoji);
+      if (existingReaction) {
+        existingReaction.userIds.push(reaction.userId);
+        existingReaction.createdAt = new Date(
+          Math.min(
+            existingReaction.createdAt.getTime(),
+            reaction.createdAt.getTime()
+          )
+        );
+      } else {
+        acc.push({
+          emoji: reaction.emoji,
+          createdAt: reaction.createdAt,
+          userIds: [reaction.userId],
+        });
+      }
+      return acc;
+    },
+    [] as CommentReactionData[]
+  );
+}
+
+export function yMapToComment(yMap: Y.Map<any>): CommentData {
+  return {
+    type: "comment",
+    id: yMap.get("id"),
+    userId: yMap.get("userId"),
+    createdAt: new Date(yMap.get("createdAt")),
+    updatedAt: new Date(yMap.get("updatedAt")),
+    deletedAt: yMap.get("deletedAt")
+      ? new Date(yMap.get("deletedAt"))
+      : undefined,
+    reactions: yMapToReactions(yMap.get("reactionsByUser")),
+    metadata: yMap.get("metadata"),
+    body: yMap.get("body"),
+  };
+}
+
+export function yMapToThread(yMap: Y.Map<any>): ThreadData {
+  return {
+    type: "thread",
+    id: yMap.get("id"),
+    createdAt: new Date(yMap.get("createdAt")),
+    updatedAt: new Date(yMap.get("updatedAt")),
+    comments: ((yMap.get("comments") as Y.Array<Y.Map<any>>) || []).map(
+      (comment) => yMapToComment(comment)
+    ),
+    resolved: yMap.get("resolved"),
+    resolvedUpdatedAt: yMap.get("resolvedUpdatedAt"),
+    metadata: yMap.get("metadata"),
+  };
+}

package/src/comments/types.ts

@@ -0,0 +1,117 @@
+/**
+ * The body of a comment. This actually is a BlockNote document (array of blocks)
+ */
+export type CommentBody = any;
+
+/**
+ * A reaction to a comment.
+ */
+export type CommentReactionData = {
+  /**
+   * The emoji that was reacted to the comment.
+   */
+  emoji: string;
+  /**
+   * The date the first user reacted to the comment with this emoji.
+   */
+  createdAt: Date;
+  /**
+   * The user ids of the users that have reacted to the comment with this emoji
+   */
+  userIds: string[];
+};
+
+/**
+ * Information about a comment.
+ */
+export type CommentData = {
+  type: "comment";
+  /**
+   * The unique identifier for the comment.
+   */
+  id: string;
+  /**
+   * The user id of the author of the comment.
+   */
+  userId: string;
+  /**
+   * The date when the comment was created.
+   */
+  createdAt: Date;
+  /**
+   * The date when the comment was last updated.
+   */
+  updatedAt: Date;
+
+  /**
+   * The reactions (emoji reactions) to the comment.
+   */
+  reactions: CommentReactionData[];
+
+  /**
+   * You can use this store any additional information about the comment.
+   */
+  metadata: any;
+} & (
+  | {
+      /**
+       * The date when the comment was deleted. This applies only for "soft deletes",
+       * otherwise the comment is removed entirely.
+       */
+      deletedAt: Date;
+      /**
+       * The body of the comment is undefined if the comment is deleted.
+       */
+      body: undefined;
+    }
+  | {
+      /**
+       * In case of a non-deleted comment, this is not set
+       */
+      deletedAt?: never;
+      /**
+       * The body of the comment.
+       */
+      body: CommentBody;
+    }
+);
+
+/**
+ * Information about a thread. A thread holds a list of comments.
+ */
+export type ThreadData = {
+  type: "thread";
+  /**
+   * The unique identifier for the thread.
+   */
+  id: string;
+  /**
+   * The date when the thread was created.
+   */
+  createdAt: Date;
+  /**
+   * The date when the thread was last updated.
+   */
+  updatedAt: Date;
+  /**
+   * The comments in the thread.
+   */
+  comments: CommentData[];
+  /**
+   * Whether the thread has been marked as resolved.
+   */
+  resolved: boolean;
+  /**
+   * The date when the thread was marked as resolved.
+   */
+  resolvedUpdatedAt?: Date;
+  /**
+   * You can use this store any additional information about the thread.
+   */
+  metadata: any;
+  /**
+   * The date when the thread was deleted. (or undefined if it is not deleted)
+   * This only applies for "soft deletes", otherwise the thread is removed entirely.
+   */
+  deletedAt?: Date;
+};

package/src/editor/Block.css

@@ -499,23 +499,23 @@ NESTED BLOCKS
 
 /* TEXT ALIGNMENT */
 [data-text-alignment="left"] {
-  justify-content: flex-start;
-  text-align: left;
+  justify-content: flex-start !important;
+  text-align: left !important;
 }
 
 [data-text-alignment="center"] {
-  justify-content: center;
-  text-align: center;
+  justify-content: center !important;
+  text-align: center !important;
 }
 
 [data-text-alignment="right"] {
-  justify-content: flex-end;
-  text-align: right;
+  justify-content: flex-end !important;
+  text-align: right !important;
 }
 
 [data-text-alignment="justify"] {
-  justify-content: flex-start;
-  text-align: justify;
+  justify-content: flex-start !important;
+  text-align: justify !important;
 }
 
 .bn-block-column-list {
@@ -537,3 +537,11 @@ NESTED BLOCKS
 .bn-block-column:last-child {
   padding-right: 0;
 }
+
+.bn-thread-mark:not([data-orphan="true"]) {
+  background: rgba(255, 200, 0, 0.15);
+}
+
+.bn-thread-mark:not([data-orphan="true"]) .bn-thread-mark-selected {
+  background: rgba(255, 200, 0, 0.25);
+}