@liveblocks/react-ui 2.14.0 → 2.15.0

package/dist/components/Comment.mjs

@@ -1,7 +1,7 @@
-'use client';
-import { useAddRoomCommentReaction, useRemoveRoomCommentReaction, useDeleteRoomComment, useEditRoomComment, useRoomAttachmentUrl, useMarkRoomThreadAsRead } from '@liveblocks/react/_private';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useAddRoomCommentReaction, useRemoveRoomCommentReaction, useRoomAttachmentUrl, useMarkRoomThreadAsRead, useDeleteRoomComment, useEditRoomComment } from '@liveblocks/react/_private';
 import * as TogglePrimitive from '@radix-ui/react-toggle';
-import React__default, { forwardRef, useMemo, useCallback, useRef, useState, useEffect } from 'react';
+import { forwardRef, useMemo, useCallback, useRef, useState, useEffect } from 'react';
 import { CheckIcon } from '../icons/Check.mjs';
 import { CrossIcon } from '../icons/Cross.mjs';
 import { DeleteIcon } from '../icons/Delete.mjs';
@@ -9,7 +9,7 @@ import { EditIcon } from '../icons/Edit.mjs';
 import { EllipsisIcon } from '../icons/Ellipsis.mjs';
 import { EmojiAddIcon } from '../icons/EmojiAdd.mjs';
 import { useOverrides } from '../overrides.mjs';
-import { Body as CommentBody, Mention as CommentMention$1, Link as CommentLink$1 } from '../primitives/Comment/index.mjs';
+import { Mention as CommentMention$1, Link as CommentLink$1, Body as CommentBody } from '../primitives/Comment/index.mjs';
 import { Submit as ComposerSubmit } from '../primitives/Composer/index.mjs';
 import { Timestamp } from '../primitives/Timestamp.mjs';
 import { useCurrentUserId } from '../shared.mjs';
@@ -20,7 +20,7 @@ import { useRefs } from '../utils/use-refs.mjs';
 import { useVisibleCallback } from '../utils/use-visible.mjs';
 import { useWindowFocus } from '../utils/use-window-focus.mjs';
 import { Composer } from './Composer.mjs';
-import { separateMediaAttachments, MediaAttachment, FileAttachment } from './internal/Attachment.mjs';
+import { MediaAttachment, FileAttachment, separateMediaAttachments } from './internal/Attachment.mjs';
 import { Avatar } from './internal/Avatar.mjs';
 import { Button } from './internal/Button.mjs';
 import { Dropdown, DropdownItem } from './internal/Dropdown.mjs';
@@ -33,6 +33,7 @@ import { TooltipProvider } from '@radix-ui/react-tooltip';
 import { PopoverTrigger } from '@radix-ui/react-popover';
 import { DropdownMenuTrigger } from '@radix-ui/react-dropdown-menu';
 
+"use client";
 const REACTIONS_TRUNCATE = 5;
 function CommentMention({
   userId,
@@ -40,13 +41,17 @@ function CommentMention({
   ...props
 }) {
   const currentId = useCurrentUserId();
-  return /* @__PURE__ */ React__default.createElement(CommentMention$1, {
+  return /* @__PURE__ */ jsxs(CommentMention$1, {
     className: classNames("lb-comment-mention", className),
     "data-self": userId === currentId ? "" : void 0,
-    ...props
-  }, MENTION_CHARACTER, /* @__PURE__ */ React__default.createElement(User, {
-    userId
-  }));
+    ...props,
+    children: [
+      MENTION_CHARACTER,
+      /* @__PURE__ */ jsx(User, {
+        userId
+      })
+    ]
+  });
 }
 function CommentLink({
   href,
@@ -54,11 +59,12 @@ function CommentLink({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ React__default.createElement(CommentLink$1, {
+  return /* @__PURE__ */ jsx(CommentLink$1, {
     className: classNames("lb-comment-link", className),
     href,
-    ...props
-  }, children);
+    ...props,
+    children
+  });
 }
 function CommentNonInteractiveLink({
   href: _href,
@@ -66,14 +72,15 @@ function CommentNonInteractiveLink({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ React__default.createElement("span", {
+  return /* @__PURE__ */ jsx("span", {
     className: classNames("lb-comment-link", className),
-    ...props
-  }, children);
+    ...props,
+    children
+  });
 }
 const CommentReactionButton = forwardRef(({ reaction, overrides, className, ...props }, forwardedRef) => {
   const $ = useOverrides(overrides);
-  return /* @__PURE__ */ React__default.createElement(Button, {
+  return /* @__PURE__ */ jsxs(Button, {
     className: classNames("lb-comment-reaction", className),
     variant: "outline",
     "aria-label": $.COMMENT_REACTION_DESCRIPTION(
@@ -81,13 +88,18 @@ const CommentReactionButton = forwardRef(({ reaction, overrides, className, ...p
       reaction.users.length
     ),
     ...props,
-    ref: forwardedRef
-  }, /* @__PURE__ */ React__default.createElement(Emoji, {
-    className: "lb-comment-reaction-emoji",
-    emoji: reaction.emoji
-  }), /* @__PURE__ */ React__default.createElement("span", {
-    className: "lb-comment-reaction-count"
-  }, reaction.users.length));
+    ref: forwardedRef,
+    children: [
+      /* @__PURE__ */ jsx(Emoji, {
+        className: "lb-comment-reaction-emoji",
+        emoji: reaction.emoji
+      }),
+      /* @__PURE__ */ jsx("span", {
+        className: "lb-comment-reaction-count",
+        children: reaction.users.length
+      })
+    ]
+  });
 });
 const CommentReaction = forwardRef(({ comment, reaction, overrides, disabled, ...props }, forwardedRef) => {
   const addReaction = useAddRoomCommentReaction(comment.roomId);
@@ -98,20 +110,21 @@ const CommentReaction = forwardRef(({ comment, reaction, overrides, disabled, ..
   }, [currentId, reaction]);
   const $ = useOverrides(overrides);
   const tooltipContent = useMemo(
-    () => /* @__PURE__ */ React__default.createElement("span", null, $.COMMENT_REACTION_LIST(
-      /* @__PURE__ */ React__default.createElement(List, {
-        values: reaction.users.map((users) => /* @__PURE__ */ React__default.createElement(User, {
-          key: users.id,
-          userId: users.id,
-          replaceSelf: true
-        })),
-        formatRemaining: $.LIST_REMAINING_USERS,
-        truncate: REACTIONS_TRUNCATE,
-        locale: $.locale
-      }),
-      reaction.emoji,
-      reaction.users.length
-    )),
+    () => /* @__PURE__ */ jsx("span", {
+      children: $.COMMENT_REACTION_LIST(
+        /* @__PURE__ */ jsx(List, {
+          values: reaction.users.map((users) => /* @__PURE__ */ jsx(User, {
+            userId: users.id,
+            replaceSelf: true
+          }, users.id)),
+          formatRemaining: $.LIST_REMAINING_USERS,
+          truncate: REACTIONS_TRUNCATE,
+          locale: $.locale
+        }),
+        reaction.emoji,
+        reaction.users.length
+      )
+    }),
     [$, reaction]
   );
   const stopPropagation = useCallback((event) => {
@@ -135,30 +148,32 @@ const CommentReaction = forwardRef(({ comment, reaction, overrides, disabled, ..
     },
     [addReaction, comment.threadId, comment.id, reaction.emoji, removeReaction]
   );
-  return /* @__PURE__ */ React__default.createElement(Tooltip, {
+  return /* @__PURE__ */ jsx(Tooltip, {
     content: tooltipContent,
     multiline: true,
-    className: "lb-comment-reaction-tooltip"
-  }, /* @__PURE__ */ React__default.createElement(TogglePrimitive.Root, {
-    asChild: true,
-    pressed: isActive,
-    onPressedChange: handlePressedChange,
-    onClick: stopPropagation,
-    disabled,
-    ref: forwardedRef
-  }, /* @__PURE__ */ React__default.createElement(CommentReactionButton, {
-    "data-self": isActive ? "" : void 0,
-    reaction,
-    overrides,
-    ...props
-  })));
+    className: "lb-comment-reaction-tooltip",
+    children: /* @__PURE__ */ jsx(TogglePrimitive.Root, {
+      asChild: true,
+      pressed: isActive,
+      onPressedChange: handlePressedChange,
+      onClick: stopPropagation,
+      disabled,
+      ref: forwardedRef,
+      children: /* @__PURE__ */ jsx(CommentReactionButton, {
+        "data-self": isActive ? "" : void 0,
+        reaction,
+        overrides,
+        ...props
+      })
+    })
+  });
 });
 const CommentNonInteractiveReaction = forwardRef(({ reaction, overrides, ...props }, forwardedRef) => {
   const currentId = useCurrentUserId();
   const isActive = useMemo(() => {
     return reaction.users.some((users) => users.id === currentId);
   }, [currentId, reaction]);
-  return /* @__PURE__ */ React__default.createElement(CommentReactionButton, {
+  return /* @__PURE__ */ jsx(CommentReactionButton, {
     disableable: false,
     "data-self": isActive ? "" : void 0,
     reaction,
@@ -197,7 +212,7 @@ function CommentMediaAttachment({
     },
     [attachment, onAttachmentClick, url]
   );
-  return /* @__PURE__ */ React__default.createElement(MediaAttachment, {
+  return /* @__PURE__ */ jsx(MediaAttachment, {
     className: classNames("lb-comment-attachment", className),
     ...props,
     attachment,
@@ -229,7 +244,7 @@ function CommentFileAttachment({
     },
     [attachment, onAttachmentClick, url]
   );
-  return /* @__PURE__ */ React__default.createElement(FileAttachment, {
+  return /* @__PURE__ */ jsx(FileAttachment, {
     className: classNames("lb-comment-attachment", className),
     ...props,
     attachment,
@@ -242,7 +257,7 @@ function CommentNonInteractiveFileAttachment({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ React__default.createElement(FileAttachment, {
+  return /* @__PURE__ */ jsx(FileAttachment, {
     className: classNames("lb-comment-attachment", className),
     allowMediaPreview: false,
     ...props
@@ -385,182 +400,269 @@ const Comment = forwardRef(
     if (!showDeleted && !comment.body) {
       return null;
     }
-    return /* @__PURE__ */ React__default.createElement(TooltipProvider, null, autoMarkReadThreadId && /* @__PURE__ */ React__default.createElement(AutoMarkReadThreadIdHandler, {
-      commentRef: ref,
-      threadId: autoMarkReadThreadId,
-      roomId: comment.roomId
-    }), /* @__PURE__ */ React__default.createElement("div", {
-      id: comment.id,
-      className: classNames(
-        "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
-    }, /* @__PURE__ */ React__default.createElement("div", {
-      className: "lb-comment-header"
-    }, /* @__PURE__ */ React__default.createElement("div", {
-      className: "lb-comment-details"
-    }, /* @__PURE__ */ React__default.createElement(Avatar, {
-      className: "lb-comment-avatar",
-      userId: comment.userId,
-      onClick: handleAuthorClick
-    }), /* @__PURE__ */ React__default.createElement("span", {
-      className: "lb-comment-details-labels"
-    }, /* @__PURE__ */ React__default.createElement(User, {
-      className: "lb-comment-author",
-      userId: comment.userId,
-      onClick: handleAuthorClick
-    }), /* @__PURE__ */ React__default.createElement("span", {
-      className: "lb-comment-date"
-    }, /* @__PURE__ */ React__default.createElement(Timestamp, {
-      locale: $.locale,
-      date: comment.createdAt,
-      className: "lb-date lb-comment-date-created"
-    }), comment.editedAt && comment.body && /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, " ", /* @__PURE__ */ React__default.createElement("span", {
-      className: "lb-comment-date-edited"
-    }, $.COMMENT_EDITED))))), showActions && !isEditing && /* @__PURE__ */ React__default.createElement("div", {
-      className: classNames(
-        "lb-comment-actions",
-        additionalActionsClassName
-      )
-    }, additionalActions ?? null, showReactions && /* @__PURE__ */ React__default.createElement(EmojiPicker, {
-      onEmojiSelect: handleReactionSelect,
-      onOpenChange: setReactionActionOpen
-    }, /* @__PURE__ */ React__default.createElement(Tooltip, {
-      content: $.COMMENT_ADD_REACTION
-    }, /* @__PURE__ */ React__default.createElement(PopoverTrigger, {
-      asChild: true
-    }, /* @__PURE__ */ React__default.createElement(Button, {
-      className: "lb-comment-action",
-      onClick: stopPropagation,
-      "aria-label": $.COMMENT_ADD_REACTION
-    }, /* @__PURE__ */ React__default.createElement(EmojiAddIcon, {
-      className: "lb-button-icon"
-    }))))), comment.userId === currentUserId && /* @__PURE__ */ React__default.createElement(Dropdown, {
-      open: isMoreActionOpen,
-      onOpenChange: setMoreActionOpen,
-      align: "end",
-      content: /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(DropdownItem, {
-        onSelect: handleEdit,
-        onClick: stopPropagation
-      }, /* @__PURE__ */ React__default.createElement(EditIcon, {
-        className: "lb-dropdown-item-icon"
-      }), $.COMMENT_EDIT), /* @__PURE__ */ React__default.createElement(DropdownItem, {
-        onSelect: handleDelete,
-        onClick: stopPropagation
-      }, /* @__PURE__ */ React__default.createElement(DeleteIcon, {
-        className: "lb-dropdown-item-icon"
-      }), $.COMMENT_DELETE))
-    }, /* @__PURE__ */ React__default.createElement(Tooltip, {
-      content: $.COMMENT_MORE
-    }, /* @__PURE__ */ React__default.createElement(DropdownMenuTrigger, {
-      asChild: true
-    }, /* @__PURE__ */ React__default.createElement(Button, {
-      className: "lb-comment-action",
-      disabled: !comment.body,
-      onClick: stopPropagation,
-      "aria-label": $.COMMENT_MORE
-    }, /* @__PURE__ */ React__default.createElement(EllipsisIcon, {
-      className: "lb-button-icon"
-    }))))))), /* @__PURE__ */ React__default.createElement("div", {
-      className: "lb-comment-content"
-    }, isEditing ? /* @__PURE__ */ React__default.createElement(Composer, {
-      className: "lb-comment-composer",
-      onComposerSubmit: handleEditSubmit,
-      defaultValue: comment.body,
-      defaultAttachments: comment.attachments,
-      autoFocus: true,
-      showAttribution: false,
-      showAttachments,
-      showFormattingControls: showComposerFormattingControls,
-      actions: /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(Tooltip, {
-        content: $.COMMENT_EDIT_COMPOSER_CANCEL,
-        "aria-label": $.COMMENT_EDIT_COMPOSER_CANCEL
-      }, /* @__PURE__ */ React__default.createElement(Button, {
-        className: "lb-composer-action",
-        onClick: handleEditCancel
-      }, /* @__PURE__ */ React__default.createElement(CrossIcon, {
-        className: "lb-button-icon"
-      }))), /* @__PURE__ */ React__default.createElement(ShortcutTooltip, {
-        content: $.COMMENT_EDIT_COMPOSER_SAVE,
-        shortcut: /* @__PURE__ */ React__default.createElement(ShortcutTooltipKey, {
-          name: "enter"
-        })
-      }, /* @__PURE__ */ React__default.createElement(ComposerSubmit, {
-        asChild: true
-      }, /* @__PURE__ */ React__default.createElement(Button, {
-        variant: "primary",
-        className: "lb-composer-action",
-        onClick: stopPropagation,
-        "aria-label": $.COMMENT_EDIT_COMPOSER_SAVE
-      }, /* @__PURE__ */ React__default.createElement(CheckIcon, {
-        className: "lb-button-icon"
-      }))))),
-      overrides: {
-        COMPOSER_PLACEHOLDER: $.COMMENT_EDIT_COMPOSER_PLACEHOLDER
-      },
-      roomId: comment.roomId
-    }) : comment.body ? /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(CommentBody, {
-      className: "lb-comment-body",
-      body: comment.body,
-      components: {
-        Mention: ({ userId }) => /* @__PURE__ */ React__default.createElement(CommentMention, {
-          userId,
-          onClick: (event) => onMentionClick?.(userId, event)
+    return /* @__PURE__ */ jsxs(TooltipProvider, {
+      children: [
+        autoMarkReadThreadId && /* @__PURE__ */ jsx(AutoMarkReadThreadIdHandler, {
+          commentRef: ref,
+          threadId: autoMarkReadThreadId,
+          roomId: comment.roomId
         }),
-        Link: CommentLink
-      }
-    }), showAttachments && (mediaAttachments.length > 0 || fileAttachments.length > 0) ? /* @__PURE__ */ React__default.createElement("div", {
-      className: "lb-comment-attachments"
-    }, mediaAttachments.length > 0 ? /* @__PURE__ */ React__default.createElement("div", {
-      className: "lb-attachments"
-    }, mediaAttachments.map((attachment) => /* @__PURE__ */ React__default.createElement(CommentMediaAttachment, {
-      key: attachment.id,
-      attachment,
-      overrides,
-      onAttachmentClick,
-      roomId: comment.roomId
-    }))) : null, fileAttachments.length > 0 ? /* @__PURE__ */ React__default.createElement("div", {
-      className: "lb-attachments"
-    }, fileAttachments.map((attachment) => /* @__PURE__ */ React__default.createElement(CommentFileAttachment, {
-      key: attachment.id,
-      attachment,
-      overrides,
-      onAttachmentClick,
-      roomId: comment.roomId
-    }))) : null) : null, showReactions && comment.reactions.length > 0 && /* @__PURE__ */ React__default.createElement("div", {
-      className: "lb-comment-reactions"
-    }, comment.reactions.map((reaction) => /* @__PURE__ */ React__default.createElement(CommentReaction, {
-      key: reaction.emoji,
-      comment,
-      reaction,
-      overrides
-    })), /* @__PURE__ */ React__default.createElement(EmojiPicker, {
-      onEmojiSelect: handleReactionSelect
-    }, /* @__PURE__ */ React__default.createElement(Tooltip, {
-      content: $.COMMENT_ADD_REACTION
-    }, /* @__PURE__ */ React__default.createElement(PopoverTrigger, {
-      asChild: true
-    }, /* @__PURE__ */ React__default.createElement(Button, {
-      className: "lb-comment-reaction lb-comment-reaction-add",
-      variant: "outline",
-      onClick: stopPropagation,
-      "aria-label": $.COMMENT_ADD_REACTION
-    }, /* @__PURE__ */ React__default.createElement(EmojiAddIcon, {
-      className: "lb-button-icon"
-    }))))))) : /* @__PURE__ */ React__default.createElement("div", {
-      className: "lb-comment-body"
-    }, /* @__PURE__ */ React__default.createElement("p", {
-      className: "lb-comment-deleted"
-    }, $.COMMENT_DELETED)))));
+        /* @__PURE__ */ jsxs("div", {
+          id: comment.id,
+          className: classNames(
+            "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: [
+                        /* @__PURE__ */ jsx(User, {
+                          className: "lb-comment-author",
+                          userId: comment.userId,
+                          onClick: handleAuthorClick
+                        }),
+                        /* @__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: classNames(
+                    "lb-comment-actions",
+                    additionalActionsClassName
+                  ),
+                  children: [
+                    additionalActions ?? null,
+                    showReactions && /* @__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,
+                            children: /* @__PURE__ */ jsx(EmojiAddIcon, {
+                              className: "lb-button-icon"
+                            })
+                          })
+                        })
+                      })
+                    }),
+                    comment.userId === currentUserId && /* @__PURE__ */ jsx(Dropdown, {
+                      open: isMoreActionOpen,
+                      onOpenChange: setMoreActionOpen,
+                      align: "end",
+                      content: /* @__PURE__ */ jsxs(Fragment, {
+                        children: [
+                          /* @__PURE__ */ jsxs(DropdownItem, {
+                            onSelect: handleEdit,
+                            onClick: stopPropagation,
+                            children: [
+                              /* @__PURE__ */ jsx(EditIcon, {
+                                className: "lb-dropdown-item-icon"
+                              }),
+                              $.COMMENT_EDIT
+                            ]
+                          }),
+                          /* @__PURE__ */ jsxs(DropdownItem, {
+                            onSelect: handleDelete,
+                            onClick: stopPropagation,
+                            children: [
+                              /* @__PURE__ */ jsx(DeleteIcon, {
+                                className: "lb-dropdown-item-icon"
+                              }),
+                              $.COMMENT_DELETE
+                            ]
+                          })
+                        ]
+                      }),
+                      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,
+                            children: /* @__PURE__ */ jsx(EllipsisIcon, {
+                              className: "lb-button-icon"
+                            })
+                          })
+                        })
+                      })
+                    })
+                  ]
+                })
+              ]
+            }),
+            /* @__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, {
+                        className: "lb-composer-action",
+                        onClick: handleEditCancel,
+                        children: /* @__PURE__ */ jsx(CrossIcon, {
+                          className: "lb-button-icon"
+                        })
+                      })
+                    }),
+                    /* @__PURE__ */ jsx(ShortcutTooltip, {
+                      content: $.COMMENT_EDIT_COMPOSER_SAVE,
+                      shortcut: /* @__PURE__ */ jsx(ShortcutTooltipKey, {
+                        name: "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,
+                          children: /* @__PURE__ */ jsx(CheckIcon, {
+                            className: "lb-button-icon"
+                          })
+                        })
+                      })
+                    })
+                  ]
+                }),
+                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: ({ userId }) => /* @__PURE__ */ jsx(CommentMention, {
+                        userId,
+                        onClick: (event) => onMentionClick?.(userId, event)
+                      }),
+                      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
+                      }, reaction.emoji)),
+                      /* @__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,
+                              children: /* @__PURE__ */ jsx(EmojiAddIcon, {
+                                className: "lb-button-icon"
+                              })
+                            })
+                          })
+                        })
+                      })
+                    ]
+                  })
+                ]
+              }) : /* @__PURE__ */ jsx("div", {
+                className: "lb-comment-body",
+                children: /* @__PURE__ */ jsx("p", {
+                  className: "lb-comment-deleted",
+                  children: $.COMMENT_DELETED
+                })
+              })
+            })
+          ]
+        })
+      ]
+    });
   }
 );