fix(editor): toc viewer no update after delete heading in edgeless mode (#12411)

Close [BS-3494](https://linear.app/affine-design/issue/BS-3494/在白板删除note的标题,切回page模式,toc没更新)

Other changes: `doc` -> `store`

### Before

https://github.com/user-attachments/assets/ddce20b9-eda2-414b-9452-d8d54a811cf1

### After

https://github.com/user-attachments/assets/7124b8a1-9ab4-4e09-b0ff-7ea2cc9613c2

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

- **Bug Fixes**
  - Improved synchronization of the outline viewer to ensure updates after editing headings in edgeless mode.
- **Tests**
  - Added an end-to-end test verifying that the outline viewer correctly reflects changes made in edgeless mode.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
L-Sun
2025-05-21 06:03:48 +00:00
parent d70f09b498
commit 6430a9842f
6 changed files with 54 additions and 43 deletions

View File

@@ -15,31 +15,22 @@ export const EditorOutlineViewer = ({
}) => {
const outlineViewerRef = useRef<OutlineViewer | null>(null);
const onRefChange = useCallback((container: HTMLDivElement | null) => {
if (container) {
if (outlineViewerRef.current === null) {
console.error('outline viewer should be initialized');
return;
const onRefChange = useCallback(
(container: HTMLDivElement | null) => {
if (container && editor) {
if (outlineViewerRef.current) {
outlineViewerRef.current.remove();
}
outlineViewerRef.current = new OutlineViewer();
outlineViewerRef.current.editor = editor;
outlineViewerRef.current.toggleOutlinePanel = openOutlinePanel ?? null;
container.append(outlineViewerRef.current);
}
},
[editor, openOutlinePanel]
);
container.append(outlineViewerRef.current);
}
}, []);
if (!editor || !show) return;
if (!outlineViewerRef.current) {
outlineViewerRef.current = new OutlineViewer();
}
if (outlineViewerRef.current.editor !== editor) {
outlineViewerRef.current.editor = editor;
}
if (
outlineViewerRef.current.toggleOutlinePanel !== openOutlinePanel &&
openOutlinePanel
) {
outlineViewerRef.current.toggleOutlinePanel = openOutlinePanel;
}
if (!editor || !show) return null;
return <div className={styles.root} ref={onRefChange} />;
};