fix(comments): scrolling bug when clicking comment marks (#2165)

Author: matthewlipski

packages/core/src/extensions/Comments/CommentsPlugin.ts

@@ -275,7 +275,7 @@ export class CommentsPlugin extends BlockNoteExtension {
               })[0]?.mark;
 
             const threadId = commentMark?.attrs.threadId as string | undefined;
-            self.selectThread(threadId, false);
+            self.selectThread(threadId);
           },
         },
       }),
@@ -298,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;
     }
@@ -310,7 +310,7 @@ export class CommentsPlugin extends BlockNoteExtension {
       }),
     );
 
-    if (threadId && scrollToThread) {
+    if (threadId) {
       const selectedThreadPosition = this.threadPositions.get(threadId);
 
       if (!selectedThreadPosition) {

packages/mantine/src/comments/Card.tsx

@@ -1,11 +1,11 @@
 import { assertEmpty, mergeCSSClasses } from "@blocknote/core";
-import { ComponentProps, mergeRefs } from "@blocknote/react";
+import { ComponentProps } from "@blocknote/react";
 import {
   Card as MantineCard,
   Divider as MantineDivider,
   Text as MantineText,
 } from "@mantine/core";
-import { forwardRef, useEffect, useRef } from "react";
+import { forwardRef } from "react";
 
 export const Card = forwardRef<
   HTMLDivElement,
@@ -24,24 +24,13 @@ export const Card = forwardRef<
 
   assertEmpty(rest, false);
 
-  // Makes the card scroll into view when selected.
-  const scrollRef = useRef<HTMLDivElement>(null);
-  useEffect(() => {
-    if (selected) {
-      scrollRef.current?.scrollIntoView({
-        behavior: "smooth",
-        block: "center",
-      });
-    }
-  }, [selected]);
-
   return (
     <MantineCard
       className={mergeCSSClasses(className, selected ? "selected" : "")}
       onFocus={onFocus}
       onBlur={onBlur}
       tabIndex={tabIndex}
-      ref={mergeRefs([ref, scrollRef])}
+      ref={ref}
     >
       {headerText && (
         <MantineText className={"bn-header-text"}>{headerText}</MantineText>

packages/react/src/components/Comments/FloatingThreadController.tsx

@@ -6,7 +6,13 @@ import {
   InlineContentSchema,
   StyleSchema,
 } from "@blocknote/core";
-import { UseFloatingOptions, flip, offset, shift } from "@floating-ui/react";
+import {
+  UseFloatingOptions,
+  autoUpdate,
+  flip,
+  offset,
+  shift,
+} from "@floating-ui/react";
 import {
   ComponentProps,
   FC,
@@ -55,6 +61,7 @@ export const FloatingThreadController = <
           editor.focus();
         }
       },
+      whileElementsMounted: autoUpdate,
       ...props.floatingOptions,
     });