feat: bump blocksuite (#5286)

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

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'
+            ),
       },
     },
 

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,
 };

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",

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,

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;
 

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

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);

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;
   }
 }
 

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} />;