feat(core): add search result highlighting (#4667)

Co-authored-by: Peng Xiao <pengxiao@outlook.com>

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

@@ -46,7 +46,9 @@ async function assertResultList(page: Page, texts: string[]) {
   const actual = await page
     .locator('[cmdk-item] [data-testid=cmdk-label]')
     .allInnerTexts();
-  expect(actual).toEqual(texts);
+  const actualSplit = actual[0].split('\n');
+  expect(actualSplit[0]).toEqual(texts[0]);
+  expect(actualSplit[1]).toEqual(texts[0]);
 }
 
 async function titleIsFocused(page: Page) {
@@ -100,9 +102,7 @@ test('Create a new page with keyword', async ({ page }) => {
   await clickNewPageButton(page);
   await openQuickSearchByShortcut(page);
   await page.keyboard.insertText('test123456');
-  const addNewPage = page.locator(
-    '[cmdk-item] >> text=Create New Page as: test123456'
-  );
+  const addNewPage = page.locator('[cmdk-item] >> text=Create New Page as:');
   await addNewPage.click();
   await page.waitForTimeout(300);
   await assertTitle(page, 'test123456');
@@ -126,9 +126,7 @@ test('Create a new page and search this page', async ({ page }) => {
   // input title and create new page
   await page.keyboard.insertText('test123456');
   await page.waitForTimeout(300);
-  const addNewPage = page.locator(
-    '[cmdk-item] >> text=Create New Page as: test123456'
-  );
+  const addNewPage = page.locator('[cmdk-item] >> text=Create New Page as:');
   await addNewPage.click();
 
   await page.waitForTimeout(300);
@@ -218,36 +216,34 @@ test('assert the recent browse pages are on the recent list', async ({
 
   // create first page
   await clickNewPageButton(page);
+  await waitForEditorLoad(page);
   {
     const title = getBlockSuiteEditorTitle(page);
-    await title.pressSequentially('sgtokidoki', {
-      delay: 50,
-    });
+    await title.pressSequentially('sgtokidoki');
+    expect(await title.innerText()).toBe('sgtokidoki');
   }
-  await page.waitForTimeout(200);
 
   // create second page
   await openQuickSearchByShortcut(page);
   const addNewPage = page.locator('[cmdk-item] >> text=New Page');
   await addNewPage.click();
+  await waitForEditorLoad(page);
   {
     const title = getBlockSuiteEditorTitle(page);
-    await title.pressSequentially('theliquidhorse', {
-      delay: 50,
-    });
+    await title.pressSequentially('theliquidhorse');
+    expect(await title.innerText()).toBe('theliquidhorse');
   }
   await page.waitForTimeout(200);
 
   // create thrid page
   await openQuickSearchByShortcut(page);
   await addNewPage.click();
+  await waitForEditorLoad(page);
   {
     const title = getBlockSuiteEditorTitle(page);
-    await title.pressSequentially('battlekot', {
-      delay: 50,
-    });
+    await title.pressSequentially('battlekot');
+    expect(await title.innerText()).toBe('battlekot');
   }
-  await page.waitForTimeout(200);
 
   await openQuickSearchByShortcut(page);
   {
@@ -268,12 +264,11 @@ test('assert the recent browse pages are on the recent list', async ({
     const addNewPage = page.locator('[cmdk-item] >> text=New Page');
     await addNewPage.click();
   }
-  await page.waitForTimeout(200);
+  await waitForEditorLoad(page);
   {
     const title = getBlockSuiteEditorTitle(page);
-    await title.pressSequentially('affine is the best', {
-      delay: 50,
-    });
+    await title.pressSequentially('affine is the best');
+    expect(await title.innerText()).toBe('affine is the best');
   }
   await page.waitForTimeout(1000);
   await openQuickSearchByShortcut(page);
@@ -332,3 +327,15 @@ test('can use cmdk to delete page and restore it', async ({ page }) => {
   await keyboardDownAndSelect(page, 'Restore from Trash');
   await expect(restoreButton).not.toBeVisible();
 });
+
+test('show not found item', async ({ page }) => {
+  await openHomePage(page);
+  await waitForEditorLoad(page);
+  await clickNewPageButton(page);
+  await openQuickSearchByShortcut(page);
+  // input title and create new page
+  await page.keyboard.insertText('test123456');
+  const notFoundItem = page.getByTestId('cmdk-search-not-found');
+  await expect(notFoundItem).toBeVisible();
+  await expect(notFoundItem).toHaveText('Search for "test123456"');
+});

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

@@ -4,6 +4,7 @@ import {
   registerAffineSettingsCommands,
 } from '@affine/core/commands';
 import { CMDKQuickSearchModal } from '@affine/core/components/pure/cmdk';
+import { HighlightLabel } from '@affine/core/components/pure/cmdk/highlight';
 import { WorkspaceFlavour } from '@affine/env/workspace';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { rootWorkspacesMetadataAtom } from '@affine/workspace/atom';
@@ -12,7 +13,7 @@ import type { Page } from '@blocksuite/store';
 import type { Meta, StoryFn } from '@storybook/react';
 import { currentWorkspaceIdAtom } from '@toeverything/infra/atom';
 import { useStore } from 'jotai';
-import { useEffect, useLayoutEffect } from 'react';
+import { useEffect, useLayoutEffect, useState } from 'react';
 import { withRouter } from 'storybook-addon-react-router-v6';
 
 export default {
@@ -43,7 +44,7 @@ function useRegisterCommands() {
           themes: ['auto', 'dark', 'light'],
         },
         languageHelper: {
-          onSelect: () => {},
+          onLanguageChange: () => {},
           languagesList: [
             { tag: 'en', name: 'English', originalName: 'English' },
             {
@@ -65,7 +66,10 @@ function useRegisterCommands() {
           isPreferredEdgeless: () => false,
         },
       }),
-      registerAffineLayoutCommands({ t, store }),
+      registerAffineLayoutCommands({
+        t,
+        store,
+      }),
     ];
 
     return () => {
@@ -98,3 +102,16 @@ export const CMDKStoryWithCommands: StoryFn = () => {
 };
 
 CMDKStoryWithCommands.decorators = [withRouter];
+
+export const HighlightStory: StoryFn = () => {
+  const [query, setQuery] = useState('');
+  const label = {
+    title: 'title',
+  };
+  return (
+    <>
+      <input value={query} onChange={e => setQuery(e.target.value)} />
+      <HighlightLabel label={label} highlight={query} />
+    </>
+  );
+};