@pubwave/editor 0.1.3 → 0.2.1

package/dist/index.cjs

@@ -4854,6 +4854,89 @@ function calculateVerticalPositionFromRect(triggerRect, dropdownHeight, margin =
     margin
   );
 }
+function calculateHorizontalPosition(triggerLeft, triggerRight, dropdownWidth, preferredAlign = "left", margin = 8) {
+  const viewportWidth = window.innerWidth;
+  const triggerCenter = (triggerLeft + triggerRight) / 2;
+  const spaceLeft = triggerLeft;
+  const spaceRight = viewportWidth - triggerRight;
+  const requiredSpaceForLeft = dropdownWidth + margin;
+  const requiredSpaceForRight = dropdownWidth + margin;
+  const requiredSpaceForCenter = dropdownWidth / 2 + margin;
+  let align = preferredAlign;
+  let left2;
+  if (preferredAlign === "left") {
+    left2 = triggerLeft;
+    if (left2 < margin || left2 + dropdownWidth > viewportWidth - margin) {
+      if (spaceRight >= requiredSpaceForRight && triggerRight + dropdownWidth <= viewportWidth - margin) {
+        align = "right";
+        left2 = triggerRight - dropdownWidth;
+      } else if (spaceLeft >= requiredSpaceForCenter && triggerCenter - dropdownWidth / 2 >= margin) {
+        align = "center";
+        left2 = triggerCenter - dropdownWidth / 2;
+      } else {
+        if (spaceRight >= spaceLeft) {
+          align = "right";
+          left2 = triggerRight - dropdownWidth;
+        } else {
+          align = "left";
+          left2 = triggerLeft;
+        }
+        left2 = Math.max(margin, Math.min(left2, viewportWidth - dropdownWidth - margin));
+      }
+    }
+  } else if (preferredAlign === "center") {
+    left2 = triggerCenter - dropdownWidth / 2;
+    if (left2 < margin || left2 + dropdownWidth > viewportWidth - margin) {
+      if (spaceRight >= requiredSpaceForRight && triggerRight + dropdownWidth <= viewportWidth - margin) {
+        align = "right";
+        left2 = triggerRight - dropdownWidth;
+      } else if (spaceLeft >= requiredSpaceForLeft && triggerLeft + dropdownWidth <= viewportWidth - margin) {
+        align = "left";
+        left2 = triggerLeft;
+      } else {
+        if (spaceRight >= spaceLeft) {
+          align = "right";
+          left2 = triggerRight - dropdownWidth;
+        } else {
+          align = "left";
+          left2 = triggerLeft;
+        }
+        left2 = Math.max(margin, Math.min(left2, viewportWidth - dropdownWidth - margin));
+      }
+    }
+  } else {
+    left2 = triggerRight - dropdownWidth;
+    if (left2 < margin || left2 + dropdownWidth > viewportWidth - margin) {
+      if (spaceLeft >= requiredSpaceForLeft && triggerLeft + dropdownWidth <= viewportWidth - margin) {
+        align = "left";
+        left2 = triggerLeft;
+      } else if (spaceLeft >= requiredSpaceForCenter && triggerCenter - dropdownWidth / 2 >= margin) {
+        align = "center";
+        left2 = triggerCenter - dropdownWidth / 2;
+      } else {
+        if (spaceLeft >= spaceRight) {
+          align = "left";
+          left2 = triggerLeft;
+        } else {
+          align = "right";
+          left2 = triggerRight - dropdownWidth;
+        }
+        left2 = Math.max(margin, Math.min(left2, viewportWidth - dropdownWidth - margin));
+      }
+    }
+  }
+  left2 = Math.max(margin, Math.min(left2, viewportWidth - dropdownWidth - margin));
+  return { align, left: left2 };
+}
+function calculateHorizontalPositionFromRect(triggerRect, dropdownWidth, preferredAlign = "left", margin = 8) {
+  return calculateHorizontalPosition(
+    triggerRect.left,
+    triggerRect.right,
+    dropdownWidth,
+    preferredAlign,
+    margin
+  );
+}
 function PositionedDropdown({
   isOpen,
   buttonRef,
@@ -4866,7 +4949,8 @@ function PositionedDropdown({
   onClick,
   "data-testid": dataTestId
 }) {
-  const [position, setPosition] = React.useState("top");
+  const [verticalPosition, setVerticalPosition] = React.useState("top");
+  const [horizontalPosition, setHorizontalPosition] = React.useState(null);
   const dropdownRef = React.useRef(null);
   React.useEffect(() => {
     if (!isOpen || !buttonRef.current) return;
@@ -4874,15 +4958,37 @@ function PositionedDropdown({
       if (!dropdownRef.current || !buttonRef.current) return;
       const buttonRect = buttonRef.current.getBoundingClientRect();
       const dropdownHeight = dropdownRef.current.offsetHeight || 300;
-      const newPosition = calculateVerticalPositionFromRect(buttonRect, dropdownHeight, margin);
-      setPosition(newPosition);
+      const dropdownWidth = dropdownRef.current.offsetWidth || 240;
+      const newVerticalPosition = calculateVerticalPositionFromRect(buttonRect, dropdownHeight, margin);
+      setVerticalPosition(newVerticalPosition);
+      let parentContainer = buttonRef.current.parentElement;
+      while (parentContainer) {
+        const style2 = window.getComputedStyle(parentContainer);
+        if (style2.position === "relative" || style2.position === "absolute" || style2.position === "fixed") {
+          break;
+        }
+        parentContainer = parentContainer.parentElement;
+      }
+      const horizontalPos = calculateHorizontalPositionFromRect(
+        buttonRect,
+        dropdownWidth,
+        align,
+        margin
+      );
+      if (parentContainer) {
+        const parentRect = parentContainer.getBoundingClientRect();
+        const relativeLeft = horizontalPos.left - parentRect.left;
+        setHorizontalPosition({ align: horizontalPos.align, left: relativeLeft });
+      } else {
+        setHorizontalPosition(horizontalPos);
+      }
     };
     checkPosition();
     const rafId = requestAnimationFrame(() => {
       checkPosition();
     });
     return () => cancelAnimationFrame(rafId);
-  }, [isOpen, buttonRef, margin]);
+  }, [isOpen, buttonRef, margin, align]);
   React.useEffect(() => {
     if (!isOpen || !onClickOutside2) return;
     const handleClickOutside = (event) => {
@@ -4897,6 +5003,11 @@ function PositionedDropdown({
   }, [isOpen, onClickOutside2, buttonRef]);
   if (!isOpen) return null;
   const getHorizontalStyle = () => {
+    if (horizontalPosition) {
+      return {
+        left: `${horizontalPosition.left}px`
+      };
+    }
     switch (align) {
       case "center":
         return {
@@ -4922,7 +5033,7 @@ function PositionedDropdown({
       "data-testid": dataTestId,
       style: {
         position: "absolute",
-        ...position === "top" ? {
+        ...verticalPosition === "top" ? {
           bottom: "100%",
           marginBottom: `${margin}px`
         } : {
@@ -5254,6 +5365,9 @@ function LinkButton({ editor, isOpen, onToggle, onClose, selectionState }) {
     }
   }, [isOpen, currentLinkHref, editor]);
   React.useEffect(() => {
+    if (isMobileDevice()) {
+      return;
+    }
     if (!isOpen) {
       tippyInstancesRef.current.forEach((instance) => instance.destroy());
       tippyInstancesRef.current = [];
@@ -5601,6 +5715,9 @@ function ColorPicker({ editor, onClose, buttonRef }) {
     }
   };
   React.useEffect(() => {
+    if (isMobileDevice()) {
+      return;
+    }
     if (!pickerRef.current) return;
     tippyInstancesRef.current.forEach((instance) => instance.destroy());
     tippyInstancesRef.current = [];
@@ -5992,8 +6109,6 @@ function calculatePosition(editor, toolbarEl) {
   const toolbarRect = toolbarEl.getBoundingClientRect();
   const toolbarWidth = toolbarRect.width;
   const toolbarHeight = toolbarRect.height;
-  const centerX = (selectionLeft + selectionRight) / 2;
-  let left2 = centerX - toolbarWidth / 2;
   const selectionBottom = Math.max(start2.bottom, end2.bottom);
   const verticalPosition = calculateVerticalPosition(
     selectionTop,
@@ -6007,20 +6122,21 @@ function calculatePosition(editor, toolbarEl) {
   } else {
     top2 = selectionBottom + TOOLBAR_OFFSET;
   }
+  const horizontalPos = calculateHorizontalPosition(
+    selectionLeft,
+    selectionRight,
+    toolbarWidth,
+    "center",
+    // Default to center alignment
+    TOOLBAR_OFFSET
+  );
+  const left2 = horizontalPos.left;
   const viewportWidth = window.innerWidth;
   const viewportHeight = window.innerHeight;
-  const padding = 8;
-  if (left2 < padding) {
-    left2 = padding;
-  } else if (left2 + toolbarWidth > viewportWidth - padding) {
-    left2 = viewportWidth - toolbarWidth - padding;
-  }
-  if (top2 < padding) {
-    top2 = padding;
-  } else if (top2 + toolbarHeight > viewportHeight - padding) {
-    top2 = viewportHeight - toolbarHeight - padding;
-  }
-  return { top: top2, left: left2, visible: true };
+  const padding = TOOLBAR_OFFSET;
+  const clampedLeft = Math.max(padding, Math.min(left2, viewportWidth - toolbarWidth - padding));
+  const clampedTop = Math.max(padding, Math.min(top2, viewportHeight - toolbarHeight - padding));
+  return { top: clampedTop, left: clampedLeft, visible: true };
 }
 function BubbleToolbar({
   editor,
@@ -6181,6 +6297,9 @@ function BubbleToolbar({
   }, [shouldShow, updatePosition]);
   const locale = useLocale();
   React.useEffect(() => {
+    if (isMobileDevice()) {
+      return;
+    }
     if (!shouldShow || !position.visible || !toolbarRef.current) {
       tippyInstancesRef.current.forEach((instance) => instance.destroy());
       tippyInstancesRef.current = [];
@@ -6265,6 +6384,7 @@ function BubbleToolbar({
     }
   );
 }
+const MIN_WINDOW_WIDTH = 768;
 function getClosestBlock(target, proseMirror, editor) {
   if (!target || !(target instanceof Node)) return null;
   try {
@@ -6310,14 +6430,16 @@ function BlockHandle({ editor }) {
   const [isDragging, setIsDragging] = React.useState(false);
   const [position, setPosition] = React.useState({ top: 0 });
   const [isMobile, setIsMobile] = React.useState(false);
+  const [isWindowTooSmall, setIsWindowTooSmall] = React.useState(false);
   React.useEffect(() => {
-    const checkMobile = () => {
+    const checkDeviceAndWindow = () => {
       setIsMobile(isMobileDevice());
+      setIsWindowTooSmall(window.innerWidth < MIN_WINDOW_WIDTH);
     };
-    checkMobile();
-    window.addEventListener("resize", checkMobile);
+    checkDeviceAndWindow();
+    window.addEventListener("resize", checkDeviceAndWindow);
     return () => {
-      window.removeEventListener("resize", checkMobile);
+      window.removeEventListener("resize", checkDeviceAndWindow);
     };
   }, []);
   const updatePosition = React.useCallback(() => {
@@ -6552,7 +6674,7 @@ function BlockHandle({ editor }) {
     }
     setVisible(false);
   }, []);
-  if (isMobile || !visible) return null;
+  if (isMobile || isWindowTooSmall || !visible) return null;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {

package/dist/index.js

@@ -4852,6 +4852,89 @@ function calculateVerticalPositionFromRect(triggerRect, dropdownHeight, margin =
     margin
   );
 }
+function calculateHorizontalPosition(triggerLeft, triggerRight, dropdownWidth, preferredAlign = "left", margin = 8) {
+  const viewportWidth = window.innerWidth;
+  const triggerCenter = (triggerLeft + triggerRight) / 2;
+  const spaceLeft = triggerLeft;
+  const spaceRight = viewportWidth - triggerRight;
+  const requiredSpaceForLeft = dropdownWidth + margin;
+  const requiredSpaceForRight = dropdownWidth + margin;
+  const requiredSpaceForCenter = dropdownWidth / 2 + margin;
+  let align = preferredAlign;
+  let left2;
+  if (preferredAlign === "left") {
+    left2 = triggerLeft;
+    if (left2 < margin || left2 + dropdownWidth > viewportWidth - margin) {
+      if (spaceRight >= requiredSpaceForRight && triggerRight + dropdownWidth <= viewportWidth - margin) {
+        align = "right";
+        left2 = triggerRight - dropdownWidth;
+      } else if (spaceLeft >= requiredSpaceForCenter && triggerCenter - dropdownWidth / 2 >= margin) {
+        align = "center";
+        left2 = triggerCenter - dropdownWidth / 2;
+      } else {
+        if (spaceRight >= spaceLeft) {
+          align = "right";
+          left2 = triggerRight - dropdownWidth;
+        } else {
+          align = "left";
+          left2 = triggerLeft;
+        }
+        left2 = Math.max(margin, Math.min(left2, viewportWidth - dropdownWidth - margin));
+      }
+    }
+  } else if (preferredAlign === "center") {
+    left2 = triggerCenter - dropdownWidth / 2;
+    if (left2 < margin || left2 + dropdownWidth > viewportWidth - margin) {
+      if (spaceRight >= requiredSpaceForRight && triggerRight + dropdownWidth <= viewportWidth - margin) {
+        align = "right";
+        left2 = triggerRight - dropdownWidth;
+      } else if (spaceLeft >= requiredSpaceForLeft && triggerLeft + dropdownWidth <= viewportWidth - margin) {
+        align = "left";
+        left2 = triggerLeft;
+      } else {
+        if (spaceRight >= spaceLeft) {
+          align = "right";
+          left2 = triggerRight - dropdownWidth;
+        } else {
+          align = "left";
+          left2 = triggerLeft;
+        }
+        left2 = Math.max(margin, Math.min(left2, viewportWidth - dropdownWidth - margin));
+      }
+    }
+  } else {
+    left2 = triggerRight - dropdownWidth;
+    if (left2 < margin || left2 + dropdownWidth > viewportWidth - margin) {
+      if (spaceLeft >= requiredSpaceForLeft && triggerLeft + dropdownWidth <= viewportWidth - margin) {
+        align = "left";
+        left2 = triggerLeft;
+      } else if (spaceLeft >= requiredSpaceForCenter && triggerCenter - dropdownWidth / 2 >= margin) {
+        align = "center";
+        left2 = triggerCenter - dropdownWidth / 2;
+      } else {
+        if (spaceLeft >= spaceRight) {
+          align = "left";
+          left2 = triggerLeft;
+        } else {
+          align = "right";
+          left2 = triggerRight - dropdownWidth;
+        }
+        left2 = Math.max(margin, Math.min(left2, viewportWidth - dropdownWidth - margin));
+      }
+    }
+  }
+  left2 = Math.max(margin, Math.min(left2, viewportWidth - dropdownWidth - margin));
+  return { align, left: left2 };
+}
+function calculateHorizontalPositionFromRect(triggerRect, dropdownWidth, preferredAlign = "left", margin = 8) {
+  return calculateHorizontalPosition(
+    triggerRect.left,
+    triggerRect.right,
+    dropdownWidth,
+    preferredAlign,
+    margin
+  );
+}
 function PositionedDropdown({
   isOpen,
   buttonRef,
@@ -4864,7 +4947,8 @@ function PositionedDropdown({
   onClick,
   "data-testid": dataTestId
 }) {
-  const [position, setPosition] = useState("top");
+  const [verticalPosition, setVerticalPosition] = useState("top");
+  const [horizontalPosition, setHorizontalPosition] = useState(null);
   const dropdownRef = useRef(null);
   useEffect(() => {
     if (!isOpen || !buttonRef.current) return;
@@ -4872,15 +4956,37 @@ function PositionedDropdown({
       if (!dropdownRef.current || !buttonRef.current) return;
       const buttonRect = buttonRef.current.getBoundingClientRect();
       const dropdownHeight = dropdownRef.current.offsetHeight || 300;
-      const newPosition = calculateVerticalPositionFromRect(buttonRect, dropdownHeight, margin);
-      setPosition(newPosition);
+      const dropdownWidth = dropdownRef.current.offsetWidth || 240;
+      const newVerticalPosition = calculateVerticalPositionFromRect(buttonRect, dropdownHeight, margin);
+      setVerticalPosition(newVerticalPosition);
+      let parentContainer = buttonRef.current.parentElement;
+      while (parentContainer) {
+        const style2 = window.getComputedStyle(parentContainer);
+        if (style2.position === "relative" || style2.position === "absolute" || style2.position === "fixed") {
+          break;
+        }
+        parentContainer = parentContainer.parentElement;
+      }
+      const horizontalPos = calculateHorizontalPositionFromRect(
+        buttonRect,
+        dropdownWidth,
+        align,
+        margin
+      );
+      if (parentContainer) {
+        const parentRect = parentContainer.getBoundingClientRect();
+        const relativeLeft = horizontalPos.left - parentRect.left;
+        setHorizontalPosition({ align: horizontalPos.align, left: relativeLeft });
+      } else {
+        setHorizontalPosition(horizontalPos);
+      }
     };
     checkPosition();
     const rafId = requestAnimationFrame(() => {
       checkPosition();
     });
     return () => cancelAnimationFrame(rafId);
-  }, [isOpen, buttonRef, margin]);
+  }, [isOpen, buttonRef, margin, align]);
   useEffect(() => {
     if (!isOpen || !onClickOutside2) return;
     const handleClickOutside = (event) => {
@@ -4895,6 +5001,11 @@ function PositionedDropdown({
   }, [isOpen, onClickOutside2, buttonRef]);
   if (!isOpen) return null;
   const getHorizontalStyle = () => {
+    if (horizontalPosition) {
+      return {
+        left: `${horizontalPosition.left}px`
+      };
+    }
     switch (align) {
       case "center":
         return {
@@ -4920,7 +5031,7 @@ function PositionedDropdown({
       "data-testid": dataTestId,
       style: {
         position: "absolute",
-        ...position === "top" ? {
+        ...verticalPosition === "top" ? {
           bottom: "100%",
           marginBottom: `${margin}px`
         } : {
@@ -5252,6 +5363,9 @@ function LinkButton({ editor, isOpen, onToggle, onClose, selectionState }) {
     }
   }, [isOpen, currentLinkHref, editor]);
   useEffect(() => {
+    if (isMobileDevice()) {
+      return;
+    }
     if (!isOpen) {
       tippyInstancesRef.current.forEach((instance) => instance.destroy());
       tippyInstancesRef.current = [];
@@ -5599,6 +5713,9 @@ function ColorPicker({ editor, onClose, buttonRef }) {
     }
   };
   useEffect(() => {
+    if (isMobileDevice()) {
+      return;
+    }
     if (!pickerRef.current) return;
     tippyInstancesRef.current.forEach((instance) => instance.destroy());
     tippyInstancesRef.current = [];
@@ -5990,8 +6107,6 @@ function calculatePosition(editor, toolbarEl) {
   const toolbarRect = toolbarEl.getBoundingClientRect();
   const toolbarWidth = toolbarRect.width;
   const toolbarHeight = toolbarRect.height;
-  const centerX = (selectionLeft + selectionRight) / 2;
-  let left2 = centerX - toolbarWidth / 2;
   const selectionBottom = Math.max(start2.bottom, end2.bottom);
   const verticalPosition = calculateVerticalPosition(
     selectionTop,
@@ -6005,20 +6120,21 @@ function calculatePosition(editor, toolbarEl) {
   } else {
     top2 = selectionBottom + TOOLBAR_OFFSET;
   }
+  const horizontalPos = calculateHorizontalPosition(
+    selectionLeft,
+    selectionRight,
+    toolbarWidth,
+    "center",
+    // Default to center alignment
+    TOOLBAR_OFFSET
+  );
+  const left2 = horizontalPos.left;
   const viewportWidth = window.innerWidth;
   const viewportHeight = window.innerHeight;
-  const padding = 8;
-  if (left2 < padding) {
-    left2 = padding;
-  } else if (left2 + toolbarWidth > viewportWidth - padding) {
-    left2 = viewportWidth - toolbarWidth - padding;
-  }
-  if (top2 < padding) {
-    top2 = padding;
-  } else if (top2 + toolbarHeight > viewportHeight - padding) {
-    top2 = viewportHeight - toolbarHeight - padding;
-  }
-  return { top: top2, left: left2, visible: true };
+  const padding = TOOLBAR_OFFSET;
+  const clampedLeft = Math.max(padding, Math.min(left2, viewportWidth - toolbarWidth - padding));
+  const clampedTop = Math.max(padding, Math.min(top2, viewportHeight - toolbarHeight - padding));
+  return { top: clampedTop, left: clampedLeft, visible: true };
 }
 function BubbleToolbar({
   editor,
@@ -6179,6 +6295,9 @@ function BubbleToolbar({
   }, [shouldShow, updatePosition]);
   const locale = useLocale();
   useEffect(() => {
+    if (isMobileDevice()) {
+      return;
+    }
     if (!shouldShow || !position.visible || !toolbarRef.current) {
       tippyInstancesRef.current.forEach((instance) => instance.destroy());
       tippyInstancesRef.current = [];
@@ -6263,6 +6382,7 @@ function BubbleToolbar({
     }
   );
 }
+const MIN_WINDOW_WIDTH = 768;
 function getClosestBlock(target, proseMirror, editor) {
   if (!target || !(target instanceof Node)) return null;
   try {
@@ -6308,14 +6428,16 @@ function BlockHandle({ editor }) {
   const [isDragging, setIsDragging] = useState(false);
   const [position, setPosition] = useState({ top: 0 });
   const [isMobile, setIsMobile] = useState(false);
+  const [isWindowTooSmall, setIsWindowTooSmall] = useState(false);
   useEffect(() => {
-    const checkMobile = () => {
+    const checkDeviceAndWindow = () => {
       setIsMobile(isMobileDevice());
+      setIsWindowTooSmall(window.innerWidth < MIN_WINDOW_WIDTH);
     };
-    checkMobile();
-    window.addEventListener("resize", checkMobile);
+    checkDeviceAndWindow();
+    window.addEventListener("resize", checkDeviceAndWindow);
     return () => {
-      window.removeEventListener("resize", checkMobile);
+      window.removeEventListener("resize", checkDeviceAndWindow);
     };
   }, []);
   const updatePosition = useCallback(() => {
@@ -6550,7 +6672,7 @@ function BlockHandle({ editor }) {
     }
     setVisible(false);
   }, []);
-  if (isMobile || !visible) return null;
+  if (isMobile || isWindowTooSmall || !visible) return null;
   return /* @__PURE__ */ jsxs(
     "div",
     {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pubwave/editor",
-  "version": "0.1.3",
+  "version": "0.2.1",
   "description": "A Notion-level block editor built with React and Tiptap",
   "type": "module",
   "main": "./dist/index.cjs",