From a63e6ffee4ce094f46d69a02c15cbdb1fd891d8e Mon Sep 17 00:00:00 2001
From: "Kilu.He" <108015703+qinluhe@users.noreply.github.com>
Date: Wed, 22 Jan 2025 14:45:18 +0800
Subject: [PATCH] fix: database block can not get editorDom and scrollContainer
 (#36)

---
 .../blocks/database/DatabaseBlock.tsx         | 40 ++++++++++---------
 1 file changed, 22 insertions(+), 18 deletions(-)

diff --git a/src/components/editor/components/blocks/database/DatabaseBlock.tsx b/src/components/editor/components/blocks/database/DatabaseBlock.tsx
index 99ca9d2d..77f8d499 100644
--- a/src/components/editor/components/blocks/database/DatabaseBlock.tsx
+++ b/src/components/editor/components/blocks/database/DatabaseBlock.tsx
@@ -27,17 +27,17 @@ export const DatabaseBlock = memo(
     const [doc, setDoc] = useState<YDoc | null>(null);
 
     useEffect(() => {
-      if (!viewId) return;
-      void (async () => {
+      if(!viewId) return;
+      void (async() => {
         try {
           const view = await loadView?.(viewId);
 
-          if (!view) {
+          if(!view) {
             throw new Error('View not found');
           }
 
           setDoc(view);
-        } catch (e) {
+        } catch(e) {
           setNotFound(true);
         }
       })();
@@ -48,8 +48,8 @@ export const DatabaseBlock = memo(
     const [iidName, setIidName] = useState<string>('');
 
     useEffect(() => {
-      const updateVisibleViewIds = async (meta: View | null) => {
-        if (!meta) {
+      const updateVisibleViewIds = async(meta: View | null) => {
+        if(!meta) {
           return;
         }
 
@@ -57,7 +57,7 @@ export const DatabaseBlock = memo(
 
         viewIds.unshift(meta.view_id);
 
-        if (!viewIds.includes(viewId)) {
+        if(!viewIds.includes(viewId)) {
           setSelectedViewId(viewIds[0]);
         } else {
           setSelectedViewId(viewId);
@@ -67,22 +67,22 @@ export const DatabaseBlock = memo(
         setVisibleViewIds(viewIds);
       };
 
-      void (async () => {
+      void (async() => {
         try {
           const meta = await loadViewMeta?.(viewId, updateVisibleViewIds);
 
-          if (meta) {
+          if(meta) {
             await updateVisibleViewIds(meta);
           }
-        } catch (e) {
+        } catch(e) {
           setNotFound(true);
         }
       })();
     }, [loadViewMeta, viewId]);
 
     const handleNavigateToRow = useCallback(
-      async (rowId: string) => {
-        if (!viewId) return;
+      async(rowId: string) => {
+        if(!viewId) return;
         await navigateToView?.(viewId, rowId);
       },
       [navigateToView, viewId],
@@ -96,17 +96,17 @@ export const DatabaseBlock = memo(
 
       return database?.get(YjsDatabaseKey.views)?.get(selectedViewId);
     }, [doc, selectedViewId]);
-    const handleRendered = useCallback(async (height: number) => {
+    const handleRendered = useCallback(async(height: number) => {
       const container = containerRef.current;
 
-      if (!container) return;
-      if (height > 0) {
+      if(!container) return;
+      if(height > 0) {
         container.style.height = `${height}px`;
       }
 
       const layout = Number(selectedView?.get(YjsDatabaseKey.layout));
 
-      if (layout !== DatabaseViewLayout.Calendar) {
+      if(layout !== DatabaseViewLayout.Calendar) {
         container.style.maxHeight = '550px';
       }
 
@@ -115,11 +115,15 @@ export const DatabaseBlock = memo(
     const [scrollLeft, setScrollLeft] = useState(0);
 
     useEffect(() => {
+
+      const layout = Number(selectedView?.get(YjsDatabaseKey.layout));
       const editorDom = ReactEditor.toDOMNode(editor, editor);
       const scrollContainer = getScrollParent(editorDom) as HTMLElement;
-      const layout = Number(selectedView?.get(YjsDatabaseKey.layout));
+
+      if(!editorDom || !scrollContainer) return;
 
       const onResize = () => {
+
         const scrollRect = scrollContainer.getBoundingClientRect();
 
         setScrollLeft(Math.max(editorDom.getBoundingClientRect().left - scrollRect.left, layout === DatabaseViewLayout.Grid ? 64 : 0));
@@ -142,7 +146,7 @@ export const DatabaseBlock = memo(
           contentEditable={readOnly ? false : undefined}
           className={`relative w-full cursor-pointer`}
           onMouseEnter={() => {
-            if (variant === UIVariant.App) {
+            if(variant === UIVariant.App) {
 
               setShowActions(true);
             }