@liveblocks/react-ui 2.14.0-v2encoding → 2.15.0-debug1

package/dist/primitives/Composer/index.js

@@ -1,11 +1,11 @@
-'use client';
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var core = require('@liveblocks/core');
 var _private = require('@liveblocks/react/_private');
 var reactSlot = require('@radix-ui/react-slot');
 var TogglePrimitive = require('@radix-ui/react-toggle');
-var React = require('react');
+var react = require('react');
 var slate = require('slate');
 var slateHistory = require('slate-history');
 var slateReact = require('slate-react');
@@ -24,10 +24,8 @@ var isKey = require('../../utils/is-key.js');
 var Persist = require('../../utils/Persist.js');
 var Portal = require('../../utils/Portal.js');
 var requestSubmit = require('../../utils/request-submit.js');
-var useId = require('../../utils/use-id.js');
 var useIndex = require('../../utils/use-index.js');
 var useInitial = require('../../utils/use-initial.js');
-var useLayoutEffect = require('../../utils/use-layout-effect.js');
 var useObservable = require('../../utils/use-observable.js');
 var useRefs = require('../../utils/use-refs.js');
 var utils$1 = require('../Comment/utils.js');
@@ -99,12 +97,16 @@ function ComposerEditorMentionWrapper({
   element
 }) {
   const isSelected = slateReact.useSelected();
-  return /* @__PURE__ */ React.createElement("span", {
-    ...attributes
-  }, element.id ? /* @__PURE__ */ React.createElement(Mention, {
-    userId: element.id,
-    isSelected
-  }) : null, children);
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", {
+    ...attributes,
+    children: [
+      element.id ? /* @__PURE__ */ jsxRuntime.jsx(Mention, {
+        userId: element.id,
+        isSelected
+      }) : null,
+      children
+    ]
+  });
 }
 function ComposerEditorLinkWrapper({
   Link,
@@ -112,15 +114,17 @@ function ComposerEditorLinkWrapper({
   element,
   children
 }) {
-  const href = React.useMemo(
+  const href = react.useMemo(
     () => utils$1.toAbsoluteUrl(element.url) ?? element.url,
     [element.url]
   );
-  return /* @__PURE__ */ React.createElement("span", {
-    ...attributes
-  }, /* @__PURE__ */ React.createElement(Link, {
-    href
-  }, children));
+  return /* @__PURE__ */ jsxRuntime.jsx("span", {
+    ...attributes,
+    children: /* @__PURE__ */ jsxRuntime.jsx(Link, {
+      href,
+      children
+    })
+  });
 }
 function ComposerEditorMentionSuggestionsWrapper({
   id,
@@ -157,7 +161,7 @@ function ComposerEditorMentionSuggestionsWrapper({
   useObservable.useObservable(onEditorChange, () => {
     setMentionDraft(mentions.getMentionDraftAtSelection(editor));
   });
-  useLayoutEffect.useLayoutEffect(() => {
+  react.useLayoutEffect(() => {
     if (!mentionDraft) {
       setReference(null);
       return;
@@ -165,32 +169,36 @@ function ComposerEditorMentionSuggestionsWrapper({
     const domRange = getDomRange.getDOMRange(editor, mentionDraft.range);
     setReference(domRange ?? null);
   }, [setReference, editor, mentionDraft]);
-  return /* @__PURE__ */ React.createElement(Persist.Persist, null, isOpen ? /* @__PURE__ */ React.createElement(contexts.ComposerSuggestionsContext.Provider, {
-    value: {
-      id,
-      itemId,
-      selectedValue: selectedUserId,
-      setSelectedValue: setSelectedUserId,
-      onItemSelect,
-      placement,
-      dir,
-      ref: contentRef
-    }
-  }, /* @__PURE__ */ React.createElement(Portal.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
-    }
-  }, /* @__PURE__ */ React.createElement(MentionSuggestions, {
-    userIds,
-    selectedUserId
-  }))) : null);
+  return /* @__PURE__ */ jsxRuntime.jsx(Persist.Persist, {
+    children: isOpen ? /* @__PURE__ */ jsxRuntime.jsx(contexts.ComposerSuggestionsContext.Provider, {
+      value: {
+        id,
+        itemId,
+        selectedValue: selectedUserId,
+        setSelectedValue: setSelectedUserId,
+        onItemSelect,
+        placement,
+        dir,
+        ref: contentRef
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(Portal.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__ */ jsxRuntime.jsx(MentionSuggestions, {
+          userIds,
+          selectedUserId
+        })
+      })
+    }) : null
+  });
 }
 function ComposerEditorFloatingToolbarWrapper({
   id,
@@ -205,7 +213,7 @@ function ComposerEditorFloatingToolbarWrapper({
   const { isFocused } = contexts.useComposer();
   const { portalContainer } = config.useLiveblocksUIConfig();
   const [contentRef, contentZIndex] = utils.useContentZIndex();
-  const [isPointerDown, setPointerDown] = React.useState(false);
+  const [isPointerDown, setPointerDown] = react.useState(false);
   const isOpen = isFocused && !isPointerDown && hasFloatingToolbarRange;
   const {
     refs: { setReference, setFloating },
@@ -221,7 +229,7 @@ function ComposerEditorFloatingToolbarWrapper({
     alignment: "center",
     open: isOpen
   });
-  useLayoutEffect.useLayoutEffect(() => {
+  react.useLayoutEffect(() => {
     if (!isFocused) {
       return;
     }
@@ -248,29 +256,33 @@ function ComposerEditorFloatingToolbarWrapper({
       }
     });
   });
-  return /* @__PURE__ */ React.createElement(Persist.Persist, null, isOpen ? /* @__PURE__ */ React.createElement(contexts.ComposerFloatingToolbarContext.Provider, {
-    value: {
-      id,
-      placement,
-      dir,
-      ref: contentRef
-    }
-  }, /* @__PURE__ */ React.createElement(Portal.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
-    }
-  }, /* @__PURE__ */ React.createElement(FloatingToolbar, null))) : null);
+  return /* @__PURE__ */ jsxRuntime.jsx(Persist.Persist, {
+    children: isOpen ? /* @__PURE__ */ jsxRuntime.jsx(contexts.ComposerFloatingToolbarContext.Provider, {
+      value: {
+        id,
+        placement,
+        dir,
+        ref: contentRef
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(Portal.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__ */ jsxRuntime.jsx(FloatingToolbar, {})
+      })
+    }) : null
+  });
 }
-const ComposerFloatingToolbar = React.forwardRef(({ children, onPointerDown, style, asChild, ...props }, forwardedRef) => {
+const ComposerFloatingToolbar = react.forwardRef(({ children, onPointerDown, style, asChild, ...props }, forwardedRef) => {
   const [isPresent] = Persist.usePersist();
-  const ref = React.useRef(null);
+  const ref = react.useRef(null);
   const {
     id,
     ref: contentRef,
@@ -278,13 +290,13 @@ const ComposerFloatingToolbar = React.forwardRef(({ children, onPointerDown, sty
     dir
   } = contexts.useComposerFloatingToolbarContext(COMPOSER_FLOATING_TOOLBAR_NAME);
   const mergedRefs = useRefs.useRefs(forwardedRef, contentRef, ref);
-  const [side, align] = React.useMemo(
+  const [side, align] = react.useMemo(
     () => utils.getSideAndAlignFromFloatingPlacement(placement),
     [placement]
   );
   const Component = asChild ? reactSlot.Slot : "div";
   Persist.useAnimationPersist(ref);
-  const handlePointerDown = React.useCallback(
+  const handlePointerDown = react.useCallback(
     (event) => {
       onPointerDown?.(event);
       event.preventDefault();
@@ -292,7 +304,7 @@ const ComposerFloatingToolbar = React.forwardRef(({ children, onPointerDown, sty
     },
     [onPointerDown]
   );
-  return /* @__PURE__ */ React.createElement(Component, {
+  return /* @__PURE__ */ jsxRuntime.jsx(Component, {
     dir,
     role: "toolbar",
     id,
@@ -309,8 +321,9 @@ const ComposerFloatingToolbar = React.forwardRef(({ children, onPointerDown, sty
       overflowX: "auto",
       ...style
     },
-    ref: mergedRefs
-  }, children);
+    ref: mergedRefs,
+    children
+  });
 });
 function ComposerEditorElement({
   Mention,
@@ -320,91 +333,104 @@ function ComposerEditorElement({
   const { attributes, children, element } = props;
   switch (element.type) {
     case "mention":
-      return /* @__PURE__ */ React.createElement(ComposerEditorMentionWrapper, {
+      return /* @__PURE__ */ jsxRuntime.jsx(ComposerEditorMentionWrapper, {
         Mention,
         ...props
       });
     case "auto-link":
     case "custom-link":
-      return /* @__PURE__ */ React.createElement(ComposerEditorLinkWrapper, {
+      return /* @__PURE__ */ jsxRuntime.jsx(ComposerEditorLinkWrapper, {
         Link,
         ...props
       });
     case "paragraph":
-      return /* @__PURE__ */ React.createElement("p", {
+      return /* @__PURE__ */ jsxRuntime.jsx("p", {
         ...attributes,
-        style: { position: "relative" }
-      }, children);
+        style: { position: "relative" },
+        children
+      });
     default:
       return null;
   }
 }
 function ComposerEditorLeaf({ attributes, children, leaf }) {
   if (leaf.bold) {
-    children = /* @__PURE__ */ React.createElement("strong", null, children);
+    children = /* @__PURE__ */ jsxRuntime.jsx("strong", {
+      children
+    });
   }
   if (leaf.italic) {
-    children = /* @__PURE__ */ React.createElement("em", null, children);
+    children = /* @__PURE__ */ jsxRuntime.jsx("em", {
+      children
+    });
   }
   if (leaf.strikethrough) {
-    children = /* @__PURE__ */ React.createElement("s", null, children);
+    children = /* @__PURE__ */ jsxRuntime.jsx("s", {
+      children
+    });
   }
   if (leaf.code) {
-    children = /* @__PURE__ */ React.createElement("code", null, children);
+    children = /* @__PURE__ */ jsxRuntime.jsx("code", {
+      children
+    });
   }
-  return /* @__PURE__ */ React.createElement("span", {
-    ...attributes
-  }, children);
+  return /* @__PURE__ */ jsxRuntime.jsx("span", {
+    ...attributes,
+    children
+  });
 }
 function ComposerEditorPlaceholder({
   attributes,
   children
 }) {
   const { opacity: _opacity, ...style } = attributes.style;
-  return /* @__PURE__ */ React.createElement("span", {
+  return /* @__PURE__ */ jsxRuntime.jsx("span", {
     ...attributes,
     style,
-    "data-placeholder": ""
-  }, children);
+    "data-placeholder": "",
+    children
+  });
 }
-const ComposerMention = React.forwardRef(
+const ComposerMention = react.forwardRef(
   ({ children, asChild, ...props }, forwardedRef) => {
     const Component = asChild ? reactSlot.Slot : "span";
     const isSelected = slateReact.useSelected();
-    return /* @__PURE__ */ React.createElement(Component, {
+    return /* @__PURE__ */ jsxRuntime.jsx(Component, {
       "data-selected": isSelected || void 0,
       ...props,
-      ref: forwardedRef
-    }, children);
+      ref: forwardedRef,
+      children
+    });
   }
 );
-const ComposerLink = React.forwardRef(
+const ComposerLink = react.forwardRef(
   ({ children, asChild, ...props }, forwardedRef) => {
     const Component = asChild ? reactSlot.Slot : "a";
-    return /* @__PURE__ */ React.createElement(Component, {
+    return /* @__PURE__ */ jsxRuntime.jsx(Component, {
       target: "_blank",
       rel: "noopener noreferrer nofollow",
       ...props,
-      ref: forwardedRef
-    }, children);
+      ref: forwardedRef,
+      children
+    });
   }
 );
-const ComposerSuggestions = React.forwardRef(({ children, style, asChild, ...props }, forwardedRef) => {
+const ComposerSuggestions = react.forwardRef(({ children, style, asChild, ...props }, forwardedRef) => {
   const [isPresent] = Persist.usePersist();
-  const ref = React.useRef(null);
+  const ref = react.useRef(null);
   const {
     ref: contentRef,
     placement,
     dir
   } = contexts.useComposerSuggestionsContext(COMPOSER_SUGGESTIONS_NAME);
   const mergedRefs = useRefs.useRefs(forwardedRef, contentRef, ref);
-  const [side, align] = React.useMemo(
+  const [side, align] = react.useMemo(
     () => utils.getSideAndAlignFromFloatingPlacement(placement),
     [placement]
   );
   const Component = asChild ? reactSlot.Slot : "div";
   Persist.useAnimationPersist(ref);
-  return /* @__PURE__ */ React.createElement(Component, {
+  return /* @__PURE__ */ jsxRuntime.jsx(Component, {
     dir,
     ...props,
     "data-state": isPresent ? "open" : "closed",
@@ -417,21 +443,23 @@ const ComposerSuggestions = React.forwardRef(({ children, style, asChild, ...pro
       overflowY: "auto",
       ...style
     },
-    ref: mergedRefs
-  }, children);
+    ref: mergedRefs,
+    children
+  });
 });
-const ComposerSuggestionsList = React.forwardRef(({ children, asChild, ...props }, forwardedRef) => {
+const ComposerSuggestionsList = react.forwardRef(({ children, asChild, ...props }, forwardedRef) => {
   const { id } = contexts.useComposerSuggestionsContext(COMPOSER_SUGGESTIONS_LIST_NAME);
   const Component = asChild ? reactSlot.Slot : "ul";
-  return /* @__PURE__ */ React.createElement(Component, {
+  return /* @__PURE__ */ jsxRuntime.jsx(Component, {
     role: "listbox",
     id,
     "aria-label": "Suggestions list",
     ...props,
-    ref: forwardedRef
-  }, children);
+    ref: forwardedRef,
+    children
+  });
 });
-const ComposerSuggestionsListItem = React.forwardRef(
+const ComposerSuggestionsListItem = react.forwardRef(
   ({
     value,
     children,
@@ -441,21 +469,21 @@ const ComposerSuggestionsListItem = React.forwardRef(
     asChild,
     ...props
   }, forwardedRef) => {
-    const ref = React.useRef(null);
+    const ref = react.useRef(null);
     const mergedRefs = useRefs.useRefs(forwardedRef, ref);
     const { selectedValue, setSelectedValue, itemId, onItemSelect } = contexts.useComposerSuggestionsContext(COMPOSER_SUGGESTIONS_LIST_ITEM_NAME);
     const Component = asChild ? reactSlot.Slot : "li";
-    const isSelected = React.useMemo(
+    const isSelected = react.useMemo(
       () => selectedValue === value,
       [selectedValue, value]
     );
-    const id = React.useMemo(() => itemId(value), [itemId, value]);
-    React.useEffect(() => {
+    const id = react.useMemo(() => itemId(value), [itemId, value]);
+    react.useEffect(() => {
       if (ref?.current && isSelected) {
         ref.current.scrollIntoView({ block: "nearest" });
       }
     }, [isSelected]);
-    const handlePointerMove = React.useCallback(
+    const handlePointerMove = react.useCallback(
       (event) => {
         onPointerMove?.(event);
         if (!event.isDefaultPrevented()) {
@@ -464,7 +492,7 @@ const ComposerSuggestionsListItem = React.forwardRef(
       },
       [onPointerMove, setSelectedValue, value]
     );
-    const handlePointerDown = React.useCallback(
+    const handlePointerDown = react.useCallback(
       (event) => {
         onPointerDown?.(event);
         event.preventDefault();
@@ -472,7 +500,7 @@ const ComposerSuggestionsListItem = React.forwardRef(
       },
       [onPointerDown]
     );
-    const handleClick = React.useCallback(
+    const handleClick = react.useCallback(
       (event) => {
         onClick?.(event);
         const wasDefaultPrevented = event.isDefaultPrevented();
@@ -484,7 +512,7 @@ const ComposerSuggestionsListItem = React.forwardRef(
       },
       [onClick, onItemSelect, value]
     );
-    return /* @__PURE__ */ React.createElement(Component, {
+    return /* @__PURE__ */ jsxRuntime.jsx(Component, {
       role: "option",
       id,
       "data-selected": isSelected || void 0,
@@ -493,27 +521,38 @@ const ComposerSuggestionsListItem = React.forwardRef(
       onPointerDown: handlePointerDown,
       onClick: handleClick,
       ...props,
-      ref: mergedRefs
-    }, children);
+      ref: mergedRefs,
+      children
+    });
   }
 );
 const defaultEditorComponents = {
   Link: ({ href, children }) => {
-    return /* @__PURE__ */ React.createElement(ComposerLink, {
-      href
-    }, children);
+    return /* @__PURE__ */ jsxRuntime.jsx(ComposerLink, {
+      href,
+      children
+    });
   },
   Mention: ({ userId }) => {
-    return /* @__PURE__ */ React.createElement(ComposerMention, null, mentions.MENTION_CHARACTER, userId);
+    return /* @__PURE__ */ jsxRuntime.jsxs(ComposerMention, {
+      children: [
+        mentions.MENTION_CHARACTER,
+        userId
+      ]
+    });
   },
   MentionSuggestions: ({ userIds }) => {
-    return userIds.length > 0 ? /* @__PURE__ */ React.createElement(ComposerSuggestions, null, /* @__PURE__ */ React.createElement(ComposerSuggestionsList, null, userIds.map((userId) => /* @__PURE__ */ React.createElement(ComposerSuggestionsListItem, {
-      key: userId,
-      value: userId
-    }, userId)))) : null;
+    return userIds.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(ComposerSuggestions, {
+      children: /* @__PURE__ */ jsxRuntime.jsx(ComposerSuggestionsList, {
+        children: userIds.map((userId) => /* @__PURE__ */ jsxRuntime.jsx(ComposerSuggestionsListItem, {
+          value: userId,
+          children: userId
+        }, userId))
+      })
+    }) : null;
   }
 };
-const ComposerEditor = React.forwardRef(
+const ComposerEditor = react.forwardRef(
   ({
     defaultValue,
     onKeyDown,
@@ -538,17 +577,17 @@ const ComposerEditor = React.forwardRef(
     } = contexts.useComposer();
     const isDisabled = isComposerDisabled || disabled;
     const initialBody = useInitial.useInitial(defaultValue ?? emptyCommentBody);
-    const initialEditorValue = React.useMemo(() => {
+    const initialEditorValue = react.useMemo(() => {
       return utils.commentBodyToComposerBody(initialBody);
     }, [initialBody]);
-    const { Link, Mention, MentionSuggestions, FloatingToolbar } = React.useMemo(
+    const { Link, Mention, MentionSuggestions, FloatingToolbar } = react.useMemo(
       () => ({ ...defaultEditorComponents, ...components }),
       [components]
     );
-    const [hasFloatingToolbarRange, setHasFloatingToolbarRange] = React.useState(false);
+    const [hasFloatingToolbarRange, setHasFloatingToolbarRange] = react.useState(false);
     const resolveMentionSuggestions = _private.useResolveMentionSuggestions();
     const hasResolveMentionSuggestions = client ? resolveMentionSuggestions : true;
-    const [mentionDraft, setMentionDraft] = React.useState();
+    const [mentionDraft, setMentionDraft] = react.useState();
     const mentionSuggestions = _private.useMentionSuggestions(
       roomId,
       mentionDraft?.text
@@ -559,22 +598,22 @@ const ComposerEditor = React.forwardRef(
       setNextSelectedMentionSuggestionIndex,
       setSelectedMentionSuggestionIndex
     ] = useIndex.useIndex(0, mentionSuggestions?.length ?? 0);
-    const id = useId.useId();
-    const floatingToolbarId = React.useMemo(
+    const id = react.useId();
+    const floatingToolbarId = react.useMemo(
       () => `liveblocks-floating-toolbar-${id}`,
       [id]
     );
-    const suggestionsListId = React.useMemo(
+    const suggestionsListId = react.useMemo(
       () => `liveblocks-suggestions-list-${id}`,
       [id]
     );
-    const suggestionsListItemId = React.useCallback(
+    const suggestionsListItemId = react.useCallback(
       (userId) => userId ? `liveblocks-suggestions-list-item-${id}-${userId}` : void 0,
       [id]
     );
-    const renderElement = React.useCallback(
+    const renderElement = react.useCallback(
       (props2) => {
-        return /* @__PURE__ */ React.createElement(ComposerEditorElement, {
+        return /* @__PURE__ */ jsxRuntime.jsx(ComposerEditorElement, {
           Mention,
           Link,
           ...props2
@@ -582,14 +621,14 @@ const ComposerEditor = React.forwardRef(
       },
       [Link, Mention]
     );
-    const handleChange = React.useCallback(
+    const handleChange = react.useCallback(
       (value) => {
         validate(value);
         onEditorChange.notify();
       },
       [validate, onEditorChange]
     );
-    const createMention = React.useCallback(
+    const createMention = react.useCallback(
       (userId) => {
         if (!mentionDraft || !userId) {
           return;
@@ -601,7 +640,7 @@ const ComposerEditor = React.forwardRef(
       },
       [editor, mentionDraft, setSelectedMentionSuggestionIndex]
     );
-    const handleKeyDown = React.useCallback(
+    const handleKeyDown = react.useCallback(
       (event) => {
         onKeyDown?.(event);
         if (event.isDefaultPrevented()) {
@@ -687,7 +726,7 @@ const ComposerEditor = React.forwardRef(
         submit
       ]
     );
-    const handleFocus = React.useCallback(
+    const handleFocus = react.useCallback(
       (event) => {
         onFocus?.(event);
         if (!event.isDefaultPrevented()) {
@@ -696,7 +735,7 @@ const ComposerEditor = React.forwardRef(
       },
       [onFocus, setFocused]
     );
-    const handleBlur = React.useCallback(
+    const handleBlur = react.useCallback(
       (event) => {
         onBlur?.(event);
         if (!event.isDefaultPrevented()) {
@@ -705,11 +744,11 @@ const ComposerEditor = React.forwardRef(
       },
       [onBlur, setFocused]
     );
-    const selectedMentionSuggestionUserId = React.useMemo(
+    const selectedMentionSuggestionUserId = react.useMemo(
       () => mentionSuggestions?.[selectedMentionSuggestionIndex],
       [selectedMentionSuggestionIndex, mentionSuggestions]
     );
-    const setSelectedMentionSuggestionUserId = React.useCallback(
+    const setSelectedMentionSuggestionUserId = react.useCallback(
       (userId) => {
         const index = mentionSuggestions?.indexOf(userId);
         if (index !== void 0 && index >= 0) {
@@ -718,7 +757,7 @@ const ComposerEditor = React.forwardRef(
       },
       [setSelectedMentionSuggestionIndex, mentionSuggestions]
     );
-    const additionalProps = React.useMemo(
+    const additionalProps = react.useMemo(
       () => mentionDraft ? {
         role: "combobox",
         "aria-autocomplete": "list",
@@ -740,58 +779,63 @@ const ComposerEditor = React.forwardRef(
         floatingToolbarId
       ]
     );
-    React.useImperativeHandle(forwardedRef, () => {
+    react.useImperativeHandle(forwardedRef, () => {
       return slateReact.ReactEditor.toDOMNode(editor, editor);
     }, [editor]);
-    useLayoutEffect.useLayoutEffect(() => {
+    react.useLayoutEffect(() => {
       if (autoFocus) {
         focus();
       }
     }, [autoFocus, editor, focus]);
-    useLayoutEffect.useLayoutEffect(() => {
+    react.useLayoutEffect(() => {
       if (isFocused && editor.selection === null) {
         select();
       }
     }, [editor, select, isFocused]);
-    return /* @__PURE__ */ React.createElement(slateReact.Slate, {
+    return /* @__PURE__ */ jsxRuntime.jsxs(slateReact.Slate, {
       editor,
       initialValue: initialEditorValue,
-      onChange: handleChange
-    }, /* @__PURE__ */ React.createElement(slateReact.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__ */ React.createElement(ComposerEditorMentionSuggestionsWrapper, {
-      dir,
-      mentionDraft,
-      setMentionDraft,
-      selectedUserId: selectedMentionSuggestionUserId,
-      setSelectedUserId: setSelectedMentionSuggestionUserId,
-      userIds: mentionSuggestions,
-      id: suggestionsListId,
-      itemId: suggestionsListItemId,
-      onItemSelect: createMention,
-      MentionSuggestions
-    }), FloatingToolbar && /* @__PURE__ */ React.createElement(ComposerEditorFloatingToolbarWrapper, {
-      dir,
-      id: floatingToolbarId,
-      hasFloatingToolbarRange,
-      setHasFloatingToolbarRange,
-      FloatingToolbar
-    }));
+      onChange: handleChange,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(slateReact.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__ */ jsxRuntime.jsx(ComposerEditorMentionSuggestionsWrapper, {
+          dir,
+          mentionDraft,
+          setMentionDraft,
+          selectedUserId: selectedMentionSuggestionUserId,
+          setSelectedUserId: setSelectedMentionSuggestionUserId,
+          userIds: mentionSuggestions,
+          id: suggestionsListId,
+          itemId: suggestionsListItemId,
+          onItemSelect: createMention,
+          MentionSuggestions
+        }),
+        FloatingToolbar && /* @__PURE__ */ jsxRuntime.jsx(ComposerEditorFloatingToolbarWrapper, {
+          dir,
+          id: floatingToolbarId,
+          hasFloatingToolbarRange,
+          setHasFloatingToolbarRange,
+          FloatingToolbar
+        })
+      ]
+    });
   }
 );
 const MAX_ATTACHMENTS = 10;
@@ -807,7 +851,7 @@ function prepareAttachment(file) {
     file
   };
 }
-const ComposerForm = React.forwardRef(
+const ComposerForm = react.forwardRef(
   ({
     children,
     onSubmit,
@@ -821,9 +865,9 @@ const ComposerForm = React.forwardRef(
     ...props
   }, forwardedRef) => {
     const Component = asChild ? reactSlot.Slot : "form";
-    const [isEmpty$1, setEmpty] = React.useState(true);
-    const [isSubmitting, setSubmitting] = React.useState(false);
-    const [isFocused, setFocused] = React.useState(false);
+    const [isEmpty$1, setEmpty] = react.useState(true);
+    const [isSubmitting, setSubmitting] = react.useState(false);
+    const [isFocused, setFocused] = react.useState(false);
     const room = _private.useRoomOrNull();
     const roomId = _roomId !== void 0 ? _roomId : room?.id;
     if (roomId === void 0) {
@@ -843,24 +887,24 @@ const ComposerForm = React.forwardRef(
     });
     const numberOfAttachments = attachments.length;
     const hasMaxAttachments = numberOfAttachments >= maxAttachments;
-    const isDisabled = React.useMemo(() => {
+    const isDisabled = react.useMemo(() => {
       return isSubmitting || disabled === true;
     }, [isSubmitting, disabled]);
-    const canSubmit = React.useMemo(() => {
+    const canSubmit = react.useMemo(() => {
       return !isEmpty$1 && !isUploadingAttachments;
     }, [isEmpty$1, isUploadingAttachments]);
-    const [marks$1, setMarks] = React.useState(marks.getMarks);
-    const ref = React.useRef(null);
+    const [marks$1, setMarks] = react.useState(marks.getMarks);
+    const ref = react.useRef(null);
     const mergedRefs = useRefs.useRefs(forwardedRef, ref);
-    const fileInputRef = React.useRef(null);
+    const fileInputRef = react.useRef(null);
     const syncSource = _private.useSyncSource();
     const isPending = !preventUnsavedChanges ? false : !isEmpty$1 || isUploadingAttachments || attachments.length > 0;
-    React.useEffect(() => {
+    react.useEffect(() => {
       syncSource?.setSyncStatus(
         isPending ? "has-local-changes" : "synchronized"
       );
     }, [syncSource, isPending]);
-    const createAttachments = React.useCallback(
+    const createAttachments = react.useCallback(
       (files) => {
         if (!files.length) {
           return;
@@ -875,11 +919,11 @@ const ComposerForm = React.forwardRef(
       },
       [addAttachments, maxAttachments, numberOfAttachments]
     );
-    const createAttachmentsRef = React.useRef(createAttachments);
-    React.useEffect(() => {
+    const createAttachmentsRef = react.useRef(createAttachments);
+    react.useEffect(() => {
       createAttachmentsRef.current = createAttachments;
     }, [createAttachments]);
-    const stableCreateAttachments = React.useCallback((files) => {
+    const stableCreateAttachments = react.useCallback((files) => {
       createAttachmentsRef.current(files);
     }, []);
     const editor = useInitial.useInitial(
@@ -889,13 +933,13 @@ const ComposerForm = React.forwardRef(
       })
     );
     const onEditorChange = useInitial.useInitial(core.makeEventSource);
-    const validate = React.useCallback(
+    const validate = react.useCallback(
       (value) => {
         setEmpty(isEmpty.isEmpty(editor, value));
       },
       [editor]
     );
-    const submit = React.useCallback(() => {
+    const submit = react.useCallback(() => {
       if (!canSubmit) {
         return;
       }
@@ -905,7 +949,7 @@ const ComposerForm = React.forwardRef(
         }
       });
     }, [canSubmit]);
-    const clear = React.useCallback(() => {
+    const clear = react.useCallback(() => {
       slate.Transforms.delete(editor, {
         at: {
           anchor: slate.Editor.start(editor, []),
@@ -913,10 +957,10 @@ const ComposerForm = React.forwardRef(
         }
       });
     }, [editor]);
-    const select = React.useCallback(() => {
+    const select = react.useCallback(() => {
       slate.Transforms.select(editor, slate.Editor.end(editor, []));
     }, [editor]);
-    const focus = React.useCallback(
+    const focus = react.useCallback(
       (resetSelection = true) => {
         if (!slateReact.ReactEditor.isFocused(editor)) {
           slate.Transforms.select(
@@ -928,17 +972,17 @@ const ComposerForm = React.forwardRef(
       },
       [editor]
     );
-    const blur = React.useCallback(() => {
+    const blur = react.useCallback(() => {
       slateReact.ReactEditor.blur(editor);
     }, [editor]);
-    const createMention = React.useCallback(() => {
+    const createMention = react.useCallback(() => {
       if (disabled) {
         return;
       }
       focus();
       mentions.insertMentionCharacter(editor);
     }, [disabled, editor, focus]);
-    const insertText = React.useCallback(
+    const insertText = react.useCallback(
       (text) => {
         if (disabled) {
           return;
@@ -948,7 +992,7 @@ const ComposerForm = React.forwardRef(
       },
       [disabled, editor, focus]
     );
-    const attachFiles = React.useCallback(() => {
+    const attachFiles = react.useCallback(() => {
       if (disabled) {
         return;
       }
@@ -956,7 +1000,7 @@ const ComposerForm = React.forwardRef(
         fileInputRef.current.click();
       }
     }, [disabled]);
-    const handleAttachmentsInputChange = React.useCallback(
+    const handleAttachmentsInputChange = react.useCallback(
       (event) => {
         if (disabled) {
           return;
@@ -968,13 +1012,13 @@ const ComposerForm = React.forwardRef(
       },
       [createAttachments, disabled]
     );
-    const onSubmitEnd = React.useCallback(() => {
+    const onSubmitEnd = react.useCallback(() => {
       clear();
       blur();
       clearAttachments();
       setSubmitting(false);
     }, [blur, clear, clearAttachments]);
-    const handleSubmit = React.useCallback(
+    const handleSubmit = react.useCallback(
       (event) => {
         if (disabled) {
           return;
@@ -1017,10 +1061,10 @@ const ComposerForm = React.forwardRef(
       },
       [disabled, editor, attachments, onComposerSubmit, onSubmit, onSubmitEnd]
     );
-    const stopPropagation = React.useCallback((event) => {
+    const stopPropagation = react.useCallback((event) => {
       event.stopPropagation();
     }, []);
-    const toggleMark = React.useCallback(
+    const toggleMark = react.useCallback(
       (mark) => {
         marks.toggleMark(editor, mark);
       },
@@ -1029,75 +1073,85 @@ const ComposerForm = React.forwardRef(
     useObservable.useObservable(onEditorChange, () => {
       setMarks(marks.getMarks(editor));
     });
-    return /* @__PURE__ */ React.createElement(contexts.ComposerEditorContext.Provider, {
+    return /* @__PURE__ */ jsxRuntime.jsx(contexts.ComposerEditorContext.Provider, {
       value: {
         editor,
         validate,
         setFocused,
         onEditorChange,
         roomId
-      }
-    }, /* @__PURE__ */ React.createElement(contexts.ComposerAttachmentsContext.Provider, {
-      value: {
-        createAttachments,
-        isUploadingAttachments,
-        hasMaxAttachments,
-        maxAttachments,
-        maxAttachmentSize
-      }
-    }, /* @__PURE__ */ React.createElement(contexts.ComposerContext.Provider, {
-      value: {
-        isDisabled,
-        isFocused,
-        isEmpty: isEmpty$1,
-        canSubmit,
-        submit,
-        clear,
-        select,
-        focus,
-        blur,
-        createMention,
-        insertText,
-        attachments,
-        attachFiles,
-        removeAttachment,
-        toggleMark,
-        marks: marks$1
-      }
-    }, /* @__PURE__ */ React.createElement(Component, {
-      ...props,
-      onSubmit: handleSubmit,
-      ref: mergedRefs
-    }, /* @__PURE__ */ React.createElement("input", {
-      type: "file",
-      multiple: true,
-      ref: fileInputRef,
-      onChange: handleAttachmentsInputChange,
-      onClick: stopPropagation,
-      tabIndex: -1,
-      style: { display: "none" }
-    }), /* @__PURE__ */ React.createElement(reactSlot.Slottable, null, children)))));
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(contexts.ComposerAttachmentsContext.Provider, {
+        value: {
+          createAttachments,
+          isUploadingAttachments,
+          hasMaxAttachments,
+          maxAttachments,
+          maxAttachmentSize
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(contexts.ComposerContext.Provider, {
+          value: {
+            isDisabled,
+            isFocused,
+            isEmpty: isEmpty$1,
+            canSubmit,
+            submit,
+            clear,
+            select,
+            focus,
+            blur,
+            createMention,
+            insertText,
+            attachments,
+            attachFiles,
+            removeAttachment,
+            toggleMark,
+            marks: marks$1
+          },
+          children: /* @__PURE__ */ jsxRuntime.jsxs(Component, {
+            ...props,
+            onSubmit: handleSubmit,
+            ref: mergedRefs,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("input", {
+                type: "file",
+                multiple: true,
+                ref: fileInputRef,
+                onChange: handleAttachmentsInputChange,
+                onClick: stopPropagation,
+                tabIndex: -1,
+                style: { display: "none" }
+              }),
+              /* @__PURE__ */ jsxRuntime.jsx(reactSlot.Slottable, {
+                children
+              })
+            ]
+          })
+        })
+      })
+    });
   }
 );
-const ComposerSubmit = React.forwardRef(
+const ComposerSubmit = react.forwardRef(
   ({ children, disabled, asChild, ...props }, forwardedRef) => {
     const Component = asChild ? reactSlot.Slot : "button";
     const { canSubmit, isDisabled: isComposerDisabled } = contexts.useComposer();
     const isDisabled = isComposerDisabled || disabled || !canSubmit;
-    return /* @__PURE__ */ React.createElement(Component, {
+    return /* @__PURE__ */ jsxRuntime.jsx(Component, {
       type: "submit",
       ...props,
       ref: forwardedRef,
-      disabled: isDisabled
-    }, children);
+      disabled: isDisabled,
+      children
+    });
   }
 );
-const ComposerAttachFiles = React.forwardRef(({ children, onClick, disabled, asChild, ...props }, forwardedRef) => {
+const ComposerAttachFiles = react.forwardRef(({ children, onClick, disabled, asChild, ...props }, forwardedRef) => {
   const Component = asChild ? reactSlot.Slot : "button";
   const { hasMaxAttachments } = contexts.useComposerAttachmentsContext();
   const { isDisabled: isComposerDisabled, attachFiles } = contexts.useComposer();
   const isDisabled = isComposerDisabled || hasMaxAttachments || disabled;
-  const handleClick = React.useCallback(
+  const handleClick = react.useCallback(
     (event) => {
       onClick?.(event);
       if (!event.isDefaultPrevented()) {
@@ -1106,15 +1160,16 @@ const ComposerAttachFiles = React.forwardRef(({ children, onClick, disabled, asC
     },
     [attachFiles, onClick]
   );
-  return /* @__PURE__ */ React.createElement(Component, {
+  return /* @__PURE__ */ jsxRuntime.jsx(Component, {
     type: "button",
     ...props,
     onClick: handleClick,
     ref: forwardedRef,
-    disabled: isDisabled
-  }, children);
+    disabled: isDisabled,
+    children
+  });
 });
-const ComposerAttachmentsDropArea = React.forwardRef(
+const ComposerAttachmentsDropArea = react.forwardRef(
   ({
     onDragEnter,
     onDragLeave,
@@ -1134,7 +1189,7 @@ const ComposerAttachmentsDropArea = React.forwardRef(
       onDrop,
       disabled: isDisabled
     });
-    return /* @__PURE__ */ React.createElement(Component, {
+    return /* @__PURE__ */ jsxRuntime.jsx(Component, {
       ...dropAreaProps,
       "data-disabled": isDisabled ? "" : void 0,
       ...props,
@@ -1142,11 +1197,11 @@ const ComposerAttachmentsDropArea = React.forwardRef(
     });
   }
 );
-const ComposerMarkToggle = React.forwardRef(
+const ComposerMarkToggle = react.forwardRef(
   ({ children, mark, onValueChange, onClick, asChild, ...props }, forwardedRef) => {
     const Component = asChild ? reactSlot.Slot : "button";
     const { marks, toggleMark } = contexts.useComposer();
-    const handleClick = React.useCallback(
+    const handleClick = react.useCallback(
       (event) => {
         onClick?.(event);
         if (!event.isDefaultPrevented()) {
@@ -1156,15 +1211,17 @@ const ComposerMarkToggle = React.forwardRef(
       },
       [mark, onClick, onValueChange, toggleMark]
     );
-    return /* @__PURE__ */ React.createElement(TogglePrimitive__namespace.Root, {
+    return /* @__PURE__ */ jsxRuntime.jsx(TogglePrimitive__namespace.Root, {
       asChild: true,
       pressed: marks[mark],
       onClick: handleClick,
-      ...props
-    }, /* @__PURE__ */ React.createElement(Component, {
       ...props,
-      ref: forwardedRef
-    }, children));
+      children: /* @__PURE__ */ jsxRuntime.jsx(Component, {
+        ...props,
+        ref: forwardedRef,
+        children
+      })
+    });
   }
 );
 if (process.env.NODE_ENV !== "production") {