fix(editor): ref on click slots should not be global (#9830)

fix AF-2129

blocksuite/affine/block-database/src/properties/link/cell-renderer.ts

@@ -119,9 +119,10 @@ export class LinkCell extends BaseCellRenderer<string> {
       return;
     }
 
-    std
+    std.getOptional(RefNodeSlotsProvider)?.docLinkClicked.emit({
-      .getOptional(RefNodeSlotsProvider)
+      pageId: this.docId,
-      ?.docLinkClicked.emit({ pageId: this.docId });
+      host: std.host,
+    });
   };
 
   get std() {

blocksuite/affine/block-embed/src/embed-linked-doc-block/embed-linked-doc-block.ts

@@ -216,6 +216,7 @@ export class EmbedLinkedDocBlockComponent extends EmbedBlockComponent<EmbedLinke
       ...this.referenceInfo$.peek(),
       openMode,
       event,
+      host: this.host,
     });
   };
 

blocksuite/affine/block-embed/src/embed-synced-doc-block/embed-synced-doc-block.ts

@@ -323,7 +323,7 @@ export class EmbedSyncedDocBlockComponent extends EmbedBlockComponent<EmbedSynce
 
     this.std
       .getOptional(RefNodeSlotsProvider)
-      ?.docLinkClicked.emit({ ...event, pageId });
+      ?.docLinkClicked.emit({ ...event, pageId, host: this.host });
   };
 
   refreshData = () => {
@@ -387,8 +387,7 @@ export class EmbedSyncedDocBlockComponent extends EmbedBlockComponent<EmbedSynce
     let editorHost: EditorHost | null = this.host;
     while (editorHost && !this._cycle) {
       this._cycle = !!editorHost && editorHost.doc.id === this.model.pageId;
-      editorHost =
+      editorHost = editorHost.parentElement?.closest('editor-host') ?? null;
-        editorHost.parentElement?.closest<EditorHost>('editor-host') ?? null;
     }
   }
 

blocksuite/affine/components/src/rich-text/inline/presets/nodes/footnote-node/footnote-popup.ts

@@ -84,14 +84,15 @@ export class FootNotePopup extends WithDisposable(LitElement) {
     const referenceType = this.footnote.reference.type;
     const { docId, url } = this.footnote.reference;
     switch (referenceType) {
-      case 'doc':
+      case 'doc': {
         if (!docId) {
           break;
         }
         this.std
           .getOptional(RefNodeSlotsProvider)
-          ?.docLinkClicked.emit({ pageId: docId });
+          ?.docLinkClicked.emit({ pageId: docId, host: this.std.host });
         break;
+      }
       case 'url':
         if (!url) {
           break;

blocksuite/affine/components/src/rich-text/inline/presets/nodes/link-node/affine-link.ts

@@ -56,11 +56,14 @@ export class AffineLink extends ShadowlessElement {
     if (!referenceInfo) return;
 
     const refNodeSlotsProvider = this.std?.getOptional(RefNodeSlotsProvider);
-    if (!refNodeSlotsProvider) return;
+    if (!refNodeSlotsProvider || !this.std) return;
 
     e?.preventDefault();
 
-    refNodeSlotsProvider.docLinkClicked.emit(referenceInfo);
+    refNodeSlotsProvider.docLinkClicked.emit({
+      ...referenceInfo,
+      host: this.std.host,
+    });
   };
 
   private readonly _whenHover = new HoverController(

blocksuite/affine/components/src/rich-text/inline/presets/nodes/reference-node/reference-node.ts

@@ -200,9 +200,10 @@ export class AffineReference extends WithDisposable(ShadowlessElement) {
 
   private _onClick() {
     if (!this.config.interactable) return;
-    this.std
+    this.std.getOptional(RefNodeSlotsProvider)?.docLinkClicked.emit({
-      .getOptional(RefNodeSlotsProvider)
+      ...this.referenceInfo,
-      ?.docLinkClicked.emit(this.referenceInfo);
+      host: this.std.host,
+    });
   }
 
   override connectedCallback() {

blocksuite/affine/components/src/rich-text/inline/presets/nodes/reference-node/reference-popup.ts

@@ -71,6 +71,7 @@ export class ReferencePopup extends WithDisposable(LitElement) {
     this.std.getOptional(RefNodeSlotsProvider)?.docLinkClicked.emit({
       ...this.referenceInfo,
       ...event,
+      host: this.std.host,
     });
   };
 

blocksuite/affine/components/src/rich-text/inline/presets/nodes/reference-node/types.ts

@@ -1,11 +1,13 @@
 import type { ReferenceInfo } from '@blocksuite/affine-model';
 import type { OpenDocMode } from '@blocksuite/affine-shared/services';
+import type { EditorHost } from '@blocksuite/block-std';
 import type { Slot } from '@blocksuite/global/utils';
 
 export type DocLinkClickedEvent = ReferenceInfo & {
   // default is active view
   openMode?: OpenDocMode;
   event?: MouseEvent;
+  host: EditorHost;
 };
 
 export type RefNodeSlots = {

packages/frontend/core/src/blocksuite/presets/ai/_common/chat-actions-handle.ts

@@ -433,6 +433,7 @@ const CREATE_AS_DOC = {
 
     host.std.getOptional(RefNodeSlotsProvider)?.docLinkClicked.emit({
       pageId: newDoc.id,
+      host,
     });
     let complete = false;
     (function addContent() {

packages/frontend/core/src/components/hooks/affine/use-register-blocksuite-editor-commands.tsx

@@ -30,7 +30,10 @@ import { pageHistoryModalAtom } from '../../../components/atoms/page-history';
 import { useBlockSuiteMetaHelper } from './use-block-suite-meta-helper';
 import { useExportPage } from './use-export-page';
 
-export function useRegisterBlocksuiteEditorCommands(editor: Editor) {
+export function useRegisterBlocksuiteEditorCommands(
+  editor: Editor,
+  active: boolean
+) {
   const doc = useService(DocService).doc;
   const docId = doc.id;
   const mode = useLiveData(editor.mode$);
@@ -82,6 +85,10 @@ export function useRegisterBlocksuiteEditorCommands(editor: Editor) {
   const openInAppService = useServiceOptional(OpenInAppService);
 
   useEffect(() => {
+    if (!active) {
+      return;
+    }
+
     const unsubs: Array<() => void> = [];
     const preconditionStrategy = () =>
       PreconditionStrategy.InPaperOrEdgeless && !trash;
@@ -375,5 +382,6 @@ export function useRegisterBlocksuiteEditorCommands(editor: Editor) {
     defaultPageWidth,
     checked,
     openInAppService,
+    active,
   ]);
 }

packages/frontend/core/src/components/hooks/affine/use-register-copy-link-commands.tsx

@@ -25,6 +25,9 @@ export function useRegisterCopyLinkCommands({
   });
 
   useEffect(() => {
+    if (!isActiveView) {
+      return;
+    }
     const unsubs: Array<() => void> = [];
 
     unsubs.push(

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

@@ -165,7 +165,7 @@ const DetailPageImpl = memo(function DetailPageImpl() {
     return;
   }, [globalContext, isActiveView, isInTrash]);
 
-  useRegisterBlocksuiteEditorCommands(editor);
+  useRegisterBlocksuiteEditorCommands(editor, isActiveView);
   const title = useLiveData(doc.title$);
   usePageDocumentTitle(title);
 
@@ -182,7 +182,10 @@ const DetailPageImpl = memo(function DetailPageImpl() {
           disposable.add(
             // the event should not be emitted by AffineReference
             refNodeSlots.docLinkClicked.on(
-              ({ pageId, params, openMode, event }) => {
+              ({ pageId, params, openMode, event, host }) => {
+                if (host !== editorHost) {
+                  return;
+                }
                 openMode ??=
                   event && isNewTabTrigger(event)
                     ? 'open-in-new-tab'

packages/frontend/core/src/desktop/pages/workspace/detail-page/tabs/chat.tsx

@@ -91,8 +91,10 @@ export const EditorChatPanel = forwardRef(function EditorChatPanel(
     const docModeService = editor.host.std.get(DocModeProvider);
     const refNodeService = editor.host.std.getOptional(RefNodeSlotsProvider);
     const disposable = [
-      refNodeService?.docLinkClicked.on(() => {
+      refNodeService?.docLinkClicked.on(({ host }) => {
-        (chatPanelRef.current as ChatPanel).doc = editor.doc;
+        if (host === editor.host) {
+          (chatPanelRef.current as ChatPanel).doc = editor.doc;
+        }
       }),
       docModeService?.onPrimaryModeChange(() => {
         if (!editor.host) return;

packages/frontend/core/src/mobile/pages/workspace/detail/mobile-detail-page.tsx

@@ -1,7 +1,6 @@
 import { useThemeColorV2 } from '@affine/component';
 import { PageDetailSkeleton } from '@affine/component/page-detail-skeleton';
 import { AffineErrorBoundary } from '@affine/core/components/affine/affine-error-boundary';
-import { useRegisterBlocksuiteEditorCommands } from '@affine/core/components/hooks/affine/use-register-blocksuite-editor-commands';
 import { useActiveBlocksuiteEditor } from '@affine/core/components/hooks/use-block-suite-editor';
 import { useDocMetaHelper } from '@affine/core/components/hooks/use-block-suite-page-meta';
 import { usePageDocumentTitle } from '@affine/core/components/hooks/use-global-state';
@@ -140,7 +139,6 @@ const DetailPageImpl = () => {
     };
   }, [globalContext, isInTrash]);
 
-  useRegisterBlocksuiteEditorCommands(editor);
   const title = useLiveData(doc.title$);
   usePageDocumentTitle(title);
 

packages/frontend/core/src/modules/peek-view/view/doc-preview/doc-peek-view.tsx

@@ -106,6 +106,9 @@ function DocPeekPreviewEditor({
       disposableGroup.add(
         // todo(@pengx17): seems not working
         refNodeSlots.docLinkClicked.on(options => {
+          if (options.host !== editorContainer.host) {
+            return;
+          }
           peekView
             .open({
               docRef: { docId: options.pageId },