feat: bump blocksuite (#5286)

Co-authored-by: donteatfriedrice <huisheng.chen7788@outlook.com>
2026-02-11 20:08:37 +00:00 · 2023-12-15 12:57:52 +08:00
parent 136b4ccb4e
commit af15aa06d4
37 changed files with 302 additions and 259 deletions
--- a/packages/common/env/package.json
+++ b/packages/common/env/package.json
@@ -3,8 +3,8 @@
  "private": true,
  "type": "module",
  "devDependencies": {
-    "@blocksuite/global": "0.11.0-nightly-202312120309-2b3d2ba",
-    "@blocksuite/store": "0.11.0-nightly-202312120309-2b3d2ba",
+    "@blocksuite/global": "0.11.0-nightly-202312150424-f13b992",
+    "@blocksuite/store": "0.11.0-nightly-202312150424-f13b992",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "vitest": "0.34.6",
--- a/packages/common/env/src/global.ts
+++ b/packages/common/env/src/global.ts
@@ -6,7 +6,6 @@ import { isDesktop, isServer } from './constant.js';
 import { UaHelper } from './ua-helper.js';

 export const blockSuiteFeatureFlags = z.object({
-  enable_transformer_clipboard: z.boolean(),
  enable_expand_database_block: z.boolean(),
  enable_bultin_ledits: z.boolean(),
 });
--- a/packages/common/infra/package.json
+++ b/packages/common/infra/package.json
@@ -57,9 +57,9 @@
    "@affine/debug": "workspace:*",
    "@affine/env": "workspace:*",
    "@affine/sdk": "workspace:*",
-    "@blocksuite/blocks": "0.11.0-nightly-202312120309-2b3d2ba",
-    "@blocksuite/global": "0.11.0-nightly-202312120309-2b3d2ba",
-    "@blocksuite/store": "0.11.0-nightly-202312120309-2b3d2ba",
+    "@blocksuite/blocks": "0.11.0-nightly-202312150424-f13b992",
+    "@blocksuite/global": "0.11.0-nightly-202312150424-f13b992",
+    "@blocksuite/store": "0.11.0-nightly-202312150424-f13b992",
    "jotai": "^2.5.1",
    "jotai-effect": "^0.2.3",
    "tinykeys": "^2.1.0",
@@ -68,8 +68,8 @@
  "devDependencies": {
    "@affine-test/fixtures": "workspace:*",
    "@affine/templates": "workspace:*",
-    "@blocksuite/lit": "0.11.0-nightly-202312120309-2b3d2ba",
-    "@blocksuite/presets": "0.11.0-nightly-202312120309-2b3d2ba",
+    "@blocksuite/lit": "0.11.0-nightly-202312150424-f13b992",
+    "@blocksuite/presets": "0.11.0-nightly-202312150424-f13b992",
    "@testing-library/react": "^14.0.0",
    "async-call-rpc": "^6.3.1",
    "electron": "link:../../frontend/electron/node_modules/electron",
--- a/packages/common/sdk/package.json
+++ b/packages/common/sdk/package.json
@@ -22,11 +22,11 @@
    "dist"
  ],
  "dependencies": {
-    "@blocksuite/block-std": "0.11.0-nightly-202312120309-2b3d2ba",
-    "@blocksuite/blocks": "0.11.0-nightly-202312120309-2b3d2ba",
-    "@blocksuite/global": "0.11.0-nightly-202312120309-2b3d2ba",
-    "@blocksuite/presets": "0.11.0-nightly-202312120309-2b3d2ba",
-    "@blocksuite/store": "0.11.0-nightly-202312120309-2b3d2ba",
+    "@blocksuite/block-std": "0.11.0-nightly-202312150424-f13b992",
+    "@blocksuite/blocks": "0.11.0-nightly-202312150424-f13b992",
+    "@blocksuite/global": "0.11.0-nightly-202312150424-f13b992",
+    "@blocksuite/presets": "0.11.0-nightly-202312150424-f13b992",
+    "@blocksuite/store": "0.11.0-nightly-202312150424-f13b992",
    "jotai": "^2.5.1",
    "zod": "^3.22.4"
  },
--- a/packages/common/sdk/src/entry.ts
+++ b/packages/common/sdk/src/entry.ts
@@ -1,5 +1,5 @@
 import type { BaseSelection } from '@blocksuite/block-std';
-import type { EditorContainer } from '@blocksuite/presets';
+import type { AffineEditorContainer } from '@blocksuite/presets';
 import type { Page } from '@blocksuite/store';
 import type { Workspace } from '@blocksuite/store';
 import type { Atom, getDefaultStore } from 'jotai/vanilla';
@@ -10,7 +10,7 @@ export type Part = 'headerItem' | 'editor' | 'setting' | 'formatBar';

 export type CallbackMap = {
  headerItem: (root: HTMLElement) => () => void;
-  editor: (root: HTMLElement, editor: EditorContainer) => () => void;
+  editor: (root: HTMLElement, editor: AffineEditorContainer) => () => void;
  setting: (root: HTMLElement) => () => void;
  formatBar: (
    root: HTMLElement,
--- a/packages/common/y-indexeddb/package.json
+++ b/packages/common/y-indexeddb/package.json
@@ -37,8 +37,8 @@
    "y-provider": "workspace:*"
  },
  "devDependencies": {
-    "@blocksuite/blocks": "0.11.0-nightly-202312120309-2b3d2ba",
-    "@blocksuite/store": "0.11.0-nightly-202312120309-2b3d2ba",
+    "@blocksuite/blocks": "0.11.0-nightly-202312150424-f13b992",
+    "@blocksuite/store": "0.11.0-nightly-202312150424-f13b992",
    "fake-indexeddb": "^5.0.0",
    "vite": "^5.0.6",
    "vite-plugin-dts": "3.6.0",
--- a/packages/common/y-provider/package.json
+++ b/packages/common/y-provider/package.json
@@ -24,7 +24,7 @@
    "build": "vite build"
  },
  "devDependencies": {
-    "@blocksuite/store": "0.11.0-nightly-202312120309-2b3d2ba",
+    "@blocksuite/store": "0.11.0-nightly-202312150424-f13b992",
    "vite": "^5.0.6",
    "vite-plugin-dts": "3.6.0",
    "vitest": "0.34.6",
--- a/packages/frontend/component/package.json
+++ b/packages/frontend/component/package.json
@@ -71,12 +71,12 @@
    "uuid": "^9.0.1"
  },
  "devDependencies": {
-    "@blocksuite/blocks": "0.11.0-nightly-202312120309-2b3d2ba",
-    "@blocksuite/global": "0.11.0-nightly-202312120309-2b3d2ba",
+    "@blocksuite/blocks": "0.11.0-nightly-202312150424-f13b992",
+    "@blocksuite/global": "0.11.0-nightly-202312150424-f13b992",
    "@blocksuite/icons": "2.1.36",
-    "@blocksuite/lit": "0.11.0-nightly-202312120309-2b3d2ba",
-    "@blocksuite/presets": "0.11.0-nightly-202312120309-2b3d2ba",
-    "@blocksuite/store": "0.11.0-nightly-202312120309-2b3d2ba",
+    "@blocksuite/lit": "0.11.0-nightly-202312150424-f13b992",
+    "@blocksuite/presets": "0.11.0-nightly-202312150424-f13b992",
+    "@blocksuite/store": "0.11.0-nightly-202312150424-f13b992",
    "@storybook/addon-actions": "^7.5.3",
    "@storybook/addon-essentials": "^7.5.3",
    "@storybook/addon-interactions": "^7.5.3",
--- a/packages/frontend/component/src/components/block-suite-editor/index.jotai.ts
+++ b/packages/frontend/component/src/components/block-suite-editor/index.jotai.ts
@@ -0,0 +1,4 @@
+import type { AffineEditorContainer } from '@blocksuite/presets';
+import { atom } from 'jotai';
+
+export const editorContainerAtom = atom<AffineEditorContainer | null>(null);
--- a/packages/frontend/component/src/components/block-suite-editor/index.tsx
+++ b/packages/frontend/component/src/components/block-suite-editor/index.tsx
@@ -1,8 +1,9 @@
 import { assertExists } from '@blocksuite/global/utils';
-import { EditorContainer } from '@blocksuite/presets';
+import { AffineEditorContainer } from '@blocksuite/presets';
 import type { Page } from '@blocksuite/store';
 import clsx from 'clsx';
 import { use } from 'foxact/use';
+import { useAtom } from 'jotai';
 import type { CSSProperties, ReactElement } from 'react';
 import {
  memo,
@@ -19,8 +20,11 @@ import {
  blockSuiteEditorHeaderStyle,
  blockSuiteEditorStyle,
 } from './index.css';
+import { editorContainerAtom } from './index.jotai';
 import { editorSpecs } from './specs';

+export { editorContainerAtom } from './index.jotai';
+
 interface BlockElement extends Element {
  path: string[];
 }
@@ -31,7 +35,7 @@ export type EditorProps = {
  defaultSelectedBlockId?: string;
  onModeChange?: (mode: 'page' | 'edgeless') => void;
  // on Editor instance instantiated
-  onLoadEditor?: (editor: EditorContainer) => () => void;
+  onLoadEditor?: (editor: AffineEditorContainer) => () => void;
  style?: CSSProperties;
  className?: string;
 };
@@ -147,10 +151,11 @@ const BlockSuiteEditorImpl = ({
 }: EditorProps): ReactElement => {
  usePageRoot(page);

+  const [, setEditorContainer] = useAtom(editorContainerAtom);
  assertExists(page, 'page should not be null');
-  const editorRef = useRef<EditorContainer | null>(null);
+  const editorRef = useRef<AffineEditorContainer | null>(null);
  if (editorRef.current === null) {
-    editorRef.current = new EditorContainer();
+    editorRef.current = new AffineEditorContainer();
    editorRef.current.autofocus = true;
  }
  const editor = editorRef.current;
@@ -193,10 +198,11 @@ const BlockSuiteEditorImpl = ({
      return;
    }
    container.append(editor);
+    setEditorContainer(editor);
    return () => {
      editor.remove();
    };
-  }, [editor]);
+  }, [editor, setEditorContainer]);

  const blockElement = useBlockElementById(
    containerRef.current,
--- a/packages/frontend/core/.webpack/config.ts
+++ b/packages/frontend/core/.webpack/config.ts
@@ -205,9 +205,15 @@ export const createConfiguration: (
        '@blocksuite/store': blocksuiteBaseDir
          ? join(blocksuiteBaseDir, 'packages', 'store', 'src')
          : join(workspaceRoot, 'node_modules', '@blocksuite', 'store', 'dist'),
-        '@blocksuite/virgo': blocksuiteBaseDir
-          ? join(blocksuiteBaseDir, 'packages', 'virgo', 'src')
-          : join(workspaceRoot, 'node_modules', '@blocksuite', 'virgo', 'dist'),
+        '@blocksuite/inline': blocksuiteBaseDir
+          ? join(blocksuiteBaseDir, 'packages', 'inline', 'src')
+          : join(
+              workspaceRoot,
+              'node_modules',
+              '@blocksuite',
+              'inline',
+              'dist'
+            ),
      },
    },

--- a/packages/frontend/core/.webpack/runtime-config.ts
+++ b/packages/frontend/core/.webpack/runtime-config.ts
@@ -6,7 +6,6 @@ const require = createRequire(import.meta.url);
 const packageJson = require('../package.json');

 const editorFlags: BlockSuiteFeatureFlags = {
-  enable_transformer_clipboard: false,
  enable_expand_database_block: false,
  enable_bultin_ledits: false,
 };
--- a/packages/frontend/core/package.json
+++ b/packages/frontend/core/package.json
@@ -25,14 +25,14 @@
    "@affine/i18n": "workspace:*",
    "@affine/templates": "workspace:*",
    "@affine/workspace": "workspace:*",
-    "@blocksuite/block-std": "0.11.0-nightly-202312120309-2b3d2ba",
-    "@blocksuite/blocks": "0.11.0-nightly-202312120309-2b3d2ba",
-    "@blocksuite/global": "0.11.0-nightly-202312120309-2b3d2ba",
+    "@blocksuite/block-std": "0.11.0-nightly-202312150424-f13b992",
+    "@blocksuite/blocks": "0.11.0-nightly-202312150424-f13b992",
+    "@blocksuite/global": "0.11.0-nightly-202312150424-f13b992",
    "@blocksuite/icons": "2.1.36",
-    "@blocksuite/lit": "0.11.0-nightly-202312120309-2b3d2ba",
-    "@blocksuite/presets": "0.11.0-nightly-202312120309-2b3d2ba",
-    "@blocksuite/store": "0.11.0-nightly-202312120309-2b3d2ba",
-    "@blocksuite/virgo": "0.11.0-nightly-202312120309-2b3d2ba",
+    "@blocksuite/inline": "0.11.0-nightly-202312150424-f13b992",
+    "@blocksuite/lit": "0.11.0-nightly-202312150424-f13b992",
+    "@blocksuite/presets": "0.11.0-nightly-202312150424-f13b992",
+    "@blocksuite/store": "0.11.0-nightly-202312150424-f13b992",
    "@dnd-kit/core": "^6.0.8",
    "@dnd-kit/sortable": "^8.0.0",
    "@emotion/cache": "^11.11.0",
--- a/packages/frontend/core/src/bootstrap/plugins/setup.ts
+++ b/packages/frontend/core/src/bootstrap/plugins/setup.ts
@@ -146,7 +146,7 @@ function createSetupImpl(rootStore: ReturnType<typeof createStore>) {
    '@affine/component': import('@affine/component'),
    '@blocksuite/icons': import('@blocksuite/icons'),
    '@blocksuite/blocks': import('@blocksuite/blocks'),
-    '@blocksuite/virgo': import('@blocksuite/virgo'),
+    '@blocksuite/inline': import('@blocksuite/inline'),
    '@affine/sdk/entry': {
      rootStore,
      currentWorkspaceAtom: currentWorkspaceAtom,
@@ -541,7 +541,7 @@ function createSetupImpl(rootStore: ReturnType<typeof createStore>) {
        } else if (part === 'formatBar') {
          const register = (widget: AffineFormatBarWidget) => {
            const div = document.createElement('div');
-            const root = widget.root;
+            const root = widget.host;
            const cleanup = (callback as CallbackMap['formatBar'])(
              div,
              widget.page,
--- a/packages/frontend/core/src/bootstrap/register-blocksuite-components.ts
+++ b/packages/frontend/core/src/bootstrap/register-blocksuite-components.ts
@@ -1,6 +1,18 @@
-import { registerTOCComponents } from '@blocksuite/blocks';
+import { registerTOCPanelComponents } from '@blocksuite/presets';
+import { registerFramePanelComponents } from '@blocksuite/presets';

-registerTOCComponents(components => {
+registerTOCPanelComponents(components => {
+  for (const compName in components) {
+    if (window.customElements.get(compName)) continue;
+
+    window.customElements.define(
+      compName,
+      components[compName as keyof typeof components]
+    );
+  }
+});
+
+registerFramePanelComponents(components => {
  for (const compName in components) {
    if (window.customElements.get(compName)) continue;

--- a/packages/frontend/core/src/components/cloud/share-header-right-item/present.tsx
+++ b/packages/frontend/core/src/components/cloud/share-header-right-item/present.tsx
@@ -12,7 +12,7 @@ export const PresentButton = () => {

  const handlePresent = useCallback(() => {
    // TODO: use editor Atom
-    const editorRoot = document.querySelector('block-suite-root');
+    const editorRoot = document.querySelector('editor-host');
    if (!editorRoot || isPresent) return;

    // TODO: use surfaceService subAtom
@@ -28,7 +28,7 @@ export const PresentButton = () => {
    if (!isPresent) return;

    // TODO: use editor Atom
-    const editorRoot = document.querySelector('block-suite-root');
+    const editorRoot = document.querySelector('editor-host');
    if (!editorRoot) return;

    // TODO: use surfaceService subAtom
--- a/packages/frontend/core/src/components/page-detail-editor.tsx
+++ b/packages/frontend/core/src/components/page-detail-editor.tsx
@@ -2,7 +2,7 @@ import './page-detail-editor.css';

 import { PageNotFoundError } from '@affine/env/constant';
 import { assertExists, DisposableGroup } 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 { useBlockSuiteWorkspacePage } from '@toeverything/hooks/use-block-suite-workspace-page';
@@ -23,10 +23,13 @@ import * as styles from './page-detail-editor.css';

 declare global {
  // eslint-disable-next-line no-var
-  var currentEditor: EditorContainer | undefined;
+  var currentEditor: AffineEditorContainer | undefined;
 }

-export type OnLoadEditor = (page: Page, editor: EditorContainer) => () => void;
+export type OnLoadEditor = (
+  page: Page,
+  editor: AffineEditorContainer
+) => () => void;

 export interface PageDetailEditorProps {
  isPublic?: boolean;
@@ -93,11 +96,11 @@ const PageDetailEditorMain = memo(function PageDetailEditorMain({
    [isPublic, switchToEdgelessMode, pageId, switchToPageMode]
  );

-  const [, setEditor] = useState<EditorContainer>();
+  const [, setEditor] = useState<AffineEditorContainer>();
  const blockId = useRouterHash();

  const onLoadEditor = useCallback(
-    (editor: EditorContainer) => {
+    (editor: AffineEditorContainer) => {
      // debug current detail editor
      globalThis.currentEditor = editor;
      setEditor(editor);
--- a/packages/frontend/core/src/hooks/affine/use-export-page.ts
+++ b/packages/frontend/core/src/hooks/affine/use-export-page.ts
@@ -4,7 +4,11 @@ import {
 } from '@affine/component/global-loading';
 import { pushNotificationAtom } from '@affine/component/notification-center';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
-import type { PageBlockModel } from '@blocksuite/blocks';
+import {
+  HtmlTransformer,
+  MarkdownTransformer,
+  type PageBlockModel,
+} from '@blocksuite/blocks';
 import { ContentParser } from '@blocksuite/blocks/content-parser';
 import type { Page } from '@blocksuite/store';
 import { useSetAtom } from 'jotai';
@@ -12,12 +16,6 @@ import { nanoid } from 'nanoid';
 import { useCallback } from 'react';

 type ExportType = 'pdf' | 'html' | 'png' | 'markdown';
-const typeToContentParserMethodMap = {
-  pdf: 'exportPdf',
-  html: 'exportHtml',
-  png: 'exportPng',
-  markdown: 'exportMarkdown',
-} satisfies Record<ExportType, keyof ContentParser>;

 const contentParserWeakMap = new WeakMap<Page, ContentParser>();

@@ -41,14 +39,26 @@ interface ExportHandlerOptions {
 }

 async function exportHandler({ page, type }: ExportHandlerOptions) {
-  if (type === 'pdf' && environment.isDesktop && page.meta.mode === 'page') {
-    await window.apis?.export.savePDFFileAs(
-      (page.root as PageBlockModel).title.toString()
-    );
-  } else {
-    const contentParser = getContentParser(page);
-    const method = typeToContentParserMethodMap[type];
-    await contentParser[method]();
+  const contentParser = getContentParser(page);
+  switch (type) {
+    case 'html':
+      await HtmlTransformer.exportPage(page);
+      break;
+    case 'markdown':
+      await MarkdownTransformer.exportPage(page);
+      break;
+    case 'pdf':
+      if (environment.isDesktop && page.meta.mode === 'page') {
+        await window.apis?.export.savePDFFileAs(
+          (page.root as PageBlockModel).title.toString()
+        );
+      } else {
+        await contentParser['exportPdf']();
+      }
+      break;
+    case 'png':
+      await contentParser['exportPng']();
+      break;
  }
 }

--- a/packages/frontend/core/src/pages/workspace/detail-page/detail-page.tsx
+++ b/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];
--- a/packages/frontend/core/src/pages/workspace/detail-page/editor-sidebar/atoms.ts
+++ b/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;
--- a/packages/frontend/core/src/pages/workspace/detail-page/editor-sidebar/editor-sidebar.css.ts
+++ b/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',
 });
--- a/packages/frontend/core/src/pages/workspace/detail-page/editor-sidebar/extensions/frame.tsx
+++ b/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,
 };
--- a/packages/frontend/core/src/pages/workspace/detail-page/editor-sidebar/extensions/outline.tsx
+++ b/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} />;
--- a/packages/frontend/electron/package.json
+++ b/packages/frontend/electron/package.json
@@ -32,10 +32,10 @@
    "@affine/sdk": "workspace:*",
    "@affine/templates": "workspace:*",
    "@affine/vue-hello-world-plugin": "workspace:*",
-    "@blocksuite/blocks": "0.11.0-nightly-202312120309-2b3d2ba",
-    "@blocksuite/lit": "0.11.0-nightly-202312120309-2b3d2ba",
-    "@blocksuite/presets": "0.11.0-nightly-202312120309-2b3d2ba",
-    "@blocksuite/store": "0.11.0-nightly-202312120309-2b3d2ba",
+    "@blocksuite/blocks": "0.11.0-nightly-202312150424-f13b992",
+    "@blocksuite/lit": "0.11.0-nightly-202312150424-f13b992",
+    "@blocksuite/presets": "0.11.0-nightly-202312150424-f13b992",
+    "@blocksuite/store": "0.11.0-nightly-202312150424-f13b992",
    "@electron-forge/cli": "^7.2.0",
    "@electron-forge/core": "^7.2.0",
    "@electron-forge/core-utils": "^7.2.0",
--- a/packages/frontend/hooks/package.json
+++ b/packages/frontend/hooks/package.json
@@ -20,12 +20,12 @@
  "devDependencies": {
    "@affine/debug": "workspace:*",
    "@affine/env": "workspace:*",
-    "@blocksuite/block-std": "0.11.0-nightly-202312120309-2b3d2ba",
-    "@blocksuite/blocks": "0.11.0-nightly-202312120309-2b3d2ba",
-    "@blocksuite/global": "0.11.0-nightly-202312120309-2b3d2ba",
-    "@blocksuite/lit": "0.11.0-nightly-202312120309-2b3d2ba",
-    "@blocksuite/presets": "0.11.0-nightly-202312120309-2b3d2ba",
-    "@blocksuite/store": "0.11.0-nightly-202312120309-2b3d2ba",
+    "@blocksuite/block-std": "0.11.0-nightly-202312150424-f13b992",
+    "@blocksuite/blocks": "0.11.0-nightly-202312150424-f13b992",
+    "@blocksuite/global": "0.11.0-nightly-202312150424-f13b992",
+    "@blocksuite/lit": "0.11.0-nightly-202312150424-f13b992",
+    "@blocksuite/presets": "0.11.0-nightly-202312150424-f13b992",
+    "@blocksuite/store": "0.11.0-nightly-202312150424-f13b992",
    "@testing-library/react": "^14.0.0",
    "@toeverything/infra": "workspace:*",
    "@types/image-blob-reduce": "^4.1.3",
--- a/packages/plugins/image-preview/src/component/index.tsx
+++ b/packages/plugins/image-preview/src/component/index.tsx
@@ -191,7 +191,7 @@ const ImagePreviewModalImpl = (
        const block = page.getBlockById(blockId) as ImageBlockModel;
        assertExists(block);
        const store = block.page.blob;
-        const url = store?.get(block.sourceId);
+        const url = store?.get(block.sourceId as string);
        const img = await url;
        if (!img) {
          return;
@@ -260,7 +260,7 @@ const ImagePreviewModalImpl = (
        assertExists(page);
        const block = page.getBlockById(blockId) as ImageBlockModel;
        assertExists(block);
-        return props.workspace.blob.get(block?.sourceId);
+        return props.workspace.blob.get(block?.sourceId as string);
      },
      suspense: true,
    }
--- a/packages/plugins/outline/src/atom.ts
+++ b/packages/plugins/outline/src/atom.ts
@@ -1,5 +0,0 @@
-import { atom } from 'jotai';
-
-export const blocksuiteRootAtom = atom(() =>
-  document.querySelector('block-suite-root')
-);