Improve Floater positioning

Author: hubgit

packages/react/Floater.tsx

@@ -1,12 +1,36 @@
 import './style/floater.css'
 
-import React, { useMemo, useRef } from 'react'
+import React, { useEffect, useMemo, useRef, useState } from 'react'
 
 import { useEditorState, useEditorView } from './EditorProvider'
 
 export const Floater: React.FC = ({ children }) => {
   const view = useEditorView()
   const state = useEditorState()
+  const [needsUpdate, setNeedsUpdate] = useState(Date.now())
+
+  // trigger redraw on resize and scroll events
+  useEffect(() => {
+    let handle: number
+
+    const handleEvent = () => {
+      if (handle) {
+        window.clearTimeout(handle)
+      }
+
+      handle = window.setTimeout(() => {
+        setNeedsUpdate(Date.now())
+      }, 50)
+    }
+
+    window.addEventListener('resize', handleEvent)
+    window.addEventListener('scroll', handleEvent)
+
+    return () => {
+      window.removeEventListener('resize', handleEvent)
+      window.removeEventListener('scroll', handleEvent)
+    }
+  }, [])
 
   const menuRef = useRef<HTMLDivElement>(null)
 
@@ -26,7 +50,8 @@ export const Floater: React.FC = ({ children }) => {
           : coords.left,
       top: coords.top - 30 > 0 ? coords.top - 30 : coords.top + 30,
     }
-  }, [menuRef, state, view])
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [menuRef, state, view, needsUpdate])
 
   return (
     <div ref={menuRef} className="prosemirror-floater" style={style}>

packages/react/style/floater.css

@@ -3,7 +3,7 @@
 }
 
 .prosemirror-floater {
-  position: absolute;
+  position: fixed;
   z-index: 10;
   display: flex;
   flex-wrap: nowrap;