@liveblocks/react-tiptap 2.17.0-channels1 → 2.17.0-usrnotsettings1

package/dist/comments/FloatingComposer.mjs

@@ -1,27 +1,27 @@
 import { jsx } from 'react/jsx-runtime';
-import { useFloating, flip, offset, hide, shift, limitShift, size, autoUpdate } from '@floating-ui/react-dom';
+import { useFloating, inline, flip, offset, hide, shift, limitShift, size, autoUpdate } from '@floating-ui/react-dom';
 import { useCreateThread } from '@liveblocks/react';
 import { useLayoutEffect } from '@liveblocks/react/_private';
 import { Composer } from '@liveblocks/react-ui';
 import { useEditorState } from '@tiptap/react';
-import { forwardRef, useCallback, useEffect } from 'react';
+import { forwardRef, useCallback } from 'react';
 import { createPortal } from 'react-dom';
+import { compareSelections, getDomRangeFromSelection } from '../utils.mjs';
 
 const FLOATING_COMPOSER_COLLISION_PADDING = 10;
 const FloatingComposer = forwardRef(function FloatingComposer2(props, forwardedRef) {
   const createThread = useCreateThread();
   const { editor, onComposerSubmit, onKeyDown } = props;
-  const { showComposer } = useEditorState({
+  const pendingCommentSelection = useEditorState({
     editor,
-    selector: (ctx) => ({
-      showComposer: !!ctx.editor?.storage.liveblocksComments?.pendingComment && !editor?.state.selection.empty
-    }),
-    equalityFn: (prev, next) => {
-      if (!next)
-        return false;
-      return prev.showComposer === next.showComposer;
-    }
-  }) ?? { showComposer: false };
+    selector: (ctx) => {
+      if (!ctx.editor)
+        return;
+      return ctx.editor.storage.liveblocksComments?.pendingComment && !ctx.editor.state.selection.empty ? ctx.editor.state.selection : void 0;
+    },
+    equalityFn: compareSelections
+  }) ?? void 0;
+  const isOpen = pendingCommentSelection !== void 0;
   const {
     refs: { setReference, setFloating },
     strategy,
@@ -31,6 +31,7 @@ const FloatingComposer = forwardRef(function FloatingComposer2(props, forwardedR
     strategy: "fixed",
     placement: "bottom",
     middleware: [
+      inline({ padding: FLOATING_COMPOSER_COLLISION_PADDING }),
       flip({ padding: FLOATING_COMPOSER_COLLISION_PADDING, crossAxis: false }),
       offset(10),
       hide({ padding: FLOATING_COMPOSER_COLLISION_PADDING }),
@@ -46,25 +47,20 @@ const FloatingComposer = forwardRef(function FloatingComposer2(props, forwardedR
       });
     }
   });
-  const updateRef = useCallback(() => {
-    if (!editor || !showComposer) {
+  useLayoutEffect(() => {
+    if (!editor || !isOpen) {
       return;
     }
-    const el = editor.view.dom.querySelector(".lb-tiptap-active-selection");
-    if (el) {
-      setReference(el);
-    }
-  }, [setReference, editor, showComposer]);
-  useEffect(() => {
-    if (!editor || !showComposer) {
-      return;
+    if (!pendingCommentSelection) {
+      setReference(null);
+    } else {
+      const domRange = getDomRangeFromSelection(
+        pendingCommentSelection,
+        editor
+      );
+      setReference(domRange);
     }
-    editor.on("transaction", updateRef);
-    return () => {
-      editor.off("transaction", updateRef);
-    };
-  }, [editor, updateRef, showComposer]);
-  useLayoutEffect(updateRef, [updateRef]);
+  }, [pendingCommentSelection, editor, isOpen, setReference]);
   const handleComposerSubmit = useCallback(
     (comment, event) => {
       onComposerSubmit?.(comment, event);
@@ -85,14 +81,17 @@ const FloatingComposer = forwardRef(function FloatingComposer2(props, forwardedR
   );
   const handleKeyDown = useCallback(
     (event) => {
-      if (event.key === "Escape" && editor) {
-        editor.commands.focus();
-      }
       onKeyDown?.(event);
+      if (event.isDefaultPrevented() || !editor) {
+        return;
+      }
+      if (event.key === "Escape") {
+        editor.chain().closePendingComment().run();
+      }
     },
     [editor, onKeyDown]
   );
-  if (!showComposer || !editor) {
+  if (!isOpen || !editor) {
     return null;
   }
   return createPortal(

package/dist/comments/FloatingComposer.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FloatingComposer.mjs","sources":["../../src/comments/FloatingComposer.tsx"],"sourcesContent":["import {\n  autoUpdate,\n  flip,\n  hide,\n  limitShift,\n  offset,\n  shift,\n  size,\n  useFloating,\n} from \"@floating-ui/react-dom\";\nimport type { BaseMetadata } from \"@liveblocks/client\";\nimport type { DM } from \"@liveblocks/core\";\nimport { useCreateThread } from \"@liveblocks/react\";\nimport { useLayoutEffect } from \"@liveblocks/react/_private\";\nimport type {\n  ComposerProps,\n  ComposerSubmitComment,\n} from \"@liveblocks/react-ui\";\nimport { Composer } from \"@liveblocks/react-ui\";\nimport { type Editor, useEditorState } from \"@tiptap/react\";\nimport type { ComponentRef, FormEvent, KeyboardEvent } from \"react\";\nimport { forwardRef, useCallback, useEffect } from \"react\";\nimport { createPortal } from \"react-dom\";\n\nimport type { CommentsExtensionStorage } from \"../types\";\n\nexport type FloatingComposerProps<M extends BaseMetadata = DM> = Omit<\n  ComposerProps<M>,\n  \"threadId\" | \"commentId\"\n> & {\n  editor: Editor | null;\n};\n\ntype ComposerElement = ComponentRef<typeof Composer>;\n\nexport const FLOATING_COMPOSER_COLLISION_PADDING = 10;\n\nexport const FloatingComposer = forwardRef<\n  ComposerElement,\n  FloatingComposerProps\n>(function FloatingComposer(props, forwardedRef) {\n  const createThread = useCreateThread();\n  const { editor, onComposerSubmit, onKeyDown } = props;\n  const { showComposer } = useEditorState({\n    editor,\n    selector: (ctx) => ({\n      showComposer: !!(\n        ctx.editor?.storage.liveblocksComments as\n        | CommentsExtensionStorage\n        | undefined\n      )?.pendingComment && !editor?.state.selection.empty,\n    }),\n    equalityFn: (prev, next) => {\n      if (!next) return false;\n      return prev.showComposer === next.showComposer;\n    },\n  }) ?? { showComposer: false };\n\n  const {\n    refs: { setReference, setFloating },\n    strategy,\n    x,\n    y,\n  } = useFloating({\n    strategy: \"fixed\",\n    placement: \"bottom\",\n    middleware: [\n      flip({ padding: FLOATING_COMPOSER_COLLISION_PADDING, crossAxis: false }),\n      offset(10),\n      hide({ padding: FLOATING_COMPOSER_COLLISION_PADDING }),\n      shift({\n        padding: FLOATING_COMPOSER_COLLISION_PADDING,\n        limiter: limitShift(),\n      }),\n      size({ padding: FLOATING_COMPOSER_COLLISION_PADDING }),\n    ],\n    whileElementsMounted: (...args) => {\n      return autoUpdate(...args, {\n        animationFrame: true,\n      });\n    },\n  });\n\n  const updateRef = useCallback(() => {\n    if (!editor || !showComposer) {\n      return;\n    }\n    const el = editor.view.dom.querySelector(\".lb-tiptap-active-selection\");\n    if (el) {\n      setReference(el);\n    }\n  }, [setReference, editor, showComposer]);\n\n  // Remote cursor updates and other edits can cause the ref to break\n  useEffect(() => {\n    if (!editor || !showComposer) {\n      return;\n    }\n    editor.on(\"transaction\", updateRef);\n    return () => {\n      editor.off(\"transaction\", updateRef);\n    };\n  }, [editor, updateRef, showComposer]);\n\n  useLayoutEffect(updateRef, [updateRef]);\n\n  // Submit a new thread and update the comment highlight to show a completed highlight\n  const handleComposerSubmit = useCallback(\n    (comment: ComposerSubmitComment, event: FormEvent<HTMLFormElement>) => {\n      onComposerSubmit?.(comment, event);\n      if (event.defaultPrevented) return;\n\n      if (!editor) {\n        return;\n      }\n      event.preventDefault();\n\n      const thread = createThread({\n        body: comment.body,\n        attachments: comment.attachments,\n        metadata: props.metadata ?? {},\n      });\n      editor.commands.addComment(thread.id);\n    },\n    [onComposerSubmit, editor, createThread, props.metadata]\n  );\n\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLFormElement>) => {\n      if (event.key === \"Escape\" && editor) {\n        editor.commands.focus();\n      }\n      onKeyDown?.(event);\n    },\n    [editor, onKeyDown]\n  );\n\n  if (!showComposer || !editor) {\n    return null;\n  }\n\n  return createPortal(\n    <div\n      className=\"lb-root lb-portal lb-elevation lb-tiptap-floating lb-tiptap-floating-composer\"\n      ref={setFloating}\n      style={{\n        position: strategy,\n        top: 0,\n        left: 0,\n        transform: `translate3d(${Math.round(x)}px, ${Math.round(y)}px, 0)`,\n        minWidth: \"max-content\",\n      }}\n    >\n      <Composer\n        ref={forwardedRef}\n        {...props}\n        onKeyDown={handleKeyDown}\n        onComposerSubmit={handleComposerSubmit}\n        onClick={(e) => {\n          // Don't send up a click event from emoji popout and close the composer\n          e.stopPropagation();\n        }}\n        autoFocus={true}\n      />\n    </div>,\n    document.body\n  );\n});\n"],"names":["FloatingComposer"],"mappings":";;;;;;;;;AAmCO,MAAM,mCAAsC,GAAA,GAAA;AAE5C,MAAM,gBAAmB,GAAA,UAAA,CAG9B,SAASA,iBAAAA,CAAiB,OAAO,YAAc,EAAA;AAC/C,EAAA,MAAM,eAAe,eAAgB,EAAA,CAAA;AACrC,EAAA,MAAM,EAAE,MAAA,EAAQ,gBAAkB,EAAA,SAAA,EAAc,GAAA,KAAA,CAAA;AAChD,EAAM,MAAA,EAAE,YAAa,EAAA,GAAI,cAAe,CAAA;AAAA,IACtC,MAAA;AAAA,IACA,QAAA,EAAU,CAAC,GAAS,MAAA;AAAA,MAClB,YAAA,EAAc,CAAC,CACb,GAAI,CAAA,MAAA,EAAQ,OAAQ,CAAA,kBAAA,EAGnB,cAAkB,IAAA,CAAC,MAAQ,EAAA,KAAA,CAAM,SAAU,CAAA,KAAA;AAAA,KAChD,CAAA;AAAA,IACA,UAAA,EAAY,CAAC,IAAA,EAAM,IAAS,KAAA;AAC1B,MAAA,IAAI,CAAC,IAAA;AAAM,QAAO,OAAA,KAAA,CAAA;AAClB,MAAO,OAAA,IAAA,CAAK,iBAAiB,IAAK,CAAA,YAAA,CAAA;AAAA,KACpC;AAAA,GACD,CAAA,IAAK,EAAE,YAAA,EAAc,KAAM,EAAA,CAAA;AAE5B,EAAM,MAAA;AAAA,IACJ,IAAA,EAAM,EAAE,YAAA,EAAc,WAAY,EAAA;AAAA,IAClC,QAAA;AAAA,IACA,CAAA;AAAA,IACA,CAAA;AAAA,MACE,WAAY,CAAA;AAAA,IACd,QAAU,EAAA,OAAA;AAAA,IACV,SAAW,EAAA,QAAA;AAAA,IACX,UAAY,EAAA;AAAA,MACV,KAAK,EAAE,OAAA,EAAS,mCAAqC,EAAA,SAAA,EAAW,OAAO,CAAA;AAAA,MACvE,OAAO,EAAE,CAAA;AAAA,MACT,IAAK,CAAA,EAAE,OAAS,EAAA,mCAAA,EAAqC,CAAA;AAAA,MACrD,KAAM,CAAA;AAAA,QACJ,OAAS,EAAA,mCAAA;AAAA,QACT,SAAS,UAAW,EAAA;AAAA,OACrB,CAAA;AAAA,MACD,IAAK,CAAA,EAAE,OAAS,EAAA,mCAAA,EAAqC,CAAA;AAAA,KACvD;AAAA,IACA,oBAAA,EAAsB,IAAI,IAAS,KAAA;AACjC,MAAO,OAAA,UAAA,CAAW,GAAG,IAAM,EAAA;AAAA,QACzB,cAAgB,EAAA,IAAA;AAAA,OACjB,CAAA,CAAA;AAAA,KACH;AAAA,GACD,CAAA,CAAA;AAED,EAAM,MAAA,SAAA,GAAY,YAAY,MAAM;AAClC,IAAI,IAAA,CAAC,MAAU,IAAA,CAAC,YAAc,EAAA;AAC5B,MAAA,OAAA;AAAA,KACF;AACA,IAAA,MAAM,EAAK,GAAA,MAAA,CAAO,IAAK,CAAA,GAAA,CAAI,cAAc,6BAA6B,CAAA,CAAA;AACtE,IAAA,IAAI,EAAI,EAAA;AACN,MAAA,YAAA,CAAa,EAAE,CAAA,CAAA;AAAA,KACjB;AAAA,GACC,EAAA,CAAC,YAAc,EAAA,MAAA,EAAQ,YAAY,CAAC,CAAA,CAAA;AAGvC,EAAA,SAAA,CAAU,MAAM;AACd,IAAI,IAAA,CAAC,MAAU,IAAA,CAAC,YAAc,EAAA;AAC5B,MAAA,OAAA;AAAA,KACF;AACA,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,SAAA,EAAW,YAAY,CAAC,CAAA,CAAA;AAEpC,EAAgB,eAAA,CAAA,SAAA,EAAW,CAAC,SAAS,CAAC,CAAA,CAAA;AAGtC,EAAA,MAAM,oBAAuB,GAAA,WAAA;AAAA,IAC3B,CAAC,SAAgC,KAAsC,KAAA;AACrE,MAAA,gBAAA,GAAmB,SAAS,KAAK,CAAA,CAAA;AACjC,MAAA,IAAI,KAAM,CAAA,gBAAA;AAAkB,QAAA,OAAA;AAE5B,MAAA,IAAI,CAAC,MAAQ,EAAA;AACX,QAAA,OAAA;AAAA,OACF;AACA,MAAA,KAAA,CAAM,cAAe,EAAA,CAAA;AAErB,MAAA,MAAM,SAAS,YAAa,CAAA;AAAA,QAC1B,MAAM,OAAQ,CAAA,IAAA;AAAA,QACd,aAAa,OAAQ,CAAA,WAAA;AAAA,QACrB,QAAA,EAAU,KAAM,CAAA,QAAA,IAAY,EAAC;AAAA,OAC9B,CAAA,CAAA;AACD,MAAO,MAAA,CAAA,QAAA,CAAS,UAAW,CAAA,MAAA,CAAO,EAAE,CAAA,CAAA;AAAA,KACtC;AAAA,IACA,CAAC,gBAAA,EAAkB,MAAQ,EAAA,YAAA,EAAc,MAAM,QAAQ,CAAA;AAAA,GACzD,CAAA;AAEA,EAAA,MAAM,aAAgB,GAAA,WAAA;AAAA,IACpB,CAAC,KAA0C,KAAA;AACzC,MAAI,IAAA,KAAA,CAAM,GAAQ,KAAA,QAAA,IAAY,MAAQ,EAAA;AACpC,QAAA,MAAA,CAAO,SAAS,KAAM,EAAA,CAAA;AAAA,OACxB;AACA,MAAA,SAAA,GAAY,KAAK,CAAA,CAAA;AAAA,KACnB;AAAA,IACA,CAAC,QAAQ,SAAS,CAAA;AAAA,GACpB,CAAA;AAEA,EAAI,IAAA,CAAC,YAAgB,IAAA,CAAC,MAAQ,EAAA;AAC5B,IAAO,OAAA,IAAA,CAAA;AAAA,GACT;AAEA,EAAO,OAAA,YAAA;AAAA,oBACJ,GAAA,CAAA,KAAA,EAAA;AAAA,MACC,SAAU,EAAA,+EAAA;AAAA,MACV,GAAK,EAAA,WAAA;AAAA,MACL,KAAO,EAAA;AAAA,QACL,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,MAEA,QAAC,kBAAA,GAAA,CAAA,QAAA,EAAA;AAAA,QACC,GAAK,EAAA,YAAA;AAAA,QACJ,GAAG,KAAA;AAAA,QACJ,SAAW,EAAA,aAAA;AAAA,QACX,gBAAkB,EAAA,oBAAA;AAAA,QAClB,OAAA,EAAS,CAAC,CAAM,KAAA;AAEd,UAAA,CAAA,CAAE,eAAgB,EAAA,CAAA;AAAA,SACpB;AAAA,QACA,SAAW,EAAA,IAAA;AAAA,OACb,CAAA;AAAA,KACF,CAAA;AAAA,IACA,QAAS,CAAA,IAAA;AAAA,GACX,CAAA;AACF,CAAC;;;;"}
+{"version":3,"file":"FloatingComposer.mjs","sources":["../../src/comments/FloatingComposer.tsx"],"sourcesContent":["import {\n  autoUpdate,\n  flip,\n  hide,\n  inline,\n  limitShift,\n  offset,\n  shift,\n  size,\n  useFloating,\n} from \"@floating-ui/react-dom\";\nimport type { BaseMetadata } from \"@liveblocks/client\";\nimport type { DM } from \"@liveblocks/core\";\nimport { useCreateThread } from \"@liveblocks/react\";\nimport { useLayoutEffect } from \"@liveblocks/react/_private\";\nimport type {\n  ComposerProps,\n  ComposerSubmitComment,\n} from \"@liveblocks/react-ui\";\nimport { Composer } from \"@liveblocks/react-ui\";\nimport { type Editor, useEditorState } from \"@tiptap/react\";\nimport type { ComponentRef, FormEvent, KeyboardEvent } from \"react\";\nimport { forwardRef, useCallback } from \"react\";\nimport { createPortal } from \"react-dom\";\n\nimport type {\n  CommentsExtensionStorage,\n  ExtendedChainedCommands,\n} from \"../types\";\nimport { compareSelections, getDomRangeFromSelection } from \"../utils\";\n\nexport type FloatingComposerProps<M extends BaseMetadata = DM> = Omit<\n  ComposerProps<M>,\n  \"threadId\" | \"commentId\"\n> & {\n  editor: Editor | null;\n};\n\ntype ComposerElement = ComponentRef<typeof Composer>;\n\nexport const FLOATING_COMPOSER_COLLISION_PADDING = 10;\n\nexport const FloatingComposer = forwardRef<\n  ComposerElement,\n  FloatingComposerProps\n>(function FloatingComposer(props, forwardedRef) {\n  const createThread = useCreateThread();\n  const { editor, onComposerSubmit, onKeyDown } = props;\n  const pendingCommentSelection =\n    useEditorState({\n      editor,\n      selector: (ctx) => {\n        if (!ctx.editor) return;\n\n        return (\n          ctx.editor.storage.liveblocksComments as\n            | CommentsExtensionStorage\n            | undefined\n        )?.pendingComment && !ctx.editor.state.selection.empty\n          ? ctx.editor.state.selection\n          : undefined;\n      },\n      equalityFn: compareSelections,\n    }) ?? undefined;\n  const isOpen = pendingCommentSelection !== undefined;\n  const {\n    refs: { setReference, setFloating },\n    strategy,\n    x,\n    y,\n  } = useFloating({\n    strategy: \"fixed\",\n    placement: \"bottom\",\n    middleware: [\n      inline({ padding: FLOATING_COMPOSER_COLLISION_PADDING }),\n      flip({ padding: FLOATING_COMPOSER_COLLISION_PADDING, crossAxis: false }),\n      offset(10),\n      hide({ padding: FLOATING_COMPOSER_COLLISION_PADDING }),\n      shift({\n        padding: FLOATING_COMPOSER_COLLISION_PADDING,\n        limiter: limitShift(),\n      }),\n      size({ padding: FLOATING_COMPOSER_COLLISION_PADDING }),\n    ],\n    whileElementsMounted: (...args) => {\n      return autoUpdate(...args, {\n        animationFrame: true,\n      });\n    },\n  });\n\n  useLayoutEffect(() => {\n    if (!editor || !isOpen) {\n      return;\n    }\n\n    if (!pendingCommentSelection) {\n      setReference(null);\n    } else {\n      const domRange = getDomRangeFromSelection(\n        pendingCommentSelection,\n        editor\n      );\n\n      setReference(domRange);\n    }\n  }, [pendingCommentSelection, editor, isOpen, setReference]);\n\n  // Submit a new thread and update the comment highlight to show a completed highlight\n  const handleComposerSubmit = useCallback(\n    (comment: ComposerSubmitComment, event: FormEvent<HTMLFormElement>) => {\n      onComposerSubmit?.(comment, event);\n      if (event.defaultPrevented) return;\n\n      if (!editor) {\n        return;\n      }\n      event.preventDefault();\n\n      const thread = createThread({\n        body: comment.body,\n        attachments: comment.attachments,\n        metadata: props.metadata ?? {},\n      });\n      editor.commands.addComment(thread.id);\n    },\n    [onComposerSubmit, editor, createThread, props.metadata]\n  );\n\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLFormElement>) => {\n      onKeyDown?.(event);\n\n      if (event.isDefaultPrevented() || !editor) {\n        return;\n      }\n\n      if (event.key === \"Escape\") {\n        (editor.chain() as ExtendedChainedCommands<\"closePendingComment\">)\n          .closePendingComment()\n          .run();\n      }\n    },\n    [editor, onKeyDown]\n  );\n\n  if (!isOpen || !editor) {\n    return null;\n  }\n\n  return createPortal(\n    <div\n      className=\"lb-root lb-portal lb-elevation lb-tiptap-floating lb-tiptap-floating-composer\"\n      ref={setFloating}\n      style={{\n        position: strategy,\n        top: 0,\n        left: 0,\n        transform: `translate3d(${Math.round(x)}px, ${Math.round(y)}px, 0)`,\n        minWidth: \"max-content\",\n      }}\n    >\n      <Composer\n        ref={forwardedRef}\n        {...props}\n        onKeyDown={handleKeyDown}\n        onComposerSubmit={handleComposerSubmit}\n        onClick={(e) => {\n          // Don't send up a click event from emoji popout and close the composer\n          e.stopPropagation();\n        }}\n        autoFocus={true}\n      />\n    </div>,\n    document.body\n  );\n});\n"],"names":["FloatingComposer"],"mappings":"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"}

package/dist/context.js

@@ -0,0 +1,24 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@liveblocks/core');
+var react = require('react');
+
+const EditorContext = react.createContext(null);
+function EditorProvider({
+  editor,
+  children
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(EditorContext.Provider, {
+    value: editor,
+    children
+  });
+}
+function useCurrentEditor(source, parent) {
+  const currentEditor = react.useContext(EditorContext);
+  return core.nn(currentEditor, `${source} can\u2019t be used outside of ${parent}.`);
+}
+
+exports.EditorProvider = EditorProvider;
+exports.useCurrentEditor = useCurrentEditor;
+//# sourceMappingURL=context.js.map

package/dist/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","sources":["../src/context.tsx"],"sourcesContent":["import { nn } from \"@liveblocks/core\";\nimport type { Editor } from \"@tiptap/react\";\nimport type { PropsWithChildren } from \"react\";\nimport { createContext, useContext } from \"react\";\n\nconst EditorContext = createContext<Editor | null>(null);\n\nexport function EditorProvider({\n  editor,\n  children,\n}: PropsWithChildren<{ editor: Editor }>) {\n  return (\n    <EditorContext.Provider value={editor}>{children}</EditorContext.Provider>\n  );\n}\n\n/**\n * @tiptap/react already offers a `useCurrentEditor` hook but our components might\n * not live under `EditorProvider` or `EditorContent` so we create our own to reduce\n * repetition within our own nested components.\n *\n * @example\n * <Toolbar editor={editor}> // `editor` is required here\n *   <ToolbarSectionInline /> // But it isn't there, because `Toolbar` uses our own `EditorProvider`\n * </Toolbar>\n */\nexport function useCurrentEditor(source: string, parent: string) {\n  const currentEditor = useContext(EditorContext);\n\n  return nn(currentEditor, `${source} can’t be used outside of ${parent}.`);\n}\n"],"names":["createContext","jsx","useContext","nn"],"mappings":";;;;;;AAKA,MAAM,aAAA,GAAgBA,oBAA6B,IAAI,CAAA,CAAA;AAEhD,SAAS,cAAe,CAAA;AAAA,EAC7B,MAAA;AAAA,EACA,QAAA;AACF,CAA0C,EAAA;AACxC,EACE,uBAAAC,cAAA,CAAC,cAAc,QAAd,EAAA;AAAA,IAAuB,KAAO,EAAA,MAAA;AAAA,IAAS,QAAA;AAAA,GAAS,CAAA,CAAA;AAErD,CAAA;AAYgB,SAAA,gBAAA,CAAiB,QAAgB,MAAgB,EAAA;AAC/D,EAAM,MAAA,aAAA,GAAgBC,iBAAW,aAAa,CAAA,CAAA;AAE9C,EAAA,OAAOC,OAAG,CAAA,aAAA,EAAe,CAAG,EAAA,MAAA,CAAA,+BAAA,EAAmC,MAAS,CAAA,CAAA,CAAA,CAAA,CAAA;AAC1E;;;;;"}

package/dist/context.mjs

@@ -0,0 +1,21 @@
+import { jsx } from 'react/jsx-runtime';
+import { nn } from '@liveblocks/core';
+import { createContext, useContext } from 'react';
+
+const EditorContext = createContext(null);
+function EditorProvider({
+  editor,
+  children
+}) {
+  return /* @__PURE__ */ jsx(EditorContext.Provider, {
+    value: editor,
+    children
+  });
+}
+function useCurrentEditor(source, parent) {
+  const currentEditor = useContext(EditorContext);
+  return nn(currentEditor, `${source} can\u2019t be used outside of ${parent}.`);
+}
+
+export { EditorProvider, useCurrentEditor };
+//# sourceMappingURL=context.mjs.map

package/dist/context.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.mjs","sources":["../src/context.tsx"],"sourcesContent":["import { nn } from \"@liveblocks/core\";\nimport type { Editor } from \"@tiptap/react\";\nimport type { PropsWithChildren } from \"react\";\nimport { createContext, useContext } from \"react\";\n\nconst EditorContext = createContext<Editor | null>(null);\n\nexport function EditorProvider({\n  editor,\n  children,\n}: PropsWithChildren<{ editor: Editor }>) {\n  return (\n    <EditorContext.Provider value={editor}>{children}</EditorContext.Provider>\n  );\n}\n\n/**\n * @tiptap/react already offers a `useCurrentEditor` hook but our components might\n * not live under `EditorProvider` or `EditorContent` so we create our own to reduce\n * repetition within our own nested components.\n *\n * @example\n * <Toolbar editor={editor}> // `editor` is required here\n *   <ToolbarSectionInline /> // But it isn't there, because `Toolbar` uses our own `EditorProvider`\n * </Toolbar>\n */\nexport function useCurrentEditor(source: string, parent: string) {\n  const currentEditor = useContext(EditorContext);\n\n  return nn(currentEditor, `${source} can’t be used outside of ${parent}.`);\n}\n"],"names":[],"mappings":";;;;AAKA,MAAM,aAAA,GAAgB,cAA6B,IAAI,CAAA,CAAA;AAEhD,SAAS,cAAe,CAAA;AAAA,EAC7B,MAAA;AAAA,EACA,QAAA;AACF,CAA0C,EAAA;AACxC,EACE,uBAAA,GAAA,CAAC,cAAc,QAAd,EAAA;AAAA,IAAuB,KAAO,EAAA,MAAA;AAAA,IAAS,QAAA;AAAA,GAAS,CAAA,CAAA;AAErD,CAAA;AAYgB,SAAA,gBAAA,CAAiB,QAAgB,MAAgB,EAAA;AAC/D,EAAM,MAAA,aAAA,GAAgB,WAAW,aAAa,CAAA,CAAA;AAE9C,EAAA,OAAO,EAAG,CAAA,aAAA,EAAe,CAAG,EAAA,MAAA,CAAA,+BAAA,EAAmC,MAAS,CAAA,CAAA,CAAA,CAAA,CAAA;AAC1E;;;;"}

package/dist/index.d.mts

@@ -3,10 +3,20 @@ import { BaseMetadata, DM, ThreadData, HistoryVersion } from '@liveblocks/core';
 import { ThreadProps, ComposerProps } from '@liveblocks/react-ui';
 import { Editor } from '@tiptap/react';
 import * as react from 'react';
-import { ComponentPropsWithoutRef, ComponentType, HTMLAttributes } from 'react';
+import { ComponentPropsWithoutRef, ComponentType, HTMLAttributes, ComponentProps, ReactNode } from 'react';
 import { BaseMetadata as BaseMetadata$1 } from '@liveblocks/client';
 import { Extension, Content } from '@tiptap/core';
 
+type FloatingPosition = "top" | "bottom";
+type CommentsCommands<ReturnType> = {
+    /**
+     * Add a comment
+     */
+    addComment: (id: string) => ReturnType;
+    selectThread: (id: string | null) => ReturnType;
+    addPendingComment: () => ReturnType;
+};
+
 type AnchoredThreadsComponents = {
     Thread: ComponentType<ThreadProps>;
 };
@@ -26,6 +36,9 @@ interface AnchoredThreadsProps<M extends BaseMetadata = DM> extends Omit<Compone
 }
 declare function AnchoredThreads({ threads, components, className, style, editor, ...props }: AnchoredThreadsProps): react_jsx_runtime.JSX.Element | null;
 
+type FloatingComposerProps<M extends BaseMetadata$1 = DM> = Omit<ComposerProps<M>, "threadId" | "commentId"> & {
+    editor: Editor | null;
+};
 declare const FloatingComposer: react.ForwardRefExoticComponent<Omit<ComposerProps<BaseMetadata$1>, "threadId" | "commentId"> & {
     editor: Editor | null;
 } & react.RefAttributes<HTMLFormElement>>;
@@ -64,6 +77,244 @@ type LiveblocksExtensionOptions = {
 declare function useIsEditorReady(): boolean;
 declare const useLiveblocksExtension: (opts?: LiveblocksExtensionOptions) => Extension;
 
+interface ToolbarSlotProps {
+    editor: Editor;
+}
+type ToolbarSlot = ReactNode | ComponentType<ToolbarSlotProps>;
+interface ToolbarProps extends Omit<ComponentProps<"div">, "children"> {
+    /**
+     * The Tiptap editor.
+     */
+    editor: Editor | null;
+    /**
+     * The content of the toolbar, overriding the default content.
+     * Use the `before` and `after` props if you want to keep and extend the default content.
+     */
+    children?: ToolbarSlot;
+    /**
+     * The content to display at the start of the toolbar.
+     */
+    before?: ToolbarSlot;
+    /**
+     * The content to display at the end of the toolbar.
+     */
+    after?: ToolbarSlot;
+}
+interface ToolbarButtonProps extends ComponentProps<"button"> {
+    /**
+     * The name of this button displayed in its tooltip.
+     */
+    name: string;
+    /**
+     * An optional icon displayed in this button.
+     */
+    icon?: ReactNode;
+    /**
+     * An optional keyboard shortcut displayed in this button's tooltip.
+     *
+     * @example
+     * "Mod-Alt-B" → "⌘⌥B" in Apple environments, "⌃⌥B" otherwise
+     * "Ctrl-Shift-Escape" → "⌃⇧⎋"
+     * "Space" → "␣"
+     */
+    shortcut?: string;
+}
+interface ToolbarToggleProps extends ToolbarButtonProps {
+    /**
+     * Whether the button is toggled.
+     */
+    active: boolean;
+}
+interface ToolbarBlockSelectorItem {
+    /**
+     * The name of this block element, displayed as the label of this item.
+     */
+    name: string;
+    /**
+     * Optionally replace the name used as the label of this item by any content.
+     */
+    label?: ReactNode;
+    /**
+     * An optional icon displayed in this item.
+     */
+    icon?: ReactNode;
+    /**
+     * Whether this block element is currently active.
+     * Set to `"default"` to display this item when no other item is active.
+     */
+    isActive: ((editor: Editor) => boolean) | "default";
+    /**
+     * A callback invoked when this item is selected.
+     */
+    setActive: (editor: Editor) => void;
+}
+interface ToolbarBlockSelectorProps extends ComponentProps<"button"> {
+    /**
+     * The items displayed in this block selector.
+     * When provided as an array, the default items are overridden. To avoid this,
+     * a function can be provided instead and it will receive the default items.
+     *
+     * @example
+     * <Toolbar.BlockSelector
+     *   items={[
+     *     {
+     *       name: "Text",
+     *       isActive: "default",
+     *       setActive: () => { ... },
+     *     },
+     *     {
+     *       name: "Heading 1",
+     *       isActive: () => { ... },
+     *       setActive: () => { ... },
+     *     },
+     *   ]}
+     * />
+     *
+     * @example
+     * <Toolbar.BlockSelector
+     *   items={(defaultItems) => [
+     *     ...defaultItems,
+     *     {
+     *       name: "Custom block",
+     *       isActive: () => { ... },
+     *       setActive: () => { ... },
+     *     },
+     *   ]}
+     * />
+     */
+    items?: ToolbarBlockSelectorItem[] | ((defaultItems: ToolbarBlockSelectorItem[]) => ToolbarBlockSelectorItem[]);
+}
+type ToolbarSeparatorProps = ComponentProps<"div">;
+declare function ToolbarSectionHistory(): react_jsx_runtime.JSX.Element;
+declare function ToolbarSectionInline(): react_jsx_runtime.JSX.Element;
+declare function ToolbarSectionCollaboration(): react_jsx_runtime.JSX.Element;
+/**
+ * A static toolbar containing actions and values related to the editor.
+ *
+ * @example
+ * <Toolbar editor={editor} />
+ *
+ * @example
+ * <Toolbar editor={editor}>
+ *   <Toolbar.BlockSelector />
+ *   <Toolbar.Separator />
+ *   <Toolbar.SectionInline />
+ *   <Toolbar.Separator />
+ *   <Toolbar.Button name="Custom action" onClick={() => { ... }} icon={<Icon.QuestionMark />} />
+ * </Toolbar>
+ */
+declare const Toolbar: react.ForwardRefExoticComponent<Omit<ToolbarProps, "ref"> & react.RefAttributes<HTMLDivElement>> & {
+    /**
+     * A button for triggering actions.
+     *
+     * @example
+     * <Toolbar.Button name="Comment" shortcut="Mod-Shift-E" onClick={() => { ... }} />
+     *
+     * @example
+     * <Toolbar.Button name="Mention someone" icon={<Icon.Mention />} onClick={() => { ... }} />
+     */
+    Button: react.ForwardRefExoticComponent<Omit<ToolbarButtonProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
+    /**
+     * A toggle button for values that can be active or inactive.
+     *
+     * @example
+     * <Toolbar.Toggle name="Bold" active={isBold} />
+     *
+     * @example
+     * <Toolbar.Toggle name="Italic" icon={<Icon.Italic />} shortcut="Mod-I" active={isItalic} onClick={() => { ... }} />
+     */
+    Toggle: react.ForwardRefExoticComponent<Omit<ToolbarToggleProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
+    /**
+     * A dropdown selector to switch between different block types.
+     *
+     * @example
+     * <Toolbar.BlockSelector />
+     */
+    BlockSelector: react.ForwardRefExoticComponent<Omit<ToolbarBlockSelectorProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
+    /**
+     * A visual (and accessible) separator to separate sections in a toolbar.
+     */
+    Separator: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    /**
+     * A section containing history actions. (e.g. undo, redo)
+     */
+    SectionHistory: typeof ToolbarSectionHistory;
+    /**
+     * A section containing inline formatting actions. (e.g. bold, italic, underline, ...)
+     */
+    SectionInline: typeof ToolbarSectionInline;
+    /**
+     * A section containing collaborative actions. (e.g. adding a comment)
+     */
+    SectionCollaboration: typeof ToolbarSectionCollaboration;
+};
+
+interface FloatingToolbarProps extends Omit<ComponentProps<"div">, "children"> {
+    /**
+     * The Tiptap editor.
+     */
+    editor: Editor | null;
+    /**
+     * The vertical position of the floating toolbar.
+     */
+    position?: FloatingPosition;
+    /**
+     * The vertical offset of the floating toolbar from the selection.
+     */
+    offset?: number;
+    /**
+     * The content of the floating toolbar, overriding the default content.
+     * Use the `before` and `after` props if you want to keep and extend the default content.
+     */
+    children?: ToolbarSlot;
+    /**
+     * The content to display at the start of the floating toolbar.
+     */
+    before?: ToolbarSlot;
+    /**
+     * The content to display at the end of the floating toolbar.
+     */
+    after?: ToolbarSlot;
+}
+/**
+ * A floating toolbar attached to the selection and containing actions and values related to the editor.
+ *
+ * @example
+ * <FloatingToolbar editor={editor} />
+ *
+ * @example
+ * <FloatingToolbar editor={editor}>
+ *   <Toolbar.BlockSelector />
+ *   <Toolbar.Separator />
+ *   <Toolbar.SectionInline />
+ *   <Toolbar.Separator />
+ *   <Toolbar.Button name="Custom action" onClick={() => { ... }} icon={<Icon.QuestionMark />} />
+ * </FloatingToolbar>
+ */
+declare const FloatingToolbar: react.ForwardRefExoticComponent<Omit<FloatingToolbarProps, "ref"> & react.RefAttributes<HTMLDivElement>> & {
+    /**
+     * A component that can be wrapped around elements which are rendered outside of the floating
+     * toolbar (e.g. portals) to prevent the toolbar from closing when clicking/focusing within them.
+     *
+     * @example
+     * <FloatingToolbar editor={editor}>
+     *   <Popover.Root>
+     *     <Popover.Trigger asChild>
+     *       <Toolbar.Button>Open popover</Toolbar.Button>
+     *     </Popover.Trigger>
+     *     <Popover.Portal>
+     *       <FloatingToolbar.External>
+     *         <Popover.Content>
+     *           This popover is rendered outside of the floating toolbar, but the toolbar will not close when clicking/focusing within it.
+     *         </Popover.Content>
+     *       </FloatingToolbar.External>
+     *     </Popover.Portal>
+     *   </Popover.Root>
+     * </FloatingToolbar>
+     */
+    External: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+};
+
 interface HistoryVersionPreviewProps extends ComponentPropsWithoutRef<"div"> {
     version: HistoryVersion;
     editor: Editor;
@@ -79,15 +330,8 @@ declare const HistoryVersionPreview: react.ForwardRefExoticComponent<HistoryVers
 
 declare module "@tiptap/core" {
     interface Commands<ReturnType> {
-        comments: {
-            /**
-             * Add a comment
-             */
-            addComment: (id: string) => ReturnType;
-            selectThread: (id: string | null) => ReturnType;
-            addPendingComment: () => ReturnType;
-        };
+        comments: CommentsCommands<ReturnType>;
     }
 }
 
-export { AnchoredThreads, FloatingComposer, FloatingThreads, HistoryVersionPreview, useIsEditorReady, useLiveblocksExtension };
+export { AnchoredThreads, AnchoredThreadsProps, FloatingComposer, FloatingComposerProps, FloatingThreads, FloatingThreadsProps, FloatingToolbar, FloatingToolbarProps, HistoryVersionPreview, HistoryVersionPreviewProps, Toolbar, ToolbarBlockSelectorItem, ToolbarBlockSelectorProps, ToolbarButtonProps, ToolbarProps, ToolbarSeparatorProps, ToolbarToggleProps, useIsEditorReady, useLiveblocksExtension };