fix: add bn-thread-orphaned CSS class to distinguish orphaned threads (#2737)

When a thread's referenced text is deleted from the document, the thread
becomes orphaned. This adds a `bn-thread-orphaned` CSS class to the
Thread component's card element so consumers can target these threads
with custom styling or behavior.

Closes #2735

Author: nperez0111

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

@@ -22,6 +22,12 @@ export type ThreadProps = {
    * editor for replies, and add a `selected` CSS class to the thread.
    */
   selected?: boolean;
+  /**
+   * A boolean flag for whether the thread is orphaned (i.e. the referenced text
+   * has been deleted from the document). Adds a `bn-thread-orphaned` CSS class
+   * to the thread.
+   */
+  orphaned?: boolean;
   /**
    * The text in the editor that the thread refers to. See the
    * [`ThreadsSidebar`](https://github.com/TypeCellOS/BlockNote/tree/main/packages/react/src/components/Comments/ThreadsSidebar.tsx#L137)
@@ -55,6 +61,7 @@ export type ThreadProps = {
 export const Thread = ({
   thread,
   selected,
+  orphaned,
   referenceText,
   maxCommentsBeforeCollapse,
   onFocus,
@@ -94,7 +101,7 @@ export const Thread = ({
 
   return (
     <Components.Comments.Card
-      className={"bn-thread"}
+      className={mergeCSSClasses("bn-thread", orphaned && "bn-thread-orphaned")}
       headerText={referenceText}
       onFocus={onFocus}
       onBlur={onBlur}

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

@@ -13,6 +13,7 @@ type ThreadItemProps = {
   editor: BlockNoteEditor<any, any, any>;
   maxCommentsBeforeCollapse?: number;
   referenceText: string;
+  orphaned?: boolean;
 };
 
 /**
@@ -25,6 +26,7 @@ const ThreadItem = React.memo(
     selectedThreadId,
     maxCommentsBeforeCollapse,
     referenceText,
+    orphaned,
   }: ThreadItemProps) => {
     const comments = useExtension(CommentsExtension);
 
@@ -76,6 +78,7 @@ const ThreadItem = React.memo(
       <Thread
         thread={thread}
         selected={thread.id === selectedThreadId}
+        orphaned={orphaned}
         referenceText={referenceText}
         maxCommentsBeforeCollapse={maxCommentsBeforeCollapse}
         onFocus={onFocus}
@@ -206,27 +209,30 @@ export function ThreadsSidebar(props: {
       threadPositions,
     );
 
-    const ret: Array<{ thread: ThreadData; referenceText: string }> = [];
+    const ret: Array<{
+      thread: ThreadData;
+      referenceText: string;
+      orphaned: boolean;
+    }> = [];
 
     for (const thread of sortedThreads) {
+      const threadPosition = threadPositions.get(thread.id);
+      const orphaned = threadPosition === undefined;
+
       if (!thread.resolved) {
         if (props.filter === "open" || props.filter === "all") {
           ret.push({
             thread,
-            referenceText: getReferenceText(
-              editor,
-              threadPositions.get(thread.id),
-            ),
+            referenceText: getReferenceText(editor, threadPosition),
+            orphaned,
           });
         }
       } else {
         if (props.filter === "resolved" || props.filter === "all") {
           ret.push({
             thread,
-            referenceText: getReferenceText(
-              editor,
-              threadPositions.get(thread.id),
-            ),
+            referenceText: getReferenceText(editor, threadPosition),
+            orphaned,
           });
         }
       }
@@ -244,6 +250,7 @@ export function ThreadsSidebar(props: {
           selectedThreadId={selectedThreadId}
           editor={editor}
           referenceText={thread.referenceText}
+          orphaned={thread.orphaned}
           maxCommentsBeforeCollapse={props.maxCommentsBeforeCollapse}
         />
       ))}