@liveblocks/react-ui 3.9.1 → 3.9.2-tiptap1

package/dist/components/Comment.js

@@ -45,20 +45,18 @@ function CommentUserMention({
   ...props
 }) {
   const currentId = useCurrentUserId();
-  return /* @__PURE__ */ jsxs(CommentMention$1, {
-    className: cn("lb-mention lb-comment-mention", className),
-    "data-self": mention.id === currentId ? "" : void 0,
-    ...props,
-    children: [
-      /* @__PURE__ */ jsx("span", {
-        className: "lb-mention-symbol",
-        children: MENTION_CHARACTER
-      }),
-      /* @__PURE__ */ jsx(User, {
-        userId: mention.id
-      })
-    ]
-  });
+  return /* @__PURE__ */ jsxs(
+    CommentMention$1,
+    {
+      className: cn("lb-mention lb-comment-mention", className),
+      "data-self": mention.id === currentId ? "" : void 0,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "lb-mention-symbol", children: MENTION_CHARACTER }),
+        /* @__PURE__ */ jsx(User, { userId: mention.id })
+      ]
+    }
+  );
 }
 function CommentGroupMention({
   mention,
@@ -66,33 +64,25 @@ function CommentGroupMention({
   ...props
 }) {
   const isMember = useIsGroupMentionMember(mention);
-  return /* @__PURE__ */ jsxs(CommentMention$1, {
-    className: cn("lb-mention lb-comment-mention", className),
-    "data-self": isMember ? "" : void 0,
-    ...props,
-    children: [
-      /* @__PURE__ */ jsx("span", {
-        className: "lb-mention-symbol",
-        children: MENTION_CHARACTER
-      }),
-      /* @__PURE__ */ jsx(Group, {
-        groupId: mention.id
-      })
-    ]
-  });
+  return /* @__PURE__ */ jsxs(
+    CommentMention$1,
+    {
+      className: cn("lb-mention lb-comment-mention", className),
+      "data-self": isMember ? "" : void 0,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "lb-mention-symbol", children: MENTION_CHARACTER }),
+        /* @__PURE__ */ jsx(Group, { groupId: mention.id })
+      ]
+    }
+  );
 }
 function CommentMention({ mention, ...props }) {
   switch (mention.kind) {
     case "user":
-      return /* @__PURE__ */ jsx(CommentUserMention, {
-        mention,
-        ...props
-      });
+      return /* @__PURE__ */ jsx(CommentUserMention, { mention, ...props });
     case "group":
-      return /* @__PURE__ */ jsx(CommentGroupMention, {
-        mention,
-        ...props
-      });
+      return /* @__PURE__ */ jsx(CommentGroupMention, { mention, ...props });
     default:
       return assertNever(mention, "Unhandled mention kind");
   }
@@ -104,16 +94,16 @@ function CommentLink({
   ...props
 }) {
   const { Anchor } = useComponents();
-  return /* @__PURE__ */ jsx(CommentLink$1, {
-    className: cn("lb-comment-link", className),
-    href,
-    ...props,
-    asChild: true,
-    children: /* @__PURE__ */ jsx(Anchor, {
+  return /* @__PURE__ */ jsx(
+    CommentLink$1,
+    {
+      className: cn("lb-comment-link", className),
+      href,
       ...props,
-      children
-    })
-  });
+      asChild: true,
+      children: /* @__PURE__ */ jsx(Anchor, { ...props, children })
+    }
+  );
 }
 function CommentNonInteractiveLink({
   href: _href,
@@ -121,34 +111,27 @@ function CommentNonInteractiveLink({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx("span", {
-    className: cn("lb-comment-link", className),
-    ...props,
-    children
-  });
+  return /* @__PURE__ */ jsx("span", { className: cn("lb-comment-link", className), ...props, children });
 }
 const CommentReactionButton = forwardRef(({ reaction, overrides, className, ...props }, forwardedRef) => {
   const $ = useOverrides(overrides);
-  return /* @__PURE__ */ jsxs(CustomButton, {
-    className: cn("lb-comment-reaction", className),
-    variant: "outline",
-    "aria-label": $.COMMENT_REACTION_DESCRIPTION(
-      reaction.emoji,
-      reaction.users.length
-    ),
-    ...props,
-    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
-      })
-    ]
-  });
+  return /* @__PURE__ */ jsxs(
+    CustomButton,
+    {
+      className: cn("lb-comment-reaction", className),
+      variant: "outline",
+      "aria-label": $.COMMENT_REACTION_DESCRIPTION(
+        reaction.emoji,
+        reaction.users.length
+      ),
+      ...props,
+      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);
@@ -159,21 +142,19 @@ const CommentReaction = forwardRef(({ comment, reaction, overrides, disabled, ..
   }, [currentId, reaction]);
   const $ = useOverrides(overrides);
   const tooltipContent = useMemo(
-    () => /* @__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)),
+    () => /* @__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.emoji,
+      reaction.users.length
+    ) }),
     [$, reaction]
   );
   const stopPropagation = useCallback((event) => {
@@ -197,39 +178,51 @@ const CommentReaction = forwardRef(({ comment, reaction, overrides, disabled, ..
     },
     [addReaction, comment.threadId, comment.id, reaction.emoji, removeReaction]
   );
-  return /* @__PURE__ */ jsx(Tooltip, {
-    content: tooltipContent,
-    multiline: true,
-    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
-      })
-    })
-  });
+  return /* @__PURE__ */ jsx(
+    Tooltip,
+    {
+      content: tooltipContent,
+      multiline: true,
+      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__ */ jsx(CommentReactionButton, {
-    disableable: false,
-    "data-self": isActive ? "" : void 0,
-    reaction,
-    overrides,
-    ...props,
-    ref: forwardedRef
-  });
+  return /* @__PURE__ */ jsx(
+    CommentReactionButton,
+    {
+      disableable: false,
+      "data-self": isActive ? "" : void 0,
+      reaction,
+      overrides,
+      ...props,
+      ref: forwardedRef
+    }
+  );
 });
 function openAttachment({ attachment, url }) {
   if (attachment.mimeType === "application/pdf" || attachment.mimeType.startsWith("image/") || attachment.mimeType.startsWith("video/") || attachment.mimeType.startsWith("audio/")) {
@@ -261,14 +254,17 @@ function CommentMediaAttachment({
     },
     [attachment, onAttachmentClick, url]
   );
-  return /* @__PURE__ */ jsx(MediaAttachment, {
-    className: cn("lb-comment-attachment", className),
-    ...props,
-    attachment,
-    overrides,
-    onClick: url ? handleClick : void 0,
-    roomId
-  });
+  return /* @__PURE__ */ jsx(
+    MediaAttachment,
+    {
+      className: cn("lb-comment-attachment", className),
+      ...props,
+      attachment,
+      overrides,
+      onClick: url ? handleClick : void 0,
+      roomId
+    }
+  );
 }
 function CommentFileAttachment({
   attachment,
@@ -293,24 +289,30 @@ function CommentFileAttachment({
     },
     [attachment, onAttachmentClick, url]
   );
-  return /* @__PURE__ */ jsx(FileAttachment, {
-    className: cn("lb-comment-attachment", className),
-    ...props,
-    attachment,
-    overrides,
-    onClick: url ? handleClick : void 0,
-    roomId
-  });
+  return /* @__PURE__ */ jsx(
+    FileAttachment,
+    {
+      className: cn("lb-comment-attachment", className),
+      ...props,
+      attachment,
+      overrides,
+      onClick: url ? handleClick : void 0,
+      roomId
+    }
+  );
 }
 function CommentNonInteractiveFileAttachment({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx(FileAttachment, {
-    className: cn("lb-comment-attachment", className),
-    allowMediaPreview: false,
-    ...props
-  });
+  return /* @__PURE__ */ jsx(
+    FileAttachment,
+    {
+      className: cn("lb-comment-attachment", className),
+      allowMediaPreview: false,
+      ...props
+    }
+  );
 }
 function AutoMarkReadThreadIdHandler({
   threadId,
@@ -327,6 +329,7 @@ function AutoMarkReadThreadIdHandler({
       }
     },
     {
+      // The underlying IntersectionObserver is only enabled when the window is focused
       enabled: isWindowFocused
     }
   );
@@ -460,260 +463,257 @@ const Comment = forwardRef(
     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: [
-                          /* @__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: cn(
-                      "lb-comment-actions",
-                      additionalActionsClassName
+    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: [
+                  /* @__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"
+                      }
                     ),
-                    children: [
-                      additionalActions ?? null,
-                      showReactions && canComment ? /* @__PURE__ */ jsx(EmojiPicker, {
+                    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",
+                    additionalActionsClassName
+                  ),
+                  children: [
+                    additionalActions ?? 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,
-                      comment.userId === currentUserId || additionalDropdownItemsBefore || additionalDropdownItemsAfter ? /* @__PURE__ */ jsx(Dropdown, {
+                        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,
+                    comment.userId === currentUserId || additionalDropdownItemsBefore || additionalDropdownItemsAfter ? /* @__PURE__ */ jsx(
+                      Dropdown,
+                      {
                         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(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, {
-                        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",
+                        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(
+                          Button,
+                          {
+                            className: "lb-comment-action",
+                            disabled: !comment.body,
                             onClick: stopPropagation,
-                            "aria-label": $.COMMENT_EDIT_COMPOSER_SAVE,
-                            icon: /* @__PURE__ */ jsx(CheckIcon, {})
-                          })
-                        })
-                      })
-                    ]
-                  }),
-                  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
+                            "aria-label": $.COMMENT_MORE,
+                            icon: /* @__PURE__ */ jsx(EllipsisIcon, {})
+                          }
+                        ) }) })
                       }
-                    }),
-                    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
-                      ]
-                    })
+                    ) : null
                   ]
-                }) : /* @__PURE__ */ jsx("div", {
+                }
+              )
+            ] }),
+            /* @__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,
+                          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
+              }
+            ) : comment.body ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                CommentBody,
+                {
                   className: "lb-comment-body",
-                  children: /* @__PURE__ */ jsx("p", {
-                    className: "lb-comment-deleted",
-                    children: $.COMMENT_DELETED
-                  })
-                })
-              })
-            ]
-          })
-        ]
-      })
-    });
+                  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 }) }) })
+          ]
+        }
+      )
+    ] }) });
   }
 );