@pubwave/editor 0.1.2 → 0.2.0

package/README.md

@@ -600,32 +600,15 @@ const customCommands: SlashCommand[] = [
 
 ---
 
-## ⚡ SSR Integration (Next.js)
 
-The library is SSR-safe and can be imported server-side without errors. The editor component itself renders client-side only.
 
-```tsx
-'use client';
-
-import { PubwaveEditor } from '@pubwave/editor';
-import '@pubwave/editor/style.css';
-
-export default function EditorComponent() {
-  return <PubwaveEditor />;
-}
-```
 
----
 
 
 ## 🐛 Troubleshooting
 
 ### Common Issues
 
-**Q: The editor doesn't render in Next.js SSR**
-- Make sure you're using `'use client'` directive
-- Ensure the component is marked as a client component
-
 **Q: Styles are not applied**
 - Ensure you've imported the CSS: `import '@pubwave/editor/style.css'`
 - Check that CSS custom properties are defined
@@ -650,11 +633,6 @@ export default function EditorComponent() {
 
 ---
 
-## 🤝 Contributing
-
-See [CONTRIBUTING.md](./CONTRIBUTING.md) for development setup and guidelines.
-
----
 
 ## 📄 License
 

package/dist/index.cjs

@@ -463,6 +463,13 @@ function safeRequestAnimationFrame(callback) {
   }
   return 0;
 }
+function isMobileDevice() {
+  if (!canUseDOM) return false;
+  const hasTouchSupport = "ontouchstart" in window || navigator.maxTouchPoints > 0;
+  const hasCoarsePointer = window.matchMedia("(pointer: coarse)").matches;
+  const hasHover = window.matchMedia("(hover: hover)").matches;
+  return hasTouchSupport && hasCoarsePointer || hasTouchSupport && !hasHover;
+}
 function TextIcon() {
   return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 7V4h16v3M9 20h6M12 4v16" }) });
 }
@@ -4847,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,
@@ -4859,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;
@@ -4867,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) => {
@@ -4890,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 {
@@ -4915,7 +5033,7 @@ function PositionedDropdown({
       "data-testid": dataTestId,
       style: {
         position: "absolute",
-        ...position === "top" ? {
+        ...verticalPosition === "top" ? {
           bottom: "100%",
           marginBottom: `${margin}px`
         } : {
@@ -5985,8 +6103,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,
@@ -6000,20 +6116,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,
@@ -6258,6 +6375,7 @@ function BubbleToolbar({
     }
   );
 }
+const MIN_WINDOW_WIDTH = 768;
 function getClosestBlock(target, proseMirror, editor) {
   if (!target || !(target instanceof Node)) return null;
   try {
@@ -6302,18 +6420,33 @@ function BlockHandle({ editor }) {
   const [visible, setVisible] = React.useState(false);
   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 checkDeviceAndWindow = () => {
+      setIsMobile(isMobileDevice());
+      setIsWindowTooSmall(window.innerWidth < MIN_WINDOW_WIDTH);
+    };
+    checkDeviceAndWindow();
+    window.addEventListener("resize", checkDeviceAndWindow);
+    return () => {
+      window.removeEventListener("resize", checkDeviceAndWindow);
+    };
+  }, []);
   const updatePosition = React.useCallback(() => {
     const container = containerRef.current;
     const block = currentBlockRef.current;
     if (!container || !block) return;
     const editorContainer = container.closest(".pubwave-editor");
     if (!editorContainer) return;
+    void editorContainer.offsetHeight;
     const editorRect = editorContainer.getBoundingClientRect();
     let offset2 = 14;
     let target = block;
     if (["UL", "OL", "BLOCKQUOTE"].includes(block.tagName) && block.firstElementChild instanceof HTMLElement) {
       target = block.firstElementChild;
     }
+    void target.offsetHeight;
     const targetRect = target.getBoundingClientRect();
     try {
       const style = window.getComputedStyle(target);
@@ -6332,12 +6465,18 @@ function BlockHandle({ editor }) {
     } catch (e) {
     }
     const top2 = targetRect.top - editorRect.top + offset2;
-    setPosition({ top: top2 });
+    if (!isNaN(top2) && isFinite(top2) && top2 >= 0) {
+      setPosition({ top: top2 });
+    }
   }, []);
   const showHandle = React.useCallback((block) => {
     currentBlockRef.current = block;
     setVisible(true);
-    setTimeout(updatePosition, 0);
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        updatePosition();
+      });
+    });
   }, [updatePosition]);
   const hideHandle = React.useCallback(() => {
     if (!isDraggingRef.current) {
@@ -6399,8 +6538,16 @@ function BlockHandle({ editor }) {
         hideHandle();
       }, 150);
     };
+    const onEditorMouseLeave = () => {
+      if (isDraggingRef.current) return;
+      clearHideTimeout();
+      hideTimeoutRef.current = setTimeout(() => {
+        hideHandle();
+      }, 150);
+    };
     proseMirror.addEventListener("mouseover", onMouseOver);
     proseMirror.addEventListener("mouseout", onMouseOut);
+    editorContainer.addEventListener("mouseleave", onEditorMouseLeave);
     const handleTransaction = ({ transaction }) => {
       if (transaction.docChanged && !isDraggingRef.current) {
         hideHandle();
@@ -6410,10 +6557,20 @@ function BlockHandle({ editor }) {
     return () => {
       proseMirror.removeEventListener("mouseover", onMouseOver);
       proseMirror.removeEventListener("mouseout", onMouseOut);
+      editorContainer.removeEventListener("mouseleave", onEditorMouseLeave);
       editor.off("transaction", handleTransaction);
       clearHideTimeout();
     };
   }, [editor, showHandle, hideHandle, clearHideTimeout]);
+  React.useEffect(() => {
+    if (visible && currentBlockRef.current) {
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          updatePosition();
+        });
+      });
+    }
+  }, [visible, updatePosition]);
   React.useEffect(() => {
     if (!visible) return;
     const onScroll = () => {
@@ -6508,7 +6665,7 @@ function BlockHandle({ editor }) {
     }
     setVisible(false);
   }, []);
-  if (!visible) return null;
+  if (isMobile || isWindowTooSmall || !visible) return null;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -7515,6 +7672,7 @@ exports.handleSelectionClear = handleSelectionClear;
 exports.isEditable = isEditable;
 exports.isEditorValid = isEditorValid;
 exports.isMarkActive = isMarkActive;
+exports.isMobileDevice = isMobileDevice;
 exports.isNodeActive = isNodeActive;
 exports.isReadOnly = isReadOnly;
 exports.isSSR = isSSR;

package/dist/index.css

@@ -1,2 +1,2 @@
 /*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
-@layer properties{@supports ((-webkit-hyphens:none) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial}}}.invisible{visibility:hidden}.visible{visibility:visible}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.isolate{isolation:isolate}.container{width:100%}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-flex{display:inline-flex}.transform{transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}.resize{resize:both}.border{border-style:var(--tw-border-style);border-width:1px}.uppercase{text-transform:uppercase}.italic{font-style:italic}.underline{text-decoration-line:underline}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.filter{filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}:root{--pubwave-bg:#fff;--pubwave-surface:#fff;--pubwave-text:#37352f;--pubwave-text-muted:#9b9a97;--pubwave-border:#e3e2e0;--pubwave-border-light:#f3f4f6;--pubwave-hover:#f7f6f3;--pubwave-focus:#0000000d;--pubwave-selection:#3b82f6;--pubwave-selection-bg:#2383e226;--pubwave-primary:#2383e2;--pubwave-primary-hover:#2563eb;--pubwave-handle-color:#9b9a97;--pubwave-primary-faded:#3b82f61a;--pubwave-drop-indicator:#3b82f6;--pubwave-drop-target:#3b82f60d;--pubwave-error:#ef4444;--pubwave-success:#10b981;--pubwave-warning:#f59e0b;--pubwave-text-secondary:#374151;--pubwave-text-tertiary:#4b5563;--pubwave-hover-bg:#f3f4f6;--pubwave-hover-task:#e8f2ff;--pubwave-checked-text:#9ca3af;--pubwave-spacing-xs:.25rem;--pubwave-spacing-sm:.5rem;--pubwave-spacing-md:1rem;--pubwave-spacing-lg:1.5rem;--pubwave-spacing-xl:2rem;--pubwave-spacing-1:4px;--pubwave-spacing-2:8px;--pubwave-spacing-3:12px;--pubwave-spacing-4:16px;--pubwave-spacing-7:28px;--pubwave-font-family:inherit;--pubwave-font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--pubwave-font-size-xs:11px;--pubwave-font-size-sm:13px;--pubwave-font-size-base:14px;--pubwave-font-size-md:1rem;--pubwave-font-size-lg:1.125rem;--pubwave-font-size-xl:1.25rem;--pubwave-font-size-2xl:1.5rem;--pubwave-font-size-3xl:2rem;--pubwave-line-height:1.625;--pubwave-line-height-heading:1.25;--pubwave-button-width:28px;--pubwave-button-height:28px;--pubwave-icon-size:20px;--pubwave-checkbox-size:20px;--pubwave-checkbox-input-size:16px;--pubwave-divider-width:1px;--pubwave-divider-height:20px;--pubwave-drop-indicator-width:2px;--pubwave-drop-indicator-height:2px;--pubwave-task-item-height:30px;--pubwave-radius-xs:3px;--pubwave-radius-sm:4px;--pubwave-radius:6px;--pubwave-radius-md:6px;--pubwave-radius-lg:8px;--pubwave-shadow-sm:0 1px 2px 0 #0000000d;--pubwave-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;--pubwave-shadow-lg:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}@media (prefers-color-scheme:dark){:root{--pubwave-bg:#1a1a1a;--pubwave-surface:#262626;--pubwave-text:#e5e7eb;--pubwave-text-muted:#9ca3af;--pubwave-border:#374151;--pubwave-border-light:#4b5563;--pubwave-hover:#ffffff0d;--pubwave-focus:#ffffff14;--pubwave-selection:#60a5fa;--pubwave-selection-bg:#60a5fa26;--pubwave-primary:#60a5fa;--pubwave-primary-hover:#3b82f6;--pubwave-primary-faded:#60a5fa26;--pubwave-drop-indicator:#60a5fa;--pubwave-drop-target:#60a5fa14;--pubwave-error:#f87171;--pubwave-text-secondary:#d1d5db;--pubwave-text-tertiary:#9ca3af;--pubwave-hover-bg:#374151;--pubwave-hover-task:#3b82f626;--pubwave-checked-text:#6b7280}}.pubwave-editor{width:var(--pubwave-container-width,100%);max-width:var(--pubwave-container-max-width,none);font-family:var(--pubwave-font-family);color:var(--pubwave-text);background:var(--pubwave-bg,#fff);border-radius:var(--pubwave-container-border-radius,16px);min-height:var(--pubwave-container-min-height,700px);padding:var(--pubwave-container-padding-y,96px)var(--pubwave-container-padding-x,120px);padding-left:var(--pubwave-container-padding-left,140px);position:relative;box-shadow:0 0 0 1px #0000000a,0 20px 25px -5px #0000000d,0 10px 10px -5px #00000005}@media (max-width:768px){.pubwave-editor{padding:var(--pubwave-container-padding-y-mobile,20px)var(--pubwave-container-padding-x-mobile,16px);padding-left:var(--pubwave-container-padding-left-mobile,16px);border-radius:var(--pubwave-container-border-radius-mobile,12px);min-height:var(--pubwave-container-min-height-mobile,400px)}}.pubwave-editor,.pubwave-editor *,.pubwave-editor :before,.pubwave-editor :after{box-sizing:border-box}.pubwave-editor__content{outline:none;flex-direction:column;min-height:1em;display:flex}.pubwave-editor__content .ProseMirror{min-height:100%;padding-bottom:30vh;padding-top:var(--pubwave-spacing-md,1rem);outline:none;flex-grow:1}.pubwave-editor__content .ProseMirror p.is-editor-empty:first-child:before,.pubwave-editor__content.ProseMirror-focused p.pubwave-editor__node--empty:before,.ProseMirror.ProseMirror-focused p.pubwave-editor__node--empty:before{content:attr(data-placeholder);float:left;color:var(--pubwave-text-muted);pointer-events:none;height:0}.pubwave-editor__content .ProseMirror>*+*{margin-top:.75em}@media (max-width:768px){.pubwave-editor__content .ProseMirror>*+*{margin-top:.35em}.pubwave-editor__content .ProseMirror h1+*,.pubwave-editor__content .ProseMirror h2+*,.pubwave-editor__content .ProseMirror h3+*{margin-top:.4em}.pubwave-editor__content .ProseMirror h1,.pubwave-editor__content .ProseMirror h2,.pubwave-editor__content .ProseMirror h3{margin-top:.6em}.pubwave-editor__content .ProseMirror{font-size:var(--pubwave-font-size-base-mobile,15px)}.pubwave-editor__content .ProseMirror h1{font-size:var(--pubwave-font-size-3xl-mobile,1.75rem)}.pubwave-editor__content .ProseMirror h2{font-size:var(--pubwave-font-size-2xl-mobile,1.375rem)}.pubwave-editor__content .ProseMirror h3{font-size:var(--pubwave-font-size-xl-mobile,1.125rem)}}.pubwave-editor__content .pubwave-editor__bullet-list,.pubwave-editor__content .pubwave-editor__ordered-list{padding-left:1.3em!important}.pubwave-editor__content .ProseMirror p{line-height:var(--pubwave-line-height);margin:0}.pubwave-editor__content .ProseMirror h1,.pubwave-editor__content .ProseMirror h2,.pubwave-editor__content .ProseMirror h3{line-height:var(--pubwave-line-height-heading);margin:0;font-weight:600}.pubwave-editor__content .ProseMirror h1{font-size:var(--pubwave-font-size-3xl)}.pubwave-editor__content .ProseMirror h2{font-size:var(--pubwave-font-size-2xl)}.pubwave-editor__content .ProseMirror h3{font-size:var(--pubwave-font-size-xl)}.pubwave-editor__content .ProseMirror ul:not([data-type=taskList]),.pubwave-editor__content .ProseMirror ol{margin:0;padding-left:1.5em}.pubwave-editor__content .ProseMirror li:not([data-type=taskItem]):not(.pubwave-editor__task-item){margin:.25em 0}.pubwave-editor__content .ProseMirror li>p{margin:0}.pubwave-editor__content ul[data-type=taskList]{padding:var(--pubwave-spacing-4,16px)0;margin:0!important;padding-left:0!important;list-style:none!important}.pubwave-editor__content .ProseMirror ul[data-type=taskList] li,.pubwave-editor__content .ProseMirror ul[data-type=taskList]>li,.pubwave-editor__content .ProseMirror ul[data-type=taskList] li[data-type=taskItem],.pubwave-editor__content .ProseMirror ul[data-type=taskList] li.pubwave-editor__task-item,.pubwave-editor__content .ProseMirror .pubwave-editor__task-item,.pubwave-editor__content.ProseMirror ul[data-type=taskList] li,.ProseMirror.pubwave-editor__content ul[data-type=taskList] li{border-radius:var(--pubwave-radius-sm,4px)!important;-webkit-appearance:none!important;-moz-appearance:none!important;appearance:none!important;flex-direction:row!important;align-items:center!important;gap:.5em!important;margin:0!important;padding:0!important;list-style:none!important;display:flex!important}.pubwave-editor__task-item{height:var(--pubwave-task-item-height,30px)}.pubwave-editor__content .ProseMirror ul[data-type=taskList] li::marker{content:""!important;width:0!important;font-size:0!important;display:none!important}.pubwave-editor__content .ProseMirror ul[data-type=taskList] li[data-type=taskItem]::marker{content:""!important;width:0!important;font-size:0!important;display:none!important}.pubwave-editor__content .ProseMirror ul[data-type=taskList] li.pubwave-editor__task-item::marker{content:""!important;width:0!important;font-size:0!important;display:none!important}.pubwave-editor__content .ProseMirror ul[data-type=taskList] li:before,.pubwave-editor__content .ProseMirror ul[data-type=taskList] li[data-type=taskItem]:before,.pubwave-editor__content .ProseMirror ul[data-type=taskList] li.pubwave-editor__task-item:before{content:""!important;width:0!important;display:none!important}.pubwave-editor__content .ProseMirror ul[data-type=taskList] li:hover,.pubwave-editor__content .ProseMirror ul[data-type=taskList] li.ProseMirror-selectednode{background-color:var(--pubwave-hover-task,#e8f2ff)}.pubwave-editor__content .ProseMirror ul[data-type=taskList] li>label,.pubwave-editor__content .ProseMirror ul[data-type=taskList] li[data-type=taskItem]>label,.pubwave-editor__content .ProseMirror ul[data-type=taskList] li.pubwave-editor__task-item>label{cursor:pointer!important;width:var(--pubwave-checkbox-size,20px)!important;height:var(--pubwave-checkbox-size,20px)!important;min-height:var(--pubwave-checkbox-size,20px)!important;max-height:var(--pubwave-checkbox-size,20px)!important;flex-shrink:0!important;align-self:center!important;margin:0!important;padding:0!important;line-height:1!important;display:block!important;position:relative!important;overflow:hidden!important}li>label input[type=checkbox]{width:var(--pubwave-checkbox-input-size,16px);height:var(--pubwave-checkbox-input-size,16px);cursor:pointer;margin-top:5px}.pubwave-editor__content .ProseMirror ul[data-type=taskList] li>label:before{content:"";width:var(--pubwave-checkbox-size,20px);height:var(--pubwave-checkbox-size,20px);border:1.5px solid var(--pubwave-text,#1a1a1a);border-radius:var(--pubwave-radius-xs,3px);background-color:var(--pubwave-bg,#fff);box-sizing:border-box;transition:all .15s;display:block;position:absolute;top:0;left:0}.pubwave-editor__content .ProseMirror ul[data-type=taskList] li[data-checked=true]>label:before{background-color:var(--pubwave-primary-hover,#2563eb);border-color:var(--pubwave-primary-hover,#2563eb)}.pubwave-editor__content .ProseMirror ul[data-type=taskList] li[data-checked=true]>label:after{content:"";border:solid var(--pubwave-bg,#fff);box-sizing:border-box;z-index:1;border-width:0 2px 2px 0;width:5px;height:10px;position:absolute;top:3px;left:6px;transform:rotate(45deg)}.pubwave-editor__content ul[data-type=taskList] li>div,.pubwave-editor__content ul[data-type=taskList] li[data-type=taskItem]>div,.pubwave-editor__content ul[data-type=taskList] li.pubwave-editor__task-item>div{min-width:0!important;color:var(--pubwave-text,#1a1a1a)!important;flex:1!important;margin:0!important;padding:.1em 0!important;display:block!important}.pubwave-editor__content ul[data-type=taskList] li>div p,.pubwave-editor__content ul[data-type=taskList] li[data-type=taskItem]>div p,.pubwave-editor__content ul[data-type=taskList] li.pubwave-editor__task-item>div p,.pubwave-editor__content ul[data-type=taskList] li>div>p,.pubwave-editor__content ul[data-type=taskList] li>div p.pubwave-editor__paragraph,.pubwave-editor__content ul[data-type=taskList] li[data-type=taskItem]>div p.pubwave-editor__paragraph{width:100%!important;min-height:1.5em!important;margin:0!important;padding:0!important;line-height:1.5!important;display:block!important}.pubwave-editor__content.ProseMirror ul[data-type=taskList] li[data-checked=true]>div p,.pubwave-editor__content ul[data-type=taskList] li[data-checked=true]>div p{color:var(--pubwave-checked-text,#9ca3af)!important;text-decoration:line-through!important}.pubwave-editor__content blockquote,.pubwave-editor__content.ProseMirror blockquote{margin:.5em 0;padding-left:1em;font-style:italic;border-left:3px solid var(--pubwave-text,#1a1a1a)!important}.pubwave-editor__content .ProseMirror pre,.pubwave-editor__content pre{margin:.5em 0;padding:.5em .75em;line-height:1.5;overflow-x:auto;background:var(--pubwave-border-light,#f3f4f6)!important;border-radius:var(--pubwave-radius-md,6px)!important;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace!important;font-size:var(--pubwave-font-size-sm,13px)!important;color:#1a1a1a!important}.pubwave-editor__content .ProseMirror pre code,.pubwave-editor__content pre code{font-size:inherit!important;color:inherit!important;background:0 0!important;border-radius:0!important;padding:0!important;font-family:inherit!important}.pubwave-block{padding-left:2.5em;position:relative}.pubwave-block-menu{z-index:2;align-items:center;gap:.5em;display:flex;position:absolute;top:50%;left:.5em;transform:translateY(-50%)}.pubwave-editor__content .ProseMirror hr,.pubwave-editor__content hr,.pubwave-editor__content .pubwave-editor__divider{border:none;border-top:1px solid var(--pubwave-border,#e5e7eb)!important;background:0 0!important;height:0!important;margin:1em 0!important}.pubwave-editor__content .ProseMirror img,.pubwave-editor__content img,.pubwave-editor__content .pubwave-editor__image{border-radius:var(--pubwave-radius-md,6px);cursor:pointer;max-width:100%;height:auto;margin:1em auto;transition:opacity .2s;display:block;box-shadow:0 1px 3px #0000001a}.pubwave-editor__content .ProseMirror img:hover,.pubwave-editor__content img:hover,.pubwave-editor__content .pubwave-editor__image:hover{opacity:.9}.pubwave-editor__content .ProseMirror img.ProseMirror-selectednode,.pubwave-editor__content img.ProseMirror-selectednode,.pubwave-editor__content .pubwave-editor__image.ProseMirror-selectednode{outline:2px solid var(--pubwave-primary,#2383e2);outline-offset:2px}.pubwave-editor__content .ProseMirror strong{font-weight:600}.pubwave-editor__content .ProseMirror em{font-style:italic}.pubwave-editor__content .ProseMirror u{text-decoration:underline}.pubwave-editor__content .ProseMirror s{text-decoration:line-through}.pubwave-editor__content .ProseMirror code{background:var(--pubwave-hover);border-radius:var(--pubwave-radius-sm);font-family:var(--pubwave-font-mono);padding:.15em .35em;font-size:.9em}.pubwave-editor__content .ProseMirror a,.pubwave-editor .ProseMirror a{cursor:pointer;text-decoration:underline;color:var(--pubwave-link-color,#2383e2)!important}.pubwave-editor__content .ProseMirror a:hover,.pubwave-editor .ProseMirror a:hover{opacity:.8;color:var(--pubwave-link-hover-color,var(--pubwave-link-color,#2383e2))!important}.pubwave-editor__content .ProseMirror ::-moz-selection{background-color:var(--pubwave-selection-bg)}.pubwave-editor__content .ProseMirror ::selection{background-color:var(--pubwave-selection-bg)}.pubwave-editor--readonly,.pubwave-editor--readonly .pubwave-editor__content{cursor:default}.pubwave-block--dragging{opacity:.4}.pubwave-block--drag-preview{color:var(--pubwave-text-muted,#9b9a97)!important;opacity:.6!important}.pubwave-block--drag-preview div,.pubwave-block--drag-preview p,.pubwave-block--drag-preview label,.pubwave-block--drag-preview .pubwave-editor__task-item>div{color:var(--pubwave-text-muted,#9b9a97)!important}.pubwave-block--drag-preview label input{display:none!important}.pubwave-block--drag-preview label:before{border-color:var(--pubwave-text-muted,#9b9a97)!important;width:16px!important;height:16px!important}.pubwave-block--drag-preview label:after{border-color:var(--pubwave-bg,#fff)!important;top:2px!important;left:4px!important}.ProseMirror .ProseMirror-gapcursor{pointer-events:none;display:none;position:absolute}.ProseMirror .ProseMirror-gapcursor:after{content:"";border-top:1px solid var(--pubwave-text);width:20px;animation:1.1s steps(2,start) infinite pubwave-cursor-blink;display:block;position:absolute;top:-2px}@keyframes pubwave-cursor-blink{to{visibility:hidden}}.ProseMirror-focused .ProseMirror-gapcursor{display:block}.tippy-box{z-index:var(--pubwave-z-dropdown,60)!important;background:0 0!important;border:none!important}.tippy-box:has(.pubwave-slash-menu){background:0 0!important;border:none!important}.pubwave-slash-menu{border:1px solid var(--pubwave-border,#e3e2e0)!important}.ProseMirror-dropcursor{border-left:2px solid var(--pubwave-primary);pointer-events:none}.pubwave-editor .ProseMirror .suggestion{border:1px solid var(--pubwave-border,#e3e2e0)!important;border-radius:var(--pubwave-radius-md,6px)!important;color:#1f2937!important;background-color:#fffffff2!important;padding:2px 4px!important;display:inline-block!important}.pubwave-editor .ProseMirror .suggestion,.pubwave-editor .ProseMirror .suggestion *,.pubwave-editor .ProseMirror .suggestion span,.pubwave-editor .ProseMirror .suggestion strong,.pubwave-editor .ProseMirror .suggestion em,.pubwave-editor .ProseMirror .suggestion code{color:#1f2937!important}.tippy-box,.tippy-box[data-theme]{z-index:60!important}.tippy-box[data-theme~=pubwave]{box-shadow:none;background:0 0;border:none}.tippy-box[data-theme~=pubwave] .tippy-content{padding:0}.tippy-box[data-theme~=light-border]{border-radius:var(--pubwave-radius,6px);box-shadow:var(--pubwave-shadow-md,0 4px 6px -1px #0000001a);padding:4px 8px;font-size:12px;color:#fff!important;background-color:#000!important;border:none!important}.tippy-box[data-theme~=light-border] .tippy-content{color:#fff!important}.pubwave-block-handle__drag,.pubwave-block-handle__add{color:var(--pubwave-text-muted,#9b9a97)!important}.pubwave-toolbar__button:not(:disabled):hover,.pubwave-toolbar__turn-into-option:not(.pubwave-toolbar__turn-into-option--active):hover{background-color:var(--pubwave-hover)!important}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}.tippy-box[data-animation=fade][data-state=hidden]{opacity:0}[data-tippy-root]{max-width:calc(100vw - 10px)}.tippy-box{position:relative;background-color:#333;color:#fff;border-radius:4px;font-size:14px;line-height:1.4;white-space:normal;outline:0;transition-property:transform,visibility,opacity}.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-arrow:before{bottom:-7px;left:0;border-width:8px 8px 0;border-top-color:initial;transform-origin:center top}.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:before{top:-7px;left:0;border-width:0 8px 8px;border-bottom-color:initial;transform-origin:center bottom}.tippy-box[data-placement^=left]>.tippy-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-arrow:before{border-width:8px 0 8px 8px;border-left-color:initial;right:-7px;transform-origin:center left}.tippy-box[data-placement^=right]>.tippy-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-arrow:before{left:-7px;border-width:8px 8px 8px 0;border-right-color:initial;transform-origin:center right}.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.tippy-arrow{width:16px;height:16px;color:#333}.tippy-arrow:before{content:"";position:absolute;border-color:transparent;border-style:solid}.tippy-content{position:relative;padding:5px 9px;z-index:1}
+@layer properties{@supports ((-webkit-hyphens:none) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial}}}.invisible{visibility:hidden}.visible{visibility:visible}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.isolate{isolation:isolate}.container{width:100%}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.transform{transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}.resize{resize:both}.border{border-style:var(--tw-border-style);border-width:1px}.uppercase{text-transform:uppercase}.italic{font-style:italic}.underline{text-decoration-line:underline}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.filter{filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}:root{--pubwave-bg:#fff;--pubwave-surface:#fff;--pubwave-text:#37352f;--pubwave-text-muted:#9b9a97;--pubwave-border:#e3e2e0;--pubwave-border-light:#f3f4f6;--pubwave-hover:#f7f6f3;--pubwave-focus:#0000000d;--pubwave-selection:#3b82f6;--pubwave-selection-bg:#2383e226;--pubwave-primary:#2383e2;--pubwave-primary-hover:#2563eb;--pubwave-handle-color:#9b9a97;--pubwave-primary-faded:#3b82f61a;--pubwave-drop-indicator:#3b82f6;--pubwave-drop-target:#3b82f60d;--pubwave-error:#ef4444;--pubwave-success:#10b981;--pubwave-warning:#f59e0b;--pubwave-text-secondary:#374151;--pubwave-text-tertiary:#4b5563;--pubwave-hover-bg:#f3f4f6;--pubwave-hover-task:#e8f2ff;--pubwave-checked-text:#9ca3af;--pubwave-spacing-xs:.25rem;--pubwave-spacing-sm:.5rem;--pubwave-spacing-md:1rem;--pubwave-spacing-lg:1.5rem;--pubwave-spacing-xl:2rem;--pubwave-spacing-1:4px;--pubwave-spacing-2:8px;--pubwave-spacing-3:12px;--pubwave-spacing-4:16px;--pubwave-spacing-7:28px;--pubwave-font-family:inherit;--pubwave-font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--pubwave-font-size-xs:11px;--pubwave-font-size-sm:13px;--pubwave-font-size-base:14px;--pubwave-font-size-md:1rem;--pubwave-font-size-lg:1.125rem;--pubwave-font-size-xl:1.25rem;--pubwave-font-size-2xl:1.5rem;--pubwave-font-size-3xl:2rem;--pubwave-line-height:1.625;--pubwave-line-height-heading:1.25;--pubwave-button-width:28px;--pubwave-button-height:28px;--pubwave-icon-size:20px;--pubwave-checkbox-size:20px;--pubwave-checkbox-input-size:16px;--pubwave-divider-width:1px;--pubwave-divider-height:20px;--pubwave-drop-indicator-width:2px;--pubwave-drop-indicator-height:2px;--pubwave-task-item-height:30px;--pubwave-radius-xs:3px;--pubwave-radius-sm:4px;--pubwave-radius:6px;--pubwave-radius-md:6px;--pubwave-radius-lg:8px;--pubwave-shadow-sm:0 1px 2px 0 #0000000d;--pubwave-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;--pubwave-shadow-lg:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}@media (prefers-color-scheme:dark){:root{--pubwave-bg:#1a1a1a;--pubwave-surface:#262626;--pubwave-text:#e5e7eb;--pubwave-text-muted:#9ca3af;--pubwave-border:#374151;--pubwave-border-light:#4b5563;--pubwave-hover:#ffffff0d;--pubwave-focus:#ffffff14;--pubwave-selection:#60a5fa;--pubwave-selection-bg:#60a5fa26;--pubwave-primary:#60a5fa;--pubwave-primary-hover:#3b82f6;--pubwave-primary-faded:#60a5fa26;--pubwave-drop-indicator:#60a5fa;--pubwave-drop-target:#60a5fa14;--pubwave-error:#f87171;--pubwave-text-secondary:#d1d5db;--pubwave-text-tertiary:#9ca3af;--pubwave-hover-bg:#374151;--pubwave-hover-task:#3b82f626;--pubwave-checked-text:#6b7280}}.pubwave-editor{width:var(--pubwave-container-width,100%);max-width:var(--pubwave-container-max-width,none);font-family:var(--pubwave-font-family);color:var(--pubwave-text);background:var(--pubwave-bg,#fff);border-radius:var(--pubwave-container-border-radius,16px);min-height:var(--pubwave-container-min-height,700px);padding:var(--pubwave-container-padding-y,96px)var(--pubwave-container-padding-x,120px);padding-left:var(--pubwave-container-padding-left,140px);position:relative;box-shadow:0 0 0 1px #0000000a,0 20px 25px -5px #0000000d,0 10px 10px -5px #00000005}@media (max-width:768px){.pubwave-editor{padding:var(--pubwave-container-padding-y-mobile,20px)var(--pubwave-container-padding-x-mobile,16px);padding-left:var(--pubwave-container-padding-left-mobile,16px);border-radius:var(--pubwave-container-border-radius-mobile,12px);min-height:var(--pubwave-container-min-height-mobile,400px)}}.pubwave-editor,.pubwave-editor *,.pubwave-editor :before,.pubwave-editor :after{box-sizing:border-box}.pubwave-editor__content{outline:none;flex-direction:column;min-height:1em;display:flex}.pubwave-editor__content .ProseMirror{min-height:100%;padding-bottom:30vh;padding-top:var(--pubwave-spacing-md,1rem);outline:none;flex-grow:1}.pubwave-editor__content .ProseMirror p.is-editor-empty:first-child:before,.pubwave-editor__content.ProseMirror-focused p.pubwave-editor__node--empty:before,.ProseMirror.ProseMirror-focused p.pubwave-editor__node--empty:before{content:attr(data-placeholder);float:left;color:var(--pubwave-text-muted);pointer-events:none;height:0}.pubwave-editor__content .ProseMirror>*+*{margin-top:.75em}@media (max-width:768px){.pubwave-editor__content .ProseMirror>*+*{margin-top:.35em}.pubwave-editor__content .ProseMirror h1+*,.pubwave-editor__content .ProseMirror h2+*,.pubwave-editor__content .ProseMirror h3+*{margin-top:.4em}.pubwave-editor__content .ProseMirror h1,.pubwave-editor__content .ProseMirror h2,.pubwave-editor__content .ProseMirror h3{margin-top:.6em}.pubwave-editor__content .ProseMirror{font-size:var(--pubwave-font-size-base-mobile,15px)}.pubwave-editor__content .ProseMirror h1{font-size:var(--pubwave-font-size-3xl-mobile,1.75rem)}.pubwave-editor__content .ProseMirror h2{font-size:var(--pubwave-font-size-2xl-mobile,1.375rem)}.pubwave-editor__content .ProseMirror h3{font-size:var(--pubwave-font-size-xl-mobile,1.125rem)}}.pubwave-editor__content .pubwave-editor__bullet-list,.pubwave-editor__content .pubwave-editor__ordered-list{padding-left:1.3em!important}.pubwave-editor__content .ProseMirror p{line-height:var(--pubwave-line-height);margin:0}.pubwave-editor__content .ProseMirror h1,.pubwave-editor__content .ProseMirror h2,.pubwave-editor__content .ProseMirror h3{line-height:var(--pubwave-line-height-heading);margin:0;font-weight:600}.pubwave-editor__content .ProseMirror h1{font-size:var(--pubwave-font-size-3xl)}.pubwave-editor__content .ProseMirror h2{font-size:var(--pubwave-font-size-2xl)}.pubwave-editor__content .ProseMirror h3{font-size:var(--pubwave-font-size-xl)}.pubwave-editor__content .ProseMirror ul:not([data-type=taskList]),.pubwave-editor__content .ProseMirror ol{margin:0;padding-left:1.5em}.pubwave-editor__content .ProseMirror li:not([data-type=taskItem]):not(.pubwave-editor__task-item){margin:.25em 0}.pubwave-editor__content .ProseMirror li>p{margin:0}.pubwave-editor__content ul[data-type=taskList]{padding:var(--pubwave-spacing-4,16px)0;margin:0!important;padding-left:0!important;list-style:none!important}.pubwave-editor__content .ProseMirror ul[data-type=taskList] li,.pubwave-editor__content .ProseMirror ul[data-type=taskList]>li,.pubwave-editor__content .ProseMirror ul[data-type=taskList] li[data-type=taskItem],.pubwave-editor__content .ProseMirror ul[data-type=taskList] li.pubwave-editor__task-item,.pubwave-editor__content .ProseMirror .pubwave-editor__task-item,.pubwave-editor__content.ProseMirror ul[data-type=taskList] li,.ProseMirror.pubwave-editor__content ul[data-type=taskList] li{border-radius:var(--pubwave-radius-sm,4px)!important;-webkit-appearance:none!important;-moz-appearance:none!important;appearance:none!important;flex-direction:row!important;align-items:center!important;gap:.5em!important;margin:0!important;padding:0!important;list-style:none!important;display:flex!important}.pubwave-editor__task-item{height:var(--pubwave-task-item-height,30px)}.pubwave-editor__content .ProseMirror ul[data-type=taskList] li::marker{content:""!important;width:0!important;font-size:0!important;display:none!important}.pubwave-editor__content .ProseMirror ul[data-type=taskList] li[data-type=taskItem]::marker{content:""!important;width:0!important;font-size:0!important;display:none!important}.pubwave-editor__content .ProseMirror ul[data-type=taskList] li.pubwave-editor__task-item::marker{content:""!important;width:0!important;font-size:0!important;display:none!important}.pubwave-editor__content .ProseMirror ul[data-type=taskList] li:before,.pubwave-editor__content .ProseMirror ul[data-type=taskList] li[data-type=taskItem]:before,.pubwave-editor__content .ProseMirror ul[data-type=taskList] li.pubwave-editor__task-item:before{content:""!important;width:0!important;display:none!important}.pubwave-editor__content .ProseMirror ul[data-type=taskList] li:hover,.pubwave-editor__content .ProseMirror ul[data-type=taskList] li.ProseMirror-selectednode{background-color:var(--pubwave-hover-task,#e8f2ff)}.pubwave-editor__content .ProseMirror ul[data-type=taskList] li>label,.pubwave-editor__content .ProseMirror ul[data-type=taskList] li[data-type=taskItem]>label,.pubwave-editor__content .ProseMirror ul[data-type=taskList] li.pubwave-editor__task-item>label{cursor:pointer!important;width:var(--pubwave-checkbox-size,20px)!important;height:var(--pubwave-checkbox-size,20px)!important;min-height:var(--pubwave-checkbox-size,20px)!important;max-height:var(--pubwave-checkbox-size,20px)!important;flex-shrink:0!important;align-self:center!important;margin:0!important;padding:0!important;line-height:1!important;display:block!important;position:relative!important;overflow:hidden!important}li>label input[type=checkbox]{width:var(--pubwave-checkbox-input-size,16px);height:var(--pubwave-checkbox-input-size,16px);cursor:pointer;margin-top:5px}.pubwave-editor__content .ProseMirror ul[data-type=taskList] li>label:before{content:"";width:var(--pubwave-checkbox-size,20px);height:var(--pubwave-checkbox-size,20px);border:1.5px solid var(--pubwave-text,#1a1a1a);border-radius:var(--pubwave-radius-xs,3px);background-color:var(--pubwave-bg,#fff);box-sizing:border-box;transition:all .15s;display:block;position:absolute;top:0;left:0}.pubwave-editor__content .ProseMirror ul[data-type=taskList] li[data-checked=true]>label:before{background-color:var(--pubwave-primary-hover,#2563eb);border-color:var(--pubwave-primary-hover,#2563eb)}.pubwave-editor__content .ProseMirror ul[data-type=taskList] li[data-checked=true]>label:after{content:"";border:solid var(--pubwave-bg,#fff);box-sizing:border-box;z-index:1;border-width:0 2px 2px 0;width:5px;height:10px;position:absolute;top:3px;left:6px;transform:rotate(45deg)}.pubwave-editor__content ul[data-type=taskList] li>div,.pubwave-editor__content ul[data-type=taskList] li[data-type=taskItem]>div,.pubwave-editor__content ul[data-type=taskList] li.pubwave-editor__task-item>div{min-width:0!important;color:var(--pubwave-text,#1a1a1a)!important;flex:1!important;margin:0!important;padding:.1em 0!important;display:block!important}.pubwave-editor__content ul[data-type=taskList] li>div p,.pubwave-editor__content ul[data-type=taskList] li[data-type=taskItem]>div p,.pubwave-editor__content ul[data-type=taskList] li.pubwave-editor__task-item>div p,.pubwave-editor__content ul[data-type=taskList] li>div>p,.pubwave-editor__content ul[data-type=taskList] li>div p.pubwave-editor__paragraph,.pubwave-editor__content ul[data-type=taskList] li[data-type=taskItem]>div p.pubwave-editor__paragraph{width:100%!important;min-height:1.5em!important;margin:0!important;padding:0!important;line-height:1.5!important;display:block!important}.pubwave-editor__content.ProseMirror ul[data-type=taskList] li[data-checked=true]>div p,.pubwave-editor__content ul[data-type=taskList] li[data-checked=true]>div p{color:var(--pubwave-checked-text,#9ca3af)!important;text-decoration:line-through!important}.pubwave-editor__content blockquote,.pubwave-editor__content.ProseMirror blockquote{margin:.5em 0;padding-left:1em;font-style:italic;border-left:3px solid var(--pubwave-text,#1a1a1a)!important}.pubwave-editor__content .ProseMirror pre,.pubwave-editor__content pre{margin:.5em 0;padding:.5em .75em;line-height:1.5;overflow-x:auto;background:var(--pubwave-border-light,#f3f4f6)!important;border-radius:var(--pubwave-radius-md,6px)!important;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace!important;font-size:var(--pubwave-font-size-sm,13px)!important;color:#1a1a1a!important}.pubwave-editor__content .ProseMirror pre code,.pubwave-editor__content pre code{font-size:inherit!important;color:inherit!important;background:0 0!important;border-radius:0!important;padding:0!important;font-family:inherit!important}.pubwave-block{padding-left:2.5em;position:relative}.pubwave-block-menu{z-index:2;align-items:center;gap:.5em;display:flex;position:absolute;top:50%;left:.5em;transform:translateY(-50%)}.pubwave-editor__content .ProseMirror hr,.pubwave-editor__content hr,.pubwave-editor__content .pubwave-editor__divider{border:none;border-top:1px solid var(--pubwave-border,#e5e7eb)!important;background:0 0!important;height:0!important;margin:1em 0!important}.pubwave-editor__content .ProseMirror img,.pubwave-editor__content img,.pubwave-editor__content .pubwave-editor__image{border-radius:var(--pubwave-radius-md,6px);cursor:pointer;max-width:100%;height:auto;margin:1em auto;transition:opacity .2s;display:block;box-shadow:0 1px 3px #0000001a}.pubwave-editor__content .ProseMirror img:hover,.pubwave-editor__content img:hover,.pubwave-editor__content .pubwave-editor__image:hover{opacity:.9}.pubwave-editor__content .ProseMirror img.ProseMirror-selectednode,.pubwave-editor__content img.ProseMirror-selectednode,.pubwave-editor__content .pubwave-editor__image.ProseMirror-selectednode{outline:2px solid var(--pubwave-primary,#2383e2);outline-offset:2px}.pubwave-editor__content .ProseMirror strong{font-weight:600}.pubwave-editor__content .ProseMirror em{font-style:italic}.pubwave-editor__content .ProseMirror u{text-decoration:underline}.pubwave-editor__content .ProseMirror s{text-decoration:line-through}.pubwave-editor__content .ProseMirror code{background:var(--pubwave-hover);border-radius:var(--pubwave-radius-sm);font-family:var(--pubwave-font-mono);padding:.15em .35em;font-size:.9em}.pubwave-editor__content .ProseMirror a,.pubwave-editor .ProseMirror a{cursor:pointer;text-decoration:underline;color:var(--pubwave-link-color,#2383e2)!important}.pubwave-editor__content .ProseMirror a:hover,.pubwave-editor .ProseMirror a:hover{opacity:.8;color:var(--pubwave-link-hover-color,var(--pubwave-link-color,#2383e2))!important}.pubwave-editor__content .ProseMirror ::-moz-selection{background-color:var(--pubwave-selection-bg)}.pubwave-editor__content .ProseMirror ::selection{background-color:var(--pubwave-selection-bg)}.pubwave-editor--readonly,.pubwave-editor--readonly .pubwave-editor__content{cursor:default}.pubwave-block--dragging{opacity:.4}.pubwave-block--drag-preview{color:var(--pubwave-text-muted,#9b9a97)!important;opacity:.6!important}.pubwave-block--drag-preview div,.pubwave-block--drag-preview p,.pubwave-block--drag-preview label,.pubwave-block--drag-preview .pubwave-editor__task-item>div{color:var(--pubwave-text-muted,#9b9a97)!important}.pubwave-block--drag-preview label input{display:none!important}.pubwave-block--drag-preview label:before{border-color:var(--pubwave-text-muted,#9b9a97)!important;width:16px!important;height:16px!important}.pubwave-block--drag-preview label:after{border-color:var(--pubwave-bg,#fff)!important;top:2px!important;left:4px!important}.ProseMirror .ProseMirror-gapcursor{pointer-events:none;display:none;position:absolute}.ProseMirror .ProseMirror-gapcursor:after{content:"";border-top:1px solid var(--pubwave-text);width:20px;animation:1.1s steps(2,start) infinite pubwave-cursor-blink;display:block;position:absolute;top:-2px}@keyframes pubwave-cursor-blink{to{visibility:hidden}}.ProseMirror-focused .ProseMirror-gapcursor{display:block}.tippy-box{z-index:var(--pubwave-z-dropdown,60)!important;background:0 0!important;border:none!important}.tippy-box:has(.pubwave-slash-menu){background:0 0!important;border:none!important}.pubwave-slash-menu{border:1px solid var(--pubwave-border,#e3e2e0)!important}.ProseMirror-dropcursor{border-left:2px solid var(--pubwave-primary);pointer-events:none}.pubwave-editor .ProseMirror .suggestion{border:1px solid var(--pubwave-border,#e3e2e0)!important;border-radius:var(--pubwave-radius-md,6px)!important;color:#1f2937!important;background-color:#fffffff2!important;padding:2px 4px!important;display:inline-block!important}.pubwave-editor .ProseMirror .suggestion,.pubwave-editor .ProseMirror .suggestion *,.pubwave-editor .ProseMirror .suggestion span,.pubwave-editor .ProseMirror .suggestion strong,.pubwave-editor .ProseMirror .suggestion em,.pubwave-editor .ProseMirror .suggestion code{color:#1f2937!important}.tippy-box,.tippy-box[data-theme]{z-index:60!important}.tippy-box[data-theme~=pubwave]{box-shadow:none;background:0 0;border:none}.tippy-box[data-theme~=pubwave] .tippy-content{padding:0}.tippy-box[data-theme~=light-border]{border-radius:var(--pubwave-radius,6px);box-shadow:var(--pubwave-shadow-md,0 4px 6px -1px #0000001a);padding:4px 8px;font-size:12px;color:#fff!important;background-color:#000!important;border:none!important}.tippy-box[data-theme~=light-border] .tippy-content{color:#fff!important}.pubwave-block-handle__drag,.pubwave-block-handle__add{color:var(--pubwave-text-muted,#9b9a97)!important}.pubwave-toolbar__button:not(:disabled):hover,.pubwave-toolbar__turn-into-option:not(.pubwave-toolbar__turn-into-option--active):hover{background-color:var(--pubwave-hover)!important}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}.tippy-box[data-animation=fade][data-state=hidden]{opacity:0}[data-tippy-root]{max-width:calc(100vw - 10px)}.tippy-box{position:relative;background-color:#333;color:#fff;border-radius:4px;font-size:14px;line-height:1.4;white-space:normal;outline:0;transition-property:transform,visibility,opacity}.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-arrow:before{bottom:-7px;left:0;border-width:8px 8px 0;border-top-color:initial;transform-origin:center top}.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:before{top:-7px;left:0;border-width:0 8px 8px;border-bottom-color:initial;transform-origin:center bottom}.tippy-box[data-placement^=left]>.tippy-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-arrow:before{border-width:8px 0 8px 8px;border-left-color:initial;right:-7px;transform-origin:center left}.tippy-box[data-placement^=right]>.tippy-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-arrow:before{left:-7px;border-width:8px 8px 8px 0;border-right-color:initial;transform-origin:center right}.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.tippy-arrow{width:16px;height:16px;color:#333}.tippy-arrow:before{content:"";position:absolute;border-color:transparent;border-style:solid}.tippy-content{position:relative;padding:5px 9px;z-index:1}

package/dist/index.d.ts

@@ -759,6 +759,19 @@ export declare function isEditorValid(editor: Editor_2 | null): editor is Editor
  */
 export declare function isMarkActive(editor: Editor_2, markType: string): boolean;
 
+/**
+ * Check if the device is a mobile/touch device
+ * Returns true for mobile devices, false for desktop
+ *
+ * This function safely checks for mobile device characteristics:
+ * - Touch support
+ * - Coarse pointer type (touch screen)
+ * - Hover capability (mobile devices typically don't support hover)
+ *
+ * @returns true if the device appears to be a mobile/touch device, false otherwise
+ */
+export declare function isMobileDevice(): boolean;
+
 /**
  * Check if a node type is currently active
  */

package/dist/index.js

@@ -461,6 +461,13 @@ function safeRequestAnimationFrame(callback) {
   }
   return 0;
 }
+function isMobileDevice() {
+  if (!canUseDOM) return false;
+  const hasTouchSupport = "ontouchstart" in window || navigator.maxTouchPoints > 0;
+  const hasCoarsePointer = window.matchMedia("(pointer: coarse)").matches;
+  const hasHover = window.matchMedia("(hover: hover)").matches;
+  return hasTouchSupport && hasCoarsePointer || hasTouchSupport && !hasHover;
+}
 function TextIcon() {
   return /* @__PURE__ */ jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx("path", { d: "M4 7V4h16v3M9 20h6M12 4v16" }) });
 }
@@ -4845,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,
@@ -4857,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;
@@ -4865,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) => {
@@ -4888,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 {
@@ -4913,7 +5031,7 @@ function PositionedDropdown({
       "data-testid": dataTestId,
       style: {
         position: "absolute",
-        ...position === "top" ? {
+        ...verticalPosition === "top" ? {
           bottom: "100%",
           marginBottom: `${margin}px`
         } : {
@@ -5983,8 +6101,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,
@@ -5998,20 +6114,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,
@@ -6256,6 +6373,7 @@ function BubbleToolbar({
     }
   );
 }
+const MIN_WINDOW_WIDTH = 768;
 function getClosestBlock(target, proseMirror, editor) {
   if (!target || !(target instanceof Node)) return null;
   try {
@@ -6300,18 +6418,33 @@ function BlockHandle({ editor }) {
   const [visible, setVisible] = useState(false);
   const [isDragging, setIsDragging] = useState(false);
   const [position, setPosition] = useState({ top: 0 });
+  const [isMobile, setIsMobile] = useState(false);
+  const [isWindowTooSmall, setIsWindowTooSmall] = useState(false);
+  useEffect(() => {
+    const checkDeviceAndWindow = () => {
+      setIsMobile(isMobileDevice());
+      setIsWindowTooSmall(window.innerWidth < MIN_WINDOW_WIDTH);
+    };
+    checkDeviceAndWindow();
+    window.addEventListener("resize", checkDeviceAndWindow);
+    return () => {
+      window.removeEventListener("resize", checkDeviceAndWindow);
+    };
+  }, []);
   const updatePosition = useCallback(() => {
     const container = containerRef.current;
     const block = currentBlockRef.current;
     if (!container || !block) return;
     const editorContainer = container.closest(".pubwave-editor");
     if (!editorContainer) return;
+    void editorContainer.offsetHeight;
     const editorRect = editorContainer.getBoundingClientRect();
     let offset2 = 14;
     let target = block;
     if (["UL", "OL", "BLOCKQUOTE"].includes(block.tagName) && block.firstElementChild instanceof HTMLElement) {
       target = block.firstElementChild;
     }
+    void target.offsetHeight;
     const targetRect = target.getBoundingClientRect();
     try {
       const style = window.getComputedStyle(target);
@@ -6330,12 +6463,18 @@ function BlockHandle({ editor }) {
     } catch (e) {
     }
     const top2 = targetRect.top - editorRect.top + offset2;
-    setPosition({ top: top2 });
+    if (!isNaN(top2) && isFinite(top2) && top2 >= 0) {
+      setPosition({ top: top2 });
+    }
   }, []);
   const showHandle = useCallback((block) => {
     currentBlockRef.current = block;
     setVisible(true);
-    setTimeout(updatePosition, 0);
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        updatePosition();
+      });
+    });
   }, [updatePosition]);
   const hideHandle = useCallback(() => {
     if (!isDraggingRef.current) {
@@ -6397,8 +6536,16 @@ function BlockHandle({ editor }) {
         hideHandle();
       }, 150);
     };
+    const onEditorMouseLeave = () => {
+      if (isDraggingRef.current) return;
+      clearHideTimeout();
+      hideTimeoutRef.current = setTimeout(() => {
+        hideHandle();
+      }, 150);
+    };
     proseMirror.addEventListener("mouseover", onMouseOver);
     proseMirror.addEventListener("mouseout", onMouseOut);
+    editorContainer.addEventListener("mouseleave", onEditorMouseLeave);
     const handleTransaction = ({ transaction }) => {
       if (transaction.docChanged && !isDraggingRef.current) {
         hideHandle();
@@ -6408,10 +6555,20 @@ function BlockHandle({ editor }) {
     return () => {
       proseMirror.removeEventListener("mouseover", onMouseOver);
       proseMirror.removeEventListener("mouseout", onMouseOut);
+      editorContainer.removeEventListener("mouseleave", onEditorMouseLeave);
       editor.off("transaction", handleTransaction);
       clearHideTimeout();
     };
   }, [editor, showHandle, hideHandle, clearHideTimeout]);
+  useEffect(() => {
+    if (visible && currentBlockRef.current) {
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          updatePosition();
+        });
+      });
+    }
+  }, [visible, updatePosition]);
   useEffect(() => {
     if (!visible) return;
     const onScroll = () => {
@@ -6506,7 +6663,7 @@ function BlockHandle({ editor }) {
     }
     setVisible(false);
   }, []);
-  if (!visible) return null;
+  if (isMobile || isWindowTooSmall || !visible) return null;
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -7514,6 +7671,7 @@ export {
   isEditable,
   isEditorValid,
   isMarkActive,
+  isMobileDevice,
   isNodeActive,
   isReadOnly,
   isSSR,

package/package.json

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