feat: Threads sidebar

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

@@ -1,11 +1,71 @@
 import { BlockNoteEditor, UnreachableCaseError } from "@blocknote/core";
 import { ThreadData } from "@blocknote/core/comments";
-import { useMemo } from "react";
+import React, { useCallback, useMemo } from "react";
 import { useBlockNoteEditor } from "../../hooks/useBlockNoteEditor.js";
 import { useUIPluginState } from "../../hooks/useUIPluginState.js";
 import { Thread } from "./Thread.js";
 import { useThreads } from "./useThreads.js";
 
+type ThreadItemProps = {
+  thread: ThreadData;
+  selectedThreadId?: string;
+  editor: BlockNoteEditor<any, any, any>;
+  maxCommentsBeforeCollapse?: number;
+  referenceText: string;
+};
+
+/**
+ * This component is memoized because it's a child of the ThreadsSidebar component,
+ * which rerenders on every document update.
+ */
+const ThreadItem = React.memo(
+  ({
+    thread,
+    selectedThreadId,
+    editor,
+    maxCommentsBeforeCollapse,
+    referenceText,
+  }: ThreadItemProps) => {
+    const onFocus = useCallback(() => {
+      editor.comments?.selectThread(thread.id);
+    }, [editor.comments, thread.id]);
+
+    const onBlur = useCallback(
+      (event: React.FocusEvent) => {
+        const targetElement =
+          event.target instanceof Node ? event.target : null;
+        const parentThreadElement =
+          event.relatedTarget instanceof Node
+            ? event.relatedTarget.closest(".bn-thread")
+            : null;
+
+        // When you focus the editor (reply composer), we don't want to unselect the thread
+        // This check prevents that. But we still want to unselect the thread when it gets blurred in all other cases
+        if (
+          !targetElement ||
+          !parentThreadElement ||
+          !parentThreadElement.contains(targetElement)
+        ) {
+          editor.comments?.selectThread(undefined);
+        }
+      },
+      [editor.comments]
+    );
+
+    return (
+      <Thread
+        thread={thread}
+        selected={thread.id === selectedThreadId}
+        referenceText={referenceText}
+        maxCommentsBeforeCollapse={maxCommentsBeforeCollapse}
+        onFocus={onFocus}
+        onBlur={onBlur}
+        tabIndex={0}
+      />
+    );
+  }
+);
+
 function sortThreads(
   threads: ThreadData[],
   sort: "position" | "recent-activity" | "oldest",
@@ -100,15 +160,18 @@ export function ThreadsSidebar(props: {
     throw new Error("Comments plugin not found");
   }
 
+  // Note: because "threadPositions" is part of the state,
+  // this will potentially trigger a re-render on every document update
+  // this means we need to be mindful of children memoization
   const state = useUIPluginState(
     editor.comments.onUpdate.bind(editor.comments)
   );
+
   const selectedThreadId = state?.selectedThreadId;
 
   const threads = useThreads(editor);
 
-  // memo needed?
-  const threadElements = useMemo(() => {
+  const filteredAndSortedThreads = useMemo(() => {
     const threadsArray = Array.from(threads.values());
 
     const sortedThreads = sortThreads(
@@ -117,66 +180,47 @@ export function ThreadsSidebar(props: {
       state?.threadPositions
     );
 
-    const openThreads: ThreadData[] = [];
-    const resolvedThreads: ThreadData[] = [];
+    const ret: Array<{ thread: ThreadData; referenceText: string }> = [];
 
     for (const thread of sortedThreads) {
       if (!thread.resolved) {
-        openThreads.push(thread);
+        if (props.filter === "open" || props.filter === "all") {
+          ret.push({
+            thread,
+            referenceText: getReferenceText(
+              editor,
+              state?.threadPositions.get(thread.id)
+            ),
+          });
+        }
       } else {
-        resolvedThreads.push(thread);
+        if (props.filter === "resolved" || props.filter === "all") {
+          ret.push({
+            thread,
+            referenceText: getReferenceText(
+              editor,
+              state?.threadPositions.get(thread.id)
+            ),
+          });
+        }
       }
     }
 
-    const threadDataToElement = (thread: ThreadData) => (
-      <Thread
-        key={thread.id}
-        thread={thread}
-        selected={thread.id === selectedThreadId}
-        referenceText={getReferenceText(
-          editor,
-          state?.threadPositions.get(thread.id)
-        )}
-        maxCommentsBeforeCollapse={props.maxCommentsBeforeCollapse}
-        onFocus={() => editor.comments?.selectThread(thread.id)}
-        onBlur={(event) => {
-          const targetElement =
-            event.target instanceof Node ? event.target : null;
-          const parentThreadElement =
-            event.relatedTarget instanceof Node
-              ? event.relatedTarget.closest(".bn-thread")
-              : null;
-
-          if (
-            !targetElement ||
-            !parentThreadElement ||
-            !parentThreadElement.contains(targetElement)
-          ) {
-            editor.comments?.selectThread(undefined);
-          }
-        }}
-        tabIndex={0}
-      />
-    );
-
-    if (props.filter === "open") {
-      return openThreads.map(threadDataToElement);
-    }
-
-    if (props.filter === "resolved") {
-      return resolvedThreads.map(threadDataToElement);
-    }
-
-    return [...openThreads, ...resolvedThreads].map(threadDataToElement);
-  }, [
-    editor,
-    props.filter,
-    props.sort,
-    props.maxCommentsBeforeCollapse,
-    selectedThreadId,
-    state?.threadPositions,
-    threads,
-  ]);
-
-  return <div className={"bn-threads-sidebar"}>{threadElements}</div>;
+    return ret;
+  }, [threads, state?.threadPositions, props.filter, props.sort, editor]);
+
+  return (
+    <div className={"bn-threads-sidebar"}>
+      {filteredAndSortedThreads.map((thread) => (
+        <ThreadItem
+          key={thread.thread.id}
+          thread={thread.thread}
+          selectedThreadId={selectedThreadId}
+          editor={editor}
+          referenceText={thread.referenceText}
+          maxCommentsBeforeCollapse={props.maxCommentsBeforeCollapse}
+        />
+      ))}
+    </div>
+  );
 }