@liveblocks/react-ui 2.11.1 → 2.12.0

package/dist/components/Composer.js

@@ -4,6 +4,7 @@
 var core = require('@liveblocks/core');
 var react = require('@liveblocks/react');
 var React = require('react');
+var config = require('../config.js');
 var Attachment = require('../icons/Attachment.js');
 var Emoji = require('../icons/Emoji.js');
 var Mention = require('../icons/Mention.js');
@@ -298,6 +299,7 @@ const Composer = React.forwardRef(
     const createThread = react.useCreateThread();
     const createComment = react.useCreateComment();
     const editComment = react.useEditComment();
+    const { preventUnsavedComposerChanges } = config.useLiveblocksUIConfig();
     const hasResolveMentionSuggestions = client[core.kInternal].resolveMentionSuggestions !== void 0;
     const isEmptyRef = React.useRef(true);
     const isEmojiPickerOpenRef = React.useRef(false);
@@ -400,7 +402,8 @@ const Composer = React.forwardRef(
       onBlur: handleBlur,
       disabled,
       defaultAttachments,
-      pasteFilesAsAttachments: showAttachments
+      pasteFilesAsAttachments: showAttachments,
+      preventUnsavedChanges: preventUnsavedComposerChanges
     }, /* @__PURE__ */ React.createElement(ComposerEditorContainer, {
       defaultValue,
       actions,

package/dist/components/Composer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Composer.js","sources":["../../src/components/Composer.tsx"],"sourcesContent":["\"use client\";\n\nimport type {\n  BaseMetadata,\n  CommentAttachment,\n  CommentMixedAttachment,\n  DM,\n} from \"@liveblocks/core\";\nimport { kInternal } from \"@liveblocks/core\";\nimport {\n  useClient,\n  useCreateComment,\n  useCreateThread,\n  useEditComment,\n} from \"@liveblocks/react\";\nimport type {\n  ComponentPropsWithoutRef,\n  FocusEvent,\n  FormEvent,\n  ForwardedRef,\n  MouseEvent,\n  ReactNode,\n  RefAttributes,\n  SyntheticEvent,\n} from \"react\";\nimport React, { forwardRef, useCallback, useRef } from \"react\";\n\nimport { AttachmentIcon } from \"../icons/Attachment\";\nimport { EmojiIcon } from \"../icons/Emoji\";\nimport { MentionIcon } from \"../icons/Mention\";\nimport { SendIcon } from \"../icons/Send\";\nimport type { ComposerOverrides, GlobalOverrides } from \"../overrides\";\nimport { useOverrides } from \"../overrides\";\nimport * as ComposerPrimitive from \"../primitives/Composer\";\nimport {\n  useComposer,\n  useComposerAttachmentsContext,\n} from \"../primitives/Composer/contexts\";\nimport type {\n  ComposerEditorComponents,\n  ComposerEditorLinkProps,\n  ComposerEditorMentionProps,\n  ComposerEditorMentionSuggestionsProps,\n  ComposerEditorProps,\n  ComposerFormProps,\n  ComposerSubmitComment,\n} from \"../primitives/Composer/types\";\nimport { useComposerAttachmentsDropArea } from \"../primitives/Composer/utils\";\nimport { MENTION_CHARACTER } from \"../slate/plugins/mentions\";\nimport { classNames } from \"../utils/class-names\";\nimport { useControllableState } from \"../utils/use-controllable-state\";\nimport { useLayoutEffect } from \"../utils/use-layout-effect\";\nimport { FileAttachment } from \"./internal/Attachment\";\nimport { Attribution } from \"./internal/Attribution\";\nimport { Avatar } from \"./internal/Avatar\";\nimport { Button } from \"./internal/Button\";\nimport type { EmojiPickerProps } from \"./internal/EmojiPicker\";\nimport { EmojiPicker, EmojiPickerTrigger } from \"./internal/EmojiPicker\";\nimport {\n  ShortcutTooltip,\n  ShortcutTooltipKey,\n  Tooltip,\n  TooltipProvider,\n} from \"./internal/Tooltip\";\nimport { User } from \"./internal/User\";\n\ninterface EditorActionProps extends ComponentPropsWithoutRef<\"button\"> {\n  label: string;\n  tooltipLabel?: string;\n}\n\ninterface EmojiEditorActionProps extends EditorActionProps {\n  onPickerOpenChange?: EmojiPickerProps[\"onOpenChange\"];\n}\n\ntype ComposerCreateThreadProps<M extends BaseMetadata> = {\n  threadId?: never;\n  commentId?: never;\n\n  /**\n   * The metadata of the thread to create.\n   */\n  metadata?: M;\n};\n\ntype ComposerCreateCommentProps = {\n  /**\n   * The ID of the thread to reply to.\n   */\n  threadId: string;\n  commentId?: never;\n  metadata?: never;\n};\n\ntype ComposerEditCommentProps = {\n  /**\n   * The ID of the thread to edit a comment in.\n   */\n  threadId: string;\n\n  /**\n   * The ID of the comment to edit.\n   */\n  commentId: string;\n  metadata?: never;\n};\n\nexport type ComposerProps<M extends BaseMetadata = DM> = Omit<\n  ComponentPropsWithoutRef<\"form\">,\n  \"defaultValue\"\n> &\n  (\n    | ComposerCreateThreadProps<M>\n    | ComposerCreateCommentProps\n    | ComposerEditCommentProps\n  ) & {\n    /**\n     * The event handler called when the composer is submitted.\n     */\n    onComposerSubmit?: (\n      comment: ComposerSubmitComment,\n      event: FormEvent<HTMLFormElement>\n    ) => Promise<void> | void;\n\n    /**\n     * The composer's initial value.\n     */\n    defaultValue?: ComposerEditorProps[\"defaultValue\"];\n\n    /**\n     * The composer's initial attachments.\n     */\n    defaultAttachments?: CommentAttachment[];\n\n    /**\n     * Whether the composer is collapsed. Setting a value will make the composer controlled.\n     */\n    collapsed?: boolean;\n\n    /**\n     * The event handler called when the collapsed state of the composer changes.\n     */\n    onCollapsedChange?: (collapsed: boolean) => void;\n\n    /**\n     * Whether the composer is initially collapsed. Setting a value will make the composer uncontrolled.\n     */\n    defaultCollapsed?: boolean;\n\n    /**\n     * Whether to show and allow adding attachments.\n     */\n    showAttachments?: boolean;\n\n    /**\n     * Whether the composer is disabled.\n     */\n    disabled?: ComposerFormProps[\"disabled\"];\n\n    /**\n     * Whether to focus the composer on mount.\n     */\n    autoFocus?: ComposerEditorProps[\"autoFocus\"];\n\n    /**\n     * Override the component's strings.\n     */\n    overrides?: Partial<GlobalOverrides & ComposerOverrides>;\n\n    /**\n     * @internal\n     */\n    actions?: ReactNode;\n\n    /**\n     * @internal\n     */\n    showAttribution?: boolean;\n  };\n\ninterface ComposerEditorContainerProps\n  extends Pick<\n    ComposerProps,\n    | \"defaultValue\"\n    | \"showAttachments\"\n    | \"showAttribution\"\n    | \"overrides\"\n    | \"actions\"\n    | \"autoFocus\"\n    | \"disabled\"\n  > {\n  isCollapsed: boolean | undefined;\n  onEmptyChange: (isEmpty: boolean) => void;\n  hasResolveMentionSuggestions: boolean;\n  onEmojiPickerOpenChange: (isOpen: boolean) => void;\n  onEditorClick: (event: MouseEvent<HTMLDivElement>) => void;\n}\n\nfunction ComposerInsertMentionEditorAction({\n  label,\n  tooltipLabel,\n  className,\n  onClick,\n  ...props\n}: EditorActionProps) {\n  const { createMention } = useComposer();\n\n  const preventDefault = useCallback((event: SyntheticEvent) => {\n    event.preventDefault();\n  }, []);\n\n  const handleClick = useCallback(\n    (event: MouseEvent<HTMLButtonElement>) => {\n      onClick?.(event);\n\n      if (!event.isDefaultPrevented()) {\n        event.stopPropagation();\n        createMention();\n      }\n    },\n    [createMention, onClick]\n  );\n\n  return (\n    <Tooltip content={tooltipLabel ?? label}>\n      <Button\n        className={classNames(\"lb-composer-editor-action\", className)}\n        onMouseDown={preventDefault}\n        onClick={handleClick}\n        aria-label={label}\n        {...props}\n      >\n        <MentionIcon className=\"lb-button-icon\" />\n      </Button>\n    </Tooltip>\n  );\n}\n\nfunction ComposerInsertEmojiEditorAction({\n  label,\n  tooltipLabel,\n  onPickerOpenChange,\n  className,\n  ...props\n}: EmojiEditorActionProps) {\n  const { insertText } = useComposer();\n\n  const preventDefault = useCallback((event: SyntheticEvent) => {\n    event.preventDefault();\n  }, []);\n\n  const stopPropagation = useCallback((event: SyntheticEvent) => {\n    event.stopPropagation();\n  }, []);\n\n  return (\n    <EmojiPicker onEmojiSelect={insertText} onOpenChange={onPickerOpenChange}>\n      <Tooltip content={tooltipLabel ?? label}>\n        <EmojiPickerTrigger asChild>\n          <Button\n            className={classNames(\"lb-composer-editor-action\", className)}\n            onMouseDown={preventDefault}\n            onClick={stopPropagation}\n            aria-label={label}\n            {...props}\n          >\n            <EmojiIcon className=\"lb-button-icon\" />\n          </Button>\n        </EmojiPickerTrigger>\n      </Tooltip>\n    </EmojiPicker>\n  );\n}\n\nfunction ComposerAttachFilesEditorAction({\n  label,\n  tooltipLabel,\n  className,\n  ...props\n}: EditorActionProps) {\n  const preventDefault = useCallback((event: SyntheticEvent) => {\n    event.preventDefault();\n  }, []);\n\n  const stopPropagation = useCallback((event: SyntheticEvent) => {\n    event.stopPropagation();\n  }, []);\n\n  return (\n    <Tooltip content={tooltipLabel ?? label}>\n      <ComposerPrimitive.AttachFiles asChild>\n        <Button\n          className={classNames(\"lb-composer-editor-action\", className)}\n          onMouseDown={preventDefault}\n          onClick={stopPropagation}\n          aria-label={label}\n          {...props}\n        >\n          <AttachmentIcon className=\"lb-button-icon\" />\n        </Button>\n      </ComposerPrimitive.AttachFiles>\n    </Tooltip>\n  );\n}\n\nfunction ComposerMention({ userId }: ComposerEditorMentionProps) {\n  return (\n    <ComposerPrimitive.Mention className=\"lb-composer-mention\">\n      {MENTION_CHARACTER}\n      <User userId={userId} />\n    </ComposerPrimitive.Mention>\n  );\n}\n\nfunction ComposerMentionSuggestions({\n  userIds,\n}: ComposerEditorMentionSuggestionsProps) {\n  return userIds.length > 0 ? (\n    <ComposerPrimitive.Suggestions className=\"lb-root lb-portal lb-elevation lb-composer-suggestions lb-composer-mention-suggestions\">\n      <ComposerPrimitive.SuggestionsList className=\"lb-composer-suggestions-list lb-composer-mention-suggestions-list\">\n        {userIds.map((userId) => (\n          <ComposerPrimitive.SuggestionsListItem\n            key={userId}\n            className=\"lb-composer-suggestions-list-item lb-composer-mention-suggestion\"\n            value={userId}\n          >\n            <Avatar\n              userId={userId}\n              className=\"lb-composer-mention-suggestion-avatar\"\n            />\n            <User\n              userId={userId}\n              className=\"lb-composer-mention-suggestion-user\"\n            />\n          </ComposerPrimitive.SuggestionsListItem>\n        ))}\n      </ComposerPrimitive.SuggestionsList>\n    </ComposerPrimitive.Suggestions>\n  ) : null;\n}\n\nfunction ComposerLink({ href, children }: ComposerEditorLinkProps) {\n  return (\n    <ComposerPrimitive.Link href={href} className=\"lb-composer-link\">\n      {children}\n    </ComposerPrimitive.Link>\n  );\n}\n\ninterface ComposerAttachmentsProps extends ComponentPropsWithoutRef<\"div\"> {\n  overrides?: Partial<GlobalOverrides & ComposerOverrides>;\n}\n\ninterface ComposerFileAttachmentProps extends ComponentPropsWithoutRef<\"div\"> {\n  attachment: CommentMixedAttachment;\n  overrides?: Partial<GlobalOverrides & ComposerOverrides>;\n}\n\nfunction ComposerFileAttachment({\n  attachment,\n  className,\n  overrides,\n  ...props\n}: ComposerFileAttachmentProps) {\n  const { removeAttachment } = useComposer();\n\n  const handleDeleteClick = useCallback(() => {\n    removeAttachment(attachment.id);\n  }, [attachment.id, removeAttachment]);\n\n  return (\n    <FileAttachment\n      className={classNames(\"lb-composer-attachment\", className)}\n      {...props}\n      attachment={attachment}\n      onDeleteClick={handleDeleteClick}\n      preventFocusOnDelete\n      overrides={overrides}\n    />\n  );\n}\n\nfunction ComposerAttachments({\n  overrides,\n  className,\n  ...props\n}: ComposerAttachmentsProps) {\n  const { attachments } = useComposer();\n\n  if (attachments.length === 0) {\n    return null;\n  }\n\n  return (\n    <div\n      className={classNames(\"lb-composer-attachments\", className)}\n      {...props}\n    >\n      <div className=\"lb-attachments\">\n        {attachments.map((attachment) => {\n          return (\n            <ComposerFileAttachment\n              key={attachment.id}\n              attachment={attachment}\n              overrides={overrides}\n            />\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n\nconst editorComponents: ComposerEditorComponents = {\n  Mention: ComposerMention,\n  MentionSuggestions: ComposerMentionSuggestions,\n  Link: ComposerLink,\n};\n\nfunction ComposerEditorContainer({\n  showAttachments = true,\n  showAttribution,\n  defaultValue,\n  isCollapsed,\n  overrides,\n  actions,\n  autoFocus,\n  disabled,\n  hasResolveMentionSuggestions,\n  onEmojiPickerOpenChange,\n  onEmptyChange,\n  onEditorClick,\n}: ComposerEditorContainerProps) {\n  const { isEmpty } = useComposer();\n  const { hasMaxAttachments } = useComposerAttachmentsContext();\n  const $ = useOverrides(overrides);\n\n  const [isDraggingOver, dropAreaProps] = useComposerAttachmentsDropArea({\n    disabled: disabled || hasMaxAttachments,\n  });\n\n  useLayoutEffect(() => {\n    onEmptyChange(isEmpty);\n  }, [isEmpty, onEmptyChange]);\n\n  const preventDefault = useCallback((event: SyntheticEvent) => {\n    event.preventDefault();\n  }, []);\n\n  const stopPropagation = useCallback((event: SyntheticEvent) => {\n    event.stopPropagation();\n  }, []);\n\n  return (\n    <div className=\"lb-composer-editor-container\" {...dropAreaProps}>\n      <ComposerPrimitive.Editor\n        className=\"lb-composer-editor\"\n        onClick={onEditorClick}\n        placeholder={$.COMPOSER_PLACEHOLDER}\n        defaultValue={defaultValue}\n        autoFocus={autoFocus}\n        components={editorComponents}\n        disabled={disabled}\n        dir={$.dir}\n      />\n      {showAttachments && <ComposerAttachments overrides={overrides} />}\n      {(!isCollapsed || isDraggingOver) && (\n        <div className=\"lb-composer-footer\">\n          <div className=\"lb-composer-editor-actions\">\n            {hasResolveMentionSuggestions && (\n              <ComposerInsertMentionEditorAction\n                label={$.COMPOSER_INSERT_MENTION}\n                disabled={disabled}\n              />\n            )}\n            <ComposerInsertEmojiEditorAction\n              label={$.COMPOSER_INSERT_EMOJI}\n              onPickerOpenChange={onEmojiPickerOpenChange}\n              disabled={disabled}\n            />\n            {showAttachments && (\n              <ComposerAttachFilesEditorAction\n                label={$.COMPOSER_ATTACH_FILES}\n                disabled={disabled}\n              />\n            )}\n          </div>\n          {showAttribution && <Attribution />}\n          <div className=\"lb-composer-actions\">\n            {actions ?? (\n              <>\n                <ShortcutTooltip\n                  content={$.COMPOSER_SEND}\n                  shortcut={<ShortcutTooltipKey name=\"enter\" />}\n                >\n                  <ComposerPrimitive.Submit asChild>\n                    <Button\n                      onMouseDown={preventDefault}\n                      onClick={stopPropagation}\n                      className=\"lb-composer-action\"\n                      variant=\"primary\"\n                      aria-label={$.COMPOSER_SEND}\n                    >\n                      <SendIcon />\n                    </Button>\n                  </ComposerPrimitive.Submit>\n                </ShortcutTooltip>\n              </>\n            )}\n          </div>\n        </div>\n      )}\n      {showAttachments && isDraggingOver && (\n        <div className=\"lb-composer-attachments-drop-area\">\n          <div className=\"lb-composer-attachments-drop-area-label\">\n            <AttachmentIcon />\n            {$.COMPOSER_ATTACH_FILES}\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n\n/**\n * Displays a composer to create comments.\n *\n * @example\n * <Composer />\n */\nexport const Composer = forwardRef(\n  <M extends BaseMetadata = DM>(\n    {\n      threadId,\n      commentId,\n      metadata,\n      defaultValue,\n      defaultAttachments,\n      onComposerSubmit,\n      collapsed: controlledCollapsed,\n      defaultCollapsed,\n      onCollapsedChange: controlledOnCollapsedChange,\n      overrides,\n      actions,\n      onBlur,\n      className,\n      onFocus,\n      autoFocus,\n      disabled,\n      showAttachments = true,\n      showAttribution,\n      ...props\n    }: ComposerProps<M>,\n    forwardedRef: ForwardedRef<HTMLFormElement>\n  ) => {\n    const client = useClient();\n    const createThread = useCreateThread();\n    const createComment = useCreateComment();\n    const editComment = useEditComment();\n    const hasResolveMentionSuggestions =\n      client[kInternal].resolveMentionSuggestions !== undefined;\n    const isEmptyRef = useRef(true);\n    const isEmojiPickerOpenRef = useRef(false);\n    const $ = useOverrides(overrides);\n    const [isCollapsed, onCollapsedChange] = useControllableState(\n      // If the composer is neither controlled nor uncontrolled, it defaults to controlled as uncollapsed.\n      controlledCollapsed === undefined && defaultCollapsed === undefined\n        ? false\n        : controlledCollapsed,\n      controlledOnCollapsedChange,\n      defaultCollapsed\n    );\n\n    const setEmptyRef = useCallback((isEmpty: boolean) => {\n      isEmptyRef.current = isEmpty;\n    }, []);\n\n    const setEmojiPickerOpenRef = useCallback((isEmojiPickerOpen: boolean) => {\n      isEmojiPickerOpenRef.current = isEmojiPickerOpen;\n    }, []);\n\n    const handleFocus = useCallback(\n      (event: FocusEvent<HTMLFormElement>) => {\n        onFocus?.(event);\n\n        if (event.isDefaultPrevented()) {\n          return;\n        }\n\n        if (isEmptyRef.current) {\n          onCollapsedChange?.(false);\n        }\n      },\n      [onCollapsedChange, onFocus]\n    );\n\n    const handleBlur = useCallback(\n      (event: FocusEvent<HTMLFormElement>) => {\n        onBlur?.(event);\n\n        if (event.isDefaultPrevented()) {\n          return;\n        }\n\n        const isOutside = !event.currentTarget.contains(\n          event.relatedTarget ?? document.activeElement\n        );\n\n        if (isOutside && isEmptyRef.current && !isEmojiPickerOpenRef.current) {\n          onCollapsedChange?.(true);\n        }\n      },\n      [onBlur, onCollapsedChange]\n    );\n\n    const handleEditorClick = useCallback(\n      (event: MouseEvent<HTMLDivElement>) => {\n        event.stopPropagation();\n\n        if (isEmptyRef.current) {\n          onCollapsedChange?.(false);\n        }\n      },\n      [onCollapsedChange]\n    );\n\n    const handleCommentSubmit = useCallback(\n      (comment: ComposerSubmitComment, event: FormEvent<HTMLFormElement>) => {\n        onComposerSubmit?.(comment, event);\n\n        if (event.isDefaultPrevented()) {\n          return;\n        }\n\n        if (commentId && threadId) {\n          editComment({\n            commentId,\n            threadId,\n            body: comment.body,\n            attachments: comment.attachments,\n          });\n        } else if (threadId) {\n          createComment({\n            threadId,\n            body: comment.body,\n            attachments: comment.attachments,\n          });\n        } else {\n          createThread({\n            body: comment.body,\n            metadata: metadata ?? {},\n            attachments: comment.attachments,\n          });\n        }\n      },\n      [\n        commentId,\n        createComment,\n        createThread,\n        editComment,\n        metadata,\n        onComposerSubmit,\n        threadId,\n      ]\n    );\n\n    return (\n      <TooltipProvider>\n        <ComposerPrimitive.Form\n          onComposerSubmit={handleCommentSubmit}\n          className={classNames(\n            \"lb-root lb-composer lb-composer-form\",\n            className\n          )}\n          dir={$.dir}\n          {...props}\n          ref={forwardedRef}\n          data-collapsed={isCollapsed ? \"\" : undefined}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          disabled={disabled}\n          defaultAttachments={defaultAttachments}\n          pasteFilesAsAttachments={showAttachments}\n        >\n          <ComposerEditorContainer\n            defaultValue={defaultValue}\n            actions={actions}\n            overrides={overrides}\n            isCollapsed={isCollapsed}\n            showAttachments={showAttachments}\n            showAttribution={showAttribution}\n            hasResolveMentionSuggestions={hasResolveMentionSuggestions}\n            onEmptyChange={setEmptyRef}\n            onEmojiPickerOpenChange={setEmojiPickerOpenRef}\n            onEditorClick={handleEditorClick}\n            autoFocus={autoFocus}\n            disabled={disabled}\n          />\n        </ComposerPrimitive.Form>\n      </TooltipProvider>\n    );\n  }\n) as <M extends BaseMetadata = DM>(\n  props: ComposerProps<M> & RefAttributes<HTMLFormElement>\n) => JSX.Element;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsMA;AAA2C;AACzC;AACA;AACA;AACA;AAEF;AACE;AAEA;AACE;AAAqB;AAGvB;AAAoB;AAEhB;AAEA;AACE;AACA;AAAc;AAChB;AACF;AACuB;AAGzB;AACG;AAAiC;AAC/B;AAC6D;AAC/C;AACJ;AACG;AACR;AAEH;AAAsB;AAI/B;AAEA;AAAyC;AACvC;AACA;AACA;AACA;AAEF;AACE;AAEA;AACE;AAAqB;AAGvB;AACE;AAAsB;AAGxB;AACG;AAA2B;AAA0B;AACnD;AAAiC;AAC/B;AAA0B;AACxB;AAC6D;AAC/C;AACJ;AACG;AACR;AAEH;AAAoB;AAMjC;AAEA;AAAyC;AACvC;AACA;AACA;AAEF;AACE;AACE;AAAqB;AAGvB;AACE;AAAsB;AAGxB;AACG;AAAiC;AAC/B;AAAqC;AACnC;AAC6D;AAC/C;AACJ;AACG;AACR;AAEH;AAAyB;AAKpC;AAEA;AACE;AACG;AAAoC;AAElC;AAAK;AAGZ;AAEA;AAAoC;AAEpC;AACE;AACG;AAAwC;AACtC;AAA4C;AAExC;AACM;AACK;AACH;AAEN;AACC;AACU;AAEX;AACC;AACU;AAOxB;AAEA;AACE;AACG;AAAuB;AAAsB;AAIlD;AAWA;AAAgC;AAC9B;AACA;AACA;AAEF;AACE;AAEA;AACE;AAA8B;AAGhC;AACG;AAC0D;AACrD;AACJ;AACe;AACK;AACpB;AAGN;AAEA;AAA6B;AAC3B;AACA;AAEF;AACE;AAEA;AACE;AAAO;AAGT;AACG;AAC2D;AACtD;AAEH;AAAc;AAEX;AACG;AACiB;AAChB;AACA;AACF;AAMZ;AAEA;AAAmD;AACxC;AACW;AAEtB;AAEA;AAAiC;AACb;AAClB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEF;AACE;AACA;AACA;AAEA;AAAuE;AAC/C;AAGxB;AACE;AAAqB;AAGvB;AACE;AAAqB;AAGvB;AACE;AAAsB;AAGxB;AACG;AAAc;AAAmC;AAC/C;AACW;AACD;AACM;AACf;AACA;AACY;AACZ;AACO;AAEY;AAAoB;AAEtC;AAAc;AACZ;AAAc;AAEV;AACU;AACT;AAGH;AACU;AACW;AACpB;AAGC;AACU;AACT;AAKL;AAAc;AAGR;AACY;AACA;AAAwB;AAAQ;AAE1C;AAAgC;AAC9B;AACc;AACJ;AACC;AACF;AACM;AAY3B;AAAc;AACZ;AAAc;AAQzB;AAQO;AAAiB;AAEpB;AACE;AACA;AACA;AACA;AACA;AACA;AACW;AACX;AACmB;AACnB;AACA;AACA;AACA;AACA;AACA;AACA;AACkB;AAClB;AACG;AAIL;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AAAyC;AAInC;AACJ;AACA;AAGF;AACE;AAAqB;AAGvB;AACE;AAA+B;AAGjC;AAAoB;AAEhB;AAEA;AACE;AAAA;AAGF;AACE;AAAyB;AAC3B;AACF;AAC2B;AAG7B;AAAmB;AAEf;AAEA;AACE;AAAA;AAGF;AAAuC;AACL;AAGlC;AACE;AAAwB;AAC1B;AACF;AAC0B;AAG5B;AAA0B;AAEtB;AAEA;AACE;AAAyB;AAC3B;AACF;AACkB;AAGpB;AAA4B;AAExB;AAEA;AACE;AAAA;AAGF;AACE;AAAY;AACV;AACA;AACc;AACO;AACtB;AAED;AAAc;AACZ;AACc;AACO;AACtB;AAED;AAAa;AACG;AACS;AACF;AACtB;AACH;AACF;AACA;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACF;AAGF;AAEK;AACmB;AACP;AACT;AACA;AACF;AACO;AACH;AACC;AAC8B;AAC1B;AACD;AACR;AACA;AACyB;AAExB;AACC;AACA;AACA;AACA;AACA;AACA;AACA;AACe;AACU;AACV;AACf;AACA;AAGN;AAGN;;"}
+{"version":3,"file":"Composer.js","sources":["../../src/components/Composer.tsx"],"sourcesContent":["\"use client\";\n\nimport type {\n  BaseMetadata,\n  CommentAttachment,\n  CommentMixedAttachment,\n  DM,\n} from \"@liveblocks/core\";\nimport { kInternal } from \"@liveblocks/core\";\nimport {\n  useClient,\n  useCreateComment,\n  useCreateThread,\n  useEditComment,\n} from \"@liveblocks/react\";\nimport type {\n  ComponentPropsWithoutRef,\n  FocusEvent,\n  FormEvent,\n  ForwardedRef,\n  MouseEvent,\n  ReactNode,\n  RefAttributes,\n  SyntheticEvent,\n} from \"react\";\nimport React, { forwardRef, useCallback, useRef } from \"react\";\n\nimport { useLiveblocksUIConfig } from \"../config\";\nimport { AttachmentIcon } from \"../icons/Attachment\";\nimport { EmojiIcon } from \"../icons/Emoji\";\nimport { MentionIcon } from \"../icons/Mention\";\nimport { SendIcon } from \"../icons/Send\";\nimport type { ComposerOverrides, GlobalOverrides } from \"../overrides\";\nimport { useOverrides } from \"../overrides\";\nimport * as ComposerPrimitive from \"../primitives/Composer\";\nimport {\n  useComposer,\n  useComposerAttachmentsContext,\n} from \"../primitives/Composer/contexts\";\nimport type {\n  ComposerEditorComponents,\n  ComposerEditorLinkProps,\n  ComposerEditorMentionProps,\n  ComposerEditorMentionSuggestionsProps,\n  ComposerEditorProps,\n  ComposerFormProps,\n  ComposerSubmitComment,\n} from \"../primitives/Composer/types\";\nimport { useComposerAttachmentsDropArea } from \"../primitives/Composer/utils\";\nimport { MENTION_CHARACTER } from \"../slate/plugins/mentions\";\nimport { classNames } from \"../utils/class-names\";\nimport { useControllableState } from \"../utils/use-controllable-state\";\nimport { useLayoutEffect } from \"../utils/use-layout-effect\";\nimport { FileAttachment } from \"./internal/Attachment\";\nimport { Attribution } from \"./internal/Attribution\";\nimport { Avatar } from \"./internal/Avatar\";\nimport { Button } from \"./internal/Button\";\nimport type { EmojiPickerProps } from \"./internal/EmojiPicker\";\nimport { EmojiPicker, EmojiPickerTrigger } from \"./internal/EmojiPicker\";\nimport {\n  ShortcutTooltip,\n  ShortcutTooltipKey,\n  Tooltip,\n  TooltipProvider,\n} from \"./internal/Tooltip\";\nimport { User } from \"./internal/User\";\n\ninterface EditorActionProps extends ComponentPropsWithoutRef<\"button\"> {\n  label: string;\n  tooltipLabel?: string;\n}\n\ninterface EmojiEditorActionProps extends EditorActionProps {\n  onPickerOpenChange?: EmojiPickerProps[\"onOpenChange\"];\n}\n\ntype ComposerCreateThreadProps<M extends BaseMetadata> = {\n  threadId?: never;\n  commentId?: never;\n\n  /**\n   * The metadata of the thread to create.\n   */\n  metadata?: M;\n};\n\ntype ComposerCreateCommentProps = {\n  /**\n   * The ID of the thread to reply to.\n   */\n  threadId: string;\n  commentId?: never;\n  metadata?: never;\n};\n\ntype ComposerEditCommentProps = {\n  /**\n   * The ID of the thread to edit a comment in.\n   */\n  threadId: string;\n\n  /**\n   * The ID of the comment to edit.\n   */\n  commentId: string;\n  metadata?: never;\n};\n\nexport type ComposerProps<M extends BaseMetadata = DM> = Omit<\n  ComponentPropsWithoutRef<\"form\">,\n  \"defaultValue\"\n> &\n  (\n    | ComposerCreateThreadProps<M>\n    | ComposerCreateCommentProps\n    | ComposerEditCommentProps\n  ) & {\n    /**\n     * The event handler called when the composer is submitted.\n     */\n    onComposerSubmit?: (\n      comment: ComposerSubmitComment,\n      event: FormEvent<HTMLFormElement>\n    ) => Promise<void> | void;\n\n    /**\n     * The composer's initial value.\n     */\n    defaultValue?: ComposerEditorProps[\"defaultValue\"];\n\n    /**\n     * The composer's initial attachments.\n     */\n    defaultAttachments?: CommentAttachment[];\n\n    /**\n     * Whether the composer is collapsed. Setting a value will make the composer controlled.\n     */\n    collapsed?: boolean;\n\n    /**\n     * The event handler called when the collapsed state of the composer changes.\n     */\n    onCollapsedChange?: (collapsed: boolean) => void;\n\n    /**\n     * Whether the composer is initially collapsed. Setting a value will make the composer uncontrolled.\n     */\n    defaultCollapsed?: boolean;\n\n    /**\n     * Whether to show and allow adding attachments.\n     */\n    showAttachments?: boolean;\n\n    /**\n     * Whether the composer is disabled.\n     */\n    disabled?: ComposerFormProps[\"disabled\"];\n\n    /**\n     * Whether to focus the composer on mount.\n     */\n    autoFocus?: ComposerEditorProps[\"autoFocus\"];\n\n    /**\n     * Override the component's strings.\n     */\n    overrides?: Partial<GlobalOverrides & ComposerOverrides>;\n\n    /**\n     * @internal\n     */\n    actions?: ReactNode;\n\n    /**\n     * @internal\n     */\n    showAttribution?: boolean;\n  };\n\ninterface ComposerEditorContainerProps\n  extends Pick<\n    ComposerProps,\n    | \"defaultValue\"\n    | \"showAttachments\"\n    | \"showAttribution\"\n    | \"overrides\"\n    | \"actions\"\n    | \"autoFocus\"\n    | \"disabled\"\n  > {\n  isCollapsed: boolean | undefined;\n  onEmptyChange: (isEmpty: boolean) => void;\n  hasResolveMentionSuggestions: boolean;\n  onEmojiPickerOpenChange: (isOpen: boolean) => void;\n  onEditorClick: (event: MouseEvent<HTMLDivElement>) => void;\n}\n\nfunction ComposerInsertMentionEditorAction({\n  label,\n  tooltipLabel,\n  className,\n  onClick,\n  ...props\n}: EditorActionProps) {\n  const { createMention } = useComposer();\n\n  const preventDefault = useCallback((event: SyntheticEvent) => {\n    event.preventDefault();\n  }, []);\n\n  const handleClick = useCallback(\n    (event: MouseEvent<HTMLButtonElement>) => {\n      onClick?.(event);\n\n      if (!event.isDefaultPrevented()) {\n        event.stopPropagation();\n        createMention();\n      }\n    },\n    [createMention, onClick]\n  );\n\n  return (\n    <Tooltip content={tooltipLabel ?? label}>\n      <Button\n        className={classNames(\"lb-composer-editor-action\", className)}\n        onMouseDown={preventDefault}\n        onClick={handleClick}\n        aria-label={label}\n        {...props}\n      >\n        <MentionIcon className=\"lb-button-icon\" />\n      </Button>\n    </Tooltip>\n  );\n}\n\nfunction ComposerInsertEmojiEditorAction({\n  label,\n  tooltipLabel,\n  onPickerOpenChange,\n  className,\n  ...props\n}: EmojiEditorActionProps) {\n  const { insertText } = useComposer();\n\n  const preventDefault = useCallback((event: SyntheticEvent) => {\n    event.preventDefault();\n  }, []);\n\n  const stopPropagation = useCallback((event: SyntheticEvent) => {\n    event.stopPropagation();\n  }, []);\n\n  return (\n    <EmojiPicker onEmojiSelect={insertText} onOpenChange={onPickerOpenChange}>\n      <Tooltip content={tooltipLabel ?? label}>\n        <EmojiPickerTrigger asChild>\n          <Button\n            className={classNames(\"lb-composer-editor-action\", className)}\n            onMouseDown={preventDefault}\n            onClick={stopPropagation}\n            aria-label={label}\n            {...props}\n          >\n            <EmojiIcon className=\"lb-button-icon\" />\n          </Button>\n        </EmojiPickerTrigger>\n      </Tooltip>\n    </EmojiPicker>\n  );\n}\n\nfunction ComposerAttachFilesEditorAction({\n  label,\n  tooltipLabel,\n  className,\n  ...props\n}: EditorActionProps) {\n  const preventDefault = useCallback((event: SyntheticEvent) => {\n    event.preventDefault();\n  }, []);\n\n  const stopPropagation = useCallback((event: SyntheticEvent) => {\n    event.stopPropagation();\n  }, []);\n\n  return (\n    <Tooltip content={tooltipLabel ?? label}>\n      <ComposerPrimitive.AttachFiles asChild>\n        <Button\n          className={classNames(\"lb-composer-editor-action\", className)}\n          onMouseDown={preventDefault}\n          onClick={stopPropagation}\n          aria-label={label}\n          {...props}\n        >\n          <AttachmentIcon className=\"lb-button-icon\" />\n        </Button>\n      </ComposerPrimitive.AttachFiles>\n    </Tooltip>\n  );\n}\n\nfunction ComposerMention({ userId }: ComposerEditorMentionProps) {\n  return (\n    <ComposerPrimitive.Mention className=\"lb-composer-mention\">\n      {MENTION_CHARACTER}\n      <User userId={userId} />\n    </ComposerPrimitive.Mention>\n  );\n}\n\nfunction ComposerMentionSuggestions({\n  userIds,\n}: ComposerEditorMentionSuggestionsProps) {\n  return userIds.length > 0 ? (\n    <ComposerPrimitive.Suggestions className=\"lb-root lb-portal lb-elevation lb-composer-suggestions lb-composer-mention-suggestions\">\n      <ComposerPrimitive.SuggestionsList className=\"lb-composer-suggestions-list lb-composer-mention-suggestions-list\">\n        {userIds.map((userId) => (\n          <ComposerPrimitive.SuggestionsListItem\n            key={userId}\n            className=\"lb-composer-suggestions-list-item lb-composer-mention-suggestion\"\n            value={userId}\n          >\n            <Avatar\n              userId={userId}\n              className=\"lb-composer-mention-suggestion-avatar\"\n            />\n            <User\n              userId={userId}\n              className=\"lb-composer-mention-suggestion-user\"\n            />\n          </ComposerPrimitive.SuggestionsListItem>\n        ))}\n      </ComposerPrimitive.SuggestionsList>\n    </ComposerPrimitive.Suggestions>\n  ) : null;\n}\n\nfunction ComposerLink({ href, children }: ComposerEditorLinkProps) {\n  return (\n    <ComposerPrimitive.Link href={href} className=\"lb-composer-link\">\n      {children}\n    </ComposerPrimitive.Link>\n  );\n}\n\ninterface ComposerAttachmentsProps extends ComponentPropsWithoutRef<\"div\"> {\n  overrides?: Partial<GlobalOverrides & ComposerOverrides>;\n}\n\ninterface ComposerFileAttachmentProps extends ComponentPropsWithoutRef<\"div\"> {\n  attachment: CommentMixedAttachment;\n  overrides?: Partial<GlobalOverrides & ComposerOverrides>;\n}\n\nfunction ComposerFileAttachment({\n  attachment,\n  className,\n  overrides,\n  ...props\n}: ComposerFileAttachmentProps) {\n  const { removeAttachment } = useComposer();\n\n  const handleDeleteClick = useCallback(() => {\n    removeAttachment(attachment.id);\n  }, [attachment.id, removeAttachment]);\n\n  return (\n    <FileAttachment\n      className={classNames(\"lb-composer-attachment\", className)}\n      {...props}\n      attachment={attachment}\n      onDeleteClick={handleDeleteClick}\n      preventFocusOnDelete\n      overrides={overrides}\n    />\n  );\n}\n\nfunction ComposerAttachments({\n  overrides,\n  className,\n  ...props\n}: ComposerAttachmentsProps) {\n  const { attachments } = useComposer();\n\n  if (attachments.length === 0) {\n    return null;\n  }\n\n  return (\n    <div\n      className={classNames(\"lb-composer-attachments\", className)}\n      {...props}\n    >\n      <div className=\"lb-attachments\">\n        {attachments.map((attachment) => {\n          return (\n            <ComposerFileAttachment\n              key={attachment.id}\n              attachment={attachment}\n              overrides={overrides}\n            />\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n\nconst editorComponents: ComposerEditorComponents = {\n  Mention: ComposerMention,\n  MentionSuggestions: ComposerMentionSuggestions,\n  Link: ComposerLink,\n};\n\nfunction ComposerEditorContainer({\n  showAttachments = true,\n  showAttribution,\n  defaultValue,\n  isCollapsed,\n  overrides,\n  actions,\n  autoFocus,\n  disabled,\n  hasResolveMentionSuggestions,\n  onEmojiPickerOpenChange,\n  onEmptyChange,\n  onEditorClick,\n}: ComposerEditorContainerProps) {\n  const { isEmpty } = useComposer();\n  const { hasMaxAttachments } = useComposerAttachmentsContext();\n  const $ = useOverrides(overrides);\n\n  const [isDraggingOver, dropAreaProps] = useComposerAttachmentsDropArea({\n    disabled: disabled || hasMaxAttachments,\n  });\n\n  useLayoutEffect(() => {\n    onEmptyChange(isEmpty);\n  }, [isEmpty, onEmptyChange]);\n\n  const preventDefault = useCallback((event: SyntheticEvent) => {\n    event.preventDefault();\n  }, []);\n\n  const stopPropagation = useCallback((event: SyntheticEvent) => {\n    event.stopPropagation();\n  }, []);\n\n  return (\n    <div className=\"lb-composer-editor-container\" {...dropAreaProps}>\n      <ComposerPrimitive.Editor\n        className=\"lb-composer-editor\"\n        onClick={onEditorClick}\n        placeholder={$.COMPOSER_PLACEHOLDER}\n        defaultValue={defaultValue}\n        autoFocus={autoFocus}\n        components={editorComponents}\n        disabled={disabled}\n        dir={$.dir}\n      />\n      {showAttachments && <ComposerAttachments overrides={overrides} />}\n      {(!isCollapsed || isDraggingOver) && (\n        <div className=\"lb-composer-footer\">\n          <div className=\"lb-composer-editor-actions\">\n            {hasResolveMentionSuggestions && (\n              <ComposerInsertMentionEditorAction\n                label={$.COMPOSER_INSERT_MENTION}\n                disabled={disabled}\n              />\n            )}\n            <ComposerInsertEmojiEditorAction\n              label={$.COMPOSER_INSERT_EMOJI}\n              onPickerOpenChange={onEmojiPickerOpenChange}\n              disabled={disabled}\n            />\n            {showAttachments && (\n              <ComposerAttachFilesEditorAction\n                label={$.COMPOSER_ATTACH_FILES}\n                disabled={disabled}\n              />\n            )}\n          </div>\n          {showAttribution && <Attribution />}\n          <div className=\"lb-composer-actions\">\n            {actions ?? (\n              <>\n                <ShortcutTooltip\n                  content={$.COMPOSER_SEND}\n                  shortcut={<ShortcutTooltipKey name=\"enter\" />}\n                >\n                  <ComposerPrimitive.Submit asChild>\n                    <Button\n                      onMouseDown={preventDefault}\n                      onClick={stopPropagation}\n                      className=\"lb-composer-action\"\n                      variant=\"primary\"\n                      aria-label={$.COMPOSER_SEND}\n                    >\n                      <SendIcon />\n                    </Button>\n                  </ComposerPrimitive.Submit>\n                </ShortcutTooltip>\n              </>\n            )}\n          </div>\n        </div>\n      )}\n      {showAttachments && isDraggingOver && (\n        <div className=\"lb-composer-attachments-drop-area\">\n          <div className=\"lb-composer-attachments-drop-area-label\">\n            <AttachmentIcon />\n            {$.COMPOSER_ATTACH_FILES}\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n\n/**\n * Displays a composer to create comments.\n *\n * @example\n * <Composer />\n */\nexport const Composer = forwardRef(\n  <M extends BaseMetadata = DM>(\n    {\n      threadId,\n      commentId,\n      metadata,\n      defaultValue,\n      defaultAttachments,\n      onComposerSubmit,\n      collapsed: controlledCollapsed,\n      defaultCollapsed,\n      onCollapsedChange: controlledOnCollapsedChange,\n      overrides,\n      actions,\n      onBlur,\n      className,\n      onFocus,\n      autoFocus,\n      disabled,\n      showAttachments = true,\n      showAttribution,\n      ...props\n    }: ComposerProps<M>,\n    forwardedRef: ForwardedRef<HTMLFormElement>\n  ) => {\n    const client = useClient();\n    const createThread = useCreateThread();\n    const createComment = useCreateComment();\n    const editComment = useEditComment();\n    const { preventUnsavedComposerChanges } = useLiveblocksUIConfig();\n    const hasResolveMentionSuggestions =\n      client[kInternal].resolveMentionSuggestions !== undefined;\n    const isEmptyRef = useRef(true);\n    const isEmojiPickerOpenRef = useRef(false);\n    const $ = useOverrides(overrides);\n    const [isCollapsed, onCollapsedChange] = useControllableState(\n      // If the composer is neither controlled nor uncontrolled, it defaults to controlled as uncollapsed.\n      controlledCollapsed === undefined && defaultCollapsed === undefined\n        ? false\n        : controlledCollapsed,\n      controlledOnCollapsedChange,\n      defaultCollapsed\n    );\n\n    const setEmptyRef = useCallback((isEmpty: boolean) => {\n      isEmptyRef.current = isEmpty;\n    }, []);\n\n    const setEmojiPickerOpenRef = useCallback((isEmojiPickerOpen: boolean) => {\n      isEmojiPickerOpenRef.current = isEmojiPickerOpen;\n    }, []);\n\n    const handleFocus = useCallback(\n      (event: FocusEvent<HTMLFormElement>) => {\n        onFocus?.(event);\n\n        if (event.isDefaultPrevented()) {\n          return;\n        }\n\n        if (isEmptyRef.current) {\n          onCollapsedChange?.(false);\n        }\n      },\n      [onCollapsedChange, onFocus]\n    );\n\n    const handleBlur = useCallback(\n      (event: FocusEvent<HTMLFormElement>) => {\n        onBlur?.(event);\n\n        if (event.isDefaultPrevented()) {\n          return;\n        }\n\n        const isOutside = !event.currentTarget.contains(\n          event.relatedTarget ?? document.activeElement\n        );\n\n        if (isOutside && isEmptyRef.current && !isEmojiPickerOpenRef.current) {\n          onCollapsedChange?.(true);\n        }\n      },\n      [onBlur, onCollapsedChange]\n    );\n\n    const handleEditorClick = useCallback(\n      (event: MouseEvent<HTMLDivElement>) => {\n        event.stopPropagation();\n\n        if (isEmptyRef.current) {\n          onCollapsedChange?.(false);\n        }\n      },\n      [onCollapsedChange]\n    );\n\n    const handleCommentSubmit = useCallback(\n      (comment: ComposerSubmitComment, event: FormEvent<HTMLFormElement>) => {\n        onComposerSubmit?.(comment, event);\n\n        if (event.isDefaultPrevented()) {\n          return;\n        }\n\n        if (commentId && threadId) {\n          editComment({\n            commentId,\n            threadId,\n            body: comment.body,\n            attachments: comment.attachments,\n          });\n        } else if (threadId) {\n          createComment({\n            threadId,\n            body: comment.body,\n            attachments: comment.attachments,\n          });\n        } else {\n          createThread({\n            body: comment.body,\n            metadata: metadata ?? {},\n            attachments: comment.attachments,\n          });\n        }\n      },\n      [\n        commentId,\n        createComment,\n        createThread,\n        editComment,\n        metadata,\n        onComposerSubmit,\n        threadId,\n      ]\n    );\n\n    return (\n      <TooltipProvider>\n        <ComposerPrimitive.Form\n          onComposerSubmit={handleCommentSubmit}\n          className={classNames(\n            \"lb-root lb-composer lb-composer-form\",\n            className\n          )}\n          dir={$.dir}\n          {...props}\n          ref={forwardedRef}\n          data-collapsed={isCollapsed ? \"\" : undefined}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          disabled={disabled}\n          defaultAttachments={defaultAttachments}\n          pasteFilesAsAttachments={showAttachments}\n          preventUnsavedChanges={preventUnsavedComposerChanges}\n        >\n          <ComposerEditorContainer\n            defaultValue={defaultValue}\n            actions={actions}\n            overrides={overrides}\n            isCollapsed={isCollapsed}\n            showAttachments={showAttachments}\n            showAttribution={showAttribution}\n            hasResolveMentionSuggestions={hasResolveMentionSuggestions}\n            onEmptyChange={setEmptyRef}\n            onEmojiPickerOpenChange={setEmojiPickerOpenRef}\n            onEditorClick={handleEditorClick}\n            autoFocus={autoFocus}\n            disabled={disabled}\n          />\n        </ComposerPrimitive.Form>\n      </TooltipProvider>\n    );\n  }\n) as <M extends BaseMetadata = DM>(\n  props: ComposerProps<M> & RefAttributes<HTMLFormElement>\n) => JSX.Element;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuMA;AAA2C;AACzC;AACA;AACA;AACA;AAEF;AACE;AAEA;AACE;AAAqB;AAGvB;AAAoB;AAEhB;AAEA;AACE;AACA;AAAc;AAChB;AACF;AACuB;AAGzB;AACG;AAAiC;AAC/B;AAC6D;AAC/C;AACJ;AACG;AACR;AAEH;AAAsB;AAI/B;AAEA;AAAyC;AACvC;AACA;AACA;AACA;AAEF;AACE;AAEA;AACE;AAAqB;AAGvB;AACE;AAAsB;AAGxB;AACG;AAA2B;AAA0B;AACnD;AAAiC;AAC/B;AAA0B;AACxB;AAC6D;AAC/C;AACJ;AACG;AACR;AAEH;AAAoB;AAMjC;AAEA;AAAyC;AACvC;AACA;AACA;AAEF;AACE;AACE;AAAqB;AAGvB;AACE;AAAsB;AAGxB;AACG;AAAiC;AAC/B;AAAqC;AACnC;AAC6D;AAC/C;AACJ;AACG;AACR;AAEH;AAAyB;AAKpC;AAEA;AACE;AACG;AAAoC;AAElC;AAAK;AAGZ;AAEA;AAAoC;AAEpC;AACE;AACG;AAAwC;AACtC;AAA4C;AAExC;AACM;AACK;AACH;AAEN;AACC;AACU;AAEX;AACC;AACU;AAOxB;AAEA;AACE;AACG;AAAuB;AAAsB;AAIlD;AAWA;AAAgC;AAC9B;AACA;AACA;AAEF;AACE;AAEA;AACE;AAA8B;AAGhC;AACG;AAC0D;AACrD;AACJ;AACe;AACK;AACpB;AAGN;AAEA;AAA6B;AAC3B;AACA;AAEF;AACE;AAEA;AACE;AAAO;AAGT;AACG;AAC2D;AACtD;AAEH;AAAc;AAEX;AACG;AACiB;AAChB;AACA;AACF;AAMZ;AAEA;AAAmD;AACxC;AACW;AAEtB;AAEA;AAAiC;AACb;AAClB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEF;AACE;AACA;AACA;AAEA;AAAuE;AAC/C;AAGxB;AACE;AAAqB;AAGvB;AACE;AAAqB;AAGvB;AACE;AAAsB;AAGxB;AACG;AAAc;AAAmC;AAC/C;AACW;AACD;AACM;AACf;AACA;AACY;AACZ;AACO;AAEY;AAAoB;AAEtC;AAAc;AACZ;AAAc;AAEV;AACU;AACT;AAGH;AACU;AACW;AACpB;AAGC;AACU;AACT;AAKL;AAAc;AAGR;AACY;AACA;AAAwB;AAAQ;AAE1C;AAAgC;AAC9B;AACc;AACJ;AACC;AACF;AACM;AAY3B;AAAc;AACZ;AAAc;AAQzB;AAQO;AAAiB;AAEpB;AACE;AACA;AACA;AACA;AACA;AACA;AACW;AACX;AACmB;AACnB;AACA;AACA;AACA;AACA;AACA;AACA;AACkB;AAClB;AACG;AAIL;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AAAyC;AAInC;AACJ;AACA;AAGF;AACE;AAAqB;AAGvB;AACE;AAA+B;AAGjC;AAAoB;AAEhB;AAEA;AACE;AAAA;AAGF;AACE;AAAyB;AAC3B;AACF;AAC2B;AAG7B;AAAmB;AAEf;AAEA;AACE;AAAA;AAGF;AAAuC;AACL;AAGlC;AACE;AAAwB;AAC1B;AACF;AAC0B;AAG5B;AAA0B;AAEtB;AAEA;AACE;AAAyB;AAC3B;AACF;AACkB;AAGpB;AAA4B;AAExB;AAEA;AACE;AAAA;AAGF;AACE;AAAY;AACV;AACA;AACc;AACO;AACtB;AAED;AAAc;AACZ;AACc;AACO;AACtB;AAED;AAAa;AACG;AACS;AACF;AACtB;AACH;AACF;AACA;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACF;AAGF;AAEK;AACmB;AACP;AACT;AACA;AACF;AACO;AACH;AACC;AAC8B;AAC1B;AACD;AACR;AACA;AACyB;AACF;AAEtB;AACC;AACA;AACA;AACA;AACA;AACA;AACA;AACe;AACU;AACV;AACf;AACA;AAGN;AAGN;;"}

package/dist/components/Composer.mjs

@@ -2,6 +2,7 @@
 import { kInternal } from '@liveblocks/core';
 import { useClient, useCreateThread, useCreateComment, useEditComment } from '@liveblocks/react';
 import React__default, { forwardRef, useRef, useCallback } from 'react';
+import { useLiveblocksUIConfig } from '../config.mjs';
 import { AttachmentIcon } from '../icons/Attachment.mjs';
 import { EmojiIcon } from '../icons/Emoji.mjs';
 import { MentionIcon } from '../icons/Mention.mjs';
@@ -296,6 +297,7 @@ const Composer = forwardRef(
     const createThread = useCreateThread();
     const createComment = useCreateComment();
     const editComment = useEditComment();
+    const { preventUnsavedComposerChanges } = useLiveblocksUIConfig();
     const hasResolveMentionSuggestions = client[kInternal].resolveMentionSuggestions !== void 0;
     const isEmptyRef = useRef(true);
     const isEmojiPickerOpenRef = useRef(false);
@@ -398,7 +400,8 @@ const Composer = forwardRef(
       onBlur: handleBlur,
       disabled,
       defaultAttachments,
-      pasteFilesAsAttachments: showAttachments
+      pasteFilesAsAttachments: showAttachments,
+      preventUnsavedChanges: preventUnsavedComposerChanges
     }, /* @__PURE__ */ React__default.createElement(ComposerEditorContainer, {
       defaultValue,
       actions,

package/dist/components/Composer.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Composer.mjs","sources":["../../src/components/Composer.tsx"],"sourcesContent":["\"use client\";\n\nimport type {\n  BaseMetadata,\n  CommentAttachment,\n  CommentMixedAttachment,\n  DM,\n} from \"@liveblocks/core\";\nimport { kInternal } from \"@liveblocks/core\";\nimport {\n  useClient,\n  useCreateComment,\n  useCreateThread,\n  useEditComment,\n} from \"@liveblocks/react\";\nimport type {\n  ComponentPropsWithoutRef,\n  FocusEvent,\n  FormEvent,\n  ForwardedRef,\n  MouseEvent,\n  ReactNode,\n  RefAttributes,\n  SyntheticEvent,\n} from \"react\";\nimport React, { forwardRef, useCallback, useRef } from \"react\";\n\nimport { AttachmentIcon } from \"../icons/Attachment\";\nimport { EmojiIcon } from \"../icons/Emoji\";\nimport { MentionIcon } from \"../icons/Mention\";\nimport { SendIcon } from \"../icons/Send\";\nimport type { ComposerOverrides, GlobalOverrides } from \"../overrides\";\nimport { useOverrides } from \"../overrides\";\nimport * as ComposerPrimitive from \"../primitives/Composer\";\nimport {\n  useComposer,\n  useComposerAttachmentsContext,\n} from \"../primitives/Composer/contexts\";\nimport type {\n  ComposerEditorComponents,\n  ComposerEditorLinkProps,\n  ComposerEditorMentionProps,\n  ComposerEditorMentionSuggestionsProps,\n  ComposerEditorProps,\n  ComposerFormProps,\n  ComposerSubmitComment,\n} from \"../primitives/Composer/types\";\nimport { useComposerAttachmentsDropArea } from \"../primitives/Composer/utils\";\nimport { MENTION_CHARACTER } from \"../slate/plugins/mentions\";\nimport { classNames } from \"../utils/class-names\";\nimport { useControllableState } from \"../utils/use-controllable-state\";\nimport { useLayoutEffect } from \"../utils/use-layout-effect\";\nimport { FileAttachment } from \"./internal/Attachment\";\nimport { Attribution } from \"./internal/Attribution\";\nimport { Avatar } from \"./internal/Avatar\";\nimport { Button } from \"./internal/Button\";\nimport type { EmojiPickerProps } from \"./internal/EmojiPicker\";\nimport { EmojiPicker, EmojiPickerTrigger } from \"./internal/EmojiPicker\";\nimport {\n  ShortcutTooltip,\n  ShortcutTooltipKey,\n  Tooltip,\n  TooltipProvider,\n} from \"./internal/Tooltip\";\nimport { User } from \"./internal/User\";\n\ninterface EditorActionProps extends ComponentPropsWithoutRef<\"button\"> {\n  label: string;\n  tooltipLabel?: string;\n}\n\ninterface EmojiEditorActionProps extends EditorActionProps {\n  onPickerOpenChange?: EmojiPickerProps[\"onOpenChange\"];\n}\n\ntype ComposerCreateThreadProps<M extends BaseMetadata> = {\n  threadId?: never;\n  commentId?: never;\n\n  /**\n   * The metadata of the thread to create.\n   */\n  metadata?: M;\n};\n\ntype ComposerCreateCommentProps = {\n  /**\n   * The ID of the thread to reply to.\n   */\n  threadId: string;\n  commentId?: never;\n  metadata?: never;\n};\n\ntype ComposerEditCommentProps = {\n  /**\n   * The ID of the thread to edit a comment in.\n   */\n  threadId: string;\n\n  /**\n   * The ID of the comment to edit.\n   */\n  commentId: string;\n  metadata?: never;\n};\n\nexport type ComposerProps<M extends BaseMetadata = DM> = Omit<\n  ComponentPropsWithoutRef<\"form\">,\n  \"defaultValue\"\n> &\n  (\n    | ComposerCreateThreadProps<M>\n    | ComposerCreateCommentProps\n    | ComposerEditCommentProps\n  ) & {\n    /**\n     * The event handler called when the composer is submitted.\n     */\n    onComposerSubmit?: (\n      comment: ComposerSubmitComment,\n      event: FormEvent<HTMLFormElement>\n    ) => Promise<void> | void;\n\n    /**\n     * The composer's initial value.\n     */\n    defaultValue?: ComposerEditorProps[\"defaultValue\"];\n\n    /**\n     * The composer's initial attachments.\n     */\n    defaultAttachments?: CommentAttachment[];\n\n    /**\n     * Whether the composer is collapsed. Setting a value will make the composer controlled.\n     */\n    collapsed?: boolean;\n\n    /**\n     * The event handler called when the collapsed state of the composer changes.\n     */\n    onCollapsedChange?: (collapsed: boolean) => void;\n\n    /**\n     * Whether the composer is initially collapsed. Setting a value will make the composer uncontrolled.\n     */\n    defaultCollapsed?: boolean;\n\n    /**\n     * Whether to show and allow adding attachments.\n     */\n    showAttachments?: boolean;\n\n    /**\n     * Whether the composer is disabled.\n     */\n    disabled?: ComposerFormProps[\"disabled\"];\n\n    /**\n     * Whether to focus the composer on mount.\n     */\n    autoFocus?: ComposerEditorProps[\"autoFocus\"];\n\n    /**\n     * Override the component's strings.\n     */\n    overrides?: Partial<GlobalOverrides & ComposerOverrides>;\n\n    /**\n     * @internal\n     */\n    actions?: ReactNode;\n\n    /**\n     * @internal\n     */\n    showAttribution?: boolean;\n  };\n\ninterface ComposerEditorContainerProps\n  extends Pick<\n    ComposerProps,\n    | \"defaultValue\"\n    | \"showAttachments\"\n    | \"showAttribution\"\n    | \"overrides\"\n    | \"actions\"\n    | \"autoFocus\"\n    | \"disabled\"\n  > {\n  isCollapsed: boolean | undefined;\n  onEmptyChange: (isEmpty: boolean) => void;\n  hasResolveMentionSuggestions: boolean;\n  onEmojiPickerOpenChange: (isOpen: boolean) => void;\n  onEditorClick: (event: MouseEvent<HTMLDivElement>) => void;\n}\n\nfunction ComposerInsertMentionEditorAction({\n  label,\n  tooltipLabel,\n  className,\n  onClick,\n  ...props\n}: EditorActionProps) {\n  const { createMention } = useComposer();\n\n  const preventDefault = useCallback((event: SyntheticEvent) => {\n    event.preventDefault();\n  }, []);\n\n  const handleClick = useCallback(\n    (event: MouseEvent<HTMLButtonElement>) => {\n      onClick?.(event);\n\n      if (!event.isDefaultPrevented()) {\n        event.stopPropagation();\n        createMention();\n      }\n    },\n    [createMention, onClick]\n  );\n\n  return (\n    <Tooltip content={tooltipLabel ?? label}>\n      <Button\n        className={classNames(\"lb-composer-editor-action\", className)}\n        onMouseDown={preventDefault}\n        onClick={handleClick}\n        aria-label={label}\n        {...props}\n      >\n        <MentionIcon className=\"lb-button-icon\" />\n      </Button>\n    </Tooltip>\n  );\n}\n\nfunction ComposerInsertEmojiEditorAction({\n  label,\n  tooltipLabel,\n  onPickerOpenChange,\n  className,\n  ...props\n}: EmojiEditorActionProps) {\n  const { insertText } = useComposer();\n\n  const preventDefault = useCallback((event: SyntheticEvent) => {\n    event.preventDefault();\n  }, []);\n\n  const stopPropagation = useCallback((event: SyntheticEvent) => {\n    event.stopPropagation();\n  }, []);\n\n  return (\n    <EmojiPicker onEmojiSelect={insertText} onOpenChange={onPickerOpenChange}>\n      <Tooltip content={tooltipLabel ?? label}>\n        <EmojiPickerTrigger asChild>\n          <Button\n            className={classNames(\"lb-composer-editor-action\", className)}\n            onMouseDown={preventDefault}\n            onClick={stopPropagation}\n            aria-label={label}\n            {...props}\n          >\n            <EmojiIcon className=\"lb-button-icon\" />\n          </Button>\n        </EmojiPickerTrigger>\n      </Tooltip>\n    </EmojiPicker>\n  );\n}\n\nfunction ComposerAttachFilesEditorAction({\n  label,\n  tooltipLabel,\n  className,\n  ...props\n}: EditorActionProps) {\n  const preventDefault = useCallback((event: SyntheticEvent) => {\n    event.preventDefault();\n  }, []);\n\n  const stopPropagation = useCallback((event: SyntheticEvent) => {\n    event.stopPropagation();\n  }, []);\n\n  return (\n    <Tooltip content={tooltipLabel ?? label}>\n      <ComposerPrimitive.AttachFiles asChild>\n        <Button\n          className={classNames(\"lb-composer-editor-action\", className)}\n          onMouseDown={preventDefault}\n          onClick={stopPropagation}\n          aria-label={label}\n          {...props}\n        >\n          <AttachmentIcon className=\"lb-button-icon\" />\n        </Button>\n      </ComposerPrimitive.AttachFiles>\n    </Tooltip>\n  );\n}\n\nfunction ComposerMention({ userId }: ComposerEditorMentionProps) {\n  return (\n    <ComposerPrimitive.Mention className=\"lb-composer-mention\">\n      {MENTION_CHARACTER}\n      <User userId={userId} />\n    </ComposerPrimitive.Mention>\n  );\n}\n\nfunction ComposerMentionSuggestions({\n  userIds,\n}: ComposerEditorMentionSuggestionsProps) {\n  return userIds.length > 0 ? (\n    <ComposerPrimitive.Suggestions className=\"lb-root lb-portal lb-elevation lb-composer-suggestions lb-composer-mention-suggestions\">\n      <ComposerPrimitive.SuggestionsList className=\"lb-composer-suggestions-list lb-composer-mention-suggestions-list\">\n        {userIds.map((userId) => (\n          <ComposerPrimitive.SuggestionsListItem\n            key={userId}\n            className=\"lb-composer-suggestions-list-item lb-composer-mention-suggestion\"\n            value={userId}\n          >\n            <Avatar\n              userId={userId}\n              className=\"lb-composer-mention-suggestion-avatar\"\n            />\n            <User\n              userId={userId}\n              className=\"lb-composer-mention-suggestion-user\"\n            />\n          </ComposerPrimitive.SuggestionsListItem>\n        ))}\n      </ComposerPrimitive.SuggestionsList>\n    </ComposerPrimitive.Suggestions>\n  ) : null;\n}\n\nfunction ComposerLink({ href, children }: ComposerEditorLinkProps) {\n  return (\n    <ComposerPrimitive.Link href={href} className=\"lb-composer-link\">\n      {children}\n    </ComposerPrimitive.Link>\n  );\n}\n\ninterface ComposerAttachmentsProps extends ComponentPropsWithoutRef<\"div\"> {\n  overrides?: Partial<GlobalOverrides & ComposerOverrides>;\n}\n\ninterface ComposerFileAttachmentProps extends ComponentPropsWithoutRef<\"div\"> {\n  attachment: CommentMixedAttachment;\n  overrides?: Partial<GlobalOverrides & ComposerOverrides>;\n}\n\nfunction ComposerFileAttachment({\n  attachment,\n  className,\n  overrides,\n  ...props\n}: ComposerFileAttachmentProps) {\n  const { removeAttachment } = useComposer();\n\n  const handleDeleteClick = useCallback(() => {\n    removeAttachment(attachment.id);\n  }, [attachment.id, removeAttachment]);\n\n  return (\n    <FileAttachment\n      className={classNames(\"lb-composer-attachment\", className)}\n      {...props}\n      attachment={attachment}\n      onDeleteClick={handleDeleteClick}\n      preventFocusOnDelete\n      overrides={overrides}\n    />\n  );\n}\n\nfunction ComposerAttachments({\n  overrides,\n  className,\n  ...props\n}: ComposerAttachmentsProps) {\n  const { attachments } = useComposer();\n\n  if (attachments.length === 0) {\n    return null;\n  }\n\n  return (\n    <div\n      className={classNames(\"lb-composer-attachments\", className)}\n      {...props}\n    >\n      <div className=\"lb-attachments\">\n        {attachments.map((attachment) => {\n          return (\n            <ComposerFileAttachment\n              key={attachment.id}\n              attachment={attachment}\n              overrides={overrides}\n            />\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n\nconst editorComponents: ComposerEditorComponents = {\n  Mention: ComposerMention,\n  MentionSuggestions: ComposerMentionSuggestions,\n  Link: ComposerLink,\n};\n\nfunction ComposerEditorContainer({\n  showAttachments = true,\n  showAttribution,\n  defaultValue,\n  isCollapsed,\n  overrides,\n  actions,\n  autoFocus,\n  disabled,\n  hasResolveMentionSuggestions,\n  onEmojiPickerOpenChange,\n  onEmptyChange,\n  onEditorClick,\n}: ComposerEditorContainerProps) {\n  const { isEmpty } = useComposer();\n  const { hasMaxAttachments } = useComposerAttachmentsContext();\n  const $ = useOverrides(overrides);\n\n  const [isDraggingOver, dropAreaProps] = useComposerAttachmentsDropArea({\n    disabled: disabled || hasMaxAttachments,\n  });\n\n  useLayoutEffect(() => {\n    onEmptyChange(isEmpty);\n  }, [isEmpty, onEmptyChange]);\n\n  const preventDefault = useCallback((event: SyntheticEvent) => {\n    event.preventDefault();\n  }, []);\n\n  const stopPropagation = useCallback((event: SyntheticEvent) => {\n    event.stopPropagation();\n  }, []);\n\n  return (\n    <div className=\"lb-composer-editor-container\" {...dropAreaProps}>\n      <ComposerPrimitive.Editor\n        className=\"lb-composer-editor\"\n        onClick={onEditorClick}\n        placeholder={$.COMPOSER_PLACEHOLDER}\n        defaultValue={defaultValue}\n        autoFocus={autoFocus}\n        components={editorComponents}\n        disabled={disabled}\n        dir={$.dir}\n      />\n      {showAttachments && <ComposerAttachments overrides={overrides} />}\n      {(!isCollapsed || isDraggingOver) && (\n        <div className=\"lb-composer-footer\">\n          <div className=\"lb-composer-editor-actions\">\n            {hasResolveMentionSuggestions && (\n              <ComposerInsertMentionEditorAction\n                label={$.COMPOSER_INSERT_MENTION}\n                disabled={disabled}\n              />\n            )}\n            <ComposerInsertEmojiEditorAction\n              label={$.COMPOSER_INSERT_EMOJI}\n              onPickerOpenChange={onEmojiPickerOpenChange}\n              disabled={disabled}\n            />\n            {showAttachments && (\n              <ComposerAttachFilesEditorAction\n                label={$.COMPOSER_ATTACH_FILES}\n                disabled={disabled}\n              />\n            )}\n          </div>\n          {showAttribution && <Attribution />}\n          <div className=\"lb-composer-actions\">\n            {actions ?? (\n              <>\n                <ShortcutTooltip\n                  content={$.COMPOSER_SEND}\n                  shortcut={<ShortcutTooltipKey name=\"enter\" />}\n                >\n                  <ComposerPrimitive.Submit asChild>\n                    <Button\n                      onMouseDown={preventDefault}\n                      onClick={stopPropagation}\n                      className=\"lb-composer-action\"\n                      variant=\"primary\"\n                      aria-label={$.COMPOSER_SEND}\n                    >\n                      <SendIcon />\n                    </Button>\n                  </ComposerPrimitive.Submit>\n                </ShortcutTooltip>\n              </>\n            )}\n          </div>\n        </div>\n      )}\n      {showAttachments && isDraggingOver && (\n        <div className=\"lb-composer-attachments-drop-area\">\n          <div className=\"lb-composer-attachments-drop-area-label\">\n            <AttachmentIcon />\n            {$.COMPOSER_ATTACH_FILES}\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n\n/**\n * Displays a composer to create comments.\n *\n * @example\n * <Composer />\n */\nexport const Composer = forwardRef(\n  <M extends BaseMetadata = DM>(\n    {\n      threadId,\n      commentId,\n      metadata,\n      defaultValue,\n      defaultAttachments,\n      onComposerSubmit,\n      collapsed: controlledCollapsed,\n      defaultCollapsed,\n      onCollapsedChange: controlledOnCollapsedChange,\n      overrides,\n      actions,\n      onBlur,\n      className,\n      onFocus,\n      autoFocus,\n      disabled,\n      showAttachments = true,\n      showAttribution,\n      ...props\n    }: ComposerProps<M>,\n    forwardedRef: ForwardedRef<HTMLFormElement>\n  ) => {\n    const client = useClient();\n    const createThread = useCreateThread();\n    const createComment = useCreateComment();\n    const editComment = useEditComment();\n    const hasResolveMentionSuggestions =\n      client[kInternal].resolveMentionSuggestions !== undefined;\n    const isEmptyRef = useRef(true);\n    const isEmojiPickerOpenRef = useRef(false);\n    const $ = useOverrides(overrides);\n    const [isCollapsed, onCollapsedChange] = useControllableState(\n      // If the composer is neither controlled nor uncontrolled, it defaults to controlled as uncollapsed.\n      controlledCollapsed === undefined && defaultCollapsed === undefined\n        ? false\n        : controlledCollapsed,\n      controlledOnCollapsedChange,\n      defaultCollapsed\n    );\n\n    const setEmptyRef = useCallback((isEmpty: boolean) => {\n      isEmptyRef.current = isEmpty;\n    }, []);\n\n    const setEmojiPickerOpenRef = useCallback((isEmojiPickerOpen: boolean) => {\n      isEmojiPickerOpenRef.current = isEmojiPickerOpen;\n    }, []);\n\n    const handleFocus = useCallback(\n      (event: FocusEvent<HTMLFormElement>) => {\n        onFocus?.(event);\n\n        if (event.isDefaultPrevented()) {\n          return;\n        }\n\n        if (isEmptyRef.current) {\n          onCollapsedChange?.(false);\n        }\n      },\n      [onCollapsedChange, onFocus]\n    );\n\n    const handleBlur = useCallback(\n      (event: FocusEvent<HTMLFormElement>) => {\n        onBlur?.(event);\n\n        if (event.isDefaultPrevented()) {\n          return;\n        }\n\n        const isOutside = !event.currentTarget.contains(\n          event.relatedTarget ?? document.activeElement\n        );\n\n        if (isOutside && isEmptyRef.current && !isEmojiPickerOpenRef.current) {\n          onCollapsedChange?.(true);\n        }\n      },\n      [onBlur, onCollapsedChange]\n    );\n\n    const handleEditorClick = useCallback(\n      (event: MouseEvent<HTMLDivElement>) => {\n        event.stopPropagation();\n\n        if (isEmptyRef.current) {\n          onCollapsedChange?.(false);\n        }\n      },\n      [onCollapsedChange]\n    );\n\n    const handleCommentSubmit = useCallback(\n      (comment: ComposerSubmitComment, event: FormEvent<HTMLFormElement>) => {\n        onComposerSubmit?.(comment, event);\n\n        if (event.isDefaultPrevented()) {\n          return;\n        }\n\n        if (commentId && threadId) {\n          editComment({\n            commentId,\n            threadId,\n            body: comment.body,\n            attachments: comment.attachments,\n          });\n        } else if (threadId) {\n          createComment({\n            threadId,\n            body: comment.body,\n            attachments: comment.attachments,\n          });\n        } else {\n          createThread({\n            body: comment.body,\n            metadata: metadata ?? {},\n            attachments: comment.attachments,\n          });\n        }\n      },\n      [\n        commentId,\n        createComment,\n        createThread,\n        editComment,\n        metadata,\n        onComposerSubmit,\n        threadId,\n      ]\n    );\n\n    return (\n      <TooltipProvider>\n        <ComposerPrimitive.Form\n          onComposerSubmit={handleCommentSubmit}\n          className={classNames(\n            \"lb-root lb-composer lb-composer-form\",\n            className\n          )}\n          dir={$.dir}\n          {...props}\n          ref={forwardedRef}\n          data-collapsed={isCollapsed ? \"\" : undefined}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          disabled={disabled}\n          defaultAttachments={defaultAttachments}\n          pasteFilesAsAttachments={showAttachments}\n        >\n          <ComposerEditorContainer\n            defaultValue={defaultValue}\n            actions={actions}\n            overrides={overrides}\n            isCollapsed={isCollapsed}\n            showAttachments={showAttachments}\n            showAttribution={showAttribution}\n            hasResolveMentionSuggestions={hasResolveMentionSuggestions}\n            onEmptyChange={setEmptyRef}\n            onEmojiPickerOpenChange={setEmojiPickerOpenRef}\n            onEditorClick={handleEditorClick}\n            autoFocus={autoFocus}\n            disabled={disabled}\n          />\n        </ComposerPrimitive.Form>\n      </TooltipProvider>\n    );\n  }\n) as <M extends BaseMetadata = DM>(\n  props: ComposerProps<M> & RefAttributes<HTMLFormElement>\n) => JSX.Element;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAsMA;AAA2C;AACzC;AACA;AACA;AACA;AAEF;AACE;AAEA;AACE;AAAqB;AAGvB;AAAoB;AAEhB;AAEA;AACE;AACA;AAAc;AAChB;AACF;AACuB;AAGzB;AACG;AAAiC;AAC/B;AAC6D;AAC/C;AACJ;AACG;AACR;AAEH;AAAsB;AAI/B;AAEA;AAAyC;AACvC;AACA;AACA;AACA;AAEF;AACE;AAEA;AACE;AAAqB;AAGvB;AACE;AAAsB;AAGxB;AACG;AAA2B;AAA0B;AACnD;AAAiC;AAC/B;AAA0B;AACxB;AAC6D;AAC/C;AACJ;AACG;AACR;AAEH;AAAoB;AAMjC;AAEA;AAAyC;AACvC;AACA;AACA;AAEF;AACE;AACE;AAAqB;AAGvB;AACE;AAAsB;AAGxB;AACG;AAAiC;AAC/B;AAAqC;AACnC;AAC6D;AAC/C;AACJ;AACG;AACR;AAEH;AAAyB;AAKpC;AAEA;AACE;AACG;AAAoC;AAElC;AAAK;AAGZ;AAEA;AAAoC;AAEpC;AACE;AACG;AAAwC;AACtC;AAA4C;AAExC;AACM;AACK;AACH;AAEN;AACC;AACU;AAEX;AACC;AACU;AAOxB;AAEA;AACE;AACG;AAAuB;AAAsB;AAIlD;AAWA;AAAgC;AAC9B;AACA;AACA;AAEF;AACE;AAEA;AACE;AAA8B;AAGhC;AACG;AAC0D;AACrD;AACJ;AACe;AACK;AACpB;AAGN;AAEA;AAA6B;AAC3B;AACA;AAEF;AACE;AAEA;AACE;AAAO;AAGT;AACG;AAC2D;AACtD;AAEH;AAAc;AAEX;AACG;AACiB;AAChB;AACA;AACF;AAMZ;AAEA;AAAmD;AACxC;AACW;AAEtB;AAEA;AAAiC;AACb;AAClB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEF;AACE;AACA;AACA;AAEA;AAAuE;AAC/C;AAGxB;AACE;AAAqB;AAGvB;AACE;AAAqB;AAGvB;AACE;AAAsB;AAGxB;AACG;AAAc;AAAmC;AAC/C;AACW;AACD;AACM;AACf;AACA;AACY;AACZ;AACO;AAEY;AAAoB;AAEtC;AAAc;AACZ;AAAc;AAEV;AACU;AACT;AAGH;AACU;AACW;AACpB;AAGC;AACU;AACT;AAKL;AAAc;AAGR;AACY;AACA;AAAwB;AAAQ;AAE1C;AAAgC;AAC9B;AACc;AACJ;AACC;AACF;AACM;AAY3B;AAAc;AACZ;AAAc;AAQzB;AAQO;AAAiB;AAEpB;AACE;AACA;AACA;AACA;AACA;AACA;AACW;AACX;AACmB;AACnB;AACA;AACA;AACA;AACA;AACA;AACA;AACkB;AAClB;AACG;AAIL;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AAAyC;AAInC;AACJ;AACA;AAGF;AACE;AAAqB;AAGvB;AACE;AAA+B;AAGjC;AAAoB;AAEhB;AAEA;AACE;AAAA;AAGF;AACE;AAAyB;AAC3B;AACF;AAC2B;AAG7B;AAAmB;AAEf;AAEA;AACE;AAAA;AAGF;AAAuC;AACL;AAGlC;AACE;AAAwB;AAC1B;AACF;AAC0B;AAG5B;AAA0B;AAEtB;AAEA;AACE;AAAyB;AAC3B;AACF;AACkB;AAGpB;AAA4B;AAExB;AAEA;AACE;AAAA;AAGF;AACE;AAAY;AACV;AACA;AACc;AACO;AACtB;AAED;AAAc;AACZ;AACc;AACO;AACtB;AAED;AAAa;AACG;AACS;AACF;AACtB;AACH;AACF;AACA;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACF;AAGF;AAEK;AACmB;AACP;AACT;AACA;AACF;AACO;AACH;AACC;AAC8B;AAC1B;AACD;AACR;AACA;AACyB;AAExB;AACC;AACA;AACA;AACA;AACA;AACA;AACA;AACe;AACU;AACV;AACf;AACA;AAGN;AAGN;;"}
+{"version":3,"file":"Composer.mjs","sources":["../../src/components/Composer.tsx"],"sourcesContent":["\"use client\";\n\nimport type {\n  BaseMetadata,\n  CommentAttachment,\n  CommentMixedAttachment,\n  DM,\n} from \"@liveblocks/core\";\nimport { kInternal } from \"@liveblocks/core\";\nimport {\n  useClient,\n  useCreateComment,\n  useCreateThread,\n  useEditComment,\n} from \"@liveblocks/react\";\nimport type {\n  ComponentPropsWithoutRef,\n  FocusEvent,\n  FormEvent,\n  ForwardedRef,\n  MouseEvent,\n  ReactNode,\n  RefAttributes,\n  SyntheticEvent,\n} from \"react\";\nimport React, { forwardRef, useCallback, useRef } from \"react\";\n\nimport { useLiveblocksUIConfig } from \"../config\";\nimport { AttachmentIcon } from \"../icons/Attachment\";\nimport { EmojiIcon } from \"../icons/Emoji\";\nimport { MentionIcon } from \"../icons/Mention\";\nimport { SendIcon } from \"../icons/Send\";\nimport type { ComposerOverrides, GlobalOverrides } from \"../overrides\";\nimport { useOverrides } from \"../overrides\";\nimport * as ComposerPrimitive from \"../primitives/Composer\";\nimport {\n  useComposer,\n  useComposerAttachmentsContext,\n} from \"../primitives/Composer/contexts\";\nimport type {\n  ComposerEditorComponents,\n  ComposerEditorLinkProps,\n  ComposerEditorMentionProps,\n  ComposerEditorMentionSuggestionsProps,\n  ComposerEditorProps,\n  ComposerFormProps,\n  ComposerSubmitComment,\n} from \"../primitives/Composer/types\";\nimport { useComposerAttachmentsDropArea } from \"../primitives/Composer/utils\";\nimport { MENTION_CHARACTER } from \"../slate/plugins/mentions\";\nimport { classNames } from \"../utils/class-names\";\nimport { useControllableState } from \"../utils/use-controllable-state\";\nimport { useLayoutEffect } from \"../utils/use-layout-effect\";\nimport { FileAttachment } from \"./internal/Attachment\";\nimport { Attribution } from \"./internal/Attribution\";\nimport { Avatar } from \"./internal/Avatar\";\nimport { Button } from \"./internal/Button\";\nimport type { EmojiPickerProps } from \"./internal/EmojiPicker\";\nimport { EmojiPicker, EmojiPickerTrigger } from \"./internal/EmojiPicker\";\nimport {\n  ShortcutTooltip,\n  ShortcutTooltipKey,\n  Tooltip,\n  TooltipProvider,\n} from \"./internal/Tooltip\";\nimport { User } from \"./internal/User\";\n\ninterface EditorActionProps extends ComponentPropsWithoutRef<\"button\"> {\n  label: string;\n  tooltipLabel?: string;\n}\n\ninterface EmojiEditorActionProps extends EditorActionProps {\n  onPickerOpenChange?: EmojiPickerProps[\"onOpenChange\"];\n}\n\ntype ComposerCreateThreadProps<M extends BaseMetadata> = {\n  threadId?: never;\n  commentId?: never;\n\n  /**\n   * The metadata of the thread to create.\n   */\n  metadata?: M;\n};\n\ntype ComposerCreateCommentProps = {\n  /**\n   * The ID of the thread to reply to.\n   */\n  threadId: string;\n  commentId?: never;\n  metadata?: never;\n};\n\ntype ComposerEditCommentProps = {\n  /**\n   * The ID of the thread to edit a comment in.\n   */\n  threadId: string;\n\n  /**\n   * The ID of the comment to edit.\n   */\n  commentId: string;\n  metadata?: never;\n};\n\nexport type ComposerProps<M extends BaseMetadata = DM> = Omit<\n  ComponentPropsWithoutRef<\"form\">,\n  \"defaultValue\"\n> &\n  (\n    | ComposerCreateThreadProps<M>\n    | ComposerCreateCommentProps\n    | ComposerEditCommentProps\n  ) & {\n    /**\n     * The event handler called when the composer is submitted.\n     */\n    onComposerSubmit?: (\n      comment: ComposerSubmitComment,\n      event: FormEvent<HTMLFormElement>\n    ) => Promise<void> | void;\n\n    /**\n     * The composer's initial value.\n     */\n    defaultValue?: ComposerEditorProps[\"defaultValue\"];\n\n    /**\n     * The composer's initial attachments.\n     */\n    defaultAttachments?: CommentAttachment[];\n\n    /**\n     * Whether the composer is collapsed. Setting a value will make the composer controlled.\n     */\n    collapsed?: boolean;\n\n    /**\n     * The event handler called when the collapsed state of the composer changes.\n     */\n    onCollapsedChange?: (collapsed: boolean) => void;\n\n    /**\n     * Whether the composer is initially collapsed. Setting a value will make the composer uncontrolled.\n     */\n    defaultCollapsed?: boolean;\n\n    /**\n     * Whether to show and allow adding attachments.\n     */\n    showAttachments?: boolean;\n\n    /**\n     * Whether the composer is disabled.\n     */\n    disabled?: ComposerFormProps[\"disabled\"];\n\n    /**\n     * Whether to focus the composer on mount.\n     */\n    autoFocus?: ComposerEditorProps[\"autoFocus\"];\n\n    /**\n     * Override the component's strings.\n     */\n    overrides?: Partial<GlobalOverrides & ComposerOverrides>;\n\n    /**\n     * @internal\n     */\n    actions?: ReactNode;\n\n    /**\n     * @internal\n     */\n    showAttribution?: boolean;\n  };\n\ninterface ComposerEditorContainerProps\n  extends Pick<\n    ComposerProps,\n    | \"defaultValue\"\n    | \"showAttachments\"\n    | \"showAttribution\"\n    | \"overrides\"\n    | \"actions\"\n    | \"autoFocus\"\n    | \"disabled\"\n  > {\n  isCollapsed: boolean | undefined;\n  onEmptyChange: (isEmpty: boolean) => void;\n  hasResolveMentionSuggestions: boolean;\n  onEmojiPickerOpenChange: (isOpen: boolean) => void;\n  onEditorClick: (event: MouseEvent<HTMLDivElement>) => void;\n}\n\nfunction ComposerInsertMentionEditorAction({\n  label,\n  tooltipLabel,\n  className,\n  onClick,\n  ...props\n}: EditorActionProps) {\n  const { createMention } = useComposer();\n\n  const preventDefault = useCallback((event: SyntheticEvent) => {\n    event.preventDefault();\n  }, []);\n\n  const handleClick = useCallback(\n    (event: MouseEvent<HTMLButtonElement>) => {\n      onClick?.(event);\n\n      if (!event.isDefaultPrevented()) {\n        event.stopPropagation();\n        createMention();\n      }\n    },\n    [createMention, onClick]\n  );\n\n  return (\n    <Tooltip content={tooltipLabel ?? label}>\n      <Button\n        className={classNames(\"lb-composer-editor-action\", className)}\n        onMouseDown={preventDefault}\n        onClick={handleClick}\n        aria-label={label}\n        {...props}\n      >\n        <MentionIcon className=\"lb-button-icon\" />\n      </Button>\n    </Tooltip>\n  );\n}\n\nfunction ComposerInsertEmojiEditorAction({\n  label,\n  tooltipLabel,\n  onPickerOpenChange,\n  className,\n  ...props\n}: EmojiEditorActionProps) {\n  const { insertText } = useComposer();\n\n  const preventDefault = useCallback((event: SyntheticEvent) => {\n    event.preventDefault();\n  }, []);\n\n  const stopPropagation = useCallback((event: SyntheticEvent) => {\n    event.stopPropagation();\n  }, []);\n\n  return (\n    <EmojiPicker onEmojiSelect={insertText} onOpenChange={onPickerOpenChange}>\n      <Tooltip content={tooltipLabel ?? label}>\n        <EmojiPickerTrigger asChild>\n          <Button\n            className={classNames(\"lb-composer-editor-action\", className)}\n            onMouseDown={preventDefault}\n            onClick={stopPropagation}\n            aria-label={label}\n            {...props}\n          >\n            <EmojiIcon className=\"lb-button-icon\" />\n          </Button>\n        </EmojiPickerTrigger>\n      </Tooltip>\n    </EmojiPicker>\n  );\n}\n\nfunction ComposerAttachFilesEditorAction({\n  label,\n  tooltipLabel,\n  className,\n  ...props\n}: EditorActionProps) {\n  const preventDefault = useCallback((event: SyntheticEvent) => {\n    event.preventDefault();\n  }, []);\n\n  const stopPropagation = useCallback((event: SyntheticEvent) => {\n    event.stopPropagation();\n  }, []);\n\n  return (\n    <Tooltip content={tooltipLabel ?? label}>\n      <ComposerPrimitive.AttachFiles asChild>\n        <Button\n          className={classNames(\"lb-composer-editor-action\", className)}\n          onMouseDown={preventDefault}\n          onClick={stopPropagation}\n          aria-label={label}\n          {...props}\n        >\n          <AttachmentIcon className=\"lb-button-icon\" />\n        </Button>\n      </ComposerPrimitive.AttachFiles>\n    </Tooltip>\n  );\n}\n\nfunction ComposerMention({ userId }: ComposerEditorMentionProps) {\n  return (\n    <ComposerPrimitive.Mention className=\"lb-composer-mention\">\n      {MENTION_CHARACTER}\n      <User userId={userId} />\n    </ComposerPrimitive.Mention>\n  );\n}\n\nfunction ComposerMentionSuggestions({\n  userIds,\n}: ComposerEditorMentionSuggestionsProps) {\n  return userIds.length > 0 ? (\n    <ComposerPrimitive.Suggestions className=\"lb-root lb-portal lb-elevation lb-composer-suggestions lb-composer-mention-suggestions\">\n      <ComposerPrimitive.SuggestionsList className=\"lb-composer-suggestions-list lb-composer-mention-suggestions-list\">\n        {userIds.map((userId) => (\n          <ComposerPrimitive.SuggestionsListItem\n            key={userId}\n            className=\"lb-composer-suggestions-list-item lb-composer-mention-suggestion\"\n            value={userId}\n          >\n            <Avatar\n              userId={userId}\n              className=\"lb-composer-mention-suggestion-avatar\"\n            />\n            <User\n              userId={userId}\n              className=\"lb-composer-mention-suggestion-user\"\n            />\n          </ComposerPrimitive.SuggestionsListItem>\n        ))}\n      </ComposerPrimitive.SuggestionsList>\n    </ComposerPrimitive.Suggestions>\n  ) : null;\n}\n\nfunction ComposerLink({ href, children }: ComposerEditorLinkProps) {\n  return (\n    <ComposerPrimitive.Link href={href} className=\"lb-composer-link\">\n      {children}\n    </ComposerPrimitive.Link>\n  );\n}\n\ninterface ComposerAttachmentsProps extends ComponentPropsWithoutRef<\"div\"> {\n  overrides?: Partial<GlobalOverrides & ComposerOverrides>;\n}\n\ninterface ComposerFileAttachmentProps extends ComponentPropsWithoutRef<\"div\"> {\n  attachment: CommentMixedAttachment;\n  overrides?: Partial<GlobalOverrides & ComposerOverrides>;\n}\n\nfunction ComposerFileAttachment({\n  attachment,\n  className,\n  overrides,\n  ...props\n}: ComposerFileAttachmentProps) {\n  const { removeAttachment } = useComposer();\n\n  const handleDeleteClick = useCallback(() => {\n    removeAttachment(attachment.id);\n  }, [attachment.id, removeAttachment]);\n\n  return (\n    <FileAttachment\n      className={classNames(\"lb-composer-attachment\", className)}\n      {...props}\n      attachment={attachment}\n      onDeleteClick={handleDeleteClick}\n      preventFocusOnDelete\n      overrides={overrides}\n    />\n  );\n}\n\nfunction ComposerAttachments({\n  overrides,\n  className,\n  ...props\n}: ComposerAttachmentsProps) {\n  const { attachments } = useComposer();\n\n  if (attachments.length === 0) {\n    return null;\n  }\n\n  return (\n    <div\n      className={classNames(\"lb-composer-attachments\", className)}\n      {...props}\n    >\n      <div className=\"lb-attachments\">\n        {attachments.map((attachment) => {\n          return (\n            <ComposerFileAttachment\n              key={attachment.id}\n              attachment={attachment}\n              overrides={overrides}\n            />\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n\nconst editorComponents: ComposerEditorComponents = {\n  Mention: ComposerMention,\n  MentionSuggestions: ComposerMentionSuggestions,\n  Link: ComposerLink,\n};\n\nfunction ComposerEditorContainer({\n  showAttachments = true,\n  showAttribution,\n  defaultValue,\n  isCollapsed,\n  overrides,\n  actions,\n  autoFocus,\n  disabled,\n  hasResolveMentionSuggestions,\n  onEmojiPickerOpenChange,\n  onEmptyChange,\n  onEditorClick,\n}: ComposerEditorContainerProps) {\n  const { isEmpty } = useComposer();\n  const { hasMaxAttachments } = useComposerAttachmentsContext();\n  const $ = useOverrides(overrides);\n\n  const [isDraggingOver, dropAreaProps] = useComposerAttachmentsDropArea({\n    disabled: disabled || hasMaxAttachments,\n  });\n\n  useLayoutEffect(() => {\n    onEmptyChange(isEmpty);\n  }, [isEmpty, onEmptyChange]);\n\n  const preventDefault = useCallback((event: SyntheticEvent) => {\n    event.preventDefault();\n  }, []);\n\n  const stopPropagation = useCallback((event: SyntheticEvent) => {\n    event.stopPropagation();\n  }, []);\n\n  return (\n    <div className=\"lb-composer-editor-container\" {...dropAreaProps}>\n      <ComposerPrimitive.Editor\n        className=\"lb-composer-editor\"\n        onClick={onEditorClick}\n        placeholder={$.COMPOSER_PLACEHOLDER}\n        defaultValue={defaultValue}\n        autoFocus={autoFocus}\n        components={editorComponents}\n        disabled={disabled}\n        dir={$.dir}\n      />\n      {showAttachments && <ComposerAttachments overrides={overrides} />}\n      {(!isCollapsed || isDraggingOver) && (\n        <div className=\"lb-composer-footer\">\n          <div className=\"lb-composer-editor-actions\">\n            {hasResolveMentionSuggestions && (\n              <ComposerInsertMentionEditorAction\n                label={$.COMPOSER_INSERT_MENTION}\n                disabled={disabled}\n              />\n            )}\n            <ComposerInsertEmojiEditorAction\n              label={$.COMPOSER_INSERT_EMOJI}\n              onPickerOpenChange={onEmojiPickerOpenChange}\n              disabled={disabled}\n            />\n            {showAttachments && (\n              <ComposerAttachFilesEditorAction\n                label={$.COMPOSER_ATTACH_FILES}\n                disabled={disabled}\n              />\n            )}\n          </div>\n          {showAttribution && <Attribution />}\n          <div className=\"lb-composer-actions\">\n            {actions ?? (\n              <>\n                <ShortcutTooltip\n                  content={$.COMPOSER_SEND}\n                  shortcut={<ShortcutTooltipKey name=\"enter\" />}\n                >\n                  <ComposerPrimitive.Submit asChild>\n                    <Button\n                      onMouseDown={preventDefault}\n                      onClick={stopPropagation}\n                      className=\"lb-composer-action\"\n                      variant=\"primary\"\n                      aria-label={$.COMPOSER_SEND}\n                    >\n                      <SendIcon />\n                    </Button>\n                  </ComposerPrimitive.Submit>\n                </ShortcutTooltip>\n              </>\n            )}\n          </div>\n        </div>\n      )}\n      {showAttachments && isDraggingOver && (\n        <div className=\"lb-composer-attachments-drop-area\">\n          <div className=\"lb-composer-attachments-drop-area-label\">\n            <AttachmentIcon />\n            {$.COMPOSER_ATTACH_FILES}\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n\n/**\n * Displays a composer to create comments.\n *\n * @example\n * <Composer />\n */\nexport const Composer = forwardRef(\n  <M extends BaseMetadata = DM>(\n    {\n      threadId,\n      commentId,\n      metadata,\n      defaultValue,\n      defaultAttachments,\n      onComposerSubmit,\n      collapsed: controlledCollapsed,\n      defaultCollapsed,\n      onCollapsedChange: controlledOnCollapsedChange,\n      overrides,\n      actions,\n      onBlur,\n      className,\n      onFocus,\n      autoFocus,\n      disabled,\n      showAttachments = true,\n      showAttribution,\n      ...props\n    }: ComposerProps<M>,\n    forwardedRef: ForwardedRef<HTMLFormElement>\n  ) => {\n    const client = useClient();\n    const createThread = useCreateThread();\n    const createComment = useCreateComment();\n    const editComment = useEditComment();\n    const { preventUnsavedComposerChanges } = useLiveblocksUIConfig();\n    const hasResolveMentionSuggestions =\n      client[kInternal].resolveMentionSuggestions !== undefined;\n    const isEmptyRef = useRef(true);\n    const isEmojiPickerOpenRef = useRef(false);\n    const $ = useOverrides(overrides);\n    const [isCollapsed, onCollapsedChange] = useControllableState(\n      // If the composer is neither controlled nor uncontrolled, it defaults to controlled as uncollapsed.\n      controlledCollapsed === undefined && defaultCollapsed === undefined\n        ? false\n        : controlledCollapsed,\n      controlledOnCollapsedChange,\n      defaultCollapsed\n    );\n\n    const setEmptyRef = useCallback((isEmpty: boolean) => {\n      isEmptyRef.current = isEmpty;\n    }, []);\n\n    const setEmojiPickerOpenRef = useCallback((isEmojiPickerOpen: boolean) => {\n      isEmojiPickerOpenRef.current = isEmojiPickerOpen;\n    }, []);\n\n    const handleFocus = useCallback(\n      (event: FocusEvent<HTMLFormElement>) => {\n        onFocus?.(event);\n\n        if (event.isDefaultPrevented()) {\n          return;\n        }\n\n        if (isEmptyRef.current) {\n          onCollapsedChange?.(false);\n        }\n      },\n      [onCollapsedChange, onFocus]\n    );\n\n    const handleBlur = useCallback(\n      (event: FocusEvent<HTMLFormElement>) => {\n        onBlur?.(event);\n\n        if (event.isDefaultPrevented()) {\n          return;\n        }\n\n        const isOutside = !event.currentTarget.contains(\n          event.relatedTarget ?? document.activeElement\n        );\n\n        if (isOutside && isEmptyRef.current && !isEmojiPickerOpenRef.current) {\n          onCollapsedChange?.(true);\n        }\n      },\n      [onBlur, onCollapsedChange]\n    );\n\n    const handleEditorClick = useCallback(\n      (event: MouseEvent<HTMLDivElement>) => {\n        event.stopPropagation();\n\n        if (isEmptyRef.current) {\n          onCollapsedChange?.(false);\n        }\n      },\n      [onCollapsedChange]\n    );\n\n    const handleCommentSubmit = useCallback(\n      (comment: ComposerSubmitComment, event: FormEvent<HTMLFormElement>) => {\n        onComposerSubmit?.(comment, event);\n\n        if (event.isDefaultPrevented()) {\n          return;\n        }\n\n        if (commentId && threadId) {\n          editComment({\n            commentId,\n            threadId,\n            body: comment.body,\n            attachments: comment.attachments,\n          });\n        } else if (threadId) {\n          createComment({\n            threadId,\n            body: comment.body,\n            attachments: comment.attachments,\n          });\n        } else {\n          createThread({\n            body: comment.body,\n            metadata: metadata ?? {},\n            attachments: comment.attachments,\n          });\n        }\n      },\n      [\n        commentId,\n        createComment,\n        createThread,\n        editComment,\n        metadata,\n        onComposerSubmit,\n        threadId,\n      ]\n    );\n\n    return (\n      <TooltipProvider>\n        <ComposerPrimitive.Form\n          onComposerSubmit={handleCommentSubmit}\n          className={classNames(\n            \"lb-root lb-composer lb-composer-form\",\n            className\n          )}\n          dir={$.dir}\n          {...props}\n          ref={forwardedRef}\n          data-collapsed={isCollapsed ? \"\" : undefined}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          disabled={disabled}\n          defaultAttachments={defaultAttachments}\n          pasteFilesAsAttachments={showAttachments}\n          preventUnsavedChanges={preventUnsavedComposerChanges}\n        >\n          <ComposerEditorContainer\n            defaultValue={defaultValue}\n            actions={actions}\n            overrides={overrides}\n            isCollapsed={isCollapsed}\n            showAttachments={showAttachments}\n            showAttribution={showAttribution}\n            hasResolveMentionSuggestions={hasResolveMentionSuggestions}\n            onEmptyChange={setEmptyRef}\n            onEmojiPickerOpenChange={setEmojiPickerOpenRef}\n            onEditorClick={handleEditorClick}\n            autoFocus={autoFocus}\n            disabled={disabled}\n          />\n        </ComposerPrimitive.Form>\n      </TooltipProvider>\n    );\n  }\n) as <M extends BaseMetadata = DM>(\n  props: ComposerProps<M> & RefAttributes<HTMLFormElement>\n) => JSX.Element;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAuMA;AAA2C;AACzC;AACA;AACA;AACA;AAEF;AACE;AAEA;AACE;AAAqB;AAGvB;AAAoB;AAEhB;AAEA;AACE;AACA;AAAc;AAChB;AACF;AACuB;AAGzB;AACG;AAAiC;AAC/B;AAC6D;AAC/C;AACJ;AACG;AACR;AAEH;AAAsB;AAI/B;AAEA;AAAyC;AACvC;AACA;AACA;AACA;AAEF;AACE;AAEA;AACE;AAAqB;AAGvB;AACE;AAAsB;AAGxB;AACG;AAA2B;AAA0B;AACnD;AAAiC;AAC/B;AAA0B;AACxB;AAC6D;AAC/C;AACJ;AACG;AACR;AAEH;AAAoB;AAMjC;AAEA;AAAyC;AACvC;AACA;AACA;AAEF;AACE;AACE;AAAqB;AAGvB;AACE;AAAsB;AAGxB;AACG;AAAiC;AAC/B;AAAqC;AACnC;AAC6D;AAC/C;AACJ;AACG;AACR;AAEH;AAAyB;AAKpC;AAEA;AACE;AACG;AAAoC;AAElC;AAAK;AAGZ;AAEA;AAAoC;AAEpC;AACE;AACG;AAAwC;AACtC;AAA4C;AAExC;AACM;AACK;AACH;AAEN;AACC;AACU;AAEX;AACC;AACU;AAOxB;AAEA;AACE;AACG;AAAuB;AAAsB;AAIlD;AAWA;AAAgC;AAC9B;AACA;AACA;AAEF;AACE;AAEA;AACE;AAA8B;AAGhC;AACG;AAC0D;AACrD;AACJ;AACe;AACK;AACpB;AAGN;AAEA;AAA6B;AAC3B;AACA;AAEF;AACE;AAEA;AACE;AAAO;AAGT;AACG;AAC2D;AACtD;AAEH;AAAc;AAEX;AACG;AACiB;AAChB;AACA;AACF;AAMZ;AAEA;AAAmD;AACxC;AACW;AAEtB;AAEA;AAAiC;AACb;AAClB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEF;AACE;AACA;AACA;AAEA;AAAuE;AAC/C;AAGxB;AACE;AAAqB;AAGvB;AACE;AAAqB;AAGvB;AACE;AAAsB;AAGxB;AACG;AAAc;AAAmC;AAC/C;AACW;AACD;AACM;AACf;AACA;AACY;AACZ;AACO;AAEY;AAAoB;AAEtC;AAAc;AACZ;AAAc;AAEV;AACU;AACT;AAGH;AACU;AACW;AACpB;AAGC;AACU;AACT;AAKL;AAAc;AAGR;AACY;AACA;AAAwB;AAAQ;AAE1C;AAAgC;AAC9B;AACc;AACJ;AACC;AACF;AACM;AAY3B;AAAc;AACZ;AAAc;AAQzB;AAQO;AAAiB;AAEpB;AACE;AACA;AACA;AACA;AACA;AACA;AACW;AACX;AACmB;AACnB;AACA;AACA;AACA;AACA;AACA;AACA;AACkB;AAClB;AACG;AAIL;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AAAyC;AAInC;AACJ;AACA;AAGF;AACE;AAAqB;AAGvB;AACE;AAA+B;AAGjC;AAAoB;AAEhB;AAEA;AACE;AAAA;AAGF;AACE;AAAyB;AAC3B;AACF;AAC2B;AAG7B;AAAmB;AAEf;AAEA;AACE;AAAA;AAGF;AAAuC;AACL;AAGlC;AACE;AAAwB;AAC1B;AACF;AAC0B;AAG5B;AAA0B;AAEtB;AAEA;AACE;AAAyB;AAC3B;AACF;AACkB;AAGpB;AAA4B;AAExB;AAEA;AACE;AAAA;AAGF;AACE;AAAY;AACV;AACA;AACc;AACO;AACtB;AAED;AAAc;AACZ;AACc;AACO;AACtB;AAED;AAAa;AACG;AACS;AACF;AACtB;AACH;AACF;AACA;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACF;AAGF;AAEK;AACmB;AACP;AACT;AACA;AACF;AACO;AACH;AACC;AAC8B;AAC1B;AACD;AACR;AACA;AACyB;AACF;AAEtB;AACC;AACA;AACA;AACA;AACA;AACA;AACA;AACe;AACU;AACV;AACf;AACA;AAGN;AAGN;;"}

package/dist/config.js

@@ -13,11 +13,12 @@ function LiveblocksUIConfig({
   overrides: overrides$1,
   components: components$1,
   portalContainer,
+  preventUnsavedComposerChanges = true,
   children
 }) {
   const liveblocksUIConfig = React.useMemo(
-    () => ({ portalContainer }),
-    [portalContainer]
+    () => ({ portalContainer, preventUnsavedComposerChanges }),
+    [portalContainer, preventUnsavedComposerChanges]
   );
   return /* @__PURE__ */ React.createElement(LiveblocksUIConfigContext.Provider, {
     value: liveblocksUIConfig

package/dist/config.js.map

@@ -1 +1 @@
-{"version":3,"file":"config.js","sources":["../src/config.tsx"],"sourcesContent":["\"use client\";\n\nimport type { PropsWithChildren } from \"react\";\nimport React, { createContext, useContext, useMemo } from \"react\";\n\nimport { type Components, ComponentsProvider } from \"./components\";\nimport type { Overrides } from \"./overrides\";\nimport { OverridesProvider } from \"./overrides\";\n\ntype LiveblocksUIConfigProps = PropsWithChildren<{\n  /**\n   * Override the components' strings.\n   */\n  overrides?: Partial<Overrides>;\n\n  /**\n   * Override the components' components.\n   */\n  components?: Partial<Components>;\n\n  /**\n   * The container to render the portal into.\n   */\n  portalContainer?: HTMLElement;\n}>;\n\ninterface LiveblocksUIConfigContext {\n  portalContainer?: HTMLElement;\n}\n\nconst LiveblocksUIConfigContext = createContext<LiveblocksUIConfigContext>({});\n\nexport function useLiveblocksUIConfig() {\n  return useContext(LiveblocksUIConfigContext);\n}\n\n/**\n * Set configuration options for all components.\n *\n * @example\n * <LiveblocksUIConfig overrides={{ locale: \"fr\", USER_UNKNOWN: \"Anonyme\", ... }}>\n *   <App />\n * </LiveblocksUIConfig>\n */\nexport function LiveblocksUIConfig({\n  overrides,\n  components,\n  portalContainer,\n  children,\n}: LiveblocksUIConfigProps) {\n  const liveblocksUIConfig = useMemo(\n    () => ({ portalContainer }),\n    [portalContainer]\n  );\n\n  return (\n    <LiveblocksUIConfigContext.Provider value={liveblocksUIConfig}>\n      <OverridesProvider overrides={overrides}>\n        <ComponentsProvider components={components}>\n          {children}\n        </ComponentsProvider>\n      </OverridesProvider>\n    </LiveblocksUIConfigContext.Provider>\n  );\n}\n"],"names":[],"mappings":";;;;;;;AA8BA;AAEO;AACL;AACF;AAUO;AAA4B;AACjC;AACA;AACA;AAEF;AACE;AAA2B;AACA;AACT;AAGlB;AACG;AAA0C;AACxC;AAAkB;AAChB;AAAmB;AAM5B;;;"}
+{"version":3,"file":"config.js","sources":["../src/config.tsx"],"sourcesContent":["\"use client\";\n\nimport type { PropsWithChildren } from \"react\";\nimport React, { createContext, useContext, useMemo } from \"react\";\n\nimport { type Components, ComponentsProvider } from \"./components\";\nimport type { Overrides } from \"./overrides\";\nimport { OverridesProvider } from \"./overrides\";\n\ntype LiveblocksUIConfigProps = PropsWithChildren<{\n  /**\n   * Override the components' strings.\n   */\n  overrides?: Partial<Overrides>;\n\n  /**\n   * Override the components' components.\n   */\n  components?: Partial<Components>;\n\n  /**\n   * The container to render the portal into.\n   */\n  portalContainer?: HTMLElement;\n\n  /**\n   * When `preventUnsavedChanges` is set on your Liveblocks client (or set on\n   * <LiveblocksProvider>), then closing a browser tab will be prevented when\n   * there are unsaved changes.\n   *\n   * By default, that will include draft texts or attachments that are (being)\n   * uploaded via comments/threads composers, but not submitted yet.\n   *\n   * If you want to prevent unsaved changes with Liveblocks, but not for\n   * composers, you can opt-out by setting this option to `false`.\n   */\n  preventUnsavedComposerChanges?: boolean;\n}>;\n\ninterface LiveblocksUIConfigContext {\n  portalContainer?: HTMLElement;\n  preventUnsavedComposerChanges?: boolean;\n}\n\nconst LiveblocksUIConfigContext = createContext<LiveblocksUIConfigContext>({});\n\nexport function useLiveblocksUIConfig() {\n  return useContext(LiveblocksUIConfigContext);\n}\n\n/**\n * Set configuration options for all components.\n *\n * @example\n * <LiveblocksUIConfig overrides={{ locale: \"fr\", USER_UNKNOWN: \"Anonyme\", ... }}>\n *   <App />\n * </LiveblocksUIConfig>\n */\nexport function LiveblocksUIConfig({\n  overrides,\n  components,\n  portalContainer,\n  preventUnsavedComposerChanges = true,\n  children,\n}: LiveblocksUIConfigProps) {\n  const liveblocksUIConfig = useMemo(\n    () => ({ portalContainer, preventUnsavedComposerChanges }),\n    [portalContainer, preventUnsavedComposerChanges]\n  );\n\n  return (\n    <LiveblocksUIConfigContext.Provider value={liveblocksUIConfig}>\n      <OverridesProvider overrides={overrides}>\n        <ComponentsProvider components={components}>\n          {children}\n        </ComponentsProvider>\n      </OverridesProvider>\n    </LiveblocksUIConfigContext.Provider>\n  );\n}\n"],"names":[],"mappings":";;;;;;;AA4CA;AAEO;AACL;AACF;AAUO;AAA4B;AACjC;AACA;AACA;AACgC;AAElC;AACE;AAA2B;AAC+B;AACT;AAGjD;AACG;AAA0C;AACxC;AAAkB;AAChB;AAAmB;AAM5B;;;"}

package/dist/config.mjs

@@ -11,11 +11,12 @@ function LiveblocksUIConfig({
   overrides,
   components,
   portalContainer,
+  preventUnsavedComposerChanges = true,
   children
 }) {
   const liveblocksUIConfig = useMemo(
-    () => ({ portalContainer }),
-    [portalContainer]
+    () => ({ portalContainer, preventUnsavedComposerChanges }),
+    [portalContainer, preventUnsavedComposerChanges]
   );
   return /* @__PURE__ */ React__default.createElement(LiveblocksUIConfigContext.Provider, {
     value: liveblocksUIConfig

package/dist/config.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"config.mjs","sources":["../src/config.tsx"],"sourcesContent":["\"use client\";\n\nimport type { PropsWithChildren } from \"react\";\nimport React, { createContext, useContext, useMemo } from \"react\";\n\nimport { type Components, ComponentsProvider } from \"./components\";\nimport type { Overrides } from \"./overrides\";\nimport { OverridesProvider } from \"./overrides\";\n\ntype LiveblocksUIConfigProps = PropsWithChildren<{\n  /**\n   * Override the components' strings.\n   */\n  overrides?: Partial<Overrides>;\n\n  /**\n   * Override the components' components.\n   */\n  components?: Partial<Components>;\n\n  /**\n   * The container to render the portal into.\n   */\n  portalContainer?: HTMLElement;\n}>;\n\ninterface LiveblocksUIConfigContext {\n  portalContainer?: HTMLElement;\n}\n\nconst LiveblocksUIConfigContext = createContext<LiveblocksUIConfigContext>({});\n\nexport function useLiveblocksUIConfig() {\n  return useContext(LiveblocksUIConfigContext);\n}\n\n/**\n * Set configuration options for all components.\n *\n * @example\n * <LiveblocksUIConfig overrides={{ locale: \"fr\", USER_UNKNOWN: \"Anonyme\", ... }}>\n *   <App />\n * </LiveblocksUIConfig>\n */\nexport function LiveblocksUIConfig({\n  overrides,\n  components,\n  portalContainer,\n  children,\n}: LiveblocksUIConfigProps) {\n  const liveblocksUIConfig = useMemo(\n    () => ({ portalContainer }),\n    [portalContainer]\n  );\n\n  return (\n    <LiveblocksUIConfigContext.Provider value={liveblocksUIConfig}>\n      <OverridesProvider overrides={overrides}>\n        <ComponentsProvider components={components}>\n          {children}\n        </ComponentsProvider>\n      </OverridesProvider>\n    </LiveblocksUIConfigContext.Provider>\n  );\n}\n"],"names":[],"mappings":";;;;;AA8BA;AAEO;AACL;AACF;AAUO;AAA4B;AACjC;AACA;AACA;AAEF;AACE;AAA2B;AACA;AACT;AAGlB;AACG;AAA0C;AACxC;AAAkB;AAChB;AAAmB;AAM5B;;"}
+{"version":3,"file":"config.mjs","sources":["../src/config.tsx"],"sourcesContent":["\"use client\";\n\nimport type { PropsWithChildren } from \"react\";\nimport React, { createContext, useContext, useMemo } from \"react\";\n\nimport { type Components, ComponentsProvider } from \"./components\";\nimport type { Overrides } from \"./overrides\";\nimport { OverridesProvider } from \"./overrides\";\n\ntype LiveblocksUIConfigProps = PropsWithChildren<{\n  /**\n   * Override the components' strings.\n   */\n  overrides?: Partial<Overrides>;\n\n  /**\n   * Override the components' components.\n   */\n  components?: Partial<Components>;\n\n  /**\n   * The container to render the portal into.\n   */\n  portalContainer?: HTMLElement;\n\n  /**\n   * When `preventUnsavedChanges` is set on your Liveblocks client (or set on\n   * <LiveblocksProvider>), then closing a browser tab will be prevented when\n   * there are unsaved changes.\n   *\n   * By default, that will include draft texts or attachments that are (being)\n   * uploaded via comments/threads composers, but not submitted yet.\n   *\n   * If you want to prevent unsaved changes with Liveblocks, but not for\n   * composers, you can opt-out by setting this option to `false`.\n   */\n  preventUnsavedComposerChanges?: boolean;\n}>;\n\ninterface LiveblocksUIConfigContext {\n  portalContainer?: HTMLElement;\n  preventUnsavedComposerChanges?: boolean;\n}\n\nconst LiveblocksUIConfigContext = createContext<LiveblocksUIConfigContext>({});\n\nexport function useLiveblocksUIConfig() {\n  return useContext(LiveblocksUIConfigContext);\n}\n\n/**\n * Set configuration options for all components.\n *\n * @example\n * <LiveblocksUIConfig overrides={{ locale: \"fr\", USER_UNKNOWN: \"Anonyme\", ... }}>\n *   <App />\n * </LiveblocksUIConfig>\n */\nexport function LiveblocksUIConfig({\n  overrides,\n  components,\n  portalContainer,\n  preventUnsavedComposerChanges = true,\n  children,\n}: LiveblocksUIConfigProps) {\n  const liveblocksUIConfig = useMemo(\n    () => ({ portalContainer, preventUnsavedComposerChanges }),\n    [portalContainer, preventUnsavedComposerChanges]\n  );\n\n  return (\n    <LiveblocksUIConfigContext.Provider value={liveblocksUIConfig}>\n      <OverridesProvider overrides={overrides}>\n        <ComponentsProvider components={components}>\n          {children}\n        </ComponentsProvider>\n      </OverridesProvider>\n    </LiveblocksUIConfigContext.Provider>\n  );\n}\n"],"names":[],"mappings":";;;;;AA4CA;AAEO;AACL;AACF;AAUO;AAA4B;AACjC;AACA;AACA;AACgC;AAElC;AACE;AAA2B;AAC+B;AACT;AAGjD;AACG;AAA0C;AACxC;AAAkB;AAChB;AAAmB;AAM5B;;"}

package/dist/index.d.mts

@@ -236,6 +236,19 @@ interface ComposerFormProps extends ComponentPropsWithSlot<"form"> {
      * Whether to create attachments when pasting files into the editor.
      */
     pasteFilesAsAttachments?: boolean;
+    /**
+     * When `preventUnsavedChanges` is set on your Liveblocks client (or set on
+     * <LiveblocksProvider>), then closing a browser tab will be prevented when
+     * there are unsaved changes.
+     *
+     * By default, that will include draft texts or attachments that are (being)
+     * uploaded via this composer, but not submitted yet.
+     *
+     * If you want to prevent unsaved changes with Liveblocks, but not for this
+     * composer, you can opt-out this composer instance by setting this prop to
+     * `false`.
+     */
+    preventUnsavedChanges?: boolean;
 }
 interface ComposerSubmitComment {
     /**
@@ -597,6 +610,18 @@ declare type LiveblocksUIConfigProps = PropsWithChildren<{
      * The container to render the portal into.
      */
     portalContainer?: HTMLElement;
+    /**
+     * When `preventUnsavedChanges` is set on your Liveblocks client (or set on
+     * <LiveblocksProvider>), then closing a browser tab will be prevented when
+     * there are unsaved changes.
+     *
+     * By default, that will include draft texts or attachments that are (being)
+     * uploaded via comments/threads composers, but not submitted yet.
+     *
+     * If you want to prevent unsaved changes with Liveblocks, but not for
+     * composers, you can opt-out by setting this option to `false`.
+     */
+    preventUnsavedComposerChanges?: boolean;
 }>;
 /**
  * Set configuration options for all components.
@@ -606,7 +631,7 @@ declare type LiveblocksUIConfigProps = PropsWithChildren<{
  *   <App />
  * </LiveblocksUIConfig>
  */
-declare function LiveblocksUIConfig({ overrides, components, portalContainer, children, }: LiveblocksUIConfigProps): React.JSX.Element;
+declare function LiveblocksUIConfig({ overrides, components, portalContainer, preventUnsavedComposerChanges, children, }: LiveblocksUIConfigProps): React.JSX.Element;
 
 interface TimestampProps extends Omit<ComponentPropsWithSlot<"time">, "children" | "title"> {
     /**

package/dist/index.d.ts

@@ -236,6 +236,19 @@ interface ComposerFormProps extends ComponentPropsWithSlot<"form"> {
      * Whether to create attachments when pasting files into the editor.
      */
     pasteFilesAsAttachments?: boolean;
+    /**
+     * When `preventUnsavedChanges` is set on your Liveblocks client (or set on
+     * <LiveblocksProvider>), then closing a browser tab will be prevented when
+     * there are unsaved changes.
+     *
+     * By default, that will include draft texts or attachments that are (being)
+     * uploaded via this composer, but not submitted yet.
+     *
+     * If you want to prevent unsaved changes with Liveblocks, but not for this
+     * composer, you can opt-out this composer instance by setting this prop to
+     * `false`.
+     */
+    preventUnsavedChanges?: boolean;
 }
 interface ComposerSubmitComment {
     /**
@@ -597,6 +610,18 @@ declare type LiveblocksUIConfigProps = PropsWithChildren<{
      * The container to render the portal into.
      */
     portalContainer?: HTMLElement;
+    /**
+     * When `preventUnsavedChanges` is set on your Liveblocks client (or set on
+     * <LiveblocksProvider>), then closing a browser tab will be prevented when
+     * there are unsaved changes.
+     *
+     * By default, that will include draft texts or attachments that are (being)
+     * uploaded via comments/threads composers, but not submitted yet.
+     *
+     * If you want to prevent unsaved changes with Liveblocks, but not for
+     * composers, you can opt-out by setting this option to `false`.
+     */
+    preventUnsavedComposerChanges?: boolean;
 }>;
 /**
  * Set configuration options for all components.
@@ -606,7 +631,7 @@ declare type LiveblocksUIConfigProps = PropsWithChildren<{
  *   <App />
  * </LiveblocksUIConfig>
  */
-declare function LiveblocksUIConfig({ overrides, components, portalContainer, children, }: LiveblocksUIConfigProps): React.JSX.Element;
+declare function LiveblocksUIConfig({ overrides, components, portalContainer, preventUnsavedComposerChanges, children, }: LiveblocksUIConfigProps): React.JSX.Element;
 
 interface TimestampProps extends Omit<ComponentPropsWithSlot<"time">, "children" | "title"> {
     /**

package/dist/primitives/Composer/index.js

@@ -664,6 +664,7 @@ const ComposerForm = React.forwardRef(
     onComposerSubmit,
     defaultAttachments = [],
     pasteFilesAsAttachments,
+    preventUnsavedChanges = true,
     disabled,
     asChild,
     ...props
@@ -697,6 +698,13 @@ const ComposerForm = React.forwardRef(
     const ref = React.useRef(null);
     const mergedRefs = useRefs.useRefs(forwardedRef, ref);
     const fileInputRef = React.useRef(null);
+    const syncSource = _private.useSyncSource();
+    const isPending = !preventUnsavedChanges ? false : !isEmpty$1 || isUploadingAttachments || attachments.length > 0;
+    React.useEffect(() => {
+      syncSource?.setSyncStatus(
+        isPending ? "has-local-changes" : "synchronized"
+      );
+    }, [syncSource, isPending]);
     const createAttachments = React.useCallback(
       (files) => {
         if (!files.length) {

package/dist/primitives/Composer/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/primitives/Composer/index.tsx"],"sourcesContent":["\"use client\";\n\nimport type {\n  DetectOverflowOptions,\n  UseFloatingOptions,\n} from \"@floating-ui/react-dom\";\nimport {\n  autoUpdate,\n  flip,\n  hide,\n  limitShift,\n  shift,\n  size,\n  useFloating,\n} from \"@floating-ui/react-dom\";\nimport type { CommentAttachment, CommentBody } from \"@liveblocks/core\";\nimport { useRoom } from \"@liveblocks/react\";\nimport { useMentionSuggestions } from \"@liveblocks/react/_private\";\nimport { Slot, Slottable } from \"@radix-ui/react-slot\";\nimport type {\n  AriaAttributes,\n  ChangeEvent,\n  FocusEvent,\n  FormEvent,\n  KeyboardEvent,\n  MouseEvent,\n  PointerEvent,\n  SyntheticEvent,\n} from \"react\";\nimport React, {\n  forwardRef,\n  useCallback,\n  useEffect,\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  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 { FLOATING_ELEMENT_COLLISION_PADDING } from \"../../constants\";\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 { leaveMarkEdge, toggleMark } from \"../../slate/utils/marks\";\nimport type {\n  ComposerBody as ComposerBodyData,\n  ComposerBodyAutoLink,\n  ComposerBodyCustomLink,\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 { useId } from \"../../utils/use-id\";\nimport { useIndex } from \"../../utils/use-index\";\nimport { useInitial } from \"../../utils/use-initial\";\nimport { useLayoutEffect } from \"../../utils/use-layout-effect\";\nimport { useRefs } from \"../../utils/use-refs\";\nimport { toAbsoluteUrl } from \"../Comment/utils\";\nimport {\n  ComposerAttachmentsContext,\n  ComposerContext,\n  ComposerEditorContext,\n  ComposerSuggestionsContext,\n  useComposer,\n  useComposerAttachmentsContext,\n  useComposerEditorContext,\n  useComposerSuggestionsContext,\n} from \"./contexts\";\nimport type {\n  ComposerAttachFilesProps,\n  ComposerAttachmentsDropAreaProps,\n  ComposerEditorComponents,\n  ComposerEditorElementProps,\n  ComposerEditorLinkWrapperProps,\n  ComposerEditorMentionSuggestionsWrapperProps,\n  ComposerEditorMentionWrapperProps,\n  ComposerEditorProps,\n  ComposerFormProps,\n  ComposerLinkProps,\n  ComposerMentionProps,\n  ComposerSubmitProps,\n  ComposerSuggestionsListItemProps,\n  ComposerSuggestionsListProps,\n  ComposerSuggestionsProps,\n  SuggestionsPosition,\n} from \"./types\";\nimport {\n  commentBodyToComposerBody,\n  composerBodyToCommentBody,\n  getPlacementFromPosition,\n  getSideAndAlignFromPlacement,\n  useComposerAttachmentsDropArea,\n  useComposerAttachmentsManager,\n} from \"./utils\";\n\nconst MENTION_SUGGESTIONS_POSITION: SuggestionsPosition = \"top\";\n\nconst COMPOSER_MENTION_NAME = \"ComposerMention\";\nconst COMPOSER_LINK_NAME = \"ComposerLink\";\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_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  onItemSelect,\n  position = MENTION_SUGGESTIONS_POSITION,\n  dir,\n  MentionSuggestions,\n}: ComposerEditorMentionSuggestionsWrapperProps) {\n  const editor = useSlateStatic();\n  const { isFocused } = useComposer();\n  const [content, setContent] = useState<HTMLDivElement | null>(null);\n  const [contentZIndex, setContentZIndex] = useState<string>();\n  const contentRef = useCallback(setContent, [setContent]);\n  const { portalContainer } = useLiveblocksUIConfig();\n  const floatingOptions: UseFloatingOptions = useMemo(() => {\n    const detectOverflowOptions: DetectOverflowOptions = {\n      padding: FLOATING_ELEMENT_COLLISION_PADDING,\n    };\n\n    return {\n      strategy: \"fixed\",\n      placement: getPlacementFromPosition(position, dir),\n      middleware: [\n        flip({ ...detectOverflowOptions, crossAxis: false }),\n        hide(detectOverflowOptions),\n        shift({\n          ...detectOverflowOptions,\n          limiter: limitShift(),\n        }),\n        size({\n          ...detectOverflowOptions,\n          apply({ availableWidth, availableHeight, elements }) {\n            elements.floating.style.setProperty(\n              \"--lb-composer-suggestions-available-width\",\n              `${availableWidth}px`\n            );\n            elements.floating.style.setProperty(\n              \"--lb-composer-suggestions-available-height\",\n              `${availableHeight}px`\n            );\n          },\n        }),\n      ],\n      whileElementsMounted: (...args) => {\n        return autoUpdate(...args, {\n          animationFrame: true,\n        });\n      },\n    };\n  }, [position, dir]);\n  const {\n    refs: { setReference, setFloating },\n    strategy,\n    isPositioned,\n    placement,\n    x,\n    y,\n  } = useFloating(floatingOptions);\n\n  // Copy `z-index` from content to wrapper.\n  // Inspired by https://github.com/radix-ui/primitives/blob/main/packages/react/popper/src/Popper.tsx\n  useLayoutEffect(() => {\n    if (content) {\n      setContentZIndex(window.getComputedStyle(content).zIndex);\n    }\n  }, [content]);\n\n  useLayoutEffect(() => {\n    if (!mentionDraft) {\n      return;\n    }\n\n    const domRange = getDOMRange(editor, mentionDraft.range);\n\n    if (domRange) {\n      setReference({\n        getBoundingClientRect: () => domRange.getBoundingClientRect(),\n        getClientRects: () => domRange.getClientRects(),\n      });\n    }\n  }, [setReference, editor, mentionDraft]);\n\n  return (\n    <Persist>\n      {mentionDraft?.range && isFocused && userIds ? (\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 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    () => getSideAndAlignFromPlacement(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-suggestions-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 { editor, validate, setFocused } = useComposerEditorContext();\n    const {\n      submit,\n      focus,\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 } = useMemo(\n      () => ({ ...defaultEditorComponents, ...components }),\n      [components]\n    );\n\n    const [mentionDraft, setMentionDraft] = useState<MentionDraft>();\n    const mentionSuggestions = useMentionSuggestions(mentionDraft?.text);\n    const [\n      selectedMentionSuggestionIndex,\n      setPreviousSelectedMentionSuggestionIndex,\n      setNextSelectedMentionSuggestionIndex,\n      setSelectedMentionSuggestionIndex,\n    ] = useIndex(0, mentionSuggestions?.length ?? 0);\n    const id = useId();\n    const suggestionsListId = useMemo(\n      () => `liveblocks-suggestions-list-${id}`,\n      [id]\n    );\n    const suggestionsListItemId = useCallback(\n      (userId?: string) =>\n        userId ? `liveblocks-suggestions-list-item-${id}-${userId}` : undefined,\n      [id]\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        setMentionDraft(getMentionDraftAtSelection(editor));\n      },\n      [editor, validate]\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          // Blur the editor on Escape\n          if (isKey(event, \"Escape\")) {\n            event.preventDefault();\n            ReactEditor.blur(editor);\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            toggleMark(editor, \"bold\");\n          }\n\n          // Toggle italic on Command/Control + I\n          if (isKey(event, \"i\", { mod: true })) {\n            event.preventDefault();\n            toggleMark(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            toggleMark(editor, \"strikethrough\");\n          }\n\n          // Toggle code on Command/Control + E\n          if (isKey(event, \"e\", { mod: true })) {\n            event.preventDefault();\n            toggleMark(editor, \"code\");\n          }\n        }\n      },\n      [\n        createMention,\n        editor,\n        canSubmit,\n        mentionDraft,\n        mentionSuggestions,\n        selectedMentionSuggestionIndex,\n        onKeyDown,\n        setNextSelectedMentionSuggestionIndex,\n        setPreviousSelectedMentionSuggestionIndex,\n        setSelectedMentionSuggestionIndex,\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 propsWhileSuggesting: 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          : {},\n      [\n        mentionDraft,\n        suggestionsListId,\n        suggestionsListItemId,\n        selectedMentionSuggestionUserId,\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    useEffect(() => {\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    useEffect(() => {\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          {...propsWhileSuggesting}\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        <ComposerEditorMentionSuggestionsWrapper\n          dir={dir}\n          mentionDraft={mentionDraft}\n          selectedUserId={selectedMentionSuggestionUserId}\n          setSelectedUserId={setSelectedMentionSuggestionUserId}\n          userIds={mentionSuggestions}\n          id={suggestionsListId}\n          itemId={suggestionsListItemId}\n          onItemSelect={createMention}\n          MentionSuggestions={MentionSuggestions}\n        />\n      </Slate>\n    );\n  }\n);\n\nconst MAX_ATTACHMENTS = 10;\nconst MAX_ATTACHMENT_SIZE = 1024 * 1024 * 1024; // 1 GB\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      disabled,\n      asChild,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const Component = asChild ? Slot : \"form\";\n    const room = useRoom();\n    const [isEmpty, setEmpty] = useState(true);\n    const [isSubmitting, setSubmitting] = useState(false);\n    const [isFocused, setFocused] = useState(false);\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    const {\n      attachments,\n      isUploadingAttachments,\n      addAttachments,\n      removeAttachment,\n      clearAttachments,\n    } = useComposerAttachmentsManager(defaultAttachments, {\n      maxFileSize: maxAttachmentSize,\n    });\n    const numberOfAttachments = attachments.length;\n    const hasMaxAttachments = numberOfAttachments >= maxAttachments;\n    const isDisabled = useMemo(() => {\n      const self = room.getSelf();\n      const canComment = self?.canComment ?? true;\n\n      return isSubmitting || disabled || !canComment;\n    }, [isSubmitting, disabled, room]);\n    const canSubmit = useMemo(() => {\n      return !isEmpty && !isUploadingAttachments;\n    }, [isEmpty, isUploadingAttachments]);\n    const ref = useRef<HTMLFormElement>(null);\n    const mergedRefs = useRefs(forwardedRef, ref);\n    const fileInputRef = useRef<HTMLInputElement>(null);\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) => room.prepareAttachment(file));\n\n        addAttachments(attachments);\n      },\n      [addAttachments, maxAttachments, numberOfAttachments, room]\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\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, {\n        anchor: SlateEditor.end(editor, []),\n        focus: SlateEditor.end(editor, []),\n      });\n    }, [editor]);\n\n    const focus = useCallback(\n      (resetSelection = true) => {\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      },\n      [editor]\n    );\n\n    const blur = useCallback(() => {\n      ReactEditor.blur(editor);\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    return (\n      <ComposerEditorContext.Provider\n        value={{\n          editor,\n          validate,\n          setFocused,\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            }}\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\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  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_SUGGESTIONS_NAME;\n  ComposerSuggestionsList.displayName = COMPOSER_SUGGESTIONS_LIST_NAME;\n  ComposerSuggestionsListItem.displayName = COMPOSER_SUGGESTIONS_LIST_ITEM_NAME;\n}\n\n// NOTE: Every export from this file will be available publicly as Composer.*\nexport {\n  ComposerAttachFiles as AttachFiles,\n  ComposerAttachmentsDropArea as AttachmentsDropArea,\n  ComposerEditor as Editor,\n  ComposerForm as Form,\n  ComposerLink as Link,\n  ComposerMention as Mention,\n  ComposerSubmit as Submit,\n  ComposerSuggestions as Suggestions,\n  ComposerSuggestionsList as SuggestionsList,\n  ComposerSuggestionsListItem as SuggestionsListItem,\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwIA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAAsC;AAC3B;AAEX;AAEA;AAA8B;AAC5B;AAEF;AAIE;AAAO;AACL;AACE;AACE;AACE;AACE;AACoD;AAChD;AACA;AACD;AACH;AACF;AACF;AACF;AACF;AAEJ;AAEA;AAAsC;AACpC;AACA;AACA;AAEF;AACE;AAEA;AACG;AAAS;AAEL;AAAwB;AAAI;AAKrC;AAEA;AAAmC;AACjC;AACA;AACA;AAEF;AACE;AAAa;AACiC;AAChC;AAGd;AACG;AAAS;AACP;AAAK;AAGZ;AAEA;AAAiD;AAC/C;AACA;AACA;AACA;AACA;AACA;AACA;AACW;AACX;AAEF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACE;AAAqD;AAC1C;AAGX;AAAO;AACK;AACuC;AACrC;AACyC;AACzB;AACpB;AACD;AACiB;AACrB;AACI;AACA;AAED;AAAwB;AACtB;AACG;AAEL;AAAwB;AACtB;AACG;AACL;AACF;AACD;AACH;AAEE;AAA2B;AACT;AACjB;AACH;AACF;AAEF;AAAM;AAC8B;AAClC;AACA;AACA;AACA;AACA;AAKF;AACE;AACE;AAAwD;AAC1D;AAGF;AACE;AACE;AAAA;AAGF;AAEA;AACE;AAAa;AACiD;AACd;AAC/C;AACH;AAGF;AAGO;AACQ;AACL;AACA;AACe;AACG;AAClB;AACA;AACA;AACK;AACP;AAEC;AACM;AACM;AACJ;AACK;AACL;AACC;AAGF;AACM;AACF;AACV;AAEC;AACC;AACA;AAOd;AAEA;AAA+B;AAC7B;AACA;AAEF;AAEE;AAEA;AAAsB;AAElB;AACG;AACC;AACK;AACP;AAEC;AAEH;AACG;AACC;AACK;AAGP;AAGF;AACG;AAAM;AAA0C;AAEjD;AAGF;AAAO;AAEb;AAGA;AACE;AACE;AAA6B;AAG/B;AACE;AAAyB;AAG3B;AACE;AAAwB;AAG1B;AACE;AAA2B;AAG7B;AAAQ;AAAS;AACnB;AAEA;AAAmC;AACjC;AAEF;AACE;AAEA;AACG;AAAS;AAAY;AAA+B;AAIzD;AAQA;AAAwB;AAEpB;AACA;AAEA;AACG;AAC8B;AACzB;AACC;AAGP;AAGN;AAQA;AAAqB;AAEjB;AAEA;AACG;AACQ;AACH;AACA;AACC;AAGP;AAGN;AAKM;AAIJ;AACA;AACA;AAAM;AACC;AACL;AACA;AAEF;AACA;AAAsB;AACwB;AAClC;AAEZ;AACA;AAEA;AACG;AACC;AACI;AAC6B;AACtB;AACC;AACL;AACI;AACM;AACJ;AACA;AACR;AACL;AACK;AAKX;AAcM;AAIJ;AACA;AAEA;AACG;AACM;AACL;AACW;AACP;AACC;AAKX;AAUA;AAAoC;AAKhC;AACE;AACA;AACA;AACA;AACA;AACA;AACG;AAIL;AACA;AACA;AAEA;AACA;AAAmB;AACO;AACH;AAGvB;AAEA;AACE;AACE;AAA+C;AACjD;AAGF;AAA0B;AAEtB;AAEA;AACE;AAAsB;AACxB;AACF;AACuC;AAGzC;AAA0B;AAEtB;AAEA;AACA;AAAsB;AACxB;AACc;AAGhB;AAAoB;AAEhB;AAEA;AAEA;AACA;AAEA;AACE;AAAkB;AACpB;AACF;AAC6B;AAG/B;AACG;AACM;AACL;AAC6B;AACA;AACd;AACA;AACN;AACL;AACC;AAGP;AAGN;AAEA;AAA0D;AAEtD;AAAQ;AAAa;AAAsB;AAC7C;AAEE;AAIE;AAEJ;AAEE;AAIS;AAAiC;AAAe;AAMrD;AAER;AAQA;AAAuB;AAEnB;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACG;AAIL;AACA;AAAM;AACJ;AACA;AACA;AACA;AACY;AACZ;AAEF;AACA;AACA;AACE;AAA4C;AAE9C;AAA8C;AACO;AACxC;AAGb;AACA;AACA;AAAM;AACJ;AACA;AACA;AACA;AAEF;AACA;AAA0B;AACa;AAClC;AAEL;AAA8B;AAEoC;AAC7D;AAEL;AAAsB;AAElB;AACG;AAAsB;AAAkB;AAAgB;AAAO;AAEpE;AACc;AAGhB;AAAqB;AAEjB;AAEA;AAAkD;AACpD;AACiB;AAGnB;AAAsB;AAElB;AACE;AAAA;AAGF;AACA;AACA;AACA;AAAmC;AACrC;AACwD;AAG1D;AAAsB;AAElB;AAEA;AACE;AAAA;AAIF;AACE;AAA6B;AAI/B;AACE;AAA2B;AAG7B;AAEE;AACE;AACA;AAAsC;AAIxC;AACE;AACA;AAA0C;AAI5C;AACE;AAEA;AACA;AAAoB;AAItB;AACE;AACA;AACA;AAAmC;AACrC;AAGA;AACE;AACA;AAAuB;AAIzB;AAEE;AAEA;AACE;AAAO;AACT;AAIF;AACE;AACA;AAAmB;AAIrB;AACE;AACA;AAAyB;AAI3B;AACE;AACA;AAA2B;AAI7B;AACE;AACA;AAAkC;AAIpC;AACE;AACA;AAAyB;AAC3B;AACF;AACF;AACA;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACF;AAGF;AAAoB;AAEhB;AAEA;AACE;AAAe;AACjB;AACF;AACoB;AAGtB;AAAmB;AAEf;AAEA;AACE;AAAgB;AAClB;AACF;AACmB;AAGrB;AAAwC;AACX;AACwB;AAErD;AAA2C;AAEvC;AAEA;AACE;AAAuC;AACzC;AACF;AACsD;AAGxD;AAA6C;AAGrC;AACQ;AACe;AACJ;AACA;AACQ;AACvB;AACF;AAED;AACP;AACE;AACA;AACA;AACA;AACF;AAGF;AACE;AAA2C;AAI7C;AACE;AACE;AAAM;AACR;AAKF;AACE;AACE;AAAO;AACT;AAGF;AACG;AACC;AACc;AACJ;AAET;AACC;AACuC;AACxB;AACJ;AACgB;AACE;AACzB;AACA;AACM;AACA;AACC;AACF;AACD;AACR;AACY;AACO;AAEpB;AACC;AACA;AACgB;AACG;AACV;AACL;AACI;AACM;AACd;AAEJ;AAGN;AAEA;AACA;AAWA;AAAqB;AAEjB;AACE;AACA;AACA;AACsB;AACtB;AACA;AACA;AACG;AAIL;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AAAM;AACJ;AACA;AACA;AACA;AACA;AACoD;AACvC;AAEf;AACA;AACA;AACE;AACA;AAEA;AAAoC;AAEtC;AACE;AAAoB;AAEtB;AACA;AACA;AAEA;AAA0B;AAEtB;AACE;AAAA;AAGF;AAAmC;AACjC;AACiB;AAGnB;AAEA;AAEA;AAA0B;AAC5B;AAC0D;AAG5D;AAEA;AACE;AAA+B;AAGjC;AACE;AAAkC;AAGpC;AAAe;AACQ;AACA;AACnB;AACD;AAGH;AAAiB;AAEb;AAAqC;AACvC;AACO;AAGT;AACE;AACE;AAAA;AAKF;AACE;AACE;AAAyB;AAC3B;AACD;AAGH;AACE;AAA+B;AACzB;AACkC;AACH;AACnC;AACD;AAGH;AACE;AAA+B;AACK;AACD;AAClC;AAGH;AAAc;AAEV;AACE;AAAgB;AACd;AAGW;AAEb;AAAwB;AAC1B;AACF;AACO;AAGT;AACE;AAAuB;AAGzB;AACE;AACE;AAAA;AAGF;AACA;AAA6B;AAG/B;AAAmB;AAEf;AACE;AAAA;AAGF;AACA;AAA4B;AAC9B;AACwB;AAG1B;AACE;AACE;AAAA;AAGF;AACE;AAA2B;AAC7B;AAGF;AAAqC;AAEjC;AACE;AAAA;AAGF;AACE;AAGA;AAAqB;AACvB;AACF;AAC4B;AAG9B;AACE;AACA;AACA;AACA;AAAmB;AAGrB;AAAqB;AAEjB;AACE;AAAA;AAMF;AAGA;AACE;AAEA;AAAA;AAGF;AAEA;AACE;AAEA;AAAA;AAGF;AAAa;AACJ;AAGT;AACG;AAI2B;AAG1B;AAAO;AACU;AACT;AACe;AACJ;AACA;AACnB;AAGJ;AAAgB;AAC0B;AACxC;AAGF;AAEA;AACE;AACA;AAAwB;AAExB;AAAY;AACd;AACF;AACuE;AAGzE;AACE;AAAsB;AAGxB;AACG;AACQ;AACL;AACA;AACA;AACF;AAEC;AACQ;AACL;AACA;AACA;AACA;AACA;AACF;AAEC;AACQ;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACF;AAEC;AAAc;AAAiB;AAAmB;AAChD;AACM;AACG;AACH;AACK;AACD;AACC;AACe;AAMnC;AAGN;AAQA;AAAuB;AAEnB;AACA;AACA;AAEA;AACG;AACM;AACD;AACC;AACK;AAGZ;AAGN;AAQM;AAIJ;AACA;AACA;AACA;AAEA;AAAoB;AAEhB;AAEA;AACE;AAAY;AACd;AACF;AACqB;AAGvB;AACG;AACM;AACD;AACK;AACJ;AACK;AAKhB;AAUA;AAAoC;AAKhC;AACE;AACA;AACA;AACA;AACA;AACA;AACG;AAIL;AACA;AACA;AACA;AAAyD;AACvD;AACA;AACA;AACA;AACU;AAGZ;AACG;AACK;AAC6B;AAC7B;AACC;AACP;AAGN;AAEA;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACF;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/primitives/Composer/index.tsx"],"sourcesContent":["\"use client\";\n\nimport type {\n  DetectOverflowOptions,\n  UseFloatingOptions,\n} from \"@floating-ui/react-dom\";\nimport {\n  autoUpdate,\n  flip,\n  hide,\n  limitShift,\n  shift,\n  size,\n  useFloating,\n} from \"@floating-ui/react-dom\";\nimport type { CommentAttachment, CommentBody } from \"@liveblocks/core\";\nimport { useRoom } from \"@liveblocks/react\";\nimport {\n  useMentionSuggestions,\n  useSyncSource,\n} from \"@liveblocks/react/_private\";\nimport { Slot, Slottable } from \"@radix-ui/react-slot\";\nimport type {\n  AriaAttributes,\n  ChangeEvent,\n  FocusEvent,\n  FormEvent,\n  KeyboardEvent,\n  MouseEvent,\n  PointerEvent,\n  SyntheticEvent,\n} from \"react\";\nimport React, {\n  forwardRef,\n  useCallback,\n  useEffect,\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  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 { FLOATING_ELEMENT_COLLISION_PADDING } from \"../../constants\";\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 { leaveMarkEdge, toggleMark } from \"../../slate/utils/marks\";\nimport type {\n  ComposerBody as ComposerBodyData,\n  ComposerBodyAutoLink,\n  ComposerBodyCustomLink,\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 { useId } from \"../../utils/use-id\";\nimport { useIndex } from \"../../utils/use-index\";\nimport { useInitial } from \"../../utils/use-initial\";\nimport { useLayoutEffect } from \"../../utils/use-layout-effect\";\nimport { useRefs } from \"../../utils/use-refs\";\nimport { toAbsoluteUrl } from \"../Comment/utils\";\nimport {\n  ComposerAttachmentsContext,\n  ComposerContext,\n  ComposerEditorContext,\n  ComposerSuggestionsContext,\n  useComposer,\n  useComposerAttachmentsContext,\n  useComposerEditorContext,\n  useComposerSuggestionsContext,\n} from \"./contexts\";\nimport type {\n  ComposerAttachFilesProps,\n  ComposerAttachmentsDropAreaProps,\n  ComposerEditorComponents,\n  ComposerEditorElementProps,\n  ComposerEditorLinkWrapperProps,\n  ComposerEditorMentionSuggestionsWrapperProps,\n  ComposerEditorMentionWrapperProps,\n  ComposerEditorProps,\n  ComposerFormProps,\n  ComposerLinkProps,\n  ComposerMentionProps,\n  ComposerSubmitProps,\n  ComposerSuggestionsListItemProps,\n  ComposerSuggestionsListProps,\n  ComposerSuggestionsProps,\n  SuggestionsPosition,\n} from \"./types\";\nimport {\n  commentBodyToComposerBody,\n  composerBodyToCommentBody,\n  getPlacementFromPosition,\n  getSideAndAlignFromPlacement,\n  useComposerAttachmentsDropArea,\n  useComposerAttachmentsManager,\n} from \"./utils\";\n\nconst MENTION_SUGGESTIONS_POSITION: SuggestionsPosition = \"top\";\n\nconst COMPOSER_MENTION_NAME = \"ComposerMention\";\nconst COMPOSER_LINK_NAME = \"ComposerLink\";\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_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  onItemSelect,\n  position = MENTION_SUGGESTIONS_POSITION,\n  dir,\n  MentionSuggestions,\n}: ComposerEditorMentionSuggestionsWrapperProps) {\n  const editor = useSlateStatic();\n  const { isFocused } = useComposer();\n  const [content, setContent] = useState<HTMLDivElement | null>(null);\n  const [contentZIndex, setContentZIndex] = useState<string>();\n  const contentRef = useCallback(setContent, [setContent]);\n  const { portalContainer } = useLiveblocksUIConfig();\n  const floatingOptions: UseFloatingOptions = useMemo(() => {\n    const detectOverflowOptions: DetectOverflowOptions = {\n      padding: FLOATING_ELEMENT_COLLISION_PADDING,\n    };\n\n    return {\n      strategy: \"fixed\",\n      placement: getPlacementFromPosition(position, dir),\n      middleware: [\n        flip({ ...detectOverflowOptions, crossAxis: false }),\n        hide(detectOverflowOptions),\n        shift({\n          ...detectOverflowOptions,\n          limiter: limitShift(),\n        }),\n        size({\n          ...detectOverflowOptions,\n          apply({ availableWidth, availableHeight, elements }) {\n            elements.floating.style.setProperty(\n              \"--lb-composer-suggestions-available-width\",\n              `${availableWidth}px`\n            );\n            elements.floating.style.setProperty(\n              \"--lb-composer-suggestions-available-height\",\n              `${availableHeight}px`\n            );\n          },\n        }),\n      ],\n      whileElementsMounted: (...args) => {\n        return autoUpdate(...args, {\n          animationFrame: true,\n        });\n      },\n    };\n  }, [position, dir]);\n  const {\n    refs: { setReference, setFloating },\n    strategy,\n    isPositioned,\n    placement,\n    x,\n    y,\n  } = useFloating(floatingOptions);\n\n  // Copy `z-index` from content to wrapper.\n  // Inspired by https://github.com/radix-ui/primitives/blob/main/packages/react/popper/src/Popper.tsx\n  useLayoutEffect(() => {\n    if (content) {\n      setContentZIndex(window.getComputedStyle(content).zIndex);\n    }\n  }, [content]);\n\n  useLayoutEffect(() => {\n    if (!mentionDraft) {\n      return;\n    }\n\n    const domRange = getDOMRange(editor, mentionDraft.range);\n\n    if (domRange) {\n      setReference({\n        getBoundingClientRect: () => domRange.getBoundingClientRect(),\n        getClientRects: () => domRange.getClientRects(),\n      });\n    }\n  }, [setReference, editor, mentionDraft]);\n\n  return (\n    <Persist>\n      {mentionDraft?.range && isFocused && userIds ? (\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 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    () => getSideAndAlignFromPlacement(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-suggestions-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 { editor, validate, setFocused } = useComposerEditorContext();\n    const {\n      submit,\n      focus,\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 } = useMemo(\n      () => ({ ...defaultEditorComponents, ...components }),\n      [components]\n    );\n\n    const [mentionDraft, setMentionDraft] = useState<MentionDraft>();\n    const mentionSuggestions = useMentionSuggestions(mentionDraft?.text);\n    const [\n      selectedMentionSuggestionIndex,\n      setPreviousSelectedMentionSuggestionIndex,\n      setNextSelectedMentionSuggestionIndex,\n      setSelectedMentionSuggestionIndex,\n    ] = useIndex(0, mentionSuggestions?.length ?? 0);\n    const id = useId();\n    const suggestionsListId = useMemo(\n      () => `liveblocks-suggestions-list-${id}`,\n      [id]\n    );\n    const suggestionsListItemId = useCallback(\n      (userId?: string) =>\n        userId ? `liveblocks-suggestions-list-item-${id}-${userId}` : undefined,\n      [id]\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        setMentionDraft(getMentionDraftAtSelection(editor));\n      },\n      [editor, validate]\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          // Blur the editor on Escape\n          if (isKey(event, \"Escape\")) {\n            event.preventDefault();\n            ReactEditor.blur(editor);\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            toggleMark(editor, \"bold\");\n          }\n\n          // Toggle italic on Command/Control + I\n          if (isKey(event, \"i\", { mod: true })) {\n            event.preventDefault();\n            toggleMark(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            toggleMark(editor, \"strikethrough\");\n          }\n\n          // Toggle code on Command/Control + E\n          if (isKey(event, \"e\", { mod: true })) {\n            event.preventDefault();\n            toggleMark(editor, \"code\");\n          }\n        }\n      },\n      [\n        createMention,\n        editor,\n        canSubmit,\n        mentionDraft,\n        mentionSuggestions,\n        selectedMentionSuggestionIndex,\n        onKeyDown,\n        setNextSelectedMentionSuggestionIndex,\n        setPreviousSelectedMentionSuggestionIndex,\n        setSelectedMentionSuggestionIndex,\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 propsWhileSuggesting: 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          : {},\n      [\n        mentionDraft,\n        suggestionsListId,\n        suggestionsListItemId,\n        selectedMentionSuggestionUserId,\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    useEffect(() => {\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    useEffect(() => {\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          {...propsWhileSuggesting}\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        <ComposerEditorMentionSuggestionsWrapper\n          dir={dir}\n          mentionDraft={mentionDraft}\n          selectedUserId={selectedMentionSuggestionUserId}\n          setSelectedUserId={setSelectedMentionSuggestionUserId}\n          userIds={mentionSuggestions}\n          id={suggestionsListId}\n          itemId={suggestionsListItemId}\n          onItemSelect={createMention}\n          MentionSuggestions={MentionSuggestions}\n        />\n      </Slate>\n    );\n  }\n);\n\nconst MAX_ATTACHMENTS = 10;\nconst MAX_ATTACHMENT_SIZE = 1024 * 1024 * 1024; // 1 GB\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      ...props\n    },\n    forwardedRef\n  ) => {\n    const Component = asChild ? Slot : \"form\";\n    const room = useRoom();\n    const [isEmpty, setEmpty] = useState(true);\n    const [isSubmitting, setSubmitting] = useState(false);\n    const [isFocused, setFocused] = useState(false);\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    const {\n      attachments,\n      isUploadingAttachments,\n      addAttachments,\n      removeAttachment,\n      clearAttachments,\n    } = useComposerAttachmentsManager(defaultAttachments, {\n      maxFileSize: maxAttachmentSize,\n    });\n    const numberOfAttachments = attachments.length;\n    const hasMaxAttachments = numberOfAttachments >= maxAttachments;\n    const isDisabled = useMemo(() => {\n      const self = room.getSelf();\n      const canComment = self?.canComment ?? true;\n\n      return isSubmitting || disabled || !canComment;\n    }, [isSubmitting, disabled, room]);\n    const canSubmit = useMemo(() => {\n      return !isEmpty && !isUploadingAttachments;\n    }, [isEmpty, isUploadingAttachments]);\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) => room.prepareAttachment(file));\n\n        addAttachments(attachments);\n      },\n      [addAttachments, maxAttachments, numberOfAttachments, room]\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\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, {\n        anchor: SlateEditor.end(editor, []),\n        focus: SlateEditor.end(editor, []),\n      });\n    }, [editor]);\n\n    const focus = useCallback(\n      (resetSelection = true) => {\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      },\n      [editor]\n    );\n\n    const blur = useCallback(() => {\n      ReactEditor.blur(editor);\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    return (\n      <ComposerEditorContext.Provider\n        value={{\n          editor,\n          validate,\n          setFocused,\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            }}\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\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  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_SUGGESTIONS_NAME;\n  ComposerSuggestionsList.displayName = COMPOSER_SUGGESTIONS_LIST_NAME;\n  ComposerSuggestionsListItem.displayName = COMPOSER_SUGGESTIONS_LIST_ITEM_NAME;\n}\n\n// NOTE: Every export from this file will be available publicly as Composer.*\nexport {\n  ComposerAttachFiles as AttachFiles,\n  ComposerAttachmentsDropArea as AttachmentsDropArea,\n  ComposerEditor as Editor,\n  ComposerForm as Form,\n  ComposerLink as Link,\n  ComposerMention as Mention,\n  ComposerSubmit as Submit,\n  ComposerSuggestions as Suggestions,\n  ComposerSuggestionsList as SuggestionsList,\n  ComposerSuggestionsListItem as SuggestionsListItem,\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2IA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAAsC;AAC3B;AAEX;AAEA;AAA8B;AAC5B;AAEF;AAIE;AAAO;AACL;AACE;AACE;AACE;AACE;AACoD;AAChD;AACA;AACD;AACH;AACF;AACF;AACF;AACF;AAEJ;AAEA;AAAsC;AACpC;AACA;AACA;AAEF;AACE;AAEA;AACG;AAAS;AAEL;AAAwB;AAAI;AAKrC;AAEA;AAAmC;AACjC;AACA;AACA;AAEF;AACE;AAAa;AACiC;AAChC;AAGd;AACG;AAAS;AACP;AAAK;AAGZ;AAEA;AAAiD;AAC/C;AACA;AACA;AACA;AACA;AACA;AACA;AACW;AACX;AAEF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACE;AAAqD;AAC1C;AAGX;AAAO;AACK;AACuC;AACrC;AACyC;AACzB;AACpB;AACD;AACiB;AACrB;AACI;AACA;AAED;AAAwB;AACtB;AACG;AAEL;AAAwB;AACtB;AACG;AACL;AACF;AACD;AACH;AAEE;AAA2B;AACT;AACjB;AACH;AACF;AAEF;AAAM;AAC8B;AAClC;AACA;AACA;AACA;AACA;AAKF;AACE;AACE;AAAwD;AAC1D;AAGF;AACE;AACE;AAAA;AAGF;AAEA;AACE;AAAa;AACiD;AACd;AAC/C;AACH;AAGF;AAGO;AACQ;AACL;AACA;AACe;AACG;AAClB;AACA;AACA;AACK;AACP;AAEC;AACM;AACM;AACJ;AACK;AACL;AACC;AAGF;AACM;AACF;AACV;AAEC;AACC;AACA;AAOd;AAEA;AAA+B;AAC7B;AACA;AAEF;AAEE;AAEA;AAAsB;AAElB;AACG;AACC;AACK;AACP;AAEC;AAEH;AACG;AACC;AACK;AAGP;AAGF;AACG;AAAM;AAA0C;AAEjD;AAGF;AAAO;AAEb;AAGA;AACE;AACE;AAA6B;AAG/B;AACE;AAAyB;AAG3B;AACE;AAAwB;AAG1B;AACE;AAA2B;AAG7B;AAAQ;AAAS;AACnB;AAEA;AAAmC;AACjC;AAEF;AACE;AAEA;AACG;AAAS;AAAY;AAA+B;AAIzD;AAQA;AAAwB;AAEpB;AACA;AAEA;AACG;AAC8B;AACzB;AACC;AAGP;AAGN;AAQA;AAAqB;AAEjB;AAEA;AACG;AACQ;AACH;AACA;AACC;AAGP;AAGN;AAKM;AAIJ;AACA;AACA;AAAM;AACC;AACL;AACA;AAEF;AACA;AAAsB;AACwB;AAClC;AAEZ;AACA;AAEA;AACG;AACC;AACI;AAC6B;AACtB;AACC;AACL;AACI;AACM;AACJ;AACA;AACR;AACL;AACK;AAKX;AAcM;AAIJ;AACA;AAEA;AACG;AACM;AACL;AACW;AACP;AACC;AAKX;AAUA;AAAoC;AAKhC;AACE;AACA;AACA;AACA;AACA;AACA;AACG;AAIL;AACA;AACA;AAEA;AACA;AAAmB;AACO;AACH;AAGvB;AAEA;AACE;AACE;AAA+C;AACjD;AAGF;AAA0B;AAEtB;AAEA;AACE;AAAsB;AACxB;AACF;AACuC;AAGzC;AAA0B;AAEtB;AAEA;AACA;AAAsB;AACxB;AACc;AAGhB;AAAoB;AAEhB;AAEA;AAEA;AACA;AAEA;AACE;AAAkB;AACpB;AACF;AAC6B;AAG/B;AACG;AACM;AACL;AAC6B;AACA;AACd;AACA;AACN;AACL;AACC;AAGP;AAGN;AAEA;AAA0D;AAEtD;AAAQ;AAAa;AAAsB;AAC7C;AAEE;AAIE;AAEJ;AAEE;AAIS;AAAiC;AAAe;AAMrD;AAER;AAQA;AAAuB;AAEnB;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACG;AAIL;AACA;AAAM;AACJ;AACA;AACA;AACA;AACY;AACZ;AAEF;AACA;AACA;AACE;AAA4C;AAE9C;AAA8C;AACO;AACxC;AAGb;AACA;AACA;AAAM;AACJ;AACA;AACA;AACA;AAEF;AACA;AAA0B;AACa;AAClC;AAEL;AAA8B;AAEoC;AAC7D;AAEL;AAAsB;AAElB;AACG;AAAsB;AAAkB;AAAgB;AAAO;AAEpE;AACc;AAGhB;AAAqB;AAEjB;AAEA;AAAkD;AACpD;AACiB;AAGnB;AAAsB;AAElB;AACE;AAAA;AAGF;AACA;AACA;AACA;AAAmC;AACrC;AACwD;AAG1D;AAAsB;AAElB;AAEA;AACE;AAAA;AAIF;AACE;AAA6B;AAI/B;AACE;AAA2B;AAG7B;AAEE;AACE;AACA;AAAsC;AAIxC;AACE;AACA;AAA0C;AAI5C;AACE;AAEA;AACA;AAAoB;AAItB;AACE;AACA;AACA;AAAmC;AACrC;AAGA;AACE;AACA;AAAuB;AAIzB;AAEE;AAEA;AACE;AAAO;AACT;AAIF;AACE;AACA;AAAmB;AAIrB;AACE;AACA;AAAyB;AAI3B;AACE;AACA;AAA2B;AAI7B;AACE;AACA;AAAkC;AAIpC;AACE;AACA;AAAyB;AAC3B;AACF;AACF;AACA;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACF;AAGF;AAAoB;AAEhB;AAEA;AACE;AAAe;AACjB;AACF;AACoB;AAGtB;AAAmB;AAEf;AAEA;AACE;AAAgB;AAClB;AACF;AACmB;AAGrB;AAAwC;AACX;AACwB;AAErD;AAA2C;AAEvC;AAEA;AACE;AAAuC;AACzC;AACF;AACsD;AAGxD;AAA6C;AAGrC;AACQ;AACe;AACJ;AACA;AACQ;AACvB;AACF;AAED;AACP;AACE;AACA;AACA;AACA;AACF;AAGF;AACE;AAA2C;AAI7C;AACE;AACE;AAAM;AACR;AAKF;AACE;AACE;AAAO;AACT;AAGF;AACG;AACC;AACc;AACJ;AAET;AACC;AACuC;AACxB;AACJ;AACgB;AACE;AACzB;AACA;AACM;AACA;AACC;AACF;AACD;AACR;AACY;AACO;AAEpB;AACC;AACA;AACgB;AACG;AACV;AACL;AACI;AACM;AACd;AAEJ;AAGN;AAEA;AACA;AAWA;AAAqB;AAEjB;AACE;AACA;AACA;AACsB;AACtB;AACwB;AACxB;AACA;AACG;AAIL;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AAAM;AACJ;AACA;AACA;AACA;AACA;AACoD;AACvC;AAEf;AACA;AACA;AACE;AACA;AAEA;AAAoC;AAEtC;AACE;AAAoB;AAEtB;AACA;AACA;AACA;AAIA;AAIA;AACE;AAAY;AACwB;AACpC;AAGF;AAA0B;AAEtB;AACE;AAAA;AAGF;AAAmC;AACjC;AACiB;AAGnB;AAEA;AAEA;AAA0B;AAC5B;AAC0D;AAG5D;AAEA;AACE;AAA+B;AAGjC;AACE;AAAkC;AAGpC;AAAe;AACQ;AACA;AACnB;AACD;AAGH;AAAiB;AAEb;AAAqC;AACvC;AACO;AAGT;AACE;AACE;AAAA;AAKF;AACE;AACE;AAAyB;AAC3B;AACD;AAGH;AACE;AAA+B;AACzB;AACkC;AACH;AACnC;AACD;AAGH;AACE;AAA+B;AACK;AACD;AAClC;AAGH;AAAc;AAEV;AACE;AAAgB;AACd;AAGW;AAEb;AAAwB;AAC1B;AACF;AACO;AAGT;AACE;AAAuB;AAGzB;AACE;AACE;AAAA;AAGF;AACA;AAA6B;AAG/B;AAAmB;AAEf;AACE;AAAA;AAGF;AACA;AAA4B;AAC9B;AACwB;AAG1B;AACE;AACE;AAAA;AAGF;AACE;AAA2B;AAC7B;AAGF;AAAqC;AAEjC;AACE;AAAA;AAGF;AACE;AAGA;AAAqB;AACvB;AACF;AAC4B;AAG9B;AACE;AACA;AACA;AACA;AAAmB;AAGrB;AAAqB;AAEjB;AACE;AAAA;AAMF;AAGA;AACE;AAEA;AAAA;AAGF;AAEA;AACE;AAEA;AAAA;AAGF;AAAa;AACJ;AAGT;AACG;AAI2B;AAG1B;AAAO;AACU;AACT;AACe;AACJ;AACA;AACnB;AAGJ;AAAgB;AAC0B;AACxC;AAGF;AAEA;AACE;AACA;AAAwB;AAExB;AAAY;AACd;AACF;AACuE;AAGzE;AACE;AAAsB;AAGxB;AACG;AACQ;AACL;AACA;AACA;AACF;AAEC;AACQ;AACL;AACA;AACA;AACA;AACA;AACF;AAEC;AACQ;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACF;AAEC;AAAc;AAAiB;AAAmB;AAChD;AACM;AACG;AACH;AACK;AACD;AACC;AACe;AAMnC;AAGN;AAQA;AAAuB;AAEnB;AACA;AACA;AAEA;AACG;AACM;AACD;AACC;AACK;AAGZ;AAGN;AAQM;AAIJ;AACA;AACA;AACA;AAEA;AAAoB;AAEhB;AAEA;AACE;AAAY;AACd;AACF;AACqB;AAGvB;AACG;AACM;AACD;AACK;AACJ;AACK;AAKhB;AAUA;AAAoC;AAKhC;AACE;AACA;AACA;AACA;AACA;AACA;AACG;AAIL;AACA;AACA;AACA;AAAyD;AACvD;AACA;AACA;AACA;AACU;AAGZ;AACG;AACK;AAC6B;AAC7B;AACC;AACP;AAGN;AAEA;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACF;;;;;;;;;;;"}

package/dist/primitives/Composer/index.mjs

@@ -1,7 +1,7 @@
 'use client';
 import { flip, hide, shift, limitShift, size, autoUpdate, useFloating } from '@floating-ui/react-dom';
 import { useRoom } from '@liveblocks/react';
-import { useMentionSuggestions } from '@liveblocks/react/_private';
+import { useMentionSuggestions, useSyncSource } from '@liveblocks/react/_private';
 import { Slottable, 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';
@@ -662,6 +662,7 @@ const ComposerForm = forwardRef(
     onComposerSubmit,
     defaultAttachments = [],
     pasteFilesAsAttachments,
+    preventUnsavedChanges = true,
     disabled,
     asChild,
     ...props
@@ -695,6 +696,13 @@ const ComposerForm = forwardRef(
     const ref = useRef(null);
     const mergedRefs = useRefs(forwardedRef, ref);
     const fileInputRef = useRef(null);
+    const syncSource = useSyncSource();
+    const isPending = !preventUnsavedChanges ? false : !isEmpty$1 || isUploadingAttachments || attachments.length > 0;
+    useEffect(() => {
+      syncSource?.setSyncStatus(
+        isPending ? "has-local-changes" : "synchronized"
+      );
+    }, [syncSource, isPending]);
     const createAttachments = useCallback(
       (files) => {
         if (!files.length) {

package/dist/primitives/Composer/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../src/primitives/Composer/index.tsx"],"sourcesContent":["\"use client\";\n\nimport type {\n  DetectOverflowOptions,\n  UseFloatingOptions,\n} from \"@floating-ui/react-dom\";\nimport {\n  autoUpdate,\n  flip,\n  hide,\n  limitShift,\n  shift,\n  size,\n  useFloating,\n} from \"@floating-ui/react-dom\";\nimport type { CommentAttachment, CommentBody } from \"@liveblocks/core\";\nimport { useRoom } from \"@liveblocks/react\";\nimport { useMentionSuggestions } from \"@liveblocks/react/_private\";\nimport { Slot, Slottable } from \"@radix-ui/react-slot\";\nimport type {\n  AriaAttributes,\n  ChangeEvent,\n  FocusEvent,\n  FormEvent,\n  KeyboardEvent,\n  MouseEvent,\n  PointerEvent,\n  SyntheticEvent,\n} from \"react\";\nimport React, {\n  forwardRef,\n  useCallback,\n  useEffect,\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  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 { FLOATING_ELEMENT_COLLISION_PADDING } from \"../../constants\";\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 { leaveMarkEdge, toggleMark } from \"../../slate/utils/marks\";\nimport type {\n  ComposerBody as ComposerBodyData,\n  ComposerBodyAutoLink,\n  ComposerBodyCustomLink,\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 { useId } from \"../../utils/use-id\";\nimport { useIndex } from \"../../utils/use-index\";\nimport { useInitial } from \"../../utils/use-initial\";\nimport { useLayoutEffect } from \"../../utils/use-layout-effect\";\nimport { useRefs } from \"../../utils/use-refs\";\nimport { toAbsoluteUrl } from \"../Comment/utils\";\nimport {\n  ComposerAttachmentsContext,\n  ComposerContext,\n  ComposerEditorContext,\n  ComposerSuggestionsContext,\n  useComposer,\n  useComposerAttachmentsContext,\n  useComposerEditorContext,\n  useComposerSuggestionsContext,\n} from \"./contexts\";\nimport type {\n  ComposerAttachFilesProps,\n  ComposerAttachmentsDropAreaProps,\n  ComposerEditorComponents,\n  ComposerEditorElementProps,\n  ComposerEditorLinkWrapperProps,\n  ComposerEditorMentionSuggestionsWrapperProps,\n  ComposerEditorMentionWrapperProps,\n  ComposerEditorProps,\n  ComposerFormProps,\n  ComposerLinkProps,\n  ComposerMentionProps,\n  ComposerSubmitProps,\n  ComposerSuggestionsListItemProps,\n  ComposerSuggestionsListProps,\n  ComposerSuggestionsProps,\n  SuggestionsPosition,\n} from \"./types\";\nimport {\n  commentBodyToComposerBody,\n  composerBodyToCommentBody,\n  getPlacementFromPosition,\n  getSideAndAlignFromPlacement,\n  useComposerAttachmentsDropArea,\n  useComposerAttachmentsManager,\n} from \"./utils\";\n\nconst MENTION_SUGGESTIONS_POSITION: SuggestionsPosition = \"top\";\n\nconst COMPOSER_MENTION_NAME = \"ComposerMention\";\nconst COMPOSER_LINK_NAME = \"ComposerLink\";\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_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  onItemSelect,\n  position = MENTION_SUGGESTIONS_POSITION,\n  dir,\n  MentionSuggestions,\n}: ComposerEditorMentionSuggestionsWrapperProps) {\n  const editor = useSlateStatic();\n  const { isFocused } = useComposer();\n  const [content, setContent] = useState<HTMLDivElement | null>(null);\n  const [contentZIndex, setContentZIndex] = useState<string>();\n  const contentRef = useCallback(setContent, [setContent]);\n  const { portalContainer } = useLiveblocksUIConfig();\n  const floatingOptions: UseFloatingOptions = useMemo(() => {\n    const detectOverflowOptions: DetectOverflowOptions = {\n      padding: FLOATING_ELEMENT_COLLISION_PADDING,\n    };\n\n    return {\n      strategy: \"fixed\",\n      placement: getPlacementFromPosition(position, dir),\n      middleware: [\n        flip({ ...detectOverflowOptions, crossAxis: false }),\n        hide(detectOverflowOptions),\n        shift({\n          ...detectOverflowOptions,\n          limiter: limitShift(),\n        }),\n        size({\n          ...detectOverflowOptions,\n          apply({ availableWidth, availableHeight, elements }) {\n            elements.floating.style.setProperty(\n              \"--lb-composer-suggestions-available-width\",\n              `${availableWidth}px`\n            );\n            elements.floating.style.setProperty(\n              \"--lb-composer-suggestions-available-height\",\n              `${availableHeight}px`\n            );\n          },\n        }),\n      ],\n      whileElementsMounted: (...args) => {\n        return autoUpdate(...args, {\n          animationFrame: true,\n        });\n      },\n    };\n  }, [position, dir]);\n  const {\n    refs: { setReference, setFloating },\n    strategy,\n    isPositioned,\n    placement,\n    x,\n    y,\n  } = useFloating(floatingOptions);\n\n  // Copy `z-index` from content to wrapper.\n  // Inspired by https://github.com/radix-ui/primitives/blob/main/packages/react/popper/src/Popper.tsx\n  useLayoutEffect(() => {\n    if (content) {\n      setContentZIndex(window.getComputedStyle(content).zIndex);\n    }\n  }, [content]);\n\n  useLayoutEffect(() => {\n    if (!mentionDraft) {\n      return;\n    }\n\n    const domRange = getDOMRange(editor, mentionDraft.range);\n\n    if (domRange) {\n      setReference({\n        getBoundingClientRect: () => domRange.getBoundingClientRect(),\n        getClientRects: () => domRange.getClientRects(),\n      });\n    }\n  }, [setReference, editor, mentionDraft]);\n\n  return (\n    <Persist>\n      {mentionDraft?.range && isFocused && userIds ? (\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 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    () => getSideAndAlignFromPlacement(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-suggestions-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 { editor, validate, setFocused } = useComposerEditorContext();\n    const {\n      submit,\n      focus,\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 } = useMemo(\n      () => ({ ...defaultEditorComponents, ...components }),\n      [components]\n    );\n\n    const [mentionDraft, setMentionDraft] = useState<MentionDraft>();\n    const mentionSuggestions = useMentionSuggestions(mentionDraft?.text);\n    const [\n      selectedMentionSuggestionIndex,\n      setPreviousSelectedMentionSuggestionIndex,\n      setNextSelectedMentionSuggestionIndex,\n      setSelectedMentionSuggestionIndex,\n    ] = useIndex(0, mentionSuggestions?.length ?? 0);\n    const id = useId();\n    const suggestionsListId = useMemo(\n      () => `liveblocks-suggestions-list-${id}`,\n      [id]\n    );\n    const suggestionsListItemId = useCallback(\n      (userId?: string) =>\n        userId ? `liveblocks-suggestions-list-item-${id}-${userId}` : undefined,\n      [id]\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        setMentionDraft(getMentionDraftAtSelection(editor));\n      },\n      [editor, validate]\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          // Blur the editor on Escape\n          if (isKey(event, \"Escape\")) {\n            event.preventDefault();\n            ReactEditor.blur(editor);\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            toggleMark(editor, \"bold\");\n          }\n\n          // Toggle italic on Command/Control + I\n          if (isKey(event, \"i\", { mod: true })) {\n            event.preventDefault();\n            toggleMark(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            toggleMark(editor, \"strikethrough\");\n          }\n\n          // Toggle code on Command/Control + E\n          if (isKey(event, \"e\", { mod: true })) {\n            event.preventDefault();\n            toggleMark(editor, \"code\");\n          }\n        }\n      },\n      [\n        createMention,\n        editor,\n        canSubmit,\n        mentionDraft,\n        mentionSuggestions,\n        selectedMentionSuggestionIndex,\n        onKeyDown,\n        setNextSelectedMentionSuggestionIndex,\n        setPreviousSelectedMentionSuggestionIndex,\n        setSelectedMentionSuggestionIndex,\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 propsWhileSuggesting: 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          : {},\n      [\n        mentionDraft,\n        suggestionsListId,\n        suggestionsListItemId,\n        selectedMentionSuggestionUserId,\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    useEffect(() => {\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    useEffect(() => {\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          {...propsWhileSuggesting}\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        <ComposerEditorMentionSuggestionsWrapper\n          dir={dir}\n          mentionDraft={mentionDraft}\n          selectedUserId={selectedMentionSuggestionUserId}\n          setSelectedUserId={setSelectedMentionSuggestionUserId}\n          userIds={mentionSuggestions}\n          id={suggestionsListId}\n          itemId={suggestionsListItemId}\n          onItemSelect={createMention}\n          MentionSuggestions={MentionSuggestions}\n        />\n      </Slate>\n    );\n  }\n);\n\nconst MAX_ATTACHMENTS = 10;\nconst MAX_ATTACHMENT_SIZE = 1024 * 1024 * 1024; // 1 GB\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      disabled,\n      asChild,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const Component = asChild ? Slot : \"form\";\n    const room = useRoom();\n    const [isEmpty, setEmpty] = useState(true);\n    const [isSubmitting, setSubmitting] = useState(false);\n    const [isFocused, setFocused] = useState(false);\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    const {\n      attachments,\n      isUploadingAttachments,\n      addAttachments,\n      removeAttachment,\n      clearAttachments,\n    } = useComposerAttachmentsManager(defaultAttachments, {\n      maxFileSize: maxAttachmentSize,\n    });\n    const numberOfAttachments = attachments.length;\n    const hasMaxAttachments = numberOfAttachments >= maxAttachments;\n    const isDisabled = useMemo(() => {\n      const self = room.getSelf();\n      const canComment = self?.canComment ?? true;\n\n      return isSubmitting || disabled || !canComment;\n    }, [isSubmitting, disabled, room]);\n    const canSubmit = useMemo(() => {\n      return !isEmpty && !isUploadingAttachments;\n    }, [isEmpty, isUploadingAttachments]);\n    const ref = useRef<HTMLFormElement>(null);\n    const mergedRefs = useRefs(forwardedRef, ref);\n    const fileInputRef = useRef<HTMLInputElement>(null);\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) => room.prepareAttachment(file));\n\n        addAttachments(attachments);\n      },\n      [addAttachments, maxAttachments, numberOfAttachments, room]\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\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, {\n        anchor: SlateEditor.end(editor, []),\n        focus: SlateEditor.end(editor, []),\n      });\n    }, [editor]);\n\n    const focus = useCallback(\n      (resetSelection = true) => {\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      },\n      [editor]\n    );\n\n    const blur = useCallback(() => {\n      ReactEditor.blur(editor);\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    return (\n      <ComposerEditorContext.Provider\n        value={{\n          editor,\n          validate,\n          setFocused,\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            }}\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\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  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_SUGGESTIONS_NAME;\n  ComposerSuggestionsList.displayName = COMPOSER_SUGGESTIONS_LIST_NAME;\n  ComposerSuggestionsListItem.displayName = COMPOSER_SUGGESTIONS_LIST_ITEM_NAME;\n}\n\n// NOTE: Every export from this file will be available publicly as Composer.*\nexport {\n  ComposerAttachFiles as AttachFiles,\n  ComposerAttachmentsDropArea as AttachmentsDropArea,\n  ComposerEditor as Editor,\n  ComposerForm as Form,\n  ComposerLink as Link,\n  ComposerMention as Mention,\n  ComposerSubmit as Submit,\n  ComposerSuggestions as Suggestions,\n  ComposerSuggestionsList as SuggestionsList,\n  ComposerSuggestionsListItem as SuggestionsListItem,\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwIA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAAsC;AAC3B;AAEX;AAEA;AAA8B;AAC5B;AAEF;AAIE;AAAO;AACL;AACE;AACE;AACE;AACE;AACoD;AAChD;AACA;AACD;AACH;AACF;AACF;AACF;AACF;AAEJ;AAEA;AAAsC;AACpC;AACA;AACA;AAEF;AACE;AAEA;AACG;AAAS;AAEL;AAAwB;AAAI;AAKrC;AAEA;AAAmC;AACjC;AACA;AACA;AAEF;AACE;AAAa;AACiC;AAChC;AAGd;AACG;AAAS;AACP;AAAK;AAGZ;AAEA;AAAiD;AAC/C;AACA;AACA;AACA;AACA;AACA;AACA;AACW;AACX;AAEF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACE;AAAqD;AAC1C;AAGX;AAAO;AACK;AACuC;AACrC;AACyC;AACzB;AACpB;AACD;AACiB;AACrB;AACI;AACA;AAED;AAAwB;AACtB;AACG;AAEL;AAAwB;AACtB;AACG;AACL;AACF;AACD;AACH;AAEE;AAA2B;AACT;AACjB;AACH;AACF;AAEF;AAAM;AAC8B;AAClC;AACA;AACA;AACA;AACA;AAKF;AACE;AACE;AAAwD;AAC1D;AAGF;AACE;AACE;AAAA;AAGF;AAEA;AACE;AAAa;AACiD;AACd;AAC/C;AACH;AAGF;AAGO;AACQ;AACL;AACA;AACe;AACG;AAClB;AACA;AACA;AACK;AACP;AAEC;AACM;AACM;AACJ;AACK;AACL;AACC;AAGF;AACM;AACF;AACV;AAEC;AACC;AACA;AAOd;AAEA;AAA+B;AAC7B;AACA;AAEF;AAEE;AAEA;AAAsB;AAElB;AACG;AACC;AACK;AACP;AAEC;AAEH;AACG;AACC;AACK;AAGP;AAGF;AACG;AAAM;AAA0C;AAEjD;AAGF;AAAO;AAEb;AAGA;AACE;AACE;AAA6B;AAG/B;AACE;AAAyB;AAG3B;AACE;AAAwB;AAG1B;AACE;AAA2B;AAG7B;AAAQ;AAAS;AACnB;AAEA;AAAmC;AACjC;AAEF;AACE;AAEA;AACG;AAAS;AAAY;AAA+B;AAIzD;AAQA;AAAwB;AAEpB;AACA;AAEA;AACG;AAC8B;AACzB;AACC;AAGP;AAGN;AAQA;AAAqB;AAEjB;AAEA;AACG;AACQ;AACH;AACA;AACC;AAGP;AAGN;AAKM;AAIJ;AACA;AACA;AAAM;AACC;AACL;AACA;AAEF;AACA;AAAsB;AACwB;AAClC;AAEZ;AACA;AAEA;AACG;AACC;AACI;AAC6B;AACtB;AACC;AACL;AACI;AACM;AACJ;AACA;AACR;AACL;AACK;AAKX;AAcM;AAIJ;AACA;AAEA;AACG;AACM;AACL;AACW;AACP;AACC;AAKX;AAUA;AAAoC;AAKhC;AACE;AACA;AACA;AACA;AACA;AACA;AACG;AAIL;AACA;AACA;AAEA;AACA;AAAmB;AACO;AACH;AAGvB;AAEA;AACE;AACE;AAA+C;AACjD;AAGF;AAA0B;AAEtB;AAEA;AACE;AAAsB;AACxB;AACF;AACuC;AAGzC;AAA0B;AAEtB;AAEA;AACA;AAAsB;AACxB;AACc;AAGhB;AAAoB;AAEhB;AAEA;AAEA;AACA;AAEA;AACE;AAAkB;AACpB;AACF;AAC6B;AAG/B;AACG;AACM;AACL;AAC6B;AACA;AACd;AACA;AACN;AACL;AACC;AAGP;AAGN;AAEA;AAA0D;AAEtD;AAAQ;AAAa;AAAsB;AAC7C;AAEE;AAIE;AAEJ;AAEE;AAIS;AAAiC;AAAe;AAMrD;AAER;AAQA;AAAuB;AAEnB;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACG;AAIL;AACA;AAAM;AACJ;AACA;AACA;AACA;AACY;AACZ;AAEF;AACA;AACA;AACE;AAA4C;AAE9C;AAA8C;AACO;AACxC;AAGb;AACA;AACA;AAAM;AACJ;AACA;AACA;AACA;AAEF;AACA;AAA0B;AACa;AAClC;AAEL;AAA8B;AAEoC;AAC7D;AAEL;AAAsB;AAElB;AACG;AAAsB;AAAkB;AAAgB;AAAO;AAEpE;AACc;AAGhB;AAAqB;AAEjB;AAEA;AAAkD;AACpD;AACiB;AAGnB;AAAsB;AAElB;AACE;AAAA;AAGF;AACA;AACA;AACA;AAAmC;AACrC;AACwD;AAG1D;AAAsB;AAElB;AAEA;AACE;AAAA;AAIF;AACE;AAA6B;AAI/B;AACE;AAA2B;AAG7B;AAEE;AACE;AACA;AAAsC;AAIxC;AACE;AACA;AAA0C;AAI5C;AACE;AAEA;AACA;AAAoB;AAItB;AACE;AACA;AACA;AAAmC;AACrC;AAGA;AACE;AACA;AAAuB;AAIzB;AAEE;AAEA;AACE;AAAO;AACT;AAIF;AACE;AACA;AAAmB;AAIrB;AACE;AACA;AAAyB;AAI3B;AACE;AACA;AAA2B;AAI7B;AACE;AACA;AAAkC;AAIpC;AACE;AACA;AAAyB;AAC3B;AACF;AACF;AACA;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACF;AAGF;AAAoB;AAEhB;AAEA;AACE;AAAe;AACjB;AACF;AACoB;AAGtB;AAAmB;AAEf;AAEA;AACE;AAAgB;AAClB;AACF;AACmB;AAGrB;AAAwC;AACX;AACwB;AAErD;AAA2C;AAEvC;AAEA;AACE;AAAuC;AACzC;AACF;AACsD;AAGxD;AAA6C;AAGrC;AACQ;AACe;AACJ;AACA;AACQ;AACvB;AACF;AAED;AACP;AACE;AACA;AACA;AACA;AACF;AAGF;AACE;AAA2C;AAI7C;AACE;AACE;AAAM;AACR;AAKF;AACE;AACE;AAAO;AACT;AAGF;AACG;AACC;AACc;AACJ;AAET;AACC;AACuC;AACxB;AACJ;AACgB;AACE;AACzB;AACA;AACM;AACA;AACC;AACF;AACD;AACR;AACY;AACO;AAEpB;AACC;AACA;AACgB;AACG;AACV;AACL;AACI;AACM;AACd;AAEJ;AAGN;AAEA;AACA;AAWA;AAAqB;AAEjB;AACE;AACA;AACA;AACsB;AACtB;AACA;AACA;AACG;AAIL;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AAAM;AACJ;AACA;AACA;AACA;AACA;AACoD;AACvC;AAEf;AACA;AACA;AACE;AACA;AAEA;AAAoC;AAEtC;AACE;AAAoB;AAEtB;AACA;AACA;AAEA;AAA0B;AAEtB;AACE;AAAA;AAGF;AAAmC;AACjC;AACiB;AAGnB;AAEA;AAEA;AAA0B;AAC5B;AAC0D;AAG5D;AAEA;AACE;AAA+B;AAGjC;AACE;AAAkC;AAGpC;AAAe;AACQ;AACA;AACnB;AACD;AAGH;AAAiB;AAEb;AAAqC;AACvC;AACO;AAGT;AACE;AACE;AAAA;AAKF;AACE;AACE;AAAyB;AAC3B;AACD;AAGH;AACE;AAA+B;AACzB;AACkC;AACH;AACnC;AACD;AAGH;AACE;AAA+B;AACK;AACD;AAClC;AAGH;AAAc;AAEV;AACE;AAAgB;AACd;AAGW;AAEb;AAAwB;AAC1B;AACF;AACO;AAGT;AACE;AAAuB;AAGzB;AACE;AACE;AAAA;AAGF;AACA;AAA6B;AAG/B;AAAmB;AAEf;AACE;AAAA;AAGF;AACA;AAA4B;AAC9B;AACwB;AAG1B;AACE;AACE;AAAA;AAGF;AACE;AAA2B;AAC7B;AAGF;AAAqC;AAEjC;AACE;AAAA;AAGF;AACE;AAGA;AAAqB;AACvB;AACF;AAC4B;AAG9B;AACE;AACA;AACA;AACA;AAAmB;AAGrB;AAAqB;AAEjB;AACE;AAAA;AAMF;AAGA;AACE;AAEA;AAAA;AAGF;AAEA;AACE;AAEA;AAAA;AAGF;AAAa;AACJ;AAGT;AACG;AAI2B;AAG1B;AAAO;AACU;AACT;AACe;AACJ;AACA;AACnB;AAGJ;AAAgB;AAC0B;AACxC;AAGF;AAEA;AACE;AACA;AAAwB;AAExB;AAAY;AACd;AACF;AACuE;AAGzE;AACE;AAAsB;AAGxB;AACG;AACQ;AACL;AACA;AACA;AACF;AAEC;AACQ;AACL;AACA;AACA;AACA;AACA;AACF;AAEC;AACQ;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACF;AAEC;AAAc;AAAiB;AAAmB;AAChD;AACM;AACG;AACH;AACK;AACD;AACC;AACe;AAMnC;AAGN;AAQA;AAAuB;AAEnB;AACA;AACA;AAEA;AACG;AACM;AACD;AACC;AACK;AAGZ;AAGN;AAQM;AAIJ;AACA;AACA;AACA;AAEA;AAAoB;AAEhB;AAEA;AACE;AAAY;AACd;AACF;AACqB;AAGvB;AACG;AACM;AACD;AACK;AACJ;AACK;AAKhB;AAUA;AAAoC;AAKhC;AACE;AACA;AACA;AACA;AACA;AACA;AACG;AAIL;AACA;AACA;AACA;AAAyD;AACvD;AACA;AACA;AACA;AACU;AAGZ;AACG;AACK;AAC6B;AAC7B;AACC;AACP;AAGN;AAEA;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACF;;"}
+{"version":3,"file":"index.mjs","sources":["../../../src/primitives/Composer/index.tsx"],"sourcesContent":["\"use client\";\n\nimport type {\n  DetectOverflowOptions,\n  UseFloatingOptions,\n} from \"@floating-ui/react-dom\";\nimport {\n  autoUpdate,\n  flip,\n  hide,\n  limitShift,\n  shift,\n  size,\n  useFloating,\n} from \"@floating-ui/react-dom\";\nimport type { CommentAttachment, CommentBody } from \"@liveblocks/core\";\nimport { useRoom } from \"@liveblocks/react\";\nimport {\n  useMentionSuggestions,\n  useSyncSource,\n} from \"@liveblocks/react/_private\";\nimport { Slot, Slottable } from \"@radix-ui/react-slot\";\nimport type {\n  AriaAttributes,\n  ChangeEvent,\n  FocusEvent,\n  FormEvent,\n  KeyboardEvent,\n  MouseEvent,\n  PointerEvent,\n  SyntheticEvent,\n} from \"react\";\nimport React, {\n  forwardRef,\n  useCallback,\n  useEffect,\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  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 { FLOATING_ELEMENT_COLLISION_PADDING } from \"../../constants\";\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 { leaveMarkEdge, toggleMark } from \"../../slate/utils/marks\";\nimport type {\n  ComposerBody as ComposerBodyData,\n  ComposerBodyAutoLink,\n  ComposerBodyCustomLink,\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 { useId } from \"../../utils/use-id\";\nimport { useIndex } from \"../../utils/use-index\";\nimport { useInitial } from \"../../utils/use-initial\";\nimport { useLayoutEffect } from \"../../utils/use-layout-effect\";\nimport { useRefs } from \"../../utils/use-refs\";\nimport { toAbsoluteUrl } from \"../Comment/utils\";\nimport {\n  ComposerAttachmentsContext,\n  ComposerContext,\n  ComposerEditorContext,\n  ComposerSuggestionsContext,\n  useComposer,\n  useComposerAttachmentsContext,\n  useComposerEditorContext,\n  useComposerSuggestionsContext,\n} from \"./contexts\";\nimport type {\n  ComposerAttachFilesProps,\n  ComposerAttachmentsDropAreaProps,\n  ComposerEditorComponents,\n  ComposerEditorElementProps,\n  ComposerEditorLinkWrapperProps,\n  ComposerEditorMentionSuggestionsWrapperProps,\n  ComposerEditorMentionWrapperProps,\n  ComposerEditorProps,\n  ComposerFormProps,\n  ComposerLinkProps,\n  ComposerMentionProps,\n  ComposerSubmitProps,\n  ComposerSuggestionsListItemProps,\n  ComposerSuggestionsListProps,\n  ComposerSuggestionsProps,\n  SuggestionsPosition,\n} from \"./types\";\nimport {\n  commentBodyToComposerBody,\n  composerBodyToCommentBody,\n  getPlacementFromPosition,\n  getSideAndAlignFromPlacement,\n  useComposerAttachmentsDropArea,\n  useComposerAttachmentsManager,\n} from \"./utils\";\n\nconst MENTION_SUGGESTIONS_POSITION: SuggestionsPosition = \"top\";\n\nconst COMPOSER_MENTION_NAME = \"ComposerMention\";\nconst COMPOSER_LINK_NAME = \"ComposerLink\";\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_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  onItemSelect,\n  position = MENTION_SUGGESTIONS_POSITION,\n  dir,\n  MentionSuggestions,\n}: ComposerEditorMentionSuggestionsWrapperProps) {\n  const editor = useSlateStatic();\n  const { isFocused } = useComposer();\n  const [content, setContent] = useState<HTMLDivElement | null>(null);\n  const [contentZIndex, setContentZIndex] = useState<string>();\n  const contentRef = useCallback(setContent, [setContent]);\n  const { portalContainer } = useLiveblocksUIConfig();\n  const floatingOptions: UseFloatingOptions = useMemo(() => {\n    const detectOverflowOptions: DetectOverflowOptions = {\n      padding: FLOATING_ELEMENT_COLLISION_PADDING,\n    };\n\n    return {\n      strategy: \"fixed\",\n      placement: getPlacementFromPosition(position, dir),\n      middleware: [\n        flip({ ...detectOverflowOptions, crossAxis: false }),\n        hide(detectOverflowOptions),\n        shift({\n          ...detectOverflowOptions,\n          limiter: limitShift(),\n        }),\n        size({\n          ...detectOverflowOptions,\n          apply({ availableWidth, availableHeight, elements }) {\n            elements.floating.style.setProperty(\n              \"--lb-composer-suggestions-available-width\",\n              `${availableWidth}px`\n            );\n            elements.floating.style.setProperty(\n              \"--lb-composer-suggestions-available-height\",\n              `${availableHeight}px`\n            );\n          },\n        }),\n      ],\n      whileElementsMounted: (...args) => {\n        return autoUpdate(...args, {\n          animationFrame: true,\n        });\n      },\n    };\n  }, [position, dir]);\n  const {\n    refs: { setReference, setFloating },\n    strategy,\n    isPositioned,\n    placement,\n    x,\n    y,\n  } = useFloating(floatingOptions);\n\n  // Copy `z-index` from content to wrapper.\n  // Inspired by https://github.com/radix-ui/primitives/blob/main/packages/react/popper/src/Popper.tsx\n  useLayoutEffect(() => {\n    if (content) {\n      setContentZIndex(window.getComputedStyle(content).zIndex);\n    }\n  }, [content]);\n\n  useLayoutEffect(() => {\n    if (!mentionDraft) {\n      return;\n    }\n\n    const domRange = getDOMRange(editor, mentionDraft.range);\n\n    if (domRange) {\n      setReference({\n        getBoundingClientRect: () => domRange.getBoundingClientRect(),\n        getClientRects: () => domRange.getClientRects(),\n      });\n    }\n  }, [setReference, editor, mentionDraft]);\n\n  return (\n    <Persist>\n      {mentionDraft?.range && isFocused && userIds ? (\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 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    () => getSideAndAlignFromPlacement(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-suggestions-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 { editor, validate, setFocused } = useComposerEditorContext();\n    const {\n      submit,\n      focus,\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 } = useMemo(\n      () => ({ ...defaultEditorComponents, ...components }),\n      [components]\n    );\n\n    const [mentionDraft, setMentionDraft] = useState<MentionDraft>();\n    const mentionSuggestions = useMentionSuggestions(mentionDraft?.text);\n    const [\n      selectedMentionSuggestionIndex,\n      setPreviousSelectedMentionSuggestionIndex,\n      setNextSelectedMentionSuggestionIndex,\n      setSelectedMentionSuggestionIndex,\n    ] = useIndex(0, mentionSuggestions?.length ?? 0);\n    const id = useId();\n    const suggestionsListId = useMemo(\n      () => `liveblocks-suggestions-list-${id}`,\n      [id]\n    );\n    const suggestionsListItemId = useCallback(\n      (userId?: string) =>\n        userId ? `liveblocks-suggestions-list-item-${id}-${userId}` : undefined,\n      [id]\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        setMentionDraft(getMentionDraftAtSelection(editor));\n      },\n      [editor, validate]\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          // Blur the editor on Escape\n          if (isKey(event, \"Escape\")) {\n            event.preventDefault();\n            ReactEditor.blur(editor);\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            toggleMark(editor, \"bold\");\n          }\n\n          // Toggle italic on Command/Control + I\n          if (isKey(event, \"i\", { mod: true })) {\n            event.preventDefault();\n            toggleMark(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            toggleMark(editor, \"strikethrough\");\n          }\n\n          // Toggle code on Command/Control + E\n          if (isKey(event, \"e\", { mod: true })) {\n            event.preventDefault();\n            toggleMark(editor, \"code\");\n          }\n        }\n      },\n      [\n        createMention,\n        editor,\n        canSubmit,\n        mentionDraft,\n        mentionSuggestions,\n        selectedMentionSuggestionIndex,\n        onKeyDown,\n        setNextSelectedMentionSuggestionIndex,\n        setPreviousSelectedMentionSuggestionIndex,\n        setSelectedMentionSuggestionIndex,\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 propsWhileSuggesting: 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          : {},\n      [\n        mentionDraft,\n        suggestionsListId,\n        suggestionsListItemId,\n        selectedMentionSuggestionUserId,\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    useEffect(() => {\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    useEffect(() => {\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          {...propsWhileSuggesting}\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        <ComposerEditorMentionSuggestionsWrapper\n          dir={dir}\n          mentionDraft={mentionDraft}\n          selectedUserId={selectedMentionSuggestionUserId}\n          setSelectedUserId={setSelectedMentionSuggestionUserId}\n          userIds={mentionSuggestions}\n          id={suggestionsListId}\n          itemId={suggestionsListItemId}\n          onItemSelect={createMention}\n          MentionSuggestions={MentionSuggestions}\n        />\n      </Slate>\n    );\n  }\n);\n\nconst MAX_ATTACHMENTS = 10;\nconst MAX_ATTACHMENT_SIZE = 1024 * 1024 * 1024; // 1 GB\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      ...props\n    },\n    forwardedRef\n  ) => {\n    const Component = asChild ? Slot : \"form\";\n    const room = useRoom();\n    const [isEmpty, setEmpty] = useState(true);\n    const [isSubmitting, setSubmitting] = useState(false);\n    const [isFocused, setFocused] = useState(false);\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    const {\n      attachments,\n      isUploadingAttachments,\n      addAttachments,\n      removeAttachment,\n      clearAttachments,\n    } = useComposerAttachmentsManager(defaultAttachments, {\n      maxFileSize: maxAttachmentSize,\n    });\n    const numberOfAttachments = attachments.length;\n    const hasMaxAttachments = numberOfAttachments >= maxAttachments;\n    const isDisabled = useMemo(() => {\n      const self = room.getSelf();\n      const canComment = self?.canComment ?? true;\n\n      return isSubmitting || disabled || !canComment;\n    }, [isSubmitting, disabled, room]);\n    const canSubmit = useMemo(() => {\n      return !isEmpty && !isUploadingAttachments;\n    }, [isEmpty, isUploadingAttachments]);\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) => room.prepareAttachment(file));\n\n        addAttachments(attachments);\n      },\n      [addAttachments, maxAttachments, numberOfAttachments, room]\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\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, {\n        anchor: SlateEditor.end(editor, []),\n        focus: SlateEditor.end(editor, []),\n      });\n    }, [editor]);\n\n    const focus = useCallback(\n      (resetSelection = true) => {\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      },\n      [editor]\n    );\n\n    const blur = useCallback(() => {\n      ReactEditor.blur(editor);\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    return (\n      <ComposerEditorContext.Provider\n        value={{\n          editor,\n          validate,\n          setFocused,\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            }}\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\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  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_SUGGESTIONS_NAME;\n  ComposerSuggestionsList.displayName = COMPOSER_SUGGESTIONS_LIST_NAME;\n  ComposerSuggestionsListItem.displayName = COMPOSER_SUGGESTIONS_LIST_ITEM_NAME;\n}\n\n// NOTE: Every export from this file will be available publicly as Composer.*\nexport {\n  ComposerAttachFiles as AttachFiles,\n  ComposerAttachmentsDropArea as AttachmentsDropArea,\n  ComposerEditor as Editor,\n  ComposerForm as Form,\n  ComposerLink as Link,\n  ComposerMention as Mention,\n  ComposerSubmit as Submit,\n  ComposerSuggestions as Suggestions,\n  ComposerSuggestionsList as SuggestionsList,\n  ComposerSuggestionsListItem as SuggestionsListItem,\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2IA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAAsC;AAC3B;AAEX;AAEA;AAA8B;AAC5B;AAEF;AAIE;AAAO;AACL;AACE;AACE;AACE;AACE;AACoD;AAChD;AACA;AACD;AACH;AACF;AACF;AACF;AACF;AAEJ;AAEA;AAAsC;AACpC;AACA;AACA;AAEF;AACE;AAEA;AACG;AAAS;AAEL;AAAwB;AAAI;AAKrC;AAEA;AAAmC;AACjC;AACA;AACA;AAEF;AACE;AAAa;AACiC;AAChC;AAGd;AACG;AAAS;AACP;AAAK;AAGZ;AAEA;AAAiD;AAC/C;AACA;AACA;AACA;AACA;AACA;AACA;AACW;AACX;AAEF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACE;AAAqD;AAC1C;AAGX;AAAO;AACK;AACuC;AACrC;AACyC;AACzB;AACpB;AACD;AACiB;AACrB;AACI;AACA;AAED;AAAwB;AACtB;AACG;AAEL;AAAwB;AACtB;AACG;AACL;AACF;AACD;AACH;AAEE;AAA2B;AACT;AACjB;AACH;AACF;AAEF;AAAM;AAC8B;AAClC;AACA;AACA;AACA;AACA;AAKF;AACE;AACE;AAAwD;AAC1D;AAGF;AACE;AACE;AAAA;AAGF;AAEA;AACE;AAAa;AACiD;AACd;AAC/C;AACH;AAGF;AAGO;AACQ;AACL;AACA;AACe;AACG;AAClB;AACA;AACA;AACK;AACP;AAEC;AACM;AACM;AACJ;AACK;AACL;AACC;AAGF;AACM;AACF;AACV;AAEC;AACC;AACA;AAOd;AAEA;AAA+B;AAC7B;AACA;AAEF;AAEE;AAEA;AAAsB;AAElB;AACG;AACC;AACK;AACP;AAEC;AAEH;AACG;AACC;AACK;AAGP;AAGF;AACG;AAAM;AAA0C;AAEjD;AAGF;AAAO;AAEb;AAGA;AACE;AACE;AAA6B;AAG/B;AACE;AAAyB;AAG3B;AACE;AAAwB;AAG1B;AACE;AAA2B;AAG7B;AAAQ;AAAS;AACnB;AAEA;AAAmC;AACjC;AAEF;AACE;AAEA;AACG;AAAS;AAAY;AAA+B;AAIzD;AAQA;AAAwB;AAEpB;AACA;AAEA;AACG;AAC8B;AACzB;AACC;AAGP;AAGN;AAQA;AAAqB;AAEjB;AAEA;AACG;AACQ;AACH;AACA;AACC;AAGP;AAGN;AAKM;AAIJ;AACA;AACA;AAAM;AACC;AACL;AACA;AAEF;AACA;AAAsB;AACwB;AAClC;AAEZ;AACA;AAEA;AACG;AACC;AACI;AAC6B;AACtB;AACC;AACL;AACI;AACM;AACJ;AACA;AACR;AACL;AACK;AAKX;AAcM;AAIJ;AACA;AAEA;AACG;AACM;AACL;AACW;AACP;AACC;AAKX;AAUA;AAAoC;AAKhC;AACE;AACA;AACA;AACA;AACA;AACA;AACG;AAIL;AACA;AACA;AAEA;AACA;AAAmB;AACO;AACH;AAGvB;AAEA;AACE;AACE;AAA+C;AACjD;AAGF;AAA0B;AAEtB;AAEA;AACE;AAAsB;AACxB;AACF;AACuC;AAGzC;AAA0B;AAEtB;AAEA;AACA;AAAsB;AACxB;AACc;AAGhB;AAAoB;AAEhB;AAEA;AAEA;AACA;AAEA;AACE;AAAkB;AACpB;AACF;AAC6B;AAG/B;AACG;AACM;AACL;AAC6B;AACA;AACd;AACA;AACN;AACL;AACC;AAGP;AAGN;AAEA;AAA0D;AAEtD;AAAQ;AAAa;AAAsB;AAC7C;AAEE;AAIE;AAEJ;AAEE;AAIS;AAAiC;AAAe;AAMrD;AAER;AAQA;AAAuB;AAEnB;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACG;AAIL;AACA;AAAM;AACJ;AACA;AACA;AACA;AACY;AACZ;AAEF;AACA;AACA;AACE;AAA4C;AAE9C;AAA8C;AACO;AACxC;AAGb;AACA;AACA;AAAM;AACJ;AACA;AACA;AACA;AAEF;AACA;AAA0B;AACa;AAClC;AAEL;AAA8B;AAEoC;AAC7D;AAEL;AAAsB;AAElB;AACG;AAAsB;AAAkB;AAAgB;AAAO;AAEpE;AACc;AAGhB;AAAqB;AAEjB;AAEA;AAAkD;AACpD;AACiB;AAGnB;AAAsB;AAElB;AACE;AAAA;AAGF;AACA;AACA;AACA;AAAmC;AACrC;AACwD;AAG1D;AAAsB;AAElB;AAEA;AACE;AAAA;AAIF;AACE;AAA6B;AAI/B;AACE;AAA2B;AAG7B;AAEE;AACE;AACA;AAAsC;AAIxC;AACE;AACA;AAA0C;AAI5C;AACE;AAEA;AACA;AAAoB;AAItB;AACE;AACA;AACA;AAAmC;AACrC;AAGA;AACE;AACA;AAAuB;AAIzB;AAEE;AAEA;AACE;AAAO;AACT;AAIF;AACE;AACA;AAAmB;AAIrB;AACE;AACA;AAAyB;AAI3B;AACE;AACA;AAA2B;AAI7B;AACE;AACA;AAAkC;AAIpC;AACE;AACA;AAAyB;AAC3B;AACF;AACF;AACA;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACF;AAGF;AAAoB;AAEhB;AAEA;AACE;AAAe;AACjB;AACF;AACoB;AAGtB;AAAmB;AAEf;AAEA;AACE;AAAgB;AAClB;AACF;AACmB;AAGrB;AAAwC;AACX;AACwB;AAErD;AAA2C;AAEvC;AAEA;AACE;AAAuC;AACzC;AACF;AACsD;AAGxD;AAA6C;AAGrC;AACQ;AACe;AACJ;AACA;AACQ;AACvB;AACF;AAED;AACP;AACE;AACA;AACA;AACA;AACF;AAGF;AACE;AAA2C;AAI7C;AACE;AACE;AAAM;AACR;AAKF;AACE;AACE;AAAO;AACT;AAGF;AACG;AACC;AACc;AACJ;AAET;AACC;AACuC;AACxB;AACJ;AACgB;AACE;AACzB;AACA;AACM;AACA;AACC;AACF;AACD;AACR;AACY;AACO;AAEpB;AACC;AACA;AACgB;AACG;AACV;AACL;AACI;AACM;AACd;AAEJ;AAGN;AAEA;AACA;AAWA;AAAqB;AAEjB;AACE;AACA;AACA;AACsB;AACtB;AACwB;AACxB;AACA;AACG;AAIL;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AAAM;AACJ;AACA;AACA;AACA;AACA;AACoD;AACvC;AAEf;AACA;AACA;AACE;AACA;AAEA;AAAoC;AAEtC;AACE;AAAoB;AAEtB;AACA;AACA;AACA;AAIA;AAIA;AACE;AAAY;AACwB;AACpC;AAGF;AAA0B;AAEtB;AACE;AAAA;AAGF;AAAmC;AACjC;AACiB;AAGnB;AAEA;AAEA;AAA0B;AAC5B;AAC0D;AAG5D;AAEA;AACE;AAA+B;AAGjC;AACE;AAAkC;AAGpC;AAAe;AACQ;AACA;AACnB;AACD;AAGH;AAAiB;AAEb;AAAqC;AACvC;AACO;AAGT;AACE;AACE;AAAA;AAKF;AACE;AACE;AAAyB;AAC3B;AACD;AAGH;AACE;AAA+B;AACzB;AACkC;AACH;AACnC;AACD;AAGH;AACE;AAA+B;AACK;AACD;AAClC;AAGH;AAAc;AAEV;AACE;AAAgB;AACd;AAGW;AAEb;AAAwB;AAC1B;AACF;AACO;AAGT;AACE;AAAuB;AAGzB;AACE;AACE;AAAA;AAGF;AACA;AAA6B;AAG/B;AAAmB;AAEf;AACE;AAAA;AAGF;AACA;AAA4B;AAC9B;AACwB;AAG1B;AACE;AACE;AAAA;AAGF;AACE;AAA2B;AAC7B;AAGF;AAAqC;AAEjC;AACE;AAAA;AAGF;AACE;AAGA;AAAqB;AACvB;AACF;AAC4B;AAG9B;AACE;AACA;AACA;AACA;AAAmB;AAGrB;AAAqB;AAEjB;AACE;AAAA;AAMF;AAGA;AACE;AAEA;AAAA;AAGF;AAEA;AACE;AAEA;AAAA;AAGF;AAAa;AACJ;AAGT;AACG;AAI2B;AAG1B;AAAO;AACU;AACT;AACe;AACJ;AACA;AACnB;AAGJ;AAAgB;AAC0B;AACxC;AAGF;AAEA;AACE;AACA;AAAwB;AAExB;AAAY;AACd;AACF;AACuE;AAGzE;AACE;AAAsB;AAGxB;AACG;AACQ;AACL;AACA;AACA;AACF;AAEC;AACQ;AACL;AACA;AACA;AACA;AACA;AACF;AAEC;AACQ;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACF;AAEC;AAAc;AAAiB;AAAmB;AAChD;AACM;AACG;AACH;AACK;AACD;AACC;AACe;AAMnC;AAGN;AAQA;AAAuB;AAEnB;AACA;AACA;AAEA;AACG;AACM;AACD;AACC;AACK;AAGZ;AAGN;AAQM;AAIJ;AACA;AACA;AACA;AAEA;AAAoB;AAEhB;AAEA;AACE;AAAY;AACd;AACF;AACqB;AAGvB;AACG;AACM;AACD;AACK;AACJ;AACK;AAKhB;AAUA;AAAoC;AAKhC;AACE;AACA;AACA;AACA;AACA;AACA;AACG;AAIL;AACA;AACA;AACA;AAAyD;AACvD;AACA;AACA;AACA;AACU;AAGZ;AACG;AACK;AAC6B;AAC7B;AACC;AACP;AAGN;AAEA;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACF;;"}

package/dist/primitives/index.d.mts

@@ -185,6 +185,19 @@ interface ComposerFormProps extends ComponentPropsWithSlot<"form"> {
      * Whether to create attachments when pasting files into the editor.
      */
     pasteFilesAsAttachments?: boolean;
+    /**
+     * When `preventUnsavedChanges` is set on your Liveblocks client (or set on
+     * <LiveblocksProvider>), then closing a browser tab will be prevented when
+     * there are unsaved changes.
+     *
+     * By default, that will include draft texts or attachments that are (being)
+     * uploaded via this composer, but not submitted yet.
+     *
+     * If you want to prevent unsaved changes with Liveblocks, but not for this
+     * composer, you can opt-out this composer instance by setting this prop to
+     * `false`.
+     */
+    preventUnsavedChanges?: boolean;
 }
 declare type ComposerSubmitProps = ComponentPropsWithSlot<"button">;
 declare type ComposerAttachFilesProps = ComponentPropsWithSlot<"button">;

package/dist/primitives/index.d.ts

@@ -185,6 +185,19 @@ interface ComposerFormProps extends ComponentPropsWithSlot<"form"> {
      * Whether to create attachments when pasting files into the editor.
      */
     pasteFilesAsAttachments?: boolean;
+    /**
+     * When `preventUnsavedChanges` is set on your Liveblocks client (or set on
+     * <LiveblocksProvider>), then closing a browser tab will be prevented when
+     * there are unsaved changes.
+     *
+     * By default, that will include draft texts or attachments that are (being)
+     * uploaded via this composer, but not submitted yet.
+     *
+     * If you want to prevent unsaved changes with Liveblocks, but not for this
+     * composer, you can opt-out this composer instance by setting this prop to
+     * `false`.
+     */
+    preventUnsavedChanges?: boolean;
 }
 declare type ComposerSubmitProps = ComponentPropsWithSlot<"button">;
 declare type ComposerAttachFilesProps = ComponentPropsWithSlot<"button">;

package/dist/version.js

@@ -1,7 +1,7 @@
 'use strict';
 
 const PKG_NAME = "@liveblocks/react-ui";
-const PKG_VERSION = "2.11.1";
+const PKG_VERSION = "2.12.0";
 const PKG_FORMAT = "cjs";
 
 exports.PKG_FORMAT = PKG_FORMAT;

package/dist/version.mjs

@@ -1,5 +1,5 @@
 const PKG_NAME = "@liveblocks/react-ui";
-const PKG_VERSION = "2.11.1";
+const PKG_VERSION = "2.12.0";
 const PKG_FORMAT = "esm";
 
 export { PKG_FORMAT, PKG_NAME, PKG_VERSION };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@liveblocks/react-ui",
-  "version": "2.11.1",
+  "version": "2.12.0",
   "description": "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.",
   "license": "Apache-2.0",
   "type": "commonjs",
@@ -75,9 +75,9 @@
   },
   "dependencies": {
     "@floating-ui/react-dom": "^2.1.2",
-    "@liveblocks/client": "2.11.1",
-    "@liveblocks/core": "2.11.1",
-    "@liveblocks/react": "2.11.1",
+    "@liveblocks/client": "2.12.0",
+    "@liveblocks/core": "2.12.0",
+    "@liveblocks/react": "2.12.0",
     "@radix-ui/react-dropdown-menu": "^2.1.2",
     "@radix-ui/react-popover": "^1.1.2",
     "@radix-ui/react-slot": "^1.1.0",