@liveblocks/react-ui 3.9.1 → 3.9.2-tiptap2

package/dist/primitives/Composer/index.js

@@ -79,16 +79,10 @@ function ComposerEditorMentionWrapper({
 }) {
   const isSelected = useSelected();
   const { children: _, ...mention } = element;
-  return /* @__PURE__ */ jsxs("span", {
-    ...attributes,
-    children: [
-      element.id ? /* @__PURE__ */ jsx(Mention, {
-        mention,
-        isSelected
-      }) : null,
-      children
-    ]
-  });
+  return /* @__PURE__ */ jsxs("span", { ...attributes, children: [
+    element.id ? /* @__PURE__ */ jsx(Mention, { mention, isSelected }) : null,
+    children
+  ] });
 }
 function ComposerEditorLinkWrapper({
   Link,
@@ -97,13 +91,7 @@ function ComposerEditorLinkWrapper({
   children
 }) {
   const href = useMemo(() => sanitizeUrl(element.url) ?? "", [element.url]);
-  return /* @__PURE__ */ jsx("span", {
-    ...attributes,
-    children: /* @__PURE__ */ jsx(Link, {
-      href,
-      children
-    })
-  });
+  return /* @__PURE__ */ jsx("span", { ...attributes, children: /* @__PURE__ */ jsx(Link, { href, children }) });
 }
 function ComposerEditorMentionSuggestionsWrapper({
   id,
@@ -168,8 +156,9 @@ function ComposerEditorMentionSuggestionsWrapper({
       cancelAnimationFrame(animationFrame);
     };
   }, [mentions?.length, isOpen, elements.floating, update]);
-  return /* @__PURE__ */ jsx(Persist, {
-    children: isOpen ? /* @__PURE__ */ jsx(ComposerSuggestionsContext.Provider, {
+  return /* @__PURE__ */ jsx(Persist, { children: isOpen ? /* @__PURE__ */ jsx(
+    ComposerSuggestionsContext.Provider,
+    {
       value: {
         id,
         itemId,
@@ -180,24 +169,30 @@ function ComposerEditorMentionSuggestionsWrapper({
         dir,
         ref: contentRef
       },
-      children: /* @__PURE__ */ jsx(Portal, {
-        ref: setFloating,
-        container: portalContainer,
-        style: {
-          position: strategy,
-          top: 0,
-          left: 0,
-          transform: isPositioned ? `translate3d(${Math.round(x)}px, ${Math.round(y)}px, 0)` : "translate3d(0, -200%, 0)",
-          minWidth: "max-content",
-          zIndex: contentZIndex
-        },
-        children: /* @__PURE__ */ jsx(MentionSuggestions, {
-          mentions,
-          selectedMentionId
-        })
-      })
-    }) : null
-  });
+      children: /* @__PURE__ */ jsx(
+        Portal,
+        {
+          ref: setFloating,
+          container: portalContainer,
+          style: {
+            position: strategy,
+            top: 0,
+            left: 0,
+            transform: isPositioned ? `translate3d(${Math.round(x)}px, ${Math.round(y)}px, 0)` : "translate3d(0, -200%, 0)",
+            minWidth: "max-content",
+            zIndex: contentZIndex
+          },
+          children: /* @__PURE__ */ jsx(
+            MentionSuggestions,
+            {
+              mentions,
+              selectedMentionId
+            }
+          )
+        }
+      )
+    }
+  ) : null });
 }
 function ComposerEditorFloatingToolbarWrapper({
   id,
@@ -255,29 +250,33 @@ function ComposerEditorFloatingToolbarWrapper({
       }
     });
   });
-  return /* @__PURE__ */ jsx(Persist, {
-    children: isOpen ? /* @__PURE__ */ jsx(ComposerFloatingToolbarContext.Provider, {
+  return /* @__PURE__ */ jsx(Persist, { children: isOpen ? /* @__PURE__ */ jsx(
+    ComposerFloatingToolbarContext.Provider,
+    {
       value: {
         id,
         placement,
         dir,
         ref: contentRef
       },
-      children: /* @__PURE__ */ jsx(Portal, {
-        ref: setFloating,
-        container: portalContainer,
-        style: {
-          position: strategy,
-          top: 0,
-          left: 0,
-          transform: isPositioned ? `translate3d(${Math.round(x)}px, ${Math.round(y)}px, 0)` : "translate3d(0, -200%, 0)",
-          minWidth: "max-content",
-          zIndex: contentZIndex
-        },
-        children: /* @__PURE__ */ jsx(FloatingToolbar, {})
-      })
-    }) : null
-  });
+      children: /* @__PURE__ */ jsx(
+        Portal,
+        {
+          ref: setFloating,
+          container: portalContainer,
+          style: {
+            position: strategy,
+            top: 0,
+            left: 0,
+            transform: isPositioned ? `translate3d(${Math.round(x)}px, ${Math.round(y)}px, 0)` : "translate3d(0, -200%, 0)",
+            minWidth: "max-content",
+            zIndex: contentZIndex
+          },
+          children: /* @__PURE__ */ jsx(FloatingToolbar, {})
+        }
+      )
+    }
+  ) : null });
 }
 const ComposerFloatingToolbar = forwardRef(({ children, onPointerDown, style, asChild, ...props }, forwardedRef) => {
   const [isPresent] = usePersist();
@@ -303,26 +302,29 @@ const ComposerFloatingToolbar = forwardRef(({ children, onPointerDown, style, as
     },
     [onPointerDown]
   );
-  return /* @__PURE__ */ jsx(Component, {
-    dir,
-    role: "toolbar",
-    id,
-    "aria-label": "Floating toolbar",
-    ...props,
-    onPointerDown: handlePointerDown,
-    "data-state": isPresent ? "open" : "closed",
-    "data-side": side,
-    "data-align": align,
-    style: {
-      display: "flex",
-      flexDirection: "row",
-      maxWidth: "var(--lb-composer-floating-available-width)",
-      overflowX: "auto",
-      ...style
-    },
-    ref: mergedRefs,
-    children
-  });
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      dir,
+      role: "toolbar",
+      id,
+      "aria-label": "Floating toolbar",
+      ...props,
+      onPointerDown: handlePointerDown,
+      "data-state": isPresent ? "open" : "closed",
+      "data-side": side,
+      "data-align": align,
+      style: {
+        display: "flex",
+        flexDirection: "row",
+        maxWidth: "var(--lb-composer-floating-available-width)",
+        overflowX: "auto",
+        ...style
+      },
+      ref: mergedRefs,
+      children
+    }
+  );
 });
 function ComposerEditorElement({
   Mention,
@@ -332,22 +334,24 @@ function ComposerEditorElement({
   const { attributes, children, element } = props;
   switch (element.type) {
     case "mention":
-      return /* @__PURE__ */ jsx(ComposerEditorMentionWrapper, {
-        Mention,
-        ...props
-      });
+      return /* @__PURE__ */ jsx(
+        ComposerEditorMentionWrapper,
+        {
+          Mention,
+          ...props
+        }
+      );
     case "auto-link":
     case "custom-link":
-      return /* @__PURE__ */ jsx(ComposerEditorLinkWrapper, {
-        Link,
-        ...props
-      });
+      return /* @__PURE__ */ jsx(
+        ComposerEditorLinkWrapper,
+        {
+          Link,
+          ...props
+        }
+      );
     case "paragraph":
-      return /* @__PURE__ */ jsx("p", {
-        ...attributes,
-        style: { position: "relative" },
-        children
-      });
+      return /* @__PURE__ */ jsx("p", { ...attributes, style: { position: "relative" }, children });
     default:
       return null;
   }
@@ -358,64 +362,54 @@ function ComposerEditorLeaf({
   leaf
 }) {
   if (leaf.bold) {
-    children = /* @__PURE__ */ jsx("strong", {
-      children
-    });
+    children = /* @__PURE__ */ jsx("strong", { children });
   }
   if (leaf.italic) {
-    children = /* @__PURE__ */ jsx("em", {
-      children
-    });
+    children = /* @__PURE__ */ jsx("em", { children });
   }
   if (leaf.strikethrough) {
-    children = /* @__PURE__ */ jsx("s", {
-      children
-    });
+    children = /* @__PURE__ */ jsx("s", { children });
   }
   if (leaf.code) {
-    children = /* @__PURE__ */ jsx("code", {
-      children
-    });
+    children = /* @__PURE__ */ jsx("code", { children });
   }
-  return /* @__PURE__ */ jsx("span", {
-    ...attributes,
-    children
-  });
+  return /* @__PURE__ */ jsx("span", { ...attributes, children });
 }
 function ComposerEditorPlaceholder({
   attributes,
   children
 }) {
   const { opacity: _opacity, ...style } = attributes.style;
-  return /* @__PURE__ */ jsx("span", {
-    ...attributes,
-    style,
-    "data-placeholder": "",
-    children
-  });
+  return /* @__PURE__ */ jsx("span", { ...attributes, style, "data-placeholder": "", children });
 }
 const ComposerMention = forwardRef(
   ({ children, asChild, ...props }, forwardedRef) => {
     const Component = asChild ? Slot : "span";
     const isSelected = useSelected();
-    return /* @__PURE__ */ jsx(Component, {
-      "data-selected": isSelected || void 0,
-      ...props,
-      ref: forwardedRef,
-      children
-    });
+    return /* @__PURE__ */ jsx(
+      Component,
+      {
+        "data-selected": isSelected || void 0,
+        ...props,
+        ref: forwardedRef,
+        children
+      }
+    );
   }
 );
 const ComposerLink = forwardRef(
   ({ children, asChild, ...props }, forwardedRef) => {
     const Component = asChild ? Slot : "a";
-    return /* @__PURE__ */ jsx(Component, {
-      target: "_blank",
-      rel: "noopener noreferrer nofollow",
-      ...props,
-      ref: forwardedRef,
-      children
-    });
+    return /* @__PURE__ */ jsx(
+      Component,
+      {
+        target: "_blank",
+        rel: "noopener noreferrer nofollow",
+        ...props,
+        ref: forwardedRef,
+        children
+      }
+    );
   }
 );
 const ComposerSuggestions = forwardRef(({ children, style, asChild, ...props }, forwardedRef) => {
@@ -433,34 +427,40 @@ const ComposerSuggestions = forwardRef(({ children, style, asChild, ...props },
   );
   const Component = asChild ? Slot : "div";
   useAnimationPersist(ref);
-  return /* @__PURE__ */ jsx(Component, {
-    dir,
-    ...props,
-    "data-state": isPresent ? "open" : "closed",
-    "data-side": side,
-    "data-align": align,
-    style: {
-      display: "flex",
-      flexDirection: "column",
-      maxHeight: "var(--lb-composer-floating-available-height)",
-      overflowY: "auto",
-      ...style
-    },
-    ref: mergedRefs,
-    children
-  });
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      dir,
+      ...props,
+      "data-state": isPresent ? "open" : "closed",
+      "data-side": side,
+      "data-align": align,
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        maxHeight: "var(--lb-composer-floating-available-height)",
+        overflowY: "auto",
+        ...style
+      },
+      ref: mergedRefs,
+      children
+    }
+  );
 });
 const ComposerSuggestionsList = forwardRef(({ children, asChild, ...props }, forwardedRef) => {
   const { id } = useComposerSuggestionsContext(COMPOSER_SUGGESTIONS_LIST_NAME);
   const Component = asChild ? Slot : "ul";
-  return /* @__PURE__ */ jsx(Component, {
-    role: "listbox",
-    id,
-    "aria-label": "Suggestions list",
-    ...props,
-    ref: forwardedRef,
-    children
-  });
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      role: "listbox",
+      id,
+      "aria-label": "Suggestions list",
+      ...props,
+      ref: forwardedRef,
+      children
+    }
+  );
 });
 const ComposerSuggestionsListItem = forwardRef(
   ({
@@ -515,44 +515,35 @@ const ComposerSuggestionsListItem = forwardRef(
       },
       [onClick, onItemSelect, value]
     );
-    return /* @__PURE__ */ jsx(Component, {
-      role: "option",
-      id,
-      "data-selected": isSelected || void 0,
-      "aria-selected": isSelected || void 0,
-      onPointerMove: handlePointerMove,
-      onPointerDown: handlePointerDown,
-      onClick: handleClick,
-      ...props,
-      ref: mergedRefs,
-      children
-    });
+    return /* @__PURE__ */ jsx(
+      Component,
+      {
+        role: "option",
+        id,
+        "data-selected": isSelected || void 0,
+        "aria-selected": isSelected || void 0,
+        onPointerMove: handlePointerMove,
+        onPointerDown: handlePointerDown,
+        onClick: handleClick,
+        ...props,
+        ref: mergedRefs,
+        children
+      }
+    );
   }
 );
 const defaultEditorComponents = {
   Link: ({ href, children }) => {
-    return /* @__PURE__ */ jsx(ComposerLink, {
-      href,
-      children
-    });
+    return /* @__PURE__ */ jsx(ComposerLink, { href, children });
   },
   Mention: ({ mention }) => {
-    return /* @__PURE__ */ jsxs(ComposerMention, {
-      children: [
-        MENTION_CHARACTER,
-        mention.id
-      ]
-    });
+    return /* @__PURE__ */ jsxs(ComposerMention, { children: [
+      MENTION_CHARACTER,
+      mention.id
+    ] });
   },
   MentionSuggestions: ({ mentions }) => {
-    return mentions.length > 0 ? /* @__PURE__ */ jsx(ComposerSuggestions, {
-      children: /* @__PURE__ */ jsx(ComposerSuggestionsList, {
-        children: mentions.map((mention) => /* @__PURE__ */ jsx(ComposerSuggestionsListItem, {
-          value: mention.id,
-          children: mention.id
-        }, mention.id))
-      })
-    }) : null;
+    return mentions.length > 0 ? /* @__PURE__ */ jsx(ComposerSuggestions, { children: /* @__PURE__ */ jsx(ComposerSuggestionsList, { children: mentions.map((mention) => /* @__PURE__ */ jsx(ComposerSuggestionsListItem, { value: mention.id, children: mention.id }, mention.id)) }) }) : null;
   }
 };
 const ComposerEditor = forwardRef(
@@ -610,11 +601,7 @@ const ComposerEditor = forwardRef(
     );
     const renderElement = useCallback(
       (props2) => {
-        return /* @__PURE__ */ jsx(ComposerEditorElement, {
-          Mention,
-          Link,
-          ...props2
-        });
+        return /* @__PURE__ */ jsx(ComposerEditorElement, { Mention, Link, ...props2 });
       },
       [Link, Mention]
     );
@@ -795,50 +782,62 @@ const ComposerEditor = forwardRef(
       },
       [createMention, mentionSuggestions]
     );
-    return /* @__PURE__ */ jsxs(Slate, {
-      editor,
-      initialValue: initialEditorValue,
-      onChange: handleChange,
-      children: [
-        /* @__PURE__ */ jsx(Editable, {
-          dir,
-          enterKeyHint: mentionDraft ? "enter" : "send",
-          autoCapitalize: "sentences",
-          "aria-label": "Composer editor",
-          "data-focused": isFocused || void 0,
-          "data-disabled": isDisabled || void 0,
-          ...additionalProps,
-          ...props,
-          readOnly: isDisabled,
-          disabled: isDisabled,
-          onKeyDown: handleKeyDown,
-          onFocus: handleFocus,
-          onBlur: handleBlur,
-          renderElement,
-          renderLeaf: ComposerEditorLeaf,
-          renderPlaceholder: ComposerEditorPlaceholder
-        }),
-        hasResolveMentionSuggestions && /* @__PURE__ */ jsx(ComposerEditorMentionSuggestionsWrapper, {
-          dir,
-          mentionDraft,
-          setMentionDraft,
-          selectedMentionId,
-          setSelectedMentionId,
-          mentions: mentionSuggestions,
-          id: suggestionsListId,
-          itemId: suggestionsListItemId,
-          onItemSelect: handleMentionSelect,
-          MentionSuggestions
-        }),
-        FloatingToolbar && /* @__PURE__ */ jsx(ComposerEditorFloatingToolbarWrapper, {
-          dir,
-          id: floatingToolbarId,
-          hasFloatingToolbarRange,
-          setHasFloatingToolbarRange,
-          FloatingToolbar
-        })
-      ]
-    });
+    return /* @__PURE__ */ jsxs(
+      Slate,
+      {
+        editor,
+        initialValue: initialEditorValue,
+        onChange: handleChange,
+        children: [
+          /* @__PURE__ */ jsx(
+            Editable,
+            {
+              dir,
+              enterKeyHint: mentionDraft ? "enter" : "send",
+              autoCapitalize: "sentences",
+              "aria-label": "Composer editor",
+              "data-focused": isFocused || void 0,
+              "data-disabled": isDisabled || void 0,
+              ...additionalProps,
+              ...props,
+              readOnly: isDisabled,
+              disabled: isDisabled,
+              onKeyDown: handleKeyDown,
+              onFocus: handleFocus,
+              onBlur: handleBlur,
+              renderElement,
+              renderLeaf: ComposerEditorLeaf,
+              renderPlaceholder: ComposerEditorPlaceholder
+            }
+          ),
+          hasResolveMentionSuggestions && /* @__PURE__ */ jsx(
+            ComposerEditorMentionSuggestionsWrapper,
+            {
+              dir,
+              mentionDraft,
+              setMentionDraft,
+              selectedMentionId,
+              setSelectedMentionId,
+              mentions: mentionSuggestions,
+              id: suggestionsListId,
+              itemId: suggestionsListItemId,
+              onItemSelect: handleMentionSelect,
+              MentionSuggestions
+            }
+          ),
+          FloatingToolbar && /* @__PURE__ */ jsx(
+            ComposerEditorFloatingToolbarWrapper,
+            {
+              dir,
+              id: floatingToolbarId,
+              hasFloatingToolbarRange,
+              setHasFloatingToolbarRange,
+              FloatingToolbar
+            }
+          )
+        ]
+      }
+    );
   }
 );
 const MAX_ATTACHMENTS = 10;
@@ -1085,63 +1084,68 @@ const ComposerForm = forwardRef(
     useObservable(onEditorChange, () => {
       setMarks(getComposerBodyMarks(editor));
     });
-    return /* @__PURE__ */ jsx(ComposerEditorContext.Provider, {
-      value: {
-        editor,
-        validate,
-        setFocused,
-        onEditorChange,
-        roomId
-      },
-      children: /* @__PURE__ */ jsx(ComposerAttachmentsContext.Provider, {
+    return /* @__PURE__ */ jsx(
+      ComposerEditorContext.Provider,
+      {
         value: {
-          createAttachments,
-          isUploadingAttachments,
-          hasMaxAttachments,
-          maxAttachments,
-          maxAttachmentSize
+          editor,
+          validate,
+          setFocused,
+          onEditorChange,
+          roomId
         },
-        children: /* @__PURE__ */ jsx(ComposerContext.Provider, {
-          value: {
-            isDisabled,
-            isFocused,
-            isEmpty: isEmpty$1,
-            canSubmit,
-            submit,
-            clear,
-            select,
-            focus,
-            blur,
-            createMention,
-            insertText: insertText$1,
-            attachments,
-            attachFiles,
-            removeAttachment,
-            toggleMark: toggleMark$1,
-            marks
-          },
-          children: /* @__PURE__ */ jsxs(Component, {
-            ...props,
-            onSubmit: handleSubmit,
-            ref: mergedRefs,
-            children: [
-              /* @__PURE__ */ jsx("input", {
-                type: "file",
-                multiple: true,
-                ref: fileInputRef,
-                onChange: handleAttachmentsInputChange,
-                onClick: stopPropagation,
-                tabIndex: -1,
-                style: { display: "none" }
-              }),
-              /* @__PURE__ */ jsx(Slottable, {
-                children
-              })
-            ]
-          })
-        })
-      })
-    });
+        children: /* @__PURE__ */ jsx(
+          ComposerAttachmentsContext.Provider,
+          {
+            value: {
+              createAttachments,
+              isUploadingAttachments,
+              hasMaxAttachments,
+              maxAttachments,
+              maxAttachmentSize
+            },
+            children: /* @__PURE__ */ jsx(
+              ComposerContext.Provider,
+              {
+                value: {
+                  isDisabled,
+                  isFocused,
+                  isEmpty: isEmpty$1,
+                  canSubmit,
+                  submit,
+                  clear,
+                  select,
+                  focus,
+                  blur,
+                  createMention,
+                  insertText: insertText$1,
+                  attachments,
+                  attachFiles,
+                  removeAttachment,
+                  toggleMark: toggleMark$1,
+                  marks
+                },
+                children: /* @__PURE__ */ jsxs(Component, { ...props, onSubmit: handleSubmit, ref: mergedRefs, children: [
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      type: "file",
+                      multiple: true,
+                      ref: fileInputRef,
+                      onChange: handleAttachmentsInputChange,
+                      onClick: stopPropagation,
+                      tabIndex: -1,
+                      style: { display: "none" }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(Slottable, { children })
+                ] })
+              }
+            )
+          }
+        )
+      }
+    );
   }
 );
 const ComposerSubmit = forwardRef(
@@ -1149,13 +1153,16 @@ const ComposerSubmit = forwardRef(
     const Component = asChild ? Slot : "button";
     const { canSubmit, isDisabled: isComposerDisabled } = useComposer();
     const isDisabled = isComposerDisabled || disabled || !canSubmit;
-    return /* @__PURE__ */ jsx(Component, {
-      type: "submit",
-      ...props,
-      ref: forwardedRef,
-      disabled: isDisabled,
-      children
-    });
+    return /* @__PURE__ */ jsx(
+      Component,
+      {
+        type: "submit",
+        ...props,
+        ref: forwardedRef,
+        disabled: isDisabled,
+        children
+      }
+    );
   }
 );
 const ComposerAttachFiles = forwardRef(({ children, onClick, disabled, asChild, ...props }, forwardedRef) => {
@@ -1172,14 +1179,17 @@ const ComposerAttachFiles = forwardRef(({ children, onClick, disabled, asChild,
     },
     [attachFiles, onClick]
   );
-  return /* @__PURE__ */ jsx(Component, {
-    type: "button",
-    ...props,
-    onClick: handleClick,
-    ref: forwardedRef,
-    disabled: isDisabled,
-    children
-  });
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      type: "button",
+      ...props,
+      onClick: handleClick,
+      ref: forwardedRef,
+      disabled: isDisabled,
+      children
+    }
+  );
 });
 const ComposerAttachmentsDropArea = forwardRef(
   ({
@@ -1201,12 +1211,15 @@ const ComposerAttachmentsDropArea = forwardRef(
       onDrop,
       disabled: isDisabled
     });
-    return /* @__PURE__ */ jsx(Component, {
-      ...dropAreaProps,
-      "data-disabled": isDisabled ? "" : void 0,
-      ...props,
-      ref: forwardedRef
-    });
+    return /* @__PURE__ */ jsx(
+      Component,
+      {
+        ...dropAreaProps,
+        "data-disabled": isDisabled ? "" : void 0,
+        ...props,
+        ref: forwardedRef
+      }
+    );
   }
 );
 const ComposerMarkToggle = forwardRef(
@@ -1241,18 +1254,17 @@ const ComposerMarkToggle = forwardRef(
       },
       [mark, onClick, onValueChange, toggleMark]
     );
-    return /* @__PURE__ */ jsx(TogglePrimitive.Root, {
-      asChild: true,
-      pressed: marks[mark],
-      onClick: handleClick,
-      onPointerDown: handlePointerDown,
-      ...props,
-      children: /* @__PURE__ */ jsx(Component, {
+    return /* @__PURE__ */ jsx(
+      TogglePrimitive.Root,
+      {
+        asChild: true,
+        pressed: marks[mark],
+        onClick: handleClick,
+        onPointerDown: handlePointerDown,
         ...props,
-        ref: forwardedRef,
-        children
-      })
-    });
+        children: /* @__PURE__ */ jsx(Component, { ...props, ref: forwardedRef, children })
+      }
+    );
   }
 );
 if (process.env.NODE_ENV !== "production") {