feat(core): enhance share page with selector (#8319)

Closes [BS-1346](https://linear.app/affine-design/issue/BS-1346/白板上的-link-to-block-在只读模式下打开无法跳转和高亮)

<div class='graphite__hidden'>
          <div>🎥 Video uploaded on Graphite:</div>
            <a href="https://app.graphite.dev/media/video/8ypiIKZXudF5a0tIgIzf/84bb27a9-608f-4cfc-a4c8-58de8aa5d791.mov">
              <img src="https://app.graphite.dev/api/v1/graphite/video/thumbnail/8ypiIKZXudF5a0tIgIzf/84bb27a9-608f-4cfc-a4c8-58de8aa5d791.mov">
            </a>
          </div>
<video src="https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/8ypiIKZXudF5a0tIgIzf/84bb27a9-608f-4cfc-a4c8-58de8aa5d791.mov">Screen Recording 2024-09-20 at 06.21.45.mov</video>

packages/frontend/core/src/components/blocksuite/block-suite-editor/specs/custom/spec-patchers.tsx

@@ -377,7 +377,6 @@ export function patchQuickSearchService(framework: FrameworkProvider) {
             (item.name === 'Linked Doc' || item.name === 'Link')
           ) {
             item.action = async ({ rootComponent }) => {
-              // TODO(@Mirone): fix the type
               // @ts-expect-error fixme
               const { success, insertedLinkType } =
                 // @ts-expect-error fixme
@@ -385,7 +384,6 @@ export function patchQuickSearchService(framework: FrameworkProvider) {
 
               if (!success) return;
 
-              // TODO(@Mirone): fix the type
               insertedLinkType
                 ?.then(
                   (type: {
@@ -394,17 +392,17 @@ export function patchQuickSearchService(framework: FrameworkProvider) {
                     const flavour = type?.flavour;
                     if (!flavour) return;
 
+                    if (flavour === 'affine:bookmark') {
+                      track.doc.editor.slashMenu.bookmark();
+                      return;
+                    }
+
                     if (flavour === 'affine:embed-linked-doc') {
                       track.doc.editor.slashMenu.linkDoc({
                         control: 'linkDoc',
                       });
                       return;
                     }
-
-                    if (flavour === 'affine:bookmark') {
-                      track.doc.editor.slashMenu.bookmark();
-                      return;
-                    }
                   }
                 )
                 .catch(console.error);

packages/frontend/core/src/components/hooks/use-navigate-helper.ts

@@ -1,3 +1,4 @@
+import { toURLSearchParams } from '@affine/core/utils';
 import type { DocMode } from '@blocksuite/blocks';
 import { createContext, useCallback, useContext, useMemo } from 'react';
 import type { NavigateFunction, NavigateOptions } from 'react-router-dom';
@@ -45,11 +46,8 @@ export function useNavigateHelper() {
       elementIds?: string[],
       logic: RouteLogic = RouteLogic.PUSH
     ) => {
-      const search = new URLSearchParams();
+      const search = toURLSearchParams({ mode, blockIds, elementIds });
-      if (mode) search.append('mode', mode);
+      const query = search?.size ? `?${search.toString()}` : '';
-      if (blockIds?.length) search.append('blockIds', blockIds.join(','));
-      if (elementIds?.length) search.append('elementIds', elementIds.join(','));
-      const query = search.size > 0 ? `?${search.toString()}` : '';
       return navigate(`/workspace/${workspaceId}/${pageId}${query}`, {
         replace: logic === RouteLogic.REPLACE,
       });

packages/frontend/core/src/desktop/pages/workspace/share/share-page.tsx

@@ -3,12 +3,14 @@ import { AppFallback } from '@affine/core/components/affine/app-container';
 import { EditorOutlineViewer } from '@affine/core/components/blocksuite/outline-viewer';
 import { useActiveBlocksuiteEditor } from '@affine/core/components/hooks/use-block-suite-editor';
 import { usePageDocumentTitle } from '@affine/core/components/hooks/use-global-state';
+import { useNavigateHelper } from '@affine/core/components/hooks/use-navigate-helper';
 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';
 import { AuthService } from '@affine/core/modules/cloud';
 import {
   type Editor,
+  type EditorSelector,
   EditorService,
   EditorsService,
 } from '@affine/core/modules/editor';
@@ -17,7 +19,12 @@ import { ShareReaderService } from '@affine/core/modules/share-doc';
 import { CloudBlobStorage } from '@affine/core/modules/workspace-engine';
 import { WorkspaceFlavour } from '@affine/env/workspace';
 import { useI18n } from '@affine/i18n';
-import { type DocMode, DocModes } from '@blocksuite/blocks';
+import {
+  type DocMode,
+  DocModes,
+  RefNodeSlotsProvider,
+} from '@blocksuite/blocks';
+import { DisposableGroup } from '@blocksuite/global/utils';
 import { Logo1Icon } from '@blocksuite/icons/rc';
 import type { AffineEditorContainer } from '@blocksuite/presets';
 import type { Doc, Workspace } from '@toeverything/infra';
@@ -57,16 +64,29 @@ export const SharePage = ({
 
   const location = useLocation();
 
-  const { mode, isTemplate, templateName, templateSnapshotUrl } =
+  const { mode, selector, isTemplate, templateName, templateSnapshotUrl } =
     useMemo(() => {
       const searchParams = new URLSearchParams(location.search);
       const queryStringMode = searchParams.get('mode') as DocMode | null;
+      const blockIds = searchParams
+        .get('blockIds')
+        ?.split(',')
+        .filter(v => v.length);
+      const elementIds = searchParams
+        .get('elementIds')
+        ?.split(',')
+        .filter(v => v.length);
 
       return {
         mode:
           queryStringMode && DocModes.includes(queryStringMode)
             ? queryStringMode
             : null,
+        selector: {
+          blockIds,
+          elementIds,
+          refreshKey: searchParams.get('refreshKey') || undefined,
+        },
         isTemplate: searchParams.has('isTemplate'),
         templateName: searchParams.get('templateName') || '',
         templateSnapshotUrl: searchParams.get('snapshotUrl') || '',
@@ -94,6 +114,7 @@ export const SharePage = ({
         workspaceBinary={data.workspaceBinary}
         docBinary={data.docBinary}
         publishMode={mode || data.publishMode}
+        selector={selector}
         isTemplate={isTemplate}
         templateName={templateName}
         templateSnapshotUrl={templateSnapshotUrl}
@@ -110,6 +131,7 @@ const SharePageInner = ({
   workspaceBinary,
   docBinary,
   publishMode = 'page' as DocMode,
+  selector,
   isTemplate,
   templateName,
   templateSnapshotUrl,
@@ -119,6 +141,7 @@ const SharePageInner = ({
   workspaceBinary: Uint8Array;
   docBinary: Uint8Array;
   publishMode?: DocMode;
+  selector?: EditorSelector;
   isTemplate?: boolean;
   templateName?: string;
   templateSnapshotUrl?: string;
@@ -180,6 +203,10 @@ const SharePageInner = ({
         const editor = doc.scope.get(EditorsService).createEditor();
         editor.setMode(publishMode);
 
+        if (selector) {
+          editor.setSelector(selector);
+        }
+
         setEditor(editor);
       })
       .catch(err => {
@@ -190,11 +217,13 @@ const SharePageInner = ({
     workspaceId,
     workspacesService,
     publishMode,
+    selector,
     workspaceBinary,
     docBinary,
   ]);
 
   const pageTitle = useLiveData(page?.title$);
+  const { jumpToPageBlock, openPage } = useNavigateHelper();
 
   usePageDocumentTitle(pageTitle);
 
@@ -209,12 +238,35 @@ const SharePageInner = ({
         editorContainer,
         (editorContainer as any).docTitle
       );
+
+      const disposable = new DisposableGroup();
+      const refNodeSlots =
+        editorContainer.host?.std.getOptional(RefNodeSlotsProvider);
+      if (refNodeSlots) {
+        disposable.add(
+          refNodeSlots.docLinkClicked.on(({ pageId, params }) => {
+            if (params) {
+              const { mode, blockIds, elementIds } = params;
+              return jumpToPageBlock(
+                workspaceId,
+                pageId,
+                mode,
+                blockIds,
+                elementIds
+              );
+            }
+
+            return openPage(workspaceId, pageId);
+          })
+        );
+      }
+
       return () => {
         unbind();
         editor.setEditorContainer(null);
       };
     },
-    [editor, setActiveBlocksuiteEditor]
+    [editor, setActiveBlocksuiteEditor, jumpToPageBlock, openPage, workspaceId]
   );
 
   if (!workspace || !page || !editor) {

packages/frontend/core/src/modules/workbench/entities/workbench.ts

@@ -1,7 +1,9 @@
+import { toURLSearchParams } from '@affine/core/utils';
 import { Unreachable } from '@affine/env/constant';
-import type { DocMode } from '@blocksuite/blocks';
+import type { ReferenceParams } from '@blocksuite/blocks';
 import { Entity, LiveData } from '@toeverything/infra';
 import { type To } from 'history';
+import { omit } from 'lodash-es';
 import { nanoid } from 'nanoid';
 
 import type { WorkbenchNewTabHandler } from '../services/workbench-new-tab-handler';
@@ -122,14 +124,7 @@ export class Workbench extends Entity {
   }
 
   openDoc(
-    id:
+    id: string | ({ docId: string } & ReferenceParams),
-      | string
-      | {
-          docId: string;
-          mode?: DocMode;
-          blockIds?: string[];
-          elementIds?: string[];
-        },
     options?: WorkbenchOpenOptions
   ) {
     const isString = typeof id === 'string';
@@ -137,12 +132,10 @@ export class Workbench extends Entity {
 
     let query = '';
     if (!isString) {
-      const { mode, blockIds, elementIds } = id;
+      const search = toURLSearchParams(omit(id, ['docId']));
-      const search = new URLSearchParams();
+      if (search?.size) {
-      if (mode) search.set('mode', mode);
+        query = `?${search.toString()}`;
-      if (blockIds?.length) search.set('blockIds', blockIds.join(','));
+      }
-      if (elementIds?.length) search.set('elementIds', elementIds.join(','));
-      if (search.size > 0) query = `?${search.toString()}`;
     }
 
     this.open(`/${docId}${query}`, options);