From afb21f734e08f00ff26f7c9010e58f4412386b2e Mon Sep 17 00:00:00 2001
From: L-Sun <zover.v@gmail.com>
Date: Tue, 8 Oct 2024 02:44:33 +0000
Subject: [PATCH] fix(core): fix position of toc in peekview (#8441)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Close [BS-1536](https://linear.app/affine-design/issue/BS-1536/peekview中的toc没有fixed)
---
 .../view/doc-preview/doc-peek-view.tsx        | 11 ++--
 .../e2e/blocksuite/outline.spec.ts            | 52 +++++++++++++++----
 2 files changed, 48 insertions(+), 15 deletions(-)

diff --git a/packages/frontend/core/src/modules/peek-view/view/doc-preview/doc-peek-view.tsx b/packages/frontend/core/src/modules/peek-view/view/doc-preview/doc-peek-view.tsx
index 961f275816..801d6360db 100644
--- a/packages/frontend/core/src/modules/peek-view/view/doc-preview/doc-peek-view.tsx
+++ b/packages/frontend/core/src/modules/peek-view/view/doc-preview/doc-peek-view.tsx
@@ -159,15 +159,14 @@ function DocPeekPreviewEditor({
             page={doc.blockSuiteDoc}
             onEditorReady={handleOnEditorReady}
           />
-          <EditorOutlineViewer
-            editor={editorElement}
-            show={mode === 'page'}
-            openOutlinePanel={openOutlinePanel}
-          />
         </Scrollable.Viewport>
-
         <Scrollable.Scrollbar />
       </Scrollable.Root>
+      <EditorOutlineViewer
+        editor={editorElement}
+        show={mode === 'page'}
+        openOutlinePanel={openOutlinePanel}
+      />
     </AffineErrorBoundary>
   );
 }
diff --git a/tests/affine-local/e2e/blocksuite/outline.spec.ts b/tests/affine-local/e2e/blocksuite/outline.spec.ts
index 5626bd51cc..ad2bbafb97 100644
--- a/tests/affine-local/e2e/blocksuite/outline.spec.ts
+++ b/tests/affine-local/e2e/blocksuite/outline.spec.ts
@@ -103,22 +103,56 @@ test('outline viewer should be useable in doc peek preview', async ({
 
   await page.keyboard.type('# Heading 1');
 
+  for (let i = 0; i < 10; i++) {
+    await page.keyboard.press('Enter');
+  }
+
+  await page.keyboard.type('## Heading 2');
+
+  const outlineViewer = peekView.locator('affine-outline-viewer');
+  const outlineViewerBound = await outlineViewer.boundingBox();
+  expect(outlineViewerBound).not.toBeNull();
+
   const indicators = getIndicators(peekView);
-  await expect(indicators).toHaveCount(2);
+  await expect(indicators).toHaveCount(3);
   await expect(indicators.nth(0)).toBeVisible();
   await expect(indicators.nth(1)).toBeVisible();
+  await expect(indicators.nth(2)).toBeVisible();
 
   await indicators.first().hover({ force: true });
   const viewer = peekView.locator('affine-outline-viewer');
   await expect(viewer).toBeVisible();
 
-  const toggleButton = peekView.locator(
-    '.outline-viewer-header edgeless-tool-icon-button'
-  );
-  await toggleButton.click();
+  // position of outline viewer should be fixed
+  {
+    const headingButtons = peekView.locator(
+      'affine-outline-viewer .outline-viewer-item:not(.outline-viewer-header)'
+    );
+    await expect(headingButtons).toHaveCount(3);
+    await expect(headingButtons.nth(0)).toBeVisible();
+    await expect(headingButtons.nth(1)).toBeVisible();
+    await expect(headingButtons.nth(2)).toBeVisible();
 
-  await page.waitForTimeout(500);
-  await expect(peekView).toBeHidden();
-  await expect(viewer).toBeHidden();
-  await expect(page.locator('affine-outline-panel')).toBeVisible();
+    await headingButtons.last().click();
+    await page.mouse.move(0, 0);
+    await headingButtons.last().waitFor({ state: 'hidden' });
+
+    const currentOutlineViewerBound = await outlineViewer.boundingBox();
+    expect(currentOutlineViewerBound).not.toBeNull();
+    expect(outlineViewerBound).toEqual(currentOutlineViewerBound);
+  }
+
+  // outline viewer should be hidden when clicking the outline panel toggle button
+  {
+    await indicators.first().hover({ force: true });
+    const toggleButton = peekView.locator(
+      '.outline-viewer-header edgeless-tool-icon-button'
+    );
+    await toggleButton.click();
+
+    await page.waitForTimeout(500);
+    await expect(peekView).toBeHidden();
+    await expect(viewer).toBeHidden();
+    await expect(page.locator('affine-outline-panel')).toBeVisible();
+  }
 });