@blocknote/core 0.41.1 → 0.42.0

package/src/blocks/defaultBlockTypeGuards.ts

@@ -50,7 +50,7 @@ export function editorHasBlockWithType<
     if (typeof propSpec === "string") {
       if (
         editor.schema.blockSpecs[blockType].config.propSchema[propName]
-          .default &&
+          .default !== undefined &&
         typeof editor.schema.blockSpecs[blockType].config.propSchema[propName]
           .default !== propSpec
       ) {
@@ -58,7 +58,8 @@ export function editorHasBlockWithType<
       }
 
       if (
-        editor.schema.blockSpecs[blockType].config.propSchema[propName].type &&
+        editor.schema.blockSpecs[blockType].config.propSchema[propName].type !==
+          undefined &&
         editor.schema.blockSpecs[blockType].config.propSchema[propName].type !==
           propSpec
       ) {
@@ -97,23 +98,11 @@ export function editorHasBlockWithType<
           .values === "object" &&
         typeof propSpec.values === "object"
       ) {
-        if (
-          editor.schema.blockSpecs[blockType].config.propSchema[propName].values
-            .length !== propSpec.values.length
-        ) {
-          return false;
-        }
-
-        for (
-          let i = 0;
-          i <
-          editor.schema.blockSpecs[blockType].config.propSchema[propName].values
-            .length;
-          i++
-        ) {
+        for (const value of propSpec.values) {
           if (
-            editor.schema.blockSpecs[blockType].config.propSchema[propName]
-              .values[i] !== propSpec.values[i]
+            !editor.schema.blockSpecs[blockType].config.propSchema[
+              propName
+            ].values.includes(value)
           ) {
             return false;
           }

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

@@ -29,7 +29,9 @@ export abstract class YjsThreadStoreBase extends ThreadStore {
   public getThreads(): Map<string, ThreadData> {
     const threadMap = new Map<string, ThreadData>();
     this.threadsYMap.forEach((yThread, id) => {
-      threadMap.set(id, yMapToThread(yThread));
+      if (yThread instanceof Y.Map) {
+        threadMap.set(id, yMapToThread(yThread));
+      }
     });
     return threadMap;
   }

package/src/editor/BlockNoteEditor.test.ts

@@ -5,6 +5,7 @@ import {
 } from "../api/getBlockInfoFromPos.js";
 import { BlockNoteEditor } from "./BlockNoteEditor.js";
 import { BlockNoteExtension } from "./BlockNoteExtension.js";
+import * as Y from "yjs";
 
 /**
  * @vitest-environment jsdom
@@ -104,7 +105,7 @@ it("block prop types", () => {
   }
 });
 
-it("onMount and onUnmount", () => {
+it("onMount and onUnmount", async () => {
   const editor = BlockNoteEditor.create();
   let mounted = false;
   let unmounted = false;
@@ -118,6 +119,10 @@ it("onMount and onUnmount", () => {
   expect(mounted).toBe(true);
   expect(unmounted).toBe(false);
   editor.unmount();
+  // expect the unmount event to not have been triggered yet, since it waits 2 ticks
+  expect(unmounted).toBe(false);
+  // wait 3 ticks to ensure the unmount event is triggered
+  await new Promise((resolve) => setTimeout(resolve, 3));
   expect(mounted).toBe(true);
   expect(unmounted).toBe(true);
 });
@@ -142,3 +147,67 @@ it("onCreate event", () => {
   });
   expect(created).toBe(true);
 });
+
+it("sets an initial block id when using Y.js", async () => {
+  const doc = new Y.Doc();
+  const fragment = doc.getXmlFragment("doc");
+  let transactionCount = 0;
+  const editor = BlockNoteEditor.create({
+    collaboration: {
+      fragment,
+      user: { name: "Hello", color: "#FFFFFF" },
+      provider: null,
+    },
+    _tiptapOptions: {
+      onTransaction: () => {
+        transactionCount++;
+      },
+    },
+  });
+
+  editor.mount(document.createElement("div"));
+
+  expect(editor.prosemirrorState.doc.toJSON()).toMatchInlineSnapshot(`
+    {
+      "content": [
+        {
+          "content": [
+            {
+              "attrs": {
+                "id": "initialBlockId",
+              },
+              "content": [
+                {
+                  "attrs": {
+                    "backgroundColor": "default",
+                    "textAlignment": "left",
+                    "textColor": "default",
+                  },
+                  "type": "paragraph",
+                },
+              ],
+              "type": "blockContainer",
+            },
+          ],
+          "type": "blockGroup",
+        },
+      ],
+      "type": "doc",
+    }
+  `);
+  expect(transactionCount).toBe(1);
+  // The fragment should not be modified yet, since the editor's content is only the initial content
+  expect(fragment.toJSON()).toMatchInlineSnapshot(`""`);
+
+  editor.replaceBlocks(editor.document, [
+    {
+      type: "paragraph",
+      content: [{ text: "Hello", styles: {}, type: "text" }],
+    },
+  ]);
+  expect(transactionCount).toBe(2);
+  // Only after a real modification is made, will the fragment be updated
+  expect(fragment.toJSON()).toMatchInlineSnapshot(
+    `"<blockgroup><blockcontainer id="0"><paragraph backgroundColor="default" textAlignment="left" textColor="default">Hello</paragraph></blockcontainer><blockcontainer id="1"><paragraph backgroundColor="default" textAlignment="left" textColor="default"></paragraph></blockcontainer></blockgroup>"`,
+  );
+});

package/src/editor/BlockNoteEditor.ts

@@ -917,6 +917,25 @@ export class BlockNoteEditor<
       );
     }
 
+    // When y-prosemirror creates an empty document, the `blockContainer` node is created with an `id` of `null`.
+    // This causes the unique id extension to generate a new id for the initial block, which is not what we want
+    // Since it will be randomly generated & cause there to be more updates to the ydoc
+    // This is a hack to make it so that anytime `schema.doc.createAndFill` is called, the initial block id is already set to "initialBlockId"
+    let cache: Node | undefined = undefined;
+    const oldCreateAndFill = this.pmSchema.nodes.doc.createAndFill;
+    this.pmSchema.nodes.doc.createAndFill = (...args: any) => {
+      if (cache) {
+        return cache;
+      }
+      const ret = oldCreateAndFill.apply(this.pmSchema.nodes.doc, args)!;
+
+      // create a copy that we can mutate (otherwise, assigning attrs is not safe and corrupts the pm state)
+      const jsonNode = JSON.parse(JSON.stringify(ret.toJSON()));
+      jsonNode.content[0].content[0].attrs.id = "initialBlockId";
+
+      cache = Node.fromJSON(this.pmSchema, jsonNode);
+      return cache;
+    };
     this.pmSchema.cached.blockNoteEditor = this;
 
     // Initialize managers
@@ -1035,15 +1054,40 @@ export class BlockNoteEditor<
    * @warning Not needed to call manually when using React, use BlockNoteView to take care of mounting
    */
   public mount = (element: HTMLElement) => {
-    // TODO: Fix typing for this in a TipTap PR
-    this._tiptapEditor.mount({ mount: element } as any);
+    if (
+      // If the editor is scheduled for destruction, and
+      this.scheduledDestructionTimeout &&
+      // If the editor is being remounted to the same element as the one which is scheduled for destruction,
+      // then just cancel the destruction timeout
+      this.prosemirrorView.dom === element
+    ) {
+      clearTimeout(this.scheduledDestructionTimeout);
+      this.scheduledDestructionTimeout = undefined;
+      return;
+    }
+
+    this._tiptapEditor.mount({ mount: element });
   };
 
+  /**
+   * Timeout to schedule the {@link unmount}ing of the editor.
+   */
+  private scheduledDestructionTimeout:
+    | ReturnType<typeof setTimeout>
+    | undefined = undefined;
+
   /**
    * Unmount the editor from the DOM element it is bound to
    */
   public unmount = () => {
-    this._tiptapEditor.unmount();
+    // Due to how React's StrictMode works, it will `unmount` & `mount` the component twice in development mode.
+    // This can result in the editor being unmounted mid-rendering the content of node views.
+    // To avoid this, we only ever schedule the `unmount`ing of the editor when we've seen whether React "meant" to actually unmount the editor (i.e. not calling mount one tick later).
+    // So, we wait two ticks to see if the component is still meant to be unmounted, and if not, we actually unmount the editor.
+    this.scheduledDestructionTimeout = setTimeout(() => {
+      this._tiptapEditor.unmount();
+      this.scheduledDestructionTimeout = undefined;
+    }, 1);
   };
 
   /**
@@ -1082,6 +1126,13 @@ export class BlockNoteEditor<
     this.prosemirrorView.focus();
   }
 
+  public blur() {
+    if (this.headless) {
+      return;
+    }
+    this.prosemirrorView.dom.blur();
+  }
+
   public onUploadStart(callback: (blockId?: string) => void) {
     this.onUploadStartCallbacks.push(callback);
 
@@ -1482,7 +1533,7 @@ export class BlockNoteEditor<
    * @returns The blocks, serialized as an HTML string.
    */
   public blocksToFullHTML(
-    blocks: PartialBlock<BSchema, ISchema, SSchema>[],
+    blocks: PartialBlock<BSchema, ISchema, SSchema>[] = this.document,
   ): string {
     return this._exportManager.blocksToFullHTML(blocks);
   }

package/src/editor/managers/ExportManager.ts

@@ -54,7 +54,7 @@ export class ExportManager<
    * @returns The blocks, serialized as an HTML string.
    */
   public blocksToFullHTML(
-    blocks: PartialBlock<BSchema, ISchema, SSchema>[],
+    blocks: PartialBlock<BSchema, ISchema, SSchema>[] = this.editor.document,
   ): string {
     const exporter = createInternalHTMLSerializer(
       this.editor.pmSchema,

package/src/extensions/Collaboration/__snapshots__/fork-yjs-snap-editor-forked.json

@@ -8,7 +8,7 @@
         "type": "text",
       },
     ],
-    "id": "3",
+    "id": "2",
     "props": {
       "backgroundColor": "default",
       "textAlignment": "left",
@@ -19,7 +19,7 @@
   {
     "children": [],
     "content": [],
-    "id": "4",
+    "id": "3",
     "props": {
       "backgroundColor": "default",
       "textAlignment": "left",

package/src/extensions/Collaboration/__snapshots__/fork-yjs-snap-editor.json

@@ -8,7 +8,7 @@
         "type": "text",
       },
     ],
-    "id": "1",
+    "id": "0",
     "props": {
       "backgroundColor": "default",
       "textAlignment": "left",
@@ -19,7 +19,7 @@
   {
     "children": [],
     "content": [],
-    "id": "2",
+    "id": "1",
     "props": {
       "backgroundColor": "default",
       "textAlignment": "left",

package/src/extensions/Collaboration/__snapshots__/fork-yjs-snap-forked.html

@@ -1 +1 @@
-<blockgroup><blockcontainer id="3"><paragraph backgroundColor="default" textAlignment="left" textColor="default">Hello World</paragraph></blockcontainer><blockcontainer id="4"><paragraph backgroundColor="default" textAlignment="left" textColor="default"></paragraph></blockcontainer></blockgroup>
+<blockgroup><blockcontainer id="2"><paragraph backgroundColor="default" textAlignment="left" textColor="default">Hello World</paragraph></blockcontainer><blockcontainer id="3"><paragraph backgroundColor="default" textAlignment="left" textColor="default"></paragraph></blockcontainer></blockgroup>

package/src/extensions/Collaboration/__snapshots__/fork-yjs-snap.html

@@ -1 +1 @@
-<blockgroup><blockcontainer id="1"><paragraph backgroundColor="default" textAlignment="left" textColor="default">Hello</paragraph></blockcontainer><blockcontainer id="2"><paragraph backgroundColor="default" textAlignment="left" textColor="default"></paragraph></blockcontainer></blockgroup>
+<blockgroup><blockcontainer id="0"><paragraph backgroundColor="default" textAlignment="left" textColor="default">Hello</paragraph></blockcontainer><blockcontainer id="1"><paragraph backgroundColor="default" textAlignment="left" textColor="default"></paragraph></blockcontainer></blockgroup>

package/src/extensions/Collaboration/schemaMigration/SchemaMigrationPlugin.ts

@@ -1,5 +1,4 @@
 import { Plugin, PluginKey } from "@tiptap/pm/state";
-import { ySyncPluginKey } from "y-prosemirror";
 import * as Y from "yjs";
 
 import { BlockNoteExtension } from "../../../editor/BlockNoteExtension.js";
@@ -31,8 +30,12 @@ export class SchemaMigrationPlugin extends BlockNoteExtension {
           }
 
           if (
-            transactions.length !== 1 ||
-            !transactions[0].getMeta(ySyncPluginKey)
+            // If any of the transactions are not due to a yjs sync, we don't need to run the migration
+            !transactions.some((tr) => tr.getMeta("y-sync$")) ||
+            // If none of the transactions result in a document change, we don't need to run the migration
+            transactions.every((tr) => !tr.docChanged) ||
+            // If the fragment is still empty, we can't run the migration (since it has not yet been applied to the Y.Doc)
+            !fragment.firstChild
           ) {
             return undefined;
           }
@@ -44,6 +47,10 @@ export class SchemaMigrationPlugin extends BlockNoteExtension {
 
           this.migrationDone = true;
 
+          if (!tr.docChanged) {
+            return undefined;
+          }
+
           return tr;
         },
       }),

package/src/extensions/Collaboration/schemaMigration/migrationRules/moveColorAttributes.test.ts

@@ -0,0 +1,130 @@
+import { expect, it } from "vitest";
+import * as Y from "yjs";
+import { BlockNoteEditor } from "../../../../editor/BlockNoteEditor.js";
+import { moveColorAttributes } from "./moveColorAttributes.js";
+import { prosemirrorJSONToYXmlFragment } from "y-prosemirror";
+
+it("can move color attributes on older documents", async () => {
+  const doc = new Y.Doc();
+  const fragment = doc.getXmlFragment("doc");
+  const editor = BlockNoteEditor.create({
+    initialContent: [
+      {
+        type: "paragraph",
+        content: "Welcome to this demo!",
+      },
+    ],
+  });
+
+  // Because this was a previous schema, we are creating the YFragment manually
+  const blockGroup = new Y.XmlElement("blockGroup");
+  const el = new Y.XmlElement("blockContainer");
+  el.setAttribute("id", "0");
+  el.setAttribute("backgroundColor", "red");
+  el.setAttribute("textColor", "blue");
+  const para = new Y.XmlElement("paragraph");
+  para.setAttribute("textAlignment", "left");
+  para.insert(0, [new Y.XmlText("Welcome to this demo!")]);
+  el.insert(0, [para]);
+  blockGroup.insert(0, [el]);
+  fragment.insert(0, [blockGroup]);
+
+  // Note that the blockContainer has the color attributes, but the paragraph does not.
+  expect(fragment.toJSON()).toMatchInlineSnapshot(
+    `"<blockgroup><blockcontainer backgroundColor="red" id="0" textColor="blue"><paragraph textAlignment="left">Welcome to this demo!</paragraph></blockcontainer></blockgroup>"`,
+  );
+
+  const tr = editor.prosemirrorState.tr;
+  moveColorAttributes(fragment, tr);
+  // Note that the color attributes have been moved to the paragraph.
+  expect(JSON.stringify(tr.doc.toJSON())).toMatchInlineSnapshot(
+    `"{"type":"doc","content":[{"type":"blockGroup","content":[{"type":"blockContainer","attrs":{"id":"0"},"content":[{"type":"paragraph","attrs":{"backgroundColor":"red","textColor":"blue","textAlignment":"left"},"content":[{"type":"text","text":"Welcome to this demo!"}]}]}]}]}"`,
+  );
+});
+
+it("does not move color attributes on newer documents", async () => {
+  const doc = new Y.Doc();
+  const fragment = doc.getXmlFragment("doc");
+  const editor = BlockNoteEditor.create({
+    initialContent: [
+      {
+        type: "paragraph",
+        content: "Welcome to this demo!",
+        props: {
+          backgroundColor: "red",
+          textColor: "blue",
+          // Set to non-default value to ensure it is not overridden by the migration rule.
+          textAlignment: "right",
+        },
+      },
+    ],
+  });
+
+  prosemirrorJSONToYXmlFragment(
+    editor.pmSchema,
+    JSON.parse(JSON.stringify(editor.prosemirrorState.doc.toJSON())),
+    fragment,
+  );
+
+  expect(fragment.toJSON()).toMatchInlineSnapshot(
+    // The color attributes are on the paragraph, not the blockContainer.
+    `"<blockgroup><blockcontainer id="0"><paragraph backgroundColor="red" textAlignment="right" textColor="blue">Welcome to this demo!</paragraph></blockcontainer></blockgroup>"`,
+  );
+
+  const tr = editor.prosemirrorState.tr;
+  moveColorAttributes(fragment, tr);
+  // The document will be unchanged because the color attributes are already on the paragraph.
+  expect(tr.docChanged).toBe(false);
+});
+
+it("can move color attributes on older documents multiple times", async () => {
+  const doc = new Y.Doc();
+  const fragment = doc.getXmlFragment("doc");
+  const editor = BlockNoteEditor.create({
+    initialContent: [
+      {
+        type: "paragraph",
+        content: "Welcome to this demo!",
+      },
+    ],
+  });
+
+  // Because this was a previous schema, we are creating the YFragment manually
+  const blockGroup = new Y.XmlElement("blockGroup");
+  const el = new Y.XmlElement("blockContainer");
+  el.setAttribute("id", "0");
+  el.setAttribute("backgroundColor", "red");
+  el.setAttribute("textColor", "blue");
+  const para = new Y.XmlElement("paragraph");
+  para.setAttribute("textAlignment", "left");
+  para.insert(0, [new Y.XmlText("Welcome to this demo!")]);
+  el.insert(0, [para]);
+  blockGroup.insert(0, [el]);
+  fragment.insert(0, [blockGroup]);
+
+  // Note that the blockContainer has the color attributes, but the paragraph does not.
+  expect(fragment.toJSON()).toMatchInlineSnapshot(
+    `"<blockgroup><blockcontainer backgroundColor="red" id="0" textColor="blue"><paragraph textAlignment="left">Welcome to this demo!</paragraph></blockcontainer></blockgroup>"`,
+  );
+
+  const tr = editor.prosemirrorState.tr;
+  moveColorAttributes(fragment, tr);
+  // Note that the color attributes have been moved to the paragraph.
+  expect(JSON.stringify(tr.doc.toJSON())).toMatchInlineSnapshot(
+    `"{"type":"doc","content":[{"type":"blockGroup","content":[{"type":"blockContainer","attrs":{"id":"0"},"content":[{"type":"paragraph","attrs":{"backgroundColor":"red","textColor":"blue","textAlignment":"left"},"content":[{"type":"text","text":"Welcome to this demo!"}]}]}]}]}"`,
+  );
+
+  el.setAttribute("backgroundColor", "green");
+  el.setAttribute("textColor", "yellow");
+
+  expect(fragment.toJSON()).toMatchInlineSnapshot(
+    `"<blockgroup><blockcontainer backgroundColor="green" id="0" textColor="yellow"><paragraph textAlignment="left">Welcome to this demo!</paragraph></blockcontainer></blockgroup>"`,
+  );
+
+  const nextTr = editor.prosemirrorState.tr;
+  moveColorAttributes(fragment, nextTr);
+  // Note that the color attributes have been moved to the paragraph.
+  expect(JSON.stringify(nextTr.doc.toJSON())).toMatchInlineSnapshot(
+    `"{"type":"doc","content":[{"type":"blockGroup","content":[{"type":"blockContainer","attrs":{"id":"0"},"content":[{"type":"paragraph","attrs":{"backgroundColor":"green","textColor":"yellow","textAlignment":"left"},"content":[{"type":"text","text":"Welcome to this demo!"}]}]}]}]}"`,
+  );
+});

package/src/extensions/Collaboration/schemaMigration/migrationRules/moveColorAttributes.ts

@@ -23,14 +23,13 @@ const traverseElement = (
 export const moveColorAttributes: MigrationRule = (fragment, tr) => {
   // Stores necessary info for all `blockContainer` nodes which still have
   // `textColor` or `backgroundColor` attributes that need to be moved.
-  const targetBlockContainers: Record<
+  const targetBlockContainers: Map<
     string,
     {
-      textColor?: string;
-      backgroundColor?: string;
+      textColor: string | undefined;
+      backgroundColor: string | undefined;
     }
-  > = {};
-
+  > = new Map();
   // Finds all elements which still have `textColor` or `backgroundColor`
   // attributes in the current Yjs fragment.
   fragment.forEach((element) => {
@@ -40,39 +39,53 @@ export const moveColorAttributes: MigrationRule = (fragment, tr) => {
           element.nodeName === "blockContainer" &&
           element.hasAttribute("id")
         ) {
+          const textColor = element.getAttribute("textColor");
+          const backgroundColor = element.getAttribute("backgroundColor");
+
           const colors = {
-            textColor: element.getAttribute("textColor"),
-            backgroundColor: element.getAttribute("backgroundColor"),
+            textColor:
+              textColor === defaultProps.textColor.default
+                ? undefined
+                : textColor,
+            backgroundColor:
+              backgroundColor === defaultProps.backgroundColor.default
+                ? undefined
+                : backgroundColor,
           };
 
-          if (colors.textColor === defaultProps.textColor.default) {
-            colors.textColor = undefined;
-          }
-          if (colors.backgroundColor === defaultProps.backgroundColor.default) {
-            colors.backgroundColor = undefined;
-          }
-
           if (colors.textColor || colors.backgroundColor) {
-            targetBlockContainers[element.getAttribute("id")!] = colors;
+            targetBlockContainers.set(element.getAttribute("id")!, colors);
           }
         }
       });
     }
   });
 
+  if (targetBlockContainers.size === 0) {
+    return false;
+  }
+
   // Appends transactions to add the `textColor` and `backgroundColor`
   // attributes found on each `blockContainer` node to move them to the child
   // `blockContent` node.
   tr.doc.descendants((node, pos) => {
     if (
       node.type.name === "blockContainer" &&
-      targetBlockContainers[node.attrs.id]
+      targetBlockContainers.has(node.attrs.id)
     ) {
-      tr = tr.setNodeMarkup(
-        pos + 1,
-        undefined,
-        targetBlockContainers[node.attrs.id],
-      );
+      const el = tr.doc.nodeAt(pos + 1);
+      if (!el) {
+        throw new Error("No element found");
+      }
+
+      tr.setNodeMarkup(pos + 1, undefined, {
+        // preserve existing attributes
+        ...el.attrs,
+        // add the textColor and backgroundColor attributes
+        ...targetBlockContainers.get(node.attrs.id),
+      });
     }
   });
+
+  return true;
 };

package/src/extensions/Comments/CommentsPlugin.ts

@@ -12,6 +12,7 @@ import { BlockNoteEditor } from "../../editor/BlockNoteEditor.js";
 import { BlockNoteExtension } from "../../editor/BlockNoteExtension.js";
 import { CustomBlockNoteSchema } from "../../schema/schema.js";
 import { UserStore } from "./userstore/UserStore.js";
+import { getMarkRange } from "@tiptap/core";
 
 const PLUGIN_KEY = new PluginKey(`blocknote-comments`);
 const SET_SELECTED_THREAD_ID = "SET_SELECTED_THREAD_ID";
@@ -239,13 +240,42 @@ export class CommentsPlugin extends BlockNoteExtension {
               return;
             }
 
-            const commentMark = node.marks.find(
-              (mark) =>
-                mark.type.name === markType && mark.attrs.orphan !== true,
-            );
+            const markInSchema = view.state.schema.marks[markType];
+            const resolvedPos = view.state.doc.resolve(pos);
+            const commentMark = node.marks
+              .filter(
+                (mark) =>
+                  mark.type.name === markType && mark.attrs.orphan !== true,
+              )
+              .map((mark) => {
+                // get the range of this mark within the document, to check how close it is to the click position
+                const range = getMarkRange(
+                  resolvedPos,
+                  markInSchema,
+                  mark.attrs,
+                )!;
+
+                return {
+                  mark,
+                  // calculate how far the mark is from the click position
+                  distance:
+                    (Math.abs(range.from - pos) + Math.abs(range.to - pos)) / 2,
+                  // calculate the length of text the mark spans
+                  length: range.to - range.from,
+                };
+              })
+              // This allows us to not have comments which are unreachable because they are completely overlapped by other comments (issue #2073)
+              .sort((a, b) => {
+                // Find the mark which is closest to the click position
+                if (a.distance !== b.distance) {
+                  return a.distance - b.distance;
+                }
+                // Otherwise, select the mark which spans the smallest amount of text (most likely to be unreachable)
+                return a.length - b.length;
+              })[0]?.mark;
 
             const threadId = commentMark?.attrs.threadId as string | undefined;
-            self.selectThread(threadId, false);
+            self.selectThread(threadId);
           },
         },
       }),
@@ -268,7 +298,7 @@ export class CommentsPlugin extends BlockNoteExtension {
   /**
    * Set the selected thread
    */
-  public selectThread(threadId: string | undefined, scrollToThread = true) {
+  public selectThread(threadId: string | undefined) {
     if (this.selectedThreadId === threadId) {
       return;
     }
@@ -280,7 +310,7 @@ export class CommentsPlugin extends BlockNoteExtension {
       }),
     );
 
-    if (threadId && scrollToThread) {
+    if (threadId) {
       const selectedThreadPosition = this.threadPositions.get(threadId);
 
       if (!selectedThreadPosition) {