@liveblocks/react-ui 2.8.0-beta3 → 2.8.0

package/dist/components/internal/Attachment.js

@@ -177,9 +177,13 @@ function useAttachmentContent(attachment, overrides$1) {
   let description;
   if (attachment.type === "localAttachment" && attachment.status === "error") {
     if (attachment.error instanceof utils.AttachmentTooLargeError) {
-      description = $.ATTACHMENT_TOO_LARGE(
-        maxAttachmentSize ? formatFileSize.formatFileSize(maxAttachmentSize, $.locale) : void 0
-      );
+      if (attachment.error.origin === "server") {
+        description = $.ATTACHMENT_TOO_LARGE();
+      } else {
+        description = $.ATTACHMENT_TOO_LARGE(
+          maxAttachmentSize ? formatFileSize.formatFileSize(maxAttachmentSize, $.locale) : void 0
+        );
+      }
     } else {
       description = $.ATTACHMENT_ERROR(attachment.error);
     }

package/dist/components/internal/Attachment.js.map

@@ -1 +1 @@
-{"version":3,"file":"Attachment.js","sources":["../../../src/components/internal/Attachment.tsx"],"sourcesContent":["\"use client\";\n\nimport type { CommentMixedAttachment } from \"@liveblocks/core\";\nimport { useAttachmentUrl, useIsInsideRoom } from \"@liveblocks/react\";\nimport type {\n  ComponentPropsWithoutRef,\n  KeyboardEvent,\n  MouseEventHandler,\n  PointerEvent,\n} from \"react\";\nimport React, { memo, useCallback, useMemo, useState } from \"react\";\n\nimport { CrossIcon } from \"../../icons/Cross\";\nimport { SpinnerIcon } from \"../../icons/Spinner\";\nimport { WarningIcon } from \"../../icons/Warning\";\nimport type { Overrides } from \"../../overrides\";\nimport { useOverrides } from \"../../overrides\";\nimport { AttachmentTooLargeError } from \"../../primitives\";\nimport { useComposerAttachmentsContextOrNull } from \"../../primitives/Composer/contexts\";\nimport { classNames } from \"../../utils/class-names\";\nimport { formatFileSize } from \"../../utils/format-file-size\";\nimport { Tooltip } from \"./Tooltip\";\n\nconst MAX_DISPLAYED_MEDIA_SIZE = 60 * 1024 * 1024; // 60 MB\n\ninterface AttachmentProps extends ComponentPropsWithoutRef<\"div\"> {\n  attachment: CommentMixedAttachment;\n  onDeleteClick?: MouseEventHandler<HTMLButtonElement>;\n  preventFocusOnDelete?: boolean;\n  overrides?: Partial<Overrides>;\n}\n\nconst fileExtensionRegex = /^(.+?)(\\.[^.]+)?$/;\n\nfunction splitFileName(name: string) {\n  const match = name.match(fileExtensionRegex);\n\n  return { base: match?.[1] ?? name, extension: match?.[2] };\n}\n\nfunction getAttachmentIconGlyph(mimeType: string) {\n  if (\n    mimeType === \"application/zip\" ||\n    mimeType === \"application/gzip\" ||\n    mimeType === \"application/vnd.rar\" ||\n    mimeType === \"application/x-rar-compressed\" ||\n    mimeType === \"application/x-7z-compressed\" ||\n    mimeType === \"application/x-zip-compressed\" ||\n    mimeType === \"application/x-tar\" ||\n    mimeType === \"application/x-bzip\" ||\n    mimeType === \"application/x-bzip2\"\n  ) {\n    return (\n      <path d=\"M13 15h2v1h-1.5a.5.5 0 0 0 0 1H15v1h-1.5a.5.5 0 0 0 0 1H15v1h-1.5a.5.5 0 0 0 0 1h1a.5.5 0 0 0 .5-.5V20h1.5a.5.5 0 0 0 0-1H15v-1h1.5a.5.5 0 0 0 0-1H15v-1h1.5a.5.5 0 0 0 .5-.5V15a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2Z\" />\n    );\n  }\n\n  if (\n    mimeType.startsWith(\"text/\") ||\n    mimeType.startsWith(\"font/\") ||\n    mimeType.startsWith(\"application/\")\n  ) {\n    return (\n      <path d=\"M10 16a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5Zm0 2a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5Zm0 2a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5Zm0 2a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 0 1h-8a.5.5 0 0 1-.5-.5Z\" />\n    );\n  }\n\n  if (mimeType.startsWith(\"image/\")) {\n    return (\n      <path d=\"M12 16h6a1 1 0 0 1 1 1v3l-1.293-1.293a1 1 0 0 0-1.414 0L14.09 20.91l-.464-.386a1 1 0 0 0-1.265-.013l-1.231.985A.995.995 0 0 1 11 21v-4a1 1 0 0 1 1-1Zm-2 1a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-6a2 2 0 0 1-2-2v-4Zm3 2a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z\" />\n    );\n  }\n\n  if (mimeType.startsWith(\"video/\")) {\n    return (\n      <path d=\"M12 15.71a1 1 0 0 1 1.49-.872l4.96 2.79a1 1 0 0 1 0 1.744l-4.96 2.79A1 1 0 0 1 12 21.29v-5.58Z\" />\n    );\n  }\n\n  if (mimeType.startsWith(\"audio/\")) {\n    return (\n      <path d=\"M15 15a.5.5 0 0 0-.5.5v7a.5.5 0 0 0 1 0v-7a.5.5 0 0 0-.5-.5Zm-2.5 2.5a.5.5 0 0 1 1 0v3a.5.5 0 0 1-1 0v-3Zm-2 1a.5.5 0 0 1 1 0v1a.5.5 0 0 1-1 0v-1Zm6-1a.5.5 0 0 1 1 0v3a.5.5 0 0 1-1 0v-3ZM19 16a.5.5 0 0 0-.5.5v5a.5.5 0 0 0 1 0v-5a.5.5 0 0 0-.5-.5Z\" />\n    );\n  }\n\n  return null;\n}\n\nconst AttachmentFileIcon = memo(({ mimeType }: { mimeType: string }) => {\n  const iconGlyph = useMemo(() => getAttachmentIconGlyph(mimeType), [mimeType]);\n\n  return (\n    <svg\n      className=\"lb-attachment-icon\"\n      width={30}\n      height={30}\n      viewBox=\"0 0 30 30\"\n      fill=\"currentColor\"\n      fillRule=\"evenodd\"\n      clipRule=\"evenodd\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M6 5a2 2 0 0 1 2-2h5.843a4 4 0 0 1 2.829 1.172l6.156 6.156A4 4 0 0 1 24 13.157V25a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V5Z\"\n        className=\"lb-attachment-icon-shadow\"\n      />\n      <path\n        d=\"M6 5a2 2 0 0 1 2-2h5.843a4 4 0 0 1 2.829 1.172l6.156 6.156A4 4 0 0 1 24 13.157V25a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V5Z\"\n        className=\"lb-attachment-icon-background\"\n      />\n      <path\n        d=\"M14.382 3.037a4 4 0 0 1 2.29 1.135l6.156 6.157a4 4 0 0 1 1.136 2.289A2 2 0 0 0 22 11h-4a2 2 0 0 1-2-2V5a2 2 0 0 0-1.618-1.963Z\"\n        className=\"lb-attachment-icon-fold\"\n      />\n\n      {iconGlyph && <g className=\"lb-attachment-icon-glyph\">{iconGlyph}</g>}\n    </svg>\n  );\n});\n\nfunction AttachmentImagePreview({\n  attachment,\n}: {\n  attachment: CommentMixedAttachment;\n}) {\n  const { url } = useAttachmentUrl(attachment.id);\n  const [isLoaded, setLoaded] = useState(false);\n\n  const handleLoad = useCallback(() => {\n    setLoaded(true);\n  }, []);\n\n  return (\n    <>\n      {!isLoaded ? <SpinnerIcon /> : null}\n      {url ? (\n        <div\n          className=\"lb-attachment-preview-media\"\n          data-hidden={!isLoaded ? \"\" : undefined}\n        >\n          <img src={url} loading=\"lazy\" onLoad={handleLoad} />\n        </div>\n      ) : null}\n    </>\n  );\n}\n\nfunction AttachmentVideoPreview({\n  attachment,\n}: {\n  attachment: CommentMixedAttachment;\n}) {\n  const { url } = useAttachmentUrl(attachment.id);\n  const [isLoaded, setLoaded] = useState(false);\n\n  const handleLoad = useCallback(() => {\n    setLoaded(true);\n  }, []);\n\n  return (\n    <>\n      {!isLoaded ? <SpinnerIcon /> : null}\n      {url ? (\n        <div\n          className=\"lb-attachment-preview-media\"\n          data-hidden={!isLoaded ? \"\" : undefined}\n        >\n          <video src={url} onLoadedData={handleLoad} />\n        </div>\n      ) : null}\n    </>\n  );\n}\n\nfunction AttachmentPreview({\n  attachment,\n}: {\n  attachment: CommentMixedAttachment;\n}) {\n  const isInsideRoom = useIsInsideRoom();\n  const isUploaded =\n    attachment.type === \"attachment\" || attachment.status === \"uploaded\";\n\n  if (\n    isUploaded &&\n    isInsideRoom &&\n    attachment.size <= MAX_DISPLAYED_MEDIA_SIZE\n  ) {\n    if (attachment.mimeType.startsWith(\"image/\")) {\n      return <AttachmentImagePreview attachment={attachment} />;\n    }\n\n    if (attachment.mimeType.startsWith(\"video/\")) {\n      return <AttachmentVideoPreview attachment={attachment} />;\n    }\n  }\n\n  return <AttachmentFileIcon mimeType={attachment.mimeType} />;\n}\n\nfunction AttachmentName({\n  attachment,\n}: {\n  attachment: CommentMixedAttachment;\n}) {\n  const { base: fileBaseName, extension: fileExtension } = useMemo(() => {\n    return splitFileName(attachment.name);\n  }, [attachment.name]);\n\n  return (\n    <span className=\"lb-attachment-name\" title={attachment.name}>\n      <span className=\"lb-attachment-name-base\">{fileBaseName}</span>\n      {fileExtension && (\n        <span className=\"lb-attachment-name-extension\">{fileExtension}</span>\n      )}\n    </span>\n  );\n}\n\nfunction useClickOnKeyDown(\n  onKeyDown?: (event: KeyboardEvent<HTMLDivElement>) => void\n) {\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLDivElement>) => {\n      onKeyDown?.(event);\n\n      if (event.isDefaultPrevented()) {\n        return;\n      }\n\n      // Simulate a click event on Enter or Space because it's a div\n      if (event.key === \"Enter\" || event.key === \" \") {\n        event.preventDefault();\n\n        const clickEvent = new MouseEvent(\"click\", {\n          bubbles: true,\n          cancelable: true,\n          view: window,\n        });\n        event.target.dispatchEvent(clickEvent);\n      }\n    },\n    [onKeyDown]\n  );\n\n  return handleKeyDown;\n}\n\nfunction useAttachmentContent(\n  attachment: CommentMixedAttachment,\n  overrides?: Partial<Overrides>\n) {\n  const $ = useOverrides(overrides);\n  const composerAttachmentsContext = useComposerAttachmentsContextOrNull();\n  const isInComposer = Boolean(composerAttachmentsContext);\n  const maxAttachmentSize = composerAttachmentsContext?.maxAttachmentSize;\n\n  const status =\n    attachment.type === \"localAttachment\" ? attachment.status : undefined;\n  const isUploading = status === \"uploading\";\n  const isError = status === \"error\";\n\n  let description: string;\n\n  if (attachment.type === \"localAttachment\" && attachment.status === \"error\") {\n    if (attachment.error instanceof AttachmentTooLargeError) {\n      description = $.ATTACHMENT_TOO_LARGE(\n        maxAttachmentSize\n          ? formatFileSize(maxAttachmentSize, $.locale)\n          : undefined\n      );\n    } else {\n      description = $.ATTACHMENT_ERROR(attachment.error);\n    }\n  } else {\n    description = formatFileSize(attachment.size, $.locale);\n  }\n\n  const deleteLabel = isInComposer\n    ? $.COMPOSER_REMOVE_ATTACHMENT\n    : $.COMMENT_DELETE_ATTACHMENT;\n\n  return {\n    isUploading,\n    isError,\n    description,\n    deleteLabel,\n  };\n}\n\nexport function MediaAttachment({\n  attachment,\n  overrides,\n  onClick,\n  onDeleteClick,\n  preventFocusOnDelete,\n  className,\n  onKeyDown,\n  ...props\n}: AttachmentProps) {\n  const { isUploading, isError, description, deleteLabel } =\n    useAttachmentContent(attachment, overrides);\n\n  const handleDeletePointerDown = useCallback(\n    (event: PointerEvent<HTMLButtonElement>) => {\n      if (preventFocusOnDelete) {\n        event.preventDefault();\n      }\n    },\n    [preventFocusOnDelete]\n  );\n\n  const handleKeyDown = useClickOnKeyDown(onKeyDown);\n\n  return (\n    <div\n      className={classNames(\"lb-attachment lb-media-attachment\", className)}\n      data-error={isError ? \"\" : undefined}\n      {...props}\n      role={onClick ? \"button\" : undefined}\n      onClick={onClick}\n      tabIndex={onClick ? 0 : -1}\n      onKeyDown={onClick ? handleKeyDown : undefined}\n    >\n      <div className=\"lb-attachment-preview\">\n        {isUploading ? (\n          <SpinnerIcon />\n        ) : isError ? (\n          <WarningIcon />\n        ) : (\n          <AttachmentPreview attachment={attachment} />\n        )}\n      </div>\n      <div className=\"lb-attachment-details\">\n        <AttachmentName attachment={attachment} />\n        <span className=\"lb-attachment-description\" title={description}>\n          {description}\n        </span>\n      </div>\n      {onDeleteClick && (\n        <Tooltip content={deleteLabel}>\n          <button\n            type=\"button\"\n            className=\"lb-attachment-delete\"\n            onClick={onDeleteClick}\n            onPointerDown={handleDeletePointerDown}\n            aria-label={deleteLabel}\n          >\n            <CrossIcon />\n          </button>\n        </Tooltip>\n      )}\n    </div>\n  );\n}\n\nexport function FileAttachment({\n  attachment,\n  overrides,\n  onClick,\n  onDeleteClick,\n  preventFocusOnDelete,\n  className,\n  onKeyDown,\n  ...props\n}: AttachmentProps) {\n  const { isUploading, isError, description, deleteLabel } =\n    useAttachmentContent(attachment, overrides);\n\n  const handleDeletePointerDown = useCallback(\n    (event: PointerEvent<HTMLButtonElement>) => {\n      if (preventFocusOnDelete) {\n        event.preventDefault();\n      }\n    },\n    [preventFocusOnDelete]\n  );\n\n  const handleKeyDown = useClickOnKeyDown(onKeyDown);\n\n  return (\n    <div\n      className={classNames(\"lb-attachment lb-file-attachment\", className)}\n      data-error={isError ? \"\" : undefined}\n      {...props}\n      role={onClick ? \"button\" : undefined}\n      onClick={onClick}\n      tabIndex={onClick ? 0 : -1}\n      onKeyDown={onClick ? handleKeyDown : undefined}\n    >\n      <div className=\"lb-attachment-preview\">\n        {isUploading ? (\n          <SpinnerIcon />\n        ) : isError ? (\n          <WarningIcon />\n        ) : (\n          <AttachmentPreview attachment={attachment} />\n        )}\n      </div>\n      <div className=\"lb-attachment-details\">\n        <AttachmentName attachment={attachment} />\n        <span className=\"lb-attachment-description\" title={description}>\n          {description}\n        </span>\n      </div>\n      {onDeleteClick && (\n        <Tooltip content={deleteLabel}>\n          <button\n            type=\"button\"\n            className=\"lb-attachment-delete\"\n            onClick={onDeleteClick}\n            onPointerDown={handleDeletePointerDown}\n            aria-label={deleteLabel}\n          >\n            <CrossIcon />\n          </button>\n        </Tooltip>\n      )}\n    </div>\n  );\n}\n\nexport function separateMediaAttachments<T extends CommentMixedAttachment>(\n  attachments: T[]\n) {\n  const mediaAttachments: T[] = [];\n  const fileAttachments: T[] = [];\n\n  for (const attachment of attachments) {\n    if (\n      (attachment.mimeType.startsWith(\"image/\") ||\n        attachment.mimeType.startsWith(\"video/\")) &&\n      attachment.size <= MAX_DISPLAYED_MEDIA_SIZE\n    ) {\n      mediaAttachments.push(attachment);\n    } else {\n      fileAttachments.push(attachment);\n    }\n  }\n\n  return {\n    mediaAttachments,\n    fileAttachments,\n  };\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAuBA;AASA;AAEA;AACE;AAEA;AACF;AAEA;AACE;AAWE;AACG;AAAO;AAAoP;AAIhQ;AAKE;AACG;AAAO;AAAiP;AAI7P;AACE;AACG;AAAO;AAAiQ;AAI7Q;AACE;AACG;AAAO;AAAiG;AAI7G;AACE;AACG;AAAO;AAAyP;AAIrQ;AACF;AAEA;AACE;AAEA;AACG;AACW;AACH;AACC;AACA;AACH;AACI;AACA;AACH;AAEL;AACG;AACQ;AAEX;AACG;AACQ;AAEX;AACG;AACQ;AAGG;AAAY;AAGjC;AAEA;AAAgC;AAEhC;AAGE;AACA;AAEA;AACE;AAAc;AAGhB;AAIO;AACW;AACoB;AAE7B;AAAS;AAAa;AAAe;AAKhD;AAEA;AAAgC;AAEhC;AAGE;AACA;AAEA;AACE;AAAc;AAGhB;AAIO;AACW;AACoB;AAE7B;AAAW;AAAmB;AAKzC;AAEA;AAA2B;AAE3B;AAGE;AACA;AAGA;AAKE;AACE;AAAQ;AAAuB;AAAwB;AAGzD;AACE;AAAQ;AAAuB;AAAwB;AACzD;AAGF;AAAQ;AAAwC;AAClD;AAEA;AAAwB;AAExB;AAGE;AACE;AAAoC;AAGtC;AACG;AAAe;AAAuC;AACpD;AAAe;AAEb;AAAe;AAIxB;AAEA;AAGE;AAAsB;AAElB;AAEA;AACE;AAAA;AAIF;AACE;AAEA;AAA2C;AAChC;AACG;AACN;AAER;AAAqC;AACvC;AACF;AACU;AAGZ;AACF;AAEA;AAIE;AACA;AACA;AACA;AAEA;AAEA;AACA;AAEA;AAEA;AACE;AACE;AAAgB;AAGV;AACN;AAEA;AAAiD;AACnD;AAEA;AAAsD;AAGxD;AAIA;AAAO;AACL;AACA;AACA;AACA;AAEJ;AAEO;AAAyB;AAC9B;AACA;AACA;AACA;AACA;AACA;AACA;AAEF;AACE;AAGA;AAAgC;AAE5B;AACE;AAAqB;AACvB;AACF;AACqB;AAGvB;AAEA;AACG;AACqE;AACzC;AACvB;AACuB;AAC3B;AACwB;AACa;AAEpC;AAAc;AAMV;AAAkB;AAGtB;AAAc;AACZ;AAAe;AACf;AAAe;AAAmC;AAKlD;AAAiB;AACf;AACM;AACK;AACD;AACM;AACH;AAQxB;AAEO;AAAwB;AAC7B;AACA;AACA;AACA;AACA;AACA;AACA;AAEF;AACE;AAGA;AAAgC;AAE5B;AACE;AAAqB;AACvB;AACF;AACqB;AAGvB;AAEA;AACG;AACoE;AACxC;AACvB;AACuB;AAC3B;AACwB;AACa;AAEpC;AAAc;AAMV;AAAkB;AAGtB;AAAc;AACZ;AAAe;AACf;AAAe;AAAmC;AAKlD;AAAiB;AACf;AACM;AACK;AACD;AACM;AACH;AAQxB;AAEO;AAGL;AACA;AAEA;AACE;AAKE;AAAgC;AAEhC;AAA+B;AACjC;AAGF;AAAO;AACL;AACA;AAEJ;;;;"}
+{"version":3,"file":"Attachment.js","sources":["../../../src/components/internal/Attachment.tsx"],"sourcesContent":["\"use client\";\n\nimport type { CommentMixedAttachment } from \"@liveblocks/core\";\nimport { useAttachmentUrl, useIsInsideRoom } from \"@liveblocks/react\";\nimport type {\n  ComponentPropsWithoutRef,\n  KeyboardEvent,\n  MouseEventHandler,\n  PointerEvent,\n} from \"react\";\nimport React, { memo, useCallback, useMemo, useState } from \"react\";\n\nimport { CrossIcon } from \"../../icons/Cross\";\nimport { SpinnerIcon } from \"../../icons/Spinner\";\nimport { WarningIcon } from \"../../icons/Warning\";\nimport type { Overrides } from \"../../overrides\";\nimport { useOverrides } from \"../../overrides\";\nimport { AttachmentTooLargeError } from \"../../primitives\";\nimport { useComposerAttachmentsContextOrNull } from \"../../primitives/Composer/contexts\";\nimport { classNames } from \"../../utils/class-names\";\nimport { formatFileSize } from \"../../utils/format-file-size\";\nimport { Tooltip } from \"./Tooltip\";\n\nconst MAX_DISPLAYED_MEDIA_SIZE = 60 * 1024 * 1024; // 60 MB\n\ninterface AttachmentProps extends ComponentPropsWithoutRef<\"div\"> {\n  attachment: CommentMixedAttachment;\n  onDeleteClick?: MouseEventHandler<HTMLButtonElement>;\n  preventFocusOnDelete?: boolean;\n  overrides?: Partial<Overrides>;\n}\n\nconst fileExtensionRegex = /^(.+?)(\\.[^.]+)?$/;\n\nfunction splitFileName(name: string) {\n  const match = name.match(fileExtensionRegex);\n\n  return { base: match?.[1] ?? name, extension: match?.[2] };\n}\n\nfunction getAttachmentIconGlyph(mimeType: string) {\n  if (\n    mimeType === \"application/zip\" ||\n    mimeType === \"application/gzip\" ||\n    mimeType === \"application/vnd.rar\" ||\n    mimeType === \"application/x-rar-compressed\" ||\n    mimeType === \"application/x-7z-compressed\" ||\n    mimeType === \"application/x-zip-compressed\" ||\n    mimeType === \"application/x-tar\" ||\n    mimeType === \"application/x-bzip\" ||\n    mimeType === \"application/x-bzip2\"\n  ) {\n    return (\n      <path d=\"M13 15h2v1h-1.5a.5.5 0 0 0 0 1H15v1h-1.5a.5.5 0 0 0 0 1H15v1h-1.5a.5.5 0 0 0 0 1h1a.5.5 0 0 0 .5-.5V20h1.5a.5.5 0 0 0 0-1H15v-1h1.5a.5.5 0 0 0 0-1H15v-1h1.5a.5.5 0 0 0 .5-.5V15a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2Z\" />\n    );\n  }\n\n  if (\n    mimeType.startsWith(\"text/\") ||\n    mimeType.startsWith(\"font/\") ||\n    mimeType.startsWith(\"application/\")\n  ) {\n    return (\n      <path d=\"M10 16a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5Zm0 2a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5Zm0 2a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5Zm0 2a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 0 1h-8a.5.5 0 0 1-.5-.5Z\" />\n    );\n  }\n\n  if (mimeType.startsWith(\"image/\")) {\n    return (\n      <path d=\"M12 16h6a1 1 0 0 1 1 1v3l-1.293-1.293a1 1 0 0 0-1.414 0L14.09 20.91l-.464-.386a1 1 0 0 0-1.265-.013l-1.231.985A.995.995 0 0 1 11 21v-4a1 1 0 0 1 1-1Zm-2 1a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-6a2 2 0 0 1-2-2v-4Zm3 2a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z\" />\n    );\n  }\n\n  if (mimeType.startsWith(\"video/\")) {\n    return (\n      <path d=\"M12 15.71a1 1 0 0 1 1.49-.872l4.96 2.79a1 1 0 0 1 0 1.744l-4.96 2.79A1 1 0 0 1 12 21.29v-5.58Z\" />\n    );\n  }\n\n  if (mimeType.startsWith(\"audio/\")) {\n    return (\n      <path d=\"M15 15a.5.5 0 0 0-.5.5v7a.5.5 0 0 0 1 0v-7a.5.5 0 0 0-.5-.5Zm-2.5 2.5a.5.5 0 0 1 1 0v3a.5.5 0 0 1-1 0v-3Zm-2 1a.5.5 0 0 1 1 0v1a.5.5 0 0 1-1 0v-1Zm6-1a.5.5 0 0 1 1 0v3a.5.5 0 0 1-1 0v-3ZM19 16a.5.5 0 0 0-.5.5v5a.5.5 0 0 0 1 0v-5a.5.5 0 0 0-.5-.5Z\" />\n    );\n  }\n\n  return null;\n}\n\nconst AttachmentFileIcon = memo(({ mimeType }: { mimeType: string }) => {\n  const iconGlyph = useMemo(() => getAttachmentIconGlyph(mimeType), [mimeType]);\n\n  return (\n    <svg\n      className=\"lb-attachment-icon\"\n      width={30}\n      height={30}\n      viewBox=\"0 0 30 30\"\n      fill=\"currentColor\"\n      fillRule=\"evenodd\"\n      clipRule=\"evenodd\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M6 5a2 2 0 0 1 2-2h5.843a4 4 0 0 1 2.829 1.172l6.156 6.156A4 4 0 0 1 24 13.157V25a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V5Z\"\n        className=\"lb-attachment-icon-shadow\"\n      />\n      <path\n        d=\"M6 5a2 2 0 0 1 2-2h5.843a4 4 0 0 1 2.829 1.172l6.156 6.156A4 4 0 0 1 24 13.157V25a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V5Z\"\n        className=\"lb-attachment-icon-background\"\n      />\n      <path\n        d=\"M14.382 3.037a4 4 0 0 1 2.29 1.135l6.156 6.157a4 4 0 0 1 1.136 2.289A2 2 0 0 0 22 11h-4a2 2 0 0 1-2-2V5a2 2 0 0 0-1.618-1.963Z\"\n        className=\"lb-attachment-icon-fold\"\n      />\n\n      {iconGlyph && <g className=\"lb-attachment-icon-glyph\">{iconGlyph}</g>}\n    </svg>\n  );\n});\n\nfunction AttachmentImagePreview({\n  attachment,\n}: {\n  attachment: CommentMixedAttachment;\n}) {\n  const { url } = useAttachmentUrl(attachment.id);\n  const [isLoaded, setLoaded] = useState(false);\n\n  const handleLoad = useCallback(() => {\n    setLoaded(true);\n  }, []);\n\n  return (\n    <>\n      {!isLoaded ? <SpinnerIcon /> : null}\n      {url ? (\n        <div\n          className=\"lb-attachment-preview-media\"\n          data-hidden={!isLoaded ? \"\" : undefined}\n        >\n          <img src={url} loading=\"lazy\" onLoad={handleLoad} />\n        </div>\n      ) : null}\n    </>\n  );\n}\n\nfunction AttachmentVideoPreview({\n  attachment,\n}: {\n  attachment: CommentMixedAttachment;\n}) {\n  const { url } = useAttachmentUrl(attachment.id);\n  const [isLoaded, setLoaded] = useState(false);\n\n  const handleLoad = useCallback(() => {\n    setLoaded(true);\n  }, []);\n\n  return (\n    <>\n      {!isLoaded ? <SpinnerIcon /> : null}\n      {url ? (\n        <div\n          className=\"lb-attachment-preview-media\"\n          data-hidden={!isLoaded ? \"\" : undefined}\n        >\n          <video src={url} onLoadedData={handleLoad} />\n        </div>\n      ) : null}\n    </>\n  );\n}\n\nfunction AttachmentPreview({\n  attachment,\n}: {\n  attachment: CommentMixedAttachment;\n}) {\n  const isInsideRoom = useIsInsideRoom();\n  const isUploaded =\n    attachment.type === \"attachment\" || attachment.status === \"uploaded\";\n\n  if (\n    isUploaded &&\n    isInsideRoom &&\n    attachment.size <= MAX_DISPLAYED_MEDIA_SIZE\n  ) {\n    if (attachment.mimeType.startsWith(\"image/\")) {\n      return <AttachmentImagePreview attachment={attachment} />;\n    }\n\n    if (attachment.mimeType.startsWith(\"video/\")) {\n      return <AttachmentVideoPreview attachment={attachment} />;\n    }\n  }\n\n  return <AttachmentFileIcon mimeType={attachment.mimeType} />;\n}\n\nfunction AttachmentName({\n  attachment,\n}: {\n  attachment: CommentMixedAttachment;\n}) {\n  const { base: fileBaseName, extension: fileExtension } = useMemo(() => {\n    return splitFileName(attachment.name);\n  }, [attachment.name]);\n\n  return (\n    <span className=\"lb-attachment-name\" title={attachment.name}>\n      <span className=\"lb-attachment-name-base\">{fileBaseName}</span>\n      {fileExtension && (\n        <span className=\"lb-attachment-name-extension\">{fileExtension}</span>\n      )}\n    </span>\n  );\n}\n\nfunction useClickOnKeyDown(\n  onKeyDown?: (event: KeyboardEvent<HTMLDivElement>) => void\n) {\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLDivElement>) => {\n      onKeyDown?.(event);\n\n      if (event.isDefaultPrevented()) {\n        return;\n      }\n\n      // Simulate a click event on Enter or Space because it's a div\n      if (event.key === \"Enter\" || event.key === \" \") {\n        event.preventDefault();\n\n        const clickEvent = new MouseEvent(\"click\", {\n          bubbles: true,\n          cancelable: true,\n          view: window,\n        });\n        event.target.dispatchEvent(clickEvent);\n      }\n    },\n    [onKeyDown]\n  );\n\n  return handleKeyDown;\n}\n\nfunction useAttachmentContent(\n  attachment: CommentMixedAttachment,\n  overrides?: Partial<Overrides>\n) {\n  const $ = useOverrides(overrides);\n  const composerAttachmentsContext = useComposerAttachmentsContextOrNull();\n  const isInComposer = Boolean(composerAttachmentsContext);\n  const maxAttachmentSize = composerAttachmentsContext?.maxAttachmentSize;\n\n  const status =\n    attachment.type === \"localAttachment\" ? attachment.status : undefined;\n  const isUploading = status === \"uploading\";\n  const isError = status === \"error\";\n\n  let description: string;\n\n  if (attachment.type === \"localAttachment\" && attachment.status === \"error\") {\n    if (attachment.error instanceof AttachmentTooLargeError) {\n      if (attachment.error.origin === \"server\") {\n        description = $.ATTACHMENT_TOO_LARGE();\n      } else {\n        description = $.ATTACHMENT_TOO_LARGE(\n          maxAttachmentSize\n            ? formatFileSize(maxAttachmentSize, $.locale)\n            : undefined\n        );\n      }\n    } else {\n      description = $.ATTACHMENT_ERROR(attachment.error);\n    }\n  } else {\n    description = formatFileSize(attachment.size, $.locale);\n  }\n\n  const deleteLabel = isInComposer\n    ? $.COMPOSER_REMOVE_ATTACHMENT\n    : $.COMMENT_DELETE_ATTACHMENT;\n\n  return {\n    isUploading,\n    isError,\n    description,\n    deleteLabel,\n  };\n}\n\nexport function MediaAttachment({\n  attachment,\n  overrides,\n  onClick,\n  onDeleteClick,\n  preventFocusOnDelete,\n  className,\n  onKeyDown,\n  ...props\n}: AttachmentProps) {\n  const { isUploading, isError, description, deleteLabel } =\n    useAttachmentContent(attachment, overrides);\n\n  const handleDeletePointerDown = useCallback(\n    (event: PointerEvent<HTMLButtonElement>) => {\n      if (preventFocusOnDelete) {\n        event.preventDefault();\n      }\n    },\n    [preventFocusOnDelete]\n  );\n\n  const handleKeyDown = useClickOnKeyDown(onKeyDown);\n\n  return (\n    <div\n      className={classNames(\"lb-attachment lb-media-attachment\", className)}\n      data-error={isError ? \"\" : undefined}\n      {...props}\n      role={onClick ? \"button\" : undefined}\n      onClick={onClick}\n      tabIndex={onClick ? 0 : -1}\n      onKeyDown={onClick ? handleKeyDown : undefined}\n    >\n      <div className=\"lb-attachment-preview\">\n        {isUploading ? (\n          <SpinnerIcon />\n        ) : isError ? (\n          <WarningIcon />\n        ) : (\n          <AttachmentPreview attachment={attachment} />\n        )}\n      </div>\n      <div className=\"lb-attachment-details\">\n        <AttachmentName attachment={attachment} />\n        <span className=\"lb-attachment-description\" title={description}>\n          {description}\n        </span>\n      </div>\n      {onDeleteClick && (\n        <Tooltip content={deleteLabel}>\n          <button\n            type=\"button\"\n            className=\"lb-attachment-delete\"\n            onClick={onDeleteClick}\n            onPointerDown={handleDeletePointerDown}\n            aria-label={deleteLabel}\n          >\n            <CrossIcon />\n          </button>\n        </Tooltip>\n      )}\n    </div>\n  );\n}\n\nexport function FileAttachment({\n  attachment,\n  overrides,\n  onClick,\n  onDeleteClick,\n  preventFocusOnDelete,\n  className,\n  onKeyDown,\n  ...props\n}: AttachmentProps) {\n  const { isUploading, isError, description, deleteLabel } =\n    useAttachmentContent(attachment, overrides);\n\n  const handleDeletePointerDown = useCallback(\n    (event: PointerEvent<HTMLButtonElement>) => {\n      if (preventFocusOnDelete) {\n        event.preventDefault();\n      }\n    },\n    [preventFocusOnDelete]\n  );\n\n  const handleKeyDown = useClickOnKeyDown(onKeyDown);\n\n  return (\n    <div\n      className={classNames(\"lb-attachment lb-file-attachment\", className)}\n      data-error={isError ? \"\" : undefined}\n      {...props}\n      role={onClick ? \"button\" : undefined}\n      onClick={onClick}\n      tabIndex={onClick ? 0 : -1}\n      onKeyDown={onClick ? handleKeyDown : undefined}\n    >\n      <div className=\"lb-attachment-preview\">\n        {isUploading ? (\n          <SpinnerIcon />\n        ) : isError ? (\n          <WarningIcon />\n        ) : (\n          <AttachmentPreview attachment={attachment} />\n        )}\n      </div>\n      <div className=\"lb-attachment-details\">\n        <AttachmentName attachment={attachment} />\n        <span className=\"lb-attachment-description\" title={description}>\n          {description}\n        </span>\n      </div>\n      {onDeleteClick && (\n        <Tooltip content={deleteLabel}>\n          <button\n            type=\"button\"\n            className=\"lb-attachment-delete\"\n            onClick={onDeleteClick}\n            onPointerDown={handleDeletePointerDown}\n            aria-label={deleteLabel}\n          >\n            <CrossIcon />\n          </button>\n        </Tooltip>\n      )}\n    </div>\n  );\n}\n\nexport function separateMediaAttachments<T extends CommentMixedAttachment>(\n  attachments: T[]\n) {\n  const mediaAttachments: T[] = [];\n  const fileAttachments: T[] = [];\n\n  for (const attachment of attachments) {\n    if (\n      (attachment.mimeType.startsWith(\"image/\") ||\n        attachment.mimeType.startsWith(\"video/\")) &&\n      attachment.size <= MAX_DISPLAYED_MEDIA_SIZE\n    ) {\n      mediaAttachments.push(attachment);\n    } else {\n      fileAttachments.push(attachment);\n    }\n  }\n\n  return {\n    mediaAttachments,\n    fileAttachments,\n  };\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAuBA;AASA;AAEA;AACE;AAEA;AACF;AAEA;AACE;AAWE;AACG;AAAO;AAAoP;AAIhQ;AAKE;AACG;AAAO;AAAiP;AAI7P;AACE;AACG;AAAO;AAAiQ;AAI7Q;AACE;AACG;AAAO;AAAiG;AAI7G;AACE;AACG;AAAO;AAAyP;AAIrQ;AACF;AAEA;AACE;AAEA;AACG;AACW;AACH;AACC;AACA;AACH;AACI;AACA;AACH;AAEL;AACG;AACQ;AAEX;AACG;AACQ;AAEX;AACG;AACQ;AAGG;AAAY;AAGjC;AAEA;AAAgC;AAEhC;AAGE;AACA;AAEA;AACE;AAAc;AAGhB;AAIO;AACW;AACoB;AAE7B;AAAS;AAAa;AAAe;AAKhD;AAEA;AAAgC;AAEhC;AAGE;AACA;AAEA;AACE;AAAc;AAGhB;AAIO;AACW;AACoB;AAE7B;AAAW;AAAmB;AAKzC;AAEA;AAA2B;AAE3B;AAGE;AACA;AAGA;AAKE;AACE;AAAQ;AAAuB;AAAwB;AAGzD;AACE;AAAQ;AAAuB;AAAwB;AACzD;AAGF;AAAQ;AAAwC;AAClD;AAEA;AAAwB;AAExB;AAGE;AACE;AAAoC;AAGtC;AACG;AAAe;AAAuC;AACpD;AAAe;AAEb;AAAe;AAIxB;AAEA;AAGE;AAAsB;AAElB;AAEA;AACE;AAAA;AAIF;AACE;AAEA;AAA2C;AAChC;AACG;AACN;AAER;AAAqC;AACvC;AACF;AACU;AAGZ;AACF;AAEA;AAIE;AACA;AACA;AACA;AAEA;AAEA;AACA;AAEA;AAEA;AACE;AACE;AACE;AAAqC;AAErC;AAAgB;AAGV;AACN;AACF;AAEA;AAAiD;AACnD;AAEA;AAAsD;AAGxD;AAIA;AAAO;AACL;AACA;AACA;AACA;AAEJ;AAEO;AAAyB;AAC9B;AACA;AACA;AACA;AACA;AACA;AACA;AAEF;AACE;AAGA;AAAgC;AAE5B;AACE;AAAqB;AACvB;AACF;AACqB;AAGvB;AAEA;AACG;AACqE;AACzC;AACvB;AACuB;AAC3B;AACwB;AACa;AAEpC;AAAc;AAMV;AAAkB;AAGtB;AAAc;AACZ;AAAe;AACf;AAAe;AAAmC;AAKlD;AAAiB;AACf;AACM;AACK;AACD;AACM;AACH;AAQxB;AAEO;AAAwB;AAC7B;AACA;AACA;AACA;AACA;AACA;AACA;AAEF;AACE;AAGA;AAAgC;AAE5B;AACE;AAAqB;AACvB;AACF;AACqB;AAGvB;AAEA;AACG;AACoE;AACxC;AACvB;AACuB;AAC3B;AACwB;AACa;AAEpC;AAAc;AAMV;AAAkB;AAGtB;AAAc;AACZ;AAAe;AACf;AAAe;AAAmC;AAKlD;AAAiB;AACf;AACM;AACK;AACD;AACM;AACH;AAQxB;AAEO;AAGL;AACA;AAEA;AACE;AAKE;AAAgC;AAEhC;AAA+B;AACjC;AAGF;AAAO;AACL;AACA;AAEJ;;;;"}

package/dist/components/internal/Attachment.mjs

@@ -175,9 +175,13 @@ function useAttachmentContent(attachment, overrides) {
   let description;
   if (attachment.type === "localAttachment" && attachment.status === "error") {
     if (attachment.error instanceof AttachmentTooLargeError) {
-      description = $.ATTACHMENT_TOO_LARGE(
-        maxAttachmentSize ? formatFileSize(maxAttachmentSize, $.locale) : void 0
-      );
+      if (attachment.error.origin === "server") {
+        description = $.ATTACHMENT_TOO_LARGE();
+      } else {
+        description = $.ATTACHMENT_TOO_LARGE(
+          maxAttachmentSize ? formatFileSize(maxAttachmentSize, $.locale) : void 0
+        );
+      }
     } else {
       description = $.ATTACHMENT_ERROR(attachment.error);
     }

package/dist/components/internal/Attachment.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Attachment.mjs","sources":["../../../src/components/internal/Attachment.tsx"],"sourcesContent":["\"use client\";\n\nimport type { CommentMixedAttachment } from \"@liveblocks/core\";\nimport { useAttachmentUrl, useIsInsideRoom } from \"@liveblocks/react\";\nimport type {\n  ComponentPropsWithoutRef,\n  KeyboardEvent,\n  MouseEventHandler,\n  PointerEvent,\n} from \"react\";\nimport React, { memo, useCallback, useMemo, useState } from \"react\";\n\nimport { CrossIcon } from \"../../icons/Cross\";\nimport { SpinnerIcon } from \"../../icons/Spinner\";\nimport { WarningIcon } from \"../../icons/Warning\";\nimport type { Overrides } from \"../../overrides\";\nimport { useOverrides } from \"../../overrides\";\nimport { AttachmentTooLargeError } from \"../../primitives\";\nimport { useComposerAttachmentsContextOrNull } from \"../../primitives/Composer/contexts\";\nimport { classNames } from \"../../utils/class-names\";\nimport { formatFileSize } from \"../../utils/format-file-size\";\nimport { Tooltip } from \"./Tooltip\";\n\nconst MAX_DISPLAYED_MEDIA_SIZE = 60 * 1024 * 1024; // 60 MB\n\ninterface AttachmentProps extends ComponentPropsWithoutRef<\"div\"> {\n  attachment: CommentMixedAttachment;\n  onDeleteClick?: MouseEventHandler<HTMLButtonElement>;\n  preventFocusOnDelete?: boolean;\n  overrides?: Partial<Overrides>;\n}\n\nconst fileExtensionRegex = /^(.+?)(\\.[^.]+)?$/;\n\nfunction splitFileName(name: string) {\n  const match = name.match(fileExtensionRegex);\n\n  return { base: match?.[1] ?? name, extension: match?.[2] };\n}\n\nfunction getAttachmentIconGlyph(mimeType: string) {\n  if (\n    mimeType === \"application/zip\" ||\n    mimeType === \"application/gzip\" ||\n    mimeType === \"application/vnd.rar\" ||\n    mimeType === \"application/x-rar-compressed\" ||\n    mimeType === \"application/x-7z-compressed\" ||\n    mimeType === \"application/x-zip-compressed\" ||\n    mimeType === \"application/x-tar\" ||\n    mimeType === \"application/x-bzip\" ||\n    mimeType === \"application/x-bzip2\"\n  ) {\n    return (\n      <path d=\"M13 15h2v1h-1.5a.5.5 0 0 0 0 1H15v1h-1.5a.5.5 0 0 0 0 1H15v1h-1.5a.5.5 0 0 0 0 1h1a.5.5 0 0 0 .5-.5V20h1.5a.5.5 0 0 0 0-1H15v-1h1.5a.5.5 0 0 0 0-1H15v-1h1.5a.5.5 0 0 0 .5-.5V15a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2Z\" />\n    );\n  }\n\n  if (\n    mimeType.startsWith(\"text/\") ||\n    mimeType.startsWith(\"font/\") ||\n    mimeType.startsWith(\"application/\")\n  ) {\n    return (\n      <path d=\"M10 16a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5Zm0 2a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5Zm0 2a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5Zm0 2a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 0 1h-8a.5.5 0 0 1-.5-.5Z\" />\n    );\n  }\n\n  if (mimeType.startsWith(\"image/\")) {\n    return (\n      <path d=\"M12 16h6a1 1 0 0 1 1 1v3l-1.293-1.293a1 1 0 0 0-1.414 0L14.09 20.91l-.464-.386a1 1 0 0 0-1.265-.013l-1.231.985A.995.995 0 0 1 11 21v-4a1 1 0 0 1 1-1Zm-2 1a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-6a2 2 0 0 1-2-2v-4Zm3 2a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z\" />\n    );\n  }\n\n  if (mimeType.startsWith(\"video/\")) {\n    return (\n      <path d=\"M12 15.71a1 1 0 0 1 1.49-.872l4.96 2.79a1 1 0 0 1 0 1.744l-4.96 2.79A1 1 0 0 1 12 21.29v-5.58Z\" />\n    );\n  }\n\n  if (mimeType.startsWith(\"audio/\")) {\n    return (\n      <path d=\"M15 15a.5.5 0 0 0-.5.5v7a.5.5 0 0 0 1 0v-7a.5.5 0 0 0-.5-.5Zm-2.5 2.5a.5.5 0 0 1 1 0v3a.5.5 0 0 1-1 0v-3Zm-2 1a.5.5 0 0 1 1 0v1a.5.5 0 0 1-1 0v-1Zm6-1a.5.5 0 0 1 1 0v3a.5.5 0 0 1-1 0v-3ZM19 16a.5.5 0 0 0-.5.5v5a.5.5 0 0 0 1 0v-5a.5.5 0 0 0-.5-.5Z\" />\n    );\n  }\n\n  return null;\n}\n\nconst AttachmentFileIcon = memo(({ mimeType }: { mimeType: string }) => {\n  const iconGlyph = useMemo(() => getAttachmentIconGlyph(mimeType), [mimeType]);\n\n  return (\n    <svg\n      className=\"lb-attachment-icon\"\n      width={30}\n      height={30}\n      viewBox=\"0 0 30 30\"\n      fill=\"currentColor\"\n      fillRule=\"evenodd\"\n      clipRule=\"evenodd\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M6 5a2 2 0 0 1 2-2h5.843a4 4 0 0 1 2.829 1.172l6.156 6.156A4 4 0 0 1 24 13.157V25a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V5Z\"\n        className=\"lb-attachment-icon-shadow\"\n      />\n      <path\n        d=\"M6 5a2 2 0 0 1 2-2h5.843a4 4 0 0 1 2.829 1.172l6.156 6.156A4 4 0 0 1 24 13.157V25a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V5Z\"\n        className=\"lb-attachment-icon-background\"\n      />\n      <path\n        d=\"M14.382 3.037a4 4 0 0 1 2.29 1.135l6.156 6.157a4 4 0 0 1 1.136 2.289A2 2 0 0 0 22 11h-4a2 2 0 0 1-2-2V5a2 2 0 0 0-1.618-1.963Z\"\n        className=\"lb-attachment-icon-fold\"\n      />\n\n      {iconGlyph && <g className=\"lb-attachment-icon-glyph\">{iconGlyph}</g>}\n    </svg>\n  );\n});\n\nfunction AttachmentImagePreview({\n  attachment,\n}: {\n  attachment: CommentMixedAttachment;\n}) {\n  const { url } = useAttachmentUrl(attachment.id);\n  const [isLoaded, setLoaded] = useState(false);\n\n  const handleLoad = useCallback(() => {\n    setLoaded(true);\n  }, []);\n\n  return (\n    <>\n      {!isLoaded ? <SpinnerIcon /> : null}\n      {url ? (\n        <div\n          className=\"lb-attachment-preview-media\"\n          data-hidden={!isLoaded ? \"\" : undefined}\n        >\n          <img src={url} loading=\"lazy\" onLoad={handleLoad} />\n        </div>\n      ) : null}\n    </>\n  );\n}\n\nfunction AttachmentVideoPreview({\n  attachment,\n}: {\n  attachment: CommentMixedAttachment;\n}) {\n  const { url } = useAttachmentUrl(attachment.id);\n  const [isLoaded, setLoaded] = useState(false);\n\n  const handleLoad = useCallback(() => {\n    setLoaded(true);\n  }, []);\n\n  return (\n    <>\n      {!isLoaded ? <SpinnerIcon /> : null}\n      {url ? (\n        <div\n          className=\"lb-attachment-preview-media\"\n          data-hidden={!isLoaded ? \"\" : undefined}\n        >\n          <video src={url} onLoadedData={handleLoad} />\n        </div>\n      ) : null}\n    </>\n  );\n}\n\nfunction AttachmentPreview({\n  attachment,\n}: {\n  attachment: CommentMixedAttachment;\n}) {\n  const isInsideRoom = useIsInsideRoom();\n  const isUploaded =\n    attachment.type === \"attachment\" || attachment.status === \"uploaded\";\n\n  if (\n    isUploaded &&\n    isInsideRoom &&\n    attachment.size <= MAX_DISPLAYED_MEDIA_SIZE\n  ) {\n    if (attachment.mimeType.startsWith(\"image/\")) {\n      return <AttachmentImagePreview attachment={attachment} />;\n    }\n\n    if (attachment.mimeType.startsWith(\"video/\")) {\n      return <AttachmentVideoPreview attachment={attachment} />;\n    }\n  }\n\n  return <AttachmentFileIcon mimeType={attachment.mimeType} />;\n}\n\nfunction AttachmentName({\n  attachment,\n}: {\n  attachment: CommentMixedAttachment;\n}) {\n  const { base: fileBaseName, extension: fileExtension } = useMemo(() => {\n    return splitFileName(attachment.name);\n  }, [attachment.name]);\n\n  return (\n    <span className=\"lb-attachment-name\" title={attachment.name}>\n      <span className=\"lb-attachment-name-base\">{fileBaseName}</span>\n      {fileExtension && (\n        <span className=\"lb-attachment-name-extension\">{fileExtension}</span>\n      )}\n    </span>\n  );\n}\n\nfunction useClickOnKeyDown(\n  onKeyDown?: (event: KeyboardEvent<HTMLDivElement>) => void\n) {\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLDivElement>) => {\n      onKeyDown?.(event);\n\n      if (event.isDefaultPrevented()) {\n        return;\n      }\n\n      // Simulate a click event on Enter or Space because it's a div\n      if (event.key === \"Enter\" || event.key === \" \") {\n        event.preventDefault();\n\n        const clickEvent = new MouseEvent(\"click\", {\n          bubbles: true,\n          cancelable: true,\n          view: window,\n        });\n        event.target.dispatchEvent(clickEvent);\n      }\n    },\n    [onKeyDown]\n  );\n\n  return handleKeyDown;\n}\n\nfunction useAttachmentContent(\n  attachment: CommentMixedAttachment,\n  overrides?: Partial<Overrides>\n) {\n  const $ = useOverrides(overrides);\n  const composerAttachmentsContext = useComposerAttachmentsContextOrNull();\n  const isInComposer = Boolean(composerAttachmentsContext);\n  const maxAttachmentSize = composerAttachmentsContext?.maxAttachmentSize;\n\n  const status =\n    attachment.type === \"localAttachment\" ? attachment.status : undefined;\n  const isUploading = status === \"uploading\";\n  const isError = status === \"error\";\n\n  let description: string;\n\n  if (attachment.type === \"localAttachment\" && attachment.status === \"error\") {\n    if (attachment.error instanceof AttachmentTooLargeError) {\n      description = $.ATTACHMENT_TOO_LARGE(\n        maxAttachmentSize\n          ? formatFileSize(maxAttachmentSize, $.locale)\n          : undefined\n      );\n    } else {\n      description = $.ATTACHMENT_ERROR(attachment.error);\n    }\n  } else {\n    description = formatFileSize(attachment.size, $.locale);\n  }\n\n  const deleteLabel = isInComposer\n    ? $.COMPOSER_REMOVE_ATTACHMENT\n    : $.COMMENT_DELETE_ATTACHMENT;\n\n  return {\n    isUploading,\n    isError,\n    description,\n    deleteLabel,\n  };\n}\n\nexport function MediaAttachment({\n  attachment,\n  overrides,\n  onClick,\n  onDeleteClick,\n  preventFocusOnDelete,\n  className,\n  onKeyDown,\n  ...props\n}: AttachmentProps) {\n  const { isUploading, isError, description, deleteLabel } =\n    useAttachmentContent(attachment, overrides);\n\n  const handleDeletePointerDown = useCallback(\n    (event: PointerEvent<HTMLButtonElement>) => {\n      if (preventFocusOnDelete) {\n        event.preventDefault();\n      }\n    },\n    [preventFocusOnDelete]\n  );\n\n  const handleKeyDown = useClickOnKeyDown(onKeyDown);\n\n  return (\n    <div\n      className={classNames(\"lb-attachment lb-media-attachment\", className)}\n      data-error={isError ? \"\" : undefined}\n      {...props}\n      role={onClick ? \"button\" : undefined}\n      onClick={onClick}\n      tabIndex={onClick ? 0 : -1}\n      onKeyDown={onClick ? handleKeyDown : undefined}\n    >\n      <div className=\"lb-attachment-preview\">\n        {isUploading ? (\n          <SpinnerIcon />\n        ) : isError ? (\n          <WarningIcon />\n        ) : (\n          <AttachmentPreview attachment={attachment} />\n        )}\n      </div>\n      <div className=\"lb-attachment-details\">\n        <AttachmentName attachment={attachment} />\n        <span className=\"lb-attachment-description\" title={description}>\n          {description}\n        </span>\n      </div>\n      {onDeleteClick && (\n        <Tooltip content={deleteLabel}>\n          <button\n            type=\"button\"\n            className=\"lb-attachment-delete\"\n            onClick={onDeleteClick}\n            onPointerDown={handleDeletePointerDown}\n            aria-label={deleteLabel}\n          >\n            <CrossIcon />\n          </button>\n        </Tooltip>\n      )}\n    </div>\n  );\n}\n\nexport function FileAttachment({\n  attachment,\n  overrides,\n  onClick,\n  onDeleteClick,\n  preventFocusOnDelete,\n  className,\n  onKeyDown,\n  ...props\n}: AttachmentProps) {\n  const { isUploading, isError, description, deleteLabel } =\n    useAttachmentContent(attachment, overrides);\n\n  const handleDeletePointerDown = useCallback(\n    (event: PointerEvent<HTMLButtonElement>) => {\n      if (preventFocusOnDelete) {\n        event.preventDefault();\n      }\n    },\n    [preventFocusOnDelete]\n  );\n\n  const handleKeyDown = useClickOnKeyDown(onKeyDown);\n\n  return (\n    <div\n      className={classNames(\"lb-attachment lb-file-attachment\", className)}\n      data-error={isError ? \"\" : undefined}\n      {...props}\n      role={onClick ? \"button\" : undefined}\n      onClick={onClick}\n      tabIndex={onClick ? 0 : -1}\n      onKeyDown={onClick ? handleKeyDown : undefined}\n    >\n      <div className=\"lb-attachment-preview\">\n        {isUploading ? (\n          <SpinnerIcon />\n        ) : isError ? (\n          <WarningIcon />\n        ) : (\n          <AttachmentPreview attachment={attachment} />\n        )}\n      </div>\n      <div className=\"lb-attachment-details\">\n        <AttachmentName attachment={attachment} />\n        <span className=\"lb-attachment-description\" title={description}>\n          {description}\n        </span>\n      </div>\n      {onDeleteClick && (\n        <Tooltip content={deleteLabel}>\n          <button\n            type=\"button\"\n            className=\"lb-attachment-delete\"\n            onClick={onDeleteClick}\n            onPointerDown={handleDeletePointerDown}\n            aria-label={deleteLabel}\n          >\n            <CrossIcon />\n          </button>\n        </Tooltip>\n      )}\n    </div>\n  );\n}\n\nexport function separateMediaAttachments<T extends CommentMixedAttachment>(\n  attachments: T[]\n) {\n  const mediaAttachments: T[] = [];\n  const fileAttachments: T[] = [];\n\n  for (const attachment of attachments) {\n    if (\n      (attachment.mimeType.startsWith(\"image/\") ||\n        attachment.mimeType.startsWith(\"video/\")) &&\n      attachment.size <= MAX_DISPLAYED_MEDIA_SIZE\n    ) {\n      mediaAttachments.push(attachment);\n    } else {\n      fileAttachments.push(attachment);\n    }\n  }\n\n  return {\n    mediaAttachments,\n    fileAttachments,\n  };\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAuBA;AASA;AAEA;AACE;AAEA;AACF;AAEA;AACE;AAWE;AACG;AAAO;AAAoP;AAIhQ;AAKE;AACG;AAAO;AAAiP;AAI7P;AACE;AACG;AAAO;AAAiQ;AAI7Q;AACE;AACG;AAAO;AAAiG;AAI7G;AACE;AACG;AAAO;AAAyP;AAIrQ;AACF;AAEA;AACE;AAEA;AACG;AACW;AACH;AACC;AACA;AACH;AACI;AACA;AACH;AAEL;AACG;AACQ;AAEX;AACG;AACQ;AAEX;AACG;AACQ;AAGG;AAAY;AAGjC;AAEA;AAAgC;AAEhC;AAGE;AACA;AAEA;AACE;AAAc;AAGhB;AAIO;AACW;AACoB;AAE7B;AAAS;AAAa;AAAe;AAKhD;AAEA;AAAgC;AAEhC;AAGE;AACA;AAEA;AACE;AAAc;AAGhB;AAIO;AACW;AACoB;AAE7B;AAAW;AAAmB;AAKzC;AAEA;AAA2B;AAE3B;AAGE;AACA;AAGA;AAKE;AACE;AAAQ;AAAuB;AAAwB;AAGzD;AACE;AAAQ;AAAuB;AAAwB;AACzD;AAGF;AAAQ;AAAwC;AAClD;AAEA;AAAwB;AAExB;AAGE;AACE;AAAoC;AAGtC;AACG;AAAe;AAAuC;AACpD;AAAe;AAEb;AAAe;AAIxB;AAEA;AAGE;AAAsB;AAElB;AAEA;AACE;AAAA;AAIF;AACE;AAEA;AAA2C;AAChC;AACG;AACN;AAER;AAAqC;AACvC;AACF;AACU;AAGZ;AACF;AAEA;AAIE;AACA;AACA;AACA;AAEA;AAEA;AACA;AAEA;AAEA;AACE;AACE;AAAgB;AAGV;AACN;AAEA;AAAiD;AACnD;AAEA;AAAsD;AAGxD;AAIA;AAAO;AACL;AACA;AACA;AACA;AAEJ;AAEO;AAAyB;AAC9B;AACA;AACA;AACA;AACA;AACA;AACA;AAEF;AACE;AAGA;AAAgC;AAE5B;AACE;AAAqB;AACvB;AACF;AACqB;AAGvB;AAEA;AACG;AACqE;AACzC;AACvB;AACuB;AAC3B;AACwB;AACa;AAEpC;AAAc;AAMV;AAAkB;AAGtB;AAAc;AACZ;AAAe;AACf;AAAe;AAAmC;AAKlD;AAAiB;AACf;AACM;AACK;AACD;AACM;AACH;AAQxB;AAEO;AAAwB;AAC7B;AACA;AACA;AACA;AACA;AACA;AACA;AAEF;AACE;AAGA;AAAgC;AAE5B;AACE;AAAqB;AACvB;AACF;AACqB;AAGvB;AAEA;AACG;AACoE;AACxC;AACvB;AACuB;AAC3B;AACwB;AACa;AAEpC;AAAc;AAMV;AAAkB;AAGtB;AAAc;AACZ;AAAe;AACf;AAAe;AAAmC;AAKlD;AAAiB;AACf;AACM;AACK;AACD;AACM;AACH;AAQxB;AAEO;AAGL;AACA;AAEA;AACE;AAKE;AAAgC;AAEhC;AAA+B;AACjC;AAGF;AAAO;AACL;AACA;AAEJ;;"}
+{"version":3,"file":"Attachment.mjs","sources":["../../../src/components/internal/Attachment.tsx"],"sourcesContent":["\"use client\";\n\nimport type { CommentMixedAttachment } from \"@liveblocks/core\";\nimport { useAttachmentUrl, useIsInsideRoom } from \"@liveblocks/react\";\nimport type {\n  ComponentPropsWithoutRef,\n  KeyboardEvent,\n  MouseEventHandler,\n  PointerEvent,\n} from \"react\";\nimport React, { memo, useCallback, useMemo, useState } from \"react\";\n\nimport { CrossIcon } from \"../../icons/Cross\";\nimport { SpinnerIcon } from \"../../icons/Spinner\";\nimport { WarningIcon } from \"../../icons/Warning\";\nimport type { Overrides } from \"../../overrides\";\nimport { useOverrides } from \"../../overrides\";\nimport { AttachmentTooLargeError } from \"../../primitives\";\nimport { useComposerAttachmentsContextOrNull } from \"../../primitives/Composer/contexts\";\nimport { classNames } from \"../../utils/class-names\";\nimport { formatFileSize } from \"../../utils/format-file-size\";\nimport { Tooltip } from \"./Tooltip\";\n\nconst MAX_DISPLAYED_MEDIA_SIZE = 60 * 1024 * 1024; // 60 MB\n\ninterface AttachmentProps extends ComponentPropsWithoutRef<\"div\"> {\n  attachment: CommentMixedAttachment;\n  onDeleteClick?: MouseEventHandler<HTMLButtonElement>;\n  preventFocusOnDelete?: boolean;\n  overrides?: Partial<Overrides>;\n}\n\nconst fileExtensionRegex = /^(.+?)(\\.[^.]+)?$/;\n\nfunction splitFileName(name: string) {\n  const match = name.match(fileExtensionRegex);\n\n  return { base: match?.[1] ?? name, extension: match?.[2] };\n}\n\nfunction getAttachmentIconGlyph(mimeType: string) {\n  if (\n    mimeType === \"application/zip\" ||\n    mimeType === \"application/gzip\" ||\n    mimeType === \"application/vnd.rar\" ||\n    mimeType === \"application/x-rar-compressed\" ||\n    mimeType === \"application/x-7z-compressed\" ||\n    mimeType === \"application/x-zip-compressed\" ||\n    mimeType === \"application/x-tar\" ||\n    mimeType === \"application/x-bzip\" ||\n    mimeType === \"application/x-bzip2\"\n  ) {\n    return (\n      <path d=\"M13 15h2v1h-1.5a.5.5 0 0 0 0 1H15v1h-1.5a.5.5 0 0 0 0 1H15v1h-1.5a.5.5 0 0 0 0 1h1a.5.5 0 0 0 .5-.5V20h1.5a.5.5 0 0 0 0-1H15v-1h1.5a.5.5 0 0 0 0-1H15v-1h1.5a.5.5 0 0 0 .5-.5V15a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2Z\" />\n    );\n  }\n\n  if (\n    mimeType.startsWith(\"text/\") ||\n    mimeType.startsWith(\"font/\") ||\n    mimeType.startsWith(\"application/\")\n  ) {\n    return (\n      <path d=\"M10 16a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5Zm0 2a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5Zm0 2a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5Zm0 2a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 0 1h-8a.5.5 0 0 1-.5-.5Z\" />\n    );\n  }\n\n  if (mimeType.startsWith(\"image/\")) {\n    return (\n      <path d=\"M12 16h6a1 1 0 0 1 1 1v3l-1.293-1.293a1 1 0 0 0-1.414 0L14.09 20.91l-.464-.386a1 1 0 0 0-1.265-.013l-1.231.985A.995.995 0 0 1 11 21v-4a1 1 0 0 1 1-1Zm-2 1a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-6a2 2 0 0 1-2-2v-4Zm3 2a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z\" />\n    );\n  }\n\n  if (mimeType.startsWith(\"video/\")) {\n    return (\n      <path d=\"M12 15.71a1 1 0 0 1 1.49-.872l4.96 2.79a1 1 0 0 1 0 1.744l-4.96 2.79A1 1 0 0 1 12 21.29v-5.58Z\" />\n    );\n  }\n\n  if (mimeType.startsWith(\"audio/\")) {\n    return (\n      <path d=\"M15 15a.5.5 0 0 0-.5.5v7a.5.5 0 0 0 1 0v-7a.5.5 0 0 0-.5-.5Zm-2.5 2.5a.5.5 0 0 1 1 0v3a.5.5 0 0 1-1 0v-3Zm-2 1a.5.5 0 0 1 1 0v1a.5.5 0 0 1-1 0v-1Zm6-1a.5.5 0 0 1 1 0v3a.5.5 0 0 1-1 0v-3ZM19 16a.5.5 0 0 0-.5.5v5a.5.5 0 0 0 1 0v-5a.5.5 0 0 0-.5-.5Z\" />\n    );\n  }\n\n  return null;\n}\n\nconst AttachmentFileIcon = memo(({ mimeType }: { mimeType: string }) => {\n  const iconGlyph = useMemo(() => getAttachmentIconGlyph(mimeType), [mimeType]);\n\n  return (\n    <svg\n      className=\"lb-attachment-icon\"\n      width={30}\n      height={30}\n      viewBox=\"0 0 30 30\"\n      fill=\"currentColor\"\n      fillRule=\"evenodd\"\n      clipRule=\"evenodd\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M6 5a2 2 0 0 1 2-2h5.843a4 4 0 0 1 2.829 1.172l6.156 6.156A4 4 0 0 1 24 13.157V25a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V5Z\"\n        className=\"lb-attachment-icon-shadow\"\n      />\n      <path\n        d=\"M6 5a2 2 0 0 1 2-2h5.843a4 4 0 0 1 2.829 1.172l6.156 6.156A4 4 0 0 1 24 13.157V25a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V5Z\"\n        className=\"lb-attachment-icon-background\"\n      />\n      <path\n        d=\"M14.382 3.037a4 4 0 0 1 2.29 1.135l6.156 6.157a4 4 0 0 1 1.136 2.289A2 2 0 0 0 22 11h-4a2 2 0 0 1-2-2V5a2 2 0 0 0-1.618-1.963Z\"\n        className=\"lb-attachment-icon-fold\"\n      />\n\n      {iconGlyph && <g className=\"lb-attachment-icon-glyph\">{iconGlyph}</g>}\n    </svg>\n  );\n});\n\nfunction AttachmentImagePreview({\n  attachment,\n}: {\n  attachment: CommentMixedAttachment;\n}) {\n  const { url } = useAttachmentUrl(attachment.id);\n  const [isLoaded, setLoaded] = useState(false);\n\n  const handleLoad = useCallback(() => {\n    setLoaded(true);\n  }, []);\n\n  return (\n    <>\n      {!isLoaded ? <SpinnerIcon /> : null}\n      {url ? (\n        <div\n          className=\"lb-attachment-preview-media\"\n          data-hidden={!isLoaded ? \"\" : undefined}\n        >\n          <img src={url} loading=\"lazy\" onLoad={handleLoad} />\n        </div>\n      ) : null}\n    </>\n  );\n}\n\nfunction AttachmentVideoPreview({\n  attachment,\n}: {\n  attachment: CommentMixedAttachment;\n}) {\n  const { url } = useAttachmentUrl(attachment.id);\n  const [isLoaded, setLoaded] = useState(false);\n\n  const handleLoad = useCallback(() => {\n    setLoaded(true);\n  }, []);\n\n  return (\n    <>\n      {!isLoaded ? <SpinnerIcon /> : null}\n      {url ? (\n        <div\n          className=\"lb-attachment-preview-media\"\n          data-hidden={!isLoaded ? \"\" : undefined}\n        >\n          <video src={url} onLoadedData={handleLoad} />\n        </div>\n      ) : null}\n    </>\n  );\n}\n\nfunction AttachmentPreview({\n  attachment,\n}: {\n  attachment: CommentMixedAttachment;\n}) {\n  const isInsideRoom = useIsInsideRoom();\n  const isUploaded =\n    attachment.type === \"attachment\" || attachment.status === \"uploaded\";\n\n  if (\n    isUploaded &&\n    isInsideRoom &&\n    attachment.size <= MAX_DISPLAYED_MEDIA_SIZE\n  ) {\n    if (attachment.mimeType.startsWith(\"image/\")) {\n      return <AttachmentImagePreview attachment={attachment} />;\n    }\n\n    if (attachment.mimeType.startsWith(\"video/\")) {\n      return <AttachmentVideoPreview attachment={attachment} />;\n    }\n  }\n\n  return <AttachmentFileIcon mimeType={attachment.mimeType} />;\n}\n\nfunction AttachmentName({\n  attachment,\n}: {\n  attachment: CommentMixedAttachment;\n}) {\n  const { base: fileBaseName, extension: fileExtension } = useMemo(() => {\n    return splitFileName(attachment.name);\n  }, [attachment.name]);\n\n  return (\n    <span className=\"lb-attachment-name\" title={attachment.name}>\n      <span className=\"lb-attachment-name-base\">{fileBaseName}</span>\n      {fileExtension && (\n        <span className=\"lb-attachment-name-extension\">{fileExtension}</span>\n      )}\n    </span>\n  );\n}\n\nfunction useClickOnKeyDown(\n  onKeyDown?: (event: KeyboardEvent<HTMLDivElement>) => void\n) {\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLDivElement>) => {\n      onKeyDown?.(event);\n\n      if (event.isDefaultPrevented()) {\n        return;\n      }\n\n      // Simulate a click event on Enter or Space because it's a div\n      if (event.key === \"Enter\" || event.key === \" \") {\n        event.preventDefault();\n\n        const clickEvent = new MouseEvent(\"click\", {\n          bubbles: true,\n          cancelable: true,\n          view: window,\n        });\n        event.target.dispatchEvent(clickEvent);\n      }\n    },\n    [onKeyDown]\n  );\n\n  return handleKeyDown;\n}\n\nfunction useAttachmentContent(\n  attachment: CommentMixedAttachment,\n  overrides?: Partial<Overrides>\n) {\n  const $ = useOverrides(overrides);\n  const composerAttachmentsContext = useComposerAttachmentsContextOrNull();\n  const isInComposer = Boolean(composerAttachmentsContext);\n  const maxAttachmentSize = composerAttachmentsContext?.maxAttachmentSize;\n\n  const status =\n    attachment.type === \"localAttachment\" ? attachment.status : undefined;\n  const isUploading = status === \"uploading\";\n  const isError = status === \"error\";\n\n  let description: string;\n\n  if (attachment.type === \"localAttachment\" && attachment.status === \"error\") {\n    if (attachment.error instanceof AttachmentTooLargeError) {\n      if (attachment.error.origin === \"server\") {\n        description = $.ATTACHMENT_TOO_LARGE();\n      } else {\n        description = $.ATTACHMENT_TOO_LARGE(\n          maxAttachmentSize\n            ? formatFileSize(maxAttachmentSize, $.locale)\n            : undefined\n        );\n      }\n    } else {\n      description = $.ATTACHMENT_ERROR(attachment.error);\n    }\n  } else {\n    description = formatFileSize(attachment.size, $.locale);\n  }\n\n  const deleteLabel = isInComposer\n    ? $.COMPOSER_REMOVE_ATTACHMENT\n    : $.COMMENT_DELETE_ATTACHMENT;\n\n  return {\n    isUploading,\n    isError,\n    description,\n    deleteLabel,\n  };\n}\n\nexport function MediaAttachment({\n  attachment,\n  overrides,\n  onClick,\n  onDeleteClick,\n  preventFocusOnDelete,\n  className,\n  onKeyDown,\n  ...props\n}: AttachmentProps) {\n  const { isUploading, isError, description, deleteLabel } =\n    useAttachmentContent(attachment, overrides);\n\n  const handleDeletePointerDown = useCallback(\n    (event: PointerEvent<HTMLButtonElement>) => {\n      if (preventFocusOnDelete) {\n        event.preventDefault();\n      }\n    },\n    [preventFocusOnDelete]\n  );\n\n  const handleKeyDown = useClickOnKeyDown(onKeyDown);\n\n  return (\n    <div\n      className={classNames(\"lb-attachment lb-media-attachment\", className)}\n      data-error={isError ? \"\" : undefined}\n      {...props}\n      role={onClick ? \"button\" : undefined}\n      onClick={onClick}\n      tabIndex={onClick ? 0 : -1}\n      onKeyDown={onClick ? handleKeyDown : undefined}\n    >\n      <div className=\"lb-attachment-preview\">\n        {isUploading ? (\n          <SpinnerIcon />\n        ) : isError ? (\n          <WarningIcon />\n        ) : (\n          <AttachmentPreview attachment={attachment} />\n        )}\n      </div>\n      <div className=\"lb-attachment-details\">\n        <AttachmentName attachment={attachment} />\n        <span className=\"lb-attachment-description\" title={description}>\n          {description}\n        </span>\n      </div>\n      {onDeleteClick && (\n        <Tooltip content={deleteLabel}>\n          <button\n            type=\"button\"\n            className=\"lb-attachment-delete\"\n            onClick={onDeleteClick}\n            onPointerDown={handleDeletePointerDown}\n            aria-label={deleteLabel}\n          >\n            <CrossIcon />\n          </button>\n        </Tooltip>\n      )}\n    </div>\n  );\n}\n\nexport function FileAttachment({\n  attachment,\n  overrides,\n  onClick,\n  onDeleteClick,\n  preventFocusOnDelete,\n  className,\n  onKeyDown,\n  ...props\n}: AttachmentProps) {\n  const { isUploading, isError, description, deleteLabel } =\n    useAttachmentContent(attachment, overrides);\n\n  const handleDeletePointerDown = useCallback(\n    (event: PointerEvent<HTMLButtonElement>) => {\n      if (preventFocusOnDelete) {\n        event.preventDefault();\n      }\n    },\n    [preventFocusOnDelete]\n  );\n\n  const handleKeyDown = useClickOnKeyDown(onKeyDown);\n\n  return (\n    <div\n      className={classNames(\"lb-attachment lb-file-attachment\", className)}\n      data-error={isError ? \"\" : undefined}\n      {...props}\n      role={onClick ? \"button\" : undefined}\n      onClick={onClick}\n      tabIndex={onClick ? 0 : -1}\n      onKeyDown={onClick ? handleKeyDown : undefined}\n    >\n      <div className=\"lb-attachment-preview\">\n        {isUploading ? (\n          <SpinnerIcon />\n        ) : isError ? (\n          <WarningIcon />\n        ) : (\n          <AttachmentPreview attachment={attachment} />\n        )}\n      </div>\n      <div className=\"lb-attachment-details\">\n        <AttachmentName attachment={attachment} />\n        <span className=\"lb-attachment-description\" title={description}>\n          {description}\n        </span>\n      </div>\n      {onDeleteClick && (\n        <Tooltip content={deleteLabel}>\n          <button\n            type=\"button\"\n            className=\"lb-attachment-delete\"\n            onClick={onDeleteClick}\n            onPointerDown={handleDeletePointerDown}\n            aria-label={deleteLabel}\n          >\n            <CrossIcon />\n          </button>\n        </Tooltip>\n      )}\n    </div>\n  );\n}\n\nexport function separateMediaAttachments<T extends CommentMixedAttachment>(\n  attachments: T[]\n) {\n  const mediaAttachments: T[] = [];\n  const fileAttachments: T[] = [];\n\n  for (const attachment of attachments) {\n    if (\n      (attachment.mimeType.startsWith(\"image/\") ||\n        attachment.mimeType.startsWith(\"video/\")) &&\n      attachment.size <= MAX_DISPLAYED_MEDIA_SIZE\n    ) {\n      mediaAttachments.push(attachment);\n    } else {\n      fileAttachments.push(attachment);\n    }\n  }\n\n  return {\n    mediaAttachments,\n    fileAttachments,\n  };\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAuBA;AASA;AAEA;AACE;AAEA;AACF;AAEA;AACE;AAWE;AACG;AAAO;AAAoP;AAIhQ;AAKE;AACG;AAAO;AAAiP;AAI7P;AACE;AACG;AAAO;AAAiQ;AAI7Q;AACE;AACG;AAAO;AAAiG;AAI7G;AACE;AACG;AAAO;AAAyP;AAIrQ;AACF;AAEA;AACE;AAEA;AACG;AACW;AACH;AACC;AACA;AACH;AACI;AACA;AACH;AAEL;AACG;AACQ;AAEX;AACG;AACQ;AAEX;AACG;AACQ;AAGG;AAAY;AAGjC;AAEA;AAAgC;AAEhC;AAGE;AACA;AAEA;AACE;AAAc;AAGhB;AAIO;AACW;AACoB;AAE7B;AAAS;AAAa;AAAe;AAKhD;AAEA;AAAgC;AAEhC;AAGE;AACA;AAEA;AACE;AAAc;AAGhB;AAIO;AACW;AACoB;AAE7B;AAAW;AAAmB;AAKzC;AAEA;AAA2B;AAE3B;AAGE;AACA;AAGA;AAKE;AACE;AAAQ;AAAuB;AAAwB;AAGzD;AACE;AAAQ;AAAuB;AAAwB;AACzD;AAGF;AAAQ;AAAwC;AAClD;AAEA;AAAwB;AAExB;AAGE;AACE;AAAoC;AAGtC;AACG;AAAe;AAAuC;AACpD;AAAe;AAEb;AAAe;AAIxB;AAEA;AAGE;AAAsB;AAElB;AAEA;AACE;AAAA;AAIF;AACE;AAEA;AAA2C;AAChC;AACG;AACN;AAER;AAAqC;AACvC;AACF;AACU;AAGZ;AACF;AAEA;AAIE;AACA;AACA;AACA;AAEA;AAEA;AACA;AAEA;AAEA;AACE;AACE;AACE;AAAqC;AAErC;AAAgB;AAGV;AACN;AACF;AAEA;AAAiD;AACnD;AAEA;AAAsD;AAGxD;AAIA;AAAO;AACL;AACA;AACA;AACA;AAEJ;AAEO;AAAyB;AAC9B;AACA;AACA;AACA;AACA;AACA;AACA;AAEF;AACE;AAGA;AAAgC;AAE5B;AACE;AAAqB;AACvB;AACF;AACqB;AAGvB;AAEA;AACG;AACqE;AACzC;AACvB;AACuB;AAC3B;AACwB;AACa;AAEpC;AAAc;AAMV;AAAkB;AAGtB;AAAc;AACZ;AAAe;AACf;AAAe;AAAmC;AAKlD;AAAiB;AACf;AACM;AACK;AACD;AACM;AACH;AAQxB;AAEO;AAAwB;AAC7B;AACA;AACA;AACA;AACA;AACA;AACA;AAEF;AACE;AAGA;AAAgC;AAE5B;AACE;AAAqB;AACvB;AACF;AACqB;AAGvB;AAEA;AACG;AACoE;AACxC;AACvB;AACuB;AAC3B;AACwB;AACa;AAEpC;AAAc;AAMV;AAAkB;AAGtB;AAAc;AACZ;AAAe;AACf;AAAe;AAAmC;AAKlD;AAAiB;AACf;AACM;AACK;AACD;AACM;AACH;AAQxB;AAEO;AAGL;AACA;AAEA;AACE;AAKE;AAAgC;AAEhC;AAA+B;AACjC;AAGF;AAAO;AACL;AACA;AAEJ;;"}

package/dist/primitives/Composer/index.js

@@ -774,6 +774,7 @@ const ComposerForm = React.forwardRef(
       (event) => {
         if (event.target.files) {
           createAttachments(Array.from(event.target.files));
+          event.target.value = "";
         }
       },
       [createAttachments]

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 { Slot, Slottable } from \"@radix-ui/react-slot\";\nimport type {\n  AriaAttributes,\n  ChangeEvent,\n  FocusEvent,\n  FormEvent,\n  KeyboardEvent,\n  MouseEvent,\n  PointerEvent,\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 { useMentionSuggestions } from \"../../shared\";\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 { 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 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\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    { value, children, onPointerMove, onPointerDown, asChild, ...props },\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        if (!event.isDefaultPrevented()) {\n          const target = event.target as HTMLElement;\n\n          if (target.hasPointerCapture(event.pointerId)) {\n            target.releasePointerCapture(event.pointerId);\n          }\n\n          if (event.button === 0 && event.ctrlKey === false) {\n            onItemSelect(value);\n\n            event.preventDefault();\n          }\n        }\n      },\n      [onItemSelect, onPointerDown, 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        {...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      focus();\n      insertMentionCharacter(editor);\n    }, [editor, focus]);\n\n    const insertText = useCallback(\n      (text: string) => {\n        focus(false);\n        insertSlateText(editor, text);\n      },\n      [editor, focus]\n    );\n\n    const attachFiles = useCallback(() => {\n      if (fileInputRef.current) {\n        fileInputRef.current.click();\n      }\n    }, []);\n\n    const handleAttachmentsInputChange = useCallback(\n      (event: ChangeEvent<HTMLInputElement>) => {\n        if (event.target.files) {\n          createAttachments(Array.from(event.target.files));\n        }\n      },\n      [createAttachments]\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        // 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      [editor, attachments, onComposerSubmit, onSubmit, onSubmitEnd]\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                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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsIA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAAsC;AAC3B;AAEX;AAEA;AAA8B;AAC5B;AAEF;AAIE;AAAO;AACL;AACE;AACE;AACE;AACoD;AAChD;AACA;AACD;AACH;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;AAQhC;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;AACE;AAEA;AACE;AAA4C;AAG9C;AACE;AAEA;AAAqB;AACvB;AACF;AACF;AACmC;AAGrC;AACG;AACM;AACL;AAC6B;AACA;AACd;AACA;AACX;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;AACA;AAA6B;AAG/B;AAAmB;AAEf;AACA;AAA4B;AAC9B;AACc;AAGhB;AACE;AACE;AAA2B;AAC7B;AAGF;AAAqC;AAEjC;AACE;AAAgD;AAClD;AACF;AACkB;AAGpB;AACE;AACA;AACA;AACA;AAAmB;AAGrB;AAAqB;AAKjB;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;AAC6D;AAG/D;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;AACA;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 { Slot, Slottable } from \"@radix-ui/react-slot\";\nimport type {\n  AriaAttributes,\n  ChangeEvent,\n  FocusEvent,\n  FormEvent,\n  KeyboardEvent,\n  MouseEvent,\n  PointerEvent,\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 { useMentionSuggestions } from \"../../shared\";\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 { 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 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\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    { value, children, onPointerMove, onPointerDown, asChild, ...props },\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        if (!event.isDefaultPrevented()) {\n          const target = event.target as HTMLElement;\n\n          if (target.hasPointerCapture(event.pointerId)) {\n            target.releasePointerCapture(event.pointerId);\n          }\n\n          if (event.button === 0 && event.ctrlKey === false) {\n            onItemSelect(value);\n\n            event.preventDefault();\n          }\n        }\n      },\n      [onItemSelect, onPointerDown, 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        {...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      focus();\n      insertMentionCharacter(editor);\n    }, [editor, focus]);\n\n    const insertText = useCallback(\n      (text: string) => {\n        focus(false);\n        insertSlateText(editor, text);\n      },\n      [editor, focus]\n    );\n\n    const attachFiles = useCallback(() => {\n      if (fileInputRef.current) {\n        fileInputRef.current.click();\n      }\n    }, []);\n\n    const handleAttachmentsInputChange = useCallback(\n      (event: ChangeEvent<HTMLInputElement>) => {\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]\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        // 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      [editor, attachments, onComposerSubmit, onSubmit, onSubmitEnd]\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                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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsIA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAAsC;AAC3B;AAEX;AAEA;AAA8B;AAC5B;AAEF;AAIE;AAAO;AACL;AACE;AACE;AACE;AACoD;AAChD;AACA;AACD;AACH;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;AAQhC;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;AACE;AAEA;AACE;AAA4C;AAG9C;AACE;AAEA;AAAqB;AACvB;AACF;AACF;AACmC;AAGrC;AACG;AACM;AACL;AAC6B;AACA;AACd;AACA;AACX;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;AACA;AAA6B;AAG/B;AAAmB;AAEf;AACA;AAA4B;AAC9B;AACc;AAGhB;AACE;AACE;AAA2B;AAC7B;AAGF;AAAqC;AAEjC;AACE;AAGA;AAAqB;AACvB;AACF;AACkB;AAGpB;AACE;AACA;AACA;AACA;AAAmB;AAGrB;AAAqB;AAKjB;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;AAC6D;AAG/D;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;AACA;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

@@ -772,6 +772,7 @@ const ComposerForm = forwardRef(
       (event) => {
         if (event.target.files) {
           createAttachments(Array.from(event.target.files));
+          event.target.value = "";
         }
       },
       [createAttachments]

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 { Slot, Slottable } from \"@radix-ui/react-slot\";\nimport type {\n  AriaAttributes,\n  ChangeEvent,\n  FocusEvent,\n  FormEvent,\n  KeyboardEvent,\n  MouseEvent,\n  PointerEvent,\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 { useMentionSuggestions } from \"../../shared\";\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 { 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 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\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    { value, children, onPointerMove, onPointerDown, asChild, ...props },\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        if (!event.isDefaultPrevented()) {\n          const target = event.target as HTMLElement;\n\n          if (target.hasPointerCapture(event.pointerId)) {\n            target.releasePointerCapture(event.pointerId);\n          }\n\n          if (event.button === 0 && event.ctrlKey === false) {\n            onItemSelect(value);\n\n            event.preventDefault();\n          }\n        }\n      },\n      [onItemSelect, onPointerDown, 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        {...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      focus();\n      insertMentionCharacter(editor);\n    }, [editor, focus]);\n\n    const insertText = useCallback(\n      (text: string) => {\n        focus(false);\n        insertSlateText(editor, text);\n      },\n      [editor, focus]\n    );\n\n    const attachFiles = useCallback(() => {\n      if (fileInputRef.current) {\n        fileInputRef.current.click();\n      }\n    }, []);\n\n    const handleAttachmentsInputChange = useCallback(\n      (event: ChangeEvent<HTMLInputElement>) => {\n        if (event.target.files) {\n          createAttachments(Array.from(event.target.files));\n        }\n      },\n      [createAttachments]\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        // 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      [editor, attachments, onComposerSubmit, onSubmit, onSubmitEnd]\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                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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsIA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAAsC;AAC3B;AAEX;AAEA;AAA8B;AAC5B;AAEF;AAIE;AAAO;AACL;AACE;AACE;AACE;AACoD;AAChD;AACA;AACD;AACH;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;AAQhC;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;AACE;AAEA;AACE;AAA4C;AAG9C;AACE;AAEA;AAAqB;AACvB;AACF;AACF;AACmC;AAGrC;AACG;AACM;AACL;AAC6B;AACA;AACd;AACA;AACX;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;AACA;AAA6B;AAG/B;AAAmB;AAEf;AACA;AAA4B;AAC9B;AACc;AAGhB;AACE;AACE;AAA2B;AAC7B;AAGF;AAAqC;AAEjC;AACE;AAAgD;AAClD;AACF;AACkB;AAGpB;AACE;AACA;AACA;AACA;AAAmB;AAGrB;AAAqB;AAKjB;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;AAC6D;AAG/D;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;AACA;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 { Slot, Slottable } from \"@radix-ui/react-slot\";\nimport type {\n  AriaAttributes,\n  ChangeEvent,\n  FocusEvent,\n  FormEvent,\n  KeyboardEvent,\n  MouseEvent,\n  PointerEvent,\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 { useMentionSuggestions } from \"../../shared\";\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 { 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 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\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    { value, children, onPointerMove, onPointerDown, asChild, ...props },\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        if (!event.isDefaultPrevented()) {\n          const target = event.target as HTMLElement;\n\n          if (target.hasPointerCapture(event.pointerId)) {\n            target.releasePointerCapture(event.pointerId);\n          }\n\n          if (event.button === 0 && event.ctrlKey === false) {\n            onItemSelect(value);\n\n            event.preventDefault();\n          }\n        }\n      },\n      [onItemSelect, onPointerDown, 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        {...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      focus();\n      insertMentionCharacter(editor);\n    }, [editor, focus]);\n\n    const insertText = useCallback(\n      (text: string) => {\n        focus(false);\n        insertSlateText(editor, text);\n      },\n      [editor, focus]\n    );\n\n    const attachFiles = useCallback(() => {\n      if (fileInputRef.current) {\n        fileInputRef.current.click();\n      }\n    }, []);\n\n    const handleAttachmentsInputChange = useCallback(\n      (event: ChangeEvent<HTMLInputElement>) => {\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]\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        // 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      [editor, attachments, onComposerSubmit, onSubmit, onSubmitEnd]\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                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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsIA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAAsC;AAC3B;AAEX;AAEA;AAA8B;AAC5B;AAEF;AAIE;AAAO;AACL;AACE;AACE;AACE;AACoD;AAChD;AACA;AACD;AACH;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;AAQhC;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;AACE;AAEA;AACE;AAA4C;AAG9C;AACE;AAEA;AAAqB;AACvB;AACF;AACF;AACmC;AAGrC;AACG;AACM;AACL;AAC6B;AACA;AACd;AACA;AACX;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;AACA;AAA6B;AAG/B;AAAmB;AAEf;AACA;AAA4B;AAC9B;AACc;AAGhB;AACE;AACE;AAA2B;AAC7B;AAGF;AAAqC;AAEjC;AACE;AAGA;AAAqB;AACvB;AACF;AACkB;AAGpB;AACE;AACA;AACA;AACA;AAAmB;AAGrB;AAAqB;AAKjB;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;AAC6D;AAG/D;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;AACA;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/utils.js

@@ -200,9 +200,10 @@ function useComposerAttachmentsDropArea({
   ];
 }
 class AttachmentTooLargeError extends Error {
-  constructor() {
-    super(...arguments);
+  constructor(message, origin = "client") {
+    super(message);
     this.name = "AttachmentTooLargeError";
+    this.origin = origin;
   }
 }
 function createComposerAttachmentsManager(room, options) {
@@ -230,13 +231,16 @@ function createComposerAttachmentsManager(room, options) {
         attachments.set(attachment.id, {
           ...attachment,
           status: "error",
-          error: error instanceof core.CommentsApiError && error.status === 413 ? new AttachmentTooLargeError("File is too large.") : error
+          error: error instanceof core.CommentsApiError && error.status === 413 ? new AttachmentTooLargeError("File is too large.", "server") : error
         });
         notifySubscribers();
       }
     });
   }
   function addAttachments(addedAttachments) {
+    if (addedAttachments.length === 0) {
+      return;
+    }
     const newAttachments = addedAttachments.filter(
       (attachment) => !attachments.has(attachment.id)
     );
@@ -247,7 +251,7 @@ function createComposerAttachmentsManager(room, options) {
           attachments.set(attachment.id, {
             ...attachment,
             status: "error",
-            error: new AttachmentTooLargeError("File is too large.")
+            error: new AttachmentTooLargeError("File is too large.", "client")
           });
           continue;
         }
@@ -283,16 +287,20 @@ function createComposerAttachmentsManager(room, options) {
   function clear() {
     abortControllers.forEach((controller) => controller.abort());
     abortControllers.clear();
-    eventSource.clear();
     attachments.clear();
     notifySubscribers();
   }
+  function dispose() {
+    clear();
+    eventSource.clear();
+  }
   return {
     addAttachments,
     removeAttachment,
     getSnapshot,
     subscribe: eventSource.subscribe,
-    clear
+    clear,
+    dispose
   };
 }
 function preventBeforeUnloadDefault(event) {
@@ -309,7 +317,7 @@ function useComposerAttachmentsManager(defaultAttachments, options) {
   }, [frozenDefaultAttachments, frozenAttachmentsManager]);
   React.useEffect(() => {
     return () => {
-      frozenAttachmentsManager.clear();
+      frozenAttachmentsManager.dispose();
     };
   }, [frozenAttachmentsManager]);
   const attachments = index_js.useSyncExternalStore(

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

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../../src/primitives/Composer/utils.ts"],"sourcesContent":["import type { Placement } from \"@floating-ui/react-dom\";\nimport {\n  type CommentAttachment,\n  type CommentBody,\n  type CommentBodyLink,\n  type CommentBodyMention,\n  type CommentLocalAttachment,\n  type CommentMixedAttachment,\n  CommentsApiError,\n  makeEventSource,\n  type OpaqueRoom,\n} from \"@liveblocks/core\";\nimport { useRoom } from \"@liveblocks/react\";\nimport type { DragEvent } from \"react\";\nimport { useCallback, useEffect, useMemo, useState } from \"react\";\nimport { useSyncExternalStore } from \"use-sync-external-store/shim/index.js\";\n\nimport { isComposerBodyAutoLink } from \"../../slate/plugins/auto-links\";\nimport { isComposerBodyCustomLink } from \"../../slate/plugins/custom-links\";\nimport { isComposerBodyMention } from \"../../slate/plugins/mentions\";\nimport { isText } from \"../../slate/utils/is-text\";\nimport type {\n  ComposerBody,\n  ComposerBodyAutoLink,\n  ComposerBodyCustomLink,\n  ComposerBodyMention,\n  ComposerBodyText,\n  Direction,\n} from \"../../types\";\nimport { getFiles } from \"../../utils/data-transfer\";\nimport { exists } from \"../../utils/exists\";\nimport { useInitial } from \"../../utils/use-initial\";\nimport { useLatest } from \"../../utils/use-latest\";\nimport {\n  isCommentBodyLink,\n  isCommentBodyMention,\n  isCommentBodyText,\n} from \"../Comment/utils\";\nimport { useComposer, useComposerAttachmentsContext } from \"./contexts\";\nimport type { SuggestionsPosition } from \"./types\";\n\nexport function composerBodyMentionToCommentBodyMention(\n  mention: ComposerBodyMention\n): CommentBodyMention {\n  return {\n    type: \"mention\",\n    id: mention.id,\n  };\n}\n\nexport function composerBodyAutoLinkToCommentBodyLink(\n  link: ComposerBodyAutoLink\n): CommentBodyLink {\n  return {\n    type: \"link\",\n    url: link.url,\n  };\n}\n\nexport function composerBodyCustomLinkToCommentBodyLink(\n  link: ComposerBodyCustomLink\n): CommentBodyLink {\n  return {\n    type: \"link\",\n    url: link.url,\n    text: link.children.map((child) => child.text).join(\"\"),\n  };\n}\n\nexport function commentBodyMentionToComposerBodyMention(\n  mention: CommentBodyMention\n): ComposerBodyMention {\n  return {\n    type: \"mention\",\n    id: mention.id,\n    children: [{ text: \"\" }],\n  };\n}\n\nexport function commentBodyLinkToComposerBodyLink(\n  link: CommentBodyLink\n): ComposerBodyAutoLink | ComposerBodyCustomLink {\n  if (link.text) {\n    return {\n      type: \"custom-link\",\n      url: link.url,\n      children: [{ text: link.text }],\n    };\n  } else {\n    return {\n      type: \"auto-link\",\n      url: link.url,\n      children: [{ text: link.url }],\n    };\n  }\n}\n\nexport function composerBodyToCommentBody(body: ComposerBody): CommentBody {\n  return {\n    version: 1,\n    content: body\n      .map((block) => {\n        // All root blocks are paragraphs at the moment\n        if (block.type !== \"paragraph\") {\n          return null;\n        }\n\n        const children = block.children\n          .map((inline) => {\n            if (isComposerBodyMention(inline)) {\n              return composerBodyMentionToCommentBodyMention(inline);\n            }\n\n            if (isComposerBodyAutoLink(inline)) {\n              return composerBodyAutoLinkToCommentBodyLink(inline);\n            }\n\n            if (isComposerBodyCustomLink(inline)) {\n              return composerBodyCustomLinkToCommentBodyLink(inline);\n            }\n\n            if (isText(inline)) {\n              return inline;\n            }\n\n            return null;\n          })\n          .filter(exists);\n\n        return {\n          ...block,\n          children,\n        };\n      })\n      .filter(exists),\n  };\n}\n\nconst emptyComposerBody: ComposerBody = [];\n\nexport function commentBodyToComposerBody(body: CommentBody): ComposerBody {\n  if (!body || !body?.content) {\n    return emptyComposerBody;\n  }\n\n  return body.content\n    .map((block) => {\n      // All root blocks are paragraphs at the moment\n      if (block.type !== \"paragraph\") {\n        return null;\n      }\n\n      const children = block.children\n        .map((inline) => {\n          if (isCommentBodyMention(inline)) {\n            return commentBodyMentionToComposerBodyMention(inline);\n          }\n\n          if (isCommentBodyLink(inline)) {\n            return commentBodyLinkToComposerBodyLink(inline);\n          }\n\n          if (isCommentBodyText(inline)) {\n            return inline as ComposerBodyText;\n          }\n\n          return null;\n        })\n        .filter(exists);\n\n      return {\n        ...block,\n        children,\n      };\n    })\n    .filter(exists);\n}\n\nexport function getPlacementFromPosition(\n  position: SuggestionsPosition,\n  direction: Direction = \"ltr\"\n): Placement {\n  return `${position}-${direction === \"rtl\" ? \"end\" : \"start\"}`;\n}\n\nexport function getSideAndAlignFromPlacement(placement: Placement) {\n  const [side, align = \"center\"] = placement.split(\"-\");\n\n  return [side, align] as const;\n}\n\nexport function useComposerAttachmentsDropArea<\n  T extends HTMLElement = HTMLElement,\n>({\n  onDragEnter,\n  onDragLeave,\n  onDragOver,\n  onDrop,\n  disabled,\n}: {\n  onDragEnter?: (event: DragEvent<T>) => void;\n  onDragLeave?: (event: DragEvent<T>) => void;\n  onDragOver?: (event: DragEvent<T>) => void;\n  onDrop?: (event: DragEvent<T>) => void;\n  disabled?: boolean;\n}) {\n  const { isDisabled: isComposerDisabled } = useComposer();\n  const isDisabled = isComposerDisabled || disabled;\n  const { createAttachments } = useComposerAttachmentsContext();\n  const [isDraggingOver, setDraggingOver] = useState(false);\n  const latestIsDraggingOver = useLatest(isDraggingOver);\n\n  const handleDragEnter = useCallback(\n    (event: DragEvent<T>) => {\n      onDragEnter?.(event);\n\n      if (\n        latestIsDraggingOver.current ||\n        isDisabled ||\n        event.isDefaultPrevented()\n      ) {\n        return;\n      }\n\n      const dataTransfer = event.dataTransfer;\n\n      if (!dataTransfer.types.includes(\"Files\")) {\n        return;\n      }\n\n      event.preventDefault();\n      event.stopPropagation();\n\n      setDraggingOver(true);\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [onDragEnter, isDisabled]\n  );\n\n  const handleDragLeave = useCallback(\n    (event: DragEvent<T>) => {\n      onDragLeave?.(event);\n\n      if (\n        !latestIsDraggingOver.current ||\n        isDisabled ||\n        event.isDefaultPrevented()\n      ) {\n        return;\n      }\n\n      // Ignore drag leave events that are not actually leaving the drop area\n      if (\n        event.relatedTarget\n          ? event.relatedTarget === event.currentTarget ||\n            event.currentTarget.contains(event.relatedTarget as HTMLElement)\n          : event.currentTarget !== event.target\n      ) {\n        return;\n      }\n\n      event.preventDefault();\n      event.stopPropagation();\n\n      setDraggingOver(false);\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [onDragLeave, isDisabled]\n  );\n\n  const handleDragOver = useCallback(\n    (event: DragEvent<T>) => {\n      onDragOver?.(event);\n\n      if (isDisabled || event.isDefaultPrevented()) {\n        return;\n      }\n\n      event.preventDefault();\n      event.stopPropagation();\n    },\n    [onDragOver, isDisabled]\n  );\n\n  const handleDrop = useCallback(\n    (event: DragEvent<T>) => {\n      onDrop?.(event);\n\n      if (\n        !latestIsDraggingOver.current ||\n        isDisabled ||\n        event.isDefaultPrevented()\n      ) {\n        return;\n      }\n\n      event.preventDefault();\n      event.stopPropagation();\n\n      setDraggingOver(false);\n\n      const files = getFiles(event.dataTransfer);\n\n      createAttachments(files);\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [onDrop, isDisabled, createAttachments]\n  );\n\n  return [\n    isDraggingOver,\n    {\n      onDragEnter: handleDragEnter,\n      onDragLeave: handleDragLeave,\n      onDragOver: handleDragOver,\n      onDrop: handleDrop,\n      \"data-drop\": isDraggingOver ? \"\" : undefined,\n      \"data-disabled\": isDisabled ? \"\" : undefined,\n    } as const,\n  ] as const;\n}\n\ninterface ComposerAttachmentsManagerOptions {\n  maxFileSize: number;\n}\n\nexport class AttachmentTooLargeError extends Error {\n  name = \"AttachmentTooLargeError\";\n}\n\nfunction createComposerAttachmentsManager(\n  room: OpaqueRoom,\n  options: ComposerAttachmentsManagerOptions\n) {\n  const attachments: Map<string, CommentMixedAttachment> = new Map();\n  const abortControllers: Map<string, AbortController> = new Map();\n  const eventSource = makeEventSource<void>();\n  let cachedSnapshot: CommentMixedAttachment[] | null = null;\n\n  function notifySubscribers() {\n    // Invalidate the cached snapshot\n    cachedSnapshot = null;\n    eventSource.notify();\n  }\n\n  function uploadAttachment(attachment: CommentLocalAttachment) {\n    const abortController = new AbortController();\n    abortControllers.set(attachment.id, abortController);\n\n    room\n      .uploadAttachment(attachment, {\n        signal: abortController.signal,\n      })\n      .then(() => {\n        attachments.set(attachment.id, {\n          ...attachment,\n          status: \"uploaded\",\n        });\n        notifySubscribers();\n      })\n      .catch((error) => {\n        if (\n          error instanceof Error &&\n          error.name !== \"AbortError\" &&\n          error.name !== \"TimeoutError\"\n        ) {\n          attachments.set(attachment.id, {\n            ...attachment,\n            status: \"error\",\n            error:\n              error instanceof CommentsApiError && error.status === 413\n                ? new AttachmentTooLargeError(\"File is too large.\")\n                : error,\n          });\n          notifySubscribers();\n        }\n      });\n  }\n\n  function addAttachments(addedAttachments: CommentMixedAttachment[]) {\n    // Ignore attachments that are already in the manager\n    const newAttachments = addedAttachments.filter(\n      (attachment) => !attachments.has(attachment.id)\n    );\n\n    const attachmentsToUpload: CommentLocalAttachment[] = [];\n\n    // Add all the new attachments to the manager\n    for (const attachment of newAttachments) {\n      if (attachment.type === \"localAttachment\") {\n        // The file is too large to be uploaded\n        if (attachment.file.size > options.maxFileSize) {\n          attachments.set(attachment.id, {\n            ...attachment,\n            status: \"error\",\n            error: new AttachmentTooLargeError(\"File is too large.\"),\n          });\n\n          continue;\n        }\n\n        // Otherwise, mark the attachment to be uploaded\n        attachments.set(attachment.id, {\n          ...attachment,\n          status: \"uploading\",\n        });\n        attachmentsToUpload.push(attachment);\n      } else {\n        attachments.set(attachment.id, attachment);\n      }\n    }\n\n    // Notify subscribers about the new attachments that were added\n    if (newAttachments.length > 0) {\n      notifySubscribers();\n    }\n\n    // Upload all the new local attachments\n    for (const attachment of attachmentsToUpload) {\n      uploadAttachment(attachment);\n    }\n  }\n\n  function removeAttachment(attachmentId: string) {\n    const abortController = abortControllers.get(attachmentId);\n\n    abortController?.abort();\n\n    attachments.delete(attachmentId);\n    abortControllers.delete(attachmentId);\n\n    notifySubscribers();\n  }\n\n  function getSnapshot() {\n    if (!cachedSnapshot) {\n      cachedSnapshot = Array.from(attachments.values());\n    }\n\n    return cachedSnapshot;\n  }\n\n  function clear() {\n    abortControllers.forEach((controller) => controller.abort());\n    abortControllers.clear();\n    eventSource.clear();\n    attachments.clear();\n\n    notifySubscribers();\n  }\n\n  return {\n    addAttachments,\n    removeAttachment,\n    getSnapshot,\n    subscribe: eventSource.subscribe,\n    clear,\n  };\n}\n\nfunction preventBeforeUnloadDefault(event: BeforeUnloadEvent) {\n  event.preventDefault();\n}\n\nexport function useComposerAttachmentsManager(\n  defaultAttachments: CommentAttachment[],\n  options: ComposerAttachmentsManagerOptions\n) {\n  const room = useRoom();\n  const frozenDefaultAttachments = useInitial(defaultAttachments);\n  const frozenAttachmentsManager = useInitial(() =>\n    createComposerAttachmentsManager(room, options)\n  );\n\n  // Initialize default attachments on mount\n  useEffect(() => {\n    frozenAttachmentsManager.addAttachments(frozenDefaultAttachments);\n  }, [frozenDefaultAttachments, frozenAttachmentsManager]);\n\n  // Clear attachments on unmount\n  useEffect(() => {\n    return () => {\n      frozenAttachmentsManager.clear();\n    };\n  }, [frozenAttachmentsManager]);\n\n  const attachments = useSyncExternalStore(\n    frozenAttachmentsManager.subscribe,\n    frozenAttachmentsManager.getSnapshot,\n    frozenAttachmentsManager.getSnapshot\n  );\n\n  const isUploadingAttachments = useMemo(() => {\n    return attachments.some(\n      (attachment) =>\n        attachment.type === \"localAttachment\" &&\n        attachment.status === \"uploading\"\n    );\n  }, [attachments]);\n\n  useEffect(() => {\n    if (!isUploadingAttachments) {\n      return;\n    }\n\n    window.addEventListener(\"beforeunload\", preventBeforeUnloadDefault);\n\n    return () => {\n      window.removeEventListener(\"beforeunload\", preventBeforeUnloadDefault);\n    };\n  }, [isUploadingAttachments]);\n\n  return {\n    attachments,\n    isUploadingAttachments,\n    addAttachments: frozenAttachmentsManager.addAttachments,\n    removeAttachment: frozenAttachmentsManager.removeAttachment,\n    clearAttachments: frozenAttachmentsManager.clear,\n  };\n}\n"],"names":["isComposerBodyMention","isComposerBodyAutoLink","isComposerBodyCustomLink","isText","exists","isCommentBodyMention","isCommentBodyLink","isCommentBodyText","useComposer","useComposerAttachmentsContext","useState","useLatest","useCallback","getFiles","makeEventSource","CommentsApiError","useRoom","useInitial","useEffect","useSyncExternalStore","useMemo"],"mappings":"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"}
+{"version":3,"file":"utils.js","sources":["../../../src/primitives/Composer/utils.ts"],"sourcesContent":["import type { Placement } from \"@floating-ui/react-dom\";\nimport {\n  type CommentAttachment,\n  type CommentBody,\n  type CommentBodyLink,\n  type CommentBodyMention,\n  type CommentLocalAttachment,\n  type CommentMixedAttachment,\n  CommentsApiError,\n  makeEventSource,\n  type OpaqueRoom,\n} from \"@liveblocks/core\";\nimport { useRoom } from \"@liveblocks/react\";\nimport type { DragEvent } from \"react\";\nimport { useCallback, useEffect, useMemo, useState } from \"react\";\nimport { useSyncExternalStore } from \"use-sync-external-store/shim/index.js\";\n\nimport { isComposerBodyAutoLink } from \"../../slate/plugins/auto-links\";\nimport { isComposerBodyCustomLink } from \"../../slate/plugins/custom-links\";\nimport { isComposerBodyMention } from \"../../slate/plugins/mentions\";\nimport { isText } from \"../../slate/utils/is-text\";\nimport type {\n  ComposerBody,\n  ComposerBodyAutoLink,\n  ComposerBodyCustomLink,\n  ComposerBodyMention,\n  ComposerBodyText,\n  Direction,\n} from \"../../types\";\nimport { getFiles } from \"../../utils/data-transfer\";\nimport { exists } from \"../../utils/exists\";\nimport { useInitial } from \"../../utils/use-initial\";\nimport { useLatest } from \"../../utils/use-latest\";\nimport {\n  isCommentBodyLink,\n  isCommentBodyMention,\n  isCommentBodyText,\n} from \"../Comment/utils\";\nimport { useComposer, useComposerAttachmentsContext } from \"./contexts\";\nimport type { SuggestionsPosition } from \"./types\";\n\nexport function composerBodyMentionToCommentBodyMention(\n  mention: ComposerBodyMention\n): CommentBodyMention {\n  return {\n    type: \"mention\",\n    id: mention.id,\n  };\n}\n\nexport function composerBodyAutoLinkToCommentBodyLink(\n  link: ComposerBodyAutoLink\n): CommentBodyLink {\n  return {\n    type: \"link\",\n    url: link.url,\n  };\n}\n\nexport function composerBodyCustomLinkToCommentBodyLink(\n  link: ComposerBodyCustomLink\n): CommentBodyLink {\n  return {\n    type: \"link\",\n    url: link.url,\n    text: link.children.map((child) => child.text).join(\"\"),\n  };\n}\n\nexport function commentBodyMentionToComposerBodyMention(\n  mention: CommentBodyMention\n): ComposerBodyMention {\n  return {\n    type: \"mention\",\n    id: mention.id,\n    children: [{ text: \"\" }],\n  };\n}\n\nexport function commentBodyLinkToComposerBodyLink(\n  link: CommentBodyLink\n): ComposerBodyAutoLink | ComposerBodyCustomLink {\n  if (link.text) {\n    return {\n      type: \"custom-link\",\n      url: link.url,\n      children: [{ text: link.text }],\n    };\n  } else {\n    return {\n      type: \"auto-link\",\n      url: link.url,\n      children: [{ text: link.url }],\n    };\n  }\n}\n\nexport function composerBodyToCommentBody(body: ComposerBody): CommentBody {\n  return {\n    version: 1,\n    content: body\n      .map((block) => {\n        // All root blocks are paragraphs at the moment\n        if (block.type !== \"paragraph\") {\n          return null;\n        }\n\n        const children = block.children\n          .map((inline) => {\n            if (isComposerBodyMention(inline)) {\n              return composerBodyMentionToCommentBodyMention(inline);\n            }\n\n            if (isComposerBodyAutoLink(inline)) {\n              return composerBodyAutoLinkToCommentBodyLink(inline);\n            }\n\n            if (isComposerBodyCustomLink(inline)) {\n              return composerBodyCustomLinkToCommentBodyLink(inline);\n            }\n\n            if (isText(inline)) {\n              return inline;\n            }\n\n            return null;\n          })\n          .filter(exists);\n\n        return {\n          ...block,\n          children,\n        };\n      })\n      .filter(exists),\n  };\n}\n\nconst emptyComposerBody: ComposerBody = [];\n\nexport function commentBodyToComposerBody(body: CommentBody): ComposerBody {\n  if (!body || !body?.content) {\n    return emptyComposerBody;\n  }\n\n  return body.content\n    .map((block) => {\n      // All root blocks are paragraphs at the moment\n      if (block.type !== \"paragraph\") {\n        return null;\n      }\n\n      const children = block.children\n        .map((inline) => {\n          if (isCommentBodyMention(inline)) {\n            return commentBodyMentionToComposerBodyMention(inline);\n          }\n\n          if (isCommentBodyLink(inline)) {\n            return commentBodyLinkToComposerBodyLink(inline);\n          }\n\n          if (isCommentBodyText(inline)) {\n            return inline as ComposerBodyText;\n          }\n\n          return null;\n        })\n        .filter(exists);\n\n      return {\n        ...block,\n        children,\n      };\n    })\n    .filter(exists);\n}\n\nexport function getPlacementFromPosition(\n  position: SuggestionsPosition,\n  direction: Direction = \"ltr\"\n): Placement {\n  return `${position}-${direction === \"rtl\" ? \"end\" : \"start\"}`;\n}\n\nexport function getSideAndAlignFromPlacement(placement: Placement) {\n  const [side, align = \"center\"] = placement.split(\"-\");\n\n  return [side, align] as const;\n}\n\nexport function useComposerAttachmentsDropArea<\n  T extends HTMLElement = HTMLElement,\n>({\n  onDragEnter,\n  onDragLeave,\n  onDragOver,\n  onDrop,\n  disabled,\n}: {\n  onDragEnter?: (event: DragEvent<T>) => void;\n  onDragLeave?: (event: DragEvent<T>) => void;\n  onDragOver?: (event: DragEvent<T>) => void;\n  onDrop?: (event: DragEvent<T>) => void;\n  disabled?: boolean;\n}) {\n  const { isDisabled: isComposerDisabled } = useComposer();\n  const isDisabled = isComposerDisabled || disabled;\n  const { createAttachments } = useComposerAttachmentsContext();\n  const [isDraggingOver, setDraggingOver] = useState(false);\n  const latestIsDraggingOver = useLatest(isDraggingOver);\n\n  const handleDragEnter = useCallback(\n    (event: DragEvent<T>) => {\n      onDragEnter?.(event);\n\n      if (\n        latestIsDraggingOver.current ||\n        isDisabled ||\n        event.isDefaultPrevented()\n      ) {\n        return;\n      }\n\n      const dataTransfer = event.dataTransfer;\n\n      if (!dataTransfer.types.includes(\"Files\")) {\n        return;\n      }\n\n      event.preventDefault();\n      event.stopPropagation();\n\n      setDraggingOver(true);\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [onDragEnter, isDisabled]\n  );\n\n  const handleDragLeave = useCallback(\n    (event: DragEvent<T>) => {\n      onDragLeave?.(event);\n\n      if (\n        !latestIsDraggingOver.current ||\n        isDisabled ||\n        event.isDefaultPrevented()\n      ) {\n        return;\n      }\n\n      // Ignore drag leave events that are not actually leaving the drop area\n      if (\n        event.relatedTarget\n          ? event.relatedTarget === event.currentTarget ||\n            event.currentTarget.contains(event.relatedTarget as HTMLElement)\n          : event.currentTarget !== event.target\n      ) {\n        return;\n      }\n\n      event.preventDefault();\n      event.stopPropagation();\n\n      setDraggingOver(false);\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [onDragLeave, isDisabled]\n  );\n\n  const handleDragOver = useCallback(\n    (event: DragEvent<T>) => {\n      onDragOver?.(event);\n\n      if (isDisabled || event.isDefaultPrevented()) {\n        return;\n      }\n\n      event.preventDefault();\n      event.stopPropagation();\n    },\n    [onDragOver, isDisabled]\n  );\n\n  const handleDrop = useCallback(\n    (event: DragEvent<T>) => {\n      onDrop?.(event);\n\n      if (\n        !latestIsDraggingOver.current ||\n        isDisabled ||\n        event.isDefaultPrevented()\n      ) {\n        return;\n      }\n\n      event.preventDefault();\n      event.stopPropagation();\n\n      setDraggingOver(false);\n\n      const files = getFiles(event.dataTransfer);\n\n      createAttachments(files);\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [onDrop, isDisabled, createAttachments]\n  );\n\n  return [\n    isDraggingOver,\n    {\n      onDragEnter: handleDragEnter,\n      onDragLeave: handleDragLeave,\n      onDragOver: handleDragOver,\n      onDrop: handleDrop,\n      \"data-drop\": isDraggingOver ? \"\" : undefined,\n      \"data-disabled\": isDisabled ? \"\" : undefined,\n    } as const,\n  ] as const;\n}\n\ninterface ComposerAttachmentsManagerOptions {\n  maxFileSize: number;\n}\n\nexport class AttachmentTooLargeError extends Error {\n  origin: \"client\" | \"server\";\n  name = \"AttachmentTooLargeError\";\n\n  constructor(message: string, origin: \"client\" | \"server\" = \"client\") {\n    super(message);\n    this.origin = origin;\n  }\n}\n\nfunction createComposerAttachmentsManager(\n  room: OpaqueRoom,\n  options: ComposerAttachmentsManagerOptions\n) {\n  const attachments: Map<string, CommentMixedAttachment> = new Map();\n  const abortControllers: Map<string, AbortController> = new Map();\n  const eventSource = makeEventSource<void>();\n  let cachedSnapshot: CommentMixedAttachment[] | null = null;\n\n  function notifySubscribers() {\n    // Invalidate the cached snapshot\n    cachedSnapshot = null;\n    eventSource.notify();\n  }\n\n  function uploadAttachment(attachment: CommentLocalAttachment) {\n    const abortController = new AbortController();\n    abortControllers.set(attachment.id, abortController);\n\n    room\n      .uploadAttachment(attachment, {\n        signal: abortController.signal,\n      })\n      .then(() => {\n        attachments.set(attachment.id, {\n          ...attachment,\n          status: \"uploaded\",\n        });\n        notifySubscribers();\n      })\n      .catch((error) => {\n        if (\n          error instanceof Error &&\n          error.name !== \"AbortError\" &&\n          error.name !== \"TimeoutError\"\n        ) {\n          attachments.set(attachment.id, {\n            ...attachment,\n            status: \"error\",\n            error:\n              error instanceof CommentsApiError && error.status === 413\n                ? new AttachmentTooLargeError(\"File is too large.\", \"server\")\n                : error,\n          });\n          notifySubscribers();\n        }\n      });\n  }\n\n  function addAttachments(addedAttachments: CommentMixedAttachment[]) {\n    if (addedAttachments.length === 0) {\n      return;\n    }\n\n    // Ignore attachments that are already in the manager\n    const newAttachments = addedAttachments.filter(\n      (attachment) => !attachments.has(attachment.id)\n    );\n\n    const attachmentsToUpload: CommentLocalAttachment[] = [];\n\n    // Add all the new attachments to the manager\n    for (const attachment of newAttachments) {\n      if (attachment.type === \"localAttachment\") {\n        // The file is too large to be uploaded\n        if (attachment.file.size > options.maxFileSize) {\n          attachments.set(attachment.id, {\n            ...attachment,\n            status: \"error\",\n            error: new AttachmentTooLargeError(\"File is too large.\", \"client\"),\n          });\n\n          continue;\n        }\n\n        // Otherwise, mark the attachment to be uploaded\n        attachments.set(attachment.id, {\n          ...attachment,\n          status: \"uploading\",\n        });\n        attachmentsToUpload.push(attachment);\n      } else {\n        attachments.set(attachment.id, attachment);\n      }\n    }\n\n    // Notify subscribers about the new attachments that were added\n    if (newAttachments.length > 0) {\n      notifySubscribers();\n    }\n\n    // Upload all the new local attachments\n    for (const attachment of attachmentsToUpload) {\n      uploadAttachment(attachment);\n    }\n  }\n\n  function removeAttachment(attachmentId: string) {\n    const abortController = abortControllers.get(attachmentId);\n\n    abortController?.abort();\n\n    attachments.delete(attachmentId);\n    abortControllers.delete(attachmentId);\n\n    notifySubscribers();\n  }\n\n  function getSnapshot() {\n    if (!cachedSnapshot) {\n      cachedSnapshot = Array.from(attachments.values());\n    }\n\n    return cachedSnapshot;\n  }\n\n  // Clear all attachments and abort all ongoing uploads\n  function clear() {\n    abortControllers.forEach((controller) => controller.abort());\n    abortControllers.clear();\n    attachments.clear();\n\n    notifySubscribers();\n  }\n\n  function dispose() {\n    clear();\n    eventSource.clear();\n  }\n\n  return {\n    addAttachments,\n    removeAttachment,\n    getSnapshot,\n    subscribe: eventSource.subscribe,\n    clear,\n    dispose,\n  };\n}\n\nfunction preventBeforeUnloadDefault(event: BeforeUnloadEvent) {\n  event.preventDefault();\n}\n\nexport function useComposerAttachmentsManager(\n  defaultAttachments: CommentAttachment[],\n  options: ComposerAttachmentsManagerOptions\n) {\n  const room = useRoom();\n  const frozenDefaultAttachments = useInitial(defaultAttachments);\n  const frozenAttachmentsManager = useInitial(() =>\n    createComposerAttachmentsManager(room, options)\n  );\n\n  // Initialize default attachments on mount\n  useEffect(() => {\n    frozenAttachmentsManager.addAttachments(frozenDefaultAttachments);\n  }, [frozenDefaultAttachments, frozenAttachmentsManager]);\n\n  // Cleanup on unmount\n  useEffect(() => {\n    return () => {\n      frozenAttachmentsManager.dispose();\n    };\n  }, [frozenAttachmentsManager]);\n\n  const attachments = useSyncExternalStore(\n    frozenAttachmentsManager.subscribe,\n    frozenAttachmentsManager.getSnapshot,\n    frozenAttachmentsManager.getSnapshot\n  );\n\n  const isUploadingAttachments = useMemo(() => {\n    return attachments.some(\n      (attachment) =>\n        attachment.type === \"localAttachment\" &&\n        attachment.status === \"uploading\"\n    );\n  }, [attachments]);\n\n  useEffect(() => {\n    if (!isUploadingAttachments) {\n      return;\n    }\n\n    window.addEventListener(\"beforeunload\", preventBeforeUnloadDefault);\n\n    return () => {\n      window.removeEventListener(\"beforeunload\", preventBeforeUnloadDefault);\n    };\n  }, [isUploadingAttachments]);\n\n  return {\n    attachments,\n    isUploadingAttachments,\n    addAttachments: frozenAttachmentsManager.addAttachments,\n    removeAttachment: frozenAttachmentsManager.removeAttachment,\n    clearAttachments: frozenAttachmentsManager.clear,\n  };\n}\n"],"names":["isComposerBodyMention","isComposerBodyAutoLink","isComposerBodyCustomLink","isText","exists","isCommentBodyMention","isCommentBodyLink","isCommentBodyText","useComposer","useComposerAttachmentsContext","useState","useLatest","useCallback","getFiles","makeEventSource","CommentsApiError","useRoom","useInitial","useEffect","useSyncExternalStore","useMemo"],"mappings":"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"}

package/dist/primitives/Composer/utils.mjs

@@ -198,9 +198,10 @@ function useComposerAttachmentsDropArea({
   ];
 }
 class AttachmentTooLargeError extends Error {
-  constructor() {
-    super(...arguments);
+  constructor(message, origin = "client") {
+    super(message);
     this.name = "AttachmentTooLargeError";
+    this.origin = origin;
   }
 }
 function createComposerAttachmentsManager(room, options) {
@@ -228,13 +229,16 @@ function createComposerAttachmentsManager(room, options) {
         attachments.set(attachment.id, {
           ...attachment,
           status: "error",
-          error: error instanceof CommentsApiError && error.status === 413 ? new AttachmentTooLargeError("File is too large.") : error
+          error: error instanceof CommentsApiError && error.status === 413 ? new AttachmentTooLargeError("File is too large.", "server") : error
         });
         notifySubscribers();
       }
     });
   }
   function addAttachments(addedAttachments) {
+    if (addedAttachments.length === 0) {
+      return;
+    }
     const newAttachments = addedAttachments.filter(
       (attachment) => !attachments.has(attachment.id)
     );
@@ -245,7 +249,7 @@ function createComposerAttachmentsManager(room, options) {
           attachments.set(attachment.id, {
             ...attachment,
             status: "error",
-            error: new AttachmentTooLargeError("File is too large.")
+            error: new AttachmentTooLargeError("File is too large.", "client")
           });
           continue;
         }
@@ -281,16 +285,20 @@ function createComposerAttachmentsManager(room, options) {
   function clear() {
     abortControllers.forEach((controller) => controller.abort());
     abortControllers.clear();
-    eventSource.clear();
     attachments.clear();
     notifySubscribers();
   }
+  function dispose() {
+    clear();
+    eventSource.clear();
+  }
   return {
     addAttachments,
     removeAttachment,
     getSnapshot,
     subscribe: eventSource.subscribe,
-    clear
+    clear,
+    dispose
   };
 }
 function preventBeforeUnloadDefault(event) {
@@ -307,7 +315,7 @@ function useComposerAttachmentsManager(defaultAttachments, options) {
   }, [frozenDefaultAttachments, frozenAttachmentsManager]);
   useEffect(() => {
     return () => {
-      frozenAttachmentsManager.clear();
+      frozenAttachmentsManager.dispose();
     };
   }, [frozenAttachmentsManager]);
   const attachments = useSyncExternalStore(

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

@@ -1 +1 @@
-{"version":3,"file":"utils.mjs","sources":["../../../src/primitives/Composer/utils.ts"],"sourcesContent":["import type { Placement } from \"@floating-ui/react-dom\";\nimport {\n  type CommentAttachment,\n  type CommentBody,\n  type CommentBodyLink,\n  type CommentBodyMention,\n  type CommentLocalAttachment,\n  type CommentMixedAttachment,\n  CommentsApiError,\n  makeEventSource,\n  type OpaqueRoom,\n} from \"@liveblocks/core\";\nimport { useRoom } from \"@liveblocks/react\";\nimport type { DragEvent } from \"react\";\nimport { useCallback, useEffect, useMemo, useState } from \"react\";\nimport { useSyncExternalStore } from \"use-sync-external-store/shim/index.js\";\n\nimport { isComposerBodyAutoLink } from \"../../slate/plugins/auto-links\";\nimport { isComposerBodyCustomLink } from \"../../slate/plugins/custom-links\";\nimport { isComposerBodyMention } from \"../../slate/plugins/mentions\";\nimport { isText } from \"../../slate/utils/is-text\";\nimport type {\n  ComposerBody,\n  ComposerBodyAutoLink,\n  ComposerBodyCustomLink,\n  ComposerBodyMention,\n  ComposerBodyText,\n  Direction,\n} from \"../../types\";\nimport { getFiles } from \"../../utils/data-transfer\";\nimport { exists } from \"../../utils/exists\";\nimport { useInitial } from \"../../utils/use-initial\";\nimport { useLatest } from \"../../utils/use-latest\";\nimport {\n  isCommentBodyLink,\n  isCommentBodyMention,\n  isCommentBodyText,\n} from \"../Comment/utils\";\nimport { useComposer, useComposerAttachmentsContext } from \"./contexts\";\nimport type { SuggestionsPosition } from \"./types\";\n\nexport function composerBodyMentionToCommentBodyMention(\n  mention: ComposerBodyMention\n): CommentBodyMention {\n  return {\n    type: \"mention\",\n    id: mention.id,\n  };\n}\n\nexport function composerBodyAutoLinkToCommentBodyLink(\n  link: ComposerBodyAutoLink\n): CommentBodyLink {\n  return {\n    type: \"link\",\n    url: link.url,\n  };\n}\n\nexport function composerBodyCustomLinkToCommentBodyLink(\n  link: ComposerBodyCustomLink\n): CommentBodyLink {\n  return {\n    type: \"link\",\n    url: link.url,\n    text: link.children.map((child) => child.text).join(\"\"),\n  };\n}\n\nexport function commentBodyMentionToComposerBodyMention(\n  mention: CommentBodyMention\n): ComposerBodyMention {\n  return {\n    type: \"mention\",\n    id: mention.id,\n    children: [{ text: \"\" }],\n  };\n}\n\nexport function commentBodyLinkToComposerBodyLink(\n  link: CommentBodyLink\n): ComposerBodyAutoLink | ComposerBodyCustomLink {\n  if (link.text) {\n    return {\n      type: \"custom-link\",\n      url: link.url,\n      children: [{ text: link.text }],\n    };\n  } else {\n    return {\n      type: \"auto-link\",\n      url: link.url,\n      children: [{ text: link.url }],\n    };\n  }\n}\n\nexport function composerBodyToCommentBody(body: ComposerBody): CommentBody {\n  return {\n    version: 1,\n    content: body\n      .map((block) => {\n        // All root blocks are paragraphs at the moment\n        if (block.type !== \"paragraph\") {\n          return null;\n        }\n\n        const children = block.children\n          .map((inline) => {\n            if (isComposerBodyMention(inline)) {\n              return composerBodyMentionToCommentBodyMention(inline);\n            }\n\n            if (isComposerBodyAutoLink(inline)) {\n              return composerBodyAutoLinkToCommentBodyLink(inline);\n            }\n\n            if (isComposerBodyCustomLink(inline)) {\n              return composerBodyCustomLinkToCommentBodyLink(inline);\n            }\n\n            if (isText(inline)) {\n              return inline;\n            }\n\n            return null;\n          })\n          .filter(exists);\n\n        return {\n          ...block,\n          children,\n        };\n      })\n      .filter(exists),\n  };\n}\n\nconst emptyComposerBody: ComposerBody = [];\n\nexport function commentBodyToComposerBody(body: CommentBody): ComposerBody {\n  if (!body || !body?.content) {\n    return emptyComposerBody;\n  }\n\n  return body.content\n    .map((block) => {\n      // All root blocks are paragraphs at the moment\n      if (block.type !== \"paragraph\") {\n        return null;\n      }\n\n      const children = block.children\n        .map((inline) => {\n          if (isCommentBodyMention(inline)) {\n            return commentBodyMentionToComposerBodyMention(inline);\n          }\n\n          if (isCommentBodyLink(inline)) {\n            return commentBodyLinkToComposerBodyLink(inline);\n          }\n\n          if (isCommentBodyText(inline)) {\n            return inline as ComposerBodyText;\n          }\n\n          return null;\n        })\n        .filter(exists);\n\n      return {\n        ...block,\n        children,\n      };\n    })\n    .filter(exists);\n}\n\nexport function getPlacementFromPosition(\n  position: SuggestionsPosition,\n  direction: Direction = \"ltr\"\n): Placement {\n  return `${position}-${direction === \"rtl\" ? \"end\" : \"start\"}`;\n}\n\nexport function getSideAndAlignFromPlacement(placement: Placement) {\n  const [side, align = \"center\"] = placement.split(\"-\");\n\n  return [side, align] as const;\n}\n\nexport function useComposerAttachmentsDropArea<\n  T extends HTMLElement = HTMLElement,\n>({\n  onDragEnter,\n  onDragLeave,\n  onDragOver,\n  onDrop,\n  disabled,\n}: {\n  onDragEnter?: (event: DragEvent<T>) => void;\n  onDragLeave?: (event: DragEvent<T>) => void;\n  onDragOver?: (event: DragEvent<T>) => void;\n  onDrop?: (event: DragEvent<T>) => void;\n  disabled?: boolean;\n}) {\n  const { isDisabled: isComposerDisabled } = useComposer();\n  const isDisabled = isComposerDisabled || disabled;\n  const { createAttachments } = useComposerAttachmentsContext();\n  const [isDraggingOver, setDraggingOver] = useState(false);\n  const latestIsDraggingOver = useLatest(isDraggingOver);\n\n  const handleDragEnter = useCallback(\n    (event: DragEvent<T>) => {\n      onDragEnter?.(event);\n\n      if (\n        latestIsDraggingOver.current ||\n        isDisabled ||\n        event.isDefaultPrevented()\n      ) {\n        return;\n      }\n\n      const dataTransfer = event.dataTransfer;\n\n      if (!dataTransfer.types.includes(\"Files\")) {\n        return;\n      }\n\n      event.preventDefault();\n      event.stopPropagation();\n\n      setDraggingOver(true);\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [onDragEnter, isDisabled]\n  );\n\n  const handleDragLeave = useCallback(\n    (event: DragEvent<T>) => {\n      onDragLeave?.(event);\n\n      if (\n        !latestIsDraggingOver.current ||\n        isDisabled ||\n        event.isDefaultPrevented()\n      ) {\n        return;\n      }\n\n      // Ignore drag leave events that are not actually leaving the drop area\n      if (\n        event.relatedTarget\n          ? event.relatedTarget === event.currentTarget ||\n            event.currentTarget.contains(event.relatedTarget as HTMLElement)\n          : event.currentTarget !== event.target\n      ) {\n        return;\n      }\n\n      event.preventDefault();\n      event.stopPropagation();\n\n      setDraggingOver(false);\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [onDragLeave, isDisabled]\n  );\n\n  const handleDragOver = useCallback(\n    (event: DragEvent<T>) => {\n      onDragOver?.(event);\n\n      if (isDisabled || event.isDefaultPrevented()) {\n        return;\n      }\n\n      event.preventDefault();\n      event.stopPropagation();\n    },\n    [onDragOver, isDisabled]\n  );\n\n  const handleDrop = useCallback(\n    (event: DragEvent<T>) => {\n      onDrop?.(event);\n\n      if (\n        !latestIsDraggingOver.current ||\n        isDisabled ||\n        event.isDefaultPrevented()\n      ) {\n        return;\n      }\n\n      event.preventDefault();\n      event.stopPropagation();\n\n      setDraggingOver(false);\n\n      const files = getFiles(event.dataTransfer);\n\n      createAttachments(files);\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [onDrop, isDisabled, createAttachments]\n  );\n\n  return [\n    isDraggingOver,\n    {\n      onDragEnter: handleDragEnter,\n      onDragLeave: handleDragLeave,\n      onDragOver: handleDragOver,\n      onDrop: handleDrop,\n      \"data-drop\": isDraggingOver ? \"\" : undefined,\n      \"data-disabled\": isDisabled ? \"\" : undefined,\n    } as const,\n  ] as const;\n}\n\ninterface ComposerAttachmentsManagerOptions {\n  maxFileSize: number;\n}\n\nexport class AttachmentTooLargeError extends Error {\n  name = \"AttachmentTooLargeError\";\n}\n\nfunction createComposerAttachmentsManager(\n  room: OpaqueRoom,\n  options: ComposerAttachmentsManagerOptions\n) {\n  const attachments: Map<string, CommentMixedAttachment> = new Map();\n  const abortControllers: Map<string, AbortController> = new Map();\n  const eventSource = makeEventSource<void>();\n  let cachedSnapshot: CommentMixedAttachment[] | null = null;\n\n  function notifySubscribers() {\n    // Invalidate the cached snapshot\n    cachedSnapshot = null;\n    eventSource.notify();\n  }\n\n  function uploadAttachment(attachment: CommentLocalAttachment) {\n    const abortController = new AbortController();\n    abortControllers.set(attachment.id, abortController);\n\n    room\n      .uploadAttachment(attachment, {\n        signal: abortController.signal,\n      })\n      .then(() => {\n        attachments.set(attachment.id, {\n          ...attachment,\n          status: \"uploaded\",\n        });\n        notifySubscribers();\n      })\n      .catch((error) => {\n        if (\n          error instanceof Error &&\n          error.name !== \"AbortError\" &&\n          error.name !== \"TimeoutError\"\n        ) {\n          attachments.set(attachment.id, {\n            ...attachment,\n            status: \"error\",\n            error:\n              error instanceof CommentsApiError && error.status === 413\n                ? new AttachmentTooLargeError(\"File is too large.\")\n                : error,\n          });\n          notifySubscribers();\n        }\n      });\n  }\n\n  function addAttachments(addedAttachments: CommentMixedAttachment[]) {\n    // Ignore attachments that are already in the manager\n    const newAttachments = addedAttachments.filter(\n      (attachment) => !attachments.has(attachment.id)\n    );\n\n    const attachmentsToUpload: CommentLocalAttachment[] = [];\n\n    // Add all the new attachments to the manager\n    for (const attachment of newAttachments) {\n      if (attachment.type === \"localAttachment\") {\n        // The file is too large to be uploaded\n        if (attachment.file.size > options.maxFileSize) {\n          attachments.set(attachment.id, {\n            ...attachment,\n            status: \"error\",\n            error: new AttachmentTooLargeError(\"File is too large.\"),\n          });\n\n          continue;\n        }\n\n        // Otherwise, mark the attachment to be uploaded\n        attachments.set(attachment.id, {\n          ...attachment,\n          status: \"uploading\",\n        });\n        attachmentsToUpload.push(attachment);\n      } else {\n        attachments.set(attachment.id, attachment);\n      }\n    }\n\n    // Notify subscribers about the new attachments that were added\n    if (newAttachments.length > 0) {\n      notifySubscribers();\n    }\n\n    // Upload all the new local attachments\n    for (const attachment of attachmentsToUpload) {\n      uploadAttachment(attachment);\n    }\n  }\n\n  function removeAttachment(attachmentId: string) {\n    const abortController = abortControllers.get(attachmentId);\n\n    abortController?.abort();\n\n    attachments.delete(attachmentId);\n    abortControllers.delete(attachmentId);\n\n    notifySubscribers();\n  }\n\n  function getSnapshot() {\n    if (!cachedSnapshot) {\n      cachedSnapshot = Array.from(attachments.values());\n    }\n\n    return cachedSnapshot;\n  }\n\n  function clear() {\n    abortControllers.forEach((controller) => controller.abort());\n    abortControllers.clear();\n    eventSource.clear();\n    attachments.clear();\n\n    notifySubscribers();\n  }\n\n  return {\n    addAttachments,\n    removeAttachment,\n    getSnapshot,\n    subscribe: eventSource.subscribe,\n    clear,\n  };\n}\n\nfunction preventBeforeUnloadDefault(event: BeforeUnloadEvent) {\n  event.preventDefault();\n}\n\nexport function useComposerAttachmentsManager(\n  defaultAttachments: CommentAttachment[],\n  options: ComposerAttachmentsManagerOptions\n) {\n  const room = useRoom();\n  const frozenDefaultAttachments = useInitial(defaultAttachments);\n  const frozenAttachmentsManager = useInitial(() =>\n    createComposerAttachmentsManager(room, options)\n  );\n\n  // Initialize default attachments on mount\n  useEffect(() => {\n    frozenAttachmentsManager.addAttachments(frozenDefaultAttachments);\n  }, [frozenDefaultAttachments, frozenAttachmentsManager]);\n\n  // Clear attachments on unmount\n  useEffect(() => {\n    return () => {\n      frozenAttachmentsManager.clear();\n    };\n  }, [frozenAttachmentsManager]);\n\n  const attachments = useSyncExternalStore(\n    frozenAttachmentsManager.subscribe,\n    frozenAttachmentsManager.getSnapshot,\n    frozenAttachmentsManager.getSnapshot\n  );\n\n  const isUploadingAttachments = useMemo(() => {\n    return attachments.some(\n      (attachment) =>\n        attachment.type === \"localAttachment\" &&\n        attachment.status === \"uploading\"\n    );\n  }, [attachments]);\n\n  useEffect(() => {\n    if (!isUploadingAttachments) {\n      return;\n    }\n\n    window.addEventListener(\"beforeunload\", preventBeforeUnloadDefault);\n\n    return () => {\n      window.removeEventListener(\"beforeunload\", preventBeforeUnloadDefault);\n    };\n  }, [isUploadingAttachments]);\n\n  return {\n    attachments,\n    isUploadingAttachments,\n    addAttachments: frozenAttachmentsManager.addAttachments,\n    removeAttachment: frozenAttachmentsManager.removeAttachment,\n    clearAttachments: frozenAttachmentsManager.clear,\n  };\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"utils.mjs","sources":["../../../src/primitives/Composer/utils.ts"],"sourcesContent":["import type { Placement } from \"@floating-ui/react-dom\";\nimport {\n  type CommentAttachment,\n  type CommentBody,\n  type CommentBodyLink,\n  type CommentBodyMention,\n  type CommentLocalAttachment,\n  type CommentMixedAttachment,\n  CommentsApiError,\n  makeEventSource,\n  type OpaqueRoom,\n} from \"@liveblocks/core\";\nimport { useRoom } from \"@liveblocks/react\";\nimport type { DragEvent } from \"react\";\nimport { useCallback, useEffect, useMemo, useState } from \"react\";\nimport { useSyncExternalStore } from \"use-sync-external-store/shim/index.js\";\n\nimport { isComposerBodyAutoLink } from \"../../slate/plugins/auto-links\";\nimport { isComposerBodyCustomLink } from \"../../slate/plugins/custom-links\";\nimport { isComposerBodyMention } from \"../../slate/plugins/mentions\";\nimport { isText } from \"../../slate/utils/is-text\";\nimport type {\n  ComposerBody,\n  ComposerBodyAutoLink,\n  ComposerBodyCustomLink,\n  ComposerBodyMention,\n  ComposerBodyText,\n  Direction,\n} from \"../../types\";\nimport { getFiles } from \"../../utils/data-transfer\";\nimport { exists } from \"../../utils/exists\";\nimport { useInitial } from \"../../utils/use-initial\";\nimport { useLatest } from \"../../utils/use-latest\";\nimport {\n  isCommentBodyLink,\n  isCommentBodyMention,\n  isCommentBodyText,\n} from \"../Comment/utils\";\nimport { useComposer, useComposerAttachmentsContext } from \"./contexts\";\nimport type { SuggestionsPosition } from \"./types\";\n\nexport function composerBodyMentionToCommentBodyMention(\n  mention: ComposerBodyMention\n): CommentBodyMention {\n  return {\n    type: \"mention\",\n    id: mention.id,\n  };\n}\n\nexport function composerBodyAutoLinkToCommentBodyLink(\n  link: ComposerBodyAutoLink\n): CommentBodyLink {\n  return {\n    type: \"link\",\n    url: link.url,\n  };\n}\n\nexport function composerBodyCustomLinkToCommentBodyLink(\n  link: ComposerBodyCustomLink\n): CommentBodyLink {\n  return {\n    type: \"link\",\n    url: link.url,\n    text: link.children.map((child) => child.text).join(\"\"),\n  };\n}\n\nexport function commentBodyMentionToComposerBodyMention(\n  mention: CommentBodyMention\n): ComposerBodyMention {\n  return {\n    type: \"mention\",\n    id: mention.id,\n    children: [{ text: \"\" }],\n  };\n}\n\nexport function commentBodyLinkToComposerBodyLink(\n  link: CommentBodyLink\n): ComposerBodyAutoLink | ComposerBodyCustomLink {\n  if (link.text) {\n    return {\n      type: \"custom-link\",\n      url: link.url,\n      children: [{ text: link.text }],\n    };\n  } else {\n    return {\n      type: \"auto-link\",\n      url: link.url,\n      children: [{ text: link.url }],\n    };\n  }\n}\n\nexport function composerBodyToCommentBody(body: ComposerBody): CommentBody {\n  return {\n    version: 1,\n    content: body\n      .map((block) => {\n        // All root blocks are paragraphs at the moment\n        if (block.type !== \"paragraph\") {\n          return null;\n        }\n\n        const children = block.children\n          .map((inline) => {\n            if (isComposerBodyMention(inline)) {\n              return composerBodyMentionToCommentBodyMention(inline);\n            }\n\n            if (isComposerBodyAutoLink(inline)) {\n              return composerBodyAutoLinkToCommentBodyLink(inline);\n            }\n\n            if (isComposerBodyCustomLink(inline)) {\n              return composerBodyCustomLinkToCommentBodyLink(inline);\n            }\n\n            if (isText(inline)) {\n              return inline;\n            }\n\n            return null;\n          })\n          .filter(exists);\n\n        return {\n          ...block,\n          children,\n        };\n      })\n      .filter(exists),\n  };\n}\n\nconst emptyComposerBody: ComposerBody = [];\n\nexport function commentBodyToComposerBody(body: CommentBody): ComposerBody {\n  if (!body || !body?.content) {\n    return emptyComposerBody;\n  }\n\n  return body.content\n    .map((block) => {\n      // All root blocks are paragraphs at the moment\n      if (block.type !== \"paragraph\") {\n        return null;\n      }\n\n      const children = block.children\n        .map((inline) => {\n          if (isCommentBodyMention(inline)) {\n            return commentBodyMentionToComposerBodyMention(inline);\n          }\n\n          if (isCommentBodyLink(inline)) {\n            return commentBodyLinkToComposerBodyLink(inline);\n          }\n\n          if (isCommentBodyText(inline)) {\n            return inline as ComposerBodyText;\n          }\n\n          return null;\n        })\n        .filter(exists);\n\n      return {\n        ...block,\n        children,\n      };\n    })\n    .filter(exists);\n}\n\nexport function getPlacementFromPosition(\n  position: SuggestionsPosition,\n  direction: Direction = \"ltr\"\n): Placement {\n  return `${position}-${direction === \"rtl\" ? \"end\" : \"start\"}`;\n}\n\nexport function getSideAndAlignFromPlacement(placement: Placement) {\n  const [side, align = \"center\"] = placement.split(\"-\");\n\n  return [side, align] as const;\n}\n\nexport function useComposerAttachmentsDropArea<\n  T extends HTMLElement = HTMLElement,\n>({\n  onDragEnter,\n  onDragLeave,\n  onDragOver,\n  onDrop,\n  disabled,\n}: {\n  onDragEnter?: (event: DragEvent<T>) => void;\n  onDragLeave?: (event: DragEvent<T>) => void;\n  onDragOver?: (event: DragEvent<T>) => void;\n  onDrop?: (event: DragEvent<T>) => void;\n  disabled?: boolean;\n}) {\n  const { isDisabled: isComposerDisabled } = useComposer();\n  const isDisabled = isComposerDisabled || disabled;\n  const { createAttachments } = useComposerAttachmentsContext();\n  const [isDraggingOver, setDraggingOver] = useState(false);\n  const latestIsDraggingOver = useLatest(isDraggingOver);\n\n  const handleDragEnter = useCallback(\n    (event: DragEvent<T>) => {\n      onDragEnter?.(event);\n\n      if (\n        latestIsDraggingOver.current ||\n        isDisabled ||\n        event.isDefaultPrevented()\n      ) {\n        return;\n      }\n\n      const dataTransfer = event.dataTransfer;\n\n      if (!dataTransfer.types.includes(\"Files\")) {\n        return;\n      }\n\n      event.preventDefault();\n      event.stopPropagation();\n\n      setDraggingOver(true);\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [onDragEnter, isDisabled]\n  );\n\n  const handleDragLeave = useCallback(\n    (event: DragEvent<T>) => {\n      onDragLeave?.(event);\n\n      if (\n        !latestIsDraggingOver.current ||\n        isDisabled ||\n        event.isDefaultPrevented()\n      ) {\n        return;\n      }\n\n      // Ignore drag leave events that are not actually leaving the drop area\n      if (\n        event.relatedTarget\n          ? event.relatedTarget === event.currentTarget ||\n            event.currentTarget.contains(event.relatedTarget as HTMLElement)\n          : event.currentTarget !== event.target\n      ) {\n        return;\n      }\n\n      event.preventDefault();\n      event.stopPropagation();\n\n      setDraggingOver(false);\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [onDragLeave, isDisabled]\n  );\n\n  const handleDragOver = useCallback(\n    (event: DragEvent<T>) => {\n      onDragOver?.(event);\n\n      if (isDisabled || event.isDefaultPrevented()) {\n        return;\n      }\n\n      event.preventDefault();\n      event.stopPropagation();\n    },\n    [onDragOver, isDisabled]\n  );\n\n  const handleDrop = useCallback(\n    (event: DragEvent<T>) => {\n      onDrop?.(event);\n\n      if (\n        !latestIsDraggingOver.current ||\n        isDisabled ||\n        event.isDefaultPrevented()\n      ) {\n        return;\n      }\n\n      event.preventDefault();\n      event.stopPropagation();\n\n      setDraggingOver(false);\n\n      const files = getFiles(event.dataTransfer);\n\n      createAttachments(files);\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [onDrop, isDisabled, createAttachments]\n  );\n\n  return [\n    isDraggingOver,\n    {\n      onDragEnter: handleDragEnter,\n      onDragLeave: handleDragLeave,\n      onDragOver: handleDragOver,\n      onDrop: handleDrop,\n      \"data-drop\": isDraggingOver ? \"\" : undefined,\n      \"data-disabled\": isDisabled ? \"\" : undefined,\n    } as const,\n  ] as const;\n}\n\ninterface ComposerAttachmentsManagerOptions {\n  maxFileSize: number;\n}\n\nexport class AttachmentTooLargeError extends Error {\n  origin: \"client\" | \"server\";\n  name = \"AttachmentTooLargeError\";\n\n  constructor(message: string, origin: \"client\" | \"server\" = \"client\") {\n    super(message);\n    this.origin = origin;\n  }\n}\n\nfunction createComposerAttachmentsManager(\n  room: OpaqueRoom,\n  options: ComposerAttachmentsManagerOptions\n) {\n  const attachments: Map<string, CommentMixedAttachment> = new Map();\n  const abortControllers: Map<string, AbortController> = new Map();\n  const eventSource = makeEventSource<void>();\n  let cachedSnapshot: CommentMixedAttachment[] | null = null;\n\n  function notifySubscribers() {\n    // Invalidate the cached snapshot\n    cachedSnapshot = null;\n    eventSource.notify();\n  }\n\n  function uploadAttachment(attachment: CommentLocalAttachment) {\n    const abortController = new AbortController();\n    abortControllers.set(attachment.id, abortController);\n\n    room\n      .uploadAttachment(attachment, {\n        signal: abortController.signal,\n      })\n      .then(() => {\n        attachments.set(attachment.id, {\n          ...attachment,\n          status: \"uploaded\",\n        });\n        notifySubscribers();\n      })\n      .catch((error) => {\n        if (\n          error instanceof Error &&\n          error.name !== \"AbortError\" &&\n          error.name !== \"TimeoutError\"\n        ) {\n          attachments.set(attachment.id, {\n            ...attachment,\n            status: \"error\",\n            error:\n              error instanceof CommentsApiError && error.status === 413\n                ? new AttachmentTooLargeError(\"File is too large.\", \"server\")\n                : error,\n          });\n          notifySubscribers();\n        }\n      });\n  }\n\n  function addAttachments(addedAttachments: CommentMixedAttachment[]) {\n    if (addedAttachments.length === 0) {\n      return;\n    }\n\n    // Ignore attachments that are already in the manager\n    const newAttachments = addedAttachments.filter(\n      (attachment) => !attachments.has(attachment.id)\n    );\n\n    const attachmentsToUpload: CommentLocalAttachment[] = [];\n\n    // Add all the new attachments to the manager\n    for (const attachment of newAttachments) {\n      if (attachment.type === \"localAttachment\") {\n        // The file is too large to be uploaded\n        if (attachment.file.size > options.maxFileSize) {\n          attachments.set(attachment.id, {\n            ...attachment,\n            status: \"error\",\n            error: new AttachmentTooLargeError(\"File is too large.\", \"client\"),\n          });\n\n          continue;\n        }\n\n        // Otherwise, mark the attachment to be uploaded\n        attachments.set(attachment.id, {\n          ...attachment,\n          status: \"uploading\",\n        });\n        attachmentsToUpload.push(attachment);\n      } else {\n        attachments.set(attachment.id, attachment);\n      }\n    }\n\n    // Notify subscribers about the new attachments that were added\n    if (newAttachments.length > 0) {\n      notifySubscribers();\n    }\n\n    // Upload all the new local attachments\n    for (const attachment of attachmentsToUpload) {\n      uploadAttachment(attachment);\n    }\n  }\n\n  function removeAttachment(attachmentId: string) {\n    const abortController = abortControllers.get(attachmentId);\n\n    abortController?.abort();\n\n    attachments.delete(attachmentId);\n    abortControllers.delete(attachmentId);\n\n    notifySubscribers();\n  }\n\n  function getSnapshot() {\n    if (!cachedSnapshot) {\n      cachedSnapshot = Array.from(attachments.values());\n    }\n\n    return cachedSnapshot;\n  }\n\n  // Clear all attachments and abort all ongoing uploads\n  function clear() {\n    abortControllers.forEach((controller) => controller.abort());\n    abortControllers.clear();\n    attachments.clear();\n\n    notifySubscribers();\n  }\n\n  function dispose() {\n    clear();\n    eventSource.clear();\n  }\n\n  return {\n    addAttachments,\n    removeAttachment,\n    getSnapshot,\n    subscribe: eventSource.subscribe,\n    clear,\n    dispose,\n  };\n}\n\nfunction preventBeforeUnloadDefault(event: BeforeUnloadEvent) {\n  event.preventDefault();\n}\n\nexport function useComposerAttachmentsManager(\n  defaultAttachments: CommentAttachment[],\n  options: ComposerAttachmentsManagerOptions\n) {\n  const room = useRoom();\n  const frozenDefaultAttachments = useInitial(defaultAttachments);\n  const frozenAttachmentsManager = useInitial(() =>\n    createComposerAttachmentsManager(room, options)\n  );\n\n  // Initialize default attachments on mount\n  useEffect(() => {\n    frozenAttachmentsManager.addAttachments(frozenDefaultAttachments);\n  }, [frozenDefaultAttachments, frozenAttachmentsManager]);\n\n  // Cleanup on unmount\n  useEffect(() => {\n    return () => {\n      frozenAttachmentsManager.dispose();\n    };\n  }, [frozenAttachmentsManager]);\n\n  const attachments = useSyncExternalStore(\n    frozenAttachmentsManager.subscribe,\n    frozenAttachmentsManager.getSnapshot,\n    frozenAttachmentsManager.getSnapshot\n  );\n\n  const isUploadingAttachments = useMemo(() => {\n    return attachments.some(\n      (attachment) =>\n        attachment.type === \"localAttachment\" &&\n        attachment.status === \"uploading\"\n    );\n  }, [attachments]);\n\n  useEffect(() => {\n    if (!isUploadingAttachments) {\n      return;\n    }\n\n    window.addEventListener(\"beforeunload\", preventBeforeUnloadDefault);\n\n    return () => {\n      window.removeEventListener(\"beforeunload\", preventBeforeUnloadDefault);\n    };\n  }, [isUploadingAttachments]);\n\n  return {\n    attachments,\n    isUploadingAttachments,\n    addAttachments: frozenAttachmentsManager.addAttachments,\n    removeAttachment: frozenAttachmentsManager.removeAttachment,\n    clearAttachments: frozenAttachmentsManager.clear,\n  };\n}\n"],"names":[],"mappings":"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"}

package/dist/primitives/index.d.mts

@@ -360,7 +360,9 @@ declare const ComposerContext: React.Context<ComposerContext | null>;
 declare function useComposer(): ComposerContext;
 
 declare class AttachmentTooLargeError extends Error {
+    origin: "client" | "server";
     name: string;
+    constructor(message: string, origin?: "client" | "server");
 }
 
 declare type EmojiPickerContentLoadingProps = ComponentPropsWithoutRef<"div">;

package/dist/primitives/index.d.ts

@@ -360,7 +360,9 @@ declare const ComposerContext: React.Context<ComposerContext | null>;
 declare function useComposer(): ComposerContext;
 
 declare class AttachmentTooLargeError extends Error {
+    origin: "client" | "server";
     name: string;
+    constructor(message: string, origin?: "client" | "server");
 }
 
 declare type EmojiPickerContentLoadingProps = ComponentPropsWithoutRef<"div">;

package/dist/version.js

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

package/dist/version.js.map

@@ -1 +1 @@
-{"version":3,"file":"version.js","sources":["../src/version.ts"],"sourcesContent":["declare const __VERSION__: string;\ndeclare const ROLLUP_FORMAT: string;\n\nexport const PKG_NAME = \"@liveblocks/react-ui\";\nexport const PKG_VERSION = typeof __VERSION__ === \"string\" && __VERSION__;\nexport const PKG_FORMAT = typeof ROLLUP_FORMAT === \"string\" && ROLLUP_FORMAT;\n"],"names":[],"mappings":";;AAGO,MAAM,QAAW,GAAA,uBAAA;AACX,MAAA,WAAA,GAAiD,cAAA;AACjD,MAAA,UAAA,GAAkD;;;;;;"}
+{"version":3,"file":"version.js","sources":["../src/version.ts"],"sourcesContent":["declare const __VERSION__: string;\ndeclare const ROLLUP_FORMAT: string;\n\nexport const PKG_NAME = \"@liveblocks/react-ui\";\nexport const PKG_VERSION = typeof __VERSION__ === \"string\" && __VERSION__;\nexport const PKG_FORMAT = typeof ROLLUP_FORMAT === \"string\" && ROLLUP_FORMAT;\n"],"names":[],"mappings":";;AAGO,MAAM,QAAW,GAAA,uBAAA;AACX,MAAA,WAAA,GAAiD,QAAA;AACjD,MAAA,UAAA,GAAkD;;;;;;"}

package/dist/version.mjs

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

package/dist/version.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"version.mjs","sources":["../src/version.ts"],"sourcesContent":["declare const __VERSION__: string;\ndeclare const ROLLUP_FORMAT: string;\n\nexport const PKG_NAME = \"@liveblocks/react-ui\";\nexport const PKG_VERSION = typeof __VERSION__ === \"string\" && __VERSION__;\nexport const PKG_FORMAT = typeof ROLLUP_FORMAT === \"string\" && ROLLUP_FORMAT;\n"],"names":[],"mappings":"AAGO,MAAM,QAAW,GAAA,uBAAA;AACX,MAAA,WAAA,GAAiD,cAAA;AACjD,MAAA,UAAA,GAAkD;;;;"}
+{"version":3,"file":"version.mjs","sources":["../src/version.ts"],"sourcesContent":["declare const __VERSION__: string;\ndeclare const ROLLUP_FORMAT: string;\n\nexport const PKG_NAME = \"@liveblocks/react-ui\";\nexport const PKG_VERSION = typeof __VERSION__ === \"string\" && __VERSION__;\nexport const PKG_FORMAT = typeof ROLLUP_FORMAT === \"string\" && ROLLUP_FORMAT;\n"],"names":[],"mappings":"AAGO,MAAM,QAAW,GAAA,uBAAA;AACX,MAAA,WAAA,GAAiD,QAAA;AACjD,MAAA,UAAA,GAAkD;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@liveblocks/react-ui",
-  "version": "2.8.0-beta3",
+  "version": "2.8.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.1",
-    "@liveblocks/client": "2.8.0-beta3",
-    "@liveblocks/core": "2.8.0-beta3",
-    "@liveblocks/react": "2.8.0-beta3",
+    "@liveblocks/client": "2.8.0",
+    "@liveblocks/core": "2.8.0",
+    "@liveblocks/react": "2.8.0",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-slot": "^1.0.2",