@liveblocks/react-ui 1.12.0-initial1

package/dist/primitives/Composer/index.js

@@ -0,0 +1,771 @@
+'use client';
+'use strict';
+
+var reactDom = require('@floating-ui/react-dom');
+var core = require('@liveblocks/core');
+var react = require('@liveblocks/react');
+var reactSlot = require('@radix-ui/react-slot');
+var React = require('react');
+var slate = require('slate');
+var slateHistory = require('slate-history');
+var slateReact = require('slate-react');
+var config = require('../../config.js');
+var constants = require('../../constants.js');
+var autoFormatting = require('../../slate/plugins/auto-formatting.js');
+var autoLinks = require('../../slate/plugins/auto-links.js');
+var emptyClearFormatting = require('../../slate/plugins/empty-clear-formatting.js');
+var mentions = require('../../slate/plugins/mentions.js');
+var getDomRange = require('../../slate/utils/get-dom-range.js');
+var isEmpty = require('../../slate/utils/is-empty.js');
+var marks = require('../../slate/utils/marks.js');
+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 useRefs = require('../../utils/use-refs.js');
+var utils$1 = require('../Comment/utils.js');
+var contexts = require('./contexts.js');
+var utils = require('./utils.js');
+
+const MENTION_SUGGESTIONS_POSITION = "top";
+const COMPOSER_MENTION_NAME = "ComposerMention";
+const COMPOSER_LINK_NAME = "ComposerLink";
+const COMPOSER_SUGGESTIONS_NAME = "ComposerSuggestions";
+const COMPOSER_SUGGESTIONS_LIST_NAME = "ComposerSuggestionsList";
+const COMPOSER_SUGGESTIONS_LIST_ITEM_NAME = "ComposerSuggestionsListItem";
+const COMPOSER_SUBMIT_NAME = "ComposerSubmit";
+const COMPOSER_EDITOR_NAME = "ComposerEditor";
+const COMPOSER_FORM_NAME = "ComposerForm";
+const emptyCommentBody = {
+  version: 1,
+  content: [{ type: "paragraph", children: [{ text: "" }] }]
+};
+function createComposerEditor() {
+  return autoLinks.withAutoLinks(
+    mentions.withMentions(
+      emptyClearFormatting.withEmptyClearFormatting(
+        autoFormatting.withAutoFormatting(slateHistory.withHistory(slateReact.withReact(slate.createEditor())))
+      )
+    )
+  );
+}
+function ComposerEditorMentionWrapper({
+  Mention,
+  attributes,
+  children,
+  element
+}) {
+  const isSelected = slateReact.useSelected();
+  return /* @__PURE__ */ React.createElement("span", {
+    ...attributes
+  }, element.id ? /* @__PURE__ */ React.createElement(Mention, {
+    userId: element.id,
+    isSelected
+  }) : null, children);
+}
+function ComposerEditorLinkWrapper({
+  Link,
+  attributes,
+  element,
+  children
+}) {
+  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));
+}
+function ComposerEditorMentionSuggestionsWrapper({
+  id,
+  itemId,
+  userIds,
+  selectedUserId,
+  setSelectedUserId,
+  mentionDraft,
+  onItemSelect,
+  position = MENTION_SUGGESTIONS_POSITION,
+  dir,
+  MentionSuggestions
+}) {
+  const editor = slateReact.useSlateStatic();
+  const { isFocused } = contexts.useComposer();
+  const [content, setContent] = React.useState(null);
+  const [contentZIndex, setContentZIndex] = React.useState();
+  const contentRef = React.useCallback(setContent, [setContent]);
+  const { portalContainer } = config.useLiveblocksUIConfig();
+  const floatingOptions = React.useMemo(() => {
+    const detectOverflowOptions = {
+      padding: constants.FLOATING_ELEMENT_COLLISION_PADDING
+    };
+    return {
+      strategy: "fixed",
+      placement: utils.getPlacementFromPosition(position, dir),
+      middleware: [
+        reactDom.flip({ ...detectOverflowOptions, crossAxis: false }),
+        reactDom.hide(detectOverflowOptions),
+        reactDom.shift({
+          ...detectOverflowOptions,
+          limiter: reactDom.limitShift()
+        }),
+        reactDom.size({
+          ...detectOverflowOptions,
+          apply({ availableWidth, availableHeight, elements }) {
+            elements.floating.style.setProperty(
+              "--lb-composer-suggestions-available-width",
+              `${availableWidth}px`
+            );
+            elements.floating.style.setProperty(
+              "--lb-composer-suggestions-available-height",
+              `${availableHeight}px`
+            );
+          }
+        })
+      ],
+      whileElementsMounted: reactDom.autoUpdate
+    };
+  }, [position, dir]);
+  const {
+    refs: { setReference, setFloating },
+    strategy,
+    isPositioned,
+    placement,
+    x,
+    y
+  } = reactDom.useFloating(floatingOptions);
+  useLayoutEffect.useLayoutEffect(() => {
+    if (content) {
+      setContentZIndex(window.getComputedStyle(content).zIndex);
+    }
+  }, [content]);
+  useLayoutEffect.useLayoutEffect(() => {
+    if (!mentionDraft) {
+      return;
+    }
+    const domRange = getDomRange.getDOMRange(editor, mentionDraft.range);
+    if (domRange) {
+      setReference({
+        getBoundingClientRect: () => domRange.getBoundingClientRect(),
+        getClientRects: () => domRange.getClientRects()
+      });
+    }
+  }, [setReference, editor, mentionDraft]);
+  return /* @__PURE__ */ React.createElement(Persist.Persist, null, mentionDraft?.range && isFocused && userIds ? /* @__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);
+}
+function ComposerEditorElement({
+  Mention,
+  Link,
+  ...props
+}) {
+  const { attributes, children, element } = props;
+  switch (element.type) {
+    case "mention":
+      return /* @__PURE__ */ React.createElement(ComposerEditorMentionWrapper, {
+        Mention,
+        ...props
+      });
+    case "auto-link":
+      return /* @__PURE__ */ React.createElement(ComposerEditorLinkWrapper, {
+        Link,
+        ...props
+      });
+    case "paragraph":
+      return /* @__PURE__ */ React.createElement("p", {
+        ...attributes,
+        style: { position: "relative" }
+      }, children);
+    default:
+      return null;
+  }
+}
+function ComposerEditorLeaf({ attributes, children, leaf }) {
+  if (leaf.bold) {
+    children = /* @__PURE__ */ React.createElement("strong", null, children);
+  }
+  if (leaf.italic) {
+    children = /* @__PURE__ */ React.createElement("em", null, children);
+  }
+  if (leaf.strikethrough) {
+    children = /* @__PURE__ */ React.createElement("s", null, children);
+  }
+  if (leaf.code) {
+    children = /* @__PURE__ */ React.createElement("code", null, children);
+  }
+  return /* @__PURE__ */ React.createElement("span", {
+    ...attributes
+  }, children);
+}
+function ComposerEditorPlaceholder({
+  attributes,
+  children
+}) {
+  const { opacity: _opacity, ...style } = attributes.style;
+  return /* @__PURE__ */ React.createElement("span", {
+    ...attributes,
+    style,
+    "data-placeholder": ""
+  }, children);
+}
+const ComposerMention = React.forwardRef(
+  ({ children, asChild, ...props }, forwardedRef) => {
+    const Component = asChild ? reactSlot.Slot : "span";
+    const isSelected = slateReact.useSelected();
+    return /* @__PURE__ */ React.createElement(Component, {
+      "data-selected": isSelected || void 0,
+      ...props,
+      ref: forwardedRef
+    }, children);
+  }
+);
+const ComposerLink = React.forwardRef(
+  ({ children, asChild, ...props }, forwardedRef) => {
+    const Component = asChild ? reactSlot.Slot : "a";
+    return /* @__PURE__ */ React.createElement(Component, {
+      target: "_blank",
+      rel: "noopener noreferrer nofollow",
+      ...props,
+      ref: forwardedRef
+    }, children);
+  }
+);
+const ComposerSuggestions = React.forwardRef(({ children, style, asChild, ...props }, forwardedRef) => {
+  const [isPresent] = Persist.usePersist();
+  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(
+    () => utils.getSideAndAlignFromPlacement(placement),
+    [placement]
+  );
+  const Component = asChild ? reactSlot.Slot : "div";
+  Persist.useAnimationPersist(ref);
+  return /* @__PURE__ */ React.createElement(Component, {
+    dir,
+    ...props,
+    "data-state": isPresent ? "open" : "closed",
+    "data-side": side,
+    "data-align": align,
+    style: {
+      display: "flex",
+      flexDirection: "column",
+      maxHeight: "var(--lb-composer-suggestions-available-height)",
+      overflowY: "auto",
+      ...style
+    },
+    ref: mergedRefs
+  }, children);
+});
+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, {
+    role: "listbox",
+    id,
+    "aria-label": "Suggestions list",
+    ...props,
+    ref: forwardedRef
+  }, children);
+});
+const ComposerSuggestionsListItem = React.forwardRef(
+  ({ value, children, onPointerMove, onPointerDown, asChild, ...props }, forwardedRef) => {
+    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(
+      () => selectedValue === value,
+      [selectedValue, value]
+    );
+    const id = React.useMemo(() => itemId(value), [itemId, value]);
+    React.useEffect(() => {
+      if (ref?.current && isSelected) {
+        ref.current.scrollIntoView({ block: "nearest" });
+      }
+    }, [isSelected]);
+    const handlePointerMove = React.useCallback(
+      (event) => {
+        onPointerMove?.(event);
+        if (!event.isDefaultPrevented()) {
+          setSelectedValue(value);
+        }
+      },
+      [onPointerMove, setSelectedValue, value]
+    );
+    const handlePointerDown = React.useCallback(
+      (event) => {
+        onPointerDown?.(event);
+        if (!event.isDefaultPrevented()) {
+          const target = event.target;
+          if (target.hasPointerCapture(event.pointerId)) {
+            target.releasePointerCapture(event.pointerId);
+          }
+          if (event.button === 0 && event.ctrlKey === false) {
+            onItemSelect(value);
+            event.preventDefault();
+          }
+        }
+      },
+      [onItemSelect, onPointerDown, value]
+    );
+    return /* @__PURE__ */ React.createElement(Component, {
+      role: "option",
+      id,
+      "data-selected": isSelected || void 0,
+      "aria-selected": isSelected || void 0,
+      onPointerMove: handlePointerMove,
+      onPointerDown: handlePointerDown,
+      ...props,
+      ref: mergedRefs
+    }, children);
+  }
+);
+const defaultEditorComponents = {
+  Link: ({ href, children }) => {
+    return /* @__PURE__ */ React.createElement(ComposerLink, {
+      href
+    }, children);
+  },
+  Mention: ({ userId }) => {
+    return /* @__PURE__ */ React.createElement(ComposerMention, null, 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;
+  }
+};
+const ComposerEditor = React.forwardRef(
+  ({
+    defaultValue,
+    onKeyDown,
+    onFocus,
+    onBlur,
+    disabled,
+    autoFocus,
+    components,
+    dir,
+    ...props
+  }, forwardedRef) => {
+    const {
+      [core.kInternal]: { useMentionSuggestions },
+      useSelf
+    } = react.useRoomContextBundle();
+    const self = useSelf();
+    const isDisabled = React.useMemo(
+      () => disabled || !self?.canComment,
+      [disabled, self?.canComment]
+    );
+    const { editor, validate, setFocused } = contexts.useComposerEditorContext();
+    const { submit, focus, select, isEmpty, isFocused } = contexts.useComposer();
+    const initialBody = useInitial.useInitial(defaultValue ?? emptyCommentBody);
+    const initialEditorValue = React.useMemo(() => {
+      return utils.commentBodyToComposerBody(initialBody);
+    }, [initialBody]);
+    const { Link, Mention, MentionSuggestions } = React.useMemo(
+      () => ({ ...defaultEditorComponents, ...components }),
+      [components]
+    );
+    const [mentionDraft, setMentionDraft] = React.useState();
+    const mentionSuggestions = useMentionSuggestions(mentionDraft?.text);
+    const [
+      selectedMentionSuggestionIndex,
+      setPreviousSelectedMentionSuggestionIndex,
+      setNextSelectedMentionSuggestionIndex,
+      setSelectedMentionSuggestionIndex
+    ] = useIndex.useIndex(0, mentionSuggestions?.length ?? 0);
+    const id = useId.useId();
+    const suggestionsListId = React.useMemo(
+      () => `liveblocks-suggestions-list-${id}`,
+      [id]
+    );
+    const suggestionsListItemId = React.useCallback(
+      (userId) => userId ? `liveblocks-suggestions-list-item-${id}-${userId}` : void 0,
+      [id]
+    );
+    const renderElement = React.useCallback(
+      (props2) => {
+        return /* @__PURE__ */ React.createElement(ComposerEditorElement, {
+          Mention,
+          Link,
+          ...props2
+        });
+      },
+      [Link, Mention]
+    );
+    const handleChange = React.useCallback(
+      (value) => {
+        validate(value);
+        setMentionDraft(mentions.getMentionDraftAtSelection(editor));
+      },
+      [editor, validate]
+    );
+    const createMention = React.useCallback(
+      (userId) => {
+        if (!mentionDraft || !userId) {
+          return;
+        }
+        slate.Transforms.select(editor, mentionDraft.range);
+        mentions.insertMention(editor, userId);
+        setMentionDraft(void 0);
+        setSelectedMentionSuggestionIndex(0);
+      },
+      [editor, mentionDraft, setSelectedMentionSuggestionIndex]
+    );
+    const handleKeyDown = React.useCallback(
+      (event) => {
+        onKeyDown?.(event);
+        if (event.isDefaultPrevented()) {
+          return;
+        }
+        if (isKey.isKey(event, "ArrowLeft")) {
+          marks.leaveMarkEdge(editor, "start");
+        }
+        if (isKey.isKey(event, "ArrowRight")) {
+          marks.leaveMarkEdge(editor, "end");
+        }
+        if (mentionDraft && mentionSuggestions?.length) {
+          if (isKey.isKey(event, "ArrowDown")) {
+            event.preventDefault();
+            setNextSelectedMentionSuggestionIndex();
+          }
+          if (isKey.isKey(event, "ArrowUp")) {
+            event.preventDefault();
+            setPreviousSelectedMentionSuggestionIndex();
+          }
+          if (isKey.isKey(event, "Enter") || isKey.isKey(event, "Tab")) {
+            event.preventDefault();
+            const userId = mentionSuggestions?.[selectedMentionSuggestionIndex];
+            createMention(userId);
+          }
+          if (isKey.isKey(event, "Escape")) {
+            event.preventDefault();
+            setMentionDraft(void 0);
+            setSelectedMentionSuggestionIndex(0);
+          }
+        } else {
+          if (isKey.isKey(event, "Escape")) {
+            event.preventDefault();
+            slateReact.ReactEditor.blur(editor);
+          }
+          if (isKey.isKey(event, "Enter", { shift: false }) && !isEmpty) {
+            event.preventDefault();
+            submit();
+          }
+          if (isKey.isKey(event, "Enter", { shift: true })) {
+            event.preventDefault();
+            editor.insertBreak();
+          }
+          if (isKey.isKey(event, "b", { mod: true })) {
+            event.preventDefault();
+            marks.toggleMark(editor, "bold");
+          }
+          if (isKey.isKey(event, "i", { mod: true })) {
+            event.preventDefault();
+            marks.toggleMark(editor, "italic");
+          }
+          if (isKey.isKey(event, "s", { mod: true, shift: true })) {
+            event.preventDefault();
+            marks.toggleMark(editor, "strikethrough");
+          }
+          if (isKey.isKey(event, "e", { mod: true })) {
+            event.preventDefault();
+            marks.toggleMark(editor, "code");
+          }
+        }
+      },
+      [
+        createMention,
+        editor,
+        isEmpty,
+        mentionDraft,
+        mentionSuggestions,
+        selectedMentionSuggestionIndex,
+        onKeyDown,
+        setNextSelectedMentionSuggestionIndex,
+        setPreviousSelectedMentionSuggestionIndex,
+        setSelectedMentionSuggestionIndex,
+        submit
+      ]
+    );
+    const handleFocus = React.useCallback(
+      (event) => {
+        onFocus?.(event);
+        if (!event.isDefaultPrevented()) {
+          setFocused(true);
+        }
+      },
+      [onFocus, setFocused]
+    );
+    const handleBlur = React.useCallback(
+      (event) => {
+        onBlur?.(event);
+        if (!event.isDefaultPrevented()) {
+          setFocused(false);
+        }
+      },
+      [onBlur, setFocused]
+    );
+    const selectedMentionSuggestionUserId = React.useMemo(
+      () => mentionSuggestions?.[selectedMentionSuggestionIndex],
+      [selectedMentionSuggestionIndex, mentionSuggestions]
+    );
+    const setSelectedMentionSuggestionUserId = React.useCallback(
+      (userId) => {
+        const index = mentionSuggestions?.indexOf(userId);
+        if (index !== void 0 && index >= 0) {
+          setSelectedMentionSuggestionIndex(index);
+        }
+      },
+      [setSelectedMentionSuggestionIndex, mentionSuggestions]
+    );
+    const propsWhileSuggesting = React.useMemo(
+      () => mentionDraft ? {
+        role: "combobox",
+        "aria-autocomplete": "list",
+        "aria-expanded": true,
+        "aria-controls": suggestionsListId,
+        "aria-activedescendant": suggestionsListItemId(
+          selectedMentionSuggestionUserId
+        )
+      } : {},
+      [
+        mentionDraft,
+        suggestionsListId,
+        suggestionsListItemId,
+        selectedMentionSuggestionUserId
+      ]
+    );
+    React.useImperativeHandle(
+      forwardedRef,
+      () => {
+        return slateReact.ReactEditor.toDOMNode(editor, editor);
+      },
+      [editor]
+    );
+    React.useEffect(() => {
+      if (autoFocus) {
+        focus();
+      }
+    }, [autoFocus, editor, focus]);
+    React.useEffect(() => {
+      if (isFocused && editor.selection === null) {
+        select();
+      }
+    }, [editor, select, isFocused]);
+    return /* @__PURE__ */ React.createElement(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,
+      ...propsWhileSuggesting,
+      ...props,
+      readOnly: isDisabled,
+      disabled: isDisabled,
+      onKeyDown: handleKeyDown,
+      onFocus: handleFocus,
+      onBlur: handleBlur,
+      renderElement,
+      renderLeaf: ComposerEditorLeaf,
+      renderPlaceholder: ComposerEditorPlaceholder
+    }), /* @__PURE__ */ React.createElement(ComposerEditorMentionSuggestionsWrapper, {
+      dir,
+      mentionDraft,
+      selectedUserId: selectedMentionSuggestionUserId,
+      setSelectedUserId: setSelectedMentionSuggestionUserId,
+      userIds: mentionSuggestions,
+      id: suggestionsListId,
+      itemId: suggestionsListItemId,
+      onItemSelect: createMention,
+      MentionSuggestions
+    }));
+  }
+);
+const ComposerForm = React.forwardRef(
+  ({ children, onSubmit, onComposerSubmit, asChild, ...props }, forwardedRef) => {
+    const Component = asChild ? reactSlot.Slot : "form";
+    const editor = useInitial.useInitial(createComposerEditor);
+    const [isEmpty$1, setEmpty] = React.useState(true);
+    const [isFocused, setFocused] = React.useState(false);
+    const ref = React.useRef(null);
+    const mergedRefs = useRefs.useRefs(forwardedRef, ref);
+    const validate = React.useCallback(
+      (value) => {
+        setEmpty(isEmpty.isEmpty(editor, value));
+      },
+      [editor]
+    );
+    const submit = React.useCallback(() => {
+      if (ref.current) {
+        requestSubmit.requestSubmit(ref.current);
+      }
+    }, []);
+    const clear = React.useCallback(() => {
+      slate.Transforms.delete(editor, {
+        at: {
+          anchor: slate.Editor.start(editor, []),
+          focus: slate.Editor.end(editor, [])
+        }
+      });
+    }, [editor]);
+    const select = React.useCallback(() => {
+      slate.Transforms.select(editor, {
+        anchor: slate.Editor.end(editor, []),
+        focus: slate.Editor.end(editor, [])
+      });
+    }, [editor]);
+    const focus = React.useCallback(
+      (resetSelection = true) => {
+        if (!slateReact.ReactEditor.isFocused(editor)) {
+          slate.Transforms.select(
+            editor,
+            resetSelection || !editor.selection ? slate.Editor.end(editor, []) : editor.selection
+          );
+          slateReact.ReactEditor.focus(editor);
+        }
+      },
+      [editor]
+    );
+    const blur = React.useCallback(() => {
+      slateReact.ReactEditor.blur(editor);
+    }, [editor]);
+    const onSubmitEnd = React.useCallback(() => {
+      clear();
+      blur();
+    }, [blur, clear]);
+    const createMention = React.useCallback(() => {
+      focus();
+      mentions.insertMentionCharacter(editor);
+    }, [editor, focus]);
+    const insertText = React.useCallback(
+      (text) => {
+        focus(false);
+        slate.insertText(editor, text);
+      },
+      [editor, focus]
+    );
+    const handleSubmit = React.useCallback(
+      (event) => {
+        onSubmit?.(event);
+        if (event.isDefaultPrevented()) {
+          return;
+        }
+        const body = utils.composerBodyToCommentBody(
+          editor.children
+        );
+        const comment = { body };
+        const promise = onComposerSubmit?.(comment, event);
+        event.preventDefault();
+        if (promise) {
+          promise.then(onSubmitEnd);
+        } else {
+          onSubmitEnd();
+        }
+      },
+      [editor.children, onComposerSubmit, onSubmit, onSubmitEnd]
+    );
+    return /* @__PURE__ */ React.createElement(contexts.ComposerEditorContext.Provider, {
+      value: {
+        editor,
+        validate,
+        setFocused
+      }
+    }, /* @__PURE__ */ React.createElement(contexts.ComposerContext.Provider, {
+      value: {
+        isFocused,
+        isEmpty: isEmpty$1,
+        submit,
+        clear,
+        select,
+        focus,
+        blur,
+        createMention,
+        insertText
+      }
+    }, /* @__PURE__ */ React.createElement(Component, {
+      ...props,
+      onSubmit: handleSubmit,
+      ref: mergedRefs
+    }, children)));
+  }
+);
+const ComposerSubmit = React.forwardRef(
+  ({ children, disabled, asChild, ...props }, forwardedRef) => {
+    const Component = asChild ? reactSlot.Slot : "button";
+    const { useSelf } = react.useRoomContextBundle();
+    const { isEmpty } = contexts.useComposer();
+    const self = useSelf();
+    const isDisabled = React.useMemo(
+      () => disabled || isEmpty || !self?.canComment,
+      [disabled, isEmpty, self?.canComment]
+    );
+    return /* @__PURE__ */ React.createElement(Component, {
+      type: "submit",
+      ...props,
+      ref: forwardedRef,
+      disabled: isDisabled
+    }, children);
+  }
+);
+if (process.env.NODE_ENV !== "production") {
+  ComposerEditor.displayName = COMPOSER_EDITOR_NAME;
+  ComposerForm.displayName = COMPOSER_FORM_NAME;
+  ComposerMention.displayName = COMPOSER_MENTION_NAME;
+  ComposerLink.displayName = COMPOSER_LINK_NAME;
+  ComposerSubmit.displayName = COMPOSER_SUBMIT_NAME;
+  ComposerSuggestions.displayName = COMPOSER_SUGGESTIONS_NAME;
+  ComposerSuggestionsList.displayName = COMPOSER_SUGGESTIONS_LIST_NAME;
+  ComposerSuggestionsListItem.displayName = COMPOSER_SUGGESTIONS_LIST_ITEM_NAME;
+}
+
+exports.Editor = ComposerEditor;
+exports.Form = ComposerForm;
+exports.Link = ComposerLink;
+exports.Mention = ComposerMention;
+exports.Submit = ComposerSubmit;
+exports.Suggestions = ComposerSuggestions;
+exports.SuggestionsList = ComposerSuggestionsList;
+exports.SuggestionsListItem = ComposerSuggestionsListItem;
+//# sourceMappingURL=index.js.map