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

package/dist/toolbar/FloatingToolbar.mjs

@@ -1,13 +1,13 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { inline, flip, hide, shift, limitShift, offset, size, autoUpdate, useFloating } from '@floating-ui/react-dom';
 import { useLayoutEffect } from '@liveblocks/react/_private';
-import { useRefs, TooltipProvider } from '@liveblocks/react-ui/_private';
+import { useInitial, useRefs, TooltipProvider } from '@liveblocks/react-ui/_private';
 import { useEditorState, isTextSelection } from '@tiptap/react';
 import { forwardRef, useRef, useState, useEffect, useCallback, useMemo } from 'react';
 import { createPortal } from 'react-dom';
 import { classNames } from '../classnames.mjs';
 import { EditorProvider } from '../context.mjs';
-import { FloatingToolbarContext } from './FloatingToolbarContext.mjs';
+import { FloatingToolbarContext, FloatingToolbarExternal } from './shared.mjs';
 import { Toolbar, applyToolbarSlot } from './Toolbar.mjs';
 
 const FLOATING_TOOLBAR_COLLISION_PADDING = 10;
@@ -27,270 +27,295 @@ function DefaultFloatingToolbarContent({ editor }) {
     ]
   });
 }
-const FloatingToolbar = forwardRef(
-  ({
-    children = DefaultFloatingToolbarContent,
-    before,
-    after,
-    position = "top",
-    offset: sideOffset = 6,
-    editor,
-    onPointerDown,
-    onFocus,
-    onBlur,
-    className,
-    ...props
-  }, forwardedRef) => {
-    const toolbarRef = useRef(null);
-    const [isPointerDown, setPointerDown] = useState(false);
-    const [isFocused, setFocused] = useState(false);
-    const [isManuallyClosed, setManuallyClosed] = useState(false);
-    const isEditable = useEditorState({
+const FloatingToolbar = Object.assign(
+  forwardRef(
+    ({
+      children = DefaultFloatingToolbarContent,
+      before,
+      after,
+      position = "top",
+      offset: sideOffset = 6,
       editor,
-      equalityFn: Object.is,
-      selector: (ctx) => ctx.editor?.isEditable ?? false
-    }) ?? false;
-    const hasSelectionRange = 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 = useRef(null);
+      const externalIds = useInitial(() => /* @__PURE__ */ new Set());
+      const [isPointerDown, setPointerDown] = useState(false);
+      const [isFocused, setFocused] = useState(false);
+      const [isManuallyClosed, setManuallyClosed] = useState(false);
+      const isEditable = useEditorState({
+        editor,
+        equalityFn: Object.is,
+        selector: (ctx) => ctx.editor?.isEditable ?? false
+      }) ?? false;
+      const hasSelectionRange = 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 isTextSelection(selection) && doc.textBetween(from, to).length > 0;
         }
-        return isTextSelection(selection) && doc.textBetween(from, to).length > 0;
-      }
-    }) ?? false;
-    const isOpen = isFocused && !isPointerDown && hasSelectionRange && !isManuallyClosed;
-    const [delayedIsOpen, setDelayedIsOpen] = useState(isOpen);
-    const delayedIsOpenTimeoutRef = useRef();
-    useEffect(() => {
-      if (!editor) {
-        return;
-      }
-      setManuallyClosed(false);
-      const handleSelectionChange = () => {
-        setManuallyClosed(false);
-      };
-      editor.on("selectionUpdate", handleSelectionChange);
-      return () => {
-        editor.off("selectionUpdate", handleSelectionChange);
-      };
-    }, [isFocused, hasSelectionRange, editor]);
-    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] = useState(isOpen);
+      const delayedIsOpenTimeoutRef = useRef();
+      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]);
+      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 = useCallback(
-      (event) => {
-        onFocus?.(event);
-        if (!event.isDefaultPrevented()) {
+        const handleFocus2 = () => {
           setFocused(true);
-        }
-      },
-      [onFocus]
-    );
-    const handleBlur = 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 = useCallback(
+        (event) => {
+          onFocus?.(event);
+          if (!event.isDefaultPrevented()) {
+            setFocused(true);
+          }
+        },
+        [onFocus]
+      );
+      const handleBlur = 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]
+      );
+      useEffect(() => {
+        if (isOpen) {
+          delayedIsOpenTimeoutRef.current = window.setTimeout(() => {
+            setDelayedIsOpen(true);
+          }, FLOATING_TOOLBAR_OPEN_DELAY);
+        } else {
+          setDelayedIsOpen(false);
         }
-      },
-      [onBlur, editor]
-    );
-    useEffect(() => {
-      if (isOpen) {
-        delayedIsOpenTimeoutRef.current = window.setTimeout(() => {
-          setDelayedIsOpen(true);
-        }, FLOATING_TOOLBAR_OPEN_DELAY);
-      } else {
-        setDelayedIsOpen(false);
-      }
-      return () => {
-        window.clearTimeout(delayedIsOpenTimeoutRef.current);
-      };
-    }, [isOpen]);
-    const floatingOptions = useMemo(() => {
-      const detectOverflowOptions = {
-        padding: FLOATING_TOOLBAR_COLLISION_PADDING
-      };
-      return {
-        strategy: "fixed",
-        placement: position,
-        middleware: [
-          inline(detectOverflowOptions),
-          flip({ ...detectOverflowOptions, crossAxis: false }),
-          hide(detectOverflowOptions),
-          shift({
-            ...detectOverflowOptions,
-            limiter: limitShift()
-          }),
-          offset(sideOffset),
-          size(detectOverflowOptions)
-        ],
-        whileElementsMounted: (...args) => {
-          return autoUpdate(...args, {
-            animationFrame: true
-          });
+        return () => {
+          window.clearTimeout(delayedIsOpenTimeoutRef.current);
+        };
+      }, [isOpen]);
+      const floatingOptions = useMemo(() => {
+        const detectOverflowOptions = {
+          padding: FLOATING_TOOLBAR_COLLISION_PADDING
+        };
+        return {
+          strategy: "fixed",
+          placement: position,
+          middleware: [
+            inline(detectOverflowOptions),
+            flip({ ...detectOverflowOptions, crossAxis: false }),
+            hide(detectOverflowOptions),
+            shift({
+              ...detectOverflowOptions,
+              limiter: limitShift()
+            }),
+            offset(sideOffset),
+            size(detectOverflowOptions)
+          ],
+          whileElementsMounted: (...args) => {
+            return autoUpdate(...args, {
+              animationFrame: true
+            });
+          }
+        };
+      }, [position, sideOffset]);
+      const {
+        refs: { setReference, setFloating },
+        strategy,
+        x,
+        y,
+        isPositioned
+      } = useFloating({
+        ...floatingOptions,
+        open: delayedIsOpen
+      });
+      const mergedRefs = useRefs(forwardedRef, toolbarRef, setFloating);
+      const handlePointerDown = useCallback(
+        (event) => {
+          onPointerDown?.(event);
+          event.stopPropagation();
+          if (event.target === toolbarRef.current) {
+            event.preventDefault();
+          }
+        },
+        [onPointerDown]
+      );
+      useEffect(() => {
+        if (!editor || !isEditable) {
+          return;
         }
-      };
-    }, [position, sideOffset]);
-    const {
-      refs: { setReference, setFloating },
-      strategy,
-      x,
-      y,
-      isPositioned
-    } = useFloating({
-      ...floatingOptions,
-      open: delayedIsOpen
-    });
-    const mergedRefs = useRefs(forwardedRef, toolbarRef, setFloating);
-    const handlePointerDown = 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]);
+      useLayoutEffect(() => {
+        if (!editor || !delayedIsOpen) {
+          return;
         }
-      },
-      [onPointerDown]
-    );
-    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]);
-    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]);
+      useEffect(() => {
+        if (!editor || !delayedIsOpen) {
+          return;
         }
-      };
-      editor.on("transaction", updateSelectionReference);
-      updateSelectionReference();
-      return () => {
-        editor.off("transaction", updateSelectionReference);
-      };
-    }, [editor, delayedIsOpen, setReference]);
-    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 = useCallback(() => {
+        setManuallyClosed(true);
+      }, [setManuallyClosed]);
+      const registerExternal = 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 = useCallback(() => {
-      setManuallyClosed(true);
-    }, [setManuallyClosed]);
-    if (!editor || !delayedIsOpen) {
-      return null;
-    }
-    const slotProps = { editor };
-    return createPortal(
-      /* @__PURE__ */ jsx(TooltipProvider, {
-        children: /* @__PURE__ */ jsx(EditorProvider, {
-          editor,
-          children: /* @__PURE__ */ jsx(FloatingToolbarContext.Provider, {
-            value: { close },
-            children: /* @__PURE__ */ jsxs("div", {
-              role: "toolbar",
-              "aria-label": "Floating toolbar",
-              "aria-orientation": "horizontal",
-              className: 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: [
-                applyToolbarSlot(before, slotProps),
-                applyToolbarSlot(children, slotProps),
-                applyToolbarSlot(after, slotProps)
-              ]
+      const slotProps = { editor };
+      return createPortal(
+        /* @__PURE__ */ jsx(TooltipProvider, {
+          children: /* @__PURE__ */ jsx(EditorProvider, {
+            editor,
+            children: /* @__PURE__ */ jsx(FloatingToolbarContext.Provider, {
+              value: { close, registerExternal },
+              children: /* @__PURE__ */ jsxs("div", {
+                role: "toolbar",
+                "aria-label": "Floating toolbar",
+                "aria-orientation": "horizontal",
+                className: 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: [
+                  applyToolbarSlot(before, slotProps),
+                  applyToolbarSlot(children, slotProps),
+                  applyToolbarSlot(after, slotProps)
+                ]
+              })
             })
           })
-        })
-      }),
-      document.body
-    );
+        }),
+        document.body
+      );
+    }
+  ),
+  {
+    External: FloatingToolbarExternal
   }
 );