fix(core): share mode page reference (#8238)

Author: EYHN

packages/frontend/core/src/components/affine/reference-link/index.tsx

@@ -25,6 +25,7 @@ import {
   useRef,
   useState,
 } from 'react';
+import { Link } from 'react-router-dom';
 
 import * as styles from './styles.css';
 
@@ -173,3 +174,79 @@ export function AffinePageReference({
     </WorkbenchLink>
   );
 }
+
+export function AffineSharedPageReference({
+  pageId,
+  docCollection,
+  wrapper: Wrapper,
+  params,
+}: {
+  pageId: string;
+  docCollection: DocCollection;
+  wrapper?: React.ComponentType<PropsWithChildren>;
+  params?: URLSearchParams;
+}) {
+  const t = useI18n();
+  const pageMetaHelper = useDocMetaHelper();
+  const journalHelper = useJournalHelper(docCollection);
+  const docsService = useService(DocsService);
+  const mode = useLiveData(docsService.list.primaryMode$(pageId));
+
+  let linkWithMode: DocMode | null = null;
+  let linkToNode = false;
+  if (params) {
+    const m = params.get('mode');
+    if (m && (m === 'page' || m === 'edgeless')) {
+      linkWithMode = m as DocMode;
+    }
+    linkToNode = params.has('blockIds') || params.has('elementIds');
+  }
+
+  const el = pageReferenceRenderer({
+    docMode: linkWithMode ?? mode ?? 'page',
+    pageId,
+    pageMetaHelper,
+    journalHelper,
+    docCollection,
+    t,
+    linkToNode,
+  });
+
+  const ref = useRef<HTMLAnchorElement>(null);
+
+  const [refreshKey, setRefreshKey] = useState<string>(() => nanoid());
+
+  const isJournal = journalHelper.isPageJournal(pageId);
+
+  const onClick = useCallback(() => {
+    if (isJournal) {
+      track.doc.editor.pageRef.navigate({
+        to: 'journal',
+      });
+    }
+
+    // update refresh key
+    setRefreshKey(nanoid());
+
+    return;
+  }, [isJournal]);
+
+  const query = useMemo(() => {
+    // A block/element reference link
+    let str = params?.toString() ?? '';
+    if (str.length) str += '&';
+    str += `refreshKey=${refreshKey}`;
+    return '?' + str;
+  }, [params, refreshKey]);
+
+  return (
+    <Link
+      ref={ref}
+      to={`/workspace/${docCollection.id}/${pageId}${query}`}
+      onClick={onClick}
+      className={styles.pageReferenceLink}
+    >
+      {Wrapper ? <Wrapper>{el}</Wrapper> : el}
+    </Link>
+  );
+}

packages/frontend/core/src/components/blocksuite/block-suite-editor/lit-adaper.tsx

@@ -19,6 +19,7 @@ import {
   useLiveData,
   useService,
   useServices,
+  WorkspaceService,
 } from '@toeverything/infra';
 import React, {
   forwardRef,
@@ -30,7 +31,10 @@ import React, {
 } from 'react';
 
 import { PagePropertiesTable } from '../../affine/page-properties';
-import { AffinePageReference } from '../../affine/reference-link';
+import {
+  AffinePageReference,
+  AffineSharedPageReference,
+} from '../../affine/reference-link';
 import { BiDirectionalLinkPanel } from './bi-directional-link-panel';
 import { BlocksuiteEditorJournalDocTitle } from './journal-doc-title';
 import {
@@ -75,11 +79,13 @@ const usePatchSpecs = (page: Doc, shared: boolean, mode: DocMode) => {
     docService,
     docsService,
     editorService,
+    workspaceService,
     featureFlagService,
   } = useServices({
     PeekViewService,
     DocService,
     DocsService,
+    WorkspaceService,
     EditorService,
     FeatureFlagService,
   });
@@ -94,6 +100,16 @@ const usePatchSpecs = (page: Doc, shared: boolean, mode: DocMode) => {
 
       const params = toURLSearchParams(data.params);
 
+      if (workspaceService.workspace.openOptions.isSharedMode) {
+        return (
+          <AffineSharedPageReference
+            docCollection={workspaceService.workspace.docCollection}
+            pageId={pageId}
+            params={params}
+          />
+        );
+      }
+
       return (
         <AffinePageReference
           docCollection={page.collection}
@@ -102,7 +118,7 @@ const usePatchSpecs = (page: Doc, shared: boolean, mode: DocMode) => {
         />
       );
     };
-  }, [page.collection]);
+  }, [page.collection, workspaceService]);
 
   const specs = useMemo(() => {
     const enableAI = featureFlagService.flags.enable_ai.value;