fix: preview page (#1355)

apps/web/src/components/blocksuite/block-suite-editor/index.tsx

@@ -97,16 +97,18 @@ export const BlockSuiteEditor = (props: EditorProps) => {
     if (!editor || !container || !page) {
       return;
     }
+    if (page.awarenessStore.getFlag('enable_block_hub')) {
+      editor.createBlockHub().then(blockHub => {
+        if (blockHubRef.current) {
+          blockHubRef.current.remove();
+        }
+        blockHubRef.current = blockHub;
+        const toolWrapper = document.querySelector('#toolWrapper');
+        assertExists(toolWrapper);
+        toolWrapper.appendChild(blockHub);
+      });
+    }
 
-    editor.createBlockHub().then(blockHub => {
-      if (blockHubRef.current) {
-        blockHubRef.current.remove();
-      }
-      blockHubRef.current = blockHub;
-      const toolWrapper = document.querySelector('#toolWrapper');
-      assertExists(toolWrapper);
-      toolWrapper.appendChild(blockHub);
-    });
     container.appendChild(editor);
     return () => {
       blockHubRef.current?.remove();

apps/web/src/components/blocksuite/header/index.tsx

@@ -21,6 +21,7 @@ export type BlockSuiteEditorHeaderProps = React.PropsWithChildren<{
   blockSuiteWorkspace: BlockSuiteWorkspace;
   pageId: string;
   isPublic?: boolean;
+  isPreview?: boolean;
 }>;
 
 export const BlockSuiteEditorHeader: React.FC<BlockSuiteEditorHeaderProps> = ({
@@ -28,6 +29,7 @@ export const BlockSuiteEditorHeader: React.FC<BlockSuiteEditorHeaderProps> = ({
   pageId,
   children,
   isPublic,
+  isPreview,
 }) => {
   const page = blockSuiteWorkspace.getPage(pageId);
   // fixme(himself65): remove this atom and move it to props
@@ -46,7 +48,7 @@ export const BlockSuiteEditorHeader: React.FC<BlockSuiteEditorHeaderProps> = ({
     <Header
       rightItems={
         // fixme(himself65): other right items not supported in public mode
-        isPublic
+        isPublic || isPreview
           ? ['themeModeSwitch']
           : isTrash
           ? ['trashButtonGroup']

apps/web/src/components/page-detail-editor.tsx

@@ -12,6 +12,7 @@ import { BlockSuiteEditorHeader } from './blocksuite/header';
 
 export type PageDetailEditorProps = {
   isPublic?: boolean;
+  isPreview?: boolean;
   blockSuiteWorkspace: BlockSuiteWorkspace;
   pageId: string;
   onInit?: (page: Page, editor: Readonly<EditorContainer>) => void;
@@ -34,6 +35,7 @@ export const PageDetailEditor: React.FC<PageDetailEditorProps> = ({
   onLoad,
   header,
   isPublic,
+  isPreview,
 }) => {
   const page = blockSuiteWorkspace.getPage(pageId);
   if (!page) {
@@ -51,6 +53,7 @@ export const PageDetailEditor: React.FC<PageDetailEditorProps> = ({
       </Helmet>
       <BlockSuiteEditorHeader
         isPublic={isPublic}
+        isPreview={isPreview}
         blockSuiteWorkspace={blockSuiteWorkspace}
         pageId={pageId}
       >

apps/web/src/pages/preview/[previewId].tsx

@@ -5,11 +5,15 @@ import {
   NextPage,
 } from 'next';
 import Head from 'next/head';
-import { useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
 import { PageDetailEditor } from '../../components/page-detail-editor';
 import { PageLoading } from '../../components/pure/loading';
-import { StyledPage, StyledWrapper } from '../../layouts/styles';
+import {
+  StyledPage,
+  StyledToolWrapper,
+  StyledWrapper,
+} from '../../layouts/styles';
 import { BlockSuiteWorkspace } from '../../shared';
 import { createEmptyBlockSuiteWorkspace } from '../../utils';
 
@@ -52,6 +56,7 @@ const PreviewPage: NextPage<PreviewPageProps> = ({
       <StyledPage>
         <StyledWrapper>
           <PageDetailEditor
+            isPreview
             blockSuiteWorkspace={blockSuiteWorkspace}
             pageId="preview"
             onInit={(page, editor) => {
@@ -71,6 +76,12 @@ const PreviewPage: NextPage<PreviewPageProps> = ({
               });
             }}
           />
+          <StyledToolWrapper>
+            {/* fixme(himself65): remove this */}
+            <div id="toolWrapper" style={{ marginBottom: '12px' }}>
+              {/* Slot for block hub */}
+            </div>
+          </StyledToolWrapper>
         </StyledWrapper>
       </StyledPage>
     </>