From 75bc6df9155180c36944dde01c5d162a59cc0726 Mon Sep 17 00:00:00 2001
From: JimmFly <yangjinfei001@gmail.com>
Date: Tue, 24 Sep 2024 04:02:07 +0000
Subject: [PATCH] fix(core): unexpected routing history appears on the shared
 page (#8356)

close AF-1429

https://github.com/user-attachments/assets/a99cf79d-3615-4e0f-835c-2e66b1a34863
---
 .../affine/reference-link/index.tsx           | 26 +++---
 tests/affine-cloud/e2e/share-page.spec.ts     | 85 ++++++++++++++++++-
 2 files changed, 100 insertions(+), 11 deletions(-)

diff --git a/packages/frontend/core/src/components/affine/reference-link/index.tsx b/packages/frontend/core/src/components/affine/reference-link/index.tsx
index fc6a42f6a7..6c58bec9ba 100644
--- a/packages/frontend/core/src/components/affine/reference-link/index.tsx
+++ b/packages/frontend/core/src/components/affine/reference-link/index.tsx
@@ -165,18 +165,24 @@ export function AffineSharedPageReference({
 
   const isJournal = journalHelper.isPageJournal(pageId);
 
-  const onClick = useCallback(() => {
-    if (isJournal) {
-      track.doc.editor.pageRef.navigate({
-        to: 'journal',
-      });
-    }
+  const onClick = useCallback(
+    (e: React.MouseEvent) => {
+      if (isJournal) {
+        track.doc.editor.pageRef.navigate({
+          to: 'journal',
+        });
+      }
 
-    // update refresh key
-    setRefreshKey(nanoid());
+      // update refresh key
+      setRefreshKey(nanoid());
 
-    return;
-  }, [isJournal]);
+      // Prevent blocksuite link clicked behavior
+      e.stopPropagation();
+
+      return;
+    },
+    [isJournal]
+  );
 
   const query = useMemo(() => {
     // A block/element reference link
diff --git a/tests/affine-cloud/e2e/share-page.spec.ts b/tests/affine-cloud/e2e/share-page.spec.ts
index 87a22ca91e..ab6e581b58 100644
--- a/tests/affine-cloud/e2e/share-page.spec.ts
+++ b/tests/affine-cloud/e2e/share-page.spec.ts
@@ -8,6 +8,7 @@ import {
 import { clickEdgelessModeButton } from '@affine-test/kit/utils/editor';
 import { importImage } from '@affine-test/kit/utils/image';
 import {
+  clickNewPageButton,
   getBlockSuiteEditorTitle,
   waitForEditorLoad,
 } from '@affine-test/kit/utils/page-logic';
@@ -213,7 +214,7 @@ test('share page with default edgeless', async ({ page, browser }) => {
   }
 });
 
-test('image preview should should be shown', async ({ page, browser }) => {
+test('image preview should be shown', async ({ page, browser }) => {
   await page.reload();
   await waitForEditorLoad(page);
   await createLocalWorkspace(
@@ -252,3 +253,85 @@ test('image preview should should be shown', async ({ page, browser }) => {
     await expect(locator).not.toBeVisible();
   }
 });
+
+test('The reference links in the shared page should be accessible normally and can go back and forward', async ({
+  page,
+  browser,
+}) => {
+  await page.reload();
+  await waitForEditorLoad(page);
+  await createLocalWorkspace(
+    {
+      name: 'test',
+    },
+    page
+  );
+  await enableCloudWorkspaceFromShareButton(page);
+
+  // create linked page and share
+  const title = getBlockSuiteEditorTitle(page);
+  await title.pressSequentially('Test linked doc', {
+    delay: 50,
+  });
+  await page.keyboard.press('Enter', { delay: 50 });
+  await page.keyboard.type('Test linked content', { delay: 50 });
+  await enableShare(page);
+
+  // create a new page and link to the shared page
+  await clickNewPageButton(page, 'Test Page');
+  await waitForEditorLoad(page);
+  await page.keyboard.press('Enter');
+  await page.keyboard.type('@', { delay: 50 });
+  const linkedPagePopover = page.locator('.linked-doc-popover');
+  await expect(linkedPagePopover).toBeVisible();
+  await page.keyboard.type('Test linked doc', { delay: 50 });
+  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 title = getBlockSuiteEditorTitle(page2);
+    await expect(title).toContainText('Test Page');
+
+    // check linked page
+    const link = page2.locator('.affine-reference');
+    await expect(link).toBeVisible();
+    await expect(link).toContainText('Test linked doc');
+    await link.click();
+    await waitForEditorLoad(page2);
+    await expect(
+      page2.locator('.doc-title-container:has-text("Test linked doc")')
+    ).toBeVisible();
+    await expect(page2.locator('affine-paragraph').first()).toContainText(
+      'Test linked content'
+    );
+
+    // go back and forward
+    await page2.goBack();
+    await waitForEditorLoad(page2);
+    await expect(title).toContainText('Test Page');
+    await expect(link).toBeVisible();
+    await expect(link).toContainText('Test linked doc');
+
+    await page2.goForward();
+    await waitForEditorLoad(page2);
+    await expect(
+      page2.locator('.doc-title-container:has-text("Test linked doc")')
+    ).toBeVisible();
+    await expect(page2.locator('affine-paragraph').first()).toContainText(
+      'Test linked content'
+    );
+  }
+});