From 3a700d81a9124e421428791f3990700cf1eba2b8 Mon Sep 17 00:00:00 2001
From: Peng Xiao <pengxiao@outlook.com>
Date: Tue, 31 Dec 2024 16:25:31 +0800
Subject: [PATCH] fix(core): split view reordering crash

---
 .../workbench/view/split-view/split-view.tsx  | 32 +++++++++++++++----
 1 file changed, 26 insertions(+), 6 deletions(-)

diff --git a/packages/frontend/core/src/modules/workbench/view/split-view/split-view.tsx b/packages/frontend/core/src/modules/workbench/view/split-view/split-view.tsx
index 6ff0011e0bc23..14fcdcc88b020 100644
--- a/packages/frontend/core/src/modules/workbench/view/split-view/split-view.tsx
+++ b/packages/frontend/core/src/modules/workbench/view/split-view/split-view.tsx
@@ -14,7 +14,7 @@ import {
 import { useService } from '@toeverything/infra';
 import clsx from 'clsx';
 import type { HTMLAttributes, RefObject } from 'react';
-import { useCallback, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 
 import type { View } from '../../entities/view';
@@ -50,6 +50,10 @@ export const SplitView = ({
   const { appSettings } = useAppSettingHelper();
   const workbench = useService(WorkbenchService).workbench;
 
+  // blocksuite's lit host element has an issue on remounting.
+  // Add a workaround here to force remounting after dropping.
+  const [visible, setVisibility] = useState(true);
+
   const sensors = useSensors(
     useSensor(
       PointerSensor,
@@ -102,11 +106,25 @@ export const SplitView = ({
         const fromIndex = views.findIndex(v => v.id === active.id);
         const toIndex = views.findIndex(v => v.id === over?.id);
         onMove?.(fromIndex, toIndex);
+        setVisibility(false);
       }
     },
     [onMove, views]
   );
 
+  useEffect(() => {
+    if (!visible) {
+      const timeoutId = setTimeout(() => {
+        setVisibility(true);
+      }, 0);
+
+      return () => {
+        clearTimeout(timeoutId);
+      };
+    }
+    return;
+  }, [visible]);
+
   return (
     <div
       ref={rootRef}
@@ -121,11 +139,13 @@ export const SplitView = ({
         onDragEnd={handleDragEnd}
       >
         <SortableContext items={views} strategy={horizontalListSortingStrategy}>
-          {views.map((view, index) => (
-            <SplitViewPanel view={view} key={view.id} setSlots={setSlots}>
-              {resizeHandleRenderer(view, index)}
-            </SplitViewPanel>
-          ))}
+          {views.map((view, index) =>
+            visible ? (
+              <SplitViewPanel view={view} key={view.id} setSlots={setSlots}>
+                {resizeHandleRenderer(view, index)}
+              </SplitViewPanel>
+            ) : null
+          )}
         </SortableContext>
       </DndContext>