@liveblocks/react-tiptap 2.16.0-toolbars1 → 2.16.0-toolbars2

package/dist/index.d.mts

@@ -121,7 +121,9 @@ interface FloatingToolbarProps extends Omit<ComponentProps<"div">, "children"> {
     before?: ToolbarSlot;
     after?: ToolbarSlot;
 }
-declare const FloatingToolbar: react.ForwardRefExoticComponent<Omit<FloatingToolbarProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+declare const FloatingToolbar: react.ForwardRefExoticComponent<Omit<FloatingToolbarProps, "ref"> & react.RefAttributes<HTMLDivElement>> & {
+    External: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+};
 
 interface HistoryVersionPreviewProps extends ComponentPropsWithoutRef<"div"> {
     version: HistoryVersion;

package/dist/index.d.ts

@@ -121,7 +121,9 @@ interface FloatingToolbarProps extends Omit<ComponentProps<"div">, "children"> {
     before?: ToolbarSlot;
     after?: ToolbarSlot;
 }
-declare const FloatingToolbar: react.ForwardRefExoticComponent<Omit<FloatingToolbarProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+declare const FloatingToolbar: react.ForwardRefExoticComponent<Omit<FloatingToolbarProps, "ref"> & react.RefAttributes<HTMLDivElement>> & {
+    External: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+};
 
 interface HistoryVersionPreviewProps extends ComponentPropsWithoutRef<"div"> {
     version: HistoryVersion;

package/dist/toolbar/FloatingToolbar.js

@@ -9,7 +9,7 @@ var react = require('react');
 var reactDom$1 = require('react-dom');
 var classnames = require('../classnames.js');
 var context = require('../context.js');
-var FloatingToolbarContext = require('./FloatingToolbarContext.js');
+var shared = require('./shared.js');
 var Toolbar = require('./Toolbar.js');
 
 const FLOATING_TOOLBAR_COLLISION_PADDING = 10;
@@ -29,270 +29,295 @@ function DefaultFloatingToolbarContent({ editor }) {
     ]
   });
 }
-const FloatingToolbar = react.forwardRef(
-  ({
-    children = DefaultFloatingToolbarContent,
-    before,
-    after,
-    position = "top",
-    offset: sideOffset = 6,
-    editor,
-    onPointerDown,
-    onFocus,
-    onBlur,
-    className,
-    ...props
-  }, forwardedRef) => {
-    const toolbarRef = react.useRef(null);
-    const [isPointerDown, setPointerDown] = react.useState(false);
-    const [isFocused, setFocused] = react.useState(false);
-    const [isManuallyClosed, setManuallyClosed] = react.useState(false);
-    const isEditable = react$1.useEditorState({
+const FloatingToolbar = Object.assign(
+  react.forwardRef(
+    ({
+      children = DefaultFloatingToolbarContent,
+      before,
+      after,
+      position = "top",
+      offset: sideOffset = 6,
       editor,
-      equalityFn: Object.is,
-      selector: (ctx) => ctx.editor?.isEditable ?? false
-    }) ?? false;
-    const hasSelectionRange = react$1.useEditorState({
-      editor,
-      equalityFn: Object.is,
-      selector: (ctx) => {
-        const editor2 = ctx.editor;
-        if (!editor2) {
-          return false;
-        }
-        const { doc, selection } = editor2.state;
-        const { empty, ranges } = selection;
-        const from = Math.min(...ranges.map((range) => range.$from.pos));
-        const to = Math.max(...ranges.map((range) => range.$to.pos));
-        if (empty) {
-          return false;
+      onPointerDown,
+      onFocus,
+      onBlur,
+      className,
+      ...props
+    }, forwardedRef) => {
+      const toolbarRef = react.useRef(null);
+      const externalIds = _private.useInitial(() => /* @__PURE__ */ new Set());
+      const [isPointerDown, setPointerDown] = react.useState(false);
+      const [isFocused, setFocused] = react.useState(false);
+      const [isManuallyClosed, setManuallyClosed] = react.useState(false);
+      const isEditable = react$1.useEditorState({
+        editor,
+        equalityFn: Object.is,
+        selector: (ctx) => ctx.editor?.isEditable ?? false
+      }) ?? false;
+      const hasSelectionRange = react$1.useEditorState({
+        editor,
+        equalityFn: Object.is,
+        selector: (ctx) => {
+          const editor2 = ctx.editor;
+          if (!editor2) {
+            return false;
+          }
+          const { doc, selection } = editor2.state;
+          const { empty, ranges } = selection;
+          const from = Math.min(...ranges.map((range) => range.$from.pos));
+          const to = Math.max(...ranges.map((range) => range.$to.pos));
+          if (empty) {
+            return false;
+          }
+          return react$1.isTextSelection(selection) && doc.textBetween(from, to).length > 0;
         }
-        return react$1.isTextSelection(selection) && doc.textBetween(from, to).length > 0;
-      }
-    }) ?? false;
-    const isOpen = isFocused && !isPointerDown && hasSelectionRange && !isManuallyClosed;
-    const [delayedIsOpen, setDelayedIsOpen] = react.useState(isOpen);
-    const delayedIsOpenTimeoutRef = react.useRef();
-    react.useEffect(() => {
-      if (!editor) {
-        return;
-      }
-      setManuallyClosed(false);
-      const handleSelectionChange = () => {
-        setManuallyClosed(false);
-      };
-      editor.on("selectionUpdate", handleSelectionChange);
-      return () => {
-        editor.off("selectionUpdate", handleSelectionChange);
-      };
-    }, [isFocused, hasSelectionRange, editor]);
-    react.useEffect(() => {
-      if (!editor) {
-        return;
-      }
-      const handleFocus2 = () => {
-        setFocused(true);
-      };
-      const handleBlur2 = (event) => {
-        if (event.relatedTarget && toolbarRef.current?.contains(event.relatedTarget)) {
+      }) ?? false;
+      const isOpen = isFocused && !isPointerDown && hasSelectionRange && !isManuallyClosed;
+      const [delayedIsOpen, setDelayedIsOpen] = react.useState(isOpen);
+      const delayedIsOpenTimeoutRef = react.useRef();
+      react.useEffect(() => {
+        if (!editor) {
           return;
         }
-        if (event.relatedTarget === editor.view.dom) {
+        setManuallyClosed(false);
+        const handleSelectionChange = () => {
+          setManuallyClosed(false);
+        };
+        editor.on("selectionUpdate", handleSelectionChange);
+        return () => {
+          editor.off("selectionUpdate", handleSelectionChange);
+        };
+      }, [isFocused, hasSelectionRange, editor]);
+      react.useEffect(() => {
+        if (!editor) {
           return;
         }
-        setFocused(false);
-      };
-      editor.view.dom.addEventListener("focus", handleFocus2);
-      editor.view.dom.addEventListener("blur", handleBlur2);
-      return () => {
-        editor.view.dom.removeEventListener("focus", handleFocus2);
-        editor.view.dom.removeEventListener("blur", handleBlur2);
-      };
-    }, [editor]);
-    const handleFocus = react.useCallback(
-      (event) => {
-        onFocus?.(event);
-        if (!event.isDefaultPrevented()) {
+        const handleFocus2 = () => {
           setFocused(true);
-        }
-      },
-      [onFocus]
-    );
-    const handleBlur = react.useCallback(
-      (event) => {
-        onBlur?.(event);
-        if (!event.isDefaultPrevented()) {
+        };
+        const handleBlur2 = (event) => {
           if (event.relatedTarget && toolbarRef.current?.contains(event.relatedTarget)) {
             return;
           }
-          if (event.relatedTarget === editor?.view.dom) {
+          if (event.relatedTarget === editor.view.dom) {
             return;
           }
+          for (const externalId of externalIds) {
+            if (document.getElementById(externalId)?.contains(event.relatedTarget)) {
+              return;
+            }
+          }
           setFocused(false);
+        };
+        editor.view.dom.addEventListener("focus", handleFocus2);
+        editor.view.dom.addEventListener("blur", handleBlur2);
+        return () => {
+          editor.view.dom.removeEventListener("focus", handleFocus2);
+          editor.view.dom.removeEventListener("blur", handleBlur2);
+        };
+      }, [editor, externalIds]);
+      const handleFocus = react.useCallback(
+        (event) => {
+          onFocus?.(event);
+          if (!event.isDefaultPrevented()) {
+            setFocused(true);
+          }
+        },
+        [onFocus]
+      );
+      const handleBlur = react.useCallback(
+        (event) => {
+          onBlur?.(event);
+          if (!event.isDefaultPrevented()) {
+            if (event.relatedTarget && toolbarRef.current?.contains(event.relatedTarget)) {
+              return;
+            }
+            if (event.relatedTarget === editor?.view.dom) {
+              return;
+            }
+            for (const externalId of externalIds) {
+              if (document.getElementById(externalId)?.contains(event.relatedTarget)) {
+                return;
+              }
+            }
+            setFocused(false);
+          }
+        },
+        [onBlur, editor, externalIds]
+      );
+      react.useEffect(() => {
+        if (isOpen) {
+          delayedIsOpenTimeoutRef.current = window.setTimeout(() => {
+            setDelayedIsOpen(true);
+          }, FLOATING_TOOLBAR_OPEN_DELAY);
+        } else {
+          setDelayedIsOpen(false);
         }
-      },
-      [onBlur, editor]
-    );
-    react.useEffect(() => {
-      if (isOpen) {
-        delayedIsOpenTimeoutRef.current = window.setTimeout(() => {
-          setDelayedIsOpen(true);
-        }, FLOATING_TOOLBAR_OPEN_DELAY);
-      } else {
-        setDelayedIsOpen(false);
-      }
-      return () => {
-        window.clearTimeout(delayedIsOpenTimeoutRef.current);
-      };
-    }, [isOpen]);
-    const floatingOptions = react.useMemo(() => {
-      const detectOverflowOptions = {
-        padding: FLOATING_TOOLBAR_COLLISION_PADDING
-      };
-      return {
-        strategy: "fixed",
-        placement: position,
-        middleware: [
-          reactDom.inline(detectOverflowOptions),
-          reactDom.flip({ ...detectOverflowOptions, crossAxis: false }),
-          reactDom.hide(detectOverflowOptions),
-          reactDom.shift({
-            ...detectOverflowOptions,
-            limiter: reactDom.limitShift()
-          }),
-          reactDom.offset(sideOffset),
-          reactDom.size(detectOverflowOptions)
-        ],
-        whileElementsMounted: (...args) => {
-          return reactDom.autoUpdate(...args, {
-            animationFrame: true
-          });
+        return () => {
+          window.clearTimeout(delayedIsOpenTimeoutRef.current);
+        };
+      }, [isOpen]);
+      const floatingOptions = react.useMemo(() => {
+        const detectOverflowOptions = {
+          padding: FLOATING_TOOLBAR_COLLISION_PADDING
+        };
+        return {
+          strategy: "fixed",
+          placement: position,
+          middleware: [
+            reactDom.inline(detectOverflowOptions),
+            reactDom.flip({ ...detectOverflowOptions, crossAxis: false }),
+            reactDom.hide(detectOverflowOptions),
+            reactDom.shift({
+              ...detectOverflowOptions,
+              limiter: reactDom.limitShift()
+            }),
+            reactDom.offset(sideOffset),
+            reactDom.size(detectOverflowOptions)
+          ],
+          whileElementsMounted: (...args) => {
+            return reactDom.autoUpdate(...args, {
+              animationFrame: true
+            });
+          }
+        };
+      }, [position, sideOffset]);
+      const {
+        refs: { setReference, setFloating },
+        strategy,
+        x,
+        y,
+        isPositioned
+      } = reactDom.useFloating({
+        ...floatingOptions,
+        open: delayedIsOpen
+      });
+      const mergedRefs = _private.useRefs(forwardedRef, toolbarRef, setFloating);
+      const handlePointerDown = react.useCallback(
+        (event) => {
+          onPointerDown?.(event);
+          event.stopPropagation();
+          if (event.target === toolbarRef.current) {
+            event.preventDefault();
+          }
+        },
+        [onPointerDown]
+      );
+      react.useEffect(() => {
+        if (!editor || !isEditable) {
+          return;
         }
-      };
-    }, [position, sideOffset]);
-    const {
-      refs: { setReference, setFloating },
-      strategy,
-      x,
-      y,
-      isPositioned
-    } = reactDom.useFloating({
-      ...floatingOptions,
-      open: delayedIsOpen
-    });
-    const mergedRefs = _private.useRefs(forwardedRef, toolbarRef, setFloating);
-    const handlePointerDown = react.useCallback(
-      (event) => {
-        onPointerDown?.(event);
-        event.stopPropagation();
-        if (event.target === toolbarRef.current) {
-          event.preventDefault();
+        const handlePointerDown2 = () => {
+          setPointerDown(true);
+        };
+        const handlePointerUp = () => {
+          setPointerDown(false);
+        };
+        document.addEventListener("pointerdown", handlePointerDown2);
+        document.addEventListener("pointercancel", handlePointerUp);
+        document.addEventListener("pointerup", handlePointerUp);
+        return () => {
+          document.removeEventListener("pointerdown", handlePointerDown2);
+          document.removeEventListener("pointercancel", handlePointerUp);
+          document.removeEventListener("pointerup", handlePointerUp);
+        };
+      }, [editor, isEditable]);
+      _private$1.useLayoutEffect(() => {
+        if (!editor || !delayedIsOpen) {
+          return;
         }
-      },
-      [onPointerDown]
-    );
-    react.useEffect(() => {
-      if (!editor || !isEditable) {
-        return;
-      }
-      const handlePointerDown2 = () => {
-        setPointerDown(true);
-      };
-      const handlePointerUp = () => {
-        setPointerDown(false);
-      };
-      document.addEventListener("pointerdown", handlePointerDown2);
-      document.addEventListener("pointercancel", handlePointerUp);
-      document.addEventListener("pointerup", handlePointerUp);
-      return () => {
-        document.removeEventListener("pointerdown", handlePointerDown2);
-        document.removeEventListener("pointercancel", handlePointerUp);
-        document.removeEventListener("pointerup", handlePointerUp);
-      };
-    }, [editor, isEditable]);
-    _private$1.useLayoutEffect(() => {
-      if (!editor || !delayedIsOpen) {
-        return;
-      }
-      const updateSelectionReference = () => {
-        const domSelection = window.getSelection();
-        if (editor.state.selection.empty || !domSelection || !domSelection.rangeCount) {
-          setReference(null);
-        } else {
-          const domRange = domSelection.getRangeAt(0);
-          setReference(domRange);
+        const updateSelectionReference = () => {
+          const domSelection = window.getSelection();
+          if (editor.state.selection.empty || !domSelection || !domSelection.rangeCount) {
+            setReference(null);
+          } else {
+            const domRange = domSelection.getRangeAt(0);
+            setReference(domRange);
+          }
+        };
+        editor.on("transaction", updateSelectionReference);
+        updateSelectionReference();
+        return () => {
+          editor.off("transaction", updateSelectionReference);
+        };
+      }, [editor, delayedIsOpen, setReference]);
+      react.useEffect(() => {
+        if (!editor || !delayedIsOpen) {
+          return;
         }
-      };
-      editor.on("transaction", updateSelectionReference);
-      updateSelectionReference();
-      return () => {
-        editor.off("transaction", updateSelectionReference);
-      };
-    }, [editor, delayedIsOpen, setReference]);
-    react.useEffect(() => {
+        const handleKeyDown = (event) => {
+          if (event.target !== editor.view.dom && event.defaultPrevented) {
+            return;
+          }
+          if (event.key === "Escape") {
+            event.preventDefault();
+            event.stopPropagation();
+            editor.commands.focus();
+            setManuallyClosed(true);
+          }
+        };
+        editor.view.dom.addEventListener("keydown", handleKeyDown);
+        return () => {
+          editor.view.dom.removeEventListener("keydown", handleKeyDown);
+        };
+      }, [editor, delayedIsOpen]);
+      const close = react.useCallback(() => {
+        setManuallyClosed(true);
+      }, [setManuallyClosed]);
+      const registerExternal = react.useCallback(
+        (id) => {
+          externalIds.add(id);
+          return () => {
+            externalIds.delete(id);
+          };
+        },
+        [externalIds]
+      );
       if (!editor || !delayedIsOpen) {
-        return;
+        return null;
       }
-      const handleKeyDown = (event) => {
-        if (event.target !== editor.view.dom && event.defaultPrevented) {
-          return;
-        }
-        if (event.key === "Escape") {
-          event.preventDefault();
-          event.stopPropagation();
-          editor.commands.focus();
-          setManuallyClosed(true);
-        }
-      };
-      editor.view.dom.addEventListener("keydown", handleKeyDown);
-      return () => {
-        editor.view.dom.removeEventListener("keydown", handleKeyDown);
-      };
-    }, [editor, delayedIsOpen]);
-    const close = react.useCallback(() => {
-      setManuallyClosed(true);
-    }, [setManuallyClosed]);
-    if (!editor || !delayedIsOpen) {
-      return null;
-    }
-    const slotProps = { editor };
-    return reactDom$1.createPortal(
-      /* @__PURE__ */ jsxRuntime.jsx(_private.TooltipProvider, {
-        children: /* @__PURE__ */ jsxRuntime.jsx(context.EditorProvider, {
-          editor,
-          children: /* @__PURE__ */ jsxRuntime.jsx(FloatingToolbarContext.FloatingToolbarContext.Provider, {
-            value: { close },
-            children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
-              role: "toolbar",
-              "aria-label": "Floating toolbar",
-              "aria-orientation": "horizontal",
-              className: classnames.classNames(
-                "lb-root lb-portal lb-elevation lb-tiptap-floating-toolbar lb-tiptap-toolbar",
-                className
-              ),
-              ref: mergedRefs,
-              style: {
-                position: strategy,
-                top: 0,
-                left: 0,
-                transform: isPositioned ? `translate3d(${Math.round(x)}px, ${Math.round(y)}px, 0)` : "translate3d(0, -200%, 0)",
-                minWidth: "max-content"
-              },
-              onPointerDown: handlePointerDown,
-              onFocus: handleFocus,
-              onBlur: handleBlur,
-              ...props,
-              children: [
-                Toolbar.applyToolbarSlot(before, slotProps),
-                Toolbar.applyToolbarSlot(children, slotProps),
-                Toolbar.applyToolbarSlot(after, slotProps)
-              ]
+      const slotProps = { editor };
+      return reactDom$1.createPortal(
+        /* @__PURE__ */ jsxRuntime.jsx(_private.TooltipProvider, {
+          children: /* @__PURE__ */ jsxRuntime.jsx(context.EditorProvider, {
+            editor,
+            children: /* @__PURE__ */ jsxRuntime.jsx(shared.FloatingToolbarContext.Provider, {
+              value: { close, registerExternal },
+              children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
+                role: "toolbar",
+                "aria-label": "Floating toolbar",
+                "aria-orientation": "horizontal",
+                className: classnames.classNames(
+                  "lb-root lb-portal lb-elevation lb-tiptap-floating-toolbar lb-tiptap-toolbar",
+                  className
+                ),
+                ref: mergedRefs,
+                style: {
+                  position: strategy,
+                  top: 0,
+                  left: 0,
+                  transform: isPositioned ? `translate3d(${Math.round(x)}px, ${Math.round(y)}px, 0)` : "translate3d(0, -200%, 0)",
+                  minWidth: "max-content"
+                },
+                onPointerDown: handlePointerDown,
+                onFocus: handleFocus,
+                onBlur: handleBlur,
+                ...props,
+                children: [
+                  Toolbar.applyToolbarSlot(before, slotProps),
+                  Toolbar.applyToolbarSlot(children, slotProps),
+                  Toolbar.applyToolbarSlot(after, slotProps)
+                ]
+              })
             })
           })
-        })
-      }),
-      document.body
-    );
+        }),
+        document.body
+      );
+    }
+  ),
+  {
+    External: shared.FloatingToolbarExternal
   }
 );