From d2bde09ef63083855e6ce601f2a4c1ebc638f13c Mon Sep 17 00:00:00 2001
From: L-Sun <zover.v@gmail.com>
Date: Tue, 21 Jan 2025 02:32:35 +0000
Subject: [PATCH] fix(core): avoid multiple append right sidebar tab lit
 component (#9806)

This PR fixed that the TOC panel and frame panel will be connect and disconnect repeatly on the same instance. Similar issue:  https://github.com/toeverything/AFFiNE/pull/9019#discussion_r1872635745
---
 .../workspace/detail-page/tabs/frame.tsx      | 37 +++++++++----------
 .../workspace/detail-page/tabs/outline.tsx    | 37 ++++++++-----------
 2 files changed, 33 insertions(+), 41 deletions(-)

diff --git a/packages/frontend/core/src/desktop/pages/workspace/detail-page/tabs/frame.tsx b/packages/frontend/core/src/desktop/pages/workspace/detail-page/tabs/frame.tsx
index 6ca62948e7..baf94ea5cb 100644
--- a/packages/frontend/core/src/desktop/pages/workspace/detail-page/tabs/frame.tsx
+++ b/packages/frontend/core/src/desktop/pages/workspace/detail-page/tabs/frame.tsx
@@ -1,7 +1,6 @@
-import { assertExists } from '@blocksuite/affine/global/utils';
 import type { AffineEditorContainer } from '@blocksuite/affine/presets';
 import { FramePanel } from '@blocksuite/affine/presets';
-import { useCallback, useRef } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
 
 import * as styles from './frame.css';
 
@@ -13,25 +12,23 @@ export const EditorFramePanel = ({
 }) => {
   const framePanelRef = useRef<FramePanel | null>(null);
 
-  const onRefChange = useCallback((container: HTMLDivElement | null) => {
-    if (container) {
-      assertExists(framePanelRef.current, 'frame panel should be initialized');
-      container.append(framePanelRef.current);
+  const onRefChange = useCallback(
+    (container: HTMLDivElement | null) => {
+      if (editor?.host && container && container.children.length === 0) {
+        framePanelRef.current = new FramePanel();
+        framePanelRef.current.host = editor.host;
+        framePanelRef.current.fitPadding = [20, 20, 20, 20];
+        container.append(framePanelRef.current);
+      }
+    },
+    [editor?.host]
+  );
+
+  useEffect(() => {
+    if (editor?.host && framePanelRef.current) {
+      framePanelRef.current.host = editor.host;
     }
-  }, []);
-
-  if (!editor) {
-    return;
-  }
-
-  if (!framePanelRef.current) {
-    framePanelRef.current = new FramePanel();
-  }
-
-  if (editor.host !== framePanelRef.current?.host && editor.host) {
-    (framePanelRef.current as FramePanel).host = editor.host;
-    (framePanelRef.current as FramePanel).fitPadding = [20, 20, 20, 20];
-  }
+  }, [editor?.host]);
 
   return <div className={styles.root} ref={onRefChange} />;
 };
diff --git a/packages/frontend/core/src/desktop/pages/workspace/detail-page/tabs/outline.tsx b/packages/frontend/core/src/desktop/pages/workspace/detail-page/tabs/outline.tsx
index f161959486..3c20399fbc 100644
--- a/packages/frontend/core/src/desktop/pages/workspace/detail-page/tabs/outline.tsx
+++ b/packages/frontend/core/src/desktop/pages/workspace/detail-page/tabs/outline.tsx
@@ -1,6 +1,6 @@
 import type { AffineEditorContainer } from '@blocksuite/affine/presets';
 import { OutlinePanel } from '@blocksuite/affine/presets';
-import { useCallback, useRef } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
 
 import * as styles from './outline.css';
 
@@ -12,28 +12,23 @@ export const EditorOutlinePanel = ({
 }) => {
   const outlinePanelRef = useRef<OutlinePanel | null>(null);
 
-  const onRefChange = useCallback((container: HTMLDivElement | null) => {
-    if (container) {
-      if (outlinePanelRef.current === null) {
-        console.error('outline panel should be initialized');
-        return;
+  const onRefChange = useCallback(
+    (container: HTMLDivElement | null) => {
+      if (container && editor && container.children.length === 0) {
+        outlinePanelRef.current = new OutlinePanel();
+        outlinePanelRef.current.editor = editor;
+        outlinePanelRef.current.fitPadding = [20, 20, 20, 20];
+        container.append(outlinePanelRef.current);
       }
-      container.append(outlinePanelRef.current);
+    },
+    [editor]
+  );
+
+  useEffect(() => {
+    if (editor && outlinePanelRef.current) {
+      outlinePanelRef.current.editor = editor;
     }
-  }, []);
-
-  if (!editor) {
-    return;
-  }
-
-  if (!outlinePanelRef.current) {
-    outlinePanelRef.current = new OutlinePanel();
-  }
-
-  if (editor !== outlinePanelRef.current?.editor) {
-    (outlinePanelRef.current as OutlinePanel).editor = editor;
-    (outlinePanelRef.current as OutlinePanel).fitPadding = [20, 20, 20, 20];
-  }
+  }, [editor]);
 
   return <div className={styles.root} ref={onRefChange} />;
 };