@liveblocks/react-ui 2.12.2 → 2.13.0

package/dist/primitives/Composer/index.js

@@ -1,16 +1,15 @@
 'use client';
 'use strict';
 
-var reactDom = require('@floating-ui/react-dom');
 var core = require('@liveblocks/core');
 var _private = require('@liveblocks/react/_private');
 var reactSlot = require('@radix-ui/react-slot');
+var TogglePrimitive = require('@radix-ui/react-toggle');
 var React = require('react');
 var slate = require('slate');
 var slateHistory = require('slate-history');
 var slateReact = require('slate-react');
 var config = require('../../config.js');
-var constants = require('../../constants.js');
 var autoFormatting = require('../../slate/plugins/auto-formatting.js');
 var autoLinks = require('../../slate/plugins/auto-links.js');
 var customLinks = require('../../slate/plugins/custom-links.js');
@@ -29,14 +28,36 @@ var useId = require('../../utils/use-id.js');
 var useIndex = require('../../utils/use-index.js');
 var useInitial = require('../../utils/use-initial.js');
 var useLayoutEffect = require('../../utils/use-layout-effect.js');
+var useObservable = require('../../utils/use-observable.js');
 var useRefs = require('../../utils/use-refs.js');
 var utils$1 = require('../Comment/utils.js');
 var contexts = require('./contexts.js');
 var utils = require('./utils.js');
 
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var TogglePrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(TogglePrimitive);
+
 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";
@@ -44,6 +65,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,
@@ -107,52 +129,18 @@ function ComposerEditorMentionSuggestionsWrapper({
   selectedUserId,
   setSelectedUserId,
   mentionDraft,
+  setMentionDraft,
   onItemSelect,
   position = MENTION_SUGGESTIONS_POSITION,
   dir,
   MentionSuggestions
 }) {
   const editor = slateReact.useSlateStatic();
+  const { onEditorChange } = contexts.useComposerEditorContext();
   const { isFocused } = contexts.useComposer();
-  const [content, setContent] = React.useState(null);
-  const [contentZIndex, setContentZIndex] = React.useState();
-  const contentRef = React.useCallback(setContent, [setContent]);
   const { portalContainer } = config.useLiveblocksUIConfig();
-  const floatingOptions = React.useMemo(() => {
-    const detectOverflowOptions = {
-      padding: constants.FLOATING_ELEMENT_COLLISION_PADDING
-    };
-    return {
-      strategy: "fixed",
-      placement: utils.getPlacementFromPosition(position, dir),
-      middleware: [
-        reactDom.flip({ ...detectOverflowOptions, crossAxis: false }),
-        reactDom.hide(detectOverflowOptions),
-        reactDom.shift({
-          ...detectOverflowOptions,
-          limiter: reactDom.limitShift()
-        }),
-        reactDom.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 reactDom.autoUpdate(...args, {
-          animationFrame: true
-        });
-      }
-    };
-  }, [position, dir]);
+  const [contentRef, contentZIndex] = utils.useContentZIndex();
+  const isOpen = isFocused && mentionDraft?.range !== void 0 && userIds !== void 0;
   const {
     refs: { setReference, setFloating },
     strategy,
@@ -160,25 +148,24 @@ function ComposerEditorMentionSuggestionsWrapper({
     placement,
     x,
     y
-  } = reactDom.useFloating(floatingOptions);
-  useLayoutEffect.useLayoutEffect(() => {
-    if (content) {
-      setContentZIndex(window.getComputedStyle(content).zIndex);
-    }
-  }, [content]);
+  } = utils.useFloatingWithOptions({
+    position,
+    dir,
+    alignment: "start",
+    open: isOpen
+  });
+  useObservable.useObservable(onEditorChange, () => {
+    setMentionDraft(mentions.getMentionDraftAtSelection(editor));
+  });
   useLayoutEffect.useLayoutEffect(() => {
     if (!mentionDraft) {
+      setReference(null);
       return;
     }
     const domRange = getDomRange.getDOMRange(editor, mentionDraft.range);
-    if (domRange) {
-      setReference({
-        getBoundingClientRect: () => domRange.getBoundingClientRect(),
-        getClientRects: () => domRange.getClientRects()
-      });
-    }
+    setReference(domRange ?? null);
   }, [setReference, editor, mentionDraft]);
-  return /* @__PURE__ */ React.createElement(Persist.Persist, null, mentionDraft?.range && isFocused && userIds ? /* @__PURE__ */ React.createElement(contexts.ComposerSuggestionsContext.Provider, {
+  return /* @__PURE__ */ React.createElement(Persist.Persist, null, isOpen ? /* @__PURE__ */ React.createElement(contexts.ComposerSuggestionsContext.Provider, {
     value: {
       id,
       itemId,
@@ -205,6 +192,126 @@ function ComposerEditorMentionSuggestionsWrapper({
     selectedUserId
   }))) : null);
 }
+function ComposerEditorFloatingToolbarWrapper({
+  id,
+  position = FLOATING_TOOLBAR_POSITION,
+  dir,
+  FloatingToolbar,
+  hasFloatingToolbarRange,
+  setHasFloatingToolbarRange
+}) {
+  const editor = slateReact.useSlateStatic();
+  const { onEditorChange } = contexts.useComposerEditorContext();
+  const { isFocused } = contexts.useComposer();
+  const { portalContainer } = config.useLiveblocksUIConfig();
+  const [contentRef, contentZIndex] = utils.useContentZIndex();
+  const [isPointerDown, setPointerDown] = React.useState(false);
+  const isOpen = isFocused && !isPointerDown && hasFloatingToolbarRange;
+  const {
+    refs: { setReference, setFloating },
+    strategy,
+    isPositioned,
+    placement,
+    x,
+    y
+  } = utils.useFloatingWithOptions({
+    type: "range",
+    position,
+    dir,
+    alignment: "center",
+    open: isOpen
+  });
+  useLayoutEffect.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.useObservable(onEditorChange, () => {
+    setReference(null);
+    requestAnimationFrame(() => {
+      const domSelection = window.getSelection();
+      if (!editor.selection || slate.Range.isCollapsed(editor.selection) || !domSelection || !domSelection.rangeCount) {
+        setHasFloatingToolbarRange(false);
+        setReference(null);
+      } else {
+        setHasFloatingToolbarRange(true);
+        const domRange = domSelection.getRangeAt(0);
+        setReference(domRange);
+      }
+    });
+  });
+  return /* @__PURE__ */ React.createElement(Persist.Persist, null, isOpen ? /* @__PURE__ */ React.createElement(contexts.ComposerFloatingToolbarContext.Provider, {
+    value: {
+      id,
+      placement,
+      dir,
+      ref: contentRef
+    }
+  }, /* @__PURE__ */ React.createElement(Portal.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.createElement(FloatingToolbar, null))) : null);
+}
+const ComposerFloatingToolbar = React.forwardRef(({ children, onPointerDown, style, asChild, ...props }, forwardedRef) => {
+  const [isPresent] = Persist.usePersist();
+  const ref = React.useRef(null);
+  const {
+    id,
+    ref: contentRef,
+    placement,
+    dir
+  } = contexts.useComposerFloatingToolbarContext(COMPOSER_FLOATING_TOOLBAR_NAME);
+  const mergedRefs = useRefs.useRefs(forwardedRef, contentRef, ref);
+  const [side, align] = React.useMemo(
+    () => utils.getSideAndAlignFromFloatingPlacement(placement),
+    [placement]
+  );
+  const Component = asChild ? reactSlot.Slot : "div";
+  Persist.useAnimationPersist(ref);
+  const handlePointerDown = React.useCallback(
+    (event) => {
+      onPointerDown?.(event);
+      event.preventDefault();
+      event.stopPropagation();
+    },
+    [onPointerDown]
+  );
+  return /* @__PURE__ */ React.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,
@@ -292,7 +399,7 @@ const ComposerSuggestions = React.forwardRef(({ children, style, asChild, ...pro
   } = contexts.useComposerSuggestionsContext(COMPOSER_SUGGESTIONS_NAME);
   const mergedRefs = useRefs.useRefs(forwardedRef, contentRef, ref);
   const [side, align] = React.useMemo(
-    () => utils.getSideAndAlignFromPlacement(placement),
+    () => utils.getSideAndAlignFromFloatingPlacement(placement),
     [placement]
   );
   const Component = asChild ? reactSlot.Slot : "div";
@@ -306,7 +413,7 @@ const ComposerSuggestions = React.forwardRef(({ children, style, asChild, ...pro
     style: {
       display: "flex",
       flexDirection: "column",
-      maxHeight: "var(--lb-composer-suggestions-available-height)",
+      maxHeight: "var(--lb-composer-floating-available-height)",
       overflowY: "auto",
       ...style
     },
@@ -418,10 +525,12 @@ const ComposerEditor = React.forwardRef(
     dir,
     ...props
   }, forwardedRef) => {
-    const { editor, validate, setFocused, roomId } = contexts.useComposerEditorContext();
+    const client = _private.useClientOrNull();
+    const { editor, validate, setFocused, onEditorChange, roomId } = contexts.useComposerEditorContext();
     const {
       submit,
       focus,
+      blur,
       select,
       canSubmit,
       isDisabled: isComposerDisabled,
@@ -432,10 +541,12 @@ const ComposerEditor = React.forwardRef(
     const initialEditorValue = React.useMemo(() => {
       return utils.commentBodyToComposerBody(initialBody);
     }, [initialBody]);
-    const { Link, Mention, MentionSuggestions } = React.useMemo(
+    const { Link, Mention, MentionSuggestions, FloatingToolbar } = React.useMemo(
       () => ({ ...defaultEditorComponents, ...components }),
       [components]
     );
+    const [hasFloatingToolbarRange, setHasFloatingToolbarRange] = React.useState(false);
+    const hasResolveMentionSuggestions = client ? client[core.kInternal].resolveMentionSuggestions !== void 0 : true;
     const [mentionDraft, setMentionDraft] = React.useState();
     const mentionSuggestions = _private.useMentionSuggestions(
       roomId,
@@ -448,6 +559,10 @@ const ComposerEditor = React.forwardRef(
       setSelectedMentionSuggestionIndex
     ] = useIndex.useIndex(0, mentionSuggestions?.length ?? 0);
     const id = useId.useId();
+    const floatingToolbarId = React.useMemo(
+      () => `liveblocks-floating-toolbar-${id}`,
+      [id]
+    );
     const suggestionsListId = React.useMemo(
       () => `liveblocks-suggestions-list-${id}`,
       [id]
@@ -469,9 +584,9 @@ const ComposerEditor = React.forwardRef(
     const handleChange = React.useCallback(
       (value) => {
         validate(value);
-        setMentionDraft(mentions.getMentionDraftAtSelection(editor));
+        onEditorChange.notify();
       },
-      [editor, validate]
+      [validate, onEditorChange]
     );
     const createMention = React.useCallback(
       (userId) => {
@@ -517,9 +632,15 @@ const ComposerEditor = React.forwardRef(
             setSelectedMentionSuggestionIndex(0);
           }
         } else {
+          if (hasFloatingToolbarRange) {
+            if (isKey.isKey(event, "Escape")) {
+              event.preventDefault();
+              setHasFloatingToolbarRange(false);
+            }
+          }
           if (isKey.isKey(event, "Escape")) {
             event.preventDefault();
-            slateReact.ReactEditor.blur(editor);
+            blur();
           }
           if (isKey.isKey(event, "Enter", { shift: false })) {
             event.preventDefault();
@@ -550,16 +671,18 @@ const ComposerEditor = React.forwardRef(
         }
       },
       [
-        createMention,
-        editor,
-        canSubmit,
+        onKeyDown,
         mentionDraft,
         mentionSuggestions,
-        selectedMentionSuggestionIndex,
-        onKeyDown,
+        hasFloatingToolbarRange,
+        editor,
         setNextSelectedMentionSuggestionIndex,
         setPreviousSelectedMentionSuggestionIndex,
+        selectedMentionSuggestionIndex,
+        createMention,
         setSelectedMentionSuggestionIndex,
+        blur,
+        canSubmit,
         submit
       ]
     );
@@ -594,7 +717,7 @@ const ComposerEditor = React.forwardRef(
       },
       [setSelectedMentionSuggestionIndex, mentionSuggestions]
     );
-    const propsWhileSuggesting = React.useMemo(
+    const additionalProps = React.useMemo(
       () => mentionDraft ? {
         role: "combobox",
         "aria-autocomplete": "list",
@@ -603,23 +726,28 @@ const ComposerEditor = React.forwardRef(
         "aria-activedescendant": suggestionsListItemId(
           selectedMentionSuggestionUserId
         )
+      } : hasFloatingToolbarRange ? {
+        "aria-haspopup": true,
+        "aria-controls": floatingToolbarId
       } : {},
       [
         mentionDraft,
         suggestionsListId,
         suggestionsListItemId,
-        selectedMentionSuggestionUserId
+        selectedMentionSuggestionUserId,
+        hasFloatingToolbarRange,
+        floatingToolbarId
       ]
     );
     React.useImperativeHandle(forwardedRef, () => {
       return slateReact.ReactEditor.toDOMNode(editor, editor);
     }, [editor]);
-    React.useEffect(() => {
+    useLayoutEffect.useLayoutEffect(() => {
       if (autoFocus) {
         focus();
       }
     }, [autoFocus, editor, focus]);
-    React.useEffect(() => {
+    useLayoutEffect.useLayoutEffect(() => {
       if (isFocused && editor.selection === null) {
         select();
       }
@@ -635,7 +763,7 @@ const ComposerEditor = React.forwardRef(
       "aria-label": "Composer editor",
       "data-focused": isFocused || void 0,
       "data-disabled": isDisabled || void 0,
-      ...propsWhileSuggesting,
+      ...additionalProps,
       ...props,
       readOnly: isDisabled,
       disabled: isDisabled,
@@ -645,9 +773,10 @@ const ComposerEditor = React.forwardRef(
       renderElement,
       renderLeaf: ComposerEditorLeaf,
       renderPlaceholder: ComposerEditorPlaceholder
-    }), /* @__PURE__ */ React.createElement(ComposerEditorMentionSuggestionsWrapper, {
+    }), hasResolveMentionSuggestions && /* @__PURE__ */ React.createElement(ComposerEditorMentionSuggestionsWrapper, {
       dir,
       mentionDraft,
+      setMentionDraft,
       selectedUserId: selectedMentionSuggestionUserId,
       setSelectedUserId: setSelectedMentionSuggestionUserId,
       userIds: mentionSuggestions,
@@ -655,6 +784,12 @@ const ComposerEditor = React.forwardRef(
       itemId: suggestionsListItemId,
       onItemSelect: createMention,
       MentionSuggestions
+    }), FloatingToolbar && /* @__PURE__ */ React.createElement(ComposerEditorFloatingToolbarWrapper, {
+      dir,
+      id: floatingToolbarId,
+      hasFloatingToolbarRange,
+      setHasFloatingToolbarRange,
+      FloatingToolbar
     }));
   }
 );
@@ -713,6 +848,7 @@ const ComposerForm = React.forwardRef(
     const canSubmit = React.useMemo(() => {
       return !isEmpty$1 && !isUploadingAttachments;
     }, [isEmpty$1, isUploadingAttachments]);
+    const [marks$1, setMarks] = React.useState(marks.getMarks);
     const ref = React.useRef(null);
     const mergedRefs = useRefs.useRefs(forwardedRef, ref);
     const fileInputRef = React.useRef(null);
@@ -751,6 +887,7 @@ const ComposerForm = React.forwardRef(
         pasteFilesAsAttachments
       })
     );
+    const onEditorChange = useInitial.useInitial(core.makeEventSource);
     const validate = React.useCallback(
       (value) => {
         setEmpty(isEmpty.isEmpty(editor, value));
@@ -776,10 +913,7 @@ const ComposerForm = React.forwardRef(
       });
     }, [editor]);
     const select = React.useCallback(() => {
-      slate.Transforms.select(editor, {
-        anchor: slate.Editor.end(editor, []),
-        focus: slate.Editor.end(editor, [])
-      });
+      slate.Transforms.select(editor, slate.Editor.end(editor, []));
     }, [editor]);
     const focus = React.useCallback(
       (resetSelection = true) => {
@@ -885,11 +1019,21 @@ const ComposerForm = React.forwardRef(
     const stopPropagation = React.useCallback((event) => {
       event.stopPropagation();
     }, []);
+    const toggleMark = React.useCallback(
+      (mark) => {
+        marks.toggleMark(editor, mark);
+      },
+      [editor]
+    );
+    useObservable.useObservable(onEditorChange, () => {
+      setMarks(marks.getMarks(editor));
+    });
     return /* @__PURE__ */ React.createElement(contexts.ComposerEditorContext.Provider, {
       value: {
         editor,
         validate,
         setFocused,
+        onEditorChange,
         roomId
       }
     }, /* @__PURE__ */ React.createElement(contexts.ComposerAttachmentsContext.Provider, {
@@ -915,7 +1059,9 @@ const ComposerForm = React.forwardRef(
         insertText,
         attachments,
         attachFiles,
-        removeAttachment
+        removeAttachment,
+        toggleMark,
+        marks: marks$1
       }
     }, /* @__PURE__ */ React.createElement(Component, {
       ...props,
@@ -995,10 +1141,36 @@ const ComposerAttachmentsDropArea = React.forwardRef(
     });
   }
 );
+const ComposerMarkToggle = React.forwardRef(
+  ({ children, mark, onValueChange, onClick, asChild, ...props }, forwardedRef) => {
+    const Component = asChild ? reactSlot.Slot : "button";
+    const { marks, toggleMark } = contexts.useComposer();
+    const handleClick = React.useCallback(
+      (event) => {
+        onClick?.(event);
+        if (!event.isDefaultPrevented()) {
+          toggleMark(mark);
+          onValueChange?.(mark);
+        }
+      },
+      [mark, onClick, onValueChange, toggleMark]
+    );
+    return /* @__PURE__ */ React.createElement(TogglePrimitive__namespace.Root, {
+      asChild: true,
+      pressed: marks[mark],
+      onClick: handleClick,
+      ...props
+    }, /* @__PURE__ */ React.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;
@@ -1006,13 +1178,16 @@ 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;
 }
 
 exports.AttachFiles = ComposerAttachFiles;
 exports.AttachmentsDropArea = ComposerAttachmentsDropArea;
 exports.Editor = ComposerEditor;
+exports.FloatingToolbar = ComposerFloatingToolbar;
 exports.Form = ComposerForm;
 exports.Link = ComposerLink;
+exports.MarkToggle = ComposerMarkToggle;
 exports.Mention = ComposerMention;
 exports.Submit = ComposerSubmit;
 exports.Suggestions = ComposerSuggestions;