@liveblocks/react-ui 3.14.0-types2 → 3.15.0-thread1

package/dist/components/Comment.js

@@ -1,7 +1,7 @@
 "use client";
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { MENTION_CHARACTER, assertNever, Permission } from '@liveblocks/core';
-import { useAddRoomCommentReaction, useRemoveRoomCommentReaction, useRoomAttachmentUrl, useMarkRoomThreadAsRead, useDeleteRoomComment, useEditRoomComment, useRoomPermissions } from '@liveblocks/react/_private';
+import { useAddRoomCommentReaction, useRemoveRoomCommentReaction, useRoomAttachmentUrl, useDeleteRoomComment, useEditRoomComment, useRoomPermissions } from '@liveblocks/react/_private';
 import * as TogglePrimitive from '@radix-ui/react-toggle';
 import { forwardRef, useMemo, useCallback, useRef, useState, useEffect } from 'react';
 import { useComponents, ComponentsProvider } from '../components.js';
@@ -20,8 +20,6 @@ import { cn } from '../utils/cn.js';
 import { download } from '../utils/download.js';
 import { useIsGroupMentionMember } from '../utils/use-group-mention.js';
 import { useRefs } from '../utils/use-refs.js';
-import { useIntersectionCallback } from '../utils/use-visible.js';
-import { useWindowFocus } from '../utils/use-window-focus.js';
 import { Composer } from './Composer.js';
 import { MediaAttachment, FileAttachment, separateMediaAttachments } from './internal/Attachment.js';
 import { Avatar } from './internal/Avatar.js';
@@ -33,12 +31,29 @@ import { Group } from './internal/Group.js';
 import { List } from './internal/List.js';
 import { Tooltip, ShortcutTooltip } from './internal/Tooltip.js';
 import { User } from './internal/User.js';
-import { TooltipProvider } from '@radix-ui/react-tooltip';
 import { PopoverTrigger } from '@radix-ui/react-popover';
+import { TooltipProvider } from '@radix-ui/react-tooltip';
 import { DropdownMenuTrigger } from '@radix-ui/react-dropdown-menu';
 
 
 const REACTIONS_TRUNCATE = 5;
+function CommentAvatar(props) {
+  return /* @__PURE__ */ jsx(Avatar, { ...props });
+}
+function CommentAuthor(props) {
+  return /* @__PURE__ */ jsx(User, { ...props });
+}
+function CommentDate({ locale, date, className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Timestamp,
+    {
+      locale,
+      date,
+      className: cn("lb-date", className),
+      ...props
+    }
+  );
+}
 function CommentUserMention({
   mention,
   className,
@@ -314,27 +329,6 @@ function CommentNonInteractiveFileAttachment({
     }
   );
 }
-function AutoMarkReadThreadIdHandler({
-  threadId,
-  roomId,
-  commentRef
-}) {
-  const markThreadAsRead = useMarkRoomThreadAsRead(roomId);
-  const isWindowFocused = useWindowFocus();
-  useIntersectionCallback(
-    commentRef,
-    (isIntersecting) => {
-      if (isIntersecting) {
-        markThreadAsRead(threadId);
-      }
-    },
-    {
-      // The underlying IntersectionObserver is only enabled when the window is focused
-      enabled: isWindowFocused
-    }
-  );
-  return null;
-}
 const CommentDropdownItem = forwardRef(({ children, icon, onSelect, onClick, ...props }, forwardedRef) => {
   const handleClick = useCallback(
     (event) => {
@@ -375,10 +369,15 @@ const Comment = Object.assign(
       dropdownItems,
       overrides,
       components,
+      additionalContent,
+      avatar,
+      author,
+      date,
       className,
       actions,
       actionsClassName,
-      autoMarkReadThreadId,
+      internalDropdownItems,
+      children,
       ...props
     }, forwardedRef) => {
       const ref = useRef(null);
@@ -485,240 +484,268 @@ const Comment = Object.assign(
       if (!showDeleted && !comment.body) {
         return null;
       }
-      const defaultDropdownItems = comment.userId === currentUserId ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      const commentDropdownItems = comment.userId === currentUserId ? /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(CommentDropdownItem, { onSelect: handleEdit, icon: /* @__PURE__ */ jsx(EditIcon, {}), children: $.COMMENT_EDIT }),
         /* @__PURE__ */ jsx(CommentDropdownItem, { onSelect: handleDelete, icon: /* @__PURE__ */ jsx(DeleteIcon, {}), children: $.COMMENT_DELETE })
       ] }) : null;
+      const defaultDropdownItems = internalDropdownItems || commentDropdownItems ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        internalDropdownItems,
+        commentDropdownItems
+      ] }) : null;
       const dropdownContent = typeof dropdownItems === "function" ? dropdownItems({ children: defaultDropdownItems, comment }) : /* @__PURE__ */ jsxs(Fragment, { children: [
         defaultDropdownItems,
         dropdownItems
       ] });
-      return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(ComponentsProvider, { components, children: [
-        autoMarkReadThreadId && /* @__PURE__ */ jsx(
-          AutoMarkReadThreadIdHandler,
+      let content;
+      if (isEditing) {
+        content = /* @__PURE__ */ jsx(
+          Composer,
           {
-            commentRef: ref,
-            threadId: autoMarkReadThreadId,
+            className: "lb-comment-composer",
+            onComposerSubmit: handleEditSubmit,
+            defaultValue: comment.body,
+            defaultAttachments: comment.attachments,
+            autoFocus: true,
+            showAttribution: false,
+            showAttachments,
+            showFormattingControls: showComposerFormattingControls,
+            actions: /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                Tooltip,
+                {
+                  content: $.COMMENT_EDIT_COMPOSER_CANCEL,
+                  "aria-label": $.COMMENT_EDIT_COMPOSER_CANCEL,
+                  children: /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      className: "lb-composer-action",
+                      onClick: handleEditCancel,
+                      icon: /* @__PURE__ */ jsx(CrossIcon, {})
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                ShortcutTooltip,
+                {
+                  content: $.COMMENT_EDIT_COMPOSER_SAVE,
+                  shortcut: "Enter",
+                  children: /* @__PURE__ */ jsx(ComposerSubmit, { asChild: true, children: /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      variant: "primary",
+                      className: "lb-composer-action",
+                      onClick: stopPropagation,
+                      "aria-label": $.COMMENT_EDIT_COMPOSER_SAVE,
+                      icon: /* @__PURE__ */ jsx(CheckIcon, {})
+                    }
+                  ) })
+                }
+              )
+            ] }),
+            overrides: {
+              COMPOSER_PLACEHOLDER: $.COMMENT_EDIT_COMPOSER_PLACEHOLDER
+            },
             roomId: comment.roomId
           }
-        ),
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            id: comment.id,
-            className: cn(
-              "lb-root lb-comment",
-              indentContent && "lb-comment:indent-content",
-              showActions === "hover" && "lb-comment:show-actions-hover",
-              (isMoreActionOpen || isReactionActionOpen) && "lb-comment:action-open",
-              className
-            ),
-            "data-deleted": !comment.body ? "" : void 0,
-            "data-editing": isEditing ? "" : void 0,
-            "data-target": isTarget ? "" : void 0,
-            dir: $.dir,
-            ...props,
-            ref: mergedRefs,
-            children: [
-              /* @__PURE__ */ jsxs("div", { className: "lb-comment-header", children: [
-                /* @__PURE__ */ jsxs("div", { className: "lb-comment-details", children: [
-                  /* @__PURE__ */ jsx(
-                    Avatar,
+        );
+      } else {
+        content = comment.body ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            CommentBody,
+            {
+              className: "lb-comment-body",
+              body: comment.body,
+              components: {
+                Mention: ({ mention }) => /* @__PURE__ */ jsx(
+                  CommentMention,
+                  {
+                    mention,
+                    onClick: (event) => onMentionClick?.(mention, event),
+                    overrides
+                  }
+                ),
+                Link: CommentLink
+              }
+            }
+          ),
+          additionalContent,
+          showAttachments && (mediaAttachments.length > 0 || fileAttachments.length > 0) ? /* @__PURE__ */ jsxs("div", { className: "lb-comment-attachments", children: [
+            mediaAttachments.length > 0 ? /* @__PURE__ */ jsx("div", { className: "lb-attachments", children: mediaAttachments.map((attachment) => /* @__PURE__ */ jsx(
+              CommentMediaAttachment,
+              {
+                attachment,
+                overrides,
+                onAttachmentClick,
+                roomId: comment.roomId
+              },
+              attachment.id
+            )) }) : null,
+            fileAttachments.length > 0 ? /* @__PURE__ */ jsx("div", { className: "lb-attachments", children: fileAttachments.map((attachment) => /* @__PURE__ */ jsx(
+              CommentFileAttachment,
+              {
+                attachment,
+                overrides,
+                onAttachmentClick,
+                roomId: comment.roomId
+              },
+              attachment.id
+            )) }) : null
+          ] }) : null,
+          showReactions && comment.reactions.length > 0 && /* @__PURE__ */ jsxs("div", { className: "lb-comment-reactions", children: [
+            comment.reactions.map((reaction) => /* @__PURE__ */ jsx(
+              CommentReaction,
+              {
+                comment,
+                reaction,
+                overrides,
+                disabled: !canComment
+              },
+              reaction.emoji
+            )),
+            canComment ? /* @__PURE__ */ jsx(EmojiPicker, { onEmojiSelect: handleReactionSelect, children: /* @__PURE__ */ jsx(Tooltip, { content: $.COMMENT_ADD_REACTION, children: /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+              Button,
+              {
+                className: "lb-comment-reaction lb-comment-reaction-add",
+                variant: "outline",
+                onClick: stopPropagation,
+                "aria-label": $.COMMENT_ADD_REACTION,
+                icon: /* @__PURE__ */ jsx(EmojiPlusIcon, {})
+              }
+            ) }) }) }) : null
+          ] })
+        ] }) : /* @__PURE__ */ jsx("div", { className: "lb-comment-body", children: /* @__PURE__ */ jsx("p", { className: "lb-comment-deleted", children: $.COMMENT_DELETED }) });
+        content = typeof children === "function" ? children({ comment, children: content }) : children ?? content;
+      }
+      return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsx(ComponentsProvider, { components, children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          id: comment.id,
+          className: cn(
+            "lb-root lb-comment",
+            indentContent && "lb-comment:indent-content",
+            showActions === "hover" && "lb-comment:show-actions-hover",
+            (isMoreActionOpen || isReactionActionOpen) && "lb-comment:action-open",
+            className
+          ),
+          "data-deleted": !comment.body ? "" : void 0,
+          "data-editing": isEditing ? "" : void 0,
+          "data-target": isTarget ? "" : void 0,
+          dir: $.dir,
+          ...props,
+          ref: mergedRefs,
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "lb-comment-header", children: [
+              /* @__PURE__ */ jsxs("div", { className: "lb-comment-details", children: [
+                avatar ? /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "lb-comment-avatar",
+                    onClick: handleAuthorClick,
+                    children: avatar
+                  }
+                ) : /* @__PURE__ */ jsx(
+                  Avatar,
+                  {
+                    className: "lb-comment-avatar",
+                    userId: comment.userId,
+                    onClick: handleAuthorClick
+                  }
+                ),
+                /* @__PURE__ */ jsxs("span", { className: "lb-comment-details-labels", children: [
+                  author ? /* @__PURE__ */ jsx(
+                    "span",
                     {
-                      className: "lb-comment-avatar",
+                      className: "lb-comment-author",
+                      onClick: handleAuthorClick,
+                      children: author
+                    }
+                  ) : /* @__PURE__ */ jsx(
+                    User,
+                    {
+                      className: "lb-comment-author",
                       userId: comment.userId,
                       onClick: handleAuthorClick
                     }
                   ),
-                  /* @__PURE__ */ jsxs("span", { className: "lb-comment-details-labels", children: [
+                  date ? /* @__PURE__ */ jsx("span", { className: "lb-comment-date", children: date }) : /* @__PURE__ */ jsxs(Fragment, { children: [
                     /* @__PURE__ */ jsx(
-                      User,
+                      CommentDate,
                       {
-                        className: "lb-comment-author",
-                        userId: comment.userId,
-                        onClick: handleAuthorClick
+                        locale: $.locale,
+                        date: comment.createdAt,
+                        className: "lb-comment-date-created"
                       }
                     ),
-                    /* @__PURE__ */ jsxs("span", { className: "lb-comment-date", children: [
-                      /* @__PURE__ */ jsx(
-                        Timestamp,
-                        {
-                          locale: $.locale,
-                          date: comment.createdAt,
-                          className: "lb-date lb-comment-date-created"
-                        }
-                      ),
-                      comment.editedAt && comment.body && /* @__PURE__ */ jsxs(Fragment, { children: [
-                        " ",
-                        /* @__PURE__ */ jsx("span", { className: "lb-comment-date-edited", children: $.COMMENT_EDITED })
-                      ] })
+                    comment.editedAt && comment.body && /* @__PURE__ */ jsxs(Fragment, { children: [
+                      " ",
+                      /* @__PURE__ */ jsx("span", { className: "lb-comment-date-edited", children: $.COMMENT_EDITED })
                     ] })
                   ] })
-                ] }),
-                showActions && !isEditing && /* @__PURE__ */ jsxs("div", { className: cn("lb-comment-actions", actionsClassName), children: [
-                  actions ?? null,
-                  showReactions && canComment ? /* @__PURE__ */ jsx(
-                    EmojiPicker,
-                    {
-                      onEmojiSelect: handleReactionSelect,
-                      onOpenChange: setReactionActionOpen,
-                      children: /* @__PURE__ */ jsx(Tooltip, { content: $.COMMENT_ADD_REACTION, children: /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
-                        Button,
-                        {
-                          className: "lb-comment-action",
-                          onClick: stopPropagation,
-                          "aria-label": $.COMMENT_ADD_REACTION,
-                          icon: /* @__PURE__ */ jsx(EmojiPlusIcon, {})
-                        }
-                      ) }) })
-                    }
-                  ) : null,
-                  dropdownContent ? /* @__PURE__ */ jsx(
-                    Dropdown,
-                    {
-                      open: isMoreActionOpen,
-                      onOpenChange: setMoreActionOpen,
-                      align: "end",
-                      content: dropdownContent,
-                      children: /* @__PURE__ */ jsx(Tooltip, { content: $.COMMENT_MORE, children: /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
-                        Button,
-                        {
-                          className: "lb-comment-action",
-                          disabled: !comment.body,
-                          onClick: stopPropagation,
-                          "aria-label": $.COMMENT_MORE,
-                          icon: /* @__PURE__ */ jsx(EllipsisIcon, {})
-                        }
-                      ) }) })
-                    }
-                  ) : null
                 ] })
               ] }),
-              /* @__PURE__ */ jsx("div", { className: "lb-comment-content", children: isEditing ? /* @__PURE__ */ jsx(
-                Composer,
-                {
-                  className: "lb-comment-composer",
-                  onComposerSubmit: handleEditSubmit,
-                  defaultValue: comment.body,
-                  defaultAttachments: comment.attachments,
-                  autoFocus: true,
-                  showAttribution: false,
-                  showAttachments,
-                  showFormattingControls: showComposerFormattingControls,
-                  actions: /* @__PURE__ */ jsxs(Fragment, { children: [
-                    /* @__PURE__ */ jsx(
-                      Tooltip,
+              showActions && !isEditing && /* @__PURE__ */ jsxs("div", { className: cn("lb-comment-actions", actionsClassName), children: [
+                actions ?? null,
+                showReactions && canComment ? /* @__PURE__ */ jsx(
+                  EmojiPicker,
+                  {
+                    onEmojiSelect: handleReactionSelect,
+                    onOpenChange: setReactionActionOpen,
+                    children: /* @__PURE__ */ jsx(Tooltip, { content: $.COMMENT_ADD_REACTION, children: /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+                      Button,
                       {
-                        content: $.COMMENT_EDIT_COMPOSER_CANCEL,
-                        "aria-label": $.COMMENT_EDIT_COMPOSER_CANCEL,
-                        children: /* @__PURE__ */ jsx(
-                          Button,
-                          {
-                            className: "lb-composer-action",
-                            onClick: handleEditCancel,
-                            icon: /* @__PURE__ */ jsx(CrossIcon, {})
-                          }
-                        )
+                        className: "lb-comment-action",
+                        onClick: stopPropagation,
+                        "aria-label": $.COMMENT_ADD_REACTION,
+                        icon: /* @__PURE__ */ jsx(EmojiPlusIcon, {})
                       }
-                    ),
-                    /* @__PURE__ */ jsx(
-                      ShortcutTooltip,
+                    ) }) })
+                  }
+                ) : null,
+                dropdownContent ? /* @__PURE__ */ jsx(
+                  Dropdown,
+                  {
+                    open: isMoreActionOpen,
+                    onOpenChange: setMoreActionOpen,
+                    align: "end",
+                    content: dropdownContent,
+                    children: /* @__PURE__ */ jsx(Tooltip, { content: $.COMMENT_MORE, children: /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+                      Button,
                       {
-                        content: $.COMMENT_EDIT_COMPOSER_SAVE,
-                        shortcut: "Enter",
-                        children: /* @__PURE__ */ jsx(ComposerSubmit, { asChild: true, children: /* @__PURE__ */ jsx(
-                          Button,
-                          {
-                            variant: "primary",
-                            className: "lb-composer-action",
-                            onClick: stopPropagation,
-                            "aria-label": $.COMMENT_EDIT_COMPOSER_SAVE,
-                            icon: /* @__PURE__ */ jsx(CheckIcon, {})
-                          }
-                        ) })
+                        className: "lb-comment-action",
+                        disabled: !comment.body,
+                        onClick: stopPropagation,
+                        "aria-label": $.COMMENT_MORE,
+                        icon: /* @__PURE__ */ jsx(EllipsisIcon, {})
                       }
-                    )
-                  ] }),
-                  overrides: {
-                    COMPOSER_PLACEHOLDER: $.COMMENT_EDIT_COMPOSER_PLACEHOLDER
-                  },
-                  roomId: comment.roomId
-                }
-              ) : comment.body ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                /* @__PURE__ */ jsx(
-                  CommentBody,
-                  {
-                    className: "lb-comment-body",
-                    body: comment.body,
-                    components: {
-                      Mention: ({ mention }) => /* @__PURE__ */ jsx(
-                        CommentMention,
-                        {
-                          mention,
-                          onClick: (event) => onMentionClick?.(mention, event),
-                          overrides
-                        }
-                      ),
-                      Link: CommentLink
-                    }
+                    ) }) })
                   }
-                ),
-                showAttachments && (mediaAttachments.length > 0 || fileAttachments.length > 0) ? /* @__PURE__ */ jsxs("div", { className: "lb-comment-attachments", children: [
-                  mediaAttachments.length > 0 ? /* @__PURE__ */ jsx("div", { className: "lb-attachments", children: mediaAttachments.map((attachment) => /* @__PURE__ */ jsx(
-                    CommentMediaAttachment,
-                    {
-                      attachment,
-                      overrides,
-                      onAttachmentClick,
-                      roomId: comment.roomId
-                    },
-                    attachment.id
-                  )) }) : null,
-                  fileAttachments.length > 0 ? /* @__PURE__ */ jsx("div", { className: "lb-attachments", children: fileAttachments.map((attachment) => /* @__PURE__ */ jsx(
-                    CommentFileAttachment,
-                    {
-                      attachment,
-                      overrides,
-                      onAttachmentClick,
-                      roomId: comment.roomId
-                    },
-                    attachment.id
-                  )) }) : null
-                ] }) : null,
-                showReactions && comment.reactions.length > 0 && /* @__PURE__ */ jsxs("div", { className: "lb-comment-reactions", children: [
-                  comment.reactions.map((reaction) => /* @__PURE__ */ jsx(
-                    CommentReaction,
-                    {
-                      comment,
-                      reaction,
-                      overrides,
-                      disabled: !canComment
-                    },
-                    reaction.emoji
-                  )),
-                  canComment ? /* @__PURE__ */ jsx(EmojiPicker, { onEmojiSelect: handleReactionSelect, children: /* @__PURE__ */ jsx(Tooltip, { content: $.COMMENT_ADD_REACTION, children: /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
-                    Button,
-                    {
-                      className: "lb-comment-reaction lb-comment-reaction-add",
-                      variant: "outline",
-                      onClick: stopPropagation,
-                      "aria-label": $.COMMENT_ADD_REACTION,
-                      icon: /* @__PURE__ */ jsx(EmojiPlusIcon, {})
-                    }
-                  ) }) }) }) : null
-                ] })
-              ] }) : /* @__PURE__ */ jsx("div", { className: "lb-comment-body", children: /* @__PURE__ */ jsx("p", { className: "lb-comment-deleted", children: $.COMMENT_DELETED }) }) })
-            ]
-          }
-        )
-      ] }) });
+                ) : null
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "lb-comment-content", children: content })
+          ]
+        }
+      ) }) });
     }
   ),
   {
     /**
      * Displays a dropdown item in the comment's dropdown.
      */
-    DropdownItem: CommentDropdownItem
+    DropdownItem: CommentDropdownItem,
+    /**
+     * Displays a comment's avatar.
+     */
+    Avatar: CommentAvatar,
+    /**
+     * Displays a comment's author.
+     */
+    Author: CommentAuthor,
+    /**
+     * Displays a comment's date.
+     */
+    Date: CommentDate
   }
 );