@blocknote/core 0.24.1 → 0.25.0

package/src/extensions/Comments/CommentMark.ts

@@ -0,0 +1,61 @@
+import { Mark, mergeAttributes } from "@tiptap/core";
+
+export const CommentMark = Mark.create({
+  name: "comment",
+  excludes: "",
+  inclusive: false,
+  keepOnSplit: true,
+  group: "blocknoteIgnore", // ignore in blocknote json
+
+  addAttributes() {
+    // Return an object with attribute configuration
+    return {
+      // orphans are marks that currently don't have an active thread. It could be
+      // that users have resolved the thread. Resolved threads by default are not shown in the document,
+      // but we need to keep the mark (positioning) data so we can still "revive" it when the thread is unresolved
+      // or we enter a "comments" view that includes resolved threads.
+      orphan: {
+        parseHTML: (element) => !!element.getAttribute("data-orphan"),
+        renderHTML: (attributes) => {
+          return (attributes as { orphan: boolean }).orphan
+            ? {
+                "data-orphan": "true",
+              }
+            : {};
+        },
+        default: false,
+      },
+      threadId: {
+        parseHTML: (element) => element.getAttribute("data-bn-thread-id"),
+        renderHTML: (attributes) => {
+          return {
+            "data-bn-thread-id": (attributes as { threadId: string }).threadId,
+          };
+        },
+        default: "",
+      },
+    };
+  },
+
+  renderHTML({ HTMLAttributes }: { HTMLAttributes: Record<string, any> }) {
+    return [
+      "span",
+      mergeAttributes(HTMLAttributes, {
+        class: "bn-thread-mark",
+      }),
+    ];
+  },
+
+  parseHTML() {
+    return [{ tag: "span.bn-thread-mark" }];
+  },
+
+  extendMarkSchema(extension) {
+    if (extension.name === "comment") {
+      return {
+        blocknoteIgnore: true,
+      };
+    }
+    return {};
+  },
+});

package/src/extensions/Comments/CommentsPlugin.ts

@@ -0,0 +1,301 @@
+import { Node } from "prosemirror-model";
+import { Plugin, PluginKey } from "prosemirror-state";
+import { Decoration, DecorationSet } from "prosemirror-view";
+import { getRelativeSelection, ySyncPluginKey } from "y-prosemirror";
+import type {
+  CommentBody,
+  ThreadData,
+  ThreadStore,
+  User,
+} from "../../comments/index.js";
+import { BlockNoteEditor } from "../../editor/BlockNoteEditor.js";
+import { EventEmitter } from "../../util/EventEmitter.js";
+import { UserStore } from "./userstore/UserStore.js";
+
+const PLUGIN_KEY = new PluginKey(`blocknote-comments`);
+const SET_SELECTED_THREAD_ID = "SET_SELECTED_THREAD_ID";
+
+type CommentsPluginState = {
+  /**
+   * Store the positions of all threads in the document.
+   * this can be used later to implement a floating sidebar
+   */
+  threadPositions: Map<string, { from: number; to: number }>;
+  /**
+   * Decorations to be rendered, specifically to indicate the selected thread
+   */
+  decorations: DecorationSet;
+};
+
+/**
+ * Get a new state (theadPositions and decorations) from the current document state
+ */
+function updateState(
+  doc: Node,
+  selectedThreadId: string | undefined,
+  markType: string
+): CommentsPluginState {
+  const threadPositions = new Map<string, { from: number; to: number }>();
+  const decorations: Decoration[] = [];
+  // find all thread marks and store their position + create decoration for selected thread
+  doc.descendants((node, pos) => {
+    node.marks.forEach((mark) => {
+      if (mark.type.name === markType) {
+        const thisThreadId = (mark.attrs as { threadId: string | undefined })
+          .threadId;
+        if (!thisThreadId) {
+          return;
+        }
+        const from = pos;
+        const to = from + node.nodeSize;
+
+        // FloatingThreads component uses "to" as the position, so always store the largest "to" found
+        // AnchoredThreads component uses "from" as the position, so always store the smallest "from" found
+        const currentPosition = threadPositions.get(thisThreadId) ?? {
+          from: Infinity,
+          to: 0,
+        };
+        threadPositions.set(thisThreadId, {
+          from: Math.min(from, currentPosition.from),
+          to: Math.max(to, currentPosition.to),
+        });
+
+        if (selectedThreadId === thisThreadId) {
+          decorations.push(
+            Decoration.inline(from, to, {
+              class: "bn-thread-mark-selected",
+            })
+          );
+        }
+      }
+    });
+  });
+  return {
+    decorations: DecorationSet.create(doc, decorations),
+    threadPositions,
+  };
+}
+
+export class CommentsPlugin extends EventEmitter<any> {
+  public readonly plugin: Plugin;
+  public readonly userStore: UserStore<User>;
+
+  private pendingComment = false;
+  private selectedThreadId: string | undefined;
+
+  private emitStateUpdate() {
+    this.emit("update", {
+      selectedThreadId: this.selectedThreadId,
+      pendingComment: this.pendingComment,
+    });
+  }
+
+  /**
+   * when a thread is resolved or deleted, we need to update the marks to reflect the new state
+   */
+  private updateMarksFromThreads = (threads: Map<string, ThreadData>) => {
+    const ttEditor = this.editor._tiptapEditor;
+
+    ttEditor.state.doc.descendants((node, pos) => {
+      node.marks.forEach((mark) => {
+        if (mark.type.name === this.markType) {
+          const markType = mark.type;
+          const markThreadId = mark.attrs.threadId;
+          const thread = threads.get(markThreadId);
+          const isOrphan = !!(!thread || thread.resolved || thread.deletedAt);
+
+          if (isOrphan !== mark.attrs.orphan) {
+            const { tr } = ttEditor.state;
+            const trimmedFrom = Math.max(pos, 0);
+            const trimmedTo = Math.min(
+              pos + node.nodeSize,
+              ttEditor.state.doc.content.size - 1
+            );
+            tr.removeMark(trimmedFrom, trimmedTo, markType);
+            tr.addMark(
+              trimmedFrom,
+              trimmedTo,
+              markType.create({
+                ...mark.attrs,
+                orphan: isOrphan,
+              })
+            );
+            ttEditor.dispatch(tr);
+
+            if (isOrphan && this.selectedThreadId === markThreadId) {
+              // unselect
+              this.selectedThreadId = undefined;
+              this.emitStateUpdate();
+            }
+          }
+        }
+      });
+    });
+  };
+
+  constructor(
+    private readonly editor: BlockNoteEditor<any, any, any>,
+    public readonly threadStore: ThreadStore,
+    private readonly markType: string
+  ) {
+    super();
+
+    if (!editor.resolveUsers) {
+      throw new Error("resolveUsers is required for comments");
+    }
+    this.userStore = new UserStore<User>(editor.resolveUsers);
+
+    // Note: Plugins are currently not destroyed when the editor is destroyed.
+    // We should unsubscribe from the threadStore when the editor is destroyed.
+    this.threadStore.subscribe(this.updateMarksFromThreads);
+
+    editor.onCreate(() => {
+      // Need to wait for TipTap editor state to be initialized
+      this.updateMarksFromThreads(this.threadStore.getThreads());
+      editor.onSelectionChange(() => {
+        if (this.pendingComment) {
+          this.pendingComment = false;
+          this.emitStateUpdate();
+        }
+      });
+    });
+
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
+    const self = this;
+
+    this.plugin = new Plugin<CommentsPluginState>({
+      key: PLUGIN_KEY,
+      state: {
+        init() {
+          return {
+            threadPositions: new Map<string, { from: number; to: number }>(),
+            decorations: DecorationSet.empty,
+          };
+        },
+        apply(tr, state) {
+          const action = tr.getMeta(PLUGIN_KEY);
+          if (!tr.docChanged && !action) {
+            return state;
+          }
+
+          // The doc changed or the selected thread changed
+          return updateState(tr.doc, self.selectedThreadId, markType);
+        },
+      },
+      props: {
+        decorations(state) {
+          return PLUGIN_KEY.getState(state)?.decorations ?? DecorationSet.empty;
+        },
+        /**
+         * Handle click on a thread mark and mark it as selected
+         */
+        handleClick: (view, pos, event) => {
+          if (event.button !== 0) {
+            return;
+          }
+
+          const node = view.state.doc.nodeAt(pos);
+
+          if (!node) {
+            self.selectThread(undefined);
+            return;
+          }
+
+          const commentMark = node.marks.find(
+            (mark) => mark.type.name === markType && mark.attrs.orphan !== true
+          );
+
+          const threadId = commentMark?.attrs.threadId as string | undefined;
+          self.selectThread(threadId);
+        },
+      },
+    });
+  }
+
+  /**
+   * Subscribe to state updates
+   */
+  public onUpdate(
+    callback: (state: {
+      pendingComment: boolean;
+      selectedThreadId: string | undefined;
+    }) => void
+  ) {
+    return this.on("update", callback);
+  }
+
+  /**
+   * Set the selected thread
+   */
+  public selectThread(threadId: string | undefined) {
+    if (this.selectedThreadId === threadId) {
+      return;
+    }
+    this.selectedThreadId = threadId;
+    this.emitStateUpdate();
+    this.editor.dispatch(
+      this.editor.prosemirrorView!.state.tr.setMeta(PLUGIN_KEY, {
+        name: SET_SELECTED_THREAD_ID,
+      })
+    );
+  }
+
+  /**
+   * Start a pending comment (e.g.: when clicking the "Add comment" button)
+   */
+  public startPendingComment() {
+    this.pendingComment = true;
+    this.emitStateUpdate();
+  }
+
+  /**
+   * Stop a pending comment (e.g.: user closes the comment composer)
+   */
+  public stopPendingComment() {
+    this.pendingComment = false;
+    this.emitStateUpdate();
+  }
+
+  /**
+   * Create a thread at the current selection
+   */
+  public async createThread(options: {
+    initialComment: {
+      body: CommentBody;
+      metadata?: any;
+    };
+    metadata?: any;
+  }) {
+    const thread = await this.threadStore.createThread(options);
+
+    if (this.threadStore.addThreadToDocument) {
+      // creating the mark is handled by the store
+      // this is useful if we don't have write-access to the document.
+      // We can then offload the responsibility of creating the mark to the server.
+      // (e.g.: RESTYjsThreadStore)
+      const view = this.editor.prosemirrorView!;
+      const pmSelection = view.state.selection;
+
+      const ystate = ySyncPluginKey.getState(view.state);
+
+      const selection = {
+        prosemirror: {
+          head: pmSelection.head,
+          anchor: pmSelection.anchor,
+        },
+        yjs: getRelativeSelection(ystate.binding, view.state),
+      };
+
+      await this.threadStore.addThreadToDocument({
+        threadId: thread.id,
+        selection,
+      });
+    } else {
+      // we create the mark directly in the document
+      this.editor._tiptapEditor.commands.setMark(this.markType, {
+        orphan: false,
+        threadId: thread.id,
+      });
+    }
+  }
+}

package/src/extensions/Comments/userstore/UserStore.ts

@@ -0,0 +1,72 @@
+import type { User } from "../../../comments/index.js";
+import { EventEmitter } from "../../../util/EventEmitter.js";
+
+/**
+ * The `UserStore` is used to retrieve and cache information about users.
+ *
+ * It does this by calling `resolveUsers` (which is user-defined in the Editor Options)
+ * for users that are not yet cached.
+ */
+export class UserStore<U extends User> extends EventEmitter<any> {
+  private userCache: Map<string, U> = new Map();
+
+  // avoid duplicate loads
+  private loadingUsers = new Set<string>();
+
+  public constructor(
+    private readonly resolveUsers: (userIds: string[]) => Promise<U[]>
+  ) {
+    super();
+  }
+
+  /**
+   * Load information about users based on an array of user ids.
+   */
+  public async loadUsers(userIds: string[]) {
+    const missingUsers = userIds.filter(
+      (id) => !this.userCache.has(id) && !this.loadingUsers.has(id)
+    );
+
+    if (missingUsers.length === 0) {
+      return;
+    }
+
+    for (const id of missingUsers) {
+      this.loadingUsers.add(id);
+    }
+
+    try {
+      const users = await this.resolveUsers(missingUsers);
+      for (const user of users) {
+        this.userCache.set(user.id, user);
+      }
+      this.emit("update", this.userCache);
+    } finally {
+      for (const id of missingUsers) {
+        // delete the users from the loading set
+        // on a next call to `loadUsers` we will either
+        // return the cached user or retry loading the user if the request failed failed
+        this.loadingUsers.delete(id);
+      }
+    }
+  }
+
+  /**
+   * Retrieve information about a user based on their id, if cached.
+   *
+   * The user will have to be loaded via `loadUsers` first
+   */
+  public getUser(userId: string): U | undefined {
+    return this.userCache.get(userId);
+  }
+
+  /**
+   * Subscribe to changes in the user store.
+   *
+   * @param cb - The callback to call when the user store changes.
+   * @returns A function to unsubscribe from the user store.
+   */
+  public subscribe(cb: (users: Map<string, U>) => void): () => void {
+    return this.on("update", cb);
+  }
+}

package/src/extensions/FormattingToolbar/FormattingToolbarPlugin.ts

@@ -25,7 +25,7 @@ export class FormattingToolbarView implements PluginView {
     state: EditorState;
     from: number;
     to: number;
-  }) => boolean = ({ state, from, to, view }) => {
+  }) => boolean = ({ state, from, to }) => {
     const { doc, selection } = state;
     const { empty } = selection;
 
@@ -43,8 +43,7 @@ export class FormattingToolbarView implements PluginView {
       return false;
     }
 
-    // check view.hasFocus so that the toolbar doesn't show up when the editor is not focused or when for example a code block is focused
-    return !(!view.hasFocus() || empty || isEmptyTextBlock);
+    return !(empty || isEmptyTextBlock);
   };
 
   constructor(
@@ -67,7 +66,7 @@ export class FormattingToolbarView implements PluginView {
     };
 
     pmView.dom.addEventListener("mousedown", this.viewMousedownHandler);
-    pmView.dom.addEventListener("mouseup", this.viewMouseupHandler);
+    pmView.root.addEventListener("mouseup", this.mouseupHandler);
     pmView.dom.addEventListener("dragstart", this.dragHandler);
     pmView.dom.addEventListener("dragover", this.dragHandler);
     pmView.dom.addEventListener("blur", this.blurHandler);
@@ -113,9 +112,11 @@ export class FormattingToolbarView implements PluginView {
     this.preventShow = true;
   };
 
-  viewMouseupHandler = () => {
-    this.preventShow = false;
-    setTimeout(() => this.update(this.pmView));
+  mouseupHandler = () => {
+    if (this.preventShow) {
+      this.preventShow = false;
+      setTimeout(() => this.update(this.pmView));
+    }
   };
 
   // For dragging the whole editor.
@@ -154,15 +155,20 @@ export class FormattingToolbarView implements PluginView {
     const from = Math.min(...ranges.map((range) => range.$from.pos));
     const to = Math.max(...ranges.map((range) => range.$to.pos));
 
-    const shouldShow = this.shouldShow?.({
+    const shouldShow = this.shouldShow({
       view,
       state,
       from,
       to,
     });
 
+    // in jsdom, Range.prototype.getClientRects is not implemented,
+    // this would cause `getSelectionBoundingBox` to fail
+    // we can just ignore jsdom for now and not show the toolbar
+    const jsdom = typeof Range.prototype.getClientRects === "undefined";
+
     // Checks if menu should be shown/updated.
-    if (!this.preventShow && (shouldShow || this.preventHide)) {
+    if (!this.preventShow && (shouldShow || this.preventHide) && !jsdom) {
       // Unlike other UI elements, we don't prevent the formatting toolbar from
       // showing when the editor is not editable. This is because some buttons,
       // e.g. the download file button, should still be accessible. Therefore,
@@ -193,7 +199,7 @@ export class FormattingToolbarView implements PluginView {
 
   destroy() {
     this.pmView.dom.removeEventListener("mousedown", this.viewMousedownHandler);
-    this.pmView.dom.removeEventListener("mouseup", this.viewMouseupHandler);
+    this.pmView.root.removeEventListener("mouseup", this.mouseupHandler);
     this.pmView.dom.removeEventListener("dragstart", this.dragHandler);
     this.pmView.dom.removeEventListener("dragover", this.dragHandler);
     this.pmView.dom.removeEventListener("blur", this.blurHandler);

package/src/extensions/LinkToolbar/LinkToolbarPlugin.ts

@@ -52,7 +52,7 @@ class LinkToolbarView implements PluginView {
 
     this.startMenuUpdateTimer = () => {
       this.menuUpdateTimer = setTimeout(() => {
-        this.update(this.pmView);
+        this.update(this.pmView, undefined, true);
       }, 250);
     };
 
@@ -190,7 +190,7 @@ class LinkToolbarView implements PluginView {
     }
   }
 
-  update(view: EditorView, oldState?: EditorState) {
+  update(view: EditorView, oldState?: EditorState, fromMouseOver = false) {
     const { state } = view;
 
     const isSame =
@@ -235,7 +235,7 @@ class LinkToolbarView implements PluginView {
       }
     }
 
-    if (this.mouseHoveredLinkMark) {
+    if (this.mouseHoveredLinkMark && fromMouseOver) {
       this.linkMark = this.mouseHoveredLinkMark;
       this.linkMarkRange = this.mouseHoveredLinkMarkRange;
     }

package/src/extensions/ShowSelection/ShowSelectionPlugin.ts

@@ -0,0 +1,52 @@
+import { Plugin, PluginKey } from "prosemirror-state";
+import { Decoration, DecorationSet } from "prosemirror-view";
+import { BlockNoteEditor } from "../../editor/BlockNoteEditor.js";
+
+const PLUGIN_KEY = new PluginKey(`blocknote-show-selection`);
+
+/**
+ * Plugin that shows adds a decoration around the current selection
+ * This can be used to highlight the current selection in the UI even when the
+ * text editor is not focused.
+ */
+export class ShowSelectionPlugin {
+  public readonly plugin: Plugin;
+  private enabled = false;
+
+  public constructor(private readonly editor: BlockNoteEditor<any, any, any>) {
+    this.plugin = new Plugin({
+      key: PLUGIN_KEY,
+      props: {
+        decorations: (state) => {
+          const { doc, selection } = state;
+
+          if (!this.enabled) {
+            return DecorationSet.empty;
+          }
+
+          const dec = Decoration.inline(selection.from, selection.to, {
+            "data-show-selection": "true",
+          });
+
+          return DecorationSet.create(doc, [dec]);
+        },
+      },
+    });
+  }
+
+  public setEnabled(enabled: boolean) {
+    if (this.enabled === enabled) {
+      return;
+    }
+
+    this.enabled = enabled;
+
+    this.editor.prosemirrorView?.dispatch(
+      this.editor.prosemirrorView?.state.tr.setMeta(PLUGIN_KEY, {})
+    );
+  }
+
+  public getEnabled() {
+    return this.enabled;
+  }
+}

package/src/extensions/SideMenu/SideMenuPlugin.ts

@@ -178,6 +178,11 @@ export class SideMenuView<
       this.onDrop as EventListener,
       true
     );
+    this.pmView.root.addEventListener(
+      "dragend",
+      this.onDragEnd as EventListener,
+      true
+    );
     initializeESMDependencies();
 
     // Shows or updates menu position whenever the cursor moves, if the menu isn't frozen.
@@ -300,8 +305,8 @@ export class SideMenuView<
       // a block from a different editor is being dropped, this causes some
       // issues that the code below fixes:
       if (!this.isDragOrigin && this.pmView.dom === parentEditorElement) {
-        // 1. Because the editor selection is unrelated to the dragged content,
-        // we don't want PM to delete its content. Therefore, we collapse the
+        // Because the editor selection is unrelated to the dragged content, we
+        // don't want PM to delete its content. Therefore, we collapse the
         // selection.
         this.pmView.dispatch(
           this.pmView.state.tr.setSelection(
@@ -312,8 +317,8 @@ export class SideMenuView<
           )
         );
       } else if (this.isDragOrigin && this.pmView.dom !== parentEditorElement) {
-        // 2. Because the editor from which the block originates doesn't get a
-        // drop event on it, PM doesn't delete its selected content. Therefore, we
+        // Because the editor from which the block originates doesn't get a drop
+        // event on it, PM doesn't delete its selected content. Therefore, we
         // need to do so manually.
         //
         // Note: Deleting the selected content from the editor from which the
@@ -328,11 +333,6 @@ export class SideMenuView<
           0
         );
       }
-      // 3. PM only clears `view.dragging` on the editor that the block was
-      // dropped, so we manually have to clear it on all the others. However,
-      // PM also needs to read `view.dragging` while handling the event, so we
-      // use a `setTimeout` to ensure it's only cleared after that.
-      setTimeout(() => (this.pmView.dragging = null), 0);
     }
 
     if (
@@ -360,6 +360,14 @@ export class SideMenuView<
     }
   };
 
+  onDragEnd = () => {
+    // When the user starts dragging a block, `view.dragging` is set on all
+    // BlockNote editors. However, when the drag ends, only the editor that the
+    // drag originated in automatically clears `view.dragging`. Therefore, we
+    // have to manually clear it on all editors.
+    this.pmView.dragging = null;
+  };
+
   /**
    * If a block is being dragged, ProseMirror usually gets the context of what's
    * being dragged from `view.dragging`, which is automatically set when a
@@ -580,6 +588,11 @@ export class SideMenuView<
       this.onDrop as EventListener,
       true
     );
+    this.pmView.root.removeEventListener(
+      "dragend",
+      this.onDragEnd as EventListener,
+      true
+    );
     this.pmView.root.removeEventListener(
       "keydown",
       this.onKeyDown as EventListener,