@liveblocks/react-ui/dist/primitives/Composer/index.cjs.map

A set of React pre-built components for the Liveblocks products. Liveblocks is the all-in-one toolkit to build collaborative products like Figma, Notion, and more.

{"version":3,"file":"index.cjs","sources":["../../../src/primitives/Composer/index.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type CommentAttachment,\n  type CommentBody,\n  type CommentLocalAttachment,\n  createCommentAttachmentId,\n  type EventSource,\n  makeEventSource,\n} from \"@liveblocks/core\";\nimport { useRoom } from \"@liveblocks/react\";\nimport {\n  useClientOrNull,\n  useLayoutEffect,\n  useMentionSuggestions,\n  useResolveMentionSuggestions,\n  useSyncSource,\n} from \"@liveblocks/react/_private\";\nimport { Slot, Slottable } from \"@radix-ui/react-slot\";\nimport * as TogglePrimitive from \"@radix-ui/react-toggle\";\nimport type {\n  AriaAttributes,\n  ChangeEvent,\n  FocusEvent,\n  FormEvent,\n  KeyboardEvent,\n  MouseEvent,\n  PointerEvent,\n  SyntheticEvent,\n} from \"react\";\nimport {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useId,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport type {\n  Descendant as SlateDescendant,\n  Element as SlateElement,\n} from \"slate\";\nimport {\n  createEditor,\n  Editor as SlateEditor,\n  insertText as insertSlateText,\n  Range as SlateRange,\n  Transforms as SlateTransforms,\n} from \"slate\";\nimport { withHistory } from \"slate-history\";\nimport type {\n  RenderElementProps,\n  RenderElementSpecificProps,\n  RenderLeafProps,\n  RenderPlaceholderProps,\n} from \"slate-react\";\nimport {\n  Editable,\n  ReactEditor,\n  Slate,\n  useSelected,\n  useSlateStatic,\n  withReact,\n} from \"slate-react\";\n\nimport { useLiveblocksUIConfig } from \"../../config\";\nimport { withAutoFormatting } from \"../../slate/plugins/auto-formatting\";\nimport { withAutoLinks } from \"../../slate/plugins/auto-links\";\nimport { withCustomLinks } from \"../../slate/plugins/custom-links\";\nimport { withEmptyClearFormatting } from \"../../slate/plugins/empty-clear-formatting\";\nimport type { MentionDraft } from \"../../slate/plugins/mentions\";\nimport {\n  getMentionDraftAtSelection,\n  insertMention,\n  insertMentionCharacter,\n  MENTION_CHARACTER,\n  withMentions,\n} from \"../../slate/plugins/mentions\";\nimport { withNormalize } from \"../../slate/plugins/normalize\";\nimport { withPaste } from \"../../slate/plugins/paste\";\nimport { getDOMRange } from \"../../slate/utils/get-dom-range\";\nimport { isEmpty as isEditorEmpty } from \"../../slate/utils/is-empty\";\nimport {\n  getMarks,\n  leaveMarkEdge,\n  toggleMark as toggleEditorMark,\n} from \"../../slate/utils/marks\";\nimport type {\n  ComposerBody as ComposerBodyData,\n  ComposerBodyAutoLink,\n  ComposerBodyCustomLink,\n  ComposerBodyMark,\n  ComposerBodyMarks,\n  ComposerBodyMention,\n} from \"../../types\";\nimport { isKey } from \"../../utils/is-key\";\nimport { Persist, useAnimationPersist, usePersist } from \"../../utils/Persist\";\nimport { Portal } from \"../../utils/Portal\";\nimport { requestSubmit } from \"../../utils/request-submit\";\nimport { useIndex } from \"../../utils/use-index\";\nimport { useInitial } from \"../../utils/use-initial\";\nimport { useObservable } from \"../../utils/use-observable\";\nimport { useRefs } from \"../../utils/use-refs\";\nimport { toAbsoluteUrl } from \"../Comment/utils\";\nimport {\n  ComposerAttachmentsContext,\n  ComposerContext,\n  ComposerEditorContext,\n  ComposerFloatingToolbarContext,\n  ComposerSuggestionsContext,\n  useComposer,\n  useComposerAttachmentsContext,\n  useComposerEditorContext,\n  useComposerFloatingToolbarContext,\n  useComposerSuggestionsContext,\n} from \"./contexts\";\nimport type {\n  ComposerAttachFilesProps,\n  ComposerAttachmentsDropAreaProps,\n  ComposerEditorComponents,\n  ComposerEditorElementProps,\n  ComposerEditorFloatingToolbarWrapperProps,\n  ComposerEditorLinkWrapperProps,\n  ComposerEditorMentionSuggestionsWrapperProps,\n  ComposerEditorMentionWrapperProps,\n  ComposerEditorProps,\n  ComposerFloatingToolbarProps,\n  ComposerFormProps,\n  ComposerLinkProps,\n  ComposerMarkToggleProps,\n  ComposerMentionProps,\n  ComposerSubmitProps,\n  ComposerSuggestionsListItemProps,\n  ComposerSuggestionsListProps,\n  ComposerSuggestionsProps,\n  FloatingPosition,\n} from \"./types\";\nimport {\n  commentBodyToComposerBody,\n  composerBodyToCommentBody,\n  getSideAndAlignFromFloatingPlacement,\n  useComposerAttachmentsDropArea,\n  useComposerAttachmentsManager,\n  useContentZIndex,\n  useFloatingWithOptions,\n} from \"./utils\";\n\nconst MENTION_SUGGESTIONS_POSITION: FloatingPosition = \"top\";\n\nconst FLOATING_TOOLBAR_POSITION: FloatingPosition = \"top\";\n\nconst COMPOSER_MENTION_NAME = \"ComposerMention\";\nconst COMPOSER_LINK_NAME = \"ComposerLink\";\nconst COMPOSER_FLOATING_TOOLBAR_NAME = \"ComposerFloatingToolbar\";\nconst COMPOSER_SUGGESTIONS_NAME = \"ComposerSuggestions\";\nconst COMPOSER_SUGGESTIONS_LIST_NAME = \"ComposerSuggestionsList\";\nconst COMPOSER_SUGGESTIONS_LIST_ITEM_NAME = \"ComposerSuggestionsListItem\";\nconst COMPOSER_SUBMIT_NAME = \"ComposerSubmit\";\nconst COMPOSER_EDITOR_NAME = \"ComposerEditor\";\nconst COMPOSER_ATTACH_FILES_NAME = \"ComposerAttachFiles\";\nconst COMPOSER_ATTACHMENTS_DROP_AREA_NAME = \"ComposerAttachmentsDropArea\";\nconst COMPOSER_MARK_TOGGLE_NAME = \"ComposerMarkToggle\";\nconst COMPOSER_FORM_NAME = \"ComposerForm\";\n\nconst emptyCommentBody: CommentBody = {\n  version: 1,\n  content: [{ type: \"paragraph\", children: [{ text: \"\" }] }],\n};\n\nfunction createComposerEditor({\n  createAttachments,\n  pasteFilesAsAttachments,\n}: {\n  createAttachments: (files: File[]) => void;\n  pasteFilesAsAttachments?: boolean;\n}) {\n  return withNormalize(\n    withMentions(\n      withCustomLinks(\n        withAutoLinks(\n          withAutoFormatting(\n            withEmptyClearFormatting(\n              withPaste(withHistory(withReact(createEditor())), {\n                createAttachments,\n                pasteFilesAsAttachments,\n              })\n            )\n          )\n        )\n      )\n    )\n  );\n}\n\nfunction ComposerEditorMentionWrapper({\n  Mention,\n  attributes,\n  children,\n  element,\n}: ComposerEditorMentionWrapperProps) {\n  const isSelected = useSelected();\n\n  return (\n    <span {...attributes}>\n      {element.id ? (\n        <Mention userId={element.id} isSelected={isSelected} />\n      ) : null}\n      {children}\n    </span>\n  );\n}\n\nfunction ComposerEditorLinkWrapper({\n  Link,\n  attributes,\n  element,\n  children,\n}: ComposerEditorLinkWrapperProps) {\n  const href = useMemo(\n    () => toAbsoluteUrl(element.url) ?? element.url,\n    [element.url]\n  );\n\n  return (\n    <span {...attributes}>\n      <Link href={href}>{children}</Link>\n    </span>\n  );\n}\n\nfunction ComposerEditorMentionSuggestionsWrapper({\n  id,\n  itemId,\n  userIds,\n  selectedUserId,\n  setSelectedUserId,\n  mentionDraft,\n  setMentionDraft,\n  onItemSelect,\n  position = MENTION_SUGGESTIONS_POSITION,\n  dir,\n  MentionSuggestions,\n}: ComposerEditorMentionSuggestionsWrapperProps) {\n  const editor = useSlateStatic();\n  const { onEditorChange } = useComposerEditorContext();\n  const { isFocused } = useComposer();\n  const { portalContainer } = useLiveblocksUIConfig();\n  const [contentRef, contentZIndex] = useContentZIndex();\n  const isOpen =\n    isFocused && mentionDraft?.range !== undefined && userIds !== undefined;\n  const {\n    refs: { setReference, setFloating },\n    strategy,\n    isPositioned,\n    placement,\n    x,\n    y,\n    update,\n    elements,\n  } = useFloatingWithOptions({\n    position,\n    dir,\n    alignment: \"start\",\n    open: isOpen,\n  });\n\n  useObservable(onEditorChange, () => {\n    setMentionDraft(getMentionDraftAtSelection(editor));\n  });\n\n  useLayoutEffect(() => {\n    if (!mentionDraft) {\n      setReference(null);\n\n      return;\n    }\n\n    const domRange = getDOMRange(editor, mentionDraft.range);\n    setReference(domRange ?? null);\n  }, [setReference, editor, mentionDraft]);\n\n  // Manually update the placement when the number of suggestions changes\n  // This can prevent the list of suggestions from scrolling instead of moving to the other placement\n  useLayoutEffect(() => {\n    if (!isOpen) return;\n\n    const mentionSuggestions = elements.floating?.firstChild as\n      | HTMLElement\n      | undefined;\n\n    if (!mentionSuggestions) {\n      return;\n    }\n\n    // Force the mention suggestions to grow instead of scrolling\n    mentionSuggestions.style.overflowY = \"visible\";\n    mentionSuggestions.style.maxHeight = \"none\";\n\n    // Trigger a placement update\n    update();\n\n    // Reset the mention suggestions after the placement update\n    const animationFrame = requestAnimationFrame(() => {\n      mentionSuggestions.style.overflowY = \"auto\";\n      mentionSuggestions.style.maxHeight =\n        \"var(--lb-composer-floating-available-height)\";\n    });\n\n    return () => {\n      cancelAnimationFrame(animationFrame);\n    };\n  }, [userIds?.length, isOpen, elements.floating, update]);\n\n  return (\n    <Persist>\n      {isOpen ? (\n        <ComposerSuggestionsContext.Provider\n          value={{\n            id,\n            itemId,\n            selectedValue: selectedUserId,\n            setSelectedValue: setSelectedUserId,\n            onItemSelect,\n            placement,\n            dir,\n            ref: contentRef,\n          }}\n        >\n          <Portal\n            ref={setFloating}\n            container={portalContainer}\n            style={{\n              position: strategy,\n              top: 0,\n              left: 0,\n              transform: isPositioned\n                ? `translate3d(${Math.round(x)}px, ${Math.round(y)}px, 0)`\n                : \"translate3d(0, -200%, 0)\",\n              minWidth: \"max-content\",\n              zIndex: contentZIndex,\n            }}\n          >\n            <MentionSuggestions\n              userIds={userIds}\n              selectedUserId={selectedUserId}\n            />\n          </Portal>\n        </ComposerSuggestionsContext.Provider>\n      ) : null}\n    </Persist>\n  );\n}\n\nfunction ComposerEditorFloatingToolbarWrapper({\n  id,\n  position = FLOATING_TOOLBAR_POSITION,\n  dir,\n  FloatingToolbar,\n  hasFloatingToolbarRange,\n  setHasFloatingToolbarRange,\n}: ComposerEditorFloatingToolbarWrapperProps) {\n  const editor = useSlateStatic();\n  const { onEditorChange } = useComposerEditorContext();\n  const { isFocused } = useComposer();\n  const { portalContainer } = useLiveblocksUIConfig();\n  const [contentRef, contentZIndex] = useContentZIndex();\n  const [isPointerDown, setPointerDown] = useState(false);\n  const isOpen = isFocused && !isPointerDown && hasFloatingToolbarRange;\n  const {\n    refs: { setReference, setFloating },\n    strategy,\n    isPositioned,\n    placement,\n    x,\n    y,\n  } = useFloatingWithOptions({\n    type: \"range\",\n    position,\n    dir,\n    alignment: \"center\",\n    open: isOpen,\n  });\n\n  useLayoutEffect(() => {\n    if (!isFocused) {\n      return;\n    }\n\n    const handlePointerDown = () => setPointerDown(true);\n    const handlePointerUp = () => setPointerDown(false);\n\n    document.addEventListener(\"pointerdown\", handlePointerDown);\n    document.addEventListener(\"pointerup\", handlePointerUp);\n\n    return () => {\n      document.removeEventListener(\"pointerdown\", handlePointerDown);\n      document.removeEventListener(\"pointerup\", handlePointerUp);\n    };\n  }, [isFocused]);\n\n  useObservable(onEditorChange, () => {\n    // Detach from previous selection range (if any) to avoid sudden jumps\n    setReference(null);\n\n    // Then, wait for the next render to ensure the selection is updated\n    requestAnimationFrame(() => {\n      const domSelection = window.getSelection();\n\n      // Finally, show the toolbar if there's a selection range\n      if (\n        !editor.selection ||\n        SlateRange.isCollapsed(editor.selection) ||\n        !domSelection ||\n        !domSelection.rangeCount\n      ) {\n        setHasFloatingToolbarRange(false);\n        setReference(null);\n      } else {\n        setHasFloatingToolbarRange(true);\n\n        const domRange = domSelection.getRangeAt(0);\n        setReference(domRange);\n      }\n    });\n  });\n\n  return (\n    <Persist>\n      {isOpen ? (\n        <ComposerFloatingToolbarContext.Provider\n          value={{\n            id,\n            placement,\n            dir,\n            ref: contentRef,\n          }}\n        >\n          <Portal\n            ref={setFloating}\n            container={portalContainer}\n            style={{\n              position: strategy,\n              top: 0,\n              left: 0,\n              transform: isPositioned\n                ? `translate3d(${Math.round(x)}px, ${Math.round(y)}px, 0)`\n                : \"translate3d(0, -200%, 0)\",\n              minWidth: \"max-content\",\n              zIndex: contentZIndex,\n            }}\n          >\n            <FloatingToolbar />\n          </Portal>\n        </ComposerFloatingToolbarContext.Provider>\n      ) : null}\n    </Persist>\n  );\n}\n\n/**\n * Displays a floating toolbar attached to the selection within `Composer.Editor`.\n *\n * @example\n * <Composer.FloatingToolbar>\n *   <Composer.MarkToggle mark=\"bold\">Bold</Composer.MarkToggle>\n *   <Composer.MarkToggle mark=\"italic\">Italic</Composer.MarkToggle>\n * </Composer.FloatingToolbar>\n */\nconst ComposerFloatingToolbar = forwardRef<\n  HTMLDivElement,\n  ComposerFloatingToolbarProps\n>(({ children, onPointerDown, style, asChild, ...props }, forwardedRef) => {\n  const [isPresent] = usePersist();\n  const ref = useRef<HTMLDivElement>(null);\n  const {\n    id,\n    ref: contentRef,\n    placement,\n    dir,\n  } = useComposerFloatingToolbarContext(COMPOSER_FLOATING_TOOLBAR_NAME);\n  const mergedRefs = useRefs(forwardedRef, contentRef, ref);\n  const [side, align] = useMemo(\n    () => getSideAndAlignFromFloatingPlacement(placement),\n    [placement]\n  );\n  const Component = asChild ? Slot : \"div\";\n  useAnimationPersist(ref);\n\n  const handlePointerDown = useCallback(\n    (event: PointerEvent<HTMLDivElement>) => {\n      onPointerDown?.(event);\n\n      event.preventDefault();\n      event.stopPropagation();\n    },\n    [onPointerDown]\n  );\n\n  return (\n    <Component\n      dir={dir}\n      role=\"toolbar\"\n      id={id}\n      aria-label=\"Floating toolbar\"\n      {...props}\n      onPointerDown={handlePointerDown}\n      data-state={isPresent ? \"open\" : \"closed\"}\n      data-side={side}\n      data-align={align}\n      style={{\n        display: \"flex\",\n        flexDirection: \"row\",\n        maxWidth: \"var(--lb-composer-floating-available-width)\",\n        overflowX: \"auto\",\n        ...style,\n      }}\n      ref={mergedRefs}\n    >\n      {children}\n    </Component>\n  );\n});\n\nfunction ComposerEditorElement({\n  Mention,\n  Link,\n  ...props\n}: ComposerEditorElementProps) {\n  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n  const { attributes, children, element } = props;\n\n  switch (element.type) {\n    case \"mention\":\n      return (\n        <ComposerEditorMentionWrapper\n          Mention={Mention}\n          {...(props as RenderElementSpecificProps<ComposerBodyMention>)}\n        />\n      );\n    case \"auto-link\":\n    case \"custom-link\":\n      return (\n        <ComposerEditorLinkWrapper\n          Link={Link}\n          {...(props as RenderElementSpecificProps<\n            ComposerBodyAutoLink | ComposerBodyCustomLink\n          >)}\n        />\n      );\n    case \"paragraph\":\n      return (\n        <p {...attributes} style={{ position: \"relative\" }}>\n          {children}\n        </p>\n      );\n    default:\n      return null;\n  }\n}\n\n// <code><s><em><strong>text</strong></s></em></code>\nfunction ComposerEditorLeaf({ attributes, children, leaf }: RenderLeafProps) {\n  if (leaf.bold) {\n    children = <strong>{children}</strong>;\n  }\n\n  if (leaf.italic) {\n    children = <em>{children}</em>;\n  }\n\n  if (leaf.strikethrough) {\n    children = <s>{children}</s>;\n  }\n\n  if (leaf.code) {\n    children = <code>{children}</code>;\n  }\n\n  return <span {...attributes}>{children}</span>;\n}\n\nfunction ComposerEditorPlaceholder({\n  attributes,\n  children,\n}: RenderPlaceholderProps) {\n  const { opacity: _opacity, ...style } = attributes.style;\n\n  return (\n    <span {...attributes} style={style} data-placeholder=\"\">\n      {children}\n    </span>\n  );\n}\n\n/**\n * Displays mentions within `Composer.Editor`.\n *\n * @example\n * <Composer.Mention>@{userId}</Composer.Mention>\n */\nconst ComposerMention = forwardRef<HTMLSpanElement, ComposerMentionProps>(\n  ({ children, asChild, ...props }, forwardedRef) => {\n    const Component = asChild ? Slot : \"span\";\n    const isSelected = useSelected();\n\n    return (\n      <Component\n        data-selected={isSelected || undefined}\n        {...props}\n        ref={forwardedRef}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n\n/**\n * Displays links within `Composer.Editor`.\n *\n * @example\n * <Composer.Link href={href}>{children}</Composer.Link>\n */\nconst ComposerLink = forwardRef<HTMLAnchorElement, ComposerLinkProps>(\n  ({ children, asChild, ...props }, forwardedRef) => {\n    const Component = asChild ? Slot : \"a\";\n\n    return (\n      <Component\n        target=\"_blank\"\n        rel=\"noopener noreferrer nofollow\"\n        {...props}\n        ref={forwardedRef}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n\n/**\n * Contains suggestions within `Composer.Editor`.\n */\nconst ComposerSuggestions = forwardRef<\n  HTMLDivElement,\n  ComposerSuggestionsProps\n>(({ children, style, asChild, ...props }, forwardedRef) => {\n  const [isPresent] = usePersist();\n  const ref = useRef<HTMLDivElement>(null);\n  const {\n    ref: contentRef,\n    placement,\n    dir,\n  } = useComposerSuggestionsContext(COMPOSER_SUGGESTIONS_NAME);\n  const mergedRefs = useRefs(forwardedRef, contentRef, ref);\n  const [side, align] = useMemo(\n    () => getSideAndAlignFromFloatingPlacement(placement),\n    [placement]\n  );\n  const Component = asChild ? Slot : \"div\";\n  useAnimationPersist(ref);\n\n  return (\n    <Component\n      dir={dir}\n      {...props}\n      data-state={isPresent ? \"open\" : \"closed\"}\n      data-side={side}\n      data-align={align}\n      style={{\n        display: \"flex\",\n        flexDirection: \"column\",\n        maxHeight: \"var(--lb-composer-floating-available-height)\",\n        overflowY: \"auto\",\n        ...style,\n      }}\n      ref={mergedRefs}\n    >\n      {children}\n    </Component>\n  );\n});\n\n/**\n * Displays a list of suggestions within `Composer.Editor`.\n *\n * @example\n * <Composer.SuggestionsList>\n *   {userIds.map((userId) => (\n *     <Composer.SuggestionsListItem key={userId} value={userId}>\n *       @{userId}\n *     </Composer.SuggestionsListItem>\n *   ))}\n * </Composer.SuggestionsList>\n */\nconst ComposerSuggestionsList = forwardRef<\n  HTMLUListElement,\n  ComposerSuggestionsListProps\n>(({ children, asChild, ...props }, forwardedRef) => {\n  const { id } = useComposerSuggestionsContext(COMPOSER_SUGGESTIONS_LIST_NAME);\n  const Component = asChild ? Slot : \"ul\";\n\n  return (\n    <Component\n      role=\"listbox\"\n      id={id}\n      aria-label=\"Suggestions list\"\n      {...props}\n      ref={forwardedRef}\n    >\n      {children}\n    </Component>\n  );\n});\n\n/**\n * Displays a suggestion within `Composer.SuggestionsList`.\n *\n * @example\n * <Composer.SuggestionsListItem key={userId} value={userId}>\n *   @{userId}\n * </Composer.SuggestionsListItem>\n */\nconst ComposerSuggestionsListItem = forwardRef<\n  HTMLLIElement,\n  ComposerSuggestionsListItemProps\n>(\n  (\n    {\n      value,\n      children,\n      onPointerMove,\n      onPointerDown,\n      onClick,\n      asChild,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const ref = useRef<HTMLLIElement>(null);\n    const mergedRefs = useRefs(forwardedRef, ref);\n    const { selectedValue, setSelectedValue, itemId, onItemSelect } =\n      useComposerSuggestionsContext(COMPOSER_SUGGESTIONS_LIST_ITEM_NAME);\n    const Component = asChild ? Slot : \"li\";\n    const isSelected = useMemo(\n      () => selectedValue === value,\n      [selectedValue, value]\n    );\n    // TODO: Support props.id if provided, it will need to be sent up to Composer.Editor to use it in aria-activedescendant\n    const id = useMemo(() => itemId(value), [itemId, value]);\n\n    useEffect(() => {\n      if (ref?.current && isSelected) {\n        ref.current.scrollIntoView({ block: \"nearest\" });\n      }\n    }, [isSelected]);\n\n    const handlePointerMove = useCallback(\n      (event: PointerEvent<HTMLLIElement>) => {\n        onPointerMove?.(event);\n\n        if (!event.isDefaultPrevented()) {\n          setSelectedValue(value);\n        }\n      },\n      [onPointerMove, setSelectedValue, value]\n    );\n\n    const handlePointerDown = useCallback(\n      (event: PointerEvent<HTMLLIElement>) => {\n        onPointerDown?.(event);\n\n        event.preventDefault();\n        event.stopPropagation();\n      },\n      [onPointerDown]\n    );\n\n    const handleClick = useCallback(\n      (event: MouseEvent<HTMLLIElement>) => {\n        onClick?.(event);\n\n        const wasDefaultPrevented = event.isDefaultPrevented();\n\n        event.preventDefault();\n        event.stopPropagation();\n\n        if (!wasDefaultPrevented) {\n          onItemSelect(value);\n        }\n      },\n      [onClick, onItemSelect, value]\n    );\n\n    return (\n      <Component\n        role=\"option\"\n        id={id}\n        data-selected={isSelected || undefined}\n        aria-selected={isSelected || undefined}\n        onPointerMove={handlePointerMove}\n        onPointerDown={handlePointerDown}\n        onClick={handleClick}\n        {...props}\n        ref={mergedRefs}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n\nconst defaultEditorComponents: ComposerEditorComponents = {\n  Link: ({ href, children }) => {\n    return <ComposerLink href={href}>{children}</ComposerLink>;\n  },\n  Mention: ({ userId }) => {\n    return (\n      <ComposerMention>\n        {MENTION_CHARACTER}\n        {userId}\n      </ComposerMention>\n    );\n  },\n  MentionSuggestions: ({ userIds }) => {\n    return userIds.length > 0 ? (\n      <ComposerSuggestions>\n        <ComposerSuggestionsList>\n          {userIds.map((userId) => (\n            <ComposerSuggestionsListItem key={userId} value={userId}>\n              {userId}\n            </ComposerSuggestionsListItem>\n          ))}\n        </ComposerSuggestionsList>\n      </ComposerSuggestions>\n    ) : null;\n  },\n};\n\n/**\n * Displays the composer's editor.\n *\n * @example\n * <Composer.Editor placeholder=\"Write a comment…\" />\n */\nconst ComposerEditor = forwardRef<HTMLDivElement, ComposerEditorProps>(\n  (\n    {\n      defaultValue,\n      onKeyDown,\n      onFocus,\n      onBlur,\n      disabled,\n      autoFocus,\n      components,\n      dir,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const client = useClientOrNull();\n    const { editor, validate, setFocused, onEditorChange, roomId } =\n      useComposerEditorContext();\n    const {\n      submit,\n      focus,\n      blur,\n      select,\n      canSubmit,\n      isDisabled: isComposerDisabled,\n      isFocused,\n    } = useComposer();\n    const isDisabled = isComposerDisabled || disabled;\n    const initialBody = useInitial(defaultValue ?? emptyCommentBody);\n    const initialEditorValue = useMemo(() => {\n      return commentBodyToComposerBody(initialBody);\n    }, [initialBody]);\n    const { Link, Mention, MentionSuggestions, FloatingToolbar } = useMemo(\n      () => ({ ...defaultEditorComponents, ...components }),\n      [components]\n    );\n\n    const [hasFloatingToolbarRange, setHasFloatingToolbarRange] =\n      useState(false);\n    // If used with LiveblocksProvider but without resolveMentionSuggestions,\n    // we can skip the mention suggestions logic entirely\n    const resolveMentionSuggestions = useResolveMentionSuggestions();\n    const hasResolveMentionSuggestions = client\n      ? resolveMentionSuggestions\n      : true;\n    const [mentionDraft, setMentionDraft] = useState<MentionDraft>();\n    const mentionSuggestions = useMentionSuggestions(\n      roomId,\n      mentionDraft?.text\n    );\n    const [\n      selectedMentionSuggestionIndex,\n      setPreviousSelectedMentionSuggestionIndex,\n      setNextSelectedMentionSuggestionIndex,\n      setSelectedMentionSuggestionIndex,\n    ] = useIndex(0, mentionSuggestions?.length ?? 0);\n    const id = useId();\n    const floatingToolbarId = `liveblocks-floating-toolbar-${id}`;\n    const suggestionsListId = `liveblocks-suggestions-list-${id}`;\n    const suggestionsListItemId = useCallback(\n      (userId?: string) =>\n        userId ? `liveblocks-suggestions-list-item-${id}-${userId}` : undefined,\n      [id]\n    );\n\n    const renderElement = useCallback(\n      (props: RenderElementProps) => {\n        return (\n          <ComposerEditorElement Mention={Mention} Link={Link} {...props} />\n        );\n      },\n      [Link, Mention]\n    );\n\n    const handleChange = useCallback(\n      (value: SlateDescendant[]) => {\n        validate(value as SlateElement[]);\n\n        // Our multi-component setup requires us to instantiate the editor in `Composer.Form`\n        // but we can only listen to changes here in `Composer.Editor` via `Slate`, so we use\n        // an event source to notify `Composer.Form` of changes.\n        onEditorChange.notify();\n      },\n      [validate, onEditorChange]\n    );\n\n    const createMention = useCallback(\n      (userId?: string) => {\n        if (!mentionDraft || !userId) {\n          return;\n        }\n\n        SlateTransforms.select(editor, mentionDraft.range);\n        insertMention(editor, userId);\n        setMentionDraft(undefined);\n        setSelectedMentionSuggestionIndex(0);\n      },\n      [editor, mentionDraft, setSelectedMentionSuggestionIndex]\n    );\n\n    const handleKeyDown = useCallback(\n      (event: KeyboardEvent<HTMLDivElement>) => {\n        onKeyDown?.(event);\n\n        if (event.isDefaultPrevented()) {\n          return;\n        }\n\n        // Allow leaving marks with ArrowLeft\n        if (isKey(event, \"ArrowLeft\")) {\n          leaveMarkEdge(editor, \"start\");\n        }\n\n        // Allow leaving marks with ArrowRight\n        if (isKey(event, \"ArrowRight\")) {\n          leaveMarkEdge(editor, \"end\");\n        }\n\n        if (mentionDraft && mentionSuggestions?.length) {\n          // Select the next mention suggestion on ArrowDown\n          if (isKey(event, \"ArrowDown\")) {\n            event.preventDefault();\n            setNextSelectedMentionSuggestionIndex();\n          }\n\n          // Select the previous mention suggestion on ArrowUp\n          if (isKey(event, \"ArrowUp\")) {\n            event.preventDefault();\n            setPreviousSelectedMentionSuggestionIndex();\n          }\n\n          // Create a mention on Enter/Tab\n          if (isKey(event, \"Enter\") || isKey(event, \"Tab\")) {\n            event.preventDefault();\n\n            const userId = mentionSuggestions?.[selectedMentionSuggestionIndex];\n            createMention(userId);\n          }\n\n          // Close the suggestions on Escape\n          if (isKey(event, \"Escape\")) {\n            event.preventDefault();\n            setMentionDraft(undefined);\n            setSelectedMentionSuggestionIndex(0);\n          }\n        } else {\n          if (hasFloatingToolbarRange) {\n            // Close the floating toolbar on Escape\n            if (isKey(event, \"Escape\")) {\n              event.preventDefault();\n              setHasFloatingToolbarRange(false);\n            }\n          }\n\n          // Blur the editor on Escape\n          if (isKey(event, \"Escape\")) {\n            blur();\n          }\n\n          // Submit the editor on Enter\n          if (isKey(event, \"Enter\", { shift: false })) {\n            // Even if submitting is not possible, don't do anything else on Enter. (e.g. creating a new line)\n            event.preventDefault();\n\n            if (canSubmit) {\n              submit();\n            }\n          }\n\n          // Create a new line on Shift + Enter\n          if (isKey(event, \"Enter\", { shift: true })) {\n            event.preventDefault();\n            editor.insertBreak();\n          }\n\n          // Toggle bold on Command/Control + B\n          if (isKey(event, \"b\", { mod: true })) {\n            event.preventDefault();\n            toggleEditorMark(editor, \"bold\");\n          }\n\n          // Toggle italic on Command/Control + I\n          if (isKey(event, \"i\", { mod: true })) {\n            event.preventDefault();\n            toggleEditorMark(editor, \"italic\");\n          }\n\n          // Toggle strikethrough on Command/Control + Shift + S\n          if (isKey(event, \"s\", { mod: true, shift: true })) {\n            event.preventDefault();\n            toggleEditorMark(editor, \"strikethrough\");\n          }\n\n          // Toggle code on Command/Control + E\n          if (isKey(event, \"e\", { mod: true })) {\n            event.preventDefault();\n            toggleEditorMark(editor, \"code\");\n          }\n        }\n      },\n      [\n        onKeyDown,\n        mentionDraft,\n        mentionSuggestions,\n        hasFloatingToolbarRange,\n        editor,\n        setNextSelectedMentionSuggestionIndex,\n        setPreviousSelectedMentionSuggestionIndex,\n        selectedMentionSuggestionIndex,\n        createMention,\n        setSelectedMentionSuggestionIndex,\n        blur,\n        canSubmit,\n        submit,\n      ]\n    );\n\n    const handleFocus = useCallback(\n      (event: FocusEvent<HTMLDivElement>) => {\n        onFocus?.(event);\n\n        if (!event.isDefaultPrevented()) {\n          setFocused(true);\n        }\n      },\n      [onFocus, setFocused]\n    );\n\n    const handleBlur = useCallback(\n      (event: FocusEvent<HTMLDivElement>) => {\n        onBlur?.(event);\n\n        if (!event.isDefaultPrevented()) {\n          setFocused(false);\n        }\n      },\n      [onBlur, setFocused]\n    );\n\n    const selectedMentionSuggestionUserId = useMemo(\n      () => mentionSuggestions?.[selectedMentionSuggestionIndex],\n      [selectedMentionSuggestionIndex, mentionSuggestions]\n    );\n    const setSelectedMentionSuggestionUserId = useCallback(\n      (userId: string) => {\n        const index = mentionSuggestions?.indexOf(userId);\n\n        if (index !== undefined && index >= 0) {\n          setSelectedMentionSuggestionIndex(index);\n        }\n      },\n      [setSelectedMentionSuggestionIndex, mentionSuggestions]\n    );\n\n    const additionalProps: AriaAttributes = useMemo(\n      () =>\n        mentionDraft\n          ? {\n              role: \"combobox\",\n              \"aria-autocomplete\": \"list\",\n              \"aria-expanded\": true,\n              \"aria-controls\": suggestionsListId,\n              \"aria-activedescendant\": suggestionsListItemId(\n                selectedMentionSuggestionUserId\n              ),\n            }\n          : hasFloatingToolbarRange\n            ? {\n                \"aria-haspopup\": true,\n                \"aria-controls\": floatingToolbarId,\n              }\n            : {},\n      [\n        mentionDraft,\n        suggestionsListId,\n        suggestionsListItemId,\n        selectedMentionSuggestionUserId,\n        hasFloatingToolbarRange,\n        floatingToolbarId,\n      ]\n    );\n\n    useImperativeHandle(forwardedRef, () => {\n      return ReactEditor.toDOMNode(editor, editor) as HTMLDivElement;\n    }, [editor]);\n\n    // Manually focus the editor when `autoFocus` is true\n    useLayoutEffect(() => {\n      if (autoFocus) {\n        focus();\n      }\n    }, [autoFocus, editor, focus]);\n\n    // Manually add a selection in the editor if the selection\n    // is still empty after being focused\n    useLayoutEffect(() => {\n      if (isFocused && editor.selection === null) {\n        select();\n      }\n    }, [editor, select, isFocused]);\n\n    return (\n      <Slate\n        editor={editor}\n        initialValue={initialEditorValue}\n        onChange={handleChange}\n      >\n        <Editable\n          dir={dir}\n          enterKeyHint={mentionDraft ? \"enter\" : \"send\"}\n          autoCapitalize=\"sentences\"\n          aria-label=\"Composer editor\"\n          data-focused={isFocused || undefined}\n          data-disabled={isDisabled || undefined}\n          {...additionalProps}\n          {...props}\n          readOnly={isDisabled}\n          disabled={isDisabled}\n          onKeyDown={handleKeyDown}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          renderElement={renderElement}\n          renderLeaf={ComposerEditorLeaf}\n          renderPlaceholder={ComposerEditorPlaceholder}\n        />\n        {hasResolveMentionSuggestions && (\n          <ComposerEditorMentionSuggestionsWrapper\n            dir={dir}\n            mentionDraft={mentionDraft}\n            setMentionDraft={setMentionDraft}\n            selectedUserId={selectedMentionSuggestionUserId}\n            setSelectedUserId={setSelectedMentionSuggestionUserId}\n            userIds={mentionSuggestions}\n            id={suggestionsListId}\n            itemId={suggestionsListItemId}\n            onItemSelect={createMention}\n            MentionSuggestions={MentionSuggestions}\n          />\n        )}\n        {FloatingToolbar && (\n          <ComposerEditorFloatingToolbarWrapper\n            dir={dir}\n            id={floatingToolbarId}\n            hasFloatingToolbarRange={hasFloatingToolbarRange}\n            setHasFloatingToolbarRange={setHasFloatingToolbarRange}\n            FloatingToolbar={FloatingToolbar}\n          />\n        )}\n      </Slate>\n    );\n  }\n);\n\nconst MAX_ATTACHMENTS = 10;\nconst MAX_ATTACHMENT_SIZE = 1024 * 1024 * 1024; // 1 GB\n\nfunction prepareAttachment(file: File): CommentLocalAttachment {\n  return {\n    type: \"localAttachment\",\n    status: \"idle\",\n    id: createCommentAttachmentId(),\n    name: file.name,\n    size: file.size,\n    mimeType: file.type,\n    file,\n  };\n}\n\n/**\n * Surrounds the composer's content and handles submissions.\n *\n * @example\n * <Composer.Form onComposerSubmit={({ body }) => {}}>\n *\t <Composer.Editor />\n *   <Composer.Submit />\n * </Composer.Form>\n */\nconst ComposerForm = forwardRef<HTMLFormElement, ComposerFormProps>(\n  (\n    {\n      children,\n      onSubmit,\n      onComposerSubmit,\n      defaultAttachments = [],\n      pasteFilesAsAttachments,\n      preventUnsavedChanges = true,\n      disabled,\n      asChild,\n      roomId: _roomId,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const Component = asChild ? Slot : \"form\";\n    const [isEmpty, setEmpty] = useState(true);\n    const [isSubmitting, setSubmitting] = useState(false);\n    const [isFocused, setFocused] = useState(false);\n    const room = useRoom({ allowOutsideRoom: true });\n\n    const roomId = _roomId !== undefined ? _roomId : room?.id;\n    if (roomId === undefined) {\n      throw new Error(\"Composer.Form must be a descendant of RoomProvider.\");\n    }\n\n    // Later: Offer as Composer.Form props: { maxAttachments: number; maxAttachmentSize: number; supportedAttachmentMimeTypes: string[]; }\n    const maxAttachments = MAX_ATTACHMENTS;\n    const maxAttachmentSize = MAX_ATTACHMENT_SIZE;\n\n    const {\n      attachments,\n      isUploadingAttachments,\n      addAttachments,\n      removeAttachment,\n      clearAttachments,\n    } = useComposerAttachmentsManager(defaultAttachments, {\n      maxFileSize: maxAttachmentSize,\n      roomId,\n    });\n    const numberOfAttachments = attachments.length;\n    const hasMaxAttachments = numberOfAttachments >= maxAttachments;\n\n    const isDisabled = useMemo(() => {\n      return isSubmitting || disabled === true;\n    }, [isSubmitting, disabled]);\n    const canSubmit = useMemo(() => {\n      return !isEmpty && !isUploadingAttachments;\n    }, [isEmpty, isUploadingAttachments]);\n    const [marks, setMarks] = useState<ComposerBodyMarks>(getMarks);\n\n    const ref = useRef<HTMLFormElement>(null);\n    const mergedRefs = useRefs(forwardedRef, ref);\n    const fileInputRef = useRef<HTMLInputElement>(null);\n    const syncSource = useSyncSource();\n\n    // Mark the composer as a pending update when it has unsubmitted (draft)\n    // text or attachments\n    const isPending = !preventUnsavedChanges\n      ? false\n      : !isEmpty || isUploadingAttachments || attachments.length > 0;\n\n    useEffect(() => {\n      syncSource?.setSyncStatus(\n        isPending ? \"has-local-changes\" : \"synchronized\"\n      );\n    }, [syncSource, isPending]);\n\n    const createAttachments = useCallback(\n      (files: File[]) => {\n        if (!files.length) {\n          return;\n        }\n\n        const numberOfAcceptedFiles = Math.max(\n          0,\n          maxAttachments - numberOfAttachments\n        );\n\n        files.splice(numberOfAcceptedFiles);\n\n        const attachments = files.map((file) => prepareAttachment(file));\n\n        addAttachments(attachments);\n      },\n      [addAttachments, maxAttachments, numberOfAttachments]\n    );\n\n    const createAttachmentsRef = useRef(createAttachments);\n\n    useEffect(() => {\n      createAttachmentsRef.current = createAttachments;\n    }, [createAttachments]);\n\n    const stableCreateAttachments = useCallback((files: File[]) => {\n      createAttachmentsRef.current(files);\n    }, []);\n\n    const editor = useInitial(() =>\n      createComposerEditor({\n        createAttachments: stableCreateAttachments,\n        pasteFilesAsAttachments,\n      })\n    );\n    const onEditorChange = useInitial(makeEventSource) as EventSource<void>;\n\n    const validate = useCallback(\n      (value: SlateElement[]) => {\n        setEmpty(isEditorEmpty(editor, value));\n      },\n      [editor]\n    );\n\n    const submit = useCallback(() => {\n      if (!canSubmit) {\n        return;\n      }\n\n      // We need to wait for the next frame in some cases like when composing diacritics,\n      // we want any native handling to be done first while still being handled on `keydown`.\n      requestAnimationFrame(() => {\n        if (ref.current) {\n          requestSubmit(ref.current);\n        }\n      });\n    }, [canSubmit]);\n\n    const clear = useCallback(() => {\n      SlateTransforms.delete(editor, {\n        at: {\n          anchor: SlateEditor.start(editor, []),\n          focus: SlateEditor.end(editor, []),\n        },\n      });\n    }, [editor]);\n\n    const select = useCallback(() => {\n      SlateTransforms.select(editor, SlateEditor.end(editor, []));\n    }, [editor]);\n\n    const focus = useCallback(\n      (resetSelection = true) => {\n        try {\n          if (!ReactEditor.isFocused(editor)) {\n            SlateTransforms.select(\n              editor,\n              resetSelection || !editor.selection\n                ? SlateEditor.end(editor, [])\n                : editor.selection\n            );\n            ReactEditor.focus(editor);\n          }\n        } catch {\n          // Slate's DOM-specific methods will throw if the editor's DOM\n          // node no longer exists. This action doesn't make sense on an\n          // unmounted editor so we can safely ignore it.\n        }\n      },\n      [editor]\n    );\n\n    const blur = useCallback(() => {\n      try {\n        ReactEditor.blur(editor);\n      } catch {\n        // Slate's DOM-specific methods will throw if the editor's DOM\n        // node no longer exists. This action doesn't make sense on an\n        // unmounted editor so we can safely ignore it.\n      }\n    }, [editor]);\n\n    const createMention = useCallback(() => {\n      if (disabled) {\n        return;\n      }\n\n      focus();\n      insertMentionCharacter(editor);\n    }, [disabled, editor, focus]);\n\n    const insertText = useCallback(\n      (text: string) => {\n        if (disabled) {\n          return;\n        }\n\n        focus(false);\n        insertSlateText(editor, text);\n      },\n      [disabled, editor, focus]\n    );\n\n    const attachFiles = useCallback(() => {\n      if (disabled) {\n        return;\n      }\n\n      if (fileInputRef.current) {\n        fileInputRef.current.click();\n      }\n    }, [disabled]);\n\n    const handleAttachmentsInputChange = useCallback(\n      (event: ChangeEvent<HTMLInputElement>) => {\n        if (disabled) {\n          return;\n        }\n\n        if (event.target.files) {\n          createAttachments(Array.from(event.target.files));\n\n          // Reset the input value to allow selecting the same file(s) again\n          event.target.value = \"\";\n        }\n      },\n      [createAttachments, disabled]\n    );\n\n    const onSubmitEnd = useCallback(() => {\n      clear();\n      blur();\n      clearAttachments();\n      setSubmitting(false);\n    }, [blur, clear, clearAttachments]);\n\n    const handleSubmit = useCallback(\n      (event: FormEvent<HTMLFormElement>) => {\n        if (disabled) {\n          return;\n        }\n\n        // In some situations (e.g. pressing Enter while composing diacritics), it's possible\n        // for the form to be submitted as empty even though we already checked whether the\n        // editor was empty when handling the key press.\n        const isEmpty = isEditorEmpty(editor, editor.children);\n\n        // We even prevent the user's `onSubmit` handler from being called if the editor is empty.\n        if (isEmpty) {\n          event.preventDefault();\n\n          return;\n        }\n\n        onSubmit?.(event);\n\n        if (!onComposerSubmit || event.isDefaultPrevented()) {\n          event.preventDefault();\n\n          return;\n        }\n\n        const body = composerBodyToCommentBody(\n          editor.children as ComposerBodyData\n        );\n        // Only non-local attachments are included to be submitted.\n        const commentAttachments: CommentAttachment[] = attachments\n          .filter(\n            (attachment) =>\n              attachment.type === \"attachment\" ||\n              (attachment.type === \"localAttachment\" &&\n                attachment.status === \"uploaded\")\n          )\n          .map((attachment) => {\n            return {\n              id: attachment.id,\n              type: \"attachment\",\n              mimeType: attachment.mimeType,\n              size: attachment.size,\n              name: attachment.name,\n            };\n          });\n\n        const promise = onComposerSubmit(\n          { body, attachments: commentAttachments },\n          event\n        );\n\n        event.preventDefault();\n\n        if (promise) {\n          setSubmitting(true);\n          promise.then(onSubmitEnd);\n        } else {\n          onSubmitEnd();\n        }\n      },\n      [disabled, editor, attachments, onComposerSubmit, onSubmit, onSubmitEnd]\n    );\n\n    const stopPropagation = useCallback((event: SyntheticEvent) => {\n      event.stopPropagation();\n    }, []);\n\n    const toggleMark = useCallback(\n      (mark: ComposerBodyMark) => {\n        toggleEditorMark(editor, mark);\n      },\n      [editor]\n    );\n\n    useObservable(onEditorChange, () => {\n      setMarks(getMarks(editor));\n    });\n\n    return (\n      <ComposerEditorContext.Provider\n        value={{\n          editor,\n          validate,\n          setFocused,\n          onEditorChange,\n          roomId,\n        }}\n      >\n        <ComposerAttachmentsContext.Provider\n          value={{\n            createAttachments,\n            isUploadingAttachments,\n            hasMaxAttachments,\n            maxAttachments,\n            maxAttachmentSize,\n          }}\n        >\n          <ComposerContext.Provider\n            value={{\n              isDisabled,\n              isFocused,\n              isEmpty,\n              canSubmit,\n              submit,\n              clear,\n              select,\n              focus,\n              blur,\n              createMention,\n              insertText,\n              attachments,\n              attachFiles,\n              removeAttachment,\n              toggleMark,\n              marks,\n            }}\n          >\n            <Component {...props} onSubmit={handleSubmit} ref={mergedRefs}>\n              <input\n                type=\"file\"\n                multiple\n                ref={fileInputRef}\n                onChange={handleAttachmentsInputChange}\n                onClick={stopPropagation}\n                tabIndex={-1}\n                style={{ display: \"none\" }}\n              />\n              <Slottable>{children}</Slottable>\n            </Component>\n          </ComposerContext.Provider>\n        </ComposerAttachmentsContext.Provider>\n      </ComposerEditorContext.Provider>\n    );\n  }\n);\n\n/**\n * A button to submit the composer.\n *\n * @example\n * <Composer.Submit>Send</Composer.Submit>\n */\nconst ComposerSubmit = forwardRef<HTMLButtonElement, ComposerSubmitProps>(\n  ({ children, disabled, asChild, ...props }, forwardedRef) => {\n    const Component = asChild ? Slot : \"button\";\n    const { canSubmit, isDisabled: isComposerDisabled } = useComposer();\n    const isDisabled = isComposerDisabled || disabled || !canSubmit;\n\n    return (\n      <Component\n        type=\"submit\"\n        {...props}\n        ref={forwardedRef}\n        disabled={isDisabled}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n\n/**\n * A button which opens a file picker to create attachments.\n *\n * @example\n * <Composer.AttachFiles>Attach files</Composer.AttachFiles>\n */\nconst ComposerAttachFiles = forwardRef<\n  HTMLButtonElement,\n  ComposerAttachFilesProps\n>(({ children, onClick, disabled, asChild, ...props }, forwardedRef) => {\n  const Component = asChild ? Slot : \"button\";\n  const { hasMaxAttachments } = useComposerAttachmentsContext();\n  const { isDisabled: isComposerDisabled, attachFiles } = useComposer();\n  const isDisabled = isComposerDisabled || hasMaxAttachments || disabled;\n\n  const handleClick = useCallback(\n    (event: MouseEvent<HTMLButtonElement>) => {\n      onClick?.(event);\n\n      if (!event.isDefaultPrevented()) {\n        attachFiles();\n      }\n    },\n    [attachFiles, onClick]\n  );\n\n  return (\n    <Component\n      type=\"button\"\n      {...props}\n      onClick={handleClick}\n      ref={forwardedRef}\n      disabled={isDisabled}\n    >\n      {children}\n    </Component>\n  );\n});\n\n/**\n * A drop area which accepts files to create attachments.\n *\n * @example\n * <Composer.AttachmentsDropArea>\n *   Drop files here\n * </Composer.AttachmentsDropArea>\n */\nconst ComposerAttachmentsDropArea = forwardRef<\n  HTMLDivElement,\n  ComposerAttachmentsDropAreaProps\n>(\n  (\n    {\n      onDragEnter,\n      onDragLeave,\n      onDragOver,\n      onDrop,\n      disabled,\n      asChild,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const Component = asChild ? Slot : \"div\";\n    const { isDisabled: isComposerDisabled } = useComposer();\n    const isDisabled = isComposerDisabled || disabled;\n    const [, dropAreaProps] = useComposerAttachmentsDropArea({\n      onDragEnter,\n      onDragLeave,\n      onDragOver,\n      onDrop,\n      disabled: isDisabled,\n    });\n\n    return (\n      <Component\n        {...dropAreaProps}\n        data-disabled={isDisabled ? \"\" : undefined}\n        {...props}\n        ref={forwardedRef}\n      />\n    );\n  }\n);\n\n/**\n * A toggle button which toggles a specific text mark.\n *\n * @example\n * <Composer.MarkToggle mark=\"bold\">\n *   Bold\n * </Composer.MarkToggle>\n */\nconst ComposerMarkToggle = forwardRef<\n  HTMLButtonElement,\n  ComposerMarkToggleProps\n>(\n  (\n    {\n      children,\n      mark,\n      onValueChange,\n      onClick,\n      onPointerDown,\n      asChild,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const Component = asChild ? Slot : \"button\";\n    const { marks, toggleMark } = useComposer();\n\n    const handlePointerDown = useCallback(\n      (event: PointerEvent<HTMLButtonElement>) => {\n        onPointerDown?.(event);\n\n        event.preventDefault();\n        event.stopPropagation();\n      },\n      [onPointerDown]\n    );\n\n    const handleClick = useCallback(\n      (event: MouseEvent<HTMLButtonElement>) => {\n        onClick?.(event);\n\n        if (!event.isDefaultPrevented()) {\n          event.preventDefault();\n          event.stopPropagation();\n\n          toggleMark(mark);\n          onValueChange?.(mark);\n        }\n      },\n      [mark, onClick, onValueChange, toggleMark]\n    );\n\n    return (\n      <TogglePrimitive.Root\n        asChild\n        pressed={marks[mark]}\n        onClick={handleClick}\n        onPointerDown={handlePointerDown}\n        {...props}\n      >\n        <Component {...props} ref={forwardedRef}>\n          {children}\n        </Component>\n      </TogglePrimitive.Root>\n    );\n  }\n);\n\nif (process.env.NODE_ENV !== \"production\") {\n  ComposerAttachFiles.displayName = COMPOSER_ATTACH_FILES_NAME;\n  ComposerAttachmentsDropArea.displayName = COMPOSER_ATTACHMENTS_DROP_AREA_NAME;\n  ComposerEditor.displayName = COMPOSER_EDITOR_NAME;\n  ComposerFloatingToolbar.displayName = COMPOSER_FLOATING_TOOLBAR_NAME;\n  ComposerForm.displayName = COMPOSER_FORM_NAME;\n  ComposerMention.displayName = COMPOSER_MENTION_NAME;\n  ComposerLink.displayName = COMPOSER_LINK_NAME;\n  ComposerSubmit.displayName = COMPOSER_SUBMIT_NAME;\n  ComposerSuggestions.displayName = COMPOSER_SUGGESTION