@liveblocks/react-ui 2.5.2 → 2.7.0-beta1

package/dist/overrides.mjs

@@ -15,8 +15,12 @@ const defaultOverrides = {
   EMOJI_PICKER_SEARCH_PLACEHOLDER: "Search\u2026",
   EMOJI_PICKER_EMPTY: "No emoji found.",
   EMOJI_PICKER_ERROR: () => "There was an error while getting the list of emoji.",
+  ATTACHMENT_TOO_LARGE: (maxSize) => maxSize ? `The file is larger than ${maxSize}` : "The file is too large",
+  ATTACHMENT_ERROR: () => "The file couldn\u2019t be uploaded.",
   COMPOSER_INSERT_MENTION: "Mention someone",
   COMPOSER_INSERT_EMOJI: "Add emoji",
+  COMPOSER_ATTACH_FILES: "Attach files",
+  COMPOSER_REMOVE_ATTACHMENT: "Remove attachment",
   COMPOSER_PLACEHOLDER: "Write a comment\u2026",
   COMPOSER_SEND: "Send",
   COMMENT_EDITED: "(edited)",
@@ -27,6 +31,7 @@ const defaultOverrides = {
   COMMENT_EDIT_COMPOSER_CANCEL: "Cancel",
   COMMENT_EDIT_COMPOSER_SAVE: "Save",
   COMMENT_DELETE: "Delete comment",
+  COMMENT_DELETE_ATTACHMENT: "Delete attachment",
   COMMENT_ADD_REACTION: "Add reaction",
   COMMENT_REACTION_LIST: (list, emoji) => /* @__PURE__ */ React.createElement(React.Fragment, null, list, " reacted with ", /* @__PURE__ */ React.createElement(Emoji, {
     emoji

package/dist/overrides.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"overrides.mjs","sources":["../src/overrides.tsx"],"sourcesContent":["\"use client\";\n\nimport type { PropsWithChildren, ReactNode } from \"react\";\nimport { createContext, useContext, useMemo } from \"react\";\nimport * as React from \"react\";\n\nimport { Emoji } from \"./components/internal/Emoji\";\nimport type { Direction } from \"./types\";\nimport { pluralize } from \"./utils/pluralize\";\n\nexport interface LocalizationOverrides {\n  locale: string;\n  dir: Direction;\n}\n\nexport interface GlobalOverrides {\n  USER_SELF: string;\n  USER_UNKNOWN: string;\n  LIST_REMAINING: (count: number) => string;\n  LIST_REMAINING_USERS: (count: number) => string;\n  LIST_REMAINING_COMMENTS: (count: number) => string;\n  EMOJI_PICKER_SEARCH_PLACEHOLDER: string;\n  EMOJI_PICKER_EMPTY: ReactNode;\n  EMOJI_PICKER_ERROR: (error: Error) => ReactNode;\n}\n\nexport interface CommentOverrides {\n  COMMENT_EDITED: ReactNode;\n  COMMENT_DELETED: ReactNode;\n  COMMENT_MORE: string;\n  COMMENT_EDIT: string;\n  COMMENT_EDIT_COMPOSER_PLACEHOLDER: string;\n  COMMENT_EDIT_COMPOSER_CANCEL: string;\n  COMMENT_EDIT_COMPOSER_SAVE: string;\n  COMMENT_DELETE: string;\n  COMMENT_ADD_REACTION: string;\n  COMMENT_REACTION_LIST: (\n    list: ReactNode,\n    emoji: string,\n    count: number\n  ) => ReactNode;\n  COMMENT_REACTION_DESCRIPTION: (emoji: string, count: number) => string;\n}\n\nexport interface ComposerOverrides {\n  COMPOSER_INSERT_MENTION: string;\n  COMPOSER_INSERT_EMOJI: string;\n  COMPOSER_PLACEHOLDER: string;\n  COMPOSER_SEND: string;\n}\n\nexport interface ThreadOverrides {\n  THREAD_RESOLVE: string;\n  THREAD_UNRESOLVE: string;\n  THREAD_NEW_INDICATOR: string;\n  THREAD_NEW_INDICATOR_DESCRIPTION: string;\n  THREAD_COMPOSER_PLACEHOLDER: string;\n  THREAD_COMPOSER_SEND: string;\n}\n\nexport interface InboxNotificationOverrides {\n  INBOX_NOTIFICATION_MORE: string;\n  INBOX_NOTIFICATION_MARK_AS_READ: string;\n  INBOX_NOTIFICATION_DELETE: string;\n  INBOX_NOTIFICATION_THREAD_COMMENTS_LIST: (\n    list: ReactNode,\n    room: ReactNode | undefined,\n    count: number\n  ) => ReactNode;\n  INBOX_NOTIFICATION_THREAD_MENTION: (\n    user: ReactNode,\n    room: ReactNode | undefined\n  ) => ReactNode;\n  INBOX_NOTIFICATION_TEXT_MENTION: (\n    user: ReactNode,\n    room: ReactNode | undefined\n  ) => ReactNode;\n}\n\nexport type Overrides = LocalizationOverrides &\n  GlobalOverrides &\n  ComposerOverrides &\n  CommentOverrides &\n  ThreadOverrides &\n  InboxNotificationOverrides;\n\ntype OverridesProviderProps = PropsWithChildren<{\n  overrides?: Partial<Overrides>;\n}>;\n\nexport const defaultOverrides: Overrides = {\n  locale: \"en\",\n  dir: \"ltr\",\n  USER_SELF: \"you\",\n  USER_UNKNOWN: \"Anonymous\",\n  LIST_REMAINING: (count) => `${count} more`,\n  LIST_REMAINING_USERS: (count) => `${count} ${pluralize(count, \"other\")}`,\n  LIST_REMAINING_COMMENTS: (count) =>\n    `${count} more ${pluralize(count, \"comment\")}`,\n  EMOJI_PICKER_SEARCH_PLACEHOLDER: \"Search…\",\n  EMOJI_PICKER_EMPTY: \"No emoji found.\",\n  EMOJI_PICKER_ERROR: () =>\n    \"There was an error while getting the list of emoji.\",\n  COMPOSER_INSERT_MENTION: \"Mention someone\",\n  COMPOSER_INSERT_EMOJI: \"Add emoji\",\n  COMPOSER_PLACEHOLDER: \"Write a comment…\",\n  COMPOSER_SEND: \"Send\",\n  COMMENT_EDITED: \"(edited)\",\n  COMMENT_DELETED: \"This comment has been deleted.\",\n  COMMENT_MORE: \"More\",\n  COMMENT_EDIT: \"Edit comment\",\n  COMMENT_EDIT_COMPOSER_PLACEHOLDER: \"Edit comment…\",\n  COMMENT_EDIT_COMPOSER_CANCEL: \"Cancel\",\n  COMMENT_EDIT_COMPOSER_SAVE: \"Save\",\n  COMMENT_DELETE: \"Delete comment\",\n  COMMENT_ADD_REACTION: \"Add reaction\",\n  COMMENT_REACTION_LIST: (list, emoji) => (\n    <>\n      {list} reacted with <Emoji emoji={emoji} />\n    </>\n  ),\n  COMMENT_REACTION_DESCRIPTION: (emoji, count) =>\n    `${count} ${pluralize(count, \"reaction\")}, react with ${emoji}`,\n  THREAD_RESOLVE: \"Resolve thread\",\n  THREAD_UNRESOLVE: \"Re-open thread\",\n  THREAD_NEW_INDICATOR: \"New\",\n  THREAD_NEW_INDICATOR_DESCRIPTION: \"New comments\",\n  THREAD_COMPOSER_PLACEHOLDER: \"Reply to thread…\",\n  THREAD_COMPOSER_SEND: \"Reply\",\n  INBOX_NOTIFICATION_MORE: \"More\",\n  INBOX_NOTIFICATION_MARK_AS_READ: \"Mark as read\",\n  INBOX_NOTIFICATION_DELETE: \"Delete notification\",\n  INBOX_NOTIFICATION_THREAD_COMMENTS_LIST: (\n    list: ReactNode,\n    room: ReactNode\n  ) => (\n    <>\n      {list} commented\n      {room ? <> in {room}</> : <> in a thread</>}\n    </>\n  ),\n  INBOX_NOTIFICATION_THREAD_MENTION: (user: ReactNode, room: ReactNode) => (\n    <>\n      {user} mentioned you{room ? <> in {room}</> : null}\n    </>\n  ),\n  INBOX_NOTIFICATION_TEXT_MENTION: (user: ReactNode, room: ReactNode) => (\n    <>\n      {user} mentioned you{room ? <> in {room}</> : null}\n    </>\n  ),\n};\n\nexport const OverridesContext = createContext<Overrides | undefined>(undefined);\n\nexport function useOverrides(overrides?: Partial<Overrides>): Overrides {\n  const contextOverrides = useContext(OverridesContext);\n\n  return useMemo(\n    () => ({\n      ...defaultOverrides,\n      ...contextOverrides,\n      ...overrides,\n    }),\n    [contextOverrides, overrides]\n  );\n}\n\nexport function OverridesProvider({\n  children,\n  overrides: providerOverrides,\n}: OverridesProviderProps) {\n  const contextOverrides = useContext(OverridesContext);\n  const overrides = useMemo(\n    () => ({\n      ...defaultOverrides,\n      ...contextOverrides,\n      ...providerOverrides,\n    }),\n    [contextOverrides, providerOverrides]\n  );\n\n  return (\n    <OverridesContext.Provider value={overrides}>\n      {children}\n    </OverridesContext.Provider>\n  );\n}\n"],"names":[],"mappings":";;;;;;AA0FO;AAAoC;AACjC;AACH;AACM;AACG;AACgB;AACuC;AAExB;AACZ;AACb;AAElB;AACuB;AACF;AACD;AACP;AACC;AACC;AACH;AACA;AACqB;AACL;AACF;AACZ;AACM;AAGG;AAAM;AAC7B;AAGwD;AAC1C;AACE;AACI;AACY;AACL;AACP;AACG;AACQ;AACN;AAQzB;AAKA;AAOJ;AAEa;AAEN;AACL;AAEA;AAAO;AACE;AACF;AACA;AACA;AACL;AAC4B;AAEhC;AAEO;AAA2B;AAChC;AAEF;AACE;AACA;AAAkB;AACT;AACF;AACA;AACA;AACL;AACoC;AAGtC;AACG;AAAiC;AAItC;;"}
+{"version":3,"file":"overrides.mjs","sources":["../src/overrides.tsx"],"sourcesContent":["\"use client\";\n\nimport type { PropsWithChildren, ReactNode } from \"react\";\nimport { createContext, useContext, useMemo } from \"react\";\nimport * as React from \"react\";\n\nimport { Emoji } from \"./components/internal/Emoji\";\nimport type { Direction } from \"./types\";\nimport { pluralize } from \"./utils/pluralize\";\n\nexport interface LocalizationOverrides {\n  locale: string;\n  dir: Direction;\n}\n\nexport interface GlobalOverrides {\n  USER_SELF: string;\n  USER_UNKNOWN: string;\n  LIST_REMAINING: (count: number) => string;\n  LIST_REMAINING_USERS: (count: number) => string;\n  LIST_REMAINING_COMMENTS: (count: number) => string;\n  EMOJI_PICKER_SEARCH_PLACEHOLDER: string;\n  EMOJI_PICKER_EMPTY: ReactNode;\n  EMOJI_PICKER_ERROR: (error: Error) => ReactNode;\n  ATTACHMENT_TOO_LARGE: (maxSize?: string) => string;\n  ATTACHMENT_ERROR: (error: Error) => string;\n}\n\nexport interface CommentOverrides {\n  COMMENT_EDITED: ReactNode;\n  COMMENT_DELETED: ReactNode;\n  COMMENT_MORE: string;\n  COMMENT_EDIT: string;\n  COMMENT_EDIT_COMPOSER_PLACEHOLDER: string;\n  COMMENT_EDIT_COMPOSER_CANCEL: string;\n  COMMENT_EDIT_COMPOSER_SAVE: string;\n  COMMENT_DELETE: string;\n  COMMENT_DELETE_ATTACHMENT: string;\n  COMMENT_ADD_REACTION: string;\n  COMMENT_REACTION_LIST: (\n    list: ReactNode,\n    emoji: string,\n    count: number\n  ) => ReactNode;\n  COMMENT_REACTION_DESCRIPTION: (emoji: string, count: number) => string;\n}\n\nexport interface ComposerOverrides {\n  COMPOSER_INSERT_MENTION: string;\n  COMPOSER_INSERT_EMOJI: string;\n  COMPOSER_ATTACH_FILES: string;\n  COMPOSER_REMOVE_ATTACHMENT: string;\n  COMPOSER_PLACEHOLDER: string;\n  COMPOSER_SEND: string;\n}\n\nexport interface ThreadOverrides {\n  THREAD_RESOLVE: string;\n  THREAD_UNRESOLVE: string;\n  THREAD_NEW_INDICATOR: string;\n  THREAD_NEW_INDICATOR_DESCRIPTION: string;\n  THREAD_COMPOSER_PLACEHOLDER: string;\n  THREAD_COMPOSER_SEND: string;\n}\n\nexport interface InboxNotificationOverrides {\n  INBOX_NOTIFICATION_MORE: string;\n  INBOX_NOTIFICATION_MARK_AS_READ: string;\n  INBOX_NOTIFICATION_DELETE: string;\n  INBOX_NOTIFICATION_THREAD_COMMENTS_LIST: (\n    list: ReactNode,\n    room: ReactNode | undefined,\n    count: number\n  ) => ReactNode;\n  INBOX_NOTIFICATION_THREAD_MENTION: (\n    user: ReactNode,\n    room: ReactNode | undefined\n  ) => ReactNode;\n  INBOX_NOTIFICATION_TEXT_MENTION: (\n    user: ReactNode,\n    room: ReactNode | undefined\n  ) => ReactNode;\n}\n\nexport type Overrides = LocalizationOverrides &\n  GlobalOverrides &\n  ComposerOverrides &\n  CommentOverrides &\n  ThreadOverrides &\n  InboxNotificationOverrides;\n\ntype OverridesProviderProps = PropsWithChildren<{\n  overrides?: Partial<Overrides>;\n}>;\n\nexport const defaultOverrides: Overrides = {\n  locale: \"en\",\n  dir: \"ltr\",\n  USER_SELF: \"you\",\n  USER_UNKNOWN: \"Anonymous\",\n  LIST_REMAINING: (count) => `${count} more`,\n  LIST_REMAINING_USERS: (count) => `${count} ${pluralize(count, \"other\")}`,\n  LIST_REMAINING_COMMENTS: (count) =>\n    `${count} more ${pluralize(count, \"comment\")}`,\n  EMOJI_PICKER_SEARCH_PLACEHOLDER: \"Search…\",\n  EMOJI_PICKER_EMPTY: \"No emoji found.\",\n  EMOJI_PICKER_ERROR: () =>\n    \"There was an error while getting the list of emoji.\",\n  ATTACHMENT_TOO_LARGE: (maxSize) =>\n    maxSize ? `The file is larger than ${maxSize}` : \"The file is too large\",\n  ATTACHMENT_ERROR: () => \"The file couldn’t be uploaded.\",\n  COMPOSER_INSERT_MENTION: \"Mention someone\",\n  COMPOSER_INSERT_EMOJI: \"Add emoji\",\n  COMPOSER_ATTACH_FILES: \"Attach files\",\n  COMPOSER_REMOVE_ATTACHMENT: \"Remove attachment\",\n  COMPOSER_PLACEHOLDER: \"Write a comment…\",\n  COMPOSER_SEND: \"Send\",\n  COMMENT_EDITED: \"(edited)\",\n  COMMENT_DELETED: \"This comment has been deleted.\",\n  COMMENT_MORE: \"More\",\n  COMMENT_EDIT: \"Edit comment\",\n  COMMENT_EDIT_COMPOSER_PLACEHOLDER: \"Edit comment…\",\n  COMMENT_EDIT_COMPOSER_CANCEL: \"Cancel\",\n  COMMENT_EDIT_COMPOSER_SAVE: \"Save\",\n  COMMENT_DELETE: \"Delete comment\",\n  COMMENT_DELETE_ATTACHMENT: \"Delete attachment\",\n  COMMENT_ADD_REACTION: \"Add reaction\",\n  COMMENT_REACTION_LIST: (list, emoji) => (\n    <>\n      {list} reacted with <Emoji emoji={emoji} />\n    </>\n  ),\n  COMMENT_REACTION_DESCRIPTION: (emoji, count) =>\n    `${count} ${pluralize(count, \"reaction\")}, react with ${emoji}`,\n  THREAD_RESOLVE: \"Resolve thread\",\n  THREAD_UNRESOLVE: \"Re-open thread\",\n  THREAD_NEW_INDICATOR: \"New\",\n  THREAD_NEW_INDICATOR_DESCRIPTION: \"New comments\",\n  THREAD_COMPOSER_PLACEHOLDER: \"Reply to thread…\",\n  THREAD_COMPOSER_SEND: \"Reply\",\n  INBOX_NOTIFICATION_MORE: \"More\",\n  INBOX_NOTIFICATION_MARK_AS_READ: \"Mark as read\",\n  INBOX_NOTIFICATION_DELETE: \"Delete notification\",\n  INBOX_NOTIFICATION_THREAD_COMMENTS_LIST: (\n    list: ReactNode,\n    room: ReactNode\n  ) => (\n    <>\n      {list} commented\n      {room ? <> in {room}</> : <> in a thread</>}\n    </>\n  ),\n  INBOX_NOTIFICATION_THREAD_MENTION: (user: ReactNode, room: ReactNode) => (\n    <>\n      {user} mentioned you{room ? <> in {room}</> : null}\n    </>\n  ),\n  INBOX_NOTIFICATION_TEXT_MENTION: (user: ReactNode, room: ReactNode) => (\n    <>\n      {user} mentioned you{room ? <> in {room}</> : null}\n    </>\n  ),\n};\n\nexport const OverridesContext = createContext<Overrides | undefined>(undefined);\n\nexport function useOverrides(overrides?: Partial<Overrides>): Overrides {\n  const contextOverrides = useContext(OverridesContext);\n\n  return useMemo(\n    () => ({\n      ...defaultOverrides,\n      ...contextOverrides,\n      ...overrides,\n    }),\n    [contextOverrides, overrides]\n  );\n}\n\nexport function OverridesProvider({\n  children,\n  overrides: providerOverrides,\n}: OverridesProviderProps) {\n  const contextOverrides = useContext(OverridesContext);\n  const overrides = useMemo(\n    () => ({\n      ...defaultOverrides,\n      ...contextOverrides,\n      ...providerOverrides,\n    }),\n    [contextOverrides, providerOverrides]\n  );\n\n  return (\n    <OverridesContext.Provider value={overrides}>\n      {children}\n    </OverridesContext.Provider>\n  );\n}\n"],"names":[],"mappings":";;;;;;AA+FO;AAAoC;AACjC;AACH;AACM;AACG;AACgB;AACuC;AAExB;AACZ;AACb;AAElB;AAEiD;AAC3B;AACC;AACF;AACA;AACK;AACN;AACP;AACC;AACC;AACH;AACA;AACqB;AACL;AACF;AACZ;AACW;AACL;AAGG;AAAM;AAC7B;AAGwD;AAC1C;AACE;AACI;AACY;AACL;AACP;AACG;AACQ;AACN;AAQzB;AAKA;AAOJ;AAEa;AAEN;AACL;AAEA;AAAO;AACE;AACF;AACA;AACA;AACL;AAC4B;AAEhC;AAEO;AAA2B;AAChC;AAEF;AACE;AACA;AAAkB;AACT;AACF;AACA;AACA;AACL;AACoC;AAGtC;AACG;AAAiC;AAItC;;"}

package/dist/primitives/Composer/contexts.js

@@ -5,6 +5,7 @@ var React = require('react');
 
 const ComposerContext = React.createContext(null);
 const ComposerEditorContext = React.createContext(null);
+const ComposerAttachmentsContext = React.createContext(null);
 const ComposerSuggestionsContext = React.createContext(null);
 function useComposerEditorContext() {
   const composerEditorContext = React.useContext(ComposerEditorContext);
@@ -13,9 +14,15 @@ function useComposerEditorContext() {
     "Composer.Form is missing from the React tree."
   );
 }
-function useComposer() {
-  const composerContext = React.useContext(ComposerContext);
-  return core.nn(composerContext, "Composer.Form is missing from the React tree.");
+function useComposerAttachmentsContextOrNull() {
+  return React.useContext(ComposerAttachmentsContext);
+}
+function useComposerAttachmentsContext() {
+  const composerAttachmentsContext = useComposerAttachmentsContextOrNull();
+  return core.nn(
+    composerAttachmentsContext,
+    "Composer.Form is missing from the React tree."
+  );
 }
 function useComposerSuggestionsContext(source = "useComposerSuggestionsContext") {
   const composerSuggestionsContext = React.useContext(ComposerSuggestionsContext);
@@ -24,11 +31,18 @@ function useComposerSuggestionsContext(source = "useComposerSuggestionsContext")
     `${source} can\u2019t be used outside of Composer.Editor.`
   );
 }
+function useComposer() {
+  const composerContext = React.useContext(ComposerContext);
+  return core.nn(composerContext, "Composer.Form is missing from the React tree.");
+}
 
+exports.ComposerAttachmentsContext = ComposerAttachmentsContext;
 exports.ComposerContext = ComposerContext;
 exports.ComposerEditorContext = ComposerEditorContext;
 exports.ComposerSuggestionsContext = ComposerSuggestionsContext;
 exports.useComposer = useComposer;
+exports.useComposerAttachmentsContext = useComposerAttachmentsContext;
+exports.useComposerAttachmentsContextOrNull = useComposerAttachmentsContextOrNull;
 exports.useComposerEditorContext = useComposerEditorContext;
 exports.useComposerSuggestionsContext = useComposerSuggestionsContext;
 //# sourceMappingURL=contexts.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"contexts.js","sources":["../../../src/primitives/Composer/contexts.ts"],"sourcesContent":["import type { Placement } from \"@floating-ui/react-dom\";\nimport { nn } from \"@liveblocks/core\";\nimport type { Direction } from \"@radix-ui/react-dropdown-menu\";\nimport type { Dispatch, Ref, SetStateAction } from \"react\";\nimport { createContext, useContext } from \"react\";\nimport type { Editor as SlateEditor, Element as SlateElement } from \"slate\";\n\nexport type ComposerContext = {\n  /**\n   * Whether the editor is currently focused.\n   */\n  isFocused: boolean;\n\n  /**\n   * Whether the editor is currently empty.\n   */\n  isEmpty: boolean;\n\n  /**\n   * Submit the composer programmatically.\n   */\n  submit: () => void;\n\n  /**\n   * Clear the editor programmatically.\n   */\n  clear: () => void;\n\n  /**\n   * Select the editor programmatically.\n   */\n  select: () => void;\n\n  /**\n   * Focus the editor programmatically.\n   */\n  focus: () => void;\n\n  /**\n   * Blur the editor programmatically.\n   */\n  blur: () => void;\n\n  /**\n   * Start creating a mention at the current selection.\n   */\n  createMention: () => void;\n\n  /**\n   * Insert text at the current selection.\n   */\n  insertText: (text: string) => void;\n};\n\nexport type ComposerEditorContext = {\n  validate: (value: SlateElement[]) => void;\n  editor: SlateEditor;\n  setFocused: Dispatch<SetStateAction<boolean>>;\n};\n\nexport type ComposerSuggestionsContext = {\n  dir?: Direction;\n  id: string;\n  itemId: (value?: string) => string | undefined;\n  placement: Placement;\n  selectedValue?: string;\n  setSelectedValue: (value: string) => void;\n  onItemSelect: (value: string) => void;\n  ref: Ref<HTMLDivElement>;\n};\n\nexport const ComposerContext = createContext<ComposerContext | null>(null);\nexport const ComposerEditorContext =\n  createContext<ComposerEditorContext | null>(null);\nexport const ComposerSuggestionsContext =\n  createContext<ComposerSuggestionsContext | null>(null);\n\nexport function useComposerEditorContext() {\n  const composerEditorContext = useContext(ComposerEditorContext);\n\n  return nn(\n    composerEditorContext,\n    \"Composer.Form is missing from the React tree.\"\n  );\n}\n\nexport function useComposer(): ComposerContext {\n  const composerContext = useContext(ComposerContext);\n\n  return nn(composerContext, \"Composer.Form is missing from the React tree.\");\n}\n\nexport function useComposerSuggestionsContext(\n  source = \"useComposerSuggestionsContext\"\n) {\n  const composerSuggestionsContext = useContext(ComposerSuggestionsContext);\n\n  return nn(\n    composerSuggestionsContext,\n    `${source} can’t be used outside of Composer.Editor.`\n  );\n}\n"],"names":["createContext","useContext","nn"],"mappings":";;;;;AAuEa,MAAA,eAAA,GAAkBA,oBAAsC,IAAI,EAAA;AAC5D,MAAA,qBAAA,GACXA,oBAA4C,IAAI,EAAA;AACrC,MAAA,0BAAA,GACXA,oBAAiD,IAAI,EAAA;AAEhD,SAAS,wBAA2B,GAAA;AACzC,EAAM,MAAA,qBAAA,GAAwBC,iBAAW,qBAAqB,CAAA,CAAA;AAE9D,EAAO,OAAAC,OAAA;AAAA,IACL,qBAAA;AAAA,IACA,+CAAA;AAAA,GACF,CAAA;AACF,CAAA;AAEO,SAAS,WAA+B,GAAA;AAC7C,EAAM,MAAA,eAAA,GAAkBD,iBAAW,eAAe,CAAA,CAAA;AAElD,EAAO,OAAAC,OAAA,CAAG,iBAAiB,+CAA+C,CAAA,CAAA;AAC5E,CAAA;AAEgB,SAAA,6BAAA,CACd,SAAS,+BACT,EAAA;AACA,EAAM,MAAA,0BAAA,GAA6BD,iBAAW,0BAA0B,CAAA,CAAA;AAExE,EAAO,OAAAC,OAAA;AAAA,IACL,0BAAA;AAAA,IACA,CAAG,EAAA,MAAA,CAAA,+CAAA,CAAA;AAAA,GACL,CAAA;AACF;;;;;;;;;"}
+{"version":3,"file":"contexts.js","sources":["../../../src/primitives/Composer/contexts.ts"],"sourcesContent":["import type { Placement } from \"@floating-ui/react-dom\";\nimport type { CommentMixedAttachment } from \"@liveblocks/core\";\nimport { nn } from \"@liveblocks/core\";\nimport type { Direction } from \"@radix-ui/react-dropdown-menu\";\nimport type { Dispatch, Ref, SetStateAction } from \"react\";\nimport { createContext, useContext } from \"react\";\nimport type { Editor as SlateEditor, Element as SlateElement } from \"slate\";\n\nexport type ComposerContext = {\n  /**\n   * Whether the composer is currently disabled.\n   */\n  isDisabled: boolean;\n\n  /**\n   * Whether the composer can currently be submitted.\n   */\n  canSubmit: boolean;\n\n  /**\n   * Whether the editor is currently focused.\n   */\n  isFocused: boolean;\n\n  /**\n   * Whether the editor is currently empty.\n   */\n  isEmpty: boolean;\n\n  /**\n   * Submit the composer programmatically.\n   */\n  submit: () => void;\n\n  /**\n   * Clear the composer programmatically.\n   */\n  clear: () => void;\n\n  /**\n   * Select the editor programmatically.\n   */\n  select: () => void;\n\n  /**\n   * Focus the editor programmatically.\n   */\n  focus: () => void;\n\n  /**\n   * Blur the editor programmatically.\n   */\n  blur: () => void;\n\n  /**\n   * Start creating a mention at the current selection.\n   */\n  createMention: () => void;\n\n  /**\n   * Insert text at the current selection.\n   */\n  insertText: (text: string) => void;\n\n  /**\n   * Open a file picker programmatically to create attachments.\n   */\n  attachFiles: () => void;\n\n  /**\n   * The composer's current attachments.\n   */\n  attachments: CommentMixedAttachment[];\n\n  /**\n   * Remove an attachment by its ID.\n   */\n  removeAttachment: (attachmentId: string) => void;\n};\n\nexport type ComposerEditorContext = {\n  validate: (value: SlateElement[]) => void;\n  editor: SlateEditor;\n  setFocused: Dispatch<SetStateAction<boolean>>;\n};\n\nexport type ComposerAttachmentsContext = {\n  canAddAttachments: boolean;\n  createAttachments: (files: File[]) => void;\n  isUploadingAttachments: boolean;\n  maxAttachments: number;\n  maxAttachmentSize: number;\n};\n\nexport type ComposerSuggestionsContext = {\n  dir?: Direction;\n  id: string;\n  itemId: (value?: string) => string | undefined;\n  placement: Placement;\n  selectedValue?: string;\n  setSelectedValue: (value: string) => void;\n  onItemSelect: (value: string) => void;\n  ref: Ref<HTMLDivElement>;\n};\n\nexport const ComposerContext = createContext<ComposerContext | null>(null);\nexport const ComposerEditorContext =\n  createContext<ComposerEditorContext | null>(null);\nexport const ComposerAttachmentsContext =\n  createContext<ComposerAttachmentsContext | null>(null);\nexport const ComposerSuggestionsContext =\n  createContext<ComposerSuggestionsContext | null>(null);\n\nexport function useComposerEditorContext() {\n  const composerEditorContext = useContext(ComposerEditorContext);\n\n  return nn(\n    composerEditorContext,\n    \"Composer.Form is missing from the React tree.\"\n  );\n}\n\nexport function useComposerAttachmentsContextOrNull() {\n  return useContext(ComposerAttachmentsContext);\n}\n\nexport function useComposerAttachmentsContext() {\n  const composerAttachmentsContext = useComposerAttachmentsContextOrNull();\n\n  return nn(\n    composerAttachmentsContext,\n    \"Composer.Form is missing from the React tree.\"\n  );\n}\n\nexport function useComposerSuggestionsContext(\n  source = \"useComposerSuggestionsContext\"\n) {\n  const composerSuggestionsContext = useContext(ComposerSuggestionsContext);\n\n  return nn(\n    composerSuggestionsContext,\n    `${source} can’t be used outside of Composer.Editor.`\n  );\n}\n\nexport function useComposer(): ComposerContext {\n  const composerContext = useContext(ComposerContext);\n\n  return nn(composerContext, \"Composer.Form is missing from the React tree.\");\n}\n"],"names":["createContext","useContext","nn"],"mappings":";;;;;AAyGa,MAAA,eAAA,GAAkBA,oBAAsC,IAAI,EAAA;AAC5D,MAAA,qBAAA,GACXA,oBAA4C,IAAI,EAAA;AACrC,MAAA,0BAAA,GACXA,oBAAiD,IAAI,EAAA;AAC1C,MAAA,0BAAA,GACXA,oBAAiD,IAAI,EAAA;AAEhD,SAAS,wBAA2B,GAAA;AACzC,EAAM,MAAA,qBAAA,GAAwBC,iBAAW,qBAAqB,CAAA,CAAA;AAE9D,EAAO,OAAAC,OAAA;AAAA,IACL,qBAAA;AAAA,IACA,+CAAA;AAAA,GACF,CAAA;AACF,CAAA;AAEO,SAAS,mCAAsC,GAAA;AACpD,EAAA,OAAOD,iBAAW,0BAA0B,CAAA,CAAA;AAC9C,CAAA;AAEO,SAAS,6BAAgC,GAAA;AAC9C,EAAA,MAAM,6BAA6B,mCAAoC,EAAA,CAAA;AAEvE,EAAO,OAAAC,OAAA;AAAA,IACL,0BAAA;AAAA,IACA,+CAAA;AAAA,GACF,CAAA;AACF,CAAA;AAEgB,SAAA,6BAAA,CACd,SAAS,+BACT,EAAA;AACA,EAAM,MAAA,0BAAA,GAA6BD,iBAAW,0BAA0B,CAAA,CAAA;AAExE,EAAO,OAAAC,OAAA;AAAA,IACL,0BAAA;AAAA,IACA,CAAG,EAAA,MAAA,CAAA,+CAAA,CAAA;AAAA,GACL,CAAA;AACF,CAAA;AAEO,SAAS,WAA+B,GAAA;AAC7C,EAAM,MAAA,eAAA,GAAkBD,iBAAW,eAAe,CAAA,CAAA;AAElD,EAAO,OAAAC,OAAA,CAAG,iBAAiB,+CAA+C,CAAA,CAAA;AAC5E;;;;;;;;;;;;"}

package/dist/primitives/Composer/contexts.mjs

@@ -3,6 +3,7 @@ import { createContext, useContext } from 'react';
 
 const ComposerContext = createContext(null);
 const ComposerEditorContext = createContext(null);
+const ComposerAttachmentsContext = createContext(null);
 const ComposerSuggestionsContext = createContext(null);
 function useComposerEditorContext() {
   const composerEditorContext = useContext(ComposerEditorContext);
@@ -11,9 +12,15 @@ function useComposerEditorContext() {
     "Composer.Form is missing from the React tree."
   );
 }
-function useComposer() {
-  const composerContext = useContext(ComposerContext);
-  return nn(composerContext, "Composer.Form is missing from the React tree.");
+function useComposerAttachmentsContextOrNull() {
+  return useContext(ComposerAttachmentsContext);
+}
+function useComposerAttachmentsContext() {
+  const composerAttachmentsContext = useComposerAttachmentsContextOrNull();
+  return nn(
+    composerAttachmentsContext,
+    "Composer.Form is missing from the React tree."
+  );
 }
 function useComposerSuggestionsContext(source = "useComposerSuggestionsContext") {
   const composerSuggestionsContext = useContext(ComposerSuggestionsContext);
@@ -22,6 +29,10 @@ function useComposerSuggestionsContext(source = "useComposerSuggestionsContext")
     `${source} can\u2019t be used outside of Composer.Editor.`
   );
 }
+function useComposer() {
+  const composerContext = useContext(ComposerContext);
+  return nn(composerContext, "Composer.Form is missing from the React tree.");
+}
 
-export { ComposerContext, ComposerEditorContext, ComposerSuggestionsContext, useComposer, useComposerEditorContext, useComposerSuggestionsContext };
+export { ComposerAttachmentsContext, ComposerContext, ComposerEditorContext, ComposerSuggestionsContext, useComposer, useComposerAttachmentsContext, useComposerAttachmentsContextOrNull, useComposerEditorContext, useComposerSuggestionsContext };
 //# sourceMappingURL=contexts.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"contexts.mjs","sources":["../../../src/primitives/Composer/contexts.ts"],"sourcesContent":["import type { Placement } from \"@floating-ui/react-dom\";\nimport { nn } from \"@liveblocks/core\";\nimport type { Direction } from \"@radix-ui/react-dropdown-menu\";\nimport type { Dispatch, Ref, SetStateAction } from \"react\";\nimport { createContext, useContext } from \"react\";\nimport type { Editor as SlateEditor, Element as SlateElement } from \"slate\";\n\nexport type ComposerContext = {\n  /**\n   * Whether the editor is currently focused.\n   */\n  isFocused: boolean;\n\n  /**\n   * Whether the editor is currently empty.\n   */\n  isEmpty: boolean;\n\n  /**\n   * Submit the composer programmatically.\n   */\n  submit: () => void;\n\n  /**\n   * Clear the editor programmatically.\n   */\n  clear: () => void;\n\n  /**\n   * Select the editor programmatically.\n   */\n  select: () => void;\n\n  /**\n   * Focus the editor programmatically.\n   */\n  focus: () => void;\n\n  /**\n   * Blur the editor programmatically.\n   */\n  blur: () => void;\n\n  /**\n   * Start creating a mention at the current selection.\n   */\n  createMention: () => void;\n\n  /**\n   * Insert text at the current selection.\n   */\n  insertText: (text: string) => void;\n};\n\nexport type ComposerEditorContext = {\n  validate: (value: SlateElement[]) => void;\n  editor: SlateEditor;\n  setFocused: Dispatch<SetStateAction<boolean>>;\n};\n\nexport type ComposerSuggestionsContext = {\n  dir?: Direction;\n  id: string;\n  itemId: (value?: string) => string | undefined;\n  placement: Placement;\n  selectedValue?: string;\n  setSelectedValue: (value: string) => void;\n  onItemSelect: (value: string) => void;\n  ref: Ref<HTMLDivElement>;\n};\n\nexport const ComposerContext = createContext<ComposerContext | null>(null);\nexport const ComposerEditorContext =\n  createContext<ComposerEditorContext | null>(null);\nexport const ComposerSuggestionsContext =\n  createContext<ComposerSuggestionsContext | null>(null);\n\nexport function useComposerEditorContext() {\n  const composerEditorContext = useContext(ComposerEditorContext);\n\n  return nn(\n    composerEditorContext,\n    \"Composer.Form is missing from the React tree.\"\n  );\n}\n\nexport function useComposer(): ComposerContext {\n  const composerContext = useContext(ComposerContext);\n\n  return nn(composerContext, \"Composer.Form is missing from the React tree.\");\n}\n\nexport function useComposerSuggestionsContext(\n  source = \"useComposerSuggestionsContext\"\n) {\n  const composerSuggestionsContext = useContext(ComposerSuggestionsContext);\n\n  return nn(\n    composerSuggestionsContext,\n    `${source} can’t be used outside of Composer.Editor.`\n  );\n}\n"],"names":[],"mappings":";;;AAuEa,MAAA,eAAA,GAAkB,cAAsC,IAAI,EAAA;AAC5D,MAAA,qBAAA,GACX,cAA4C,IAAI,EAAA;AACrC,MAAA,0BAAA,GACX,cAAiD,IAAI,EAAA;AAEhD,SAAS,wBAA2B,GAAA;AACzC,EAAM,MAAA,qBAAA,GAAwB,WAAW,qBAAqB,CAAA,CAAA;AAE9D,EAAO,OAAA,EAAA;AAAA,IACL,qBAAA;AAAA,IACA,+CAAA;AAAA,GACF,CAAA;AACF,CAAA;AAEO,SAAS,WAA+B,GAAA;AAC7C,EAAM,MAAA,eAAA,GAAkB,WAAW,eAAe,CAAA,CAAA;AAElD,EAAO,OAAA,EAAA,CAAG,iBAAiB,+CAA+C,CAAA,CAAA;AAC5E,CAAA;AAEgB,SAAA,6BAAA,CACd,SAAS,+BACT,EAAA;AACA,EAAM,MAAA,0BAAA,GAA6B,WAAW,0BAA0B,CAAA,CAAA;AAExE,EAAO,OAAA,EAAA;AAAA,IACL,0BAAA;AAAA,IACA,CAAG,EAAA,MAAA,CAAA,+CAAA,CAAA;AAAA,GACL,CAAA;AACF;;;;"}
+{"version":3,"file":"contexts.mjs","sources":["../../../src/primitives/Composer/contexts.ts"],"sourcesContent":["import type { Placement } from \"@floating-ui/react-dom\";\nimport type { CommentMixedAttachment } from \"@liveblocks/core\";\nimport { nn } from \"@liveblocks/core\";\nimport type { Direction } from \"@radix-ui/react-dropdown-menu\";\nimport type { Dispatch, Ref, SetStateAction } from \"react\";\nimport { createContext, useContext } from \"react\";\nimport type { Editor as SlateEditor, Element as SlateElement } from \"slate\";\n\nexport type ComposerContext = {\n  /**\n   * Whether the composer is currently disabled.\n   */\n  isDisabled: boolean;\n\n  /**\n   * Whether the composer can currently be submitted.\n   */\n  canSubmit: boolean;\n\n  /**\n   * Whether the editor is currently focused.\n   */\n  isFocused: boolean;\n\n  /**\n   * Whether the editor is currently empty.\n   */\n  isEmpty: boolean;\n\n  /**\n   * Submit the composer programmatically.\n   */\n  submit: () => void;\n\n  /**\n   * Clear the composer programmatically.\n   */\n  clear: () => void;\n\n  /**\n   * Select the editor programmatically.\n   */\n  select: () => void;\n\n  /**\n   * Focus the editor programmatically.\n   */\n  focus: () => void;\n\n  /**\n   * Blur the editor programmatically.\n   */\n  blur: () => void;\n\n  /**\n   * Start creating a mention at the current selection.\n   */\n  createMention: () => void;\n\n  /**\n   * Insert text at the current selection.\n   */\n  insertText: (text: string) => void;\n\n  /**\n   * Open a file picker programmatically to create attachments.\n   */\n  attachFiles: () => void;\n\n  /**\n   * The composer's current attachments.\n   */\n  attachments: CommentMixedAttachment[];\n\n  /**\n   * Remove an attachment by its ID.\n   */\n  removeAttachment: (attachmentId: string) => void;\n};\n\nexport type ComposerEditorContext = {\n  validate: (value: SlateElement[]) => void;\n  editor: SlateEditor;\n  setFocused: Dispatch<SetStateAction<boolean>>;\n};\n\nexport type ComposerAttachmentsContext = {\n  canAddAttachments: boolean;\n  createAttachments: (files: File[]) => void;\n  isUploadingAttachments: boolean;\n  maxAttachments: number;\n  maxAttachmentSize: number;\n};\n\nexport type ComposerSuggestionsContext = {\n  dir?: Direction;\n  id: string;\n  itemId: (value?: string) => string | undefined;\n  placement: Placement;\n  selectedValue?: string;\n  setSelectedValue: (value: string) => void;\n  onItemSelect: (value: string) => void;\n  ref: Ref<HTMLDivElement>;\n};\n\nexport const ComposerContext = createContext<ComposerContext | null>(null);\nexport const ComposerEditorContext =\n  createContext<ComposerEditorContext | null>(null);\nexport const ComposerAttachmentsContext =\n  createContext<ComposerAttachmentsContext | null>(null);\nexport const ComposerSuggestionsContext =\n  createContext<ComposerSuggestionsContext | null>(null);\n\nexport function useComposerEditorContext() {\n  const composerEditorContext = useContext(ComposerEditorContext);\n\n  return nn(\n    composerEditorContext,\n    \"Composer.Form is missing from the React tree.\"\n  );\n}\n\nexport function useComposerAttachmentsContextOrNull() {\n  return useContext(ComposerAttachmentsContext);\n}\n\nexport function useComposerAttachmentsContext() {\n  const composerAttachmentsContext = useComposerAttachmentsContextOrNull();\n\n  return nn(\n    composerAttachmentsContext,\n    \"Composer.Form is missing from the React tree.\"\n  );\n}\n\nexport function useComposerSuggestionsContext(\n  source = \"useComposerSuggestionsContext\"\n) {\n  const composerSuggestionsContext = useContext(ComposerSuggestionsContext);\n\n  return nn(\n    composerSuggestionsContext,\n    `${source} can’t be used outside of Composer.Editor.`\n  );\n}\n\nexport function useComposer(): ComposerContext {\n  const composerContext = useContext(ComposerContext);\n\n  return nn(composerContext, \"Composer.Form is missing from the React tree.\");\n}\n"],"names":[],"mappings":";;;AAyGa,MAAA,eAAA,GAAkB,cAAsC,IAAI,EAAA;AAC5D,MAAA,qBAAA,GACX,cAA4C,IAAI,EAAA;AACrC,MAAA,0BAAA,GACX,cAAiD,IAAI,EAAA;AAC1C,MAAA,0BAAA,GACX,cAAiD,IAAI,EAAA;AAEhD,SAAS,wBAA2B,GAAA;AACzC,EAAM,MAAA,qBAAA,GAAwB,WAAW,qBAAqB,CAAA,CAAA;AAE9D,EAAO,OAAA,EAAA;AAAA,IACL,qBAAA;AAAA,IACA,+CAAA;AAAA,GACF,CAAA;AACF,CAAA;AAEO,SAAS,mCAAsC,GAAA;AACpD,EAAA,OAAO,WAAW,0BAA0B,CAAA,CAAA;AAC9C,CAAA;AAEO,SAAS,6BAAgC,GAAA;AAC9C,EAAA,MAAM,6BAA6B,mCAAoC,EAAA,CAAA;AAEvE,EAAO,OAAA,EAAA;AAAA,IACL,0BAAA;AAAA,IACA,+CAAA;AAAA,GACF,CAAA;AACF,CAAA;AAEgB,SAAA,6BAAA,CACd,SAAS,+BACT,EAAA;AACA,EAAM,MAAA,0BAAA,GAA6B,WAAW,0BAA0B,CAAA,CAAA;AAExE,EAAO,OAAA,EAAA;AAAA,IACL,0BAAA;AAAA,IACA,CAAG,EAAA,MAAA,CAAA,+CAAA,CAAA;AAAA,GACL,CAAA;AACF,CAAA;AAEO,SAAS,WAA+B,GAAA;AAC7C,EAAM,MAAA,eAAA,GAAkB,WAAW,eAAe,CAAA,CAAA;AAElD,EAAO,OAAA,EAAA,CAAG,iBAAiB,+CAA+C,CAAA,CAAA;AAC5E;;;;"}

package/dist/primitives/Composer/index.js

@@ -41,6 +41,8 @@ const COMPOSER_SUGGESTIONS_LIST_NAME = "ComposerSuggestionsList";
 const COMPOSER_SUGGESTIONS_LIST_ITEM_NAME = "ComposerSuggestionsListItem";
 const COMPOSER_SUBMIT_NAME = "ComposerSubmit";
 const COMPOSER_EDITOR_NAME = "ComposerEditor";
+const COMPOSER_ATTACH_FILES_NAME = "ComposerAttachFiles";
+const COMPOSER_ATTACHMENTS_DROP_AREA_NAME = "ComposerAttachmentsDropArea";
 const COMPOSER_FORM_NAME = "ComposerForm";
 const emptyCommentBody = {
   version: 1,
@@ -390,13 +392,16 @@ const ComposerEditor = React.forwardRef(
     dir,
     ...props
   }, forwardedRef) => {
-    const self = react.useSelf();
-    const isDisabled = React.useMemo(
-      () => disabled || (self ? !self.canComment : false),
-      [disabled, self?.canComment]
-    );
     const { editor, validate, setFocused } = contexts.useComposerEditorContext();
-    const { submit, focus, select, isEmpty, isFocused } = contexts.useComposer();
+    const {
+      submit,
+      focus,
+      select,
+      canSubmit,
+      isDisabled: isComposerDisabled,
+      isFocused
+    } = contexts.useComposer();
+    const isDisabled = isComposerDisabled || disabled;
     const initialBody = useInitial.useInitial(defaultValue ?? emptyCommentBody);
     const initialEditorValue = React.useMemo(() => {
       return utils.commentBodyToComposerBody(initialBody);
@@ -487,9 +492,11 @@ const ComposerEditor = React.forwardRef(
             event.preventDefault();
             slateReact.ReactEditor.blur(editor);
           }
-          if (isKey.isKey(event, "Enter", { shift: false }) && !isEmpty) {
+          if (isKey.isKey(event, "Enter", { shift: false })) {
             event.preventDefault();
-            submit();
+            if (canSubmit) {
+              submit();
+            }
           }
           if (isKey.isKey(event, "Enter", { shift: true })) {
             event.preventDefault();
@@ -516,7 +523,7 @@ const ComposerEditor = React.forwardRef(
       [
         createMention,
         editor,
-        isEmpty,
+        canSubmit,
         mentionDraft,
         mentionSuggestions,
         selectedMentionSuggestionIndex,
@@ -622,14 +629,48 @@ const ComposerEditor = React.forwardRef(
     }));
   }
 );
+const MAX_ATTACHMENTS = 5;
+const MAX_ATTACHMENT_SIZE = 20 * 1024 * 1024;
 const ComposerForm = React.forwardRef(
-  ({ children, onSubmit, onComposerSubmit, asChild, ...props }, forwardedRef) => {
+  ({
+    children,
+    onSubmit,
+    onComposerSubmit,
+    defaultAttachments = [],
+    disabled,
+    asChild,
+    ...props
+  }, forwardedRef) => {
     const Component = asChild ? reactSlot.Slot : "form";
     const editor = useInitial.useInitial(createComposerEditor);
+    const room = react.useRoom();
     const [isEmpty$1, setEmpty] = React.useState(true);
+    const [isSubmitting, setSubmitting] = React.useState(false);
     const [isFocused, setFocused] = React.useState(false);
+    const maxAttachments = MAX_ATTACHMENTS;
+    const maxAttachmentSize = MAX_ATTACHMENT_SIZE;
+    const {
+      attachments,
+      isUploadingAttachments,
+      addAttachment,
+      removeAttachment,
+      clearAttachments
+    } = utils.useComposerAttachmentsManager(defaultAttachments, {
+      maxFileSize: maxAttachmentSize
+    });
+    const numberOfAttachments = attachments.length;
+    const canAddAttachments = numberOfAttachments < maxAttachments;
+    const isDisabled = React.useMemo(() => {
+      const self = room.getSelf();
+      const canComment = self?.canComment ?? true;
+      return isSubmitting || disabled || !canComment;
+    }, [isSubmitting, disabled, room]);
+    const canSubmit = React.useMemo(() => {
+      return !isEmpty$1 && !isUploadingAttachments;
+    }, [isEmpty$1, isUploadingAttachments]);
     const ref = React.useRef(null);
     const mergedRefs = useRefs.useRefs(forwardedRef, ref);
+    const fileInputRef = React.useRef(null);
     const validate = React.useCallback(
       (value) => {
         setEmpty(isEmpty.isEmpty(editor, value));
@@ -637,12 +678,15 @@ const ComposerForm = React.forwardRef(
       [editor]
     );
     const submit = React.useCallback(() => {
+      if (!canSubmit) {
+        return;
+      }
       requestAnimationFrame(() => {
         if (ref.current) {
           requestSubmit.requestSubmit(ref.current);
         }
       });
-    }, []);
+    }, [canSubmit]);
     const clear = React.useCallback(() => {
       slate.Transforms.delete(editor, {
         at: {
@@ -672,10 +716,6 @@ const ComposerForm = React.forwardRef(
     const blur = React.useCallback(() => {
       slateReact.ReactEditor.blur(editor);
     }, [editor]);
-    const onSubmitEnd = React.useCallback(() => {
-      clear();
-      blur();
-    }, [blur, clear]);
     const createMention = React.useCallback(() => {
       focus();
       mentions.insertMentionCharacter(editor);
@@ -687,6 +727,42 @@ const ComposerForm = React.forwardRef(
       },
       [editor, focus]
     );
+    const createAttachments = React.useCallback(
+      (files) => {
+        if (!files.length) {
+          return;
+        }
+        const numberOfAcceptedFiles = Math.max(
+          0,
+          maxAttachments - numberOfAttachments
+        );
+        files.splice(numberOfAcceptedFiles);
+        for (const file of files) {
+          const attachment = room.prepareAttachment(file);
+          addAttachment(attachment);
+        }
+      },
+      [addAttachment, maxAttachments, numberOfAttachments, room]
+    );
+    const attachFiles = React.useCallback(() => {
+      if (fileInputRef.current) {
+        fileInputRef.current.click();
+      }
+    }, []);
+    const handleAttachmentsInputChange = React.useCallback(
+      (event) => {
+        if (event.target.files) {
+          createAttachments(Array.from(event.target.files));
+        }
+      },
+      [createAttachments]
+    );
+    const onSubmitEnd = React.useCallback(() => {
+      clear();
+      blur();
+      clearAttachments();
+      setSubmitting(false);
+    }, [blur, clear, clearAttachments]);
     const handleSubmit = React.useCallback(
       (event) => {
         const isEmpty2 = isEmpty.isEmpty(editor, editor.children);
@@ -702,16 +778,30 @@ const ComposerForm = React.forwardRef(
         const body = utils.composerBodyToCommentBody(
           editor.children
         );
-        const comment = { body };
-        const promise = onComposerSubmit(comment, event);
+        const commentAttachments = attachments.filter(
+          (attachment) => attachment.type === "attachment" || attachment.type === "localAttachment" && attachment.status === "uploaded"
+        ).map((attachment) => {
+          return {
+            id: attachment.id,
+            type: "attachment",
+            mimeType: attachment.mimeType,
+            size: attachment.size,
+            name: attachment.name
+          };
+        });
+        const promise = onComposerSubmit(
+          { body, attachments: commentAttachments },
+          event
+        );
         event.preventDefault();
         if (promise) {
+          setSubmitting(true);
           promise.then(onSubmitEnd);
         } else {
           onSubmitEnd();
         }
       },
-      [editor, onComposerSubmit, onSubmit, onSubmitEnd]
+      [editor, attachments, onComposerSubmit, onSubmit, onSubmitEnd]
     );
     return /* @__PURE__ */ React.createElement(contexts.ComposerEditorContext.Provider, {
       value: {
@@ -719,34 +809,50 @@ const ComposerForm = React.forwardRef(
         validate,
         setFocused
       }
+    }, /* @__PURE__ */ React.createElement(contexts.ComposerAttachmentsContext.Provider, {
+      value: {
+        createAttachments,
+        isUploadingAttachments,
+        canAddAttachments,
+        maxAttachments,
+        maxAttachmentSize
+      }
     }, /* @__PURE__ */ React.createElement(contexts.ComposerContext.Provider, {
       value: {
+        isDisabled,
         isFocused,
         isEmpty: isEmpty$1,
+        canSubmit,
         submit,
         clear,
         select,
         focus,
         blur,
         createMention,
-        insertText
+        insertText,
+        attachments,
+        attachFiles,
+        removeAttachment
       }
     }, /* @__PURE__ */ React.createElement(Component, {
       ...props,
       onSubmit: handleSubmit,
       ref: mergedRefs
-    }, children)));
+    }, /* @__PURE__ */ React.createElement("input", {
+      type: "file",
+      multiple: true,
+      ref: fileInputRef,
+      onChange: handleAttachmentsInputChange,
+      tabIndex: -1,
+      style: { display: "none" }
+    }), /* @__PURE__ */ React.createElement(reactSlot.Slottable, null, children)))));
   }
 );
 const ComposerSubmit = React.forwardRef(
   ({ children, disabled, asChild, ...props }, forwardedRef) => {
     const Component = asChild ? reactSlot.Slot : "button";
-    const { isEmpty } = contexts.useComposer();
-    const self = react.useSelf();
-    const isDisabled = React.useMemo(
-      () => disabled || isEmpty || (self ? !self.canComment : false),
-      [disabled, isEmpty, self?.canComment]
-    );
+    const { canSubmit, isDisabled: isComposerDisabled } = contexts.useComposer();
+    const isDisabled = isComposerDisabled || disabled || !canSubmit;
     return /* @__PURE__ */ React.createElement(Component, {
       type: "submit",
       ...props,
@@ -755,7 +861,58 @@ const ComposerSubmit = React.forwardRef(
     }, children);
   }
 );
+const ComposerAttachFiles = React.forwardRef(({ children, onClick, disabled, asChild, ...props }, forwardedRef) => {
+  const Component = asChild ? reactSlot.Slot : "button";
+  const { canAddAttachments } = contexts.useComposerAttachmentsContext();
+  const { isDisabled: isComposerDisabled, attachFiles } = contexts.useComposer();
+  const isDisabled = isComposerDisabled || !canAddAttachments || disabled;
+  const handleClick = React.useCallback(
+    (event) => {
+      onClick?.(event);
+      if (!event.isDefaultPrevented()) {
+        attachFiles();
+      }
+    },
+    [attachFiles, onClick]
+  );
+  return /* @__PURE__ */ React.createElement(Component, {
+    ...props,
+    onClick: handleClick,
+    ref: forwardedRef,
+    disabled: isDisabled
+  }, children);
+});
+const ComposerAttachmentsDropArea = React.forwardRef(
+  ({
+    onDragEnter,
+    onDragLeave,
+    onDragOver,
+    onDrop,
+    disabled,
+    asChild,
+    ...props
+  }, forwardedRef) => {
+    const Component = asChild ? reactSlot.Slot : "div";
+    const { isDisabled: isComposerDisabled } = contexts.useComposer();
+    const isDisabled = isComposerDisabled || disabled;
+    const [, dropAreaProps] = utils.useComposerAttachmentsDropArea({
+      onDragEnter,
+      onDragLeave,
+      onDragOver,
+      onDrop,
+      disabled: isDisabled
+    });
+    return /* @__PURE__ */ React.createElement(Component, {
+      ...dropAreaProps,
+      "data-disabled": isDisabled ? "" : void 0,
+      ...props,
+      ref: forwardedRef
+    });
+  }
+);
 if (process.env.NODE_ENV !== "production") {
+  ComposerAttachFiles.displayName = COMPOSER_ATTACH_FILES_NAME;
+  ComposerAttachmentsDropArea.displayName = COMPOSER_ATTACHMENTS_DROP_AREA_NAME;
   ComposerEditor.displayName = COMPOSER_EDITOR_NAME;
   ComposerForm.displayName = COMPOSER_FORM_NAME;
   ComposerMention.displayName = COMPOSER_MENTION_NAME;
@@ -766,6 +923,8 @@ if (process.env.NODE_ENV !== "production") {
   ComposerSuggestionsListItem.displayName = COMPOSER_SUGGESTIONS_LIST_ITEM_NAME;
 }
 
+exports.AttachFiles = ComposerAttachFiles;
+exports.AttachmentsDropArea = ComposerAttachmentsDropArea;
 exports.Editor = ComposerEditor;
 exports.Form = ComposerForm;
 exports.Link = ComposerLink;