@liveblocks/react-ui 2.12.2 → 2.13.0

package/dist/primitives/Composer/index.mjs

@@ -1,24 +1,23 @@
 'use client';
-import { flip, hide, shift, limitShift, size, autoUpdate, useFloating } from '@floating-ui/react-dom';
-import { createCommentAttachmentId } from '@liveblocks/core';
-import { useMentionSuggestions, useRoomOrNull, useSyncSource } from '@liveblocks/react/_private';
+import { kInternal, createCommentAttachmentId, makeEventSource } from '@liveblocks/core';
+import { useClientOrNull, useMentionSuggestions, useRoomOrNull, useSyncSource } from '@liveblocks/react/_private';
 import { Slottable, Slot } from '@radix-ui/react-slot';
-import React__default, { forwardRef, useRef, useMemo, useEffect, useCallback, useState, useImperativeHandle } from 'react';
-import { Transforms, Editor, insertText, createEditor } from 'slate';
+import * as TogglePrimitive from '@radix-ui/react-toggle';
+import React__default, { forwardRef, useRef, useMemo, useCallback, useEffect, useState, useImperativeHandle } from 'react';
+import { Transforms, Editor, insertText, createEditor, Range } from 'slate';
 import { withHistory } from 'slate-history';
 import { useSelected, ReactEditor, Slate, Editable, useSlateStatic, withReact } from 'slate-react';
 import { useLiveblocksUIConfig } from '../../config.mjs';
-import { FLOATING_ELEMENT_COLLISION_PADDING } from '../../constants.mjs';
 import { withAutoFormatting } from '../../slate/plugins/auto-formatting.mjs';
 import { withAutoLinks } from '../../slate/plugins/auto-links.mjs';
 import { withCustomLinks } from '../../slate/plugins/custom-links.mjs';
 import { withEmptyClearFormatting } from '../../slate/plugins/empty-clear-formatting.mjs';
-import { getMentionDraftAtSelection, insertMention, insertMentionCharacter, MENTION_CHARACTER, withMentions } from '../../slate/plugins/mentions.mjs';
+import { insertMention, insertMentionCharacter, MENTION_CHARACTER, withMentions, getMentionDraftAtSelection } from '../../slate/plugins/mentions.mjs';
 import { withNormalize } from '../../slate/plugins/normalize.mjs';
 import { withPaste } from '../../slate/plugins/paste.mjs';
 import { getDOMRange } from '../../slate/utils/get-dom-range.mjs';
 import { isEmpty } from '../../slate/utils/is-empty.mjs';
-import { leaveMarkEdge, toggleMark } from '../../slate/utils/marks.mjs';
+import { leaveMarkEdge, toggleMark, getMarks } from '../../slate/utils/marks.mjs';
 import { isKey } from '../../utils/is-key.mjs';
 import { usePersist, useAnimationPersist, Persist } from '../../utils/Persist.mjs';
 import { Portal } from '../../utils/Portal.mjs';
@@ -27,14 +26,17 @@ import { useId } from '../../utils/use-id.mjs';
 import { useIndex } from '../../utils/use-index.mjs';
 import { useInitial } from '../../utils/use-initial.mjs';
 import { useLayoutEffect } from '../../utils/use-layout-effect.mjs';
+import { useObservable } from '../../utils/use-observable.mjs';
 import { useRefs } from '../../utils/use-refs.mjs';
 import { toAbsoluteUrl } from '../Comment/utils.mjs';
-import { useComposerSuggestionsContext, useComposerEditorContext, useComposer, ComposerEditorContext, ComposerAttachmentsContext, ComposerContext, useComposerAttachmentsContext, ComposerSuggestionsContext } from './contexts.mjs';
-import { getSideAndAlignFromPlacement, commentBodyToComposerBody, useComposerAttachmentsManager, composerBodyToCommentBody, useComposerAttachmentsDropArea, getPlacementFromPosition } from './utils.mjs';
+import { useComposerFloatingToolbarContext, useComposerSuggestionsContext, useComposerEditorContext, useComposer, ComposerEditorContext, ComposerAttachmentsContext, ComposerContext, useComposerAttachmentsContext, ComposerSuggestionsContext, ComposerFloatingToolbarContext } from './contexts.mjs';
+import { getSideAndAlignFromFloatingPlacement, commentBodyToComposerBody, useComposerAttachmentsManager, composerBodyToCommentBody, useComposerAttachmentsDropArea, useContentZIndex, useFloatingWithOptions } from './utils.mjs';
 
 const MENTION_SUGGESTIONS_POSITION = "top";
+const FLOATING_TOOLBAR_POSITION = "top";
 const COMPOSER_MENTION_NAME = "ComposerMention";
 const COMPOSER_LINK_NAME = "ComposerLink";
+const COMPOSER_FLOATING_TOOLBAR_NAME = "ComposerFloatingToolbar";
 const COMPOSER_SUGGESTIONS_NAME = "ComposerSuggestions";
 const COMPOSER_SUGGESTIONS_LIST_NAME = "ComposerSuggestionsList";
 const COMPOSER_SUGGESTIONS_LIST_ITEM_NAME = "ComposerSuggestionsListItem";
@@ -42,6 +44,7 @@ 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_MARK_TOGGLE_NAME = "ComposerMarkToggle";
 const COMPOSER_FORM_NAME = "ComposerForm";
 const emptyCommentBody = {
   version: 1,
@@ -105,52 +108,18 @@ function ComposerEditorMentionSuggestionsWrapper({
   selectedUserId,
   setSelectedUserId,
   mentionDraft,
+  setMentionDraft,
   onItemSelect,
   position = MENTION_SUGGESTIONS_POSITION,
   dir,
   MentionSuggestions
 }) {
   const editor = useSlateStatic();
+  const { onEditorChange } = useComposerEditorContext();
   const { isFocused } = useComposer();
-  const [content, setContent] = useState(null);
-  const [contentZIndex, setContentZIndex] = useState();
-  const contentRef = useCallback(setContent, [setContent]);
   const { portalContainer } = useLiveblocksUIConfig();
-  const floatingOptions = useMemo(() => {
-    const detectOverflowOptions = {
-      padding: FLOATING_ELEMENT_COLLISION_PADDING
-    };
-    return {
-      strategy: "fixed",
-      placement: getPlacementFromPosition(position, dir),
-      middleware: [
-        flip({ ...detectOverflowOptions, crossAxis: false }),
-        hide(detectOverflowOptions),
-        shift({
-          ...detectOverflowOptions,
-          limiter: limitShift()
-        }),
-        size({
-          ...detectOverflowOptions,
-          apply({ availableWidth, availableHeight, elements }) {
-            elements.floating.style.setProperty(
-              "--lb-composer-suggestions-available-width",
-              `${availableWidth}px`
-            );
-            elements.floating.style.setProperty(
-              "--lb-composer-suggestions-available-height",
-              `${availableHeight}px`
-            );
-          }
-        })
-      ],
-      whileElementsMounted: (...args) => {
-        return autoUpdate(...args, {
-          animationFrame: true
-        });
-      }
-    };
-  }, [position, dir]);
+  const [contentRef, contentZIndex] = useContentZIndex();
+  const isOpen = isFocused && mentionDraft?.range !== void 0 && userIds !== void 0;
   const {
     refs: { setReference, setFloating },
     strategy,
@@ -158,25 +127,24 @@ function ComposerEditorMentionSuggestionsWrapper({
     placement,
     x,
     y
-  } = useFloating(floatingOptions);
-  useLayoutEffect(() => {
-    if (content) {
-      setContentZIndex(window.getComputedStyle(content).zIndex);
-    }
-  }, [content]);
+  } = useFloatingWithOptions({
+    position,
+    dir,
+    alignment: "start",
+    open: isOpen
+  });
+  useObservable(onEditorChange, () => {
+    setMentionDraft(getMentionDraftAtSelection(editor));
+  });
   useLayoutEffect(() => {
     if (!mentionDraft) {
+      setReference(null);
       return;
     }
     const domRange = getDOMRange(editor, mentionDraft.range);
-    if (domRange) {
-      setReference({
-        getBoundingClientRect: () => domRange.getBoundingClientRect(),
-        getClientRects: () => domRange.getClientRects()
-      });
-    }
+    setReference(domRange ?? null);
   }, [setReference, editor, mentionDraft]);
-  return /* @__PURE__ */ React__default.createElement(Persist, null, mentionDraft?.range && isFocused && userIds ? /* @__PURE__ */ React__default.createElement(ComposerSuggestionsContext.Provider, {
+  return /* @__PURE__ */ React__default.createElement(Persist, null, isOpen ? /* @__PURE__ */ React__default.createElement(ComposerSuggestionsContext.Provider, {
     value: {
       id,
       itemId,
@@ -203,6 +171,126 @@ function ComposerEditorMentionSuggestionsWrapper({
     selectedUserId
   }))) : null);
 }
+function ComposerEditorFloatingToolbarWrapper({
+  id,
+  position = FLOATING_TOOLBAR_POSITION,
+  dir,
+  FloatingToolbar,
+  hasFloatingToolbarRange,
+  setHasFloatingToolbarRange
+}) {
+  const editor = useSlateStatic();
+  const { onEditorChange } = useComposerEditorContext();
+  const { isFocused } = useComposer();
+  const { portalContainer } = useLiveblocksUIConfig();
+  const [contentRef, contentZIndex] = useContentZIndex();
+  const [isPointerDown, setPointerDown] = useState(false);
+  const isOpen = isFocused && !isPointerDown && hasFloatingToolbarRange;
+  const {
+    refs: { setReference, setFloating },
+    strategy,
+    isPositioned,
+    placement,
+    x,
+    y
+  } = useFloatingWithOptions({
+    type: "range",
+    position,
+    dir,
+    alignment: "center",
+    open: isOpen
+  });
+  useLayoutEffect(() => {
+    if (!isFocused) {
+      return;
+    }
+    const handlePointerDown = () => setPointerDown(true);
+    const handlePointerUp = () => setPointerDown(false);
+    document.addEventListener("pointerdown", handlePointerDown);
+    document.addEventListener("pointerup", handlePointerUp);
+    return () => {
+      document.removeEventListener("pointerdown", handlePointerDown);
+      document.removeEventListener("pointerup", handlePointerUp);
+    };
+  }, [isFocused]);
+  useObservable(onEditorChange, () => {
+    setReference(null);
+    requestAnimationFrame(() => {
+      const domSelection = window.getSelection();
+      if (!editor.selection || Range.isCollapsed(editor.selection) || !domSelection || !domSelection.rangeCount) {
+        setHasFloatingToolbarRange(false);
+        setReference(null);
+      } else {
+        setHasFloatingToolbarRange(true);
+        const domRange = domSelection.getRangeAt(0);
+        setReference(domRange);
+      }
+    });
+  });
+  return /* @__PURE__ */ React__default.createElement(Persist, null, isOpen ? /* @__PURE__ */ React__default.createElement(ComposerFloatingToolbarContext.Provider, {
+    value: {
+      id,
+      placement,
+      dir,
+      ref: contentRef
+    }
+  }, /* @__PURE__ */ React__default.createElement(Portal, {
+    ref: setFloating,
+    container: portalContainer,
+    style: {
+      position: strategy,
+      top: 0,
+      left: 0,
+      transform: isPositioned ? `translate3d(${Math.round(x)}px, ${Math.round(y)}px, 0)` : "translate3d(0, -200%, 0)",
+      minWidth: "max-content",
+      zIndex: contentZIndex
+    }
+  }, /* @__PURE__ */ React__default.createElement(FloatingToolbar, null))) : null);
+}
+const ComposerFloatingToolbar = forwardRef(({ children, onPointerDown, style, asChild, ...props }, forwardedRef) => {
+  const [isPresent] = usePersist();
+  const ref = useRef(null);
+  const {
+    id,
+    ref: contentRef,
+    placement,
+    dir
+  } = useComposerFloatingToolbarContext(COMPOSER_FLOATING_TOOLBAR_NAME);
+  const mergedRefs = useRefs(forwardedRef, contentRef, ref);
+  const [side, align] = useMemo(
+    () => getSideAndAlignFromFloatingPlacement(placement),
+    [placement]
+  );
+  const Component = asChild ? Slot : "div";
+  useAnimationPersist(ref);
+  const handlePointerDown = useCallback(
+    (event) => {
+      onPointerDown?.(event);
+      event.preventDefault();
+      event.stopPropagation();
+    },
+    [onPointerDown]
+  );
+  return /* @__PURE__ */ React__default.createElement(Component, {
+    dir,
+    role: "toolbar",
+    id,
+    "aria-label": "Floating toolbar",
+    ...props,
+    onPointerDown: handlePointerDown,
+    "data-state": isPresent ? "open" : "closed",
+    "data-side": side,
+    "data-align": align,
+    style: {
+      display: "flex",
+      flexDirection: "row",
+      maxWidth: "var(--lb-composer-floating-available-width)",
+      overflowX: "auto",
+      ...style
+    },
+    ref: mergedRefs
+  }, children);
+});
 function ComposerEditorElement({
   Mention,
   Link,
@@ -290,7 +378,7 @@ const ComposerSuggestions = forwardRef(({ children, style, asChild, ...props },
   } = useComposerSuggestionsContext(COMPOSER_SUGGESTIONS_NAME);
   const mergedRefs = useRefs(forwardedRef, contentRef, ref);
   const [side, align] = useMemo(
-    () => getSideAndAlignFromPlacement(placement),
+    () => getSideAndAlignFromFloatingPlacement(placement),
     [placement]
   );
   const Component = asChild ? Slot : "div";
@@ -304,7 +392,7 @@ const ComposerSuggestions = forwardRef(({ children, style, asChild, ...props },
     style: {
       display: "flex",
       flexDirection: "column",
-      maxHeight: "var(--lb-composer-suggestions-available-height)",
+      maxHeight: "var(--lb-composer-floating-available-height)",
       overflowY: "auto",
       ...style
     },
@@ -416,10 +504,12 @@ const ComposerEditor = forwardRef(
     dir,
     ...props
   }, forwardedRef) => {
-    const { editor, validate, setFocused, roomId } = useComposerEditorContext();
+    const client = useClientOrNull();
+    const { editor, validate, setFocused, onEditorChange, roomId } = useComposerEditorContext();
     const {
       submit,
       focus,
+      blur,
       select,
       canSubmit,
       isDisabled: isComposerDisabled,
@@ -430,10 +520,12 @@ const ComposerEditor = forwardRef(
     const initialEditorValue = useMemo(() => {
       return commentBodyToComposerBody(initialBody);
     }, [initialBody]);
-    const { Link, Mention, MentionSuggestions } = useMemo(
+    const { Link, Mention, MentionSuggestions, FloatingToolbar } = useMemo(
       () => ({ ...defaultEditorComponents, ...components }),
       [components]
     );
+    const [hasFloatingToolbarRange, setHasFloatingToolbarRange] = useState(false);
+    const hasResolveMentionSuggestions = client ? client[kInternal].resolveMentionSuggestions !== void 0 : true;
     const [mentionDraft, setMentionDraft] = useState();
     const mentionSuggestions = useMentionSuggestions(
       roomId,
@@ -446,6 +538,10 @@ const ComposerEditor = forwardRef(
       setSelectedMentionSuggestionIndex
     ] = useIndex(0, mentionSuggestions?.length ?? 0);
     const id = useId();
+    const floatingToolbarId = useMemo(
+      () => `liveblocks-floating-toolbar-${id}`,
+      [id]
+    );
     const suggestionsListId = useMemo(
       () => `liveblocks-suggestions-list-${id}`,
       [id]
@@ -467,9 +563,9 @@ const ComposerEditor = forwardRef(
     const handleChange = useCallback(
       (value) => {
         validate(value);
-        setMentionDraft(getMentionDraftAtSelection(editor));
+        onEditorChange.notify();
       },
-      [editor, validate]
+      [validate, onEditorChange]
     );
     const createMention = useCallback(
       (userId) => {
@@ -515,9 +611,15 @@ const ComposerEditor = forwardRef(
             setSelectedMentionSuggestionIndex(0);
           }
         } else {
+          if (hasFloatingToolbarRange) {
+            if (isKey(event, "Escape")) {
+              event.preventDefault();
+              setHasFloatingToolbarRange(false);
+            }
+          }
           if (isKey(event, "Escape")) {
             event.preventDefault();
-            ReactEditor.blur(editor);
+            blur();
           }
           if (isKey(event, "Enter", { shift: false })) {
             event.preventDefault();
@@ -548,16 +650,18 @@ const ComposerEditor = forwardRef(
         }
       },
       [
-        createMention,
-        editor,
-        canSubmit,
+        onKeyDown,
         mentionDraft,
         mentionSuggestions,
-        selectedMentionSuggestionIndex,
-        onKeyDown,
+        hasFloatingToolbarRange,
+        editor,
         setNextSelectedMentionSuggestionIndex,
         setPreviousSelectedMentionSuggestionIndex,
+        selectedMentionSuggestionIndex,
+        createMention,
         setSelectedMentionSuggestionIndex,
+        blur,
+        canSubmit,
         submit
       ]
     );
@@ -592,7 +696,7 @@ const ComposerEditor = forwardRef(
       },
       [setSelectedMentionSuggestionIndex, mentionSuggestions]
     );
-    const propsWhileSuggesting = useMemo(
+    const additionalProps = useMemo(
       () => mentionDraft ? {
         role: "combobox",
         "aria-autocomplete": "list",
@@ -601,23 +705,28 @@ const ComposerEditor = forwardRef(
         "aria-activedescendant": suggestionsListItemId(
           selectedMentionSuggestionUserId
         )
+      } : hasFloatingToolbarRange ? {
+        "aria-haspopup": true,
+        "aria-controls": floatingToolbarId
       } : {},
       [
         mentionDraft,
         suggestionsListId,
         suggestionsListItemId,
-        selectedMentionSuggestionUserId
+        selectedMentionSuggestionUserId,
+        hasFloatingToolbarRange,
+        floatingToolbarId
       ]
     );
     useImperativeHandle(forwardedRef, () => {
       return ReactEditor.toDOMNode(editor, editor);
     }, [editor]);
-    useEffect(() => {
+    useLayoutEffect(() => {
       if (autoFocus) {
         focus();
       }
     }, [autoFocus, editor, focus]);
-    useEffect(() => {
+    useLayoutEffect(() => {
       if (isFocused && editor.selection === null) {
         select();
       }
@@ -633,7 +742,7 @@ const ComposerEditor = forwardRef(
       "aria-label": "Composer editor",
       "data-focused": isFocused || void 0,
       "data-disabled": isDisabled || void 0,
-      ...propsWhileSuggesting,
+      ...additionalProps,
       ...props,
       readOnly: isDisabled,
       disabled: isDisabled,
@@ -643,9 +752,10 @@ const ComposerEditor = forwardRef(
       renderElement,
       renderLeaf: ComposerEditorLeaf,
       renderPlaceholder: ComposerEditorPlaceholder
-    }), /* @__PURE__ */ React__default.createElement(ComposerEditorMentionSuggestionsWrapper, {
+    }), hasResolveMentionSuggestions && /* @__PURE__ */ React__default.createElement(ComposerEditorMentionSuggestionsWrapper, {
       dir,
       mentionDraft,
+      setMentionDraft,
       selectedUserId: selectedMentionSuggestionUserId,
       setSelectedUserId: setSelectedMentionSuggestionUserId,
       userIds: mentionSuggestions,
@@ -653,6 +763,12 @@ const ComposerEditor = forwardRef(
       itemId: suggestionsListItemId,
       onItemSelect: createMention,
       MentionSuggestions
+    }), FloatingToolbar && /* @__PURE__ */ React__default.createElement(ComposerEditorFloatingToolbarWrapper, {
+      dir,
+      id: floatingToolbarId,
+      hasFloatingToolbarRange,
+      setHasFloatingToolbarRange,
+      FloatingToolbar
     }));
   }
 );
@@ -711,6 +827,7 @@ const ComposerForm = forwardRef(
     const canSubmit = useMemo(() => {
       return !isEmpty$1 && !isUploadingAttachments;
     }, [isEmpty$1, isUploadingAttachments]);
+    const [marks, setMarks] = useState(getMarks);
     const ref = useRef(null);
     const mergedRefs = useRefs(forwardedRef, ref);
     const fileInputRef = useRef(null);
@@ -749,6 +866,7 @@ const ComposerForm = forwardRef(
         pasteFilesAsAttachments
       })
     );
+    const onEditorChange = useInitial(makeEventSource);
     const validate = useCallback(
       (value) => {
         setEmpty(isEmpty(editor, value));
@@ -774,10 +892,7 @@ const ComposerForm = forwardRef(
       });
     }, [editor]);
     const select = useCallback(() => {
-      Transforms.select(editor, {
-        anchor: Editor.end(editor, []),
-        focus: Editor.end(editor, [])
-      });
+      Transforms.select(editor, Editor.end(editor, []));
     }, [editor]);
     const focus = useCallback(
       (resetSelection = true) => {
@@ -883,11 +998,21 @@ const ComposerForm = forwardRef(
     const stopPropagation = useCallback((event) => {
       event.stopPropagation();
     }, []);
+    const toggleMark$1 = useCallback(
+      (mark) => {
+        toggleMark(editor, mark);
+      },
+      [editor]
+    );
+    useObservable(onEditorChange, () => {
+      setMarks(getMarks(editor));
+    });
     return /* @__PURE__ */ React__default.createElement(ComposerEditorContext.Provider, {
       value: {
         editor,
         validate,
         setFocused,
+        onEditorChange,
         roomId
       }
     }, /* @__PURE__ */ React__default.createElement(ComposerAttachmentsContext.Provider, {
@@ -913,7 +1038,9 @@ const ComposerForm = forwardRef(
         insertText: insertText$1,
         attachments,
         attachFiles,
-        removeAttachment
+        removeAttachment,
+        toggleMark: toggleMark$1,
+        marks
       }
     }, /* @__PURE__ */ React__default.createElement(Component, {
       ...props,
@@ -993,10 +1120,36 @@ const ComposerAttachmentsDropArea = forwardRef(
     });
   }
 );
+const ComposerMarkToggle = forwardRef(
+  ({ children, mark, onValueChange, onClick, asChild, ...props }, forwardedRef) => {
+    const Component = asChild ? Slot : "button";
+    const { marks, toggleMark } = useComposer();
+    const handleClick = useCallback(
+      (event) => {
+        onClick?.(event);
+        if (!event.isDefaultPrevented()) {
+          toggleMark(mark);
+          onValueChange?.(mark);
+        }
+      },
+      [mark, onClick, onValueChange, toggleMark]
+    );
+    return /* @__PURE__ */ React__default.createElement(TogglePrimitive.Root, {
+      asChild: true,
+      pressed: marks[mark],
+      onClick: handleClick,
+      ...props
+    }, /* @__PURE__ */ React__default.createElement(Component, {
+      ...props,
+      ref: forwardedRef
+    }, children));
+  }
+);
 if (process.env.NODE_ENV !== "production") {
   ComposerAttachFiles.displayName = COMPOSER_ATTACH_FILES_NAME;
   ComposerAttachmentsDropArea.displayName = COMPOSER_ATTACHMENTS_DROP_AREA_NAME;
   ComposerEditor.displayName = COMPOSER_EDITOR_NAME;
+  ComposerFloatingToolbar.displayName = COMPOSER_FLOATING_TOOLBAR_NAME;
   ComposerForm.displayName = COMPOSER_FORM_NAME;
   ComposerMention.displayName = COMPOSER_MENTION_NAME;
   ComposerLink.displayName = COMPOSER_LINK_NAME;
@@ -1004,7 +1157,8 @@ if (process.env.NODE_ENV !== "production") {
   ComposerSuggestions.displayName = COMPOSER_SUGGESTIONS_NAME;
   ComposerSuggestionsList.displayName = COMPOSER_SUGGESTIONS_LIST_NAME;
   ComposerSuggestionsListItem.displayName = COMPOSER_SUGGESTIONS_LIST_ITEM_NAME;
+  ComposerMarkToggle.displayName = COMPOSER_MARK_TOGGLE_NAME;
 }
 
-export { ComposerAttachFiles as AttachFiles, ComposerAttachmentsDropArea as AttachmentsDropArea, ComposerEditor as Editor, ComposerForm as Form, ComposerLink as Link, ComposerMention as Mention, ComposerSubmit as Submit, ComposerSuggestions as Suggestions, ComposerSuggestionsList as SuggestionsList, ComposerSuggestionsListItem as SuggestionsListItem };
+export { ComposerAttachFiles as AttachFiles, ComposerAttachmentsDropArea as AttachmentsDropArea, ComposerEditor as Editor, ComposerFloatingToolbar as FloatingToolbar, ComposerForm as Form, ComposerLink as Link, ComposerMarkToggle as MarkToggle, ComposerMention as Mention, ComposerSubmit as Submit, ComposerSuggestions as Suggestions, ComposerSuggestionsList as SuggestionsList, ComposerSuggestionsListItem as SuggestionsListItem };
 //# sourceMappingURL=index.mjs.map