@liveblocks/react-ui 3.9.1 → 3.9.2-tiptap1

package/dist/components/Composer.js

@@ -57,17 +57,17 @@ function ComposerInsertMentionEditorAction({
     },
     [createMention, onClick]
   );
-  return /* @__PURE__ */ jsx(Tooltip, {
-    content: tooltipLabel ?? label,
-    children: /* @__PURE__ */ jsx(Button, {
+  return /* @__PURE__ */ jsx(Tooltip, { content: tooltipLabel ?? label, children: /* @__PURE__ */ jsx(
+    Button,
+    {
       className: cn("lb-composer-editor-action", className),
       onPointerDown: preventDefault,
       onClick: handleClick,
       "aria-label": label,
       icon: /* @__PURE__ */ jsx(MentionIcon, {}),
       ...props
-    })
-  });
+    }
+  ) });
 }
 function ComposerInsertEmojiEditorAction({
   label,
@@ -83,24 +83,17 @@ function ComposerInsertEmojiEditorAction({
   const stopPropagation = useCallback((event) => {
     event.stopPropagation();
   }, []);
-  return /* @__PURE__ */ jsx(EmojiPicker, {
-    onEmojiSelect: insertText,
-    onOpenChange: onPickerOpenChange,
-    children: /* @__PURE__ */ jsx(Tooltip, {
-      content: tooltipLabel ?? label,
-      children: /* @__PURE__ */ jsx(PopoverTrigger, {
-        asChild: true,
-        children: /* @__PURE__ */ jsx(Button, {
-          className: cn("lb-composer-editor-action", className),
-          onPointerDown: preventDefault,
-          onClick: stopPropagation,
-          "aria-label": label,
-          icon: /* @__PURE__ */ jsx(EmojiIcon, {}),
-          ...props
-        })
-      })
-    })
-  });
+  return /* @__PURE__ */ jsx(EmojiPicker, { onEmojiSelect: insertText, onOpenChange: onPickerOpenChange, children: /* @__PURE__ */ jsx(Tooltip, { content: tooltipLabel ?? label, children: /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+    Button,
+    {
+      className: cn("lb-composer-editor-action", className),
+      onPointerDown: preventDefault,
+      onClick: stopPropagation,
+      "aria-label": label,
+      icon: /* @__PURE__ */ jsx(EmojiIcon, {}),
+      ...props
+    }
+  ) }) }) });
 }
 function ComposerAttachFilesEditorAction({
   label,
@@ -114,63 +107,44 @@ function ComposerAttachFilesEditorAction({
   const stopPropagation = useCallback((event) => {
     event.stopPropagation();
   }, []);
-  return /* @__PURE__ */ jsx(Tooltip, {
-    content: tooltipLabel ?? label,
-    children: /* @__PURE__ */ jsx(ComposerAttachFiles, {
-      asChild: true,
-      children: /* @__PURE__ */ jsx(Button, {
-        className: cn("lb-composer-editor-action", className),
-        onPointerDown: preventDefault,
-        onClick: stopPropagation,
-        "aria-label": label,
-        icon: /* @__PURE__ */ jsx(AttachmentIcon, {}),
-        ...props
-      })
-    })
-  });
+  return /* @__PURE__ */ jsx(Tooltip, { content: tooltipLabel ?? label, children: /* @__PURE__ */ jsx(ComposerAttachFiles, { asChild: true, children: /* @__PURE__ */ jsx(
+    Button,
+    {
+      className: cn("lb-composer-editor-action", className),
+      onPointerDown: preventDefault,
+      onClick: stopPropagation,
+      "aria-label": label,
+      icon: /* @__PURE__ */ jsx(AttachmentIcon, {}),
+      ...props
+    }
+  ) }) });
 }
 function ComposerUserMention({ mention }) {
-  return /* @__PURE__ */ jsxs(ComposerMention$1, {
-    className: "lb-mention lb-composer-mention",
-    children: [
-      /* @__PURE__ */ jsx("span", {
-        className: "lb-mention-symbol",
-        children: MENTION_CHARACTER
-      }),
-      /* @__PURE__ */ jsx(User, {
-        userId: mention.id
-      })
-    ]
-  });
+  return /* @__PURE__ */ jsxs(ComposerMention$1, { className: "lb-mention lb-composer-mention", children: [
+    /* @__PURE__ */ jsx("span", { className: "lb-mention-symbol", children: MENTION_CHARACTER }),
+    /* @__PURE__ */ jsx(User, { userId: mention.id })
+  ] });
 }
 function ComposerGroupMention({ mention }) {
   const isMember = useIsGroupMentionMember(mention);
-  return /* @__PURE__ */ jsxs(ComposerMention$1, {
-    className: "lb-mention lb-composer-mention",
-    "data-self": isMember ? "" : void 0,
-    children: [
-      /* @__PURE__ */ jsx("span", {
-        className: "lb-mention-symbol",
-        children: MENTION_CHARACTER
-      }),
-      /* @__PURE__ */ jsx(Group, {
-        groupId: mention.id
-      })
-    ]
-  });
+  return /* @__PURE__ */ jsxs(
+    ComposerMention$1,
+    {
+      className: "lb-mention lb-composer-mention",
+      "data-self": isMember ? "" : void 0,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "lb-mention-symbol", children: MENTION_CHARACTER }),
+        /* @__PURE__ */ jsx(Group, { groupId: mention.id })
+      ]
+    }
+  );
 }
 function ComposerMention({ mention, ...props }) {
   switch (mention.kind) {
     case "user":
-      return /* @__PURE__ */ jsx(ComposerUserMention, {
-        mention,
-        ...props
-      });
+      return /* @__PURE__ */ jsx(ComposerUserMention, { mention, ...props });
     case "group":
-      return /* @__PURE__ */ jsx(ComposerGroupMention, {
-        mention,
-        ...props
-      });
+      return /* @__PURE__ */ jsx(ComposerGroupMention, { mention, ...props });
     default:
       return assertNever(mention, "Unhandled mention kind");
   }
@@ -178,46 +152,55 @@ function ComposerMention({ mention, ...props }) {
 function ComposerMentionSuggestions({
   mentions
 }) {
-  return mentions.length > 0 ? /* @__PURE__ */ jsx(ComposerSuggestions, {
-    className: "lb-root lb-portal lb-elevation lb-composer-suggestions lb-composer-mention-suggestions",
-    children: /* @__PURE__ */ jsx(ComposerSuggestionsList, {
-      className: "lb-composer-suggestions-list lb-composer-mention-suggestions-list",
-      children: mentions.map((mention) => {
-        return /* @__PURE__ */ jsx(ComposerSuggestionsListItem, {
-          className: "lb-composer-suggestions-list-item lb-composer-mention-suggestion",
-          value: mention.id,
-          children: mention.kind === "user" ? /* @__PURE__ */ jsxs(Fragment, {
-            children: [
-              /* @__PURE__ */ jsx(Avatar, {
-                userId: mention.id,
-                className: "lb-composer-mention-suggestion-avatar"
-              }),
-              /* @__PURE__ */ jsx(User, {
-                userId: mention.id,
-                className: "lb-composer-mention-suggestion-user"
-              })
-            ]
-          }) : mention.kind === "group" ? /* @__PURE__ */ jsxs(Fragment, {
-            children: [
-              /* @__PURE__ */ jsx(Avatar, {
-                groupId: mention.id,
-                className: "lb-composer-mention-suggestion-avatar",
-                icon: /* @__PURE__ */ jsx(UsersIcon, {})
-              }),
-              /* @__PURE__ */ jsx(Group, {
-                groupId: mention.id,
-                className: "lb-composer-mention-suggestion-group",
-                children: /* @__PURE__ */ jsx(GroupDescription, {
+  return mentions.length > 0 ? /* @__PURE__ */ jsx(ComposerSuggestions, { className: "lb-root lb-portal lb-elevation lb-composer-suggestions lb-composer-mention-suggestions", children: /* @__PURE__ */ jsx(ComposerSuggestionsList, { className: "lb-composer-suggestions-list lb-composer-mention-suggestions-list", children: mentions.map((mention) => {
+    return /* @__PURE__ */ jsx(
+      ComposerSuggestionsListItem,
+      {
+        className: "lb-composer-suggestions-list-item lb-composer-mention-suggestion",
+        value: mention.id,
+        children: mention.kind === "user" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            Avatar,
+            {
+              userId: mention.id,
+              className: "lb-composer-mention-suggestion-avatar"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            User,
+            {
+              userId: mention.id,
+              className: "lb-composer-mention-suggestion-user"
+            }
+          )
+        ] }) : mention.kind === "group" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            Avatar,
+            {
+              groupId: mention.id,
+              className: "lb-composer-mention-suggestion-avatar",
+              icon: /* @__PURE__ */ jsx(UsersIcon, {})
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Group,
+            {
+              groupId: mention.id,
+              className: "lb-composer-mention-suggestion-group",
+              children: /* @__PURE__ */ jsx(
+                GroupDescription,
+                {
                   groupId: mention.id,
                   className: "lb-composer-mention-suggestion-group-description"
-                })
-              })
-            ]
-          }) : assertNever(mention, "Unhandled mention kind")
-        }, mention.id);
-      })
-    })
-  }) : null;
+                }
+              )
+            }
+          )
+        ] }) : assertNever(mention, "Unhandled mention kind")
+      },
+      mention.id
+    );
+  }) }) }) : null;
 }
 function MarkToggle({
   mark,
@@ -230,58 +213,35 @@ function MarkToggle({
   const label = useMemo(() => {
     return $.COMPOSER_TOGGLE_MARK(mark);
   }, [$, mark]);
-  return /* @__PURE__ */ jsx(ShortcutTooltip, {
-    content: label,
-    shortcut,
-    sideOffset: FLOATING_ELEMENT_SIDE_OFFSET + 2,
-    children: /* @__PURE__ */ jsx(ComposerMarkToggle, {
-      mark,
-      asChild: true,
-      ...props,
-      children: /* @__PURE__ */ jsx(Button, {
-        "aria-label": label,
-        variant: "toolbar",
-        icon,
-        children
-      })
-    })
-  });
+  return /* @__PURE__ */ jsx(
+    ShortcutTooltip,
+    {
+      content: label,
+      shortcut,
+      sideOffset: FLOATING_ELEMENT_SIDE_OFFSET + 2,
+      children: /* @__PURE__ */ jsx(ComposerMarkToggle, { mark, asChild: true, ...props, children: /* @__PURE__ */ jsx(Button, { "aria-label": label, variant: "toolbar", icon, children }) })
+    }
+  );
 }
 const markToggles = {
-  bold: () => /* @__PURE__ */ jsx(MarkToggle, {
-    mark: "bold",
-    shortcut: "Mod-B",
-    icon: /* @__PURE__ */ jsx(BoldIcon, {})
-  }),
-  italic: () => /* @__PURE__ */ jsx(MarkToggle, {
-    mark: "italic",
-    shortcut: "Mod-I",
-    icon: /* @__PURE__ */ jsx(ItalicIcon, {})
-  }),
-  strikethrough: () => /* @__PURE__ */ jsx(MarkToggle, {
-    mark: "strikethrough",
-    shortcut: "Mod-Shift-S",
-    icon: /* @__PURE__ */ jsx(StrikethroughIcon, {})
-  }),
-  code: () => /* @__PURE__ */ jsx(MarkToggle, {
-    mark: "code",
-    shortcut: "Mod-E",
-    icon: /* @__PURE__ */ jsx(CodeIcon, {})
-  })
+  bold: () => /* @__PURE__ */ jsx(MarkToggle, { mark: "bold", shortcut: "Mod-B", icon: /* @__PURE__ */ jsx(BoldIcon, {}) }),
+  italic: () => /* @__PURE__ */ jsx(MarkToggle, { mark: "italic", shortcut: "Mod-I", icon: /* @__PURE__ */ jsx(ItalicIcon, {}) }),
+  strikethrough: () => /* @__PURE__ */ jsx(
+    MarkToggle,
+    {
+      mark: "strikethrough",
+      shortcut: "Mod-Shift-S",
+      icon: /* @__PURE__ */ jsx(StrikethroughIcon, {})
+    }
+  ),
+  code: () => /* @__PURE__ */ jsx(MarkToggle, { mark: "code", shortcut: "Mod-E", icon: /* @__PURE__ */ jsx(CodeIcon, {}) })
 };
 const markTogglesList = Object.entries(markToggles).map(([mark, Toggle]) => /* @__PURE__ */ jsx(Toggle, {}, mark));
 function ComposerFloatingToolbar() {
-  return /* @__PURE__ */ jsx(ComposerFloatingToolbar$1, {
-    className: "lb-root lb-portal lb-elevation lb-composer-floating-toolbar",
-    children: markTogglesList
-  });
+  return /* @__PURE__ */ jsx(ComposerFloatingToolbar$1, { className: "lb-root lb-portal lb-elevation lb-composer-floating-toolbar", children: markTogglesList });
 }
 function ComposerLink({ href, children }) {
-  return /* @__PURE__ */ jsx(ComposerLink$1, {
-    href,
-    className: "lb-composer-link",
-    children
-  });
+  return /* @__PURE__ */ jsx(ComposerLink$1, { href, className: "lb-composer-link", children });
 }
 function ComposerFileAttachment({
   attachment,
@@ -294,15 +254,18 @@ function ComposerFileAttachment({
   const handleDeleteClick = useCallback(() => {
     removeAttachment(attachment.id);
   }, [attachment.id, removeAttachment]);
-  return /* @__PURE__ */ jsx(FileAttachment, {
-    className: cn("lb-composer-attachment", className),
-    ...props,
-    attachment,
-    onDeleteClick: handleDeleteClick,
-    preventFocusOnDelete: true,
-    overrides,
-    roomId
-  });
+  return /* @__PURE__ */ jsx(
+    FileAttachment,
+    {
+      className: cn("lb-composer-attachment", className),
+      ...props,
+      attachment,
+      onDeleteClick: handleDeleteClick,
+      preventFocusOnDelete: true,
+      overrides,
+      roomId
+    }
+  );
 }
 function ComposerAttachments({
   overrides,
@@ -313,19 +276,16 @@ function ComposerAttachments({
   if (attachments.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsx("div", {
-    className: cn("lb-composer-attachments", className),
-    ...props,
-    children: /* @__PURE__ */ jsx("div", {
-      className: "lb-attachments",
-      children: attachments.map((attachment) => {
-        return /* @__PURE__ */ jsx(ComposerFileAttachment, {
-          attachment,
-          overrides
-        }, attachment.id);
-      })
-    })
-  });
+  return /* @__PURE__ */ jsx("div", { className: cn("lb-composer-attachments", className), ...props, children: /* @__PURE__ */ jsx("div", { className: "lb-attachments", children: attachments.map((attachment) => {
+    return /* @__PURE__ */ jsx(
+      ComposerFileAttachment,
+      {
+        attachment,
+        overrides
+      },
+      attachment.id
+    );
+  }) }) });
 }
 const editorRequiredComponents = {
   Mention: ComposerMention,
@@ -368,11 +328,10 @@ function ComposerEditorContainer({
   const stopPropagation = useCallback((event) => {
     event.stopPropagation();
   }, []);
-  return /* @__PURE__ */ jsxs("div", {
-    className: "lb-composer-editor-container",
-    ...dropAreaProps,
-    children: [
-      /* @__PURE__ */ jsx(ComposerEditor, {
+  return /* @__PURE__ */ jsxs("div", { className: "lb-composer-editor-container", ...dropAreaProps, children: [
+    /* @__PURE__ */ jsx(
+      ComposerEditor,
+      {
         className: "lb-composer-editor",
         onClick: onEditorClick,
         placeholder: $.COMPOSER_PLACEHOLDER,
@@ -381,66 +340,52 @@ function ComposerEditorContainer({
         components,
         disabled,
         dir: $.dir
-      }),
-      showAttachments && /* @__PURE__ */ jsx(ComposerAttachments, {
-        overrides
-      }),
-      (!isCollapsed || isDraggingOver) && /* @__PURE__ */ jsxs("div", {
-        className: "lb-composer-footer",
-        children: [
-          /* @__PURE__ */ jsxs("div", {
-            className: "lb-composer-editor-actions",
-            children: [
-              hasResolveMentionSuggestions && /* @__PURE__ */ jsx(ComposerInsertMentionEditorAction, {
-                label: $.COMPOSER_INSERT_MENTION,
-                disabled
-              }),
-              /* @__PURE__ */ jsx(ComposerInsertEmojiEditorAction, {
-                label: $.COMPOSER_INSERT_EMOJI,
-                onPickerOpenChange: onEmojiPickerOpenChange,
-                disabled
-              }),
-              showAttachments && /* @__PURE__ */ jsx(ComposerAttachFilesEditorAction, {
-                label: $.COMPOSER_ATTACH_FILES,
-                disabled
-              })
-            ]
-          }),
-          showAttribution && /* @__PURE__ */ jsx(Attribution, {}),
-          /* @__PURE__ */ jsx("div", {
-            className: "lb-composer-actions",
-            children: actions ?? /* @__PURE__ */ jsx(Fragment, {
-              children: /* @__PURE__ */ jsx(ShortcutTooltip, {
-                content: $.COMPOSER_SEND,
-                shortcut: "Enter",
-                children: /* @__PURE__ */ jsx(ComposerSubmit, {
-                  asChild: true,
-                  children: /* @__PURE__ */ jsx(Button, {
-                    onPointerDown: preventDefault,
-                    onClick: stopPropagation,
-                    className: "lb-composer-action",
-                    variant: "primary",
-                    "aria-label": $.COMPOSER_SEND,
-                    icon: /* @__PURE__ */ jsx(SendIcon, {})
-                  })
-                })
-              })
-            })
-          })
-        ]
-      }),
-      showAttachments && isDraggingOver && /* @__PURE__ */ jsx("div", {
-        className: "lb-composer-attachments-drop-area",
-        children: /* @__PURE__ */ jsxs("div", {
-          className: "lb-composer-attachments-drop-area-label",
-          children: [
-            /* @__PURE__ */ jsx(AttachmentIcon, {}),
-            $.COMPOSER_ATTACH_FILES
-          ]
-        })
-      })
-    ]
-  });
+      }
+    ),
+    showAttachments && /* @__PURE__ */ jsx(ComposerAttachments, { overrides }),
+    (!isCollapsed || isDraggingOver) && /* @__PURE__ */ jsxs("div", { className: "lb-composer-footer", children: [
+      /* @__PURE__ */ jsxs("div", { className: "lb-composer-editor-actions", children: [
+        hasResolveMentionSuggestions && /* @__PURE__ */ jsx(
+          ComposerInsertMentionEditorAction,
+          {
+            label: $.COMPOSER_INSERT_MENTION,
+            disabled
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ComposerInsertEmojiEditorAction,
+          {
+            label: $.COMPOSER_INSERT_EMOJI,
+            onPickerOpenChange: onEmojiPickerOpenChange,
+            disabled
+          }
+        ),
+        showAttachments && /* @__PURE__ */ jsx(
+          ComposerAttachFilesEditorAction,
+          {
+            label: $.COMPOSER_ATTACH_FILES,
+            disabled
+          }
+        )
+      ] }),
+      showAttribution && /* @__PURE__ */ jsx(Attribution, {}),
+      /* @__PURE__ */ jsx("div", { className: "lb-composer-actions", children: actions ?? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(ShortcutTooltip, { content: $.COMPOSER_SEND, shortcut: "Enter", children: /* @__PURE__ */ jsx(ComposerSubmit, { asChild: true, children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          onPointerDown: preventDefault,
+          onClick: stopPropagation,
+          className: "lb-composer-action",
+          variant: "primary",
+          "aria-label": $.COMPOSER_SEND,
+          icon: /* @__PURE__ */ jsx(SendIcon, {})
+        }
+      ) }) }) }) })
+    ] }),
+    showAttachments && isDraggingOver && /* @__PURE__ */ jsx("div", { className: "lb-composer-attachments-drop-area", children: /* @__PURE__ */ jsxs("div", { className: "lb-composer-attachments-drop-area-label", children: [
+      /* @__PURE__ */ jsx(AttachmentIcon, {}),
+      $.COMPOSER_ATTACH_FILES
+    ] }) })
+  ] });
 }
 const ComposerRoomIdContext = createContext(null);
 const Composer = forwardRef(
@@ -585,8 +530,9 @@ const Composer = forwardRef(
         threadId
       ]
     );
-    return /* @__PURE__ */ jsx(TooltipProvider, {
-      children: /* @__PURE__ */ jsx(ComposerForm, {
+    return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsx(
+      ComposerForm,
+      {
         onComposerSubmit: handleComposerSubmit,
         className: cn("lb-root lb-composer lb-composer-form", className),
         dir: $.dir,
@@ -601,23 +547,26 @@ const Composer = forwardRef(
         preventUnsavedChanges: preventUnsavedComposerChanges,
         blurOnSubmit,
         roomId,
-        children: /* @__PURE__ */ jsx(ComposerEditorContainer, {
-          defaultValue,
-          actions,
-          overrides,
-          isCollapsed,
-          showAttachments,
-          showAttribution,
-          showFormattingControls,
-          hasResolveMentionSuggestions,
-          onEmptyChange: setEmptyRef,
-          onEmojiPickerOpenChange: setEmojiPickerOpenRef,
-          onEditorClick: handleEditorClick,
-          autoFocus,
-          disabled
-        })
-      })
-    });
+        children: /* @__PURE__ */ jsx(
+          ComposerEditorContainer,
+          {
+            defaultValue,
+            actions,
+            overrides,
+            isCollapsed,
+            showAttachments,
+            showAttribution,
+            showFormattingControls,
+            hasResolveMentionSuggestions,
+            onEmptyChange: setEmptyRef,
+            onEmojiPickerOpenChange: setEmojiPickerOpenRef,
+            onEditorClick: handleEditorClick,
+            autoFocus,
+            disabled
+          }
+        )
+      }
+    ) });
   }
 );