@liveblocks/react-ui 3.9.2 → 3.10.0

package/dist/components/Comment.js

@@ -26,7 +26,7 @@ import { Composer } from './Composer.js';
 import { MediaAttachment, FileAttachment, separateMediaAttachments } from './internal/Attachment.js';
 import { Avatar } from './internal/Avatar.js';
 import { CustomButton, Button } from './internal/Button.js';
-import { Dropdown, DropdownItem } from './internal/Dropdown.js';
+import { DropdownItem, Dropdown } from './internal/Dropdown.js';
 import { Emoji } from './internal/Emoji.js';
 import { EmojiPicker } from './internal/EmojiPicker.js';
 import { Group } from './internal/Group.js';
@@ -335,385 +335,390 @@ function AutoMarkReadThreadIdHandler({
   );
   return null;
 }
-const Comment = forwardRef(
-  ({
-    comment,
-    indentContent = true,
-    showDeleted,
-    showActions = "hover",
-    showReactions = true,
-    showAttachments = true,
-    showComposerFormattingControls = true,
-    onAuthorClick,
-    onMentionClick,
-    onAttachmentClick,
-    onCommentEdit,
-    onCommentDelete,
-    overrides,
-    components,
-    className,
-    additionalActions,
-    additionalActionsClassName,
-    additionalDropdownItemsBefore,
-    additionalDropdownItemsAfter,
-    autoMarkReadThreadId,
-    ...props
-  }, forwardedRef) => {
-    const ref = useRef(null);
-    const mergedRefs = useRefs(forwardedRef, ref);
-    const currentUserId = useCurrentUserId();
-    const deleteComment = useDeleteRoomComment(comment.roomId);
-    const editComment = useEditRoomComment(comment.roomId);
-    const addReaction = useAddRoomCommentReaction(comment.roomId);
-    const removeReaction = useRemoveRoomCommentReaction(comment.roomId);
-    const $ = useOverrides(overrides);
-    const [isEditing, setEditing] = useState(false);
-    const [isTarget, setTarget] = useState(false);
-    const [isMoreActionOpen, setMoreActionOpen] = useState(false);
-    const [isReactionActionOpen, setReactionActionOpen] = useState(false);
-    const { mediaAttachments, fileAttachments } = useMemo(() => {
-      return separateMediaAttachments(comment.attachments);
-    }, [comment.attachments]);
-    const permissions = useRoomPermissions(comment.roomId);
-    const canComment = permissions.size > 0 ? permissions.has(Permission.CommentsWrite) || permissions.has(Permission.Write) : true;
-    const stopPropagation = useCallback((event) => {
-      event.stopPropagation();
-    }, []);
-    const handleEdit = useCallback(() => {
-      setEditing(true);
-    }, []);
-    const handleEditCancel = useCallback(
-      (event) => {
+const CommentDropdownItem = forwardRef(({ children, icon, onSelect, onClick, ...props }, forwardedRef) => {
+  const handleClick = useCallback(
+    (event) => {
+      onClick?.(event);
+      if (!event.isDefaultPrevented()) {
         event.stopPropagation();
-        setEditing(false);
-      },
-      []
-    );
-    const handleEditSubmit = useCallback(
-      ({ body, attachments }, event) => {
-        onCommentEdit?.(comment);
-        if (event.isDefaultPrevented()) {
-          return;
-        }
+      }
+    },
+    [onClick]
+  );
+  return /* @__PURE__ */ jsx(
+    DropdownItem,
+    {
+      icon,
+      onSelect,
+      onClick: handleClick,
+      ...props,
+      ref: forwardedRef,
+      children
+    }
+  );
+});
+const Comment = Object.assign(
+  forwardRef(
+    ({
+      comment,
+      indentContent = true,
+      showDeleted,
+      showActions = "hover",
+      showReactions = true,
+      showAttachments = true,
+      showComposerFormattingControls = true,
+      onAuthorClick,
+      onMentionClick,
+      onAttachmentClick,
+      onCommentEdit,
+      onCommentDelete,
+      dropdownItems,
+      overrides,
+      components,
+      className,
+      actions,
+      actionsClassName,
+      autoMarkReadThreadId,
+      ...props
+    }, forwardedRef) => {
+      const ref = useRef(null);
+      const mergedRefs = useRefs(forwardedRef, ref);
+      const currentUserId = useCurrentUserId();
+      const deleteComment = useDeleteRoomComment(comment.roomId);
+      const editComment = useEditRoomComment(comment.roomId);
+      const addReaction = useAddRoomCommentReaction(comment.roomId);
+      const removeReaction = useRemoveRoomCommentReaction(comment.roomId);
+      const $ = useOverrides(overrides);
+      const [isEditing, setEditing] = useState(false);
+      const [isTarget, setTarget] = useState(false);
+      const [isMoreActionOpen, setMoreActionOpen] = useState(false);
+      const [isReactionActionOpen, setReactionActionOpen] = useState(false);
+      const { mediaAttachments, fileAttachments } = useMemo(() => {
+        return separateMediaAttachments(comment.attachments);
+      }, [comment.attachments]);
+      const permissions = useRoomPermissions(comment.roomId);
+      const canComment = permissions.size > 0 ? permissions.has(Permission.CommentsWrite) || permissions.has(Permission.Write) : true;
+      const stopPropagation = useCallback((event) => {
         event.stopPropagation();
-        event.preventDefault();
-        setEditing(false);
-        editComment({
-          commentId: comment.id,
-          threadId: comment.threadId,
-          body,
-          attachments
-        });
-      },
-      [comment, editComment, onCommentEdit]
-    );
-    const handleDelete = useCallback(() => {
-      onCommentDelete?.(comment);
-      deleteComment({
-        commentId: comment.id,
-        threadId: comment.threadId
-      });
-    }, [comment, deleteComment, onCommentDelete]);
-    const handleAuthorClick = useCallback(
-      (event) => {
-        onAuthorClick?.(comment.userId, event);
-      },
-      [comment.userId, onAuthorClick]
-    );
-    const handleReactionSelect = useCallback(
-      (emoji) => {
-        const reactionIndex = comment.reactions.findIndex(
-          (reaction) => reaction.emoji === emoji
-        );
-        if (reactionIndex >= 0 && currentUserId && comment.reactions[reactionIndex]?.users.some(
-          (user) => user.id === currentUserId
-        )) {
-          removeReaction({
-            threadId: comment.threadId,
+      }, []);
+      const handleEdit = useCallback(() => {
+        setEditing(true);
+      }, []);
+      const handleEditCancel = useCallback(
+        (event) => {
+          event.stopPropagation();
+          setEditing(false);
+        },
+        []
+      );
+      const handleEditSubmit = useCallback(
+        ({ body, attachments }, event) => {
+          onCommentEdit?.(comment);
+          if (event.isDefaultPrevented()) {
+            return;
+          }
+          event.stopPropagation();
+          event.preventDefault();
+          setEditing(false);
+          editComment({
             commentId: comment.id,
-            emoji
-          });
-        } else {
-          addReaction({
             threadId: comment.threadId,
-            commentId: comment.id,
-            emoji
+            body,
+            attachments
           });
+        },
+        [comment, editComment, onCommentEdit]
+      );
+      const handleDelete = useCallback(() => {
+        onCommentDelete?.(comment);
+        deleteComment({
+          commentId: comment.id,
+          threadId: comment.threadId
+        });
+      }, [comment, deleteComment, onCommentDelete]);
+      const handleAuthorClick = useCallback(
+        (event) => {
+          onAuthorClick?.(comment.userId, event);
+        },
+        [comment.userId, onAuthorClick]
+      );
+      const handleReactionSelect = useCallback(
+        (emoji) => {
+          const reactionIndex = comment.reactions.findIndex(
+            (reaction) => reaction.emoji === emoji
+          );
+          if (reactionIndex >= 0 && currentUserId && comment.reactions[reactionIndex]?.users.some(
+            (user) => user.id === currentUserId
+          )) {
+            removeReaction({
+              threadId: comment.threadId,
+              commentId: comment.id,
+              emoji
+            });
+          } else {
+            addReaction({
+              threadId: comment.threadId,
+              commentId: comment.id,
+              emoji
+            });
+          }
+        },
+        [
+          addReaction,
+          comment.id,
+          comment.reactions,
+          comment.threadId,
+          removeReaction,
+          currentUserId
+        ]
+      );
+      useEffect(() => {
+        const isWindowDefined = typeof window !== "undefined";
+        if (!isWindowDefined)
+          return;
+        const hash = window.location.hash;
+        const commentId = hash.slice(1);
+        if (commentId === comment.id) {
+          setTarget(true);
         }
-      },
-      [
-        addReaction,
-        comment.id,
-        comment.reactions,
-        comment.threadId,
-        removeReaction,
-        currentUserId
-      ]
-    );
-    useEffect(() => {
-      const isWindowDefined = typeof window !== "undefined";
-      if (!isWindowDefined)
-        return;
-      const hash = window.location.hash;
-      const commentId = hash.slice(1);
-      if (commentId === comment.id) {
-        setTarget(true);
+      }, []);
+      if (!showDeleted && !comment.body) {
+        return null;
       }
-    }, []);
-    if (!showDeleted && !comment.body) {
-      return null;
-    }
-    return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(ComponentsProvider, { components, children: [
-      autoMarkReadThreadId && /* @__PURE__ */ jsx(
-        AutoMarkReadThreadIdHandler,
-        {
-          commentRef: ref,
-          threadId: autoMarkReadThreadId,
-          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,
-                  {
-                    className: "lb-comment-avatar",
-                    userId: comment.userId,
-                    onClick: handleAuthorClick
-                  }
-                ),
-                /* @__PURE__ */ jsxs("span", { className: "lb-comment-details-labels", children: [
+      const defaultDropdownItems = 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 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,
+          {
+            commentRef: ref,
+            threadId: autoMarkReadThreadId,
+            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(
-                    User,
+                    Avatar,
                     {
-                      className: "lb-comment-author",
+                      className: "lb-comment-avatar",
                       userId: comment.userId,
                       onClick: handleAuthorClick
                     }
                   ),
-                  /* @__PURE__ */ jsxs("span", { className: "lb-comment-date", children: [
+                  /* @__PURE__ */ jsxs("span", { className: "lb-comment-details-labels", children: [
                     /* @__PURE__ */ jsx(
-                      Timestamp,
+                      User,
                       {
-                        locale: $.locale,
-                        date: comment.createdAt,
-                        className: "lb-date lb-comment-date-created"
+                        className: "lb-comment-author",
+                        userId: comment.userId,
+                        onClick: handleAuthorClick
                       }
                     ),
-                    comment.editedAt && comment.body && /* @__PURE__ */ jsxs(Fragment, { children: [
-                      " ",
-                      /* @__PURE__ */ jsx("span", { className: "lb-comment-date-edited", children: $.COMMENT_EDITED })
+                    /* @__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 })
+                      ] })
                     ] })
                   ] })
+                ] }),
+                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
                 ] })
               ] }),
-              showActions && !isEditing && /* @__PURE__ */ jsxs(
-                "div",
+              /* @__PURE__ */ jsx("div", { className: "lb-comment-content", children: isEditing ? /* @__PURE__ */ jsx(
+                Composer,
                 {
-                  className: cn(
-                    "lb-comment-actions",
-                    additionalActionsClassName
-                  ),
-                  children: [
-                    additionalActions ?? null,
-                    showReactions && canComment ? /* @__PURE__ */ jsx(
-                      EmojiPicker,
+                  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,
                       {
-                        onEmojiSelect: handleReactionSelect,
-                        onOpenChange: setReactionActionOpen,
-                        children: /* @__PURE__ */ jsx(Tooltip, { content: $.COMMENT_ADD_REACTION, children: /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+                        content: $.COMMENT_EDIT_COMPOSER_CANCEL,
+                        "aria-label": $.COMMENT_EDIT_COMPOSER_CANCEL,
+                        children: /* @__PURE__ */ jsx(
                           Button,
                           {
-                            className: "lb-comment-action",
-                            onClick: stopPropagation,
-                            "aria-label": $.COMMENT_ADD_REACTION,
-                            icon: /* @__PURE__ */ jsx(EmojiPlusIcon, {})
+                            className: "lb-composer-action",
+                            onClick: handleEditCancel,
+                            icon: /* @__PURE__ */ jsx(CrossIcon, {})
                           }
-                        ) }) })
+                        )
                       }
-                    ) : null,
-                    comment.userId === currentUserId || additionalDropdownItemsBefore || additionalDropdownItemsAfter ? /* @__PURE__ */ jsx(
-                      Dropdown,
+                    ),
+                    /* @__PURE__ */ jsx(
+                      ShortcutTooltip,
                       {
-                        open: isMoreActionOpen,
-                        onOpenChange: setMoreActionOpen,
-                        align: "end",
-                        content: /* @__PURE__ */ jsxs(Fragment, { children: [
-                          additionalDropdownItemsBefore,
-                          comment.userId === currentUserId && /* @__PURE__ */ jsxs(Fragment, { children: [
-                            /* @__PURE__ */ jsx(
-                              DropdownItem,
-                              {
-                                onSelect: handleEdit,
-                                onClick: stopPropagation,
-                                icon: /* @__PURE__ */ jsx(EditIcon, {}),
-                                children: $.COMMENT_EDIT
-                              }
-                            ),
-                            /* @__PURE__ */ jsx(
-                              DropdownItem,
-                              {
-                                onSelect: handleDelete,
-                                onClick: stopPropagation,
-                                icon: /* @__PURE__ */ jsx(DeleteIcon, {}),
-                                children: $.COMMENT_DELETE
-                              }
-                            )
-                          ] }),
-                          additionalDropdownItemsAfter
-                        ] }),
-                        children: /* @__PURE__ */ jsx(Tooltip, { content: $.COMMENT_MORE, children: /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+                        content: $.COMMENT_EDIT_COMPOSER_SAVE,
+                        shortcut: "Enter",
+                        children: /* @__PURE__ */ jsx(ComposerSubmit, { asChild: true, children: /* @__PURE__ */ jsx(
                           Button,
                           {
-                            className: "lb-comment-action",
-                            disabled: !comment.body,
+                            variant: "primary",
+                            className: "lb-composer-action",
                             onClick: stopPropagation,
-                            "aria-label": $.COMMENT_MORE,
-                            icon: /* @__PURE__ */ jsx(EllipsisIcon, {})
+                            "aria-label": $.COMMENT_EDIT_COMPOSER_SAVE,
+                            icon: /* @__PURE__ */ jsx(CheckIcon, {})
                           }
-                        ) }) })
+                        ) })
                       }
-                    ) : null
-                  ]
+                    )
+                  ] }),
+                  overrides: {
+                    COMPOSER_PLACEHOLDER: $.COMMENT_EDIT_COMPOSER_PLACEHOLDER
+                  },
+                  roomId: comment.roomId
                 }
-              )
-            ] }),
-            /* @__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,
-                    {
-                      content: $.COMMENT_EDIT_COMPOSER_CANCEL,
-                      "aria-label": $.COMMENT_EDIT_COMPOSER_CANCEL,
-                      children: /* @__PURE__ */ jsx(
-                        Button,
+              ) : comment.body ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(
+                  CommentBody,
+                  {
+                    className: "lb-comment-body",
+                    body: comment.body,
+                    components: {
+                      Mention: ({ mention }) => /* @__PURE__ */ jsx(
+                        CommentMention,
                         {
-                          className: "lb-composer-action",
-                          onClick: handleEditCancel,
-                          icon: /* @__PURE__ */ jsx(CrossIcon, {})
+                          mention,
+                          onClick: (event) => onMentionClick?.(mention, event),
+                          overrides
                         }
-                      )
+                      ),
+                      Link: CommentLink
                     }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    ShortcutTooltip,
+                  }
+                ),
+                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,
                     {
-                      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, {})
-                        }
-                      ) })
+                      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, {})
                     }
-                  )
-                ] }),
-                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-body", children: /* @__PURE__ */ jsx("p", { className: "lb-comment-deleted", children: $.COMMENT_DELETED }) }) })
+            ]
+          }
+        )
+      ] }) });
+    }
+  ),
+  {
+    /**
+     * Displays a dropdown item in the comment's dropdown.
+     */
+    DropdownItem: CommentDropdownItem
   }
 );