@liveblocks/react-tiptap 2.8.3-tiptap1 → 2.10.2-tiptap1

package/dist/comments/FloatingThreads.js.map

@@ -1 +1 @@
-{"version":3,"file":"FloatingThreads.js","sources":["../../src/comments/FloatingThreads.tsx"],"sourcesContent":["import type {\n  ClientRectObject\n} from \"@floating-ui/react-dom\";\nimport {\n  autoUpdate,\n  flip,\n  hide,\n  limitShift,\n  offset,\n  shift,\n  size,\n  useFloating,\n} from \"@floating-ui/react-dom\";\nimport type { BaseMetadata, DM, ThreadData } from \"@liveblocks/core\";\nimport {\n  Thread as DefaultThread,\n  type ThreadProps,\n} from \"@liveblocks/react-ui\";\nimport type { Editor } from \"@tiptap/react\";\nimport React, {\n  type ComponentType,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useState,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\n\nimport { classNames } from \"../classnames\";\nimport type { ThreadPluginState } from \"../types\";\nimport { THREADS_PLUGIN_KEY } from \"../types\";\nimport { getRectFromCoords } from \"../utils\";\n\ntype ThreadPanelComponents = {\n  Thread: ComponentType<ThreadProps>;\n};\n\nexport interface FloatingThreadsProps<M extends BaseMetadata = DM>\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"children\"> {\n  /**\n   * The threads to display.\n   */\n  threads: ThreadData<M>[];\n\n  /**\n   * Override the component's components.\n   */\n  components?: Partial<ThreadPanelComponents>;\n\n  /**\n   * The tiptap editor\n   */\n  editor: Editor | null;\n}\n\nexport function FloatingThreads({\n  threads,\n  components,\n  editor,\n  ...props\n}: FloatingThreadsProps) {\n\n  const Thread = components?.Thread ?? DefaultThread;\n  const pluginState = editor ? THREADS_PLUGIN_KEY.getState(editor.state) as ThreadPluginState : null;\n\n  const [activeThreads, setActiveThreads] = useState<{\n    rect: ClientRectObject;\n    threads: ThreadData[];\n  } | null>(null);\n\n\n  useEffect(() => {\n    if (!editor || !pluginState) {\n      setActiveThreads(null);\n      return;\n    }\n    const { selectedThreadId, selectedThreadPos } = pluginState;\n    if (selectedThreadId === null || selectedThreadPos === null) {\n      setActiveThreads(null);\n      return;\n    }\n    const coords = editor.view.coordsAtPos(Math.min(selectedThreadPos, editor.state.doc.content.size - 1));\n    const active = (threads ?? []).filter((thread) =>\n      selectedThreadId === thread.id\n    );\n    setActiveThreads({\n      rect: getRectFromCoords(coords), threads: active\n    });\n  }, [editor, pluginState, threads]);\n\n  const handleEscapeKeydown = useCallback((): boolean => {\n    if (!editor || activeThreads === null) return false;\n    editor.commands.selectThread(null);\n    return true;\n  }, [activeThreads, editor]);\n\n  if (!activeThreads) return null;\n\n  return (\n    <FloatingThreadPortal\n      rect={activeThreads.rect}\n      container={document.body}\n      {...props}\n    >\n      {activeThreads.threads.map((thread) => (\n        <ThreadWrapper\n          key={thread.id}\n          thread={thread}\n          Thread={Thread}\n          onEscapeKeydown={handleEscapeKeydown}\n          className=\"lb-tiptap-floating-threads-thread\"\n        />\n      ))}\n    </FloatingThreadPortal>\n  );\n}\n\ninterface FloatingThreadPortalProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"children\"> {\n  rect: ClientRectObject;\n  container: HTMLElement;\n  children: ReactNode;\n}\n\nexport const FLOATING_THREAD_COLLISION_PADDING = 10;\n\nfunction FloatingThreadPortal({\n  container,\n  rect,\n  children,\n  className,\n  style,\n  ...props\n}: FloatingThreadPortalProps) {\n  const {\n    refs: { setReference, setFloating },\n    strategy,\n    x,\n    y,\n  } = useFloating({\n    strategy: \"absolute\",\n    placement: \"bottom\",\n    middleware: [\n      flip({ padding: FLOATING_THREAD_COLLISION_PADDING, crossAxis: false }),\n      offset(10),\n      hide({ padding: FLOATING_THREAD_COLLISION_PADDING }),\n      shift({\n        padding: FLOATING_THREAD_COLLISION_PADDING,\n        limiter: limitShift(),\n      }),\n      size({\n        padding: FLOATING_THREAD_COLLISION_PADDING,\n        apply({ availableWidth, availableHeight, elements }) {\n          elements.floating.style.setProperty(\n            \"--lb-tiptap-floating-threads-available-width\",\n            `${availableWidth}px`\n          );\n          elements.floating.style.setProperty(\n            \"--lb-tiptap-floating-threads-available-height\",\n            `${availableHeight}px`\n          );\n        },\n      }),\n    ],\n    whileElementsMounted: (...args) => {\n      return autoUpdate(...args, {\n        animationFrame: true,\n      });\n    },\n  });\n\n  useLayoutEffect(() => {\n    setReference({\n      getBoundingClientRect: () => rect,\n    });\n  }, [setReference, rect]);\n\n  return createPortal(\n    <div\n      ref={setFloating}\n      {...props}\n      style={{\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      }}\n      className={classNames(\n        \"lb-root lb-portal lb-elevation lb-tiptap-floating lb-tiptap-floating-threads\",\n        className\n      )}\n    >\n      {children}\n    </div>,\n    container\n  );\n}\n\ninterface ThreadWrapperProps extends ThreadProps {\n  thread: ThreadData;\n  Thread: ComponentType<ThreadProps>;\n  onEscapeKeydown: () => void;\n}\n\nfunction ThreadWrapper({\n  thread,\n  Thread,\n  onEscapeKeydown,\n  onKeyDown,\n  ...threadProps\n}: ThreadWrapperProps) {\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLDivElement>) => {\n      onKeyDown?.(event);\n\n      // TODO: Add ability to preventDefault on keydown to override the default behavior, e.g. to show an alert dialog\n      if (event.key === \"Escape\") {\n        onEscapeKeydown();\n      }\n    },\n    [onEscapeKeydown, onKeyDown]\n  );\n\n  return <Thread thread={thread} onKeyDown={handleKeyDown} {...threadProps} />;\n}\n\n"],"names":["DefaultThread","THREADS_PLUGIN_KEY","useState","useEffect","getRectFromCoords","useCallback","useFloating","flip","offset","hide","shift","limitShift","size","autoUpdate","useLayoutEffect","createPortal","classNames"],"mappings":"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"}
+{"version":3,"file":"FloatingThreads.js","sources":["../../src/comments/FloatingThreads.tsx"],"sourcesContent":["\nimport {\n  autoUpdate,\n  flip,\n  hide,\n  limitShift,\n  offset,\n  shift,\n  size,\n  useFloating,\n} from \"@floating-ui/react-dom\";\nimport type { BaseMetadata, DM, ThreadData } from \"@liveblocks/core\";\nimport {\n  Thread as DefaultThread,\n  type ThreadProps,\n} from \"@liveblocks/react-ui\";\nimport type { Editor } from \"@tiptap/react\";\nimport React, {\n  type ComponentType,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useState,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\n\nimport { classNames } from \"../classnames\";\nimport type { ThreadPluginState } from \"../types\";\nimport { THREADS_PLUGIN_KEY } from \"../types\";\n\ntype ThreadPanelComponents = {\n  Thread: ComponentType<ThreadProps>;\n};\n\nexport interface FloatingThreadsProps<M extends BaseMetadata = DM>\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"children\"> {\n  /**\n   * The threads to display.\n   */\n  threads: ThreadData<M>[];\n\n  /**\n   * Override the component's components.\n   */\n  components?: Partial<ThreadPanelComponents>;\n\n  /**\n   * The tiptap editor\n   */\n  editor: Editor | null;\n}\n\nexport function FloatingThreads({\n  threads,\n  components,\n  editor,\n  ...props\n}: FloatingThreadsProps) {\n\n  const Thread = components?.Thread ?? DefaultThread;\n  const pluginState = editor ? THREADS_PLUGIN_KEY.getState(editor.state) as ThreadPluginState : null;\n\n  const [activeThread, setActiveThread] = useState<ThreadData | null>(null);\n\n\n  useEffect(() => {\n    if (!editor || !pluginState) {\n      setActiveThread(null);\n      return;\n    }\n    const { selectedThreadId, selectedThreadPos } = pluginState;\n    if (selectedThreadId === null || selectedThreadPos === null) {\n      setActiveThread(null);\n      return;\n    }\n    const active = (threads ?? []).find((thread) =>\n      selectedThreadId === thread.id\n    );\n    setActiveThread(active ?? null);\n  }, [editor, pluginState, threads]);\n\n  const handleEscapeKeydown = useCallback((): boolean => {\n    if (!editor || activeThread === null) return false;\n    editor.commands.selectThread(null);\n    return true;\n  }, [activeThread, editor]);\n\n  if (!activeThread || !editor || activeThread.resolved) return null;\n\n  return (\n    <FloatingThreadPortal\n      thread={activeThread}\n      editor={editor}\n      container={document.body}\n      {...props}\n    >\n      {activeThread &&\n        <ThreadWrapper\n          key={activeThread.id}\n          thread={activeThread}\n          Thread={Thread}\n          onEscapeKeydown={handleEscapeKeydown}\n          className=\"lb-tiptap-floating-threads-thread\"\n        />\n      }\n    </FloatingThreadPortal>\n  );\n}\n\ninterface FloatingThreadPortalProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"children\"> {\n  thread: ThreadData;\n  editor: Editor;\n  container: HTMLElement;\n  children: ReactNode;\n}\n\nexport const FLOATING_THREAD_COLLISION_PADDING = 10;\n\nfunction FloatingThreadPortal({\n  container,\n  editor,\n  thread,\n  children,\n  className,\n  style,\n  ...props\n}: FloatingThreadPortalProps) {\n  const {\n    refs: { setReference, setFloating },\n    strategy,\n    x,\n    y,\n  } = useFloating({\n    strategy: \"absolute\",\n    placement: \"bottom\",\n    middleware: [\n      flip({ padding: FLOATING_THREAD_COLLISION_PADDING, crossAxis: false }),\n      offset(10),\n      hide({ padding: FLOATING_THREAD_COLLISION_PADDING }),\n      shift({\n        padding: FLOATING_THREAD_COLLISION_PADDING,\n        limiter: limitShift(),\n      }),\n      size({\n        padding: FLOATING_THREAD_COLLISION_PADDING,\n        apply({ availableWidth, availableHeight, elements }) {\n          elements.floating.style.setProperty(\n            \"--lb-tiptap-floating-threads-available-width\",\n            `${availableWidth}px`\n          );\n          elements.floating.style.setProperty(\n            \"--lb-tiptap-floating-threads-available-height\",\n            `${availableHeight}px`\n          );\n        },\n      }),\n    ],\n    whileElementsMounted: (...args) => {\n      return autoUpdate(...args, {\n        animationFrame: true,\n      });\n    },\n  });\n\n  const updateRef = useCallback(() => {\n    const el = editor.view.dom.querySelector(`[data-lb-thread-id=\"${thread.id}\"]`);\n    if (el) {\n      setReference(el);\n    }\n  }, [setReference, editor, thread.id]);\n\n  // Remote cursor updates and other edits can cause the ref to break\n  useEffect(() => {\n    editor.on(\"transaction\", updateRef)\n    return () => {\n      editor.off(\"transaction\", updateRef);\n    }\n  }, [editor, updateRef]);\n\n  useLayoutEffect(updateRef, [updateRef]);\n\n  return createPortal(\n    <div\n      ref={setFloating}\n      {...props}\n      style={{\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      }}\n      className={classNames(\n        \"lb-root lb-portal lb-elevation lb-tiptap-floating lb-tiptap-floating-threads\",\n        className\n      )}\n    >\n      {children}\n    </div>,\n    container\n  );\n}\n\ninterface ThreadWrapperProps extends ThreadProps {\n  thread: ThreadData;\n  Thread: ComponentType<ThreadProps>;\n  onEscapeKeydown: () => void;\n}\n\nfunction ThreadWrapper({\n  thread,\n  Thread,\n  onEscapeKeydown,\n  onKeyDown,\n  ...threadProps\n}: ThreadWrapperProps) {\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLDivElement>) => {\n      onKeyDown?.(event);\n\n      // TODO: Add ability to preventDefault on keydown to override the default behavior, e.g. to show an alert dialog\n      if (event.key === \"Escape\") {\n        onEscapeKeydown();\n      }\n    },\n    [onEscapeKeydown, onKeyDown]\n  );\n\n  return <Thread thread={thread} onKeyDown={handleKeyDown} {...threadProps} />;\n}\n\n"],"names":["DefaultThread","THREADS_PLUGIN_KEY","useState","useEffect","useCallback","useFloating","flip","offset","hide","shift","limitShift","size","autoUpdate","useLayoutEffect","createPortal","classNames"],"mappings":";;;;;;;;;AAuDO,SAAS,eAAgB,CAAA;AAAA,EAC9B,OAAA;AAAA,EACA,UAAA;AAAA,EACA,MAAA;AAAA,EACG,GAAA,KAAA;AACL,CAAyB,EAAA;AAEvB,EAAM,MAAA,MAAA,GAAS,YAAY,MAAU,IAAAA,cAAA,CAAA;AACrC,EAAA,MAAM,cAAc,MAAS,GAAAC,wBAAA,CAAmB,QAAS,CAAA,MAAA,CAAO,KAAK,CAAyB,GAAA,IAAA,CAAA;AAE9F,EAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAIC,eAA4B,IAAI,CAAA,CAAA;AAGxE,EAAAC,eAAA,CAAU,MAAM;AACd,IAAI,IAAA,CAAC,MAAU,IAAA,CAAC,WAAa,EAAA;AAC3B,MAAA,eAAA,CAAgB,IAAI,CAAA,CAAA;AACpB,MAAA,OAAA;AAAA,KACF;AACA,IAAM,MAAA,EAAE,gBAAkB,EAAA,iBAAA,EAAsB,GAAA,WAAA,CAAA;AAChD,IAAI,IAAA,gBAAA,KAAqB,IAAQ,IAAA,iBAAA,KAAsB,IAAM,EAAA;AAC3D,MAAA,eAAA,CAAgB,IAAI,CAAA,CAAA;AACpB,MAAA,OAAA;AAAA,KACF;AACA,IAAM,MAAA,MAAA,GAAA,CAAU,OAAW,IAAA,EAAI,EAAA,IAAA;AAAA,MAAK,CAAC,MACnC,KAAA,gBAAA,KAAqB,MAAO,CAAA,EAAA;AAAA,KAC9B,CAAA;AACA,IAAA,eAAA,CAAgB,UAAU,IAAI,CAAA,CAAA;AAAA,GAC7B,EAAA,CAAC,MAAQ,EAAA,WAAA,EAAa,OAAO,CAAC,CAAA,CAAA;AAEjC,EAAM,MAAA,mBAAA,GAAsBC,kBAAY,MAAe;AACrD,IAAI,IAAA,CAAC,UAAU,YAAiB,KAAA,IAAA;AAAM,MAAO,OAAA,KAAA,CAAA;AAC7C,IAAO,MAAA,CAAA,QAAA,CAAS,aAAa,IAAI,CAAA,CAAA;AACjC,IAAO,OAAA,IAAA,CAAA;AAAA,GACN,EAAA,CAAC,YAAc,EAAA,MAAM,CAAC,CAAA,CAAA;AAEzB,EAAA,IAAI,CAAC,YAAA,IAAgB,CAAC,MAAA,IAAU,YAAa,CAAA,QAAA;AAAU,IAAO,OAAA,IAAA,CAAA;AAE9D,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,oBAAA,EAAA;AAAA,IACC,MAAQ,EAAA,YAAA;AAAA,IACR,MAAA;AAAA,IACA,WAAW,QAAS,CAAA,IAAA;AAAA,IACnB,GAAG,KAAA;AAAA,GAAA,EAEH,gCACE,KAAA,CAAA,aAAA,CAAA,aAAA,EAAA;AAAA,IACC,KAAK,YAAa,CAAA,EAAA;AAAA,IAClB,MAAQ,EAAA,YAAA;AAAA,IACR,MAAA;AAAA,IACA,eAAiB,EAAA,mBAAA;AAAA,IACjB,SAAU,EAAA,mCAAA;AAAA,GACZ,CAEJ,CAAA,CAAA;AAEJ,CAAA;AAUO,MAAM,iCAAoC,GAAA,GAAA;AAEjD,SAAS,oBAAqB,CAAA;AAAA,EAC5B,SAAA;AAAA,EACA,MAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,KAAA;AAAA,EACG,GAAA,KAAA;AACL,CAA8B,EAAA;AAC5B,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,UAAA;AAAA,IACV,SAAW,EAAA,QAAA;AAAA,IACX,UAAY,EAAA;AAAA,MACVC,cAAK,EAAE,OAAA,EAAS,iCAAmC,EAAA,SAAA,EAAW,OAAO,CAAA;AAAA,MACrEC,gBAAO,EAAE,CAAA;AAAA,MACTC,aAAK,CAAA,EAAE,OAAS,EAAA,iCAAA,EAAmC,CAAA;AAAA,MACnDC,cAAM,CAAA;AAAA,QACJ,OAAS,EAAA,iCAAA;AAAA,QACT,SAASC,mBAAW,EAAA;AAAA,OACrB,CAAA;AAAA,MACDC,aAAK,CAAA;AAAA,QACH,OAAS,EAAA,iCAAA;AAAA,QACT,KAAM,CAAA,EAAE,cAAgB,EAAA,eAAA,EAAiB,UAAY,EAAA;AACnD,UAAA,QAAA,CAAS,SAAS,KAAM,CAAA,WAAA;AAAA,YACtB,8CAAA;AAAA,YACA,CAAG,EAAA,cAAA,CAAA,EAAA,CAAA;AAAA,WACL,CAAA;AACA,UAAA,QAAA,CAAS,SAAS,KAAM,CAAA,WAAA;AAAA,YACtB,+CAAA;AAAA,YACA,CAAG,EAAA,eAAA,CAAA,EAAA,CAAA;AAAA,WACL,CAAA;AAAA,SACF;AAAA,OACD,CAAA;AAAA,KACH;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,EAAM,MAAA,SAAA,GAAYR,kBAAY,MAAM;AAClC,IAAA,MAAM,KAAK,MAAO,CAAA,IAAA,CAAK,IAAI,aAAc,CAAA,CAAA,oBAAA,EAAuB,OAAO,EAAM,CAAA,EAAA,CAAA,CAAA,CAAA;AAC7E,IAAA,IAAI,EAAI,EAAA;AACN,MAAA,YAAA,CAAa,EAAE,CAAA,CAAA;AAAA,KACjB;AAAA,KACC,CAAC,YAAA,EAAc,MAAQ,EAAA,MAAA,CAAO,EAAE,CAAC,CAAA,CAAA;AAGpC,EAAAD,eAAA,CAAU,MAAM;AACd,IAAO,MAAA,CAAA,EAAA,CAAG,eAAe,SAAS,CAAA,CAAA;AAClC,IAAA,OAAO,MAAM;AACX,MAAO,MAAA,CAAA,GAAA,CAAI,eAAe,SAAS,CAAA,CAAA;AAAA,KACrC,CAAA;AAAA,GACC,EAAA,CAAC,MAAQ,EAAA,SAAS,CAAC,CAAA,CAAA;AAEtB,EAAgBU,qBAAA,CAAA,SAAA,EAAW,CAAC,SAAS,CAAC,CAAA,CAAA;AAEtC,EAAO,OAAAC,uBAAA;AAAA,oBACJ,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,MACC,GAAK,EAAA,WAAA;AAAA,MACJ,GAAG,KAAA;AAAA,MACJ,KAAO,EAAA;AAAA,QACL,GAAG,KAAA;AAAA,QACH,QAAU,EAAA,QAAA;AAAA,QACV,GAAK,EAAA,CAAA;AAAA,QACL,IAAM,EAAA,CAAA;AAAA,QACN,SAAA,EAAW,eAAe,IAAK,CAAA,KAAA,CAAM,CAAC,CAAQ,CAAA,IAAA,EAAA,IAAA,CAAK,MAAM,CAAC,CAAA,CAAA,MAAA,CAAA;AAAA,QAC1D,QAAU,EAAA,aAAA;AAAA,OACZ;AAAA,MACA,SAAW,EAAAC,qBAAA;AAAA,QACT,8EAAA;AAAA,QACA,SAAA;AAAA,OACF;AAAA,KAAA,EAEC,QACH,CAAA;AAAA,IACA,SAAA;AAAA,GACF,CAAA;AACF,CAAA;AAQA,SAAS,aAAc,CAAA;AAAA,EACrB,MAAA;AAAA,EACA,MAAA;AAAA,EACA,eAAA;AAAA,EACA,SAAA;AAAA,EACG,GAAA,WAAA;AACL,CAAuB,EAAA;AACrB,EAAA,MAAM,aAAgB,GAAAX,iBAAA;AAAA,IACpB,CAAC,KAAyC,KAAA;AACxC,MAAA,SAAA,GAAY,KAAK,CAAA,CAAA;AAGjB,MAAI,IAAA,KAAA,CAAM,QAAQ,QAAU,EAAA;AAC1B,QAAgB,eAAA,EAAA,CAAA;AAAA,OAClB;AAAA,KACF;AAAA,IACA,CAAC,iBAAiB,SAAS,CAAA;AAAA,GAC7B,CAAA;AAEA,EAAA,uBAAQ,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA;AAAA,IAAO,MAAA;AAAA,IAAgB,SAAW,EAAA,aAAA;AAAA,IAAgB,GAAG,WAAA;AAAA,GAAa,CAAA,CAAA;AAC5E;;;;;"}

package/dist/comments/FloatingThreads.mjs

@@ -4,7 +4,6 @@ import React, { useState, useEffect, useCallback, useLayoutEffect } from 'react'
 import { createPortal } from 'react-dom';
 import { classNames } from '../classnames.mjs';
 import { THREADS_PLUGIN_KEY } from '../types.mjs';
-import { getRectFromCoords } from '../utils.mjs';
 
 function FloatingThreads({
   threads,
@@ -14,50 +13,48 @@ function FloatingThreads({
 }) {
   const Thread$1 = components?.Thread ?? Thread;
   const pluginState = editor ? THREADS_PLUGIN_KEY.getState(editor.state) : null;
-  const [activeThreads, setActiveThreads] = useState(null);
+  const [activeThread, setActiveThread] = useState(null);
   useEffect(() => {
     if (!editor || !pluginState) {
-      setActiveThreads(null);
+      setActiveThread(null);
       return;
     }
     const { selectedThreadId, selectedThreadPos } = pluginState;
     if (selectedThreadId === null || selectedThreadPos === null) {
-      setActiveThreads(null);
+      setActiveThread(null);
       return;
     }
-    const coords = editor.view.coordsAtPos(Math.min(selectedThreadPos, editor.state.doc.content.size - 1));
-    const active = (threads ?? []).filter(
+    const active = (threads ?? []).find(
       (thread) => selectedThreadId === thread.id
     );
-    setActiveThreads({
-      rect: getRectFromCoords(coords),
-      threads: active
-    });
+    setActiveThread(active ?? null);
   }, [editor, pluginState, threads]);
   const handleEscapeKeydown = useCallback(() => {
-    if (!editor || activeThreads === null)
+    if (!editor || activeThread === null)
       return false;
     editor.commands.selectThread(null);
     return true;
-  }, [activeThreads, editor]);
-  if (!activeThreads)
+  }, [activeThread, editor]);
+  if (!activeThread || !editor || activeThread.resolved)
     return null;
   return /* @__PURE__ */ React.createElement(FloatingThreadPortal, {
-    rect: activeThreads.rect,
+    thread: activeThread,
+    editor,
     container: document.body,
     ...props
-  }, activeThreads.threads.map((thread) => /* @__PURE__ */ React.createElement(ThreadWrapper, {
-    key: thread.id,
-    thread,
+  }, activeThread && /* @__PURE__ */ React.createElement(ThreadWrapper, {
+    key: activeThread.id,
+    thread: activeThread,
     Thread: Thread$1,
     onEscapeKeydown: handleEscapeKeydown,
     className: "lb-tiptap-floating-threads-thread"
-  })));
+  }));
 }
 const FLOATING_THREAD_COLLISION_PADDING = 10;
 function FloatingThreadPortal({
   container,
-  rect,
+  editor,
+  thread,
   children,
   className,
   style,
@@ -99,11 +96,19 @@ function FloatingThreadPortal({
       });
     }
   });
-  useLayoutEffect(() => {
-    setReference({
-      getBoundingClientRect: () => rect
-    });
-  }, [setReference, rect]);
+  const updateRef = useCallback(() => {
+    const el = editor.view.dom.querySelector(`[data-lb-thread-id="${thread.id}"]`);
+    if (el) {
+      setReference(el);
+    }
+  }, [setReference, editor, thread.id]);
+  useEffect(() => {
+    editor.on("transaction", updateRef);
+    return () => {
+      editor.off("transaction", updateRef);
+    };
+  }, [editor, updateRef]);
+  useLayoutEffect(updateRef, [updateRef]);
   return createPortal(
     /* @__PURE__ */ React.createElement("div", {
       ref: setFloating,

package/dist/comments/FloatingThreads.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FloatingThreads.mjs","sources":["../../src/comments/FloatingThreads.tsx"],"sourcesContent":["import type {\n  ClientRectObject\n} from \"@floating-ui/react-dom\";\nimport {\n  autoUpdate,\n  flip,\n  hide,\n  limitShift,\n  offset,\n  shift,\n  size,\n  useFloating,\n} from \"@floating-ui/react-dom\";\nimport type { BaseMetadata, DM, ThreadData } from \"@liveblocks/core\";\nimport {\n  Thread as DefaultThread,\n  type ThreadProps,\n} from \"@liveblocks/react-ui\";\nimport type { Editor } from \"@tiptap/react\";\nimport React, {\n  type ComponentType,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useState,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\n\nimport { classNames } from \"../classnames\";\nimport type { ThreadPluginState } from \"../types\";\nimport { THREADS_PLUGIN_KEY } from \"../types\";\nimport { getRectFromCoords } from \"../utils\";\n\ntype ThreadPanelComponents = {\n  Thread: ComponentType<ThreadProps>;\n};\n\nexport interface FloatingThreadsProps<M extends BaseMetadata = DM>\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"children\"> {\n  /**\n   * The threads to display.\n   */\n  threads: ThreadData<M>[];\n\n  /**\n   * Override the component's components.\n   */\n  components?: Partial<ThreadPanelComponents>;\n\n  /**\n   * The tiptap editor\n   */\n  editor: Editor | null;\n}\n\nexport function FloatingThreads({\n  threads,\n  components,\n  editor,\n  ...props\n}: FloatingThreadsProps) {\n\n  const Thread = components?.Thread ?? DefaultThread;\n  const pluginState = editor ? THREADS_PLUGIN_KEY.getState(editor.state) as ThreadPluginState : null;\n\n  const [activeThreads, setActiveThreads] = useState<{\n    rect: ClientRectObject;\n    threads: ThreadData[];\n  } | null>(null);\n\n\n  useEffect(() => {\n    if (!editor || !pluginState) {\n      setActiveThreads(null);\n      return;\n    }\n    const { selectedThreadId, selectedThreadPos } = pluginState;\n    if (selectedThreadId === null || selectedThreadPos === null) {\n      setActiveThreads(null);\n      return;\n    }\n    const coords = editor.view.coordsAtPos(Math.min(selectedThreadPos, editor.state.doc.content.size - 1));\n    const active = (threads ?? []).filter((thread) =>\n      selectedThreadId === thread.id\n    );\n    setActiveThreads({\n      rect: getRectFromCoords(coords), threads: active\n    });\n  }, [editor, pluginState, threads]);\n\n  const handleEscapeKeydown = useCallback((): boolean => {\n    if (!editor || activeThreads === null) return false;\n    editor.commands.selectThread(null);\n    return true;\n  }, [activeThreads, editor]);\n\n  if (!activeThreads) return null;\n\n  return (\n    <FloatingThreadPortal\n      rect={activeThreads.rect}\n      container={document.body}\n      {...props}\n    >\n      {activeThreads.threads.map((thread) => (\n        <ThreadWrapper\n          key={thread.id}\n          thread={thread}\n          Thread={Thread}\n          onEscapeKeydown={handleEscapeKeydown}\n          className=\"lb-tiptap-floating-threads-thread\"\n        />\n      ))}\n    </FloatingThreadPortal>\n  );\n}\n\ninterface FloatingThreadPortalProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"children\"> {\n  rect: ClientRectObject;\n  container: HTMLElement;\n  children: ReactNode;\n}\n\nexport const FLOATING_THREAD_COLLISION_PADDING = 10;\n\nfunction FloatingThreadPortal({\n  container,\n  rect,\n  children,\n  className,\n  style,\n  ...props\n}: FloatingThreadPortalProps) {\n  const {\n    refs: { setReference, setFloating },\n    strategy,\n    x,\n    y,\n  } = useFloating({\n    strategy: \"absolute\",\n    placement: \"bottom\",\n    middleware: [\n      flip({ padding: FLOATING_THREAD_COLLISION_PADDING, crossAxis: false }),\n      offset(10),\n      hide({ padding: FLOATING_THREAD_COLLISION_PADDING }),\n      shift({\n        padding: FLOATING_THREAD_COLLISION_PADDING,\n        limiter: limitShift(),\n      }),\n      size({\n        padding: FLOATING_THREAD_COLLISION_PADDING,\n        apply({ availableWidth, availableHeight, elements }) {\n          elements.floating.style.setProperty(\n            \"--lb-tiptap-floating-threads-available-width\",\n            `${availableWidth}px`\n          );\n          elements.floating.style.setProperty(\n            \"--lb-tiptap-floating-threads-available-height\",\n            `${availableHeight}px`\n          );\n        },\n      }),\n    ],\n    whileElementsMounted: (...args) => {\n      return autoUpdate(...args, {\n        animationFrame: true,\n      });\n    },\n  });\n\n  useLayoutEffect(() => {\n    setReference({\n      getBoundingClientRect: () => rect,\n    });\n  }, [setReference, rect]);\n\n  return createPortal(\n    <div\n      ref={setFloating}\n      {...props}\n      style={{\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      }}\n      className={classNames(\n        \"lb-root lb-portal lb-elevation lb-tiptap-floating lb-tiptap-floating-threads\",\n        className\n      )}\n    >\n      {children}\n    </div>,\n    container\n  );\n}\n\ninterface ThreadWrapperProps extends ThreadProps {\n  thread: ThreadData;\n  Thread: ComponentType<ThreadProps>;\n  onEscapeKeydown: () => void;\n}\n\nfunction ThreadWrapper({\n  thread,\n  Thread,\n  onEscapeKeydown,\n  onKeyDown,\n  ...threadProps\n}: ThreadWrapperProps) {\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLDivElement>) => {\n      onKeyDown?.(event);\n\n      // TODO: Add ability to preventDefault on keydown to override the default behavior, e.g. to show an alert dialog\n      if (event.key === \"Escape\") {\n        onEscapeKeydown();\n      }\n    },\n    [onEscapeKeydown, onKeyDown]\n  );\n\n  return <Thread thread={thread} onKeyDown={handleKeyDown} {...threadProps} />;\n}\n\n"],"names":["Thread","DefaultThread"],"mappings":"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"}
+{"version":3,"file":"FloatingThreads.mjs","sources":["../../src/comments/FloatingThreads.tsx"],"sourcesContent":["\nimport {\n  autoUpdate,\n  flip,\n  hide,\n  limitShift,\n  offset,\n  shift,\n  size,\n  useFloating,\n} from \"@floating-ui/react-dom\";\nimport type { BaseMetadata, DM, ThreadData } from \"@liveblocks/core\";\nimport {\n  Thread as DefaultThread,\n  type ThreadProps,\n} from \"@liveblocks/react-ui\";\nimport type { Editor } from \"@tiptap/react\";\nimport React, {\n  type ComponentType,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useState,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\n\nimport { classNames } from \"../classnames\";\nimport type { ThreadPluginState } from \"../types\";\nimport { THREADS_PLUGIN_KEY } from \"../types\";\n\ntype ThreadPanelComponents = {\n  Thread: ComponentType<ThreadProps>;\n};\n\nexport interface FloatingThreadsProps<M extends BaseMetadata = DM>\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"children\"> {\n  /**\n   * The threads to display.\n   */\n  threads: ThreadData<M>[];\n\n  /**\n   * Override the component's components.\n   */\n  components?: Partial<ThreadPanelComponents>;\n\n  /**\n   * The tiptap editor\n   */\n  editor: Editor | null;\n}\n\nexport function FloatingThreads({\n  threads,\n  components,\n  editor,\n  ...props\n}: FloatingThreadsProps) {\n\n  const Thread = components?.Thread ?? DefaultThread;\n  const pluginState = editor ? THREADS_PLUGIN_KEY.getState(editor.state) as ThreadPluginState : null;\n\n  const [activeThread, setActiveThread] = useState<ThreadData | null>(null);\n\n\n  useEffect(() => {\n    if (!editor || !pluginState) {\n      setActiveThread(null);\n      return;\n    }\n    const { selectedThreadId, selectedThreadPos } = pluginState;\n    if (selectedThreadId === null || selectedThreadPos === null) {\n      setActiveThread(null);\n      return;\n    }\n    const active = (threads ?? []).find((thread) =>\n      selectedThreadId === thread.id\n    );\n    setActiveThread(active ?? null);\n  }, [editor, pluginState, threads]);\n\n  const handleEscapeKeydown = useCallback((): boolean => {\n    if (!editor || activeThread === null) return false;\n    editor.commands.selectThread(null);\n    return true;\n  }, [activeThread, editor]);\n\n  if (!activeThread || !editor || activeThread.resolved) return null;\n\n  return (\n    <FloatingThreadPortal\n      thread={activeThread}\n      editor={editor}\n      container={document.body}\n      {...props}\n    >\n      {activeThread &&\n        <ThreadWrapper\n          key={activeThread.id}\n          thread={activeThread}\n          Thread={Thread}\n          onEscapeKeydown={handleEscapeKeydown}\n          className=\"lb-tiptap-floating-threads-thread\"\n        />\n      }\n    </FloatingThreadPortal>\n  );\n}\n\ninterface FloatingThreadPortalProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"children\"> {\n  thread: ThreadData;\n  editor: Editor;\n  container: HTMLElement;\n  children: ReactNode;\n}\n\nexport const FLOATING_THREAD_COLLISION_PADDING = 10;\n\nfunction FloatingThreadPortal({\n  container,\n  editor,\n  thread,\n  children,\n  className,\n  style,\n  ...props\n}: FloatingThreadPortalProps) {\n  const {\n    refs: { setReference, setFloating },\n    strategy,\n    x,\n    y,\n  } = useFloating({\n    strategy: \"absolute\",\n    placement: \"bottom\",\n    middleware: [\n      flip({ padding: FLOATING_THREAD_COLLISION_PADDING, crossAxis: false }),\n      offset(10),\n      hide({ padding: FLOATING_THREAD_COLLISION_PADDING }),\n      shift({\n        padding: FLOATING_THREAD_COLLISION_PADDING,\n        limiter: limitShift(),\n      }),\n      size({\n        padding: FLOATING_THREAD_COLLISION_PADDING,\n        apply({ availableWidth, availableHeight, elements }) {\n          elements.floating.style.setProperty(\n            \"--lb-tiptap-floating-threads-available-width\",\n            `${availableWidth}px`\n          );\n          elements.floating.style.setProperty(\n            \"--lb-tiptap-floating-threads-available-height\",\n            `${availableHeight}px`\n          );\n        },\n      }),\n    ],\n    whileElementsMounted: (...args) => {\n      return autoUpdate(...args, {\n        animationFrame: true,\n      });\n    },\n  });\n\n  const updateRef = useCallback(() => {\n    const el = editor.view.dom.querySelector(`[data-lb-thread-id=\"${thread.id}\"]`);\n    if (el) {\n      setReference(el);\n    }\n  }, [setReference, editor, thread.id]);\n\n  // Remote cursor updates and other edits can cause the ref to break\n  useEffect(() => {\n    editor.on(\"transaction\", updateRef)\n    return () => {\n      editor.off(\"transaction\", updateRef);\n    }\n  }, [editor, updateRef]);\n\n  useLayoutEffect(updateRef, [updateRef]);\n\n  return createPortal(\n    <div\n      ref={setFloating}\n      {...props}\n      style={{\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      }}\n      className={classNames(\n        \"lb-root lb-portal lb-elevation lb-tiptap-floating lb-tiptap-floating-threads\",\n        className\n      )}\n    >\n      {children}\n    </div>,\n    container\n  );\n}\n\ninterface ThreadWrapperProps extends ThreadProps {\n  thread: ThreadData;\n  Thread: ComponentType<ThreadProps>;\n  onEscapeKeydown: () => void;\n}\n\nfunction ThreadWrapper({\n  thread,\n  Thread,\n  onEscapeKeydown,\n  onKeyDown,\n  ...threadProps\n}: ThreadWrapperProps) {\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLDivElement>) => {\n      onKeyDown?.(event);\n\n      // TODO: Add ability to preventDefault on keydown to override the default behavior, e.g. to show an alert dialog\n      if (event.key === \"Escape\") {\n        onEscapeKeydown();\n      }\n    },\n    [onEscapeKeydown, onKeyDown]\n  );\n\n  return <Thread thread={thread} onKeyDown={handleKeyDown} {...threadProps} />;\n}\n\n"],"names":["Thread","DefaultThread"],"mappings":"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"}

package/dist/index.d.mts

@@ -62,4 +62,17 @@ interface HistoryVersionPreviewProps extends ComponentPropsWithoutRef<"div"> {
  */
 declare const HistoryVersionPreview: React.ForwardRefExoticComponent<HistoryVersionPreviewProps & React.RefAttributes<HTMLDivElement>>;
 
+declare module "@tiptap/core" {
+    interface Commands<ReturnType> {
+        comments: {
+            /**
+             * Add a comment
+             */
+            addComment: (id: string) => ReturnType;
+            selectThread: (id: string | null) => ReturnType;
+            addPendingComment: () => ReturnType;
+        };
+    }
+}
+
 export { AnchoredThreads, FloatingComposer, FloatingThreads, HistoryVersionPreview, useLiveblocksExtension };

package/dist/index.d.ts

@@ -62,4 +62,17 @@ interface HistoryVersionPreviewProps extends ComponentPropsWithoutRef<"div"> {
  */
 declare const HistoryVersionPreview: React.ForwardRefExoticComponent<HistoryVersionPreviewProps & React.RefAttributes<HTMLDivElement>>;
 
+declare module "@tiptap/core" {
+    interface Commands<ReturnType> {
+        comments: {
+            /**
+             * Add a comment
+             */
+            addComment: (id: string) => ReturnType;
+            selectThread: (id: string | null) => ReturnType;
+            addPendingComment: () => ReturnType;
+        };
+    }
+}
+
 export { AnchoredThreads, FloatingComposer, FloatingThreads, HistoryVersionPreview, useLiveblocksExtension };

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../src/index.ts"],"sourcesContent":["import { detectDupes } from \"@liveblocks/core\";\n\nimport { PKG_FORMAT, PKG_NAME, PKG_VERSION } from \"./version\";\n\ndetectDupes(PKG_NAME, PKG_VERSION, PKG_FORMAT);\n\nexport { AnchoredThreads } from \"./comments/AnchoredThreads\";\nexport { FloatingComposer } from \"./comments/FloatingComposer\";\nexport { FloatingThreads } from \"./comments/FloatingThreads\";\nexport { useLiveblocksExtension } from \"./LiveblocksExtension\";\nexport { HistoryVersionPreview } from \"./version-history/HistoryVersionPreview\";\n"],"names":["detectDupes","PKG_NAME","PKG_VERSION","PKG_FORMAT"],"mappings":";;;;;;;;;;AAIAA,gBAAY,CAAAC,gBAAA,EAAUC,qBAAaC,kBAAU,CAAA;;;;;;;;"}
+{"version":3,"file":"index.js","sources":["../src/index.ts"],"sourcesContent":["import { detectDupes } from \"@liveblocks/core\";\n\nimport { PKG_FORMAT, PKG_NAME, PKG_VERSION } from \"./version\";\n\ndetectDupes(PKG_NAME, PKG_VERSION, PKG_FORMAT);\n\nexport { AnchoredThreads } from \"./comments/AnchoredThreads\";\nexport { FloatingComposer } from \"./comments/FloatingComposer\";\nexport { FloatingThreads } from \"./comments/FloatingThreads\";\nexport { useLiveblocksExtension } from \"./LiveblocksExtension\";\nexport { HistoryVersionPreview } from \"./version-history/HistoryVersionPreview\";\n\ndeclare module \"@tiptap/core\" {\n  interface Commands<ReturnType> {\n    comments: {\n      /**\n       * Add a comment\n       */\n      addComment: (id: string) => ReturnType;\n      selectThread: (id: string | null) => ReturnType;\n      addPendingComment: () => ReturnType;\n    };\n  }\n}\n"],"names":["detectDupes","PKG_NAME","PKG_VERSION","PKG_FORMAT"],"mappings":";;;;;;;;;;AAIAA,gBAAY,CAAAC,gBAAA,EAAUC,qBAAaC,kBAAU,CAAA;;;;;;;;"}

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../src/index.ts"],"sourcesContent":["import { detectDupes } from \"@liveblocks/core\";\n\nimport { PKG_FORMAT, PKG_NAME, PKG_VERSION } from \"./version\";\n\ndetectDupes(PKG_NAME, PKG_VERSION, PKG_FORMAT);\n\nexport { AnchoredThreads } from \"./comments/AnchoredThreads\";\nexport { FloatingComposer } from \"./comments/FloatingComposer\";\nexport { FloatingThreads } from \"./comments/FloatingThreads\";\nexport { useLiveblocksExtension } from \"./LiveblocksExtension\";\nexport { HistoryVersionPreview } from \"./version-history/HistoryVersionPreview\";\n"],"names":[],"mappings":";;;;;;;;AAIA,WAAY,CAAA,QAAA,EAAU,aAAa,UAAU,CAAA"}
+{"version":3,"file":"index.mjs","sources":["../src/index.ts"],"sourcesContent":["import { detectDupes } from \"@liveblocks/core\";\n\nimport { PKG_FORMAT, PKG_NAME, PKG_VERSION } from \"./version\";\n\ndetectDupes(PKG_NAME, PKG_VERSION, PKG_FORMAT);\n\nexport { AnchoredThreads } from \"./comments/AnchoredThreads\";\nexport { FloatingComposer } from \"./comments/FloatingComposer\";\nexport { FloatingThreads } from \"./comments/FloatingThreads\";\nexport { useLiveblocksExtension } from \"./LiveblocksExtension\";\nexport { HistoryVersionPreview } from \"./version-history/HistoryVersionPreview\";\n\ndeclare module \"@tiptap/core\" {\n  interface Commands<ReturnType> {\n    comments: {\n      /**\n       * Add a comment\n       */\n      addComment: (id: string) => ReturnType;\n      selectThread: (id: string | null) => ReturnType;\n      addPendingComment: () => ReturnType;\n    };\n  }\n}\n"],"names":[],"mappings":";;;;;;;;AAIA,WAAY,CAAA,QAAA,EAAU,aAAa,UAAU,CAAA"}

package/dist/mentions/MentionExtension.js

@@ -76,6 +76,7 @@ const MentionExtension = core$1.Node.create({
   inline: true,
   selectable: true,
   atom: true,
+  priority: 101,
   parseHTML() {
     return [
       {

package/dist/mentions/MentionExtension.js.map

@@ -1 +1 @@
-{"version":3,"file":"MentionExtension.js","sources":["../../src/mentions/MentionExtension.ts"],"sourcesContent":["import { createInboxNotificationId } from \"@liveblocks/core\";\nimport {\n  combineTransactionSteps,\n  getChangedRanges,\n  mergeAttributes,\n  Node,\n} from \"@tiptap/core\";\nimport type { Node as ProseMirrorNode } from \"@tiptap/pm/model\";\nimport { Slice } from \"@tiptap/pm/model\";\nimport { Plugin } from \"@tiptap/pm/state\";\nimport { ReactNodeViewRenderer, ReactRenderer } from \"@tiptap/react\";\nimport Suggestion from \"@tiptap/suggestion\";\nimport { ySyncPluginKey } from \"y-prosemirror\";\n\nimport {\n  LIVEBLOCKS_MENTION_KEY,\n  LIVEBLOCKS_MENTION_NOTIFIER_KEY,\n  LIVEBLOCKS_MENTION_PASTE_KEY,\n  LIVEBLOCKS_MENTION_TYPE,\n} from \"../types\";\nimport { getMentionsFromNode, mapFragment } from \"../utils\";\nimport { Mention } from \"./Mention\";\nimport type { MentionsListHandle, MentionsListProps } from \"./MentionsList\";\nimport { MentionsList } from \"./MentionsList\";\n\n/**\n *\n * Handles creating new notificationIds when notifications are pasted\n *\n * @returns Plugin\n */\nconst mentionPasteHandler = (): Plugin => {\n  return new Plugin({\n    key: LIVEBLOCKS_MENTION_PASTE_KEY,\n    props: {\n      transformPasted: (slice) => {\n        const getNewNotificationIds = (node: ProseMirrorNode) => {\n          // If this is a mention node, we need to get a new notificatio id\n          if (node.type.name === LIVEBLOCKS_MENTION_TYPE) {\n            return node.type.create(\n              { ...node.attrs, notificationId: createInboxNotificationId() },\n              node.content\n            );\n          }\n          return node.copy(node.content);\n        };\n        const fragment = mapFragment(slice.content, getNewNotificationIds);\n        return new Slice(fragment, slice.openStart, slice.openEnd);\n      },\n    },\n  });\n};\n\nexport type MentionExtensionOptions = {\n  onCreateMention: (userId: string, notificationId: string) => void;\n  onDeleteMention: (notificationId: string) => void;\n};\n/**\n *\n * The purpose of this plugin is to create inbox notifications when a mention is\n *\n * @returns Plugin (from @tiptap/core)\n */\nconst notifier = ({\n  onCreateMention,\n  onDeleteMention,\n}: MentionExtensionOptions): Plugin => {\n  return new Plugin({\n    key: LIVEBLOCKS_MENTION_NOTIFIER_KEY,\n    appendTransaction: (transactions, oldState, newState) => {\n      const docChanges =\n        transactions.some((transaction) => transaction.docChanged) &&\n        !oldState.doc.eq(newState.doc);\n      // don't run if there was no change\n      if (!docChanges) {\n        return;\n      }\n      // don't run if from collab\n      if (\n        transactions.some((transaction) => transaction.getMeta(ySyncPluginKey))\n      ) {\n        return;\n      }\n      const transform = combineTransactionSteps(oldState.doc, [\n        ...transactions,\n      ]);\n      const changes = getChangedRanges(transform);\n\n      changes.forEach(({ newRange, oldRange }) => {\n        const newMentions = getMentionsFromNode(newState.doc, newRange);\n        const oldMentions = getMentionsFromNode(oldState.doc, oldRange);\n        if (oldMentions.length || newMentions.length) {\n          // create new mentions\n          newMentions.forEach((mention) => {\n            if (!oldMentions.includes(mention)) {\n              onCreateMention(mention.userId, mention.notificationId);\n            }\n          });\n          // delete old mentions\n          oldMentions.forEach((mention) => {\n            if (!newMentions.includes(mention)) {\n              onDeleteMention(mention.notificationId);\n            }\n          });\n        }\n      });\n\n      return undefined;\n    },\n  });\n};\n\nexport const MentionExtension = Node.create<MentionExtensionOptions>({\n  name: LIVEBLOCKS_MENTION_TYPE,\n  group: \"inline\",\n  inline: true,\n  selectable: true,\n  atom: true,\n\n  parseHTML() {\n    return [\n      {\n        tag: \"liveblocks-mention\",\n      },\n    ];\n  },\n\n  renderHTML({ HTMLAttributes }) {\n    return [\"liveblocks-mention\", mergeAttributes(HTMLAttributes)];\n  },\n\n  addNodeView() {\n    return ReactNodeViewRenderer(Mention, {\n      contentDOMElementTag: \"span\",\n    });\n  },\n\n  addAttributes() {\n    return {\n      id: {\n        default: null,\n        parseHTML: (element) => element.getAttribute(\"data-id\"),\n        renderHTML: (attributes) => {\n          if (!attributes.id) {\n            return {};\n          }\n\n          return {\n            \"data-id\": attributes.id as string, // \"as\" typing because TipTap doesn't have a way to type attributes\n          };\n        },\n      },\n      notificationId: {\n        default: null,\n        parseHTML: (element) => element.getAttribute(\"data-notification-id\"),\n        renderHTML: (attributes) => {\n          if (!attributes.notificationId) {\n            return {};\n          }\n\n          return {\n            \"data-notification-id\": attributes.notificationId as string, // \"as\" typing because TipTap doesn't have a way to type attributes\n          };\n        },\n      },\n    };\n  },\n  addKeyboardShortcuts() {\n    return {\n      Backspace: () =>\n        this.editor.commands.command(({ tr, state }) => {\n          let isMention = false;\n          const { selection } = state;\n          const { empty, anchor } = selection;\n\n          if (!empty) {\n            return false;\n          }\n\n          state.doc.nodesBetween(anchor - 1, anchor, (node, pos) => {\n            if (node.type.name === this.name) {\n              isMention = true;\n              tr.insertText(\"\", pos, pos + node.nodeSize);\n            }\n          });\n\n          return isMention;\n        }),\n    };\n  },\n\n  addOptions() {\n    return {\n      onCreateMention: () => {},\n      onDeleteMention: () => {},\n    };\n  },\n\n  addProseMirrorPlugins() {\n    return [\n      Suggestion({\n        editor: this.editor,\n        char: \"@\",\n        pluginKey: LIVEBLOCKS_MENTION_KEY,\n        command: ({ editor, range, props }) => {\n          // increase range.to by one when the next node is of type \"text\"\n          // and starts with a space character\n          const nodeAfter = editor.view.state.selection.$to.nodeAfter;\n          const overrideSpace = nodeAfter?.text?.startsWith(\" \");\n\n          if (overrideSpace) {\n            range.to += 1;\n          }\n\n          editor\n            .chain()\n            .focus()\n            .insertContentAt(range, [\n              {\n                type: this.name,\n                attrs: props as Record<string, string>,\n              },\n              {\n                type: \"text\",\n                text: \" \",\n              },\n            ])\n            .run();\n\n          // get reference to `window` object from editor element, to support cross-frame JS usage\n          editor.view.dom.ownerDocument.defaultView\n            ?.getSelection()\n            ?.collapseToEnd();\n        },\n        allow: ({ state, range }) => {\n          const $from = state.doc.resolve(range.from);\n          const type = state.schema.nodes[this.name];\n          const allow = !!$from.parent.type.contentMatch.matchType(type);\n\n          return allow;\n        },\n        allowSpaces: true,\n        items: () => [], // we'll let the mentions list component do this\n        render: () => {\n          let component: ReactRenderer<MentionsListHandle, MentionsListProps>;\n          return {\n            onStart: (props) => {\n              component = new ReactRenderer<\n                MentionsListHandle,\n                MentionsListProps\n              >(MentionsList, {\n                props,\n                editor: props.editor,\n              });\n\n              if (!props.clientRect) {\n                return;\n              }\n\n              document.body.appendChild(component.element);\n            },\n\n            onUpdate(props) {\n              component.updateProps(props);\n            },\n\n            onKeyDown(props) {\n              if (props.event.key === \"Escape\") {\n                component.updateProps({\n                  ...props,\n                  hide: true,\n                });\n                return true;\n              }\n              return component.ref?.onKeyDown(props) ?? false;\n            },\n\n            onExit() {\n              document.body.removeChild(component.element);\n              component.destroy();\n            },\n          };\n        },\n      }),\n      notifier(this.options),\n      mentionPasteHandler(),\n    ];\n  },\n});\n"],"names":["Plugin","LIVEBLOCKS_MENTION_PASTE_KEY","LIVEBLOCKS_MENTION_TYPE","createInboxNotificationId","mapFragment","Slice","LIVEBLOCKS_MENTION_NOTIFIER_KEY","ySyncPluginKey","combineTransactionSteps","getChangedRanges","getMentionsFromNode","Node","mergeAttributes","ReactNodeViewRenderer","Mention","LIVEBLOCKS_MENTION_KEY","ReactRenderer","MentionsList"],"mappings":"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"}
+{"version":3,"file":"MentionExtension.js","sources":["../../src/mentions/MentionExtension.ts"],"sourcesContent":["import { createInboxNotificationId } from \"@liveblocks/core\";\nimport {\n  combineTransactionSteps,\n  getChangedRanges,\n  mergeAttributes,\n  Node,\n} from \"@tiptap/core\";\nimport type { Node as ProseMirrorNode } from \"@tiptap/pm/model\";\nimport { Slice } from \"@tiptap/pm/model\";\nimport { Plugin } from \"@tiptap/pm/state\";\nimport { ReactNodeViewRenderer, ReactRenderer } from \"@tiptap/react\";\nimport Suggestion from \"@tiptap/suggestion\";\nimport { ySyncPluginKey } from \"y-prosemirror\";\n\nimport {\n  LIVEBLOCKS_MENTION_KEY,\n  LIVEBLOCKS_MENTION_NOTIFIER_KEY,\n  LIVEBLOCKS_MENTION_PASTE_KEY,\n  LIVEBLOCKS_MENTION_TYPE,\n} from \"../types\";\nimport { getMentionsFromNode, mapFragment } from \"../utils\";\nimport { Mention } from \"./Mention\";\nimport type { MentionsListHandle, MentionsListProps } from \"./MentionsList\";\nimport { MentionsList } from \"./MentionsList\";\n\n/**\n *\n * Handles creating new notificationIds when notifications are pasted\n *\n * @returns Plugin\n */\nconst mentionPasteHandler = (): Plugin => {\n  return new Plugin({\n    key: LIVEBLOCKS_MENTION_PASTE_KEY,\n    props: {\n      transformPasted: (slice) => {\n        const getNewNotificationIds = (node: ProseMirrorNode) => {\n          // If this is a mention node, we need to get a new notificatio id\n          if (node.type.name === LIVEBLOCKS_MENTION_TYPE) {\n            return node.type.create(\n              { ...node.attrs, notificationId: createInboxNotificationId() },\n              node.content\n            );\n          }\n          return node.copy(node.content);\n        };\n        const fragment = mapFragment(slice.content, getNewNotificationIds);\n        return new Slice(fragment, slice.openStart, slice.openEnd);\n      },\n    },\n  });\n};\n\nexport type MentionExtensionOptions = {\n  onCreateMention: (userId: string, notificationId: string) => void;\n  onDeleteMention: (notificationId: string) => void;\n};\n/**\n *\n * The purpose of this plugin is to create inbox notifications when a mention is\n *\n * @returns Plugin (from @tiptap/core)\n */\nconst notifier = ({\n  onCreateMention,\n  onDeleteMention,\n}: MentionExtensionOptions): Plugin => {\n  return new Plugin({\n    key: LIVEBLOCKS_MENTION_NOTIFIER_KEY,\n    appendTransaction: (transactions, oldState, newState) => {\n      const docChanges =\n        transactions.some((transaction) => transaction.docChanged) &&\n        !oldState.doc.eq(newState.doc);\n      // don't run if there was no change\n      if (!docChanges) {\n        return;\n      }\n      // don't run if from collab\n      if (\n        transactions.some((transaction) => transaction.getMeta(ySyncPluginKey))\n      ) {\n        return;\n      }\n      const transform = combineTransactionSteps(oldState.doc, [\n        ...transactions,\n      ]);\n      const changes = getChangedRanges(transform);\n\n      changes.forEach(({ newRange, oldRange }) => {\n        const newMentions = getMentionsFromNode(newState.doc, newRange);\n        const oldMentions = getMentionsFromNode(oldState.doc, oldRange);\n        if (oldMentions.length || newMentions.length) {\n          // create new mentions\n          newMentions.forEach((mention) => {\n            if (!oldMentions.includes(mention)) {\n              onCreateMention(mention.userId, mention.notificationId);\n            }\n          });\n          // delete old mentions\n          oldMentions.forEach((mention) => {\n            if (!newMentions.includes(mention)) {\n              onDeleteMention(mention.notificationId);\n            }\n          });\n        }\n      });\n\n      return undefined;\n    },\n  });\n};\n\nexport const MentionExtension = Node.create<MentionExtensionOptions>({\n  name: LIVEBLOCKS_MENTION_TYPE,\n  group: \"inline\",\n  inline: true,\n  selectable: true,\n  atom: true,\n\n  priority: 101,\n  parseHTML() {\n    return [\n      {\n        tag: \"liveblocks-mention\",\n      },\n    ];\n  },\n\n  renderHTML({ HTMLAttributes }) {\n    return [\"liveblocks-mention\", mergeAttributes(HTMLAttributes)];\n  },\n\n  addNodeView() {\n    return ReactNodeViewRenderer(Mention, {\n      contentDOMElementTag: \"span\",\n    });\n  },\n\n  addAttributes() {\n    return {\n      id: {\n        default: null,\n        parseHTML: (element) => element.getAttribute(\"data-id\"),\n        renderHTML: (attributes) => {\n          if (!attributes.id) {\n            return {};\n          }\n\n          return {\n            \"data-id\": attributes.id as string, // \"as\" typing because TipTap doesn't have a way to type attributes\n          };\n        },\n      },\n      notificationId: {\n        default: null,\n        parseHTML: (element) => element.getAttribute(\"data-notification-id\"),\n        renderHTML: (attributes) => {\n          if (!attributes.notificationId) {\n            return {};\n          }\n\n          return {\n            \"data-notification-id\": attributes.notificationId as string, // \"as\" typing because TipTap doesn't have a way to type attributes\n          };\n        },\n      },\n    };\n  },\n  addKeyboardShortcuts() {\n    return {\n      Backspace: () =>\n        this.editor.commands.command(({ tr, state }) => {\n          let isMention = false;\n          const { selection } = state;\n          const { empty, anchor } = selection;\n\n          if (!empty) {\n            return false;\n          }\n\n          state.doc.nodesBetween(anchor - 1, anchor, (node, pos) => {\n            if (node.type.name === this.name) {\n              isMention = true;\n              tr.insertText(\"\", pos, pos + node.nodeSize);\n            }\n          });\n\n          return isMention;\n        }),\n    };\n  },\n\n  addOptions() {\n    return {\n      onCreateMention: () => {},\n      onDeleteMention: () => {},\n    };\n  },\n\n  addProseMirrorPlugins() {\n    return [\n      Suggestion({\n        editor: this.editor,\n        char: \"@\",\n        pluginKey: LIVEBLOCKS_MENTION_KEY,\n        command: ({ editor, range, props }) => {\n          // increase range.to by one when the next node is of type \"text\"\n          // and starts with a space character\n          const nodeAfter = editor.view.state.selection.$to.nodeAfter;\n          const overrideSpace = nodeAfter?.text?.startsWith(\" \");\n\n          if (overrideSpace) {\n            range.to += 1;\n          }\n\n          editor\n            .chain()\n            .focus()\n            .insertContentAt(range, [\n              {\n                type: this.name,\n                attrs: props as Record<string, string>,\n              },\n              {\n                type: \"text\",\n                text: \" \",\n              },\n            ])\n            .run();\n\n          // get reference to `window` object from editor element, to support cross-frame JS usage\n          editor.view.dom.ownerDocument.defaultView\n            ?.getSelection()\n            ?.collapseToEnd();\n        },\n        allow: ({ state, range }) => {\n          const $from = state.doc.resolve(range.from);\n          const type = state.schema.nodes[this.name];\n          const allow = !!$from.parent.type.contentMatch.matchType(type);\n\n          return allow;\n        },\n        allowSpaces: true,\n        items: () => [], // we'll let the mentions list component do this\n        render: () => {\n          let component: ReactRenderer<MentionsListHandle, MentionsListProps>;\n          return {\n            onStart: (props) => {\n              component = new ReactRenderer<\n                MentionsListHandle,\n                MentionsListProps\n              >(MentionsList, {\n                props,\n                editor: props.editor,\n              });\n\n              if (!props.clientRect) {\n                return;\n              }\n\n              document.body.appendChild(component.element);\n            },\n\n            onUpdate(props) {\n              component.updateProps(props);\n            },\n\n            onKeyDown(props) {\n              if (props.event.key === \"Escape\") {\n                component.updateProps({\n                  ...props,\n                  hide: true,\n                });\n                return true;\n              }\n              return component.ref?.onKeyDown(props) ?? false;\n            },\n\n            onExit() {\n              document.body.removeChild(component.element);\n              component.destroy();\n            },\n          };\n        },\n      }),\n      notifier(this.options),\n      mentionPasteHandler(),\n    ];\n  },\n});\n"],"names":["Plugin","LIVEBLOCKS_MENTION_PASTE_KEY","LIVEBLOCKS_MENTION_TYPE","createInboxNotificationId","mapFragment","Slice","LIVEBLOCKS_MENTION_NOTIFIER_KEY","ySyncPluginKey","combineTransactionSteps","getChangedRanges","getMentionsFromNode","Node","mergeAttributes","ReactNodeViewRenderer","Mention","LIVEBLOCKS_MENTION_KEY","ReactRenderer","MentionsList"],"mappings":"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"}

package/dist/mentions/MentionExtension.mjs

@@ -74,6 +74,7 @@ const MentionExtension = Node.create({
   inline: true,
   selectable: true,
   atom: true,
+  priority: 101,
   parseHTML() {
     return [
       {

package/dist/mentions/MentionExtension.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"MentionExtension.mjs","sources":["../../src/mentions/MentionExtension.ts"],"sourcesContent":["import { createInboxNotificationId } from \"@liveblocks/core\";\nimport {\n  combineTransactionSteps,\n  getChangedRanges,\n  mergeAttributes,\n  Node,\n} from \"@tiptap/core\";\nimport type { Node as ProseMirrorNode } from \"@tiptap/pm/model\";\nimport { Slice } from \"@tiptap/pm/model\";\nimport { Plugin } from \"@tiptap/pm/state\";\nimport { ReactNodeViewRenderer, ReactRenderer } from \"@tiptap/react\";\nimport Suggestion from \"@tiptap/suggestion\";\nimport { ySyncPluginKey } from \"y-prosemirror\";\n\nimport {\n  LIVEBLOCKS_MENTION_KEY,\n  LIVEBLOCKS_MENTION_NOTIFIER_KEY,\n  LIVEBLOCKS_MENTION_PASTE_KEY,\n  LIVEBLOCKS_MENTION_TYPE,\n} from \"../types\";\nimport { getMentionsFromNode, mapFragment } from \"../utils\";\nimport { Mention } from \"./Mention\";\nimport type { MentionsListHandle, MentionsListProps } from \"./MentionsList\";\nimport { MentionsList } from \"./MentionsList\";\n\n/**\n *\n * Handles creating new notificationIds when notifications are pasted\n *\n * @returns Plugin\n */\nconst mentionPasteHandler = (): Plugin => {\n  return new Plugin({\n    key: LIVEBLOCKS_MENTION_PASTE_KEY,\n    props: {\n      transformPasted: (slice) => {\n        const getNewNotificationIds = (node: ProseMirrorNode) => {\n          // If this is a mention node, we need to get a new notificatio id\n          if (node.type.name === LIVEBLOCKS_MENTION_TYPE) {\n            return node.type.create(\n              { ...node.attrs, notificationId: createInboxNotificationId() },\n              node.content\n            );\n          }\n          return node.copy(node.content);\n        };\n        const fragment = mapFragment(slice.content, getNewNotificationIds);\n        return new Slice(fragment, slice.openStart, slice.openEnd);\n      },\n    },\n  });\n};\n\nexport type MentionExtensionOptions = {\n  onCreateMention: (userId: string, notificationId: string) => void;\n  onDeleteMention: (notificationId: string) => void;\n};\n/**\n *\n * The purpose of this plugin is to create inbox notifications when a mention is\n *\n * @returns Plugin (from @tiptap/core)\n */\nconst notifier = ({\n  onCreateMention,\n  onDeleteMention,\n}: MentionExtensionOptions): Plugin => {\n  return new Plugin({\n    key: LIVEBLOCKS_MENTION_NOTIFIER_KEY,\n    appendTransaction: (transactions, oldState, newState) => {\n      const docChanges =\n        transactions.some((transaction) => transaction.docChanged) &&\n        !oldState.doc.eq(newState.doc);\n      // don't run if there was no change\n      if (!docChanges) {\n        return;\n      }\n      // don't run if from collab\n      if (\n        transactions.some((transaction) => transaction.getMeta(ySyncPluginKey))\n      ) {\n        return;\n      }\n      const transform = combineTransactionSteps(oldState.doc, [\n        ...transactions,\n      ]);\n      const changes = getChangedRanges(transform);\n\n      changes.forEach(({ newRange, oldRange }) => {\n        const newMentions = getMentionsFromNode(newState.doc, newRange);\n        const oldMentions = getMentionsFromNode(oldState.doc, oldRange);\n        if (oldMentions.length || newMentions.length) {\n          // create new mentions\n          newMentions.forEach((mention) => {\n            if (!oldMentions.includes(mention)) {\n              onCreateMention(mention.userId, mention.notificationId);\n            }\n          });\n          // delete old mentions\n          oldMentions.forEach((mention) => {\n            if (!newMentions.includes(mention)) {\n              onDeleteMention(mention.notificationId);\n            }\n          });\n        }\n      });\n\n      return undefined;\n    },\n  });\n};\n\nexport const MentionExtension = Node.create<MentionExtensionOptions>({\n  name: LIVEBLOCKS_MENTION_TYPE,\n  group: \"inline\",\n  inline: true,\n  selectable: true,\n  atom: true,\n\n  parseHTML() {\n    return [\n      {\n        tag: \"liveblocks-mention\",\n      },\n    ];\n  },\n\n  renderHTML({ HTMLAttributes }) {\n    return [\"liveblocks-mention\", mergeAttributes(HTMLAttributes)];\n  },\n\n  addNodeView() {\n    return ReactNodeViewRenderer(Mention, {\n      contentDOMElementTag: \"span\",\n    });\n  },\n\n  addAttributes() {\n    return {\n      id: {\n        default: null,\n        parseHTML: (element) => element.getAttribute(\"data-id\"),\n        renderHTML: (attributes) => {\n          if (!attributes.id) {\n            return {};\n          }\n\n          return {\n            \"data-id\": attributes.id as string, // \"as\" typing because TipTap doesn't have a way to type attributes\n          };\n        },\n      },\n      notificationId: {\n        default: null,\n        parseHTML: (element) => element.getAttribute(\"data-notification-id\"),\n        renderHTML: (attributes) => {\n          if (!attributes.notificationId) {\n            return {};\n          }\n\n          return {\n            \"data-notification-id\": attributes.notificationId as string, // \"as\" typing because TipTap doesn't have a way to type attributes\n          };\n        },\n      },\n    };\n  },\n  addKeyboardShortcuts() {\n    return {\n      Backspace: () =>\n        this.editor.commands.command(({ tr, state }) => {\n          let isMention = false;\n          const { selection } = state;\n          const { empty, anchor } = selection;\n\n          if (!empty) {\n            return false;\n          }\n\n          state.doc.nodesBetween(anchor - 1, anchor, (node, pos) => {\n            if (node.type.name === this.name) {\n              isMention = true;\n              tr.insertText(\"\", pos, pos + node.nodeSize);\n            }\n          });\n\n          return isMention;\n        }),\n    };\n  },\n\n  addOptions() {\n    return {\n      onCreateMention: () => {},\n      onDeleteMention: () => {},\n    };\n  },\n\n  addProseMirrorPlugins() {\n    return [\n      Suggestion({\n        editor: this.editor,\n        char: \"@\",\n        pluginKey: LIVEBLOCKS_MENTION_KEY,\n        command: ({ editor, range, props }) => {\n          // increase range.to by one when the next node is of type \"text\"\n          // and starts with a space character\n          const nodeAfter = editor.view.state.selection.$to.nodeAfter;\n          const overrideSpace = nodeAfter?.text?.startsWith(\" \");\n\n          if (overrideSpace) {\n            range.to += 1;\n          }\n\n          editor\n            .chain()\n            .focus()\n            .insertContentAt(range, [\n              {\n                type: this.name,\n                attrs: props as Record<string, string>,\n              },\n              {\n                type: \"text\",\n                text: \" \",\n              },\n            ])\n            .run();\n\n          // get reference to `window` object from editor element, to support cross-frame JS usage\n          editor.view.dom.ownerDocument.defaultView\n            ?.getSelection()\n            ?.collapseToEnd();\n        },\n        allow: ({ state, range }) => {\n          const $from = state.doc.resolve(range.from);\n          const type = state.schema.nodes[this.name];\n          const allow = !!$from.parent.type.contentMatch.matchType(type);\n\n          return allow;\n        },\n        allowSpaces: true,\n        items: () => [], // we'll let the mentions list component do this\n        render: () => {\n          let component: ReactRenderer<MentionsListHandle, MentionsListProps>;\n          return {\n            onStart: (props) => {\n              component = new ReactRenderer<\n                MentionsListHandle,\n                MentionsListProps\n              >(MentionsList, {\n                props,\n                editor: props.editor,\n              });\n\n              if (!props.clientRect) {\n                return;\n              }\n\n              document.body.appendChild(component.element);\n            },\n\n            onUpdate(props) {\n              component.updateProps(props);\n            },\n\n            onKeyDown(props) {\n              if (props.event.key === \"Escape\") {\n                component.updateProps({\n                  ...props,\n                  hide: true,\n                });\n                return true;\n              }\n              return component.ref?.onKeyDown(props) ?? false;\n            },\n\n            onExit() {\n              document.body.removeChild(component.element);\n              component.destroy();\n            },\n          };\n        },\n      }),\n      notifier(this.options),\n      mentionPasteHandler(),\n    ];\n  },\n});\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"MentionExtension.mjs","sources":["../../src/mentions/MentionExtension.ts"],"sourcesContent":["import { createInboxNotificationId } from \"@liveblocks/core\";\nimport {\n  combineTransactionSteps,\n  getChangedRanges,\n  mergeAttributes,\n  Node,\n} from \"@tiptap/core\";\nimport type { Node as ProseMirrorNode } from \"@tiptap/pm/model\";\nimport { Slice } from \"@tiptap/pm/model\";\nimport { Plugin } from \"@tiptap/pm/state\";\nimport { ReactNodeViewRenderer, ReactRenderer } from \"@tiptap/react\";\nimport Suggestion from \"@tiptap/suggestion\";\nimport { ySyncPluginKey } from \"y-prosemirror\";\n\nimport {\n  LIVEBLOCKS_MENTION_KEY,\n  LIVEBLOCKS_MENTION_NOTIFIER_KEY,\n  LIVEBLOCKS_MENTION_PASTE_KEY,\n  LIVEBLOCKS_MENTION_TYPE,\n} from \"../types\";\nimport { getMentionsFromNode, mapFragment } from \"../utils\";\nimport { Mention } from \"./Mention\";\nimport type { MentionsListHandle, MentionsListProps } from \"./MentionsList\";\nimport { MentionsList } from \"./MentionsList\";\n\n/**\n *\n * Handles creating new notificationIds when notifications are pasted\n *\n * @returns Plugin\n */\nconst mentionPasteHandler = (): Plugin => {\n  return new Plugin({\n    key: LIVEBLOCKS_MENTION_PASTE_KEY,\n    props: {\n      transformPasted: (slice) => {\n        const getNewNotificationIds = (node: ProseMirrorNode) => {\n          // If this is a mention node, we need to get a new notificatio id\n          if (node.type.name === LIVEBLOCKS_MENTION_TYPE) {\n            return node.type.create(\n              { ...node.attrs, notificationId: createInboxNotificationId() },\n              node.content\n            );\n          }\n          return node.copy(node.content);\n        };\n        const fragment = mapFragment(slice.content, getNewNotificationIds);\n        return new Slice(fragment, slice.openStart, slice.openEnd);\n      },\n    },\n  });\n};\n\nexport type MentionExtensionOptions = {\n  onCreateMention: (userId: string, notificationId: string) => void;\n  onDeleteMention: (notificationId: string) => void;\n};\n/**\n *\n * The purpose of this plugin is to create inbox notifications when a mention is\n *\n * @returns Plugin (from @tiptap/core)\n */\nconst notifier = ({\n  onCreateMention,\n  onDeleteMention,\n}: MentionExtensionOptions): Plugin => {\n  return new Plugin({\n    key: LIVEBLOCKS_MENTION_NOTIFIER_KEY,\n    appendTransaction: (transactions, oldState, newState) => {\n      const docChanges =\n        transactions.some((transaction) => transaction.docChanged) &&\n        !oldState.doc.eq(newState.doc);\n      // don't run if there was no change\n      if (!docChanges) {\n        return;\n      }\n      // don't run if from collab\n      if (\n        transactions.some((transaction) => transaction.getMeta(ySyncPluginKey))\n      ) {\n        return;\n      }\n      const transform = combineTransactionSteps(oldState.doc, [\n        ...transactions,\n      ]);\n      const changes = getChangedRanges(transform);\n\n      changes.forEach(({ newRange, oldRange }) => {\n        const newMentions = getMentionsFromNode(newState.doc, newRange);\n        const oldMentions = getMentionsFromNode(oldState.doc, oldRange);\n        if (oldMentions.length || newMentions.length) {\n          // create new mentions\n          newMentions.forEach((mention) => {\n            if (!oldMentions.includes(mention)) {\n              onCreateMention(mention.userId, mention.notificationId);\n            }\n          });\n          // delete old mentions\n          oldMentions.forEach((mention) => {\n            if (!newMentions.includes(mention)) {\n              onDeleteMention(mention.notificationId);\n            }\n          });\n        }\n      });\n\n      return undefined;\n    },\n  });\n};\n\nexport const MentionExtension = Node.create<MentionExtensionOptions>({\n  name: LIVEBLOCKS_MENTION_TYPE,\n  group: \"inline\",\n  inline: true,\n  selectable: true,\n  atom: true,\n\n  priority: 101,\n  parseHTML() {\n    return [\n      {\n        tag: \"liveblocks-mention\",\n      },\n    ];\n  },\n\n  renderHTML({ HTMLAttributes }) {\n    return [\"liveblocks-mention\", mergeAttributes(HTMLAttributes)];\n  },\n\n  addNodeView() {\n    return ReactNodeViewRenderer(Mention, {\n      contentDOMElementTag: \"span\",\n    });\n  },\n\n  addAttributes() {\n    return {\n      id: {\n        default: null,\n        parseHTML: (element) => element.getAttribute(\"data-id\"),\n        renderHTML: (attributes) => {\n          if (!attributes.id) {\n            return {};\n          }\n\n          return {\n            \"data-id\": attributes.id as string, // \"as\" typing because TipTap doesn't have a way to type attributes\n          };\n        },\n      },\n      notificationId: {\n        default: null,\n        parseHTML: (element) => element.getAttribute(\"data-notification-id\"),\n        renderHTML: (attributes) => {\n          if (!attributes.notificationId) {\n            return {};\n          }\n\n          return {\n            \"data-notification-id\": attributes.notificationId as string, // \"as\" typing because TipTap doesn't have a way to type attributes\n          };\n        },\n      },\n    };\n  },\n  addKeyboardShortcuts() {\n    return {\n      Backspace: () =>\n        this.editor.commands.command(({ tr, state }) => {\n          let isMention = false;\n          const { selection } = state;\n          const { empty, anchor } = selection;\n\n          if (!empty) {\n            return false;\n          }\n\n          state.doc.nodesBetween(anchor - 1, anchor, (node, pos) => {\n            if (node.type.name === this.name) {\n              isMention = true;\n              tr.insertText(\"\", pos, pos + node.nodeSize);\n            }\n          });\n\n          return isMention;\n        }),\n    };\n  },\n\n  addOptions() {\n    return {\n      onCreateMention: () => {},\n      onDeleteMention: () => {},\n    };\n  },\n\n  addProseMirrorPlugins() {\n    return [\n      Suggestion({\n        editor: this.editor,\n        char: \"@\",\n        pluginKey: LIVEBLOCKS_MENTION_KEY,\n        command: ({ editor, range, props }) => {\n          // increase range.to by one when the next node is of type \"text\"\n          // and starts with a space character\n          const nodeAfter = editor.view.state.selection.$to.nodeAfter;\n          const overrideSpace = nodeAfter?.text?.startsWith(\" \");\n\n          if (overrideSpace) {\n            range.to += 1;\n          }\n\n          editor\n            .chain()\n            .focus()\n            .insertContentAt(range, [\n              {\n                type: this.name,\n                attrs: props as Record<string, string>,\n              },\n              {\n                type: \"text\",\n                text: \" \",\n              },\n            ])\n            .run();\n\n          // get reference to `window` object from editor element, to support cross-frame JS usage\n          editor.view.dom.ownerDocument.defaultView\n            ?.getSelection()\n            ?.collapseToEnd();\n        },\n        allow: ({ state, range }) => {\n          const $from = state.doc.resolve(range.from);\n          const type = state.schema.nodes[this.name];\n          const allow = !!$from.parent.type.contentMatch.matchType(type);\n\n          return allow;\n        },\n        allowSpaces: true,\n        items: () => [], // we'll let the mentions list component do this\n        render: () => {\n          let component: ReactRenderer<MentionsListHandle, MentionsListProps>;\n          return {\n            onStart: (props) => {\n              component = new ReactRenderer<\n                MentionsListHandle,\n                MentionsListProps\n              >(MentionsList, {\n                props,\n                editor: props.editor,\n              });\n\n              if (!props.clientRect) {\n                return;\n              }\n\n              document.body.appendChild(component.element);\n            },\n\n            onUpdate(props) {\n              component.updateProps(props);\n            },\n\n            onKeyDown(props) {\n              if (props.event.key === \"Escape\") {\n                component.updateProps({\n                  ...props,\n                  hide: true,\n                });\n                return true;\n              }\n              return component.ref?.onKeyDown(props) ?? false;\n            },\n\n            onExit() {\n              document.body.removeChild(component.element);\n              component.destroy();\n            },\n          };\n        },\n      }),\n      notifier(this.options),\n      mentionPasteHandler(),\n    ];\n  },\n});\n"],"names":[],"mappings":";;;;;;;;;;;;AA+BA,MAAM,sBAAsB,MAAc;AACxC,EAAA,OAAO,IAAI,MAAO,CAAA;AAAA,IAChB,GAAK,EAAA,4BAAA;AAAA,IACL,KAAO,EAAA;AAAA,MACL,eAAA,EAAiB,CAAC,KAAU,KAAA;AAC1B,QAAM,MAAA,qBAAA,GAAwB,CAAC,IAA0B,KAAA;AAEvD,UAAI,IAAA,IAAA,CAAK,IAAK,CAAA,IAAA,KAAS,uBAAyB,EAAA;AAC9C,YAAA,OAAO,KAAK,IAAK,CAAA,MAAA;AAAA,cACf,EAAE,GAAG,IAAA,CAAK,KAAO,EAAA,cAAA,EAAgB,2BAA4B,EAAA;AAAA,cAC7D,IAAK,CAAA,OAAA;AAAA,aACP,CAAA;AAAA,WACF;AACA,UAAO,OAAA,IAAA,CAAK,IAAK,CAAA,IAAA,CAAK,OAAO,CAAA,CAAA;AAAA,SAC/B,CAAA;AACA,QAAA,MAAM,QAAW,GAAA,WAAA,CAAY,KAAM,CAAA,OAAA,EAAS,qBAAqB,CAAA,CAAA;AACjE,QAAA,OAAO,IAAI,KAAM,CAAA,QAAA,EAAU,KAAM,CAAA,SAAA,EAAW,MAAM,OAAO,CAAA,CAAA;AAAA,OAC3D;AAAA,KACF;AAAA,GACD,CAAA,CAAA;AACH,CAAA,CAAA;AAYA,MAAM,WAAW,CAAC;AAAA,EAChB,eAAA;AAAA,EACA,eAAA;AACF,CAAuC,KAAA;AACrC,EAAA,OAAO,IAAI,MAAO,CAAA;AAAA,IAChB,GAAK,EAAA,+BAAA;AAAA,IACL,iBAAmB,EAAA,CAAC,YAAc,EAAA,QAAA,EAAU,QAAa,KAAA;AACvD,MAAA,MAAM,UACJ,GAAA,YAAA,CAAa,IAAK,CAAA,CAAC,WAAgB,KAAA,WAAA,CAAY,UAAU,CAAA,IACzD,CAAC,QAAA,CAAS,GAAI,CAAA,EAAA,CAAG,SAAS,GAAG,CAAA,CAAA;AAE/B,MAAA,IAAI,CAAC,UAAY,EAAA;AACf,QAAA,OAAA;AAAA,OACF;AAEA,MACE,IAAA,YAAA,CAAa,KAAK,CAAC,WAAA,KAAgB,YAAY,OAAQ,CAAA,cAAc,CAAC,CACtE,EAAA;AACA,QAAA,OAAA;AAAA,OACF;AACA,MAAM,MAAA,SAAA,GAAY,uBAAwB,CAAA,QAAA,CAAS,GAAK,EAAA;AAAA,QACtD,GAAG,YAAA;AAAA,OACJ,CAAA,CAAA;AACD,MAAM,MAAA,OAAA,GAAU,iBAAiB,SAAS,CAAA,CAAA;AAE1C,MAAA,OAAA,CAAQ,OAAQ,CAAA,CAAC,EAAE,QAAA,EAAU,UAAe,KAAA;AAC1C,QAAA,MAAM,WAAc,GAAA,mBAAA,CAAoB,QAAS,CAAA,GAAA,EAAK,QAAQ,CAAA,CAAA;AAC9D,QAAA,MAAM,WAAc,GAAA,mBAAA,CAAoB,QAAS,CAAA,GAAA,EAAK,QAAQ,CAAA,CAAA;AAC9D,QAAI,IAAA,WAAA,CAAY,MAAU,IAAA,WAAA,CAAY,MAAQ,EAAA;AAE5C,UAAY,WAAA,CAAA,OAAA,CAAQ,CAAC,OAAY,KAAA;AAC/B,YAAA,IAAI,CAAC,WAAA,CAAY,QAAS,CAAA,OAAO,CAAG,EAAA;AAClC,cAAgB,eAAA,CAAA,OAAA,CAAQ,MAAQ,EAAA,OAAA,CAAQ,cAAc,CAAA,CAAA;AAAA,aACxD;AAAA,WACD,CAAA,CAAA;AAED,UAAY,WAAA,CAAA,OAAA,CAAQ,CAAC,OAAY,KAAA;AAC/B,YAAA,IAAI,CAAC,WAAA,CAAY,QAAS,CAAA,OAAO,CAAG,EAAA;AAClC,cAAA,eAAA,CAAgB,QAAQ,cAAc,CAAA,CAAA;AAAA,aACxC;AAAA,WACD,CAAA,CAAA;AAAA,SACH;AAAA,OACD,CAAA,CAAA;AAED,MAAO,OAAA,KAAA,CAAA,CAAA;AAAA,KACT;AAAA,GACD,CAAA,CAAA;AACH,CAAA,CAAA;AAEa,MAAA,gBAAA,GAAmB,KAAK,MAAgC,CAAA;AAAA,EACnE,IAAM,EAAA,uBAAA;AAAA,EACN,KAAO,EAAA,QAAA;AAAA,EACP,MAAQ,EAAA,IAAA;AAAA,EACR,UAAY,EAAA,IAAA;AAAA,EACZ,IAAM,EAAA,IAAA;AAAA,EAEN,QAAU,EAAA,GAAA;AAAA,EACV,SAAY,GAAA;AACV,IAAO,OAAA;AAAA,MACL;AAAA,QACE,GAAK,EAAA,oBAAA;AAAA,OACP;AAAA,KACF,CAAA;AAAA,GACF;AAAA,EAEA,UAAA,CAAW,EAAE,cAAA,EAAkB,EAAA;AAC7B,IAAA,OAAO,CAAC,oBAAA,EAAsB,eAAgB,CAAA,cAAc,CAAC,CAAA,CAAA;AAAA,GAC/D;AAAA,EAEA,WAAc,GAAA;AACZ,IAAA,OAAO,sBAAsB,OAAS,EAAA;AAAA,MACpC,oBAAsB,EAAA,MAAA;AAAA,KACvB,CAAA,CAAA;AAAA,GACH;AAAA,EAEA,aAAgB,GAAA;AACd,IAAO,OAAA;AAAA,MACL,EAAI,EAAA;AAAA,QACF,OAAS,EAAA,IAAA;AAAA,QACT,SAAW,EAAA,CAAC,OAAY,KAAA,OAAA,CAAQ,aAAa,SAAS,CAAA;AAAA,QACtD,UAAA,EAAY,CAAC,UAAe,KAAA;AAC1B,UAAI,IAAA,CAAC,WAAW,EAAI,EAAA;AAClB,YAAA,OAAO,EAAC,CAAA;AAAA,WACV;AAEA,UAAO,OAAA;AAAA,YACL,WAAW,UAAW,CAAA,EAAA;AAAA,WACxB,CAAA;AAAA,SACF;AAAA,OACF;AAAA,MACA,cAAgB,EAAA;AAAA,QACd,OAAS,EAAA,IAAA;AAAA,QACT,SAAW,EAAA,CAAC,OAAY,KAAA,OAAA,CAAQ,aAAa,sBAAsB,CAAA;AAAA,QACnE,UAAA,EAAY,CAAC,UAAe,KAAA;AAC1B,UAAI,IAAA,CAAC,WAAW,cAAgB,EAAA;AAC9B,YAAA,OAAO,EAAC,CAAA;AAAA,WACV;AAEA,UAAO,OAAA;AAAA,YACL,wBAAwB,UAAW,CAAA,cAAA;AAAA,WACrC,CAAA;AAAA,SACF;AAAA,OACF;AAAA,KACF,CAAA;AAAA,GACF;AAAA,EACA,oBAAuB,GAAA;AACrB,IAAO,OAAA;AAAA,MACL,SAAA,EAAW,MACT,IAAA,CAAK,MAAO,CAAA,QAAA,CAAS,QAAQ,CAAC,EAAE,EAAI,EAAA,KAAA,EAAY,KAAA;AAC9C,QAAA,IAAI,SAAY,GAAA,KAAA,CAAA;AAChB,QAAM,MAAA,EAAE,WAAc,GAAA,KAAA,CAAA;AACtB,QAAM,MAAA,EAAE,KAAO,EAAA,MAAA,EAAW,GAAA,SAAA,CAAA;AAE1B,QAAA,IAAI,CAAC,KAAO,EAAA;AACV,UAAO,OAAA,KAAA,CAAA;AAAA,SACT;AAEA,QAAA,KAAA,CAAM,IAAI,YAAa,CAAA,MAAA,GAAS,GAAG,MAAQ,EAAA,CAAC,MAAM,GAAQ,KAAA;AACxD,UAAA,IAAI,IAAK,CAAA,IAAA,CAAK,IAAS,KAAA,IAAA,CAAK,IAAM,EAAA;AAChC,YAAY,SAAA,GAAA,IAAA,CAAA;AACZ,YAAA,EAAA,CAAG,UAAW,CAAA,EAAA,EAAI,GAAK,EAAA,GAAA,GAAM,KAAK,QAAQ,CAAA,CAAA;AAAA,WAC5C;AAAA,SACD,CAAA,CAAA;AAED,QAAO,OAAA,SAAA,CAAA;AAAA,OACR,CAAA;AAAA,KACL,CAAA;AAAA,GACF;AAAA,EAEA,UAAa,GAAA;AACX,IAAO,OAAA;AAAA,MACL,iBAAiB,MAAM;AAAA,OAAC;AAAA,MACxB,iBAAiB,MAAM;AAAA,OAAC;AAAA,KAC1B,CAAA;AAAA,GACF;AAAA,EAEA,qBAAwB,GAAA;AACtB,IAAO,OAAA;AAAA,MACL,UAAW,CAAA;AAAA,QACT,QAAQ,IAAK,CAAA,MAAA;AAAA,QACb,IAAM,EAAA,GAAA;AAAA,QACN,SAAW,EAAA,sBAAA;AAAA,QACX,SAAS,CAAC,EAAE,MAAQ,EAAA,KAAA,EAAO,OAAY,KAAA;AAGrC,UAAA,MAAM,SAAY,GAAA,MAAA,CAAO,IAAK,CAAA,KAAA,CAAM,UAAU,GAAI,CAAA,SAAA,CAAA;AAClD,UAAA,MAAM,aAAgB,GAAA,SAAA,EAAW,IAAM,EAAA,UAAA,CAAW,GAAG,CAAA,CAAA;AAErD,UAAA,IAAI,aAAe,EAAA;AACjB,YAAA,KAAA,CAAM,EAAM,IAAA,CAAA,CAAA;AAAA,WACd;AAEA,UAAA,MAAA,CACG,KAAM,EAAA,CACN,KAAM,EAAA,CACN,gBAAgB,KAAO,EAAA;AAAA,YACtB;AAAA,cACE,MAAM,IAAK,CAAA,IAAA;AAAA,cACX,KAAO,EAAA,KAAA;AAAA,aACT;AAAA,YACA;AAAA,cACE,IAAM,EAAA,MAAA;AAAA,cACN,IAAM,EAAA,GAAA;AAAA,aACR;AAAA,WACD,EACA,GAAI,EAAA,CAAA;AAGP,UAAA,MAAA,CAAO,KAAK,GAAI,CAAA,aAAA,CAAc,WAC1B,EAAA,YAAA,IACA,aAAc,EAAA,CAAA;AAAA,SACpB;AAAA,QACA,KAAO,EAAA,CAAC,EAAE,KAAA,EAAO,OAAY,KAAA;AAC3B,UAAA,MAAM,KAAQ,GAAA,KAAA,CAAM,GAAI,CAAA,OAAA,CAAQ,MAAM,IAAI,CAAA,CAAA;AAC1C,UAAA,MAAM,IAAO,GAAA,KAAA,CAAM,MAAO,CAAA,KAAA,CAAM,IAAK,CAAA,IAAA,CAAA,CAAA;AACrC,UAAM,MAAA,KAAA,GAAQ,CAAC,CAAC,KAAA,CAAM,OAAO,IAAK,CAAA,YAAA,CAAa,UAAU,IAAI,CAAA,CAAA;AAE7D,UAAO,OAAA,KAAA,CAAA;AAAA,SACT;AAAA,QACA,WAAa,EAAA,IAAA;AAAA,QACb,KAAA,EAAO,MAAM,EAAC;AAAA,QACd,QAAQ,MAAM;AACZ,UAAI,IAAA,SAAA,CAAA;AACJ,UAAO,OAAA;AAAA,YACL,OAAA,EAAS,CAAC,KAAU,KAAA;AAClB,cAAY,SAAA,GAAA,IAAI,cAGd,YAAc,EAAA;AAAA,gBACd,KAAA;AAAA,gBACA,QAAQ,KAAM,CAAA,MAAA;AAAA,eACf,CAAA,CAAA;AAED,cAAI,IAAA,CAAC,MAAM,UAAY,EAAA;AACrB,gBAAA,OAAA;AAAA,eACF;AAEA,cAAS,QAAA,CAAA,IAAA,CAAK,WAAY,CAAA,SAAA,CAAU,OAAO,CAAA,CAAA;AAAA,aAC7C;AAAA,YAEA,SAAS,KAAO,EAAA;AACd,cAAA,SAAA,CAAU,YAAY,KAAK,CAAA,CAAA;AAAA,aAC7B;AAAA,YAEA,UAAU,KAAO,EAAA;AACf,cAAI,IAAA,KAAA,CAAM,KAAM,CAAA,GAAA,KAAQ,QAAU,EAAA;AAChC,gBAAA,SAAA,CAAU,WAAY,CAAA;AAAA,kBACpB,GAAG,KAAA;AAAA,kBACH,IAAM,EAAA,IAAA;AAAA,iBACP,CAAA,CAAA;AACD,gBAAO,OAAA,IAAA,CAAA;AAAA,eACT;AACA,cAAA,OAAO,SAAU,CAAA,GAAA,EAAK,SAAU,CAAA,KAAK,CAAK,IAAA,KAAA,CAAA;AAAA,aAC5C;AAAA,YAEA,MAAS,GAAA;AACP,cAAS,QAAA,CAAA,IAAA,CAAK,WAAY,CAAA,SAAA,CAAU,OAAO,CAAA,CAAA;AAC3C,cAAA,SAAA,CAAU,OAAQ,EAAA,CAAA;AAAA,aACpB;AAAA,WACF,CAAA;AAAA,SACF;AAAA,OACD,CAAA;AAAA,MACD,QAAA,CAAS,KAAK,OAAO,CAAA;AAAA,MACrB,mBAAoB,EAAA;AAAA,KACtB,CAAA;AAAA,GACF;AACF,CAAC;;;;"}

package/dist/mentions/MentionsList.js

@@ -3,6 +3,7 @@
 var reactDom = require('@floating-ui/react-dom');
 var core = require('@liveblocks/core');
 var react = require('@liveblocks/react');
+var _private = require('@liveblocks/react/_private');
 var reactUi = require('@liveblocks/react-ui');
 var React = require('react');
 var Avatar = require('./Avatar.js');
@@ -24,7 +25,8 @@ const User = React.forwardRef(
 const SUGGESTIONS_COLLISION_PADDING = 10;
 const MentionsList = React.forwardRef((props, ref) => {
   const [selectedIndex, setSelectedIndex] = React.useState(0);
-  const suggestions = reactUi.useMentionSuggestions(props.query);
+  const suggestions = _private.useMentionSuggestions(props.query);
+  const { onMouseEnter, onClick } = props;
   const {
     refs: { setReference, setFloating },
     strategy,
@@ -84,7 +86,19 @@ const MentionsList = React.forwardRef((props, ref) => {
       return false;
     }
   }));
-  if (suggestions !== void 0 && suggestions.length === 0) {
+  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__ */ React.createElement("div", {
@@ -100,14 +114,13 @@ const MentionsList = React.forwardRef((props, ref) => {
     }
   }, /* @__PURE__ */ React.createElement("div", {
     className: "lb-tiptap-suggestions-list lb-tiptap-mention-suggestions-list"
-  }, suggestions === void 0 ? /* @__PURE__ */ React.createElement("div", {
-    className: "item"
-  }, "Loading...") : suggestions.map((item, index) => /* @__PURE__ */ React.createElement("div", {
+  }, suggestions.map((item, index) => /* @__PURE__ */ React.createElement("div", {
     className: "lb-tiptap-suggestions-list-item lb-tiptap-mention-suggestion",
     key: index,
     role: "option",
     "data-highlighted": index === selectedIndex || void 0,
-    onClick: () => selectItem(index)
+    onMouseEnter: handleMouseEnter(index),
+    onClick: handleClick(index)
   }, /* @__PURE__ */ React.createElement(Avatar.Avatar, {
     userId: item,
     className: "lb-tiptap-mention-suggestion-avatar"

package/dist/mentions/MentionsList.js.map

@@ -1 +1 @@
-{"version":3,"file":"MentionsList.js","sources":["../../src/mentions/MentionsList.tsx"],"sourcesContent":["import { autoUpdate, flip, hide, limitShift, offset, shift, size, useFloating } from \"@floating-ui/react-dom\";\nimport { createInboxNotificationId } from \"@liveblocks/core\";\nimport { useUser } from \"@liveblocks/react\";\nimport { useMentionSuggestions, useOverrides } from \"@liveblocks/react-ui\";\nimport type { HTMLAttributes } from \"react\";\nimport React, {\n  forwardRef, useEffect, useImperativeHandle,\n  useLayoutEffect,\n  useState,\n} from \"react\"\n\nimport { Avatar } from \"./Avatar\";\n\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 type MentionsListProps = {\n  query: string,\n  command: (otps: { id: string, notificationId: string }) => void,\n  clientRect: () => DOMRect,\n  hide: boolean\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 suggestions = useMentionSuggestions(props.query);\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  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 === undefined ? <div className=\"item\">Loading...</div> :\n\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              onClick={() => selectItem(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","useState","useMentionSuggestions","useFloating","flip","offset","hide","shift","limitShift","size","autoUpdate","useLayoutEffect","createInboxNotificationId","useEffect","useImperativeHandle","Avatar"],"mappings":"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"}
+{"version":3,"file":"MentionsList.js","sources":["../../src/mentions/MentionsList.tsx"],"sourcesContent":["import { autoUpdate, flip, hide, limitShift, offset, shift, size, useFloating } from \"@floating-ui/react-dom\";\nimport { createInboxNotificationId } from \"@liveblocks/core\";\nimport { useUser } from \"@liveblocks/react\";\nimport { useMentionSuggestions } from \"@liveblocks/react/_private\";\nimport { useOverrides } from \"@liveblocks/react-ui\";\nimport type { HTMLAttributes, MouseEvent } from \"react\";\nimport React, {\n  forwardRef, useEffect, useImperativeHandle,\n  useLayoutEffect,\n  useState,\n} from \"react\"\n\nimport { Avatar } from \"./Avatar\";\n\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 suggestions = useMentionSuggestions(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","useState","useMentionSuggestions","useFloating","flip","offset","hide","shift","limitShift","size","autoUpdate","useLayoutEffect","createInboxNotificationId","useEffect","useImperativeHandle","Avatar"],"mappings":"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"}

package/dist/mentions/MentionsList.mjs

@@ -1,7 +1,8 @@
 import { useFloating, flip, offset, hide, shift, limitShift, size, autoUpdate } from '@floating-ui/react-dom';
 import { createInboxNotificationId } from '@liveblocks/core';
 import { useUser } from '@liveblocks/react';
-import { useOverrides, useMentionSuggestions } from '@liveblocks/react-ui';
+import { useMentionSuggestions } from '@liveblocks/react/_private';
+import { useOverrides } from '@liveblocks/react-ui';
 import React, { forwardRef, useState, useLayoutEffect, useEffect, useImperativeHandle } from 'react';
 import { Avatar } from './Avatar.mjs';
 
@@ -23,6 +24,7 @@ const SUGGESTIONS_COLLISION_PADDING = 10;
 const MentionsList = forwardRef((props, ref) => {
   const [selectedIndex, setSelectedIndex] = useState(0);
   const suggestions = useMentionSuggestions(props.query);
+  const { onMouseEnter, onClick } = props;
   const {
     refs: { setReference, setFloating },
     strategy,
@@ -82,7 +84,19 @@ const MentionsList = forwardRef((props, ref) => {
       return false;
     }
   }));
-  if (suggestions !== void 0 && suggestions.length === 0) {
+  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__ */ React.createElement("div", {
@@ -98,14 +112,13 @@ const MentionsList = forwardRef((props, ref) => {
     }
   }, /* @__PURE__ */ React.createElement("div", {
     className: "lb-tiptap-suggestions-list lb-tiptap-mention-suggestions-list"
-  }, suggestions === void 0 ? /* @__PURE__ */ React.createElement("div", {
-    className: "item"
-  }, "Loading...") : suggestions.map((item, index) => /* @__PURE__ */ React.createElement("div", {
+  }, suggestions.map((item, index) => /* @__PURE__ */ React.createElement("div", {
     className: "lb-tiptap-suggestions-list-item lb-tiptap-mention-suggestion",
     key: index,
     role: "option",
     "data-highlighted": index === selectedIndex || void 0,
-    onClick: () => selectItem(index)
+    onMouseEnter: handleMouseEnter(index),
+    onClick: handleClick(index)
   }, /* @__PURE__ */ React.createElement(Avatar, {
     userId: item,
     className: "lb-tiptap-mention-suggestion-avatar"