@liveblocks/react-tiptap 2.15.1 → 2.16.0-toolbars1

package/dist/mentions/MentionsList.js.map

@@ -1 +1 @@
-{"version":3,"file":"MentionsList.js","sources":["../../src/mentions/MentionsList.tsx"],"sourcesContent":["import {\n  autoUpdate,\n  flip,\n  hide,\n  limitShift,\n  offset,\n  shift,\n  size,\n  useFloating,\n} from \"@floating-ui/react-dom\";\nimport { createInboxNotificationId } from \"@liveblocks/core\";\nimport { useRoom, useUser } from \"@liveblocks/react\";\nimport { useMentionSuggestions } from \"@liveblocks/react/_private\";\nimport { useOverrides } from \"@liveblocks/react-ui\";\nimport type { HTMLAttributes, MouseEvent } from \"react\";\nimport {\n  forwardRef,\n  useEffect,\n  useImperativeHandle,\n  useLayoutEffect,\n  useState,\n} from \"react\";\n\nimport { Avatar } from \"./Avatar\";\n\nexport interface UserProps\n  extends Omit<HTMLAttributes<HTMLSpanElement>, \"children\"> {\n  userId: string;\n}\n\nexport const User = forwardRef<HTMLSpanElement, UserProps>(\n  function User(props, forwardedRef) {\n    const { userId, className, ...spanProps } = props;\n\n    const { user, isLoading } = useUser(userId);\n    const $ = useOverrides();\n\n    const name =\n      user === undefined || user === null ? $.USER_UNKNOWN : user.name;\n\n    return (\n      <span\n        className={className}\n        data-loading={isLoading ? \"\" : undefined}\n        ref={forwardedRef}\n        {...spanProps}\n      >\n        {isLoading ? null : name}\n      </span>\n    );\n  }\n);\n\n\nexport const SUGGESTIONS_COLLISION_PADDING = 10;\n\nexport interface MentionsListProps extends HTMLAttributes<HTMLDivElement> {\n  query: string,\n  command: (otps: { id: string, notificationId: string }) => void,\n  clientRect: () => DOMRect,\n  hide: boolean\n}\n\nexport type MentionsListHandle = {\n  onKeyDown: ({ event }: { event: KeyboardEvent }) => boolean,\n};\n\nexport const MentionsList = forwardRef<MentionsListHandle, MentionsListProps>((props, ref) => {\n  const [selectedIndex, setSelectedIndex] = useState(0);\n  const room = useRoom();\n  const suggestions = useMentionSuggestions(room.id, props.query);\n  const { onMouseEnter, onClick } = props;\n  const {\n    refs: { setReference, setFloating },\n    strategy,\n    x,\n    y,\n  } = useFloating({\n    strategy: \"fixed\",\n    placement: \"top-start\",\n    middleware: [\n      flip({ padding: SUGGESTIONS_COLLISION_PADDING, crossAxis: false }),\n      offset(10),\n      hide({ padding: SUGGESTIONS_COLLISION_PADDING }),\n      shift({ padding: SUGGESTIONS_COLLISION_PADDING, limiter: limitShift() }),\n      size({ padding: SUGGESTIONS_COLLISION_PADDING }),\n    ],\n    whileElementsMounted: (...args) => {\n      return autoUpdate(...args, {\n        animationFrame: true,\n      });\n    },\n  });\n\n  useLayoutEffect(() => {\n    setReference({\n      getBoundingClientRect: props.clientRect,\n    });\n  }, [setReference, props.clientRect]);\n\n  const selectItem = (index: number) => {\n    const item = (suggestions ?? [])[index];\n    if (item) {\n      props.command({ id: item, notificationId: createInboxNotificationId() });\n    }\n  }\n\n  const upHandler = () => {\n    setSelectedIndex((selectedIndex + (suggestions?.length ?? 0) - 1) % (suggestions?.length ?? 0))\n  }\n\n  const downHandler = () => {\n    setSelectedIndex((selectedIndex + 1) % (suggestions?.length ?? 0))\n  }\n\n  const enterHandler = () => {\n    selectItem(selectedIndex)\n  }\n\n  useEffect(() => setSelectedIndex(0), [suggestions])\n\n  useImperativeHandle(ref, () => ({\n    onKeyDown: ({ event }: { event: KeyboardEvent }) => {\n      if (event.key === \"ArrowUp\") {\n        upHandler()\n        return true\n      }\n\n      if (event.key === \"ArrowDown\") {\n        downHandler()\n        return true\n      }\n\n      if (event.key === \"Enter\") {\n        enterHandler()\n        return true\n      }\n\n      return false\n    },\n  }))\n\n  const handleClick = (index: number) => (event: MouseEvent<HTMLDivElement>) => {\n    onClick?.(event);\n\n    if (event.isDefaultPrevented()) return;\n    selectItem(index)\n  }\n  const handleMouseEnter = (index: number) => (event: MouseEvent<HTMLDivElement>) => {\n    onMouseEnter?.(event);\n\n    if (event.isDefaultPrevented()) return;\n\n    setSelectedIndex(index);\n  }\n\n  if (suggestions === undefined || suggestions.length === 0) {\n    return null\n  }\n\n  return (\n    <div className=\"lb-root lb-portal lb-elevation lb-tiptap-suggestions lb-tiptap-mention-suggestions\" ref={setFloating}\n      style={{\n        position: strategy,\n        top: 0,\n        left: 0,\n        transform: `translate3d(${Math.round(x)}px, ${Math.round(y)}px, 0)`,\n        minWidth: \"max-content\",\n        display: props.hide ? \"none\" : \"block\"\n      }}>\n      <div className=\"lb-tiptap-suggestions-list lb-tiptap-mention-suggestions-list\">\n        {suggestions.map((item, index) => (\n          <div className=\"lb-tiptap-suggestions-list-item lb-tiptap-mention-suggestion\"\n            key={index}\n            role=\"option\"\n            data-highlighted={index === selectedIndex || undefined}\n\n            onMouseEnter={handleMouseEnter(index)}\n            onClick={handleClick(index)}>\n            <Avatar\n              userId={item}\n              className=\"lb-tiptap-mention-suggestion-avatar\"\n            />\n            <User\n              userId={item}\n              className=\"lb-tiptap-mention-suggestion-user\"\n            />\n          </div>\n        ))\n        }\n      </div>\n    </div>\n  )\n})"],"names":["forwardRef","User","useUser","useOverrides","jsx","useState","useRoom","useMentionSuggestions","useFloating","flip","offset","hide","shift","limitShift","size","autoUpdate","useLayoutEffect","createInboxNotificationId","useEffect","useImperativeHandle","jsxs","Avatar"],"mappings":";;;;;;;;;;;AA8BO,MAAM,IAAO,GAAAA,gBAAA;AAAA,EAClB,SAASC,KAAK,CAAA,KAAA,EAAO,YAAc,EAAA;AACjC,IAAA,MAAM,EAAE,MAAA,EAAQ,SAAc,EAAA,GAAA,SAAA,EAAc,GAAA,KAAA,CAAA;AAE5C,IAAA,MAAM,EAAE,IAAA,EAAM,SAAU,EAAA,GAAIC,gBAAQ,MAAM,CAAA,CAAA;AAC1C,IAAA,MAAM,IAAIC,oBAAa,EAAA,CAAA;AAEvB,IAAA,MAAM,OACJ,IAAS,KAAA,KAAA,CAAA,IAAa,SAAS,IAAO,GAAA,CAAA,CAAE,eAAe,IAAK,CAAA,IAAA,CAAA;AAE9D,IAAA,uBACGC,cAAA,CAAA,MAAA,EAAA;AAAA,MACC,SAAA;AAAA,MACA,cAAA,EAAc,YAAY,EAAK,GAAA,KAAA,CAAA;AAAA,MAC/B,GAAK,EAAA,YAAA;AAAA,MACJ,GAAG,SAAA;AAAA,MAEH,sBAAY,IAAO,GAAA,IAAA;AAAA,KACtB,CAAA,CAAA;AAAA,GAEJ;AACF,EAAA;AAGO,MAAM,6BAAgC,GAAA,GAAA;AAatC,MAAM,YAAe,GAAAJ,gBAAA,CAAkD,CAAC,KAAA,EAAO,GAAQ,KAAA;AAC5F,EAAA,MAAM,CAAC,aAAA,EAAe,gBAAgB,CAAA,GAAIK,eAAS,CAAC,CAAA,CAAA;AACpD,EAAA,MAAM,OAAOC,eAAQ,EAAA,CAAA;AACrB,EAAA,MAAM,WAAc,GAAAC,8BAAA,CAAsB,IAAK,CAAA,EAAA,EAAI,MAAM,KAAK,CAAA,CAAA;AAC9D,EAAM,MAAA,EAAE,YAAc,EAAA,OAAA,EAAY,GAAA,KAAA,CAAA;AAClC,EAAM,MAAA;AAAA,IACJ,IAAA,EAAM,EAAE,YAAA,EAAc,WAAY,EAAA;AAAA,IAClC,QAAA;AAAA,IACA,CAAA;AAAA,IACA,CAAA;AAAA,MACEC,oBAAY,CAAA;AAAA,IACd,QAAU,EAAA,OAAA;AAAA,IACV,SAAW,EAAA,WAAA;AAAA,IACX,UAAY,EAAA;AAAA,MACVC,cAAK,EAAE,OAAA,EAAS,6BAA+B,EAAA,SAAA,EAAW,OAAO,CAAA;AAAA,MACjEC,gBAAO,EAAE,CAAA;AAAA,MACTC,aAAK,CAAA,EAAE,OAAS,EAAA,6BAAA,EAA+B,CAAA;AAAA,MAC/CC,eAAM,EAAE,OAAA,EAAS,+BAA+B,OAAS,EAAAC,mBAAA,IAAc,CAAA;AAAA,MACvEC,aAAK,CAAA,EAAE,OAAS,EAAA,6BAAA,EAA+B,CAAA;AAAA,KACjD;AAAA,IACA,oBAAA,EAAsB,IAAI,IAAS,KAAA;AACjC,MAAO,OAAAC,mBAAA,CAAW,GAAG,IAAM,EAAA;AAAA,QACzB,cAAgB,EAAA,IAAA;AAAA,OACjB,CAAA,CAAA;AAAA,KACH;AAAA,GACD,CAAA,CAAA;AAED,EAAAC,qBAAA,CAAgB,MAAM;AACpB,IAAa,YAAA,CAAA;AAAA,MACX,uBAAuB,KAAM,CAAA,UAAA;AAAA,KAC9B,CAAA,CAAA;AAAA,GACA,EAAA,CAAC,YAAc,EAAA,KAAA,CAAM,UAAU,CAAC,CAAA,CAAA;AAEnC,EAAM,MAAA,UAAA,GAAa,CAAC,KAAkB,KAAA;AACpC,IAAM,MAAA,IAAA,GAAA,CAAQ,WAAe,IAAA,EAAI,EAAA,KAAA,CAAA,CAAA;AACjC,IAAA,IAAI,IAAM,EAAA;AACR,MAAA,KAAA,CAAM,QAAQ,EAAE,EAAA,EAAI,MAAM,cAAgB,EAAAC,8BAAA,IAA6B,CAAA,CAAA;AAAA,KACzE;AAAA,GACF,CAAA;AAEA,EAAA,MAAM,YAAY,MAAM;AACtB,IAAA,gBAAA,CAAA,CAAkB,iBAAiB,WAAa,EAAA,MAAA,IAAU,KAAK,CAAM,KAAA,WAAA,EAAa,UAAU,CAAE,CAAA,CAAA,CAAA;AAAA,GAChG,CAAA;AAEA,EAAA,MAAM,cAAc,MAAM;AACxB,IAAA,gBAAA,CAAA,CAAkB,aAAgB,GAAA,CAAA,KAAM,WAAa,EAAA,MAAA,IAAU,CAAE,CAAA,CAAA,CAAA;AAAA,GACnE,CAAA;AAEA,EAAA,MAAM,eAAe,MAAM;AACzB,IAAA,UAAA,CAAW,aAAa,CAAA,CAAA;AAAA,GAC1B,CAAA;AAEA,EAAAC,eAAA,CAAU,MAAM,gBAAiB,CAAA,CAAC,CAAG,EAAA,CAAC,WAAW,CAAC,CAAA,CAAA;AAElD,EAAAC,yBAAA,CAAoB,KAAK,OAAO;AAAA,IAC9B,SAAW,EAAA,CAAC,EAAE,KAAA,EAAsC,KAAA;AAClD,MAAI,IAAA,KAAA,CAAM,QAAQ,SAAW,EAAA;AAC3B,QAAU,SAAA,EAAA,CAAA;AACV,QAAO,OAAA,IAAA,CAAA;AAAA,OACT;AAEA,MAAI,IAAA,KAAA,CAAM,QAAQ,WAAa,EAAA;AAC7B,QAAY,WAAA,EAAA,CAAA;AACZ,QAAO,OAAA,IAAA,CAAA;AAAA,OACT;AAEA,MAAI,IAAA,KAAA,CAAM,QAAQ,OAAS,EAAA;AACzB,QAAa,YAAA,EAAA,CAAA;AACb,QAAO,OAAA,IAAA,CAAA;AAAA,OACT;AAEA,MAAO,OAAA,KAAA,CAAA;AAAA,KACT;AAAA,GACA,CAAA,CAAA,CAAA;AAEF,EAAA,MAAM,WAAc,GAAA,CAAC,KAAkB,KAAA,CAAC,KAAsC,KAAA;AAC5E,IAAA,OAAA,GAAU,KAAK,CAAA,CAAA;AAEf,IAAA,IAAI,MAAM,kBAAmB,EAAA;AAAG,MAAA,OAAA;AAChC,IAAA,UAAA,CAAW,KAAK,CAAA,CAAA;AAAA,GAClB,CAAA;AACA,EAAA,MAAM,gBAAmB,GAAA,CAAC,KAAkB,KAAA,CAAC,KAAsC,KAAA;AACjF,IAAA,YAAA,GAAe,KAAK,CAAA,CAAA;AAEpB,IAAA,IAAI,MAAM,kBAAmB,EAAA;AAAG,MAAA,OAAA;AAEhC,IAAA,gBAAA,CAAiB,KAAK,CAAA,CAAA;AAAA,GACxB,CAAA;AAEA,EAAA,IAAI,WAAgB,KAAA,KAAA,CAAA,IAAa,WAAY,CAAA,MAAA,KAAW,CAAG,EAAA;AACzD,IAAO,OAAA,IAAA,CAAA;AAAA,GACT;AAEA,EAAA,uBACGf,cAAA,CAAA,KAAA,EAAA;AAAA,IAAI,SAAU,EAAA,oFAAA;AAAA,IAAqF,GAAK,EAAA,WAAA;AAAA,IACvG,KAAO,EAAA;AAAA,MACL,QAAU,EAAA,QAAA;AAAA,MACV,GAAK,EAAA,CAAA;AAAA,MACL,IAAM,EAAA,CAAA;AAAA,MACN,SAAA,EAAW,eAAe,IAAK,CAAA,KAAA,CAAM,CAAC,CAAQ,CAAA,IAAA,EAAA,IAAA,CAAK,MAAM,CAAC,CAAA,CAAA,MAAA,CAAA;AAAA,MAC1D,QAAU,EAAA,aAAA;AAAA,MACV,OAAA,EAAS,KAAM,CAAA,IAAA,GAAO,MAAS,GAAA,OAAA;AAAA,KACjC;AAAA,IACA,QAAC,kBAAAA,cAAA,CAAA,KAAA,EAAA;AAAA,MAAI,SAAU,EAAA,+DAAA;AAAA,MACZ,QAAY,EAAA,WAAA,CAAA,GAAA,CAAI,CAAC,IAAA,EAAM,0BACrBgB,eAAA,CAAA,KAAA,EAAA;AAAA,QAAI,SAAU,EAAA,8DAAA;AAAA,QAEb,IAAK,EAAA,QAAA;AAAA,QACL,kBAAA,EAAkB,UAAU,aAAiB,IAAA,KAAA,CAAA;AAAA,QAE7C,YAAA,EAAc,iBAAiB,KAAK,CAAA;AAAA,QACpC,OAAA,EAAS,YAAY,KAAK,CAAA;AAAA,QAC1B,QAAA,EAAA;AAAA,0BAAChB,cAAA,CAAAiB,aAAA,EAAA;AAAA,YACC,MAAQ,EAAA,IAAA;AAAA,YACR,SAAU,EAAA,qCAAA;AAAA,WACZ,CAAA;AAAA,0BACCjB,cAAA,CAAA,IAAA,EAAA;AAAA,YACC,MAAQ,EAAA,IAAA;AAAA,YACR,SAAU,EAAA,mCAAA;AAAA,WACZ,CAAA;AAAA,SAAA;AAAA,OAAA,EAbK,KAcP,CACD,CAAA;AAAA,KAEH,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC;;;;;;"}
+{"version":3,"file":"MentionsList.js","sources":["../../src/mentions/MentionsList.tsx"],"sourcesContent":["import {\n  autoUpdate,\n  flip,\n  hide,\n  limitShift,\n  offset,\n  shift,\n  size,\n  useFloating,\n} from \"@floating-ui/react-dom\";\nimport { createInboxNotificationId } from \"@liveblocks/core\";\nimport { useRoom, useUser } from \"@liveblocks/react\";\nimport {\n  useLayoutEffect,\n  useMentionSuggestions,\n} from \"@liveblocks/react/_private\";\nimport { useOverrides } from \"@liveblocks/react-ui\";\nimport type { HTMLAttributes, MouseEvent } from \"react\";\nimport { forwardRef, useEffect, useImperativeHandle, useState } from \"react\";\n\nimport { Avatar } from \"./Avatar\";\n\nexport interface UserProps\n  extends Omit<HTMLAttributes<HTMLSpanElement>, \"children\"> {\n  userId: string;\n}\n\nexport const User = forwardRef<HTMLSpanElement, UserProps>(\n  function User(props, forwardedRef) {\n    const { userId, className, ...spanProps } = props;\n\n    const { user, isLoading } = useUser(userId);\n    const $ = useOverrides();\n\n    const name =\n      user === undefined || user === null ? $.USER_UNKNOWN : user.name;\n\n    return (\n      <span\n        className={className}\n        data-loading={isLoading ? \"\" : undefined}\n        ref={forwardedRef}\n        {...spanProps}\n      >\n        {isLoading ? null : name}\n      </span>\n    );\n  }\n);\n\nexport const SUGGESTIONS_COLLISION_PADDING = 10;\n\nexport interface MentionsListProps extends HTMLAttributes<HTMLDivElement> {\n  query: string;\n  command: (otps: { id: string; notificationId: string }) => void;\n  clientRect: () => DOMRect;\n  hide: boolean;\n}\n\nexport type MentionsListHandle = {\n  onKeyDown: ({ event }: { event: KeyboardEvent }) => boolean;\n};\n\nexport const MentionsList = forwardRef<MentionsListHandle, MentionsListProps>(\n  (props, ref) => {\n    const [selectedIndex, setSelectedIndex] = useState(0);\n    const room = useRoom();\n    const suggestions = useMentionSuggestions(room.id, props.query);\n    const { onMouseEnter, onClick } = props;\n    const {\n      refs: { setReference, setFloating },\n      strategy,\n      x,\n      y,\n    } = useFloating({\n      strategy: \"fixed\",\n      placement: \"top-start\",\n      middleware: [\n        flip({ padding: SUGGESTIONS_COLLISION_PADDING, crossAxis: false }),\n        offset(10),\n        hide({ padding: SUGGESTIONS_COLLISION_PADDING }),\n        shift({\n          padding: SUGGESTIONS_COLLISION_PADDING,\n          limiter: limitShift(),\n        }),\n        size({ padding: SUGGESTIONS_COLLISION_PADDING }),\n      ],\n      whileElementsMounted: (...args) => {\n        return autoUpdate(...args, {\n          animationFrame: true,\n        });\n      },\n    });\n\n    useLayoutEffect(() => {\n      setReference({\n        getBoundingClientRect: props.clientRect,\n      });\n    }, [setReference, props.clientRect]);\n\n    const selectItem = (index: number) => {\n      const item = (suggestions ?? [])[index];\n      if (item) {\n        props.command({\n          id: item,\n          notificationId: createInboxNotificationId(),\n        });\n      }\n    };\n\n    const upHandler = () => {\n      setSelectedIndex(\n        (selectedIndex + (suggestions?.length ?? 0) - 1) %\n          (suggestions?.length ?? 0)\n      );\n    };\n\n    const downHandler = () => {\n      setSelectedIndex((selectedIndex + 1) % (suggestions?.length ?? 0));\n    };\n\n    const enterHandler = () => {\n      selectItem(selectedIndex);\n    };\n\n    useEffect(() => setSelectedIndex(0), [suggestions]);\n\n    useImperativeHandle(ref, () => ({\n      onKeyDown: ({ event }: { event: KeyboardEvent }) => {\n        if (event.key === \"ArrowUp\") {\n          upHandler();\n          return true;\n        }\n\n        if (event.key === \"ArrowDown\") {\n          downHandler();\n          return true;\n        }\n\n        if (event.key === \"Enter\") {\n          enterHandler();\n          return true;\n        }\n\n        return false;\n      },\n    }));\n\n    const handleClick =\n      (index: number) => (event: MouseEvent<HTMLDivElement>) => {\n        onClick?.(event);\n\n        if (event.isDefaultPrevented()) return;\n        selectItem(index);\n      };\n    const handleMouseEnter =\n      (index: number) => (event: MouseEvent<HTMLDivElement>) => {\n        onMouseEnter?.(event);\n\n        if (event.isDefaultPrevented()) return;\n\n        setSelectedIndex(index);\n      };\n\n    if (suggestions === undefined || suggestions.length === 0) {\n      return null;\n    }\n\n    return (\n      <div\n        className=\"lb-root lb-portal lb-elevation lb-tiptap-suggestions lb-tiptap-mention-suggestions\"\n        ref={setFloating}\n        style={{\n          position: strategy,\n          top: 0,\n          left: 0,\n          transform: `translate3d(${Math.round(x)}px, ${Math.round(y)}px, 0)`,\n          minWidth: \"max-content\",\n          display: props.hide ? \"none\" : \"block\",\n        }}\n      >\n        <div className=\"lb-tiptap-suggestions-list lb-tiptap-mention-suggestions-list\">\n          {suggestions.map((item, index) => (\n            <div\n              className=\"lb-tiptap-suggestions-list-item lb-tiptap-mention-suggestion\"\n              key={index}\n              role=\"option\"\n              data-highlighted={index === selectedIndex || undefined}\n              onMouseEnter={handleMouseEnter(index)}\n              onClick={handleClick(index)}\n            >\n              <Avatar\n                userId={item}\n                className=\"lb-tiptap-mention-suggestion-avatar\"\n              />\n              <User\n                userId={item}\n                className=\"lb-tiptap-mention-suggestion-user\"\n              />\n            </div>\n          ))}\n        </div>\n      </div>\n    );\n  }\n);\n"],"names":["forwardRef","User","useUser","useOverrides","jsx","useState","useRoom","useMentionSuggestions","useFloating","flip","offset","hide","shift","limitShift","size","autoUpdate","useLayoutEffect","createInboxNotificationId","useEffect","useImperativeHandle","jsxs","Avatar"],"mappings":"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"}

package/dist/mentions/MentionsList.mjs

@@ -2,9 +2,9 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { useFloating, flip, offset, hide, shift, limitShift, size, autoUpdate } from '@floating-ui/react-dom';
 import { createInboxNotificationId } from '@liveblocks/core';
 import { useUser, useRoom } from '@liveblocks/react';
-import { useMentionSuggestions } from '@liveblocks/react/_private';
+import { useMentionSuggestions, useLayoutEffect } from '@liveblocks/react/_private';
 import { useOverrides } from '@liveblocks/react-ui';
-import { forwardRef, useState, useLayoutEffect, useEffect, useImperativeHandle } from 'react';
+import { forwardRef, useState, useEffect, useImperativeHandle } from 'react';
 import { Avatar } from './Avatar.mjs';
 
 const User = forwardRef(
@@ -23,118 +23,128 @@ const User = forwardRef(
   }
 );
 const SUGGESTIONS_COLLISION_PADDING = 10;
-const MentionsList = forwardRef((props, ref) => {
-  const [selectedIndex, setSelectedIndex] = useState(0);
-  const room = useRoom();
-  const suggestions = useMentionSuggestions(room.id, props.query);
-  const { onMouseEnter, onClick } = props;
-  const {
-    refs: { setReference, setFloating },
-    strategy,
-    x,
-    y
-  } = useFloating({
-    strategy: "fixed",
-    placement: "top-start",
-    middleware: [
-      flip({ padding: SUGGESTIONS_COLLISION_PADDING, crossAxis: false }),
-      offset(10),
-      hide({ padding: SUGGESTIONS_COLLISION_PADDING }),
-      shift({ padding: SUGGESTIONS_COLLISION_PADDING, limiter: limitShift() }),
-      size({ padding: SUGGESTIONS_COLLISION_PADDING })
-    ],
-    whileElementsMounted: (...args) => {
-      return autoUpdate(...args, {
-        animationFrame: true
-      });
-    }
-  });
-  useLayoutEffect(() => {
-    setReference({
-      getBoundingClientRect: props.clientRect
-    });
-  }, [setReference, props.clientRect]);
-  const selectItem = (index) => {
-    const item = (suggestions ?? [])[index];
-    if (item) {
-      props.command({ id: item, notificationId: createInboxNotificationId() });
-    }
-  };
-  const upHandler = () => {
-    setSelectedIndex((selectedIndex + (suggestions?.length ?? 0) - 1) % (suggestions?.length ?? 0));
-  };
-  const downHandler = () => {
-    setSelectedIndex((selectedIndex + 1) % (suggestions?.length ?? 0));
-  };
-  const enterHandler = () => {
-    selectItem(selectedIndex);
-  };
-  useEffect(() => setSelectedIndex(0), [suggestions]);
-  useImperativeHandle(ref, () => ({
-    onKeyDown: ({ event }) => {
-      if (event.key === "ArrowUp") {
-        upHandler();
-        return true;
+const MentionsList = forwardRef(
+  (props, ref) => {
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const room = useRoom();
+    const suggestions = useMentionSuggestions(room.id, props.query);
+    const { onMouseEnter, onClick } = props;
+    const {
+      refs: { setReference, setFloating },
+      strategy,
+      x,
+      y
+    } = useFloating({
+      strategy: "fixed",
+      placement: "top-start",
+      middleware: [
+        flip({ padding: SUGGESTIONS_COLLISION_PADDING, crossAxis: false }),
+        offset(10),
+        hide({ padding: SUGGESTIONS_COLLISION_PADDING }),
+        shift({
+          padding: SUGGESTIONS_COLLISION_PADDING,
+          limiter: limitShift()
+        }),
+        size({ padding: SUGGESTIONS_COLLISION_PADDING })
+      ],
+      whileElementsMounted: (...args) => {
+        return autoUpdate(...args, {
+          animationFrame: true
+        });
       }
-      if (event.key === "ArrowDown") {
-        downHandler();
-        return true;
+    });
+    useLayoutEffect(() => {
+      setReference({
+        getBoundingClientRect: props.clientRect
+      });
+    }, [setReference, props.clientRect]);
+    const selectItem = (index) => {
+      const item = (suggestions ?? [])[index];
+      if (item) {
+        props.command({
+          id: item,
+          notificationId: createInboxNotificationId()
+        });
       }
-      if (event.key === "Enter") {
-        enterHandler();
-        return true;
+    };
+    const upHandler = () => {
+      setSelectedIndex(
+        (selectedIndex + (suggestions?.length ?? 0) - 1) % (suggestions?.length ?? 0)
+      );
+    };
+    const downHandler = () => {
+      setSelectedIndex((selectedIndex + 1) % (suggestions?.length ?? 0));
+    };
+    const enterHandler = () => {
+      selectItem(selectedIndex);
+    };
+    useEffect(() => setSelectedIndex(0), [suggestions]);
+    useImperativeHandle(ref, () => ({
+      onKeyDown: ({ event }) => {
+        if (event.key === "ArrowUp") {
+          upHandler();
+          return true;
+        }
+        if (event.key === "ArrowDown") {
+          downHandler();
+          return true;
+        }
+        if (event.key === "Enter") {
+          enterHandler();
+          return true;
+        }
+        return false;
       }
-      return false;
+    }));
+    const handleClick = (index) => (event) => {
+      onClick?.(event);
+      if (event.isDefaultPrevented())
+        return;
+      selectItem(index);
+    };
+    const handleMouseEnter = (index) => (event) => {
+      onMouseEnter?.(event);
+      if (event.isDefaultPrevented())
+        return;
+      setSelectedIndex(index);
+    };
+    if (suggestions === void 0 || suggestions.length === 0) {
+      return null;
     }
-  }));
-  const handleClick = (index) => (event) => {
-    onClick?.(event);
-    if (event.isDefaultPrevented())
-      return;
-    selectItem(index);
-  };
-  const handleMouseEnter = (index) => (event) => {
-    onMouseEnter?.(event);
-    if (event.isDefaultPrevented())
-      return;
-    setSelectedIndex(index);
-  };
-  if (suggestions === void 0 || suggestions.length === 0) {
-    return null;
+    return /* @__PURE__ */ jsx("div", {
+      className: "lb-root lb-portal lb-elevation lb-tiptap-suggestions lb-tiptap-mention-suggestions",
+      ref: setFloating,
+      style: {
+        position: strategy,
+        top: 0,
+        left: 0,
+        transform: `translate3d(${Math.round(x)}px, ${Math.round(y)}px, 0)`,
+        minWidth: "max-content",
+        display: props.hide ? "none" : "block"
+      },
+      children: /* @__PURE__ */ jsx("div", {
+        className: "lb-tiptap-suggestions-list lb-tiptap-mention-suggestions-list",
+        children: suggestions.map((item, index) => /* @__PURE__ */ jsxs("div", {
+          className: "lb-tiptap-suggestions-list-item lb-tiptap-mention-suggestion",
+          role: "option",
+          "data-highlighted": index === selectedIndex || void 0,
+          onMouseEnter: handleMouseEnter(index),
+          onClick: handleClick(index),
+          children: [
+            /* @__PURE__ */ jsx(Avatar, {
+              userId: item,
+              className: "lb-tiptap-mention-suggestion-avatar"
+            }),
+            /* @__PURE__ */ jsx(User, {
+              userId: item,
+              className: "lb-tiptap-mention-suggestion-user"
+            })
+          ]
+        }, index))
+      })
+    });
   }
-  return /* @__PURE__ */ jsx("div", {
-    className: "lb-root lb-portal lb-elevation lb-tiptap-suggestions lb-tiptap-mention-suggestions",
-    ref: setFloating,
-    style: {
-      position: strategy,
-      top: 0,
-      left: 0,
-      transform: `translate3d(${Math.round(x)}px, ${Math.round(y)}px, 0)`,
-      minWidth: "max-content",
-      display: props.hide ? "none" : "block"
-    },
-    children: /* @__PURE__ */ jsx("div", {
-      className: "lb-tiptap-suggestions-list lb-tiptap-mention-suggestions-list",
-      children: suggestions.map((item, index) => /* @__PURE__ */ jsxs("div", {
-        className: "lb-tiptap-suggestions-list-item lb-tiptap-mention-suggestion",
-        role: "option",
-        "data-highlighted": index === selectedIndex || void 0,
-        onMouseEnter: handleMouseEnter(index),
-        onClick: handleClick(index),
-        children: [
-          /* @__PURE__ */ jsx(Avatar, {
-            userId: item,
-            className: "lb-tiptap-mention-suggestion-avatar"
-          }),
-          /* @__PURE__ */ jsx(User, {
-            userId: item,
-            className: "lb-tiptap-mention-suggestion-user"
-          })
-        ]
-      }, index))
-    })
-  });
-});
+);
 
 export { MentionsList, SUGGESTIONS_COLLISION_PADDING, User };
 //# sourceMappingURL=MentionsList.mjs.map

package/dist/mentions/MentionsList.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"MentionsList.mjs","sources":["../../src/mentions/MentionsList.tsx"],"sourcesContent":["import {\n  autoUpdate,\n  flip,\n  hide,\n  limitShift,\n  offset,\n  shift,\n  size,\n  useFloating,\n} from \"@floating-ui/react-dom\";\nimport { createInboxNotificationId } from \"@liveblocks/core\";\nimport { useRoom, useUser } from \"@liveblocks/react\";\nimport { useMentionSuggestions } from \"@liveblocks/react/_private\";\nimport { useOverrides } from \"@liveblocks/react-ui\";\nimport type { HTMLAttributes, MouseEvent } from \"react\";\nimport {\n  forwardRef,\n  useEffect,\n  useImperativeHandle,\n  useLayoutEffect,\n  useState,\n} from \"react\";\n\nimport { Avatar } from \"./Avatar\";\n\nexport interface UserProps\n  extends Omit<HTMLAttributes<HTMLSpanElement>, \"children\"> {\n  userId: string;\n}\n\nexport const User = forwardRef<HTMLSpanElement, UserProps>(\n  function User(props, forwardedRef) {\n    const { userId, className, ...spanProps } = props;\n\n    const { user, isLoading } = useUser(userId);\n    const $ = useOverrides();\n\n    const name =\n      user === undefined || user === null ? $.USER_UNKNOWN : user.name;\n\n    return (\n      <span\n        className={className}\n        data-loading={isLoading ? \"\" : undefined}\n        ref={forwardedRef}\n        {...spanProps}\n      >\n        {isLoading ? null : name}\n      </span>\n    );\n  }\n);\n\n\nexport const SUGGESTIONS_COLLISION_PADDING = 10;\n\nexport interface MentionsListProps extends HTMLAttributes<HTMLDivElement> {\n  query: string,\n  command: (otps: { id: string, notificationId: string }) => void,\n  clientRect: () => DOMRect,\n  hide: boolean\n}\n\nexport type MentionsListHandle = {\n  onKeyDown: ({ event }: { event: KeyboardEvent }) => boolean,\n};\n\nexport const MentionsList = forwardRef<MentionsListHandle, MentionsListProps>((props, ref) => {\n  const [selectedIndex, setSelectedIndex] = useState(0);\n  const room = useRoom();\n  const suggestions = useMentionSuggestions(room.id, props.query);\n  const { onMouseEnter, onClick } = props;\n  const {\n    refs: { setReference, setFloating },\n    strategy,\n    x,\n    y,\n  } = useFloating({\n    strategy: \"fixed\",\n    placement: \"top-start\",\n    middleware: [\n      flip({ padding: SUGGESTIONS_COLLISION_PADDING, crossAxis: false }),\n      offset(10),\n      hide({ padding: SUGGESTIONS_COLLISION_PADDING }),\n      shift({ padding: SUGGESTIONS_COLLISION_PADDING, limiter: limitShift() }),\n      size({ padding: SUGGESTIONS_COLLISION_PADDING }),\n    ],\n    whileElementsMounted: (...args) => {\n      return autoUpdate(...args, {\n        animationFrame: true,\n      });\n    },\n  });\n\n  useLayoutEffect(() => {\n    setReference({\n      getBoundingClientRect: props.clientRect,\n    });\n  }, [setReference, props.clientRect]);\n\n  const selectItem = (index: number) => {\n    const item = (suggestions ?? [])[index];\n    if (item) {\n      props.command({ id: item, notificationId: createInboxNotificationId() });\n    }\n  }\n\n  const upHandler = () => {\n    setSelectedIndex((selectedIndex + (suggestions?.length ?? 0) - 1) % (suggestions?.length ?? 0))\n  }\n\n  const downHandler = () => {\n    setSelectedIndex((selectedIndex + 1) % (suggestions?.length ?? 0))\n  }\n\n  const enterHandler = () => {\n    selectItem(selectedIndex)\n  }\n\n  useEffect(() => setSelectedIndex(0), [suggestions])\n\n  useImperativeHandle(ref, () => ({\n    onKeyDown: ({ event }: { event: KeyboardEvent }) => {\n      if (event.key === \"ArrowUp\") {\n        upHandler()\n        return true\n      }\n\n      if (event.key === \"ArrowDown\") {\n        downHandler()\n        return true\n      }\n\n      if (event.key === \"Enter\") {\n        enterHandler()\n        return true\n      }\n\n      return false\n    },\n  }))\n\n  const handleClick = (index: number) => (event: MouseEvent<HTMLDivElement>) => {\n    onClick?.(event);\n\n    if (event.isDefaultPrevented()) return;\n    selectItem(index)\n  }\n  const handleMouseEnter = (index: number) => (event: MouseEvent<HTMLDivElement>) => {\n    onMouseEnter?.(event);\n\n    if (event.isDefaultPrevented()) return;\n\n    setSelectedIndex(index);\n  }\n\n  if (suggestions === undefined || suggestions.length === 0) {\n    return null\n  }\n\n  return (\n    <div className=\"lb-root lb-portal lb-elevation lb-tiptap-suggestions lb-tiptap-mention-suggestions\" ref={setFloating}\n      style={{\n        position: strategy,\n        top: 0,\n        left: 0,\n        transform: `translate3d(${Math.round(x)}px, ${Math.round(y)}px, 0)`,\n        minWidth: \"max-content\",\n        display: props.hide ? \"none\" : \"block\"\n      }}>\n      <div className=\"lb-tiptap-suggestions-list lb-tiptap-mention-suggestions-list\">\n        {suggestions.map((item, index) => (\n          <div className=\"lb-tiptap-suggestions-list-item lb-tiptap-mention-suggestion\"\n            key={index}\n            role=\"option\"\n            data-highlighted={index === selectedIndex || undefined}\n\n            onMouseEnter={handleMouseEnter(index)}\n            onClick={handleClick(index)}>\n            <Avatar\n              userId={item}\n              className=\"lb-tiptap-mention-suggestion-avatar\"\n            />\n            <User\n              userId={item}\n              className=\"lb-tiptap-mention-suggestion-user\"\n            />\n          </div>\n        ))\n        }\n      </div>\n    </div>\n  )\n})"],"names":["User"],"mappings":";;;;;;;;;AA8BO,MAAM,IAAO,GAAA,UAAA;AAAA,EAClB,SAASA,KAAK,CAAA,KAAA,EAAO,YAAc,EAAA;AACjC,IAAA,MAAM,EAAE,MAAA,EAAQ,SAAc,EAAA,GAAA,SAAA,EAAc,GAAA,KAAA,CAAA;AAE5C,IAAA,MAAM,EAAE,IAAA,EAAM,SAAU,EAAA,GAAI,QAAQ,MAAM,CAAA,CAAA;AAC1C,IAAA,MAAM,IAAI,YAAa,EAAA,CAAA;AAEvB,IAAA,MAAM,OACJ,IAAS,KAAA,KAAA,CAAA,IAAa,SAAS,IAAO,GAAA,CAAA,CAAE,eAAe,IAAK,CAAA,IAAA,CAAA;AAE9D,IAAA,uBACG,GAAA,CAAA,MAAA,EAAA;AAAA,MACC,SAAA;AAAA,MACA,cAAA,EAAc,YAAY,EAAK,GAAA,KAAA,CAAA;AAAA,MAC/B,GAAK,EAAA,YAAA;AAAA,MACJ,GAAG,SAAA;AAAA,MAEH,sBAAY,IAAO,GAAA,IAAA;AAAA,KACtB,CAAA,CAAA;AAAA,GAEJ;AACF,EAAA;AAGO,MAAM,6BAAgC,GAAA,GAAA;AAatC,MAAM,YAAe,GAAA,UAAA,CAAkD,CAAC,KAAA,EAAO,GAAQ,KAAA;AAC5F,EAAA,MAAM,CAAC,aAAA,EAAe,gBAAgB,CAAA,GAAI,SAAS,CAAC,CAAA,CAAA;AACpD,EAAA,MAAM,OAAO,OAAQ,EAAA,CAAA;AACrB,EAAA,MAAM,WAAc,GAAA,qBAAA,CAAsB,IAAK,CAAA,EAAA,EAAI,MAAM,KAAK,CAAA,CAAA;AAC9D,EAAM,MAAA,EAAE,YAAc,EAAA,OAAA,EAAY,GAAA,KAAA,CAAA;AAClC,EAAM,MAAA;AAAA,IACJ,IAAA,EAAM,EAAE,YAAA,EAAc,WAAY,EAAA;AAAA,IAClC,QAAA;AAAA,IACA,CAAA;AAAA,IACA,CAAA;AAAA,MACE,WAAY,CAAA;AAAA,IACd,QAAU,EAAA,OAAA;AAAA,IACV,SAAW,EAAA,WAAA;AAAA,IACX,UAAY,EAAA;AAAA,MACV,KAAK,EAAE,OAAA,EAAS,6BAA+B,EAAA,SAAA,EAAW,OAAO,CAAA;AAAA,MACjE,OAAO,EAAE,CAAA;AAAA,MACT,IAAK,CAAA,EAAE,OAAS,EAAA,6BAAA,EAA+B,CAAA;AAAA,MAC/C,MAAM,EAAE,OAAA,EAAS,+BAA+B,OAAS,EAAA,UAAA,IAAc,CAAA;AAAA,MACvE,IAAK,CAAA,EAAE,OAAS,EAAA,6BAAA,EAA+B,CAAA;AAAA,KACjD;AAAA,IACA,oBAAA,EAAsB,IAAI,IAAS,KAAA;AACjC,MAAO,OAAA,UAAA,CAAW,GAAG,IAAM,EAAA;AAAA,QACzB,cAAgB,EAAA,IAAA;AAAA,OACjB,CAAA,CAAA;AAAA,KACH;AAAA,GACD,CAAA,CAAA;AAED,EAAA,eAAA,CAAgB,MAAM;AACpB,IAAa,YAAA,CAAA;AAAA,MACX,uBAAuB,KAAM,CAAA,UAAA;AAAA,KAC9B,CAAA,CAAA;AAAA,GACA,EAAA,CAAC,YAAc,EAAA,KAAA,CAAM,UAAU,CAAC,CAAA,CAAA;AAEnC,EAAM,MAAA,UAAA,GAAa,CAAC,KAAkB,KAAA;AACpC,IAAM,MAAA,IAAA,GAAA,CAAQ,WAAe,IAAA,EAAI,EAAA,KAAA,CAAA,CAAA;AACjC,IAAA,IAAI,IAAM,EAAA;AACR,MAAA,KAAA,CAAM,QAAQ,EAAE,EAAA,EAAI,MAAM,cAAgB,EAAA,yBAAA,IAA6B,CAAA,CAAA;AAAA,KACzE;AAAA,GACF,CAAA;AAEA,EAAA,MAAM,YAAY,MAAM;AACtB,IAAA,gBAAA,CAAA,CAAkB,iBAAiB,WAAa,EAAA,MAAA,IAAU,KAAK,CAAM,KAAA,WAAA,EAAa,UAAU,CAAE,CAAA,CAAA,CAAA;AAAA,GAChG,CAAA;AAEA,EAAA,MAAM,cAAc,MAAM;AACxB,IAAA,gBAAA,CAAA,CAAkB,aAAgB,GAAA,CAAA,KAAM,WAAa,EAAA,MAAA,IAAU,CAAE,CAAA,CAAA,CAAA;AAAA,GACnE,CAAA;AAEA,EAAA,MAAM,eAAe,MAAM;AACzB,IAAA,UAAA,CAAW,aAAa,CAAA,CAAA;AAAA,GAC1B,CAAA;AAEA,EAAA,SAAA,CAAU,MAAM,gBAAiB,CAAA,CAAC,CAAG,EAAA,CAAC,WAAW,CAAC,CAAA,CAAA;AAElD,EAAA,mBAAA,CAAoB,KAAK,OAAO;AAAA,IAC9B,SAAW,EAAA,CAAC,EAAE,KAAA,EAAsC,KAAA;AAClD,MAAI,IAAA,KAAA,CAAM,QAAQ,SAAW,EAAA;AAC3B,QAAU,SAAA,EAAA,CAAA;AACV,QAAO,OAAA,IAAA,CAAA;AAAA,OACT;AAEA,MAAI,IAAA,KAAA,CAAM,QAAQ,WAAa,EAAA;AAC7B,QAAY,WAAA,EAAA,CAAA;AACZ,QAAO,OAAA,IAAA,CAAA;AAAA,OACT;AAEA,MAAI,IAAA,KAAA,CAAM,QAAQ,OAAS,EAAA;AACzB,QAAa,YAAA,EAAA,CAAA;AACb,QAAO,OAAA,IAAA,CAAA;AAAA,OACT;AAEA,MAAO,OAAA,KAAA,CAAA;AAAA,KACT;AAAA,GACA,CAAA,CAAA,CAAA;AAEF,EAAA,MAAM,WAAc,GAAA,CAAC,KAAkB,KAAA,CAAC,KAAsC,KAAA;AAC5E,IAAA,OAAA,GAAU,KAAK,CAAA,CAAA;AAEf,IAAA,IAAI,MAAM,kBAAmB,EAAA;AAAG,MAAA,OAAA;AAChC,IAAA,UAAA,CAAW,KAAK,CAAA,CAAA;AAAA,GAClB,CAAA;AACA,EAAA,MAAM,gBAAmB,GAAA,CAAC,KAAkB,KAAA,CAAC,KAAsC,KAAA;AACjF,IAAA,YAAA,GAAe,KAAK,CAAA,CAAA;AAEpB,IAAA,IAAI,MAAM,kBAAmB,EAAA;AAAG,MAAA,OAAA;AAEhC,IAAA,gBAAA,CAAiB,KAAK,CAAA,CAAA;AAAA,GACxB,CAAA;AAEA,EAAA,IAAI,WAAgB,KAAA,KAAA,CAAA,IAAa,WAAY,CAAA,MAAA,KAAW,CAAG,EAAA;AACzD,IAAO,OAAA,IAAA,CAAA;AAAA,GACT;AAEA,EAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,IAAI,SAAU,EAAA,oFAAA;AAAA,IAAqF,GAAK,EAAA,WAAA;AAAA,IACvG,KAAO,EAAA;AAAA,MACL,QAAU,EAAA,QAAA;AAAA,MACV,GAAK,EAAA,CAAA;AAAA,MACL,IAAM,EAAA,CAAA;AAAA,MACN,SAAA,EAAW,eAAe,IAAK,CAAA,KAAA,CAAM,CAAC,CAAQ,CAAA,IAAA,EAAA,IAAA,CAAK,MAAM,CAAC,CAAA,CAAA,MAAA,CAAA;AAAA,MAC1D,QAAU,EAAA,aAAA;AAAA,MACV,OAAA,EAAS,KAAM,CAAA,IAAA,GAAO,MAAS,GAAA,OAAA;AAAA,KACjC;AAAA,IACA,QAAC,kBAAA,GAAA,CAAA,KAAA,EAAA;AAAA,MAAI,SAAU,EAAA,+DAAA;AAAA,MACZ,QAAY,EAAA,WAAA,CAAA,GAAA,CAAI,CAAC,IAAA,EAAM,0BACrB,IAAA,CAAA,KAAA,EAAA;AAAA,QAAI,SAAU,EAAA,8DAAA;AAAA,QAEb,IAAK,EAAA,QAAA;AAAA,QACL,kBAAA,EAAkB,UAAU,aAAiB,IAAA,KAAA,CAAA;AAAA,QAE7C,YAAA,EAAc,iBAAiB,KAAK,CAAA;AAAA,QACpC,OAAA,EAAS,YAAY,KAAK,CAAA;AAAA,QAC1B,QAAA,EAAA;AAAA,0BAAC,GAAA,CAAA,MAAA,EAAA;AAAA,YACC,MAAQ,EAAA,IAAA;AAAA,YACR,SAAU,EAAA,qCAAA;AAAA,WACZ,CAAA;AAAA,0BACC,GAAA,CAAA,IAAA,EAAA;AAAA,YACC,MAAQ,EAAA,IAAA;AAAA,YACR,SAAU,EAAA,mCAAA;AAAA,WACZ,CAAA;AAAA,SAAA;AAAA,OAAA,EAbK,KAcP,CACD,CAAA;AAAA,KAEH,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"MentionsList.mjs","sources":["../../src/mentions/MentionsList.tsx"],"sourcesContent":["import {\n  autoUpdate,\n  flip,\n  hide,\n  limitShift,\n  offset,\n  shift,\n  size,\n  useFloating,\n} from \"@floating-ui/react-dom\";\nimport { createInboxNotificationId } from \"@liveblocks/core\";\nimport { useRoom, useUser } from \"@liveblocks/react\";\nimport {\n  useLayoutEffect,\n  useMentionSuggestions,\n} from \"@liveblocks/react/_private\";\nimport { useOverrides } from \"@liveblocks/react-ui\";\nimport type { HTMLAttributes, MouseEvent } from \"react\";\nimport { forwardRef, useEffect, useImperativeHandle, useState } from \"react\";\n\nimport { Avatar } from \"./Avatar\";\n\nexport interface UserProps\n  extends Omit<HTMLAttributes<HTMLSpanElement>, \"children\"> {\n  userId: string;\n}\n\nexport const User = forwardRef<HTMLSpanElement, UserProps>(\n  function User(props, forwardedRef) {\n    const { userId, className, ...spanProps } = props;\n\n    const { user, isLoading } = useUser(userId);\n    const $ = useOverrides();\n\n    const name =\n      user === undefined || user === null ? $.USER_UNKNOWN : user.name;\n\n    return (\n      <span\n        className={className}\n        data-loading={isLoading ? \"\" : undefined}\n        ref={forwardedRef}\n        {...spanProps}\n      >\n        {isLoading ? null : name}\n      </span>\n    );\n  }\n);\n\nexport const SUGGESTIONS_COLLISION_PADDING = 10;\n\nexport interface MentionsListProps extends HTMLAttributes<HTMLDivElement> {\n  query: string;\n  command: (otps: { id: string; notificationId: string }) => void;\n  clientRect: () => DOMRect;\n  hide: boolean;\n}\n\nexport type MentionsListHandle = {\n  onKeyDown: ({ event }: { event: KeyboardEvent }) => boolean;\n};\n\nexport const MentionsList = forwardRef<MentionsListHandle, MentionsListProps>(\n  (props, ref) => {\n    const [selectedIndex, setSelectedIndex] = useState(0);\n    const room = useRoom();\n    const suggestions = useMentionSuggestions(room.id, props.query);\n    const { onMouseEnter, onClick } = props;\n    const {\n      refs: { setReference, setFloating },\n      strategy,\n      x,\n      y,\n    } = useFloating({\n      strategy: \"fixed\",\n      placement: \"top-start\",\n      middleware: [\n        flip({ padding: SUGGESTIONS_COLLISION_PADDING, crossAxis: false }),\n        offset(10),\n        hide({ padding: SUGGESTIONS_COLLISION_PADDING }),\n        shift({\n          padding: SUGGESTIONS_COLLISION_PADDING,\n          limiter: limitShift(),\n        }),\n        size({ padding: SUGGESTIONS_COLLISION_PADDING }),\n      ],\n      whileElementsMounted: (...args) => {\n        return autoUpdate(...args, {\n          animationFrame: true,\n        });\n      },\n    });\n\n    useLayoutEffect(() => {\n      setReference({\n        getBoundingClientRect: props.clientRect,\n      });\n    }, [setReference, props.clientRect]);\n\n    const selectItem = (index: number) => {\n      const item = (suggestions ?? [])[index];\n      if (item) {\n        props.command({\n          id: item,\n          notificationId: createInboxNotificationId(),\n        });\n      }\n    };\n\n    const upHandler = () => {\n      setSelectedIndex(\n        (selectedIndex + (suggestions?.length ?? 0) - 1) %\n          (suggestions?.length ?? 0)\n      );\n    };\n\n    const downHandler = () => {\n      setSelectedIndex((selectedIndex + 1) % (suggestions?.length ?? 0));\n    };\n\n    const enterHandler = () => {\n      selectItem(selectedIndex);\n    };\n\n    useEffect(() => setSelectedIndex(0), [suggestions]);\n\n    useImperativeHandle(ref, () => ({\n      onKeyDown: ({ event }: { event: KeyboardEvent }) => {\n        if (event.key === \"ArrowUp\") {\n          upHandler();\n          return true;\n        }\n\n        if (event.key === \"ArrowDown\") {\n          downHandler();\n          return true;\n        }\n\n        if (event.key === \"Enter\") {\n          enterHandler();\n          return true;\n        }\n\n        return false;\n      },\n    }));\n\n    const handleClick =\n      (index: number) => (event: MouseEvent<HTMLDivElement>) => {\n        onClick?.(event);\n\n        if (event.isDefaultPrevented()) return;\n        selectItem(index);\n      };\n    const handleMouseEnter =\n      (index: number) => (event: MouseEvent<HTMLDivElement>) => {\n        onMouseEnter?.(event);\n\n        if (event.isDefaultPrevented()) return;\n\n        setSelectedIndex(index);\n      };\n\n    if (suggestions === undefined || suggestions.length === 0) {\n      return null;\n    }\n\n    return (\n      <div\n        className=\"lb-root lb-portal lb-elevation lb-tiptap-suggestions lb-tiptap-mention-suggestions\"\n        ref={setFloating}\n        style={{\n          position: strategy,\n          top: 0,\n          left: 0,\n          transform: `translate3d(${Math.round(x)}px, ${Math.round(y)}px, 0)`,\n          minWidth: \"max-content\",\n          display: props.hide ? \"none\" : \"block\",\n        }}\n      >\n        <div className=\"lb-tiptap-suggestions-list lb-tiptap-mention-suggestions-list\">\n          {suggestions.map((item, index) => (\n            <div\n              className=\"lb-tiptap-suggestions-list-item lb-tiptap-mention-suggestion\"\n              key={index}\n              role=\"option\"\n              data-highlighted={index === selectedIndex || undefined}\n              onMouseEnter={handleMouseEnter(index)}\n              onClick={handleClick(index)}\n            >\n              <Avatar\n                userId={item}\n                className=\"lb-tiptap-mention-suggestion-avatar\"\n              />\n              <User\n                userId={item}\n                className=\"lb-tiptap-mention-suggestion-user\"\n              />\n            </div>\n          ))}\n        </div>\n      </div>\n    );\n  }\n);\n"],"names":["User"],"mappings":"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"}

package/dist/toolbar/FloatingToolbar.js

@@ -0,0 +1,301 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var reactDom = require('@floating-ui/react-dom');
+var _private$1 = require('@liveblocks/react/_private');
+var _private = require('@liveblocks/react-ui/_private');
+var react$1 = require('@tiptap/react');
+var react = require('react');
+var reactDom$1 = require('react-dom');
+var classnames = require('../classnames.js');
+var context = require('../context.js');
+var FloatingToolbarContext = require('./FloatingToolbarContext.js');
+var Toolbar = require('./Toolbar.js');
+
+const FLOATING_TOOLBAR_COLLISION_PADDING = 10;
+const FLOATING_TOOLBAR_OPEN_DELAY = 50;
+function DefaultFloatingToolbarContent({ editor }) {
+  const supportsThread = "addPendingComment" in editor.commands;
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Toolbar.Toolbar.BlockSelector, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(Toolbar.Toolbar.SectionInline, {}),
+      supportsThread ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Toolbar.Toolbar.Separator, {}),
+          /* @__PURE__ */ jsxRuntime.jsx(Toolbar.Toolbar.SectionCollaboration, {})
+        ]
+      }) : null
+    ]
+  });
+}
+const FloatingToolbar = react.forwardRef(
+  ({
+    children = DefaultFloatingToolbarContent,
+    before,
+    after,
+    position = "top",
+    offset: sideOffset = 6,
+    editor,
+    onPointerDown,
+    onFocus,
+    onBlur,
+    className,
+    ...props
+  }, forwardedRef) => {
+    const toolbarRef = react.useRef(null);
+    const [isPointerDown, setPointerDown] = react.useState(false);
+    const [isFocused, setFocused] = react.useState(false);
+    const [isManuallyClosed, setManuallyClosed] = react.useState(false);
+    const isEditable = react$1.useEditorState({
+      editor,
+      equalityFn: Object.is,
+      selector: (ctx) => ctx.editor?.isEditable ?? false
+    }) ?? false;
+    const hasSelectionRange = react$1.useEditorState({
+      editor,
+      equalityFn: Object.is,
+      selector: (ctx) => {
+        const editor2 = ctx.editor;
+        if (!editor2) {
+          return false;
+        }
+        const { doc, selection } = editor2.state;
+        const { empty, ranges } = selection;
+        const from = Math.min(...ranges.map((range) => range.$from.pos));
+        const to = Math.max(...ranges.map((range) => range.$to.pos));
+        if (empty) {
+          return false;
+        }
+        return react$1.isTextSelection(selection) && doc.textBetween(from, to).length > 0;
+      }
+    }) ?? false;
+    const isOpen = isFocused && !isPointerDown && hasSelectionRange && !isManuallyClosed;
+    const [delayedIsOpen, setDelayedIsOpen] = react.useState(isOpen);
+    const delayedIsOpenTimeoutRef = react.useRef();
+    react.useEffect(() => {
+      if (!editor) {
+        return;
+      }
+      setManuallyClosed(false);
+      const handleSelectionChange = () => {
+        setManuallyClosed(false);
+      };
+      editor.on("selectionUpdate", handleSelectionChange);
+      return () => {
+        editor.off("selectionUpdate", handleSelectionChange);
+      };
+    }, [isFocused, hasSelectionRange, editor]);
+    react.useEffect(() => {
+      if (!editor) {
+        return;
+      }
+      const handleFocus2 = () => {
+        setFocused(true);
+      };
+      const handleBlur2 = (event) => {
+        if (event.relatedTarget && toolbarRef.current?.contains(event.relatedTarget)) {
+          return;
+        }
+        if (event.relatedTarget === editor.view.dom) {
+          return;
+        }
+        setFocused(false);
+      };
+      editor.view.dom.addEventListener("focus", handleFocus2);
+      editor.view.dom.addEventListener("blur", handleBlur2);
+      return () => {
+        editor.view.dom.removeEventListener("focus", handleFocus2);
+        editor.view.dom.removeEventListener("blur", handleBlur2);
+      };
+    }, [editor]);
+    const handleFocus = react.useCallback(
+      (event) => {
+        onFocus?.(event);
+        if (!event.isDefaultPrevented()) {
+          setFocused(true);
+        }
+      },
+      [onFocus]
+    );
+    const handleBlur = react.useCallback(
+      (event) => {
+        onBlur?.(event);
+        if (!event.isDefaultPrevented()) {
+          if (event.relatedTarget && toolbarRef.current?.contains(event.relatedTarget)) {
+            return;
+          }
+          if (event.relatedTarget === editor?.view.dom) {
+            return;
+          }
+          setFocused(false);
+        }
+      },
+      [onBlur, editor]
+    );
+    react.useEffect(() => {
+      if (isOpen) {
+        delayedIsOpenTimeoutRef.current = window.setTimeout(() => {
+          setDelayedIsOpen(true);
+        }, FLOATING_TOOLBAR_OPEN_DELAY);
+      } else {
+        setDelayedIsOpen(false);
+      }
+      return () => {
+        window.clearTimeout(delayedIsOpenTimeoutRef.current);
+      };
+    }, [isOpen]);
+    const floatingOptions = react.useMemo(() => {
+      const detectOverflowOptions = {
+        padding: FLOATING_TOOLBAR_COLLISION_PADDING
+      };
+      return {
+        strategy: "fixed",
+        placement: position,
+        middleware: [
+          reactDom.inline(detectOverflowOptions),
+          reactDom.flip({ ...detectOverflowOptions, crossAxis: false }),
+          reactDom.hide(detectOverflowOptions),
+          reactDom.shift({
+            ...detectOverflowOptions,
+            limiter: reactDom.limitShift()
+          }),
+          reactDom.offset(sideOffset),
+          reactDom.size(detectOverflowOptions)
+        ],
+        whileElementsMounted: (...args) => {
+          return reactDom.autoUpdate(...args, {
+            animationFrame: true
+          });
+        }
+      };
+    }, [position, sideOffset]);
+    const {
+      refs: { setReference, setFloating },
+      strategy,
+      x,
+      y,
+      isPositioned
+    } = reactDom.useFloating({
+      ...floatingOptions,
+      open: delayedIsOpen
+    });
+    const mergedRefs = _private.useRefs(forwardedRef, toolbarRef, setFloating);
+    const handlePointerDown = react.useCallback(
+      (event) => {
+        onPointerDown?.(event);
+        event.stopPropagation();
+        if (event.target === toolbarRef.current) {
+          event.preventDefault();
+        }
+      },
+      [onPointerDown]
+    );
+    react.useEffect(() => {
+      if (!editor || !isEditable) {
+        return;
+      }
+      const handlePointerDown2 = () => {
+        setPointerDown(true);
+      };
+      const handlePointerUp = () => {
+        setPointerDown(false);
+      };
+      document.addEventListener("pointerdown", handlePointerDown2);
+      document.addEventListener("pointercancel", handlePointerUp);
+      document.addEventListener("pointerup", handlePointerUp);
+      return () => {
+        document.removeEventListener("pointerdown", handlePointerDown2);
+        document.removeEventListener("pointercancel", handlePointerUp);
+        document.removeEventListener("pointerup", handlePointerUp);
+      };
+    }, [editor, isEditable]);
+    _private$1.useLayoutEffect(() => {
+      if (!editor || !delayedIsOpen) {
+        return;
+      }
+      const updateSelectionReference = () => {
+        const domSelection = window.getSelection();
+        if (editor.state.selection.empty || !domSelection || !domSelection.rangeCount) {
+          setReference(null);
+        } else {
+          const domRange = domSelection.getRangeAt(0);
+          setReference(domRange);
+        }
+      };
+      editor.on("transaction", updateSelectionReference);
+      updateSelectionReference();
+      return () => {
+        editor.off("transaction", updateSelectionReference);
+      };
+    }, [editor, delayedIsOpen, setReference]);
+    react.useEffect(() => {
+      if (!editor || !delayedIsOpen) {
+        return;
+      }
+      const handleKeyDown = (event) => {
+        if (event.target !== editor.view.dom && event.defaultPrevented) {
+          return;
+        }
+        if (event.key === "Escape") {
+          event.preventDefault();
+          event.stopPropagation();
+          editor.commands.focus();
+          setManuallyClosed(true);
+        }
+      };
+      editor.view.dom.addEventListener("keydown", handleKeyDown);
+      return () => {
+        editor.view.dom.removeEventListener("keydown", handleKeyDown);
+      };
+    }, [editor, delayedIsOpen]);
+    const close = react.useCallback(() => {
+      setManuallyClosed(true);
+    }, [setManuallyClosed]);
+    if (!editor || !delayedIsOpen) {
+      return null;
+    }
+    const slotProps = { editor };
+    return reactDom$1.createPortal(
+      /* @__PURE__ */ jsxRuntime.jsx(_private.TooltipProvider, {
+        children: /* @__PURE__ */ jsxRuntime.jsx(context.EditorProvider, {
+          editor,
+          children: /* @__PURE__ */ jsxRuntime.jsx(FloatingToolbarContext.FloatingToolbarContext.Provider, {
+            value: { close },
+            children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
+              role: "toolbar",
+              "aria-label": "Floating toolbar",
+              "aria-orientation": "horizontal",
+              className: classnames.classNames(
+                "lb-root lb-portal lb-elevation lb-tiptap-floating-toolbar lb-tiptap-toolbar",
+                className
+              ),
+              ref: mergedRefs,
+              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"
+              },
+              onPointerDown: handlePointerDown,
+              onFocus: handleFocus,
+              onBlur: handleBlur,
+              ...props,
+              children: [
+                Toolbar.applyToolbarSlot(before, slotProps),
+                Toolbar.applyToolbarSlot(children, slotProps),
+                Toolbar.applyToolbarSlot(after, slotProps)
+              ]
+            })
+          })
+        })
+      }),
+      document.body
+    );
+  }
+);
+
+exports.FLOATING_TOOLBAR_COLLISION_PADDING = FLOATING_TOOLBAR_COLLISION_PADDING;
+exports.FloatingToolbar = FloatingToolbar;
+//# sourceMappingURL=FloatingToolbar.js.map