From da07b62d926c07c9f82c49e4b3eae7afec779431 Mon Sep 17 00:00:00 2001 From: Matthew Lipski Date: Mon, 10 Nov 2025 16:07:17 +0100 Subject: [PATCH 1/3] Made comment marks get scrolled to on click instead of the floating thread view --- .../07-collaboration/05-comments/src/App.tsx | 2 ++ .../07-collaboration/05-comments/src/style.css | 7 +++++++ .../src/extensions/Comments/CommentsPlugin.ts | 11 ++++++----- packages/mantine/src/comments/Card.tsx | 17 +++-------------- 4 files changed, 18 insertions(+), 19 deletions(-) diff --git a/examples/07-collaboration/05-comments/src/App.tsx b/examples/07-collaboration/05-comments/src/App.tsx index bd11b2539e..fa141534ed 100644 --- a/examples/07-collaboration/05-comments/src/App.tsx +++ b/examples/07-collaboration/05-comments/src/App.tsx @@ -88,6 +88,7 @@ function Document() { ); return ( + //
+ // ); } diff --git a/examples/07-collaboration/05-comments/src/style.css b/examples/07-collaboration/05-comments/src/style.css index eaf9d337e9..ce31550fd3 100644 --- a/examples/07-collaboration/05-comments/src/style.css +++ b/examples/07-collaboration/05-comments/src/style.css @@ -45,3 +45,10 @@ max-height: 200px; overflow: auto !important; } + +/* .bn-editor, +.bn-container { + position: relative; + overflow: none !important; + height: fit-content; +} */ diff --git a/packages/core/src/extensions/Comments/CommentsPlugin.ts b/packages/core/src/extensions/Comments/CommentsPlugin.ts index a5d1e24b6d..9f88d9a81f 100644 --- a/packages/core/src/extensions/Comments/CommentsPlugin.ts +++ b/packages/core/src/extensions/Comments/CommentsPlugin.ts @@ -245,7 +245,7 @@ export class CommentsPlugin extends BlockNoteExtension { ); const threadId = commentMark?.attrs.threadId as string | undefined; - self.selectThread(threadId, false); + self.selectThread(threadId); }, }, }), @@ -289,10 +289,11 @@ export class CommentsPlugin extends BlockNoteExtension { // When a new thread is selected, scrolls the page to its reference text in // the editor. - ( - this.editor.prosemirrorView?.domAtPos(selectedThreadPosition.from) - .node as Element | undefined - )?.scrollIntoView({ + const node = this.editor.prosemirrorView?.domAtPos( + selectedThreadPosition.from, + ).node as Element | undefined; + + node?.scrollIntoView({ behavior: "smooth", block: "center", }); diff --git a/packages/mantine/src/comments/Card.tsx b/packages/mantine/src/comments/Card.tsx index 544aed1135..7a9c563ff3 100644 --- a/packages/mantine/src/comments/Card.tsx +++ b/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(null); - useEffect(() => { - if (selected) { - scrollRef.current?.scrollIntoView({ - behavior: "smooth", - block: "center", - }); - } - }, [selected]); - return ( {headerText && ( {headerText} From a5ccd28668131847ed3955eb1961ec3c8a580397 Mon Sep 17 00:00:00 2001 From: Matthew Lipski Date: Mon, 10 Nov 2025 16:36:12 +0100 Subject: [PATCH 2/3] Implemented PR feedback --- examples/07-collaboration/05-comments/src/App.tsx | 2 -- examples/07-collaboration/05-comments/src/style.css | 7 ------- .../core/src/extensions/Comments/CommentsPlugin.ts | 13 ++++++------- 3 files changed, 6 insertions(+), 16 deletions(-) diff --git a/examples/07-collaboration/05-comments/src/App.tsx b/examples/07-collaboration/05-comments/src/App.tsx index fa141534ed..bd11b2539e 100644 --- a/examples/07-collaboration/05-comments/src/App.tsx +++ b/examples/07-collaboration/05-comments/src/App.tsx @@ -88,7 +88,6 @@ function Document() { ); return ( - //
- // ); } diff --git a/examples/07-collaboration/05-comments/src/style.css b/examples/07-collaboration/05-comments/src/style.css index ce31550fd3..eaf9d337e9 100644 --- a/examples/07-collaboration/05-comments/src/style.css +++ b/examples/07-collaboration/05-comments/src/style.css @@ -45,10 +45,3 @@ max-height: 200px; overflow: auto !important; } - -/* .bn-editor, -.bn-container { - position: relative; - overflow: none !important; - height: fit-content; -} */ diff --git a/packages/core/src/extensions/Comments/CommentsPlugin.ts b/packages/core/src/extensions/Comments/CommentsPlugin.ts index 9f88d9a81f..a62dc8a489 100644 --- a/packages/core/src/extensions/Comments/CommentsPlugin.ts +++ b/packages/core/src/extensions/Comments/CommentsPlugin.ts @@ -268,7 +268,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 +280,7 @@ export class CommentsPlugin extends BlockNoteExtension { }), ); - if (threadId && scrollToThread) { + if (threadId) { const selectedThreadPosition = this.threadPositions.get(threadId); if (!selectedThreadPosition) { @@ -289,11 +289,10 @@ export class CommentsPlugin extends BlockNoteExtension { // When a new thread is selected, scrolls the page to its reference text in // the editor. - const node = this.editor.prosemirrorView?.domAtPos( - selectedThreadPosition.from, - ).node as Element | undefined; - - node?.scrollIntoView({ + ( + this.editor.prosemirrorView?.domAtPos(selectedThreadPosition.from) + .node as Element | undefined + )?.scrollIntoView({ behavior: "smooth", block: "center", }); From 8f82f5d6644001b961c245bb0024ee81b746d796 Mon Sep 17 00:00:00 2001 From: Matthew Lipski Date: Tue, 11 Nov 2025 10:48:13 +0100 Subject: [PATCH 3/3] Added `autoUpdate` to `FloatingThreadController` --- .../src/components/Comments/FloatingThreadController.tsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/packages/react/src/components/Comments/FloatingThreadController.tsx b/packages/react/src/components/Comments/FloatingThreadController.tsx index fc2bed356f..3df05ef6b0 100644 --- a/packages/react/src/components/Comments/FloatingThreadController.tsx +++ b/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, });