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

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) => {
+  const onRefChange = useCallback(
-    if (container) {
+    (container: HTMLDivElement | null) => {
-      assertExists(framePanelRef.current, 'frame panel should be initialized');
+      if (editor?.host && container && container.children.length === 0) {
-      container.append(framePanelRef.current);
+        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;
     }
-  }, []);
+  }, [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];
-  }
 
   return <div className={styles.root} ref={onRefChange} />;
 };

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) => {
+  const onRefChange = useCallback(
-    if (container) {
+    (container: HTMLDivElement | null) => {
-      if (outlinePanelRef.current === null) {
+      if (container && editor && container.children.length === 0) {
-        console.error('outline panel should be initialized');
+        outlinePanelRef.current = new OutlinePanel();
-        return;
+        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;
     }
-  }, []);
+  }, [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];
-  }
 
   return <div className={styles.root} ref={onRefChange} />;
 };