fix(core): disable quick search when the link-popup is visitable (#5409)

close AFF-471

packages/frontend/core/src/commands/affine-settings.tsx

@@ -1,5 +1,6 @@
 import type { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { SettingsIcon } from '@blocksuite/icons';
+import type { AffineEditorContainer } from '@blocksuite/presets';
 import { appSettingAtom } from '@toeverything/infra/atom';
 import {
   PreconditionStrategy,
@@ -16,11 +17,13 @@ export function registerAffineSettingsCommands({
   store,
   theme,
   languageHelper,
+  editor,
 }: {
   t: ReturnType<typeof useAFFiNEI18N>;
   store: ReturnType<typeof createStore>;
   theme: ReturnType<typeof useTheme>;
   languageHelper: ReturnType<typeof useLanguageHelper>;
+  editor: AffineEditorContainer | null;
 }) {
   const unsubs: Array<() => void> = [];
   const { onLanguageChange, languagesList, currentLanguage } = languageHelper;
@@ -36,7 +39,18 @@ export function registerAffineSettingsCommands({
       icon: <SettingsIcon />,
       run() {
         const quickSearchModalState = store.get(openQuickSearchModalAtom);
-        store.set(openQuickSearchModalAtom, !quickSearchModalState);
+
+        if (!editor) {
+          return store.set(openQuickSearchModalAtom, !quickSearchModalState);
+        }
+        // Due to a conflict with the shortcut for creating a link after selecting text in blocksuite,
+        // opening the quick search modal is disabled when link-popup is visitable.
+        const textSelection = editor.host?.std.selection.find('text');
+        if (textSelection && textSelection.from.length > 0) {
+          const linkPopup = document.querySelector('link-popup');
+          if (linkPopup) return;
+        }
+        return store.set(openQuickSearchModalAtom, !quickSearchModalState);
       },
     })
   );

packages/frontend/core/src/components/page-detail-editor.tsx

@@ -96,7 +96,7 @@ const PageDetailEditorMain = memo(function PageDetailEditorMain({
     [isPublic, switchToEdgelessMode, pageId, switchToPageMode]
   );
 
-  const [, setEditor] = useState<AffineEditorContainer>();
+  const [editor, setEditor] = useState<AffineEditorContainer>();
   const blockId = useRouterHash();
 
   const onLoadEditor = useCallback(
@@ -125,11 +125,13 @@ const PageDetailEditorMain = memo(function PageDetailEditorMain({
   );
 
   const [, setActiveBlocksuiteEditor] = useActiveBlocksuiteEditor();
-  const editor = useRef<AffineEditorContainer>(null);
+  const editorRef = useRef<AffineEditorContainer | null>(null);
 
   useEffect(() => {
-    setActiveBlocksuiteEditor(editor.current);
-  }, [setActiveBlocksuiteEditor]);
+    if (editor) {
+      setActiveBlocksuiteEditor(editorRef.current);
+    }
+  }, [editor, setActiveBlocksuiteEditor]);
 
   return (
     <Editor
@@ -147,7 +149,7 @@ const PageDetailEditorMain = memo(function PageDetailEditorMain({
       onModeChange={setEditorMode}
       defaultSelectedBlockId={blockId}
       onLoadEditor={onLoadEditor}
-      ref={editor}
+      ref={editorRef}
     />
   );
 });

packages/frontend/core/src/hooks/use-register-workspace-commands.ts

@@ -15,6 +15,7 @@ import {
 } from '../commands';
 import { usePageHelper } from '../components/blocksuite/block-suite-page-list/utils';
 import { useLanguageHelper } from './affine/use-language-helper';
+import { useActiveBlocksuiteEditor } from './use-block-suite-editor';
 import { useNavigateHelper } from './use-navigate-helper';
 
 export function useRegisterWorkspaceCommands() {
@@ -26,6 +27,7 @@ export function useRegisterWorkspaceCommands() {
   const pageHelper = usePageHelper(currentWorkspace.blockSuiteWorkspace);
   const navigationHelper = useNavigateHelper();
   const [pageListMode, setPageListMode] = useAtom(allPageModeSelectAtom);
+  const [editor] = useActiveBlocksuiteEditor();
 
   // register AffineUpdatesCommands
   useEffect(() => {
@@ -69,12 +71,13 @@ export function useRegisterWorkspaceCommands() {
       t,
       theme,
       languageHelper,
+      editor,
     });
 
     return () => {
       unsub();
     };
-  }, [store, t, theme, languageHelper]);
+  }, [store, t, theme, languageHelper, editor]);
 
   // register AffineLayoutCommands
   useEffect(() => {

tests/affine-local/e2e/quick-search.spec.ts

@@ -442,3 +442,30 @@ test('Create a new page with special characters in the title and search for this
   await page.waitForTimeout(300);
   await assertTitle(page, specialTitle);
 });
+
+test('disable quick search when the link-popup is visitable', async ({
+  page,
+}) => {
+  const specialTitle = '"test"';
+
+  await openHomePage(page);
+  await waitForEditorLoad(page);
+  await clickNewPageButton(page);
+
+  await openQuickSearchByShortcut(page);
+  const quickSearch = page.locator('[data-testid=cmdk-quick-search]');
+  await expect(quickSearch).toBeVisible();
+  await withCtrlOrMeta(page, () => page.keyboard.press('k', { delay: 50 }));
+
+  await getBlockSuiteEditorTitle(page).click();
+  await getBlockSuiteEditorTitle(page).fill(specialTitle);
+  await page.keyboard.press('Enter', { delay: 10 });
+  await page.keyboard.insertText('123456');
+  await page.getByText('123456').dblclick();
+
+  await withCtrlOrMeta(page, () => page.keyboard.press('k', { delay: 50 }));
+  const linkPopup = page.locator('.affine-link-popover');
+  await expect(linkPopup).toBeVisible();
+  const currentQuickSearch = page.locator('[data-testid=cmdk-quick-search]');
+  await expect(currentQuickSearch).not.toBeVisible();
+});

tests/storybook/src/stories/quick-search/quick-search-main.stories.tsx

@@ -54,6 +54,7 @@ function useRegisterCommands() {
           ],
           currentLanguage: undefined,
         },
+        editor: null,
       }),
       registerAffineCreationCommands({
         t,