From 6ce6cb33ef422dac9aa607f87ad966a6a39778ee Mon Sep 17 00:00:00 2001
From: L-Sun <zover.v@gmail.com>
Date: Tue, 10 Sep 2024 14:00:16 +0000
Subject: [PATCH] feat(core): add outline viewer for share page (#8190)

---
 .../blocksuite/outline-viewer/index.tsx       |  7 ++-
 .../src/pages/workspace/share/share-page.tsx  |  8 ++-
 tests/affine-cloud/e2e/share-page.spec.ts     | 51 +++++++++++++++++++
 3 files changed, 63 insertions(+), 3 deletions(-)

diff --git a/packages/frontend/core/src/components/blocksuite/outline-viewer/index.tsx b/packages/frontend/core/src/components/blocksuite/outline-viewer/index.tsx
index b7d28ced5e..dd8a55fa98 100644
--- a/packages/frontend/core/src/components/blocksuite/outline-viewer/index.tsx
+++ b/packages/frontend/core/src/components/blocksuite/outline-viewer/index.tsx
@@ -11,7 +11,7 @@ export const EditorOutlineViewer = ({
 }: {
   editor: AffineEditorContainer | null;
   show: boolean;
-  openOutlinePanel: () => void;
+  openOutlinePanel?: () => void;
 }) => {
   const outlineViewerRef = useRef<OutlineViewer | null>(null);
 
@@ -34,7 +34,10 @@ export const EditorOutlineViewer = ({
   if (outlineViewerRef.current.editor !== editor) {
     outlineViewerRef.current.editor = editor;
   }
-  if (outlineViewerRef.current.toggleOutlinePanel !== openOutlinePanel) {
+  if (
+    outlineViewerRef.current.toggleOutlinePanel !== openOutlinePanel &&
+    openOutlinePanel
+  ) {
     outlineViewerRef.current.toggleOutlinePanel = openOutlinePanel;
   }
 
diff --git a/packages/frontend/core/src/pages/workspace/share/share-page.tsx b/packages/frontend/core/src/pages/workspace/share/share-page.tsx
index 909ff243d9..741909df04 100644
--- a/packages/frontend/core/src/pages/workspace/share/share-page.tsx
+++ b/packages/frontend/core/src/pages/workspace/share/share-page.tsx
@@ -1,5 +1,6 @@
 import { Scrollable } from '@affine/component';
 import { AppFallback } from '@affine/core/components/affine/app-container';
+import { EditorOutlineViewer } from '@affine/core/components/blocksuite/outline-viewer';
 import { PageDetailEditor } from '@affine/core/components/page-detail-editor';
 import { SharePageNotFoundError } from '@affine/core/components/share-page-not-found-error';
 import { AppContainer, MainContainer } from '@affine/core/components/workspace';
@@ -112,7 +113,8 @@ const SharePageInner = ({
   const [workspace, setWorkspace] = useState<Workspace | null>(null);
   const [page, setPage] = useState<Doc | null>(null);
   const [editor, setEditor] = useState<Editor | null>(null);
-  const [_, setActiveBlocksuiteEditor] = useActiveBlocksuiteEditor();
+  const [editorContainer, setActiveBlocksuiteEditor] =
+    useActiveBlocksuiteEditor();
 
   useEffect(() => {
     // create a workspace for share page
@@ -229,6 +231,10 @@ const SharePageInner = ({
                     </Scrollable.Viewport>
                     <Scrollable.Scrollbar />
                   </Scrollable.Root>
+                  <EditorOutlineViewer
+                    editor={editorContainer}
+                    show={publishMode === 'page'}
+                  />
                   <SharePageFooter />
                 </div>
               </div>
diff --git a/tests/affine-cloud/e2e/share-page.spec.ts b/tests/affine-cloud/e2e/share-page.spec.ts
index 99d9f38454..63c3ba6520 100644
--- a/tests/affine-cloud/e2e/share-page.spec.ts
+++ b/tests/affine-cloud/e2e/share-page.spec.ts
@@ -69,6 +69,57 @@ test('can enable share page', async ({ page, browser }) => {
   }
 });
 
+test('share page should have toc', async ({ page, browser }) => {
+  await page.reload();
+  await waitForEditorLoad(page);
+  await createLocalWorkspace(
+    {
+      name: 'test',
+    },
+    page
+  );
+  await enableCloudWorkspaceFromShareButton(page);
+  const title = getBlockSuiteEditorTitle(page);
+  await title.pressSequentially('TEST TITLE', {
+    delay: 50,
+  });
+  await page.keyboard.press('Enter', { delay: 50 });
+
+  await page.keyboard.type('# Heading 1');
+  await page.keyboard.press('Enter');
+  await page.keyboard.type('# Heading 2');
+  await page.keyboard.press('Enter');
+
+  // enable share page and copy page link
+  await enableShare(page);
+  await page.getByTestId('share-menu-copy-link-button').click();
+  await page.getByTestId('share-link-menu-copy-page').click();
+
+  // check share page is accessible
+  {
+    const context = await browser.newContext();
+    await skipOnboarding(context);
+    const url: string = await page.evaluate(() =>
+      navigator.clipboard.readText()
+    );
+    const page2 = await context.newPage();
+    await page2.goto(url);
+    await waitForEditorLoad(page2);
+
+    const tocIndicators = page2.locator(
+      'affine-outline-viewer .outline-viewer-indicator'
+    );
+    await expect(tocIndicators).toHaveCount(3);
+    await expect(tocIndicators.nth(0)).toBeVisible();
+    await expect(tocIndicators.nth(1)).toBeVisible();
+    await expect(tocIndicators.nth(2)).toBeVisible();
+
+    const viewer = page2.locator('affine-outline-viewer');
+    await tocIndicators.first().hover({ force: true });
+    await expect(viewer).toBeVisible();
+  }
+});
+
 test('share page with default edgeless', async ({ page, browser }) => {
   await page.reload();
   await waitForEditorLoad(page);