feat: bump blocksuite (#5286)

Co-authored-by: donteatfriedrice <huisheng.chen7788@outlook.com>

packages/frontend/core/src/pages/workspace/detail-page/detail-page.tsx

@@ -8,7 +8,7 @@ import { WorkspaceSubPath } from '@affine/env/workspace';
 import { globalBlockSuiteSchema } from '@affine/workspace/manager';
 import { SyncEngineStep } from '@affine/workspace/providers';
 import { assertExists } from '@blocksuite/global/utils';
-import type { EditorContainer } from '@blocksuite/presets';
+import type { AffineEditorContainer } from '@blocksuite/presets';
 import type { Page, Workspace } from '@blocksuite/store';
 import { useBlockSuitePageMeta } from '@toeverything/hooks/use-block-suite-page-meta';
 import {
@@ -131,7 +131,7 @@ const DetailPageImpl = ({ page }: { page: Page }) => {
   useRegisterBlocksuiteEditorCommands(currentPageId, mode);
 
   const onLoad = useCallback(
-    (page: Page, editor: EditorContainer) => {
+    (page: Page, editor: AffineEditorContainer) => {
       try {
         // todo(joooye34): improve the following migration code
         const surfaceBlock = page.getBlockByFlavour('affine:surface')[0];

packages/frontend/core/src/pages/workspace/detail-page/editor-sidebar/atoms.ts

@@ -3,12 +3,16 @@ import { assertExists } from '@blocksuite/global/utils';
 import { atom } from 'jotai';
 import { selectAtom } from 'jotai/utils';
 
+import { framePanelExtension } from './extensions/frame';
 import { outlineExtension } from './extensions/outline';
 import type { EditorExtension, EditorExtensionName } from './types';
 
 // the list of all possible extensions in affine.
 // order matters (determines the order of the tabs)
-export const extensions: EditorExtension[] = [outlineExtension];
+export const extensions: EditorExtension[] = [
+  outlineExtension,
+  framePanelExtension,
+];
 
 export interface EditorSidebarState {
   isOpen: boolean;

packages/frontend/core/src/pages/workspace/detail-page/editor-sidebar/editor-sidebar.css.ts

@@ -6,5 +6,5 @@ export const root = style({
   flex: 1,
   overflow: 'auto',
   width: '100%',
-  minWidth: '300px',
+  minWidth: '320px',
 });

packages/frontend/core/src/pages/workspace/detail-page/editor-sidebar/extensions/frame.tsx

@@ -1,41 +1,43 @@
-import { TOCNotesPanel } from '@blocksuite/blocks';
+import { editorContainerAtom } from '@affine/component/block-suite-editor';
 import { assertExists } from '@blocksuite/global/utils';
 import { FrameIcon } from '@blocksuite/icons';
+import { FramePanel } from '@blocksuite/presets';
+import { useAtom } from 'jotai';
 import { useCallback, useRef } from 'react';
 
-import { useCurrentPage } from '../../../../../hooks/current/use-current-page';
 import type { EditorExtension } from '../types';
 import * as styles from './frame.css';
 
-// A wrapper for TOCNotesPanel
-const EditorOutline = () => {
-  const tocPanelRef = useRef<TOCNotesPanel | null>(null);
-  const currentPage = useCurrentPage();
+// A wrapper for FramePanel
+const EditorFramePanel = () => {
+  const framePanelRef = useRef<FramePanel | null>(null);
+  const [editorContainer] = useAtom(editorContainerAtom);
 
   const onRefChange = useCallback((container: HTMLDivElement | null) => {
     if (container) {
-      assertExists(tocPanelRef.current, 'toc panel should be initialized');
-      container.append(tocPanelRef.current);
+      assertExists(framePanelRef.current, 'frame panel should be initialized');
+      container.append(framePanelRef.current);
     }
   }, []);
 
-  if (!currentPage) {
+  if (!editorContainer) {
     return;
   }
 
-  if (!tocPanelRef.current) {
-    tocPanelRef.current = new TOCNotesPanel();
+  if (!framePanelRef.current) {
+    framePanelRef.current = new FramePanel();
   }
 
-  if (currentPage !== tocPanelRef.current?.page) {
-    (tocPanelRef.current as TOCNotesPanel).page = currentPage;
+  if (editorContainer !== framePanelRef.current?.editor) {
+    (framePanelRef.current as FramePanel).editor = editorContainer;
+    (framePanelRef.current as FramePanel).fitPadding = [20, 20, 20, 20];
   }
 
   return <div className={styles.root} ref={onRefChange} />;
 };
 
-export const frameExtension: EditorExtension = {
+export const framePanelExtension: EditorExtension = {
   name: 'frame',
   icon: <FrameIcon />,
-  Component: EditorOutline,
+  Component: EditorFramePanel,
 };

packages/frontend/core/src/pages/workspace/detail-page/editor-sidebar/extensions/outline.tsx

@@ -1,16 +1,17 @@
-import { TOCNotesPanel } from '@blocksuite/blocks';
+import { editorContainerAtom } from '@affine/component/block-suite-editor';
 import { assertExists } from '@blocksuite/global/utils';
 import { TocIcon } from '@blocksuite/icons';
+import { TOCPanel } from '@blocksuite/presets';
+import { useAtom } from 'jotai';
 import { useCallback, useRef } from 'react';
 
-import { useCurrentPage } from '../../../../../hooks/current/use-current-page';
 import type { EditorExtension } from '../types';
 import * as styles from './outline.css';
 
 // A wrapper for TOCNotesPanel
 const EditorOutline = () => {
-  const tocPanelRef = useRef<TOCNotesPanel | null>(null);
-  const currentPage = useCurrentPage();
+  const tocPanelRef = useRef<TOCPanel | null>(null);
+  const [editorContainer] = useAtom(editorContainerAtom);
 
   const onRefChange = useCallback((container: HTMLDivElement | null) => {
     if (container) {
@@ -19,16 +20,17 @@ const EditorOutline = () => {
     }
   }, []);
 
-  if (!currentPage) {
+  if (!editorContainer) {
     return;
   }
 
   if (!tocPanelRef.current) {
-    tocPanelRef.current = new TOCNotesPanel();
+    tocPanelRef.current = new TOCPanel();
   }
 
-  if (currentPage !== tocPanelRef.current?.page) {
-    (tocPanelRef.current as TOCNotesPanel).page = currentPage;
+  if (editorContainer !== tocPanelRef.current?.editor) {
+    (tocPanelRef.current as TOCPanel).editor = editorContainer;
+    (tocPanelRef.current as TOCPanel).fitPadding = [20, 20, 20, 20];
   }
 
   return <div className={styles.root} ref={onRefChange} />;