@blocknote/core 0.24.2 → 0.25.1

package/src/editor/editor.css

@@ -10,6 +10,15 @@
   --N40: #dfe1e6; /* Light neutral used for subtle borders and text on dark background */
 }
 
+.bn-comment-editor {
+  width: 100%;
+  padding: 0;
+}
+
+.bn-comment-editor .bn-editor {
+  padding: 0;
+}
+
 /*
 bn-root should be applied to all top-level elements
 
@@ -77,11 +86,11 @@ Tippy popups that are appended to document.body directly
   opacity: 0.001;
 }
 
-.collaboration-cursor__base {
+.bn-editor .bn-collaboration-cursor__base {
   position: relative;
 }
 
-.collaboration-cursor__caret {
+.bn-editor .bn-collaboration-cursor__base .bn-collaboration-cursor__caret {
   position: absolute;
   width: 2px;
   top: 1px;
@@ -89,7 +98,7 @@ Tippy popups that are appended to document.body directly
   left: -1px;
 }
 
-.collaboration-cursor__label {
+.bn-editor .bn-collaboration-cursor__base .bn-collaboration-cursor__label {
   pointer-events: none;
   border-radius: 0 1.5px 1.5px 0;
   font-size: 12px;
@@ -110,7 +119,9 @@ Tippy popups that are appended to document.body directly
   transition: all 0.2s;
 }
 
-.collaboration-cursor__base[data-active] .collaboration-cursor__label {
+.bn-editor
+  .bn-collaboration-cursor__base[data-active]
+  .bn-collaboration-cursor__label {
   color: #0d0d0d;
   max-height: 1.1rem;
   max-width: 20rem;
@@ -179,3 +190,11 @@ Tippy popups that are appended to document.body directly
 .prosemirror-dropcursor-vertical {
   transition-property: left, right;
 }
+
+/*
+For the ShowSelectionPlugin
+*/
+[data-show-selection] {
+  background-color: highlight;
+  padding: 2px 0;
+}

package/src/extensions/BackgroundColor/BackgroundColorExtension.ts

@@ -7,7 +7,7 @@ export const BackgroundColorExtension = Extension.create({
   addGlobalAttributes() {
     return [
       {
-        types: ["blockContainer"],
+        types: ["blockContainer", "tableCell", "tableHeader"],
         attributes: {
           backgroundColor: {
             default: defaultProps.backgroundColor.default,

package/src/extensions/Collaboration/createCollaborationExtensions.ts

@@ -65,16 +65,16 @@ export const createCollaborationExtensions = (collaboration: {
     const renderCursor = (user: { name: string; color: string }) => {
       const cursorElement = document.createElement("span");
 
-      cursorElement.classList.add("collaboration-cursor__base");
+      cursorElement.classList.add("bn-collaboration-cursor__base");
 
       const caretElement = document.createElement("span");
       caretElement.setAttribute("contentedEditable", "false");
-      caretElement.classList.add("collaboration-cursor__caret");
+      caretElement.classList.add("bn-collaboration-cursor__caret");
       caretElement.setAttribute("style", `background-color: ${user.color}`);
 
       const labelElement = document.createElement("span");
 
-      labelElement.classList.add("collaboration-cursor__label");
+      labelElement.classList.add("bn-collaboration-cursor__label");
       labelElement.setAttribute("style", `background-color: ${user.color}`);
       labelElement.insertBefore(document.createTextNode(user.name), null);
 
@@ -87,19 +87,10 @@ export const createCollaborationExtensions = (collaboration: {
       return cursorElement;
     };
 
-    const render = (user: { color: string; name: string }) => {
-      const clientState = [...awareness.getStates().entries()].find(
-        (state) => state[1].user === user
-      );
-
-      if (!clientState) {
-        throw new Error(
-          "Could not find client state for user, " + JSON.stringify(user)
-        );
-      }
-
-      const clientID = clientState[0];
-
+    const render = (
+      user: { color: string; name: string },
+      clientID: number
+    ) => {
       let cursorData = cursors.get(clientID);
 
       if (!cursorData) {
@@ -146,7 +137,7 @@ export const createCollaborationExtensions = (collaboration: {
     tiptapExtensions.push(
       CollaborationCursor.configure({
         user: collaboration.user,
-        render,
+        render: render as any, // tiptap type not compatible with latest y-prosemirror
         provider: collaboration.provider,
       })
     );

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(
@@ -156,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,

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;
+  }
+}