feat: support search replace text

* fix: Esc to close searchFile input * feat: add 'Escape' to close search text and click background to close search file * fix: search text input css * feat: add search text debounce * fix: search result use result text * Update index.tsx * feat: support add extra libs * feat: once add default extra lib * feat: add exmaple * feat: change readme * feat: add file action menu * fix: action menu css * fix: unset useFileMenu param * chore: readme * feat: add react css auto complete * fix: react d.ts url * feat: replace/replaceAll search text * fix: search text refresh * fix: selected row error for replacing single row * fix: formate searchfile/searchtext code * fix: readme add editor image * chore: readme update * fix: replace text escapeRegExp * fix: prettier use singleQuote * fix: prettier use singleQuote * fix: UI Fix * fix: replace icon & readme
x-orpheus · Jun 7, 2024 · 279ef2c · 279ef2c
1 parent 1a6daba
commit 279ef2c
Show file tree

Hide file tree

Showing 10 changed files with 445 additions and 113 deletions.
diff --git a/README.md b/README.md
@@ -1,4 +1,6 @@
 # monaco-base-ide
+![img](https://p6.music.126.net/obj/wo3DlcOGw6DClTvDisK1/36505433932/638f/06f4/a958/4d82bdeff7c5c5afa437028f68ed1b65.png)
+![img2](https://p5.music.126.net/obj/wo3DlcOGw6DClTvDisK1/36505435944/01f8/2388/f3e9/bafe10aedf6a954f4ce09bf02c725748.png)
 
 ## 如何使用
 
@@ -142,7 +144,7 @@ export default SingleIDE;
 #### 搜索文件
 快捷键：command/ctrl + p
 
-#### 搜索文本
+#### 搜索 & 替换文本
 快捷键：shift + command/ctrl + f
 
 #### 类型提示声明

diff --git a/src/components/icons/replace.tsx b/src/components/icons/replace.tsx
@@ -0,0 +1,16 @@
+const Replace = (props: any) => (
+    <svg
+      width="200px"
+      height="200px"
+      viewBox="0 0 1024 1024"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+        <path 
+            d="M833.828571 512H65.828571c-14.628571 0-29.257143 14.628571-29.257142 29.257143v446.171428c0 14.628571 14.628571 29.257143 29.257142 29.257143h768c14.628571 0 29.257143-14.628571 29.257143-29.257143V541.257143c0-14.628571-14.628571-29.257143-29.257143-29.257143z m-29.257142 453.485714H95.085714V570.514286H804.571429v394.971428z" fill="#C3C3CE" p-id="1526"></path><path d="M972.8 373.028571H504.685714c-14.628571 0-29.257143 14.628571-29.257143 29.257143s14.628571 29.257143 29.257143 29.257143H950.857143v343.771429c0 14.628571 14.628571 29.257143 29.257143 29.257143s29.257143-14.628571 29.257143-29.257143V402.285714c-7.314286-14.628571-14.628571-29.257143-36.571429-29.257143zM175.542857 475.428571c7.314286 7.314286 14.628571 7.314286 21.942857 7.314286s14.628571 0 21.942857-7.314286l131.657143-131.657142c14.628571-14.628571 14.628571-29.257143 0-43.885715s-29.257143-7.314286-36.571428 0L226.742857 387.657143V190.171429h146.285714c14.628571 0 29.257143-14.628571 29.257143-29.257143s-7.314286-29.257143-29.257143-29.257143H197.485714c-14.628571 0-29.257143 14.628571-29.257143 29.257143v219.428571L87.771429 299.885714C73.142857 292.571429 58.514286 292.571429 43.885714 299.885714c-14.628571 14.628571-14.628571 29.257143 0 43.885715l131.657143 131.657142zM241.371429 826.514286c0 36.571429 29.257143 58.514286 80.457142 58.514285 36.571429 0 58.514286-7.314286 73.142858-29.257142 0 14.628571 7.314286 21.942857 14.628571 29.257142h43.885714c-7.314286-14.628571-14.628571-29.257143-14.628571-58.514285v-80.457143C438.857143 687.542857 409.6 658.285714 351.085714 658.285714c-58.514286 0-95.085714 21.942857-102.4 73.142857l43.885715 7.314286c7.314286-29.257143 21.942857-36.571429 58.514285-36.571428 29.257143 0 43.885714 7.314286 43.885715 36.571428-7.314286 7.314286-29.257143 7.314286-65.828572 14.628572-58.514286 7.314286-87.771429 29.257143-87.771428 73.142857z m153.6-43.885715v21.942858c0 29.257143-21.942857 51.2-65.828572 51.2-21.942857 0-36.571429-7.314286-36.571428-21.942858 0-14.628571 14.628571-29.257143 43.885714-29.257142 29.257143-14.628571 43.885714-14.628571 58.514286-21.942858zM585.142857 892.342857c51.2 0 87.771429-21.942857 95.085714-73.142857l-43.885714-14.628571c-7.314286 29.257143-21.942857 43.885714-51.2 43.885714-36.571429 0-51.2-21.942857-51.2-73.142857s14.628571-73.142857 51.2-73.142857c21.942857 0 36.571429 14.628571 43.885714 36.571428l43.885715-7.314286c-7.314286-43.885714-36.571429-65.828571-87.771429-65.828571-65.828571 7.314286-95.085714 43.885714-102.4 117.028571 0 65.828571 36.571429 109.714286 102.4 109.714286zM468.114286 248.685714c0 36.571429 29.257143 58.514286 80.457143 58.514286 36.571429 0 58.514286-7.314286 73.142857-29.257143 0 14.628571 7.314286 21.942857 14.628571 29.257143h43.885714C665.6 292.571429 658.285714 270.628571 658.285714 248.685714V168.228571c0-58.514286-29.257143-87.771429-87.771428-87.771428-58.514286 0-87.771429 21.942857-102.4 65.828571l43.885714 14.628572c7.314286-29.257143 21.942857-36.571429 58.514286-36.571429 29.257143 0 43.885714 7.314286 43.885714 36.571429-7.314286 7.314286-29.257143 7.314286-65.828571 14.628571-58.514286 7.314286-80.457143 29.257143-80.457143 73.142857z m146.285714-51.2V219.428571c0 29.257143-21.942857 51.2-65.828571 51.2-21.942857 0-36.571429-7.314286-36.571429-21.942857 0-21.942857 14.628571-29.257143 43.885714-36.571428 29.257143 0 51.2-7.314286 58.514286-14.628572zM760.685714 277.942857c14.628571 14.628571 29.257143 29.257143 58.514286 29.257143 58.514286 0 87.771429-36.571429 87.771429-109.714286 0-80.457143-29.257143-117.028571-95.085715-117.028571-21.942857 0-43.885714 14.628571-58.514285 29.257143V7.314286h-36.571429v292.571428h43.885714v-21.942857z m0-95.085714c0-36.571429 14.628571-58.514286 51.2-58.514286 36.571429 0 51.2 21.942857 51.2 73.142857s-14.628571 73.142857-51.2 73.142857c-36.571429 0-51.2-21.942857-51.2-65.828571v-21.942857z" 
+            fill="currentColor"
+        >
+        </path>
+    </svg>
+  );
+  export default Replace;
diff --git a/src/components/searchfile/index.tsx b/src/components/searchfile/index.tsx
@@ -10,7 +10,9 @@ interface SearchFileProps {
 
 const SearchFile: React.FC<SearchFileProps> = (props) => {
   const [searchResults, setSearchResults] = useState<string[]>([]);
-  const filenames = useState(Array.isArray(props.list) ? [...props.list] : [])[0];
+  const filenames = useState(
+    Array.isArray(props.list) ? [...props.list] : []
+  )[0];
   const onSelectFile = props.onSelectFile;
   const onClose = props.onClose;
 
@@ -30,8 +32,11 @@ const SearchFile: React.FC<SearchFileProps> = (props) => {
   };
 
   return (
-    <div className='search-file-background' onClick={onClose}>
-      <div className='search-file-body-back' onClick={(e) => e.stopPropagation()}>
+    <div className="search-file-background" onClick={onClose}>
+      <div
+        className="search-file-body-back"
+        onClick={(e) => e.stopPropagation()}
+      >
         <SearchFileBody
           onSearch={handleSearch}
           searchResults={searchResults}
@@ -42,4 +47,4 @@ const SearchFile: React.FC<SearchFileProps> = (props) => {
   );
 };
 
-export default SearchFile;
+export default SearchFile;
diff --git a/src/components/searchfile/search-file-body.tsx b/src/components/searchfile/search-file-body.tsx
@@ -1,4 +1,10 @@
-import React, { useState, useRef, useEffect, ChangeEvent, KeyboardEvent } from 'react';
+import React, {
+  useState,
+  useRef,
+  useEffect,
+  ChangeEvent,
+  KeyboardEvent,
+} from 'react';
 import Icon from '@components/icons';
 
 interface SearchModalProps {
@@ -7,7 +13,11 @@ interface SearchModalProps {
   onExecute: (result: string) => void;
 }
 
-const SearchModal: React.FC<SearchModalProps> = ({onSearch, searchResults, onExecute }) => {
+const SearchModal: React.FC<SearchModalProps> = ({
+  onSearch,
+  searchResults,
+  onExecute,
+}) => {
   const [searchQuery, setSearchQuery] = useState<string>('');
   const [selectedItem, setSelectedItem] = useState<number>(0);
   const inputRef = useRef<HTMLInputElement | null>(null);
@@ -19,9 +29,14 @@ const SearchModal: React.FC<SearchModalProps> = ({onSearch, searchResults, onExe
 
   useEffect(() => {
     if (searchResults.length > 0 && modalRef.current) {
-      const selectedItemElement = modalRef.current.childNodes[selectedItem] as HTMLElement;
+      const selectedItemElement = modalRef.current.childNodes[
+        selectedItem
+      ] as HTMLElement;
       if (selectedItemElement) {
-        selectedItemElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        selectedItemElement.scrollIntoView({
+          behavior: 'smooth',
+          block: 'center',
+        });
       }
     }
   }, [selectedItem, searchResults]);
@@ -34,7 +49,9 @@ const SearchModal: React.FC<SearchModalProps> = ({onSearch, searchResults, onExe
         setSelectedItem((prev) => (prev + 1) % searchResults.length);
       } else if (e.key === 'ArrowUp') {
         e.preventDefault();
-        setSelectedItem((prev) => (prev - 1 + searchResults.length) % searchResults.length);
+        setSelectedItem(
+          (prev) => (prev - 1 + searchResults.length) % searchResults.length
+        );
       } else if (e.key === 'Enter') {
         e.preventDefault();
         onExecute(searchResults[selectedItem]);
@@ -63,7 +80,7 @@ const SearchModal: React.FC<SearchModalProps> = ({onSearch, searchResults, onExe
       <div className="search-file-modal" onClick={(e) => e.stopPropagation()}>
         <input
           ref={inputRef}
-          className='search-file-input'
+          className="search-file-input"
           id="file-search-input"
           type="text"
           value={searchQuery}
@@ -76,17 +93,32 @@ const SearchModal: React.FC<SearchModalProps> = ({onSearch, searchResults, onExe
           placeholder="Search for files..."
         />
         {searchResults.length > 0 && (
-          <ul ref={modalRef} style={{ listStyleType: 'none', padding: 0, maxHeight: '500px', overflowY: 'auto' }}>
+          <ul
+            ref={modalRef}
+            style={{
+              listStyleType: 'none',
+              padding: 0,
+              maxHeight: '500px',
+              overflowY: 'auto',
+            }}
+          >
             {searchResults.map((result, index) => (
               <li
-                className= {index === selectedItem ? 'search-file-result-item-selected' : 'search-file-result-item'}
+                className={
+                  index === selectedItem
+                    ? 'search-file-result-item-selected'
+                    : 'search-file-result-item'
+                }
                 key={index}
                 onClick={() => onClickLine(index)}
               >
-                <Icon type={getFileType(result)} style={{
-                  marginLeft: '5px',
-                  marginRight: '5px',
-                }} />
+                <Icon
+                  type={getFileType(result)}
+                  style={{
+                    marginLeft: '5px',
+                    marginRight: '5px',
+                  }}
+                />
                 {result}
               </li>
             ))}
@@ -97,4 +129,4 @@ const SearchModal: React.FC<SearchModalProps> = ({onSearch, searchResults, onExe
   );
 };
 
-export default SearchModal;
+export default SearchModal;