@liveblocks/react-ui 1.12.0-initial1

package/dist/primitives/Composer/index.mjs

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