@liveblocks/react-ui 3.9.1 → 3.9.2-tiptap2

package/dist/components/Composer.cjs

@@ -59,17 +59,17 @@ function ComposerInsertMentionEditorAction({
     },
     [createMention, onClick]
   );
-  return /* @__PURE__ */ jsxRuntime.jsx(Tooltip.Tooltip, {
-    content: tooltipLabel ?? label,
-    children: /* @__PURE__ */ jsxRuntime.jsx(Button.Button, {
+  return /* @__PURE__ */ jsxRuntime.jsx(Tooltip.Tooltip, { content: tooltipLabel ?? label, children: /* @__PURE__ */ jsxRuntime.jsx(
+    Button.Button,
+    {
       className: cn.cn("lb-composer-editor-action", className),
       onPointerDown: preventDefault,
       onClick: handleClick,
       "aria-label": label,
       icon: /* @__PURE__ */ jsxRuntime.jsx(Mention.MentionIcon, {}),
       ...props
-    })
-  });
+    }
+  ) });
 }
 function ComposerInsertEmojiEditorAction({
   label,
@@ -85,24 +85,17 @@ function ComposerInsertEmojiEditorAction({
   const stopPropagation = react.useCallback((event) => {
     event.stopPropagation();
   }, []);
-  return /* @__PURE__ */ jsxRuntime.jsx(EmojiPicker.EmojiPicker, {
-    onEmojiSelect: insertText,
-    onOpenChange: onPickerOpenChange,
-    children: /* @__PURE__ */ jsxRuntime.jsx(Tooltip.Tooltip, {
-      content: tooltipLabel ?? label,
-      children: /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive.PopoverTrigger, {
-        asChild: true,
-        children: /* @__PURE__ */ jsxRuntime.jsx(Button.Button, {
-          className: cn.cn("lb-composer-editor-action", className),
-          onPointerDown: preventDefault,
-          onClick: stopPropagation,
-          "aria-label": label,
-          icon: /* @__PURE__ */ jsxRuntime.jsx(Emoji.EmojiIcon, {}),
-          ...props
-        })
-      })
-    })
-  });
+  return /* @__PURE__ */ jsxRuntime.jsx(EmojiPicker.EmojiPicker, { onEmojiSelect: insertText, onOpenChange: onPickerOpenChange, children: /* @__PURE__ */ jsxRuntime.jsx(Tooltip.Tooltip, { content: tooltipLabel ?? label, children: /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive.PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+    Button.Button,
+    {
+      className: cn.cn("lb-composer-editor-action", className),
+      onPointerDown: preventDefault,
+      onClick: stopPropagation,
+      "aria-label": label,
+      icon: /* @__PURE__ */ jsxRuntime.jsx(Emoji.EmojiIcon, {}),
+      ...props
+    }
+  ) }) }) });
 }
 function ComposerAttachFilesEditorAction({
   label,
@@ -116,63 +109,44 @@ function ComposerAttachFilesEditorAction({
   const stopPropagation = react.useCallback((event) => {
     event.stopPropagation();
   }, []);
-  return /* @__PURE__ */ jsxRuntime.jsx(Tooltip.Tooltip, {
-    content: tooltipLabel ?? label,
-    children: /* @__PURE__ */ jsxRuntime.jsx(index.AttachFiles, {
-      asChild: true,
-      children: /* @__PURE__ */ jsxRuntime.jsx(Button.Button, {
-        className: cn.cn("lb-composer-editor-action", className),
-        onPointerDown: preventDefault,
-        onClick: stopPropagation,
-        "aria-label": label,
-        icon: /* @__PURE__ */ jsxRuntime.jsx(Attachment.AttachmentIcon, {}),
-        ...props
-      })
-    })
-  });
+  return /* @__PURE__ */ jsxRuntime.jsx(Tooltip.Tooltip, { content: tooltipLabel ?? label, children: /* @__PURE__ */ jsxRuntime.jsx(index.AttachFiles, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+    Button.Button,
+    {
+      className: cn.cn("lb-composer-editor-action", className),
+      onPointerDown: preventDefault,
+      onClick: stopPropagation,
+      "aria-label": label,
+      icon: /* @__PURE__ */ jsxRuntime.jsx(Attachment.AttachmentIcon, {}),
+      ...props
+    }
+  ) }) });
 }
 function ComposerUserMention({ mention }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(index.Mention, {
-    className: "lb-mention lb-composer-mention",
-    children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", {
-        className: "lb-mention-symbol",
-        children: core.MENTION_CHARACTER
-      }),
-      /* @__PURE__ */ jsxRuntime.jsx(User.User, {
-        userId: mention.id
-      })
-    ]
-  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(index.Mention, { className: "lb-mention lb-composer-mention", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "lb-mention-symbol", children: core.MENTION_CHARACTER }),
+    /* @__PURE__ */ jsxRuntime.jsx(User.User, { userId: mention.id })
+  ] });
 }
 function ComposerGroupMention({ mention }) {
   const isMember = useGroupMention.useIsGroupMentionMember(mention);
-  return /* @__PURE__ */ jsxRuntime.jsxs(index.Mention, {
-    className: "lb-mention lb-composer-mention",
-    "data-self": isMember ? "" : void 0,
-    children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", {
-        className: "lb-mention-symbol",
-        children: core.MENTION_CHARACTER
-      }),
-      /* @__PURE__ */ jsxRuntime.jsx(Group.Group, {
-        groupId: mention.id
-      })
-    ]
-  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    index.Mention,
+    {
+      className: "lb-mention lb-composer-mention",
+      "data-self": isMember ? "" : void 0,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "lb-mention-symbol", children: core.MENTION_CHARACTER }),
+        /* @__PURE__ */ jsxRuntime.jsx(Group.Group, { groupId: mention.id })
+      ]
+    }
+  );
 }
 function ComposerMention({ mention, ...props }) {
   switch (mention.kind) {
     case "user":
-      return /* @__PURE__ */ jsxRuntime.jsx(ComposerUserMention, {
-        mention,
-        ...props
-      });
+      return /* @__PURE__ */ jsxRuntime.jsx(ComposerUserMention, { mention, ...props });
     case "group":
-      return /* @__PURE__ */ jsxRuntime.jsx(ComposerGroupMention, {
-        mention,
-        ...props
-      });
+      return /* @__PURE__ */ jsxRuntime.jsx(ComposerGroupMention, { mention, ...props });
     default:
       return core.assertNever(mention, "Unhandled mention kind");
   }
@@ -180,46 +154,55 @@ function ComposerMention({ mention, ...props }) {
 function ComposerMentionSuggestions({
   mentions
 }) {
-  return mentions.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(index.Suggestions, {
-    className: "lb-root lb-portal lb-elevation lb-composer-suggestions lb-composer-mention-suggestions",
-    children: /* @__PURE__ */ jsxRuntime.jsx(index.SuggestionsList, {
-      className: "lb-composer-suggestions-list lb-composer-mention-suggestions-list",
-      children: mentions.map((mention) => {
-        return /* @__PURE__ */ jsxRuntime.jsx(index.SuggestionsListItem, {
-          className: "lb-composer-suggestions-list-item lb-composer-mention-suggestion",
-          value: mention.id,
-          children: mention.kind === "user" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(Avatar.Avatar, {
-                userId: mention.id,
-                className: "lb-composer-mention-suggestion-avatar"
-              }),
-              /* @__PURE__ */ jsxRuntime.jsx(User.User, {
-                userId: mention.id,
-                className: "lb-composer-mention-suggestion-user"
-              })
-            ]
-          }) : mention.kind === "group" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(Avatar.Avatar, {
-                groupId: mention.id,
-                className: "lb-composer-mention-suggestion-avatar",
-                icon: /* @__PURE__ */ jsxRuntime.jsx(Users.UsersIcon, {})
-              }),
-              /* @__PURE__ */ jsxRuntime.jsx(Group.Group, {
-                groupId: mention.id,
-                className: "lb-composer-mention-suggestion-group",
-                children: /* @__PURE__ */ jsxRuntime.jsx(GroupDescription.GroupDescription, {
+  return mentions.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(index.Suggestions, { className: "lb-root lb-portal lb-elevation lb-composer-suggestions lb-composer-mention-suggestions", children: /* @__PURE__ */ jsxRuntime.jsx(index.SuggestionsList, { className: "lb-composer-suggestions-list lb-composer-mention-suggestions-list", children: mentions.map((mention) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      index.SuggestionsListItem,
+      {
+        className: "lb-composer-suggestions-list-item lb-composer-mention-suggestion",
+        value: mention.id,
+        children: mention.kind === "user" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Avatar.Avatar,
+            {
+              userId: mention.id,
+              className: "lb-composer-mention-suggestion-avatar"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            User.User,
+            {
+              userId: mention.id,
+              className: "lb-composer-mention-suggestion-user"
+            }
+          )
+        ] }) : mention.kind === "group" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Avatar.Avatar,
+            {
+              groupId: mention.id,
+              className: "lb-composer-mention-suggestion-avatar",
+              icon: /* @__PURE__ */ jsxRuntime.jsx(Users.UsersIcon, {})
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Group.Group,
+            {
+              groupId: mention.id,
+              className: "lb-composer-mention-suggestion-group",
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                GroupDescription.GroupDescription,
+                {
                   groupId: mention.id,
                   className: "lb-composer-mention-suggestion-group-description"
-                })
-              })
-            ]
-          }) : core.assertNever(mention, "Unhandled mention kind")
-        }, mention.id);
-      })
-    })
-  }) : null;
+                }
+              )
+            }
+          )
+        ] }) : core.assertNever(mention, "Unhandled mention kind")
+      },
+      mention.id
+    );
+  }) }) }) : null;
 }
 function MarkToggle({
   mark,
@@ -232,58 +215,35 @@ function MarkToggle({
   const label = react.useMemo(() => {
     return $.COMPOSER_TOGGLE_MARK(mark);
   }, [$, mark]);
-  return /* @__PURE__ */ jsxRuntime.jsx(Tooltip.ShortcutTooltip, {
-    content: label,
-    shortcut,
-    sideOffset: constants.FLOATING_ELEMENT_SIDE_OFFSET + 2,
-    children: /* @__PURE__ */ jsxRuntime.jsx(index.MarkToggle, {
-      mark,
-      asChild: true,
-      ...props,
-      children: /* @__PURE__ */ jsxRuntime.jsx(Button.Button, {
-        "aria-label": label,
-        variant: "toolbar",
-        icon,
-        children
-      })
-    })
-  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Tooltip.ShortcutTooltip,
+    {
+      content: label,
+      shortcut,
+      sideOffset: constants.FLOATING_ELEMENT_SIDE_OFFSET + 2,
+      children: /* @__PURE__ */ jsxRuntime.jsx(index.MarkToggle, { mark, asChild: true, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { "aria-label": label, variant: "toolbar", icon, children }) })
+    }
+  );
 }
 const markToggles = {
-  bold: () => /* @__PURE__ */ jsxRuntime.jsx(MarkToggle, {
-    mark: "bold",
-    shortcut: "Mod-B",
-    icon: /* @__PURE__ */ jsxRuntime.jsx(Bold.BoldIcon, {})
-  }),
-  italic: () => /* @__PURE__ */ jsxRuntime.jsx(MarkToggle, {
-    mark: "italic",
-    shortcut: "Mod-I",
-    icon: /* @__PURE__ */ jsxRuntime.jsx(Italic.ItalicIcon, {})
-  }),
-  strikethrough: () => /* @__PURE__ */ jsxRuntime.jsx(MarkToggle, {
-    mark: "strikethrough",
-    shortcut: "Mod-Shift-S",
-    icon: /* @__PURE__ */ jsxRuntime.jsx(Strikethrough.StrikethroughIcon, {})
-  }),
-  code: () => /* @__PURE__ */ jsxRuntime.jsx(MarkToggle, {
-    mark: "code",
-    shortcut: "Mod-E",
-    icon: /* @__PURE__ */ jsxRuntime.jsx(Code.CodeIcon, {})
-  })
+  bold: () => /* @__PURE__ */ jsxRuntime.jsx(MarkToggle, { mark: "bold", shortcut: "Mod-B", icon: /* @__PURE__ */ jsxRuntime.jsx(Bold.BoldIcon, {}) }),
+  italic: () => /* @__PURE__ */ jsxRuntime.jsx(MarkToggle, { mark: "italic", shortcut: "Mod-I", icon: /* @__PURE__ */ jsxRuntime.jsx(Italic.ItalicIcon, {}) }),
+  strikethrough: () => /* @__PURE__ */ jsxRuntime.jsx(
+    MarkToggle,
+    {
+      mark: "strikethrough",
+      shortcut: "Mod-Shift-S",
+      icon: /* @__PURE__ */ jsxRuntime.jsx(Strikethrough.StrikethroughIcon, {})
+    }
+  ),
+  code: () => /* @__PURE__ */ jsxRuntime.jsx(MarkToggle, { mark: "code", shortcut: "Mod-E", icon: /* @__PURE__ */ jsxRuntime.jsx(Code.CodeIcon, {}) })
 };
 const markTogglesList = Object.entries(markToggles).map(([mark, Toggle]) => /* @__PURE__ */ jsxRuntime.jsx(Toggle, {}, mark));
 function ComposerFloatingToolbar() {
-  return /* @__PURE__ */ jsxRuntime.jsx(index.FloatingToolbar, {
-    className: "lb-root lb-portal lb-elevation lb-composer-floating-toolbar",
-    children: markTogglesList
-  });
+  return /* @__PURE__ */ jsxRuntime.jsx(index.FloatingToolbar, { className: "lb-root lb-portal lb-elevation lb-composer-floating-toolbar", children: markTogglesList });
 }
 function ComposerLink({ href, children }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(index.Link, {
-    href,
-    className: "lb-composer-link",
-    children
-  });
+  return /* @__PURE__ */ jsxRuntime.jsx(index.Link, { href, className: "lb-composer-link", children });
 }
 function ComposerFileAttachment({
   attachment,
@@ -296,15 +256,18 @@ function ComposerFileAttachment({
   const handleDeleteClick = react.useCallback(() => {
     removeAttachment(attachment.id);
   }, [attachment.id, removeAttachment]);
-  return /* @__PURE__ */ jsxRuntime.jsx(Attachment$1.FileAttachment, {
-    className: cn.cn("lb-composer-attachment", className),
-    ...props,
-    attachment,
-    onDeleteClick: handleDeleteClick,
-    preventFocusOnDelete: true,
-    overrides,
-    roomId
-  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Attachment$1.FileAttachment,
+    {
+      className: cn.cn("lb-composer-attachment", className),
+      ...props,
+      attachment,
+      onDeleteClick: handleDeleteClick,
+      preventFocusOnDelete: true,
+      overrides,
+      roomId
+    }
+  );
 }
 function ComposerAttachments({
   overrides,
@@ -315,19 +278,16 @@ function ComposerAttachments({
   if (attachments.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsxRuntime.jsx("div", {
-    className: cn.cn("lb-composer-attachments", className),
-    ...props,
-    children: /* @__PURE__ */ jsxRuntime.jsx("div", {
-      className: "lb-attachments",
-      children: attachments.map((attachment) => {
-        return /* @__PURE__ */ jsxRuntime.jsx(ComposerFileAttachment, {
-          attachment,
-          overrides
-        }, attachment.id);
-      })
-    })
-  });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn.cn("lb-composer-attachments", className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lb-attachments", children: attachments.map((attachment) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      ComposerFileAttachment,
+      {
+        attachment,
+        overrides
+      },
+      attachment.id
+    );
+  }) }) });
 }
 const editorRequiredComponents = {
   Mention: ComposerMention,
@@ -370,11 +330,10 @@ function ComposerEditorContainer({
   const stopPropagation = react.useCallback((event) => {
     event.stopPropagation();
   }, []);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
-    className: "lb-composer-editor-container",
-    ...dropAreaProps,
-    children: [
-      /* @__PURE__ */ jsxRuntime.jsx(index.Editor, {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lb-composer-editor-container", ...dropAreaProps, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      index.Editor,
+      {
         className: "lb-composer-editor",
         onClick: onEditorClick,
         placeholder: $.COMPOSER_PLACEHOLDER,
@@ -383,66 +342,52 @@ function ComposerEditorContainer({
         components,
         disabled,
         dir: $.dir
-      }),
-      showAttachments && /* @__PURE__ */ jsxRuntime.jsx(ComposerAttachments, {
-        overrides: overrides$1
-      }),
-      (!isCollapsed || isDraggingOver) && /* @__PURE__ */ jsxRuntime.jsxs("div", {
-        className: "lb-composer-footer",
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", {
-            className: "lb-composer-editor-actions",
-            children: [
-              hasResolveMentionSuggestions && /* @__PURE__ */ jsxRuntime.jsx(ComposerInsertMentionEditorAction, {
-                label: $.COMPOSER_INSERT_MENTION,
-                disabled
-              }),
-              /* @__PURE__ */ jsxRuntime.jsx(ComposerInsertEmojiEditorAction, {
-                label: $.COMPOSER_INSERT_EMOJI,
-                onPickerOpenChange: onEmojiPickerOpenChange,
-                disabled
-              }),
-              showAttachments && /* @__PURE__ */ jsxRuntime.jsx(ComposerAttachFilesEditorAction, {
-                label: $.COMPOSER_ATTACH_FILES,
-                disabled
-              })
-            ]
-          }),
-          showAttribution && /* @__PURE__ */ jsxRuntime.jsx(Attribution.Attribution, {}),
-          /* @__PURE__ */ jsxRuntime.jsx("div", {
-            className: "lb-composer-actions",
-            children: actions ?? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {
-              children: /* @__PURE__ */ jsxRuntime.jsx(Tooltip.ShortcutTooltip, {
-                content: $.COMPOSER_SEND,
-                shortcut: "Enter",
-                children: /* @__PURE__ */ jsxRuntime.jsx(index.Submit, {
-                  asChild: true,
-                  children: /* @__PURE__ */ jsxRuntime.jsx(Button.Button, {
-                    onPointerDown: preventDefault,
-                    onClick: stopPropagation,
-                    className: "lb-composer-action",
-                    variant: "primary",
-                    "aria-label": $.COMPOSER_SEND,
-                    icon: /* @__PURE__ */ jsxRuntime.jsx(Send.SendIcon, {})
-                  })
-                })
-              })
-            })
-          })
-        ]
-      }),
-      showAttachments && isDraggingOver && /* @__PURE__ */ jsxRuntime.jsx("div", {
-        className: "lb-composer-attachments-drop-area",
-        children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
-          className: "lb-composer-attachments-drop-area-label",
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(Attachment.AttachmentIcon, {}),
-            $.COMPOSER_ATTACH_FILES
-          ]
-        })
-      })
-    ]
-  });
+      }
+    ),
+    showAttachments && /* @__PURE__ */ jsxRuntime.jsx(ComposerAttachments, { overrides: overrides$1 }),
+    (!isCollapsed || isDraggingOver) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lb-composer-footer", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lb-composer-editor-actions", children: [
+        hasResolveMentionSuggestions && /* @__PURE__ */ jsxRuntime.jsx(
+          ComposerInsertMentionEditorAction,
+          {
+            label: $.COMPOSER_INSERT_MENTION,
+            disabled
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ComposerInsertEmojiEditorAction,
+          {
+            label: $.COMPOSER_INSERT_EMOJI,
+            onPickerOpenChange: onEmojiPickerOpenChange,
+            disabled
+          }
+        ),
+        showAttachments && /* @__PURE__ */ jsxRuntime.jsx(
+          ComposerAttachFilesEditorAction,
+          {
+            label: $.COMPOSER_ATTACH_FILES,
+            disabled
+          }
+        )
+      ] }),
+      showAttribution && /* @__PURE__ */ jsxRuntime.jsx(Attribution.Attribution, {}),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lb-composer-actions", children: actions ?? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(Tooltip.ShortcutTooltip, { content: $.COMPOSER_SEND, shortcut: "Enter", children: /* @__PURE__ */ jsxRuntime.jsx(index.Submit, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+        Button.Button,
+        {
+          onPointerDown: preventDefault,
+          onClick: stopPropagation,
+          className: "lb-composer-action",
+          variant: "primary",
+          "aria-label": $.COMPOSER_SEND,
+          icon: /* @__PURE__ */ jsxRuntime.jsx(Send.SendIcon, {})
+        }
+      ) }) }) }) })
+    ] }),
+    showAttachments && isDraggingOver && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lb-composer-attachments-drop-area", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lb-composer-attachments-drop-area-label", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Attachment.AttachmentIcon, {}),
+      $.COMPOSER_ATTACH_FILES
+    ] }) })
+  ] });
 }
 const ComposerRoomIdContext = react.createContext(null);
 const Composer = react.forwardRef(
@@ -587,8 +532,9 @@ const Composer = react.forwardRef(
         threadId
       ]
     );
-    return /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive.TooltipProvider, {
-      children: /* @__PURE__ */ jsxRuntime.jsx(index.Form, {
+    return /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive.TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      index.Form,
+      {
         onComposerSubmit: handleComposerSubmit,
         className: cn.cn("lb-root lb-composer lb-composer-form", className),
         dir: $.dir,
@@ -603,23 +549,26 @@ const Composer = react.forwardRef(
         preventUnsavedChanges: preventUnsavedComposerChanges,
         blurOnSubmit,
         roomId,
-        children: /* @__PURE__ */ jsxRuntime.jsx(ComposerEditorContainer, {
-          defaultValue,
-          actions,
-          overrides: overrides$1,
-          isCollapsed,
-          showAttachments,
-          showAttribution,
-          showFormattingControls,
-          hasResolveMentionSuggestions,
-          onEmptyChange: setEmptyRef,
-          onEmojiPickerOpenChange: setEmojiPickerOpenRef,
-          onEditorClick: handleEditorClick,
-          autoFocus,
-          disabled
-        })
-      })
-    });
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          ComposerEditorContainer,
+          {
+            defaultValue,
+            actions,
+            overrides: overrides$1,
+            isCollapsed,
+            showAttachments,
+            showAttribution,
+            showFormattingControls,
+            hasResolveMentionSuggestions,
+            onEmptyChange: setEmptyRef,
+            onEmojiPickerOpenChange: setEmojiPickerOpenRef,
+            onEditorClick: handleEditorClick,
+            autoFocus,
+            disabled
+          }
+        )
+      }
+    ) });
   }
 );