feat：handle composition Event

packages/app/src/components/quick-search/input.tsx

@@ -1,4 +1,10 @@
-import React, { Dispatch, SetStateAction, useEffect, useRef } from 'react';
+import React, {
+  Dispatch,
+  SetStateAction,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
 import { SearchIcon } from '@blocksuite/icons';
 import { StyledInputContent, StyledLabel } from './style';
 import { Command } from 'cmdk';
@@ -7,6 +13,7 @@ export const Input = (props: {
   setQuery: Dispatch<SetStateAction<string>>;
   setLoading: Dispatch<SetStateAction<boolean>>;
 }) => {
+  const [isComposition, setIsComposition] = useState(false);
   const inputRef = useRef<HTMLInputElement>(null);
   useEffect(() => {
     return inputRef.current?.focus();
@@ -18,10 +25,27 @@ export const Input = (props: {
       </StyledLabel>
       <Command.Input
         ref={inputRef}
-        value={props.query}
+        onCompositionStart={() => setIsComposition(true)}
+        onCompositionEnd={e => {
+          props.setQuery(e.data);
+          setIsComposition(false);
+        }}
         onValueChange={str => {
-          props.setQuery(str);
-          props.setLoading(true);
+          if (!isComposition) {
+            props.setQuery(str);
+            props.setLoading(true);
+          }
+        }}
+        onKeyDown={(e: React.KeyboardEvent) => {
+          if (isComposition) {
+            if (
+              e.key === 'ArrowDown' ||
+              e.key === 'ArrowUp' ||
+              e.key === 'Enter'
+            ) {
+              e.stopPropagation();
+            }
+          }
         }}
         placeholder="Quick Search..."
       />

packages/app/src/components/quick-search/results.tsx

@@ -1,12 +1,7 @@
 import { Command } from 'cmdk';
 import { StyledListItem, StyledNotFound } from './style';
 import { useModal } from '@/providers/global-modal-provider';
-import {
-  PaperIcon,
-  EdgelessIcon,
-  LogoUnlogIcon,
-  AllPagesIcon,
-} from '@blocksuite/icons';
+import { PaperIcon, EdgelessIcon, LogoUnlogIcon } from '@blocksuite/icons';
 import { useEditor } from '@/providers/editor-provider';
 import { Dispatch, SetStateAction, useEffect, useState } from 'react';
 import { useRouter } from 'next/router';
@@ -34,15 +29,13 @@ export const Results = (props: {
   const pageIds = [...results.values()];
 
   const resultsPageMeta = pageList.filter(
-    page => pageIds.indexOf(page.id) > -1 && page.trash !== true
+    page => pageIds.indexOf(page.id) > -1 && !page.trash
   );
 
   useEffect(() => {
     setShowCreatePage(resultsPageMeta.length ? false : true);
     //Determine whether to display the  ‘+ New page’
   }, [resultsPageMeta, setShowCreatePage]);
-  console.log(resultsPageMeta);
-
   return loading ? null : (
     <Command.List>
       {query ? (