feat(infra): add ability to mount nodes to nearest FrameworkScope root (#7551)

![CleanShot 2024-07-19 at 12.52.08.gif](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/LakojjjzZNf6ogjOVwKE/dc5b8dc6-b7b2-4db2-83d5-7601c3f966d8.gif)

packages/frontend/core/src/components/page-list/view/edit-collection/hooks.tsx

@@ -1,5 +1,6 @@
 import { Modal } from '@affine/component';
-import { useCallback, useState } from 'react';
+import { useMount } from '@toeverything/infra';
+import { useCallback, useEffect, useState } from 'react';
 
 import type { AllPageListConfig } from './edit-collection';
 import { SelectPage } from './select-page';
@@ -20,8 +21,11 @@ export const useSelectPage = ({
   const handleCancel = useCallback(() => {
     close(false);
   }, [close]);
-  return {
-    node: (
+
+  const { mount } = useMount('select-page-modal');
+
+  useEffect(() => {
+    return mount(
       <Modal
         open={!!value}
         onOpenChange={close}
@@ -47,16 +51,22 @@ export const useSelectPage = ({
           />
         ) : null}
       </Modal>
+    );
+  }, [allPageListConfig, close, handleCancel, mount, value]);
+
+  return {
+    open: useCallback(
+      (init: string[]): Promise<string[]> =>
+        new Promise<string[]>(res => {
+          onChange({
+            init,
+            onConfirm: list => {
+              close(false);
+              res(list);
+            },
+          });
+        }),
+      [close]
     ),
-    open: (init: string[]): Promise<string[]> =>
-      new Promise<string[]>(res => {
-        onChange({
-          init,
-          onConfirm: list => {
-            close(false);
-            res(list);
-          },
-        });
-      }),
   };
 };

packages/frontend/core/src/components/page-list/view/edit-collection/rules-mode.tsx

@@ -72,7 +72,7 @@ export const RulesMode = ({
       allowListPages.push(meta);
     }
   });
-  const { node: selectPageNode, open } = useSelectPage({ allPageListConfig });
+  const { open } = useSelectPage({ allPageListConfig });
   const openSelectPage = useCallback(() => {
     open(collection.allowList).then(
       ids => {
@@ -343,7 +343,6 @@ export const RulesMode = ({
         </div>
         <div style={{ display: 'flex', alignItems: 'center' }}>{buttons}</div>
       </div>
-      {selectPageNode}
     </>
   );
 };