From 5760c41cd021fd5aba68538fdbc8d9b5dc8c8db0 Mon Sep 17 00:00:00 2001
From: Himself65 <himself65@outlook.com>
Date: Mon, 6 Mar 2023 03:06:11 -0600
Subject: [PATCH] fix: preview page (#1355)

---
 .../blocksuite/block-suite-editor/index.tsx   | 20 ++++++++++---------
 .../components/blocksuite/header/index.tsx    |  4 +++-
 .../web/src/components/page-detail-editor.tsx |  3 +++
 apps/web/src/pages/preview/[previewId].tsx    | 15 ++++++++++++--
 4 files changed, 30 insertions(+), 12 deletions(-)

diff --git a/apps/web/src/components/blocksuite/block-suite-editor/index.tsx b/apps/web/src/components/blocksuite/block-suite-editor/index.tsx
index 049b3fc1ef..b0ab1a7239 100644
--- a/apps/web/src/components/blocksuite/block-suite-editor/index.tsx
+++ b/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();
diff --git a/apps/web/src/components/blocksuite/header/index.tsx b/apps/web/src/components/blocksuite/header/index.tsx
index 728d14aac4..d6a56fdfb8 100644
--- a/apps/web/src/components/blocksuite/header/index.tsx
+++ b/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']
diff --git a/apps/web/src/components/page-detail-editor.tsx b/apps/web/src/components/page-detail-editor.tsx
index eda01d4932..a90ecefb1e 100644
--- a/apps/web/src/components/page-detail-editor.tsx
+++ b/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}
       >
diff --git a/apps/web/src/pages/preview/[previewId].tsx b/apps/web/src/pages/preview/[previewId].tsx
index 61fdcae63f..5c8463191e 100644
--- a/apps/web/src/pages/preview/[previewId].tsx
+++ b/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>
     </>