fix: Super editor popover menus on iOS (#2061)

packages/web/src/javascripts/App.tsx

@@ -16,6 +16,7 @@ declare global {
     webClient?: DesktopManagerInterface
     electronRemoteBridge?: unknown
     reactNativeDevice?: WebDevice
+    platform?: Platform
 
     application?: WebApplication
     mainApplicationGroup?: ApplicationGroup
@@ -25,7 +26,7 @@ declare global {
 
 import { disableIosTextFieldZoom } from '@/Utils'
 import { IsWebPlatform, WebAppVersion } from '@/Constants/Version'
-import { DesktopManagerInterface, SNLog } from '@standardnotes/snjs'
+import { DesktopManagerInterface, Platform, SNLog } from '@standardnotes/snjs'
 import ApplicationGroupView from './Components/ApplicationGroupView/ApplicationGroupView'
 import { WebDevice } from './Application/Device/WebDevice'
 import { StartApplication } from './Application/Device/StartApplication'
@@ -100,6 +101,7 @@ if (IsWebPlatform) {
 
   setTimeout(() => {
     const device = window.reactNativeDevice || new WebDevice(WebAppVersion)
+    window.platform = device.platform
 
     startApplication(window.defaultSyncServer, device, window.enabledUnfinishedFeatures, window.websocketUrl).catch(
       console.error,

packages/web/src/javascripts/Hooks/useDocumentRect.ts

@@ -1,9 +1,14 @@
+import { isIOS } from '@/Utils'
 import { useEffect, useState } from 'react'
 
 const DebounceTimeInMs = 100
 
+const getBoundingClientRect = () => {
+  return isIOS() ? document.body.getBoundingClientRect() : document.documentElement.getBoundingClientRect()
+}
+
 export const useDocumentRect = (): DOMRect => {
-  const [documentRect, setDocumentRect] = useState<DOMRect>(document.documentElement.getBoundingClientRect())
+  const [documentRect, setDocumentRect] = useState<DOMRect>(getBoundingClientRect())
 
   useEffect(() => {
     let debounceTimeout: number
@@ -12,7 +17,7 @@ export const useDocumentRect = (): DOMRect => {
       window.clearTimeout(debounceTimeout)
 
       window.setTimeout(() => {
-        setDocumentRect(document.documentElement.getBoundingClientRect())
+        setDocumentRect(getBoundingClientRect())
       }, DebounceTimeInMs)
     }
 

packages/web/src/javascripts/Utils/Utils.ts

@@ -174,7 +174,8 @@ export const convertStringifiedBooleanToBoolean = (value: string) => {
 // https://stackoverflow.com/questions/9038625/detect-if-device-is-ios/9039885#9039885
 export const isIOS = () =>
   (/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream) ||
-  (navigator.userAgent.includes('Mac') && 'ontouchend' in document && navigator.maxTouchPoints > 1)
+  (navigator.userAgent.includes('Mac') && 'ontouchend' in document && navigator.maxTouchPoints > 1) ||
+  window.platform === Platform.Ios
 
 // https://stackoverflow.com/a/57527009/2504429
 export const disableIosTextFieldZoom = () => {