From 4df334bfdb9bfee23685a4d1597b71fb49f8ea86 Mon Sep 17 00:00:00 2001
From: akumatus <12724894+akumatus@users.noreply.github.com>
Date: Wed, 26 Jun 2024 06:31:25 +0000
Subject: [PATCH] fix: cannot read properties of undefined editor.host (#7333)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fix issue [BS-657](https://linear.app/affine-design/issue/BS-657).

Unable to obtain `editor.host` synchronously on `editor` reference callback. Maybe we should have a separate host reference callback. @pengx17

![截屏2024-06-26 11.58.54.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/sJGviKxfE3Ap685cl5bj/7d442ce3-86c9-4f4d-85c5-000d923702b6.png)
---
 .../modules/peek-view/view/doc-peek-view.tsx  | 28 ++++++++++---------
 1 file changed, 15 insertions(+), 13 deletions(-)

diff --git a/packages/frontend/core/src/modules/peek-view/view/doc-peek-view.tsx b/packages/frontend/core/src/modules/peek-view/view/doc-peek-view.tsx
index 20bc02c1dc..48e1d6d17e 100644
--- a/packages/frontend/core/src/modules/peek-view/view/doc-peek-view.tsx
+++ b/packages/frontend/core/src/modules/peek-view/view/doc-peek-view.tsx
@@ -72,19 +72,21 @@ export function DocPeekPreview({
   const [resolvedMode, setResolvedMode] = useState<DocMode | undefined>(mode);
 
   useEffect(() => {
-    if (editor && resolvedMode === 'edgeless') {
-      editor.host
-        .closest('[data-testid="peek-view-modal-animation-container"]')
-        ?.addEventListener(
-          'animationend',
-          () => {
-            fitViewport(editor, xywh);
-          },
-          {
-            once: true,
-          }
-        );
-    }
+    requestAnimationFrame(() => {
+      if (editor && editor.host && resolvedMode === 'edgeless') {
+        editor.host
+          .closest('[data-testid="peek-view-modal-animation-container"]')
+          ?.addEventListener(
+            'animationend',
+            () => {
+              fitViewport(editor, xywh);
+            },
+            {
+              once: true,
+            }
+          );
+      }
+    });
     return;
   }, [editor, resolvedMode, xywh]);