fixes

Author: YousefED

examples/07-collaboration/05-comments/src/style.css

@@ -1,4 +1,4 @@
-.comments-main-container {
+.comments-main-container.bn-container {
   align-items: center;
   background-color: var(--bn-colors-disabled-background);
   display: flex;

packages/core/src/comments/extension.ts

@@ -60,7 +60,12 @@ function getUpdatedThreadPositions(doc: Node, markType: string) {
 export const CommentsExtension = createExtension(
   ({
     editor,
-    options: { schema: commentEditorSchema, threadStore, resolveUsers },
+    options: {
+      schema: commentEditorSchema,
+      threadStore,
+      resolveUsers,
+      confirmBeforeDiscard = true,
+    },
   }: ExtensionOptions<{
     /**
      * The thread store implementation to use for storing and retrieving comment threads
@@ -76,6 +81,14 @@ export const CommentsExtension = createExtension(
      * A schema to use for the comment editor (which allows you to customize the blocks and styles that are available in the comment editor)
      */
     schema?: CustomBlockNoteSchema<any, any, any>;
+    /**
+     * Whether to ask the user for confirmation before discarding unsaved text
+     * in a comment composer (a new comment, a reply, or an in-progress edit)
+     * when it's dismissed (e.g. by clicking outside or pressing Escape).
+     *
+     * @default true
+     */
+    confirmBeforeDiscard?: boolean;
   }>) => {
     if (!resolveUsers) {
       throw new Error(
@@ -364,6 +377,7 @@ export const CommentsExtension = createExtension(
       },
       userStore,
       commentEditorSchema,
+      confirmBeforeDiscard,
     } as const;
   },
 );

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

@@ -17,6 +17,7 @@ import { useExtension, useExtensionState } from "../../hooks/useExtension.js";
 import { useDictionary } from "../../i18n/dictionary.js";
 import { FloatingUIOptions } from "../Popovers/FloatingUIOptions.js";
 import { PositionPopover } from "../Popovers/PositionPopover.js";
+import { confirmDiscardUnsavedComment } from "./confirmDiscardUnsavedComment.js";
 import { defaultCommentEditorSchema } from "./defaultCommentEditorSchema.js";
 import { FloatingComposer } from "./FloatingComposer.js";
 
@@ -86,8 +87,11 @@ export default function FloatingComposerController<
             // for confirmation before discarding it (e.g. when clicking
             // outside the composer). Otherwise the unsaved comment is lost.
             if (
-              !newCommentEditor.isEmpty &&
-              !window.confirm(dict.comments.discard_pending_comment)
+              !confirmDiscardUnsavedComment({
+                hasUnsavedContent: !newCommentEditor.isEmpty,
+                confirmBeforeDiscard: comments.confirmBeforeDiscard,
+                message: dict.comments.discard_pending_comment,
+              })
             ) {
               // Keep the composer open so the user can continue editing.
               return;

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

@@ -3,9 +3,13 @@ import { flip, offset, shift } from "@floating-ui/react";
 import { ComponentProps, FC, useMemo } from "react";
 
 import { useBlockNoteEditor } from "../../hooks/useBlockNoteEditor.js";
+import { useCreateBlockNote } from "../../hooks/useCreateBlockNote.js";
 import { useExtension, useExtensionState } from "../../hooks/useExtension.js";
+import { useDictionary } from "../../i18n/dictionary.js";
 import { FloatingUIOptions } from "../Popovers/FloatingUIOptions.js";
 import { PositionPopover } from "../Popovers/PositionPopover.js";
+import { confirmDiscardUnsavedComment } from "./confirmDiscardUnsavedComment.js";
+import { defaultCommentEditorSchema } from "./defaultCommentEditorSchema.js";
 import { Thread } from "./Thread.js";
 import { useThreads } from "./useThreads.js";
 
@@ -24,8 +28,10 @@ export default function FloatingThreadController(props: {
   portalElement?: HTMLElement | null;
 }) {
   const editor = useBlockNoteEditor<any, any, any>();
+  const dict = useDictionary();
 
   const comments = useExtension(CommentsExtension);
+
   const selectedThread = useExtensionState(CommentsExtension, {
     editor,
     selector: (state) =>
@@ -37,6 +43,24 @@ export default function FloatingThreadController(props: {
         : undefined,
   });
 
+  // The editor used to compose a reply. We own it here (rather than in
+  // `Thread`) so the dismiss handler below can check whether the user has typed
+  // anything before discarding it. A fresh editor is created for each thread,
+  // so it always starts empty.
+  const newCommentEditor = useCreateBlockNote(
+    {
+      trailingBlock: false,
+      dictionary: {
+        ...dict,
+        placeholders: {
+          emptyDocument: dict.placeholders.comment_reply,
+        },
+      },
+      schema: comments.commentEditorSchema || defaultCommentEditorSchema,
+    },
+    [selectedThread?.id],
+  );
+
   const threads = useThreads();
 
   const thread = useMemo(
@@ -52,11 +76,24 @@ export default function FloatingThreadController(props: {
         // Needed as hooks like `useDismiss` call `onOpenChange` to change the
         // open state.
         onOpenChange: (open, _event, reason) => {
-          if (reason === "escape-key") {
-            editor.focus();
-          }
-
           if (!open) {
+            // If the user has typed an unsaved reply, ask for confirmation
+            // before discarding it (e.g. when clicking outside the card).
+            // Otherwise the unsaved reply is lost.
+            if (
+              !confirmDiscardUnsavedComment({
+                hasUnsavedContent: !newCommentEditor.isEmpty,
+                confirmBeforeDiscard: comments.confirmBeforeDiscard,
+                message: dict.comments.discard_pending_comment,
+              })
+            ) {
+              // Keep the thread open so the user can finish their reply.
+              return;
+            }
+
+            if (reason === "escape-key") {
+              editor.focus();
+            }
             comments.selectThread(undefined);
           }
         },
@@ -75,7 +112,14 @@ export default function FloatingThreadController(props: {
         ...props.floatingUIOptions?.elementProps,
       },
     }),
-    [comments, editor, props.floatingUIOptions, selectedThread],
+    [
+      comments,
+      dict,
+      editor,
+      newCommentEditor,
+      props.floatingUIOptions,
+      selectedThread,
+    ],
   );
 
   // nice to have improvements:
@@ -89,7 +133,13 @@ export default function FloatingThreadController(props: {
       portalElement={props.portalElement}
       {...floatingUIOptions}
     >
-      {thread && <Component thread={thread} selected={true} />}
+      {thread && (
+        <Component
+          thread={thread}
+          selected={true}
+          newCommentEditor={newCommentEditor}
+        />
+      )}
     </PositionPopover>
   );
 }

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

@@ -1,4 +1,4 @@
-import { Dictionary, mergeCSSClasses } from "@blocknote/core";
+import { BlockNoteEditor, Dictionary, mergeCSSClasses } from "@blocknote/core";
 import { CommentsExtension } from "@blocknote/core/comments";
 import { ThreadData } from "@blocknote/core/comments";
 import { FocusEvent, memo, useCallback } from "react";
@@ -86,6 +86,12 @@ export type ThreadProps = {
    * The tab index for the thread.
    */
   tabIndex?: number;
+  /**
+   * The editor used to compose a reply. Provided by `FloatingThreadController`
+   * so it can check for unsaved text before discarding the floating card. When
+   * omitted (e.g. in the sidebar), the thread creates its own.
+   */
+  newCommentEditor?: BlockNoteEditor<any, any, any>;
 };
 
 /**
@@ -102,6 +108,7 @@ export const Thread = ({
   onFocus,
   onBlur,
   tabIndex,
+  newCommentEditor: providedNewCommentEditor,
 }: ThreadProps) => {
   // TODO: if REST API becomes popular, all interactions (click handlers) should implement a loading state and error state
   // (or optimistic local updates)
@@ -111,7 +118,7 @@ export const Thread = ({
 
   const comments = useExtension(CommentsExtension);
 
-  const newCommentEditor = useCreateBlockNote({
+  const ownNewCommentEditor = useCreateBlockNote({
     trailingBlock: false,
     dictionary: {
       ...dict,
@@ -122,6 +129,11 @@ export const Thread = ({
     schema: comments.commentEditorSchema || defaultCommentEditorSchema,
   });
 
+  // Use the editor provided by the controller (which owns the dismiss
+  // lifecycle and checks for unsaved text before discarding), falling back to
+  // our own when the thread is rendered standalone (e.g. in the sidebar).
+  const newCommentEditor = providedNewCommentEditor ?? ownNewCommentEditor;
+
   const onNewCommentSave = useCallback(async () => {
     await comments.threadStore.addComment({
       comment: {

packages/react/src/components/Comments/confirmDiscardUnsavedComment.ts

@@ -0,0 +1,39 @@
+/**
+ * Decides whether comment editor content may be discarded, prompting the user
+ * for confirmation when there is unsaved content and confirmation is enabled.
+ *
+ * Used by the comment composers (new comment, reply and edit) when they're
+ * dismissed (e.g. by clicking outside or pressing Escape), so the user doesn't
+ * silently lose text they've typed.
+ *
+ * @returns `true` when it's safe to discard (nothing unsaved, confirmation
+ * disabled, or the user accepted the prompt), and `false` when the user
+ * cancelled and the editor should stay open.
+ */
+export function confirmDiscardUnsavedComment(opts: {
+  /**
+   * Whether the editor(s) being dismissed currently hold unsaved content.
+   */
+  hasUnsavedContent: boolean;
+  /**
+   * Whether the confirmation prompt is enabled (see the `confirmBeforeDiscard`
+   * option on the comments extension).
+   */
+  confirmBeforeDiscard: boolean;
+  /**
+   * The message shown in the confirmation prompt.
+   */
+  message: string;
+  /**
+   * The confirm implementation. Defaults to `window.confirm`; injectable for
+   * testing.
+   */
+  confirm?: (message: string) => boolean;
+}): boolean {
+  if (!opts.hasUnsavedContent || !opts.confirmBeforeDiscard) {
+    return true;
+  }
+
+  const confirm = opts.confirm ?? ((message) => window.confirm(message));
+  return confirm(opts.message);
+}