enhance: pass ref to collisionBoundary

tldraw/apps/tldraw-logseq/src/app.tsx

@@ -81,6 +81,7 @@ export const App = function App({
   const onFileDrop = useFileDrop(contextValue)
   const onPaste = usePaste(contextValue)
   const onQuickAdd = useQuickAdd()
+  const ref = React.useRef<HTMLDivElement>(null);
 
   const onPersistOnDiff: TLReactCallbacks<Shape>['onPersist'] = React.useCallback(
     (app, info) => {
@@ -103,8 +104,8 @@ export const App = function App({
         model={model}
         {...rest}
       >
-        <ContextMenu>
-          <div className="logseq-tldraw logseq-tldraw-wrapper">
+        <ContextMenu collisionRef={ref}>
+          <div ref={ref} className="logseq-tldraw logseq-tldraw-wrapper">
             <AppCanvas components={components}>
               <AppUI />
             </AppCanvas>

tldraw/apps/tldraw-logseq/src/components/ContextMenu/ContextMenu.tsx

@@ -9,9 +9,10 @@ const preventDefault = (e: Event) => e.stopPropagation()
 
 interface ContextMenuProps {
   children: React.ReactNode
+  collisionRef: React.RefObject<HTMLDivElement>
 }
 
-export const ContextMenu = observer(function ContextMenu({ children }: ContextMenuProps) {
+export const ContextMenu = observer(function ContextMenu({ children, collisionRef }: ContextMenuProps) {
   const app = useApp()
   const rContent = React.useRef<HTMLDivElement>(null)
 
@@ -21,7 +22,7 @@ export const ContextMenu = observer(function ContextMenu({ children }: ContextMe
       <ReactContextMenu.Content className="tl-context-menu"
       ref={rContent}
       onEscapeKeyDown={preventDefault}
-      collisionBoundary={document.querySelector<HTMLElement>('.logseq-tldraw-wrapper')}
+      collisionBoundary={collisionRef.current}
       asChild
       tabIndex={-1}
       >