feat: support search (#17)

* feat: support search

* fix: code block placeholder bugs

Author: qinluhe

src/components/app/SideBar.tsx

@@ -4,7 +4,7 @@ import React, { lazy } from 'react';
 import { Workspaces } from '@/components/app/workspaces';
 import Outline from 'src/components/app/outline/Outline';
 import { UIVariant } from '@/application/types';
-// import { Search } from 'src/components/app/search';
+import { Search } from 'src/components/app/search';
 
 const SideBarBottom = lazy(() => import('@/components/app/SideBarBottom'));
 
@@ -44,7 +44,7 @@ function SideBar ({
         <div
           className={'px-[10px] bg-bg-base z-[1] flex-col gap-2 justify-around items-center sticky top-12'}
         >
-          {/*<Search />*/}
+          <Search />
           <div
             style={{
               borderColor: scrollTop > 10 ? 'var(--line-divider)' : undefined,

src/components/editor/components/blocks/code/Code.tsx

@@ -1,14 +1,14 @@
 import { useCodeBlock } from '@/components/editor/components/blocks/code/Code.hooks';
 import CodeToolbar from './CodeToolbar';
 import { CodeNode, EditorElementProps } from '@/components/editor/editor.type';
-import React, { forwardRef, memo, useState, lazy, Suspense } from 'react';
+import React, { forwardRef, useState, lazy, Suspense } from 'react';
 import { ReactEditor, useReadOnly, useSlateStatic } from 'slate-react';
 import LanguageSelect from './SelectLanguage';
 import { Element } from 'slate';
 
 const MermaidChat = lazy(() => import('./MermaidChat'));
 
-export const CodeBlock = memo(
+export const CodeBlock =
   forwardRef<HTMLDivElement, EditorElementProps<CodeNode>>(({ node, children, ...attributes }, ref) => {
     const { language, handleChangeLanguage } = useCodeBlock(node);
     const [showToolbar, setShowToolbar] = useState(false);
@@ -64,7 +64,5 @@ export const CodeBlock = memo(
         {showToolbar && <CodeToolbar node={node} />}
       </div>
     );
-  }),
-  (prevProps, nextProps) => JSON.stringify(prevProps.node) === JSON.stringify(nextProps.node),
-);
+  });
 export default CodeBlock;

src/components/editor/components/blocks/code/CodeToolbar.tsx

@@ -2,17 +2,17 @@ import { notify } from '@/components/_shared/notify';
 import ActionButton from '@/components/editor/components/toolbar/selection-toolbar/actions/ActionButton';
 import { CodeNode } from '@/components/editor/editor.type';
 import { copyTextToClipboard } from '@/utils/copy';
-import React from 'react';
+import React, { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ReactEditor, useSlateStatic } from 'slate-react';
 import { ReactComponent as CopyIcon } from '@/assets/copy.svg';
 
-function CodeToolbar ({ node }: {
+function CodeToolbar({ node }: {
   node: CodeNode
 }) {
   const { t } = useTranslation();
   const editor = useSlateStatic();
-  const onCopy = async () => {
+  const onCopy = async() => {
     const at = ReactEditor.findPath(editor, node);
     const text = editor.string(at);
 
@@ -34,4 +34,4 @@ function CodeToolbar ({ node }: {
   );
 }
 
-export default CodeToolbar;
+export default memo(CodeToolbar);

src/components/editor/components/blocks/code/SelectLanguage.tsx

@@ -3,10 +3,10 @@ import { Popover } from '@/components/_shared/popover';
 import { supportLanguages } from '@/components/editor/components/blocks/code/constants';
 import { createHotkey, HOT_KEY_NAME } from '@/utils/hotkeys';
 import { Button, TextField } from '@mui/material';
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
-function SelectLanguage ({
+function SelectLanguage({
   readOnly,
   language = 'Auto',
   onChangeLanguage,
@@ -54,18 +54,18 @@ function SelectLanguage ({
   }, [language]);
 
   useEffect(() => {
-    if (!open) return;
+    if(!open) return;
     searchRef.current?.focus();
   }, [open]);
 
   useEffect(() => {
     const container = scrollRef.current;
 
-    if (!container) return;
+    if(!container) return;
 
     const el = container.querySelector(`[data-key="${selectLanguage}"]`);
 
-    if (!el) return;
+    if(!el) return;
 
     el.scrollIntoView({ block: 'nearest' });
   }, [selectLanguage]);
@@ -82,7 +82,7 @@ function SelectLanguage ({
         className={'px-4'}
         variant={'text'}
         onClick={() => {
-          if (readOnly) return;
+          if(readOnly) return;
           setOpen(true);
         }}
       >
@@ -112,19 +112,19 @@ function SelectLanguage ({
             className={'px-3 py-1 text-xs'}
             placeholder={t('search.label')}
             onKeyDown={(e) => {
-              if (createHotkey(HOT_KEY_NAME.ENTER)(e.nativeEvent)) {
+              if(createHotkey(HOT_KEY_NAME.ENTER)(e.nativeEvent)) {
                 e.preventDefault();
                 handleConfirm(selectLanguage);
               }
 
-              if (createHotkey(HOT_KEY_NAME.UP)(e.nativeEvent)) {
+              if(createHotkey(HOT_KEY_NAME.UP)(e.nativeEvent)) {
                 const index = options.findIndex((item) => item.key === selectLanguage);
                 const prevIndex = (index - 1 + options.length) % options.length;
 
                 setSelectLanguage(options[prevIndex].key);
               }
 
-              if (createHotkey(HOT_KEY_NAME.DOWN)(e.nativeEvent)) {
+              if(createHotkey(HOT_KEY_NAME.DOWN)(e.nativeEvent)) {
                 const index = options.findIndex((item) => item.key === selectLanguage);
                 const nextIndex = (index + 1) % options.length;
 
@@ -158,4 +158,4 @@ function SelectLanguage ({
   );
 }
 
-export default SelectLanguage;
+export default memo(SelectLanguage);

src/components/editor/components/blocks/text/Placeholder.tsx

@@ -6,7 +6,7 @@ import { ReactEditor, useFocused, useSelected, useSlate } from 'slate-react';
 import { Editor, Element, Range } from 'slate';
 import { useTranslation } from 'react-i18next';
 
-function Placeholder ({ node, ...attributes }: { node: Element; className?: string; style?: CSSProperties }) {
+function Placeholder({ node, ...attributes }: { node: Element; className?: string; style?: CSSProperties }) {
   const { t } = useTranslation();
   const { readOnly } = useEditorContext();
   const editor = useSlate();
@@ -24,7 +24,7 @@ function Placeholder ({ node, ...attributes }: { node: Element; className?: stri
       at: path,
     });
 
-    if (!match) return null;
+    if(!match) return null;
 
     return match[0] as Element;
   }, [editor, node]);
@@ -40,15 +40,15 @@ function Placeholder ({ node, ...attributes }: { node: Element; className?: stri
   }, [attributes.className]);
 
   const unSelectedPlaceholder = useMemo(() => {
-    switch (block?.type) {
+    switch(block?.type) {
       case BlockType.Paragraph: {
         return '';
       }
 
       case BlockType.ToggleListBlock: {
         const level = (block as ToggleListNode).data.level;
 
-        switch (level) {
+        switch(level) {
           case 1:
             return t('editor.mobileHeading1');
           case 2:
@@ -77,7 +77,7 @@ function Placeholder ({ node, ...attributes }: { node: Element; className?: stri
       case BlockType.HeadingBlock: {
         const level = (block as HeadingNode).data.level;
 
-        switch (level) {
+        switch(level) {
           case 1:
             return t('editor.mobileHeading1');
           case 2:
@@ -104,11 +104,11 @@ function Placeholder ({ node, ...attributes }: { node: Element; className?: stri
 
   const selectedPlaceholder = useMemo(() => {
 
-    if (block?.type === BlockType.ToggleListBlock && (block?.data as ToggleListBlockData).level) {
+    if(block?.type === BlockType.ToggleListBlock && (block?.data as ToggleListBlockData).level) {
       return unSelectedPlaceholder;
     }
 
-    switch (block?.type) {
+    switch(block?.type) {
       case BlockType.HeadingBlock:
         return unSelectedPlaceholder;
       case  BlockType.ToggleListBlock:
@@ -125,7 +125,7 @@ function Placeholder ({ node, ...attributes }: { node: Element; className?: stri
   }, [block?.data, block?.type, t, unSelectedPlaceholder]);
 
   useEffect(() => {
-    if (!selected) return;
+    if(!selected) return;
 
     const handleCompositionStart = () => {
       setIsComposing(true);
@@ -148,7 +148,7 @@ function Placeholder ({ node, ...attributes }: { node: Element; className?: stri
     };
   }, [editor, selected]);
 
-  if (isComposing) {
+  if(isComposing) {
     return null;
   }