feat(core): add outline viewer for share page (#8190)

Author: L-Sun

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

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>

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