[pull] main from liveblocks:main

.gitignore

@@ -35,8 +35,7 @@ playwright-report/
 .liveblocks/
 
 # Claude Code configs
-.claude/cache/
-.claude/*.local.json
+.claude/
 CLAUDE.local.md
 
 .mcp.json

CHANGELOG.md

@@ -1,5 +1,34 @@
 ## vNEXT (not yet released)
 
+## v3.15.0
+
+### `@liveblocks/react-ui`
+
+- Add various new ways to customize `Thread` and `Comment`:
+  - Comments in `Thread` can now be overridden or customized via the
+    `components` prop.
+  - New parts of `Comment` (content, avatar, author, and date) can now be
+    overridden or customized via the `children`, `additionalContent`, `avatar`,
+    `author`, and `date` props.
+- Fix `commentDropdownItems` prop on `Thread` not working as expected in some
+  cases.
+
+### `@liveblocks/react`
+
+- Each `createRoomContext()` invocation now creates its own isolated context to
+  allow nesting independent room contexts and their `RoomProvider` components.
+
+### `@liveblocks/react-blocknote`
+
+- Support newer BlockNote versions and bump the minimum required version to
+  v0.43.0. (Thanks @nperez0111 for the contribution!)
+
+### `@liveblocks/react-ui`, `@liveblocks/react-tiptap`, and `@liveblocks/react-lexical`
+
+- Improve how inline components passed to `components={{ ... }}` props are
+  handled by keeping them stable instead of re-mounting them on every render.
+- Move `@radix-ui/*` dependencies to the `radix-ui` mono package.
+
 ## v3.14.1
 
 ### `@liveblocks/react`

docs/pages/api-reference/liveblocks-react-blocknote.mdx

@@ -400,11 +400,14 @@ import { Thread } from "@liveblocks/react-ui";
 ```
 
 You can return any custom `ReactNode` here, including anything from a simple
-wrapper around `Thread`, up to a full custom `Thread` component built using our
+wrapper around [`Thread`][]. You can also use [`Thread`][]'s
+[`components`](/docs/api-reference/liveblocks-react-ui#Thread-components) prop
+to customize individual comments, or build a fully custom `Thread` component
+using our
 [Comment primitives](/docs/api-reference/liveblocks-react-ui#primitives-Comment).
 
 ```tsx
-import { Comment } from "@liveblocks/react-ui/primitives";
+import { Comment, Thread } from "@liveblocks/react-ui";
 
 <FloatingThreads
   editor={editor}
@@ -413,15 +416,18 @@ import { Comment } from "@liveblocks/react-ui/primitives";
   components={{
     Thread: (props) => (
       // +++
-      <div>
-        {props.thread.comments.map((comment) => (
-          <Comment.Body
-            key={comment.id}
-            body={comment.body}
-            components={/* ... */}
-          />
-        ))}
-      </div>
+      <Thread
+        {...props}
+        components={{
+          Comment: ({ comment, ...commentProps }) => (
+            <Comment
+              comment={comment}
+              {/* Customize `Comment`'s props */}
+              {...commentProps}
+            />
+          ),
+        }}
+      />
       // +++
     ),
   }}
@@ -656,11 +662,14 @@ import { Thread } from "@liveblocks/react-ui";
 ```
 
 You can return any custom `ReactNode` here, including anything from a simple
-wrapper around `Thread`, up to a full custom `Thread` component built using our
+wrapper around [`Thread`][]. You can also use [`Thread`][]'s
+[`components`](/docs/api-reference/liveblocks-react-ui#Thread-components) prop
+to customize individual comments, or build a fully custom `Thread` component
+using our
 [Comment primitives](/docs/api-reference/liveblocks-react-ui#primitives-Comment).
 
 ```tsx
-import { Comment } from "@liveblocks/react-ui/primitives";
+import { Comment, Thread } from "@liveblocks/react-ui";
 
 <AnchoredThreads
   editor={editor}
@@ -670,15 +679,18 @@ import { Comment } from "@liveblocks/react-ui/primitives";
   components={{
     Thread: (props) => (
       // +++
-      <div>
-        {props.thread.comments.map((comment) => (
-          <Comment.Body
-            key={comment.id}
-            body={comment.body}
-            components={/* ... */}
-          />
-        ))}
-      </div>
+      <Thread
+        {...props}
+        components={{
+          Comment: ({ comment, ...commentProps }) => (
+            <Comment
+              comment={comment}
+              {/* Customize `Comment`'s props */}
+              {...commentProps}
+            />
+          ),
+        }}
+      />
       // +++
     ),
   }}

docs/pages/api-reference/liveblocks-react-lexical.mdx

@@ -1362,27 +1362,33 @@ import { Thread } from "@liveblocks/react-ui";
 ```
 
 You can return any custom `ReactNode` here, including anything from a simple
-wrapper around `Thread`, up to a full custom `Thread` component built using our
+wrapper around [`Thread`][]. You can also use [`Thread`][]'s
+[`components`](/docs/api-reference/liveblocks-react-ui#Thread-components) prop
+to customize individual comments, or build a fully custom `Thread` component
+using our
 [Comment primitives](/docs/api-reference/liveblocks-react-ui#primitives-Comment).
 
 ```tsx
-import { Comment } from "@liveblocks/react-ui/primitives";
+import { Comment, Thread } from "@liveblocks/react-ui";
 
 <FloatingThreads
   threads={threads}
   className="my-floating-thread"
   components={{
     Thread: (props) => (
       // +++
-      <div>
-        {props.thread.comments.map((comment) => (
-          <Comment.Body
-            key={comment.id}
-            body={comment.body}
-            components={/* ... */}
-          />
-        ))}
-      </div>
+      <Thread
+        {...props}
+        components={{
+          Comment: ({ comment, ...commentProps }) => (
+            <Comment
+              comment={comment}
+              {/* Customize `Comment`'s props */}
+              {...commentProps}
+            />
+          ),
+        }}
+      />
       // +++
     ),
   }}
@@ -1615,11 +1621,14 @@ import { Thread } from "@liveblocks/react-ui";
 ```
 
 You can return any custom `ReactNode` here, including anything from a simple
-wrapper around `Thread`, up to a full custom `Thread` component built using our
+wrapper around [`Thread`][]. You can also use [`Thread`][]'s
+[`components`](/docs/api-reference/liveblocks-react-ui#Thread-components) prop
+to customize individual comments, or build a fully custom `Thread` component
+using our
 [Comment primitives](/docs/api-reference/liveblocks-react-ui#primitives-Comment).
 
 ```tsx
-import { Comment } from "@liveblocks/react-ui/primitives";
+import { Comment, Thread } from "@liveblocks/react-ui";
 
 <AnchoredThreads
   threads={threads}
@@ -1628,15 +1637,18 @@ import { Comment } from "@liveblocks/react-ui/primitives";
   components={{
     Thread: (props) => (
       // +++
-      <div>
-        {props.thread.comments.map((comment) => (
-          <Comment.Body
-            key={comment.id}
-            body={comment.body}
-            components={/* ... */}
-          />
-        ))}
-      </div>
+      <Thread
+        {...props}
+        components={{
+          Comment: ({ comment, ...commentProps }) => (
+            <Comment
+              comment={comment}
+              {/* Customize `Comment`'s props */}
+              {...commentProps}
+            />
+          ),
+        }}
+      />
       // +++
     ),
   }}

docs/pages/api-reference/liveblocks-react-tiptap.mdx

@@ -1300,11 +1300,14 @@ import { Thread } from "@liveblocks/react-ui";
 ```
 
 You can return any custom `ReactNode` here, including anything from a simple
-wrapper around `Thread`, up to a full custom `Thread` component built using our
+wrapper around [`Thread`][]. You can also use [`Thread`][]'s
+[`components`](/docs/api-reference/liveblocks-react-ui#Thread-components) prop
+to customize individual comments, or build a fully custom `Thread` component
+using our
 [Comment primitives](/docs/api-reference/liveblocks-react-ui#primitives-Comment).
 
 ```tsx
-import { Comment } from "@liveblocks/react-ui/primitives";
+import { Comment, Thread } from "@liveblocks/react-ui";
 
 <FloatingThreads
   editor={editor}
@@ -1313,15 +1316,18 @@ import { Comment } from "@liveblocks/react-ui/primitives";
   components={{
     Thread: (props) => (
       // +++
-      <div>
-        {props.thread.comments.map((comment) => (
-          <Comment.Body
-            key={comment.id}
-            body={comment.body}
-            components={/* ... */}
-          />
-        ))}
-      </div>
+      <Thread
+        {...props}
+        components={{
+          Comment: ({ comment, ...commentProps }) => (
+            <Comment
+              comment={comment}
+              {/* Customize `Comment`'s props */}
+              {...commentProps}
+            />
+          ),
+        }}
+      />
       // +++
     ),
   }}
@@ -1563,11 +1569,14 @@ import { Thread } from "@liveblocks/react-ui";
 ```
 
 You can return any custom `ReactNode` here, including anything from a simple
-wrapper around `Thread`, up to a full custom `Thread` component built using our
+wrapper around [`Thread`][]. You can also use [`Thread`][]'s
+[`components`](/docs/api-reference/liveblocks-react-ui#Thread-components) prop
+to customize individual comments, or build a fully custom `Thread` component
+using our
 [Comment primitives](/docs/api-reference/liveblocks-react-ui#primitives-Comment).
 
 ```tsx
-import { Comment } from "@liveblocks/react-ui/primitives";
+import { Comment, Thread } from "@liveblocks/react-ui";
 
 <AnchoredThreads
   editor={editor}
@@ -1577,15 +1586,18 @@ import { Comment } from "@liveblocks/react-ui/primitives";
   components={{
     Thread: (props) => (
       // +++
-      <div>
-        {props.thread.comments.map((comment) => (
-          <Comment.Body
-            key={comment.id}
-            body={comment.body}
-            components={/* ... */}
-          />
-        ))}
-      </div>
+      <Thread
+        {...props}
+        components={{
+          Comment: ({ comment, ...commentProps }) => (
+            <Comment
+              comment={comment}
+              {/* Customize `Comment`'s props */}
+              {...commentProps}
+            />
+          ),
+        }}
+      />
       // +++
     ),
   }}