Jayden/AFFiNE-Mirror
0
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-07-11 23:26:30 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(core): avoid multiple append right sidebar tab lit component (#9806)

Browse Source 
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
This commit is contained in:
L-Sun
2025-01-21 02:32:35 +00:00
parent 6edb341255
commit d2bde09ef6
2 changed files with 33 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/frontend/core/src/desktop/pages/workspace/detail-page/tabs/frame.tsx
+17 -20
View File
@@ -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} />;
};
packages/frontend/core/src/desktop/pages/workspace/detail-page/tabs/outline.tsx
+16 -21
View File
@@ -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} />;
};