cleanup references to search and find

Author: khanniie

client/modules/IDE/components/Editor/codemirror.js

@@ -9,6 +9,7 @@ import { closeBrackets } from '@codemirror/autocomplete';
 // import 'codemirror/addon/search/jump-to-line';
 
 import { debounce } from 'lodash';
+import { openSearchPanel } from '@codemirror/search';
 
 import {
   getFileMode,
@@ -19,9 +20,6 @@ import { useEffectWithComparison } from '../../hooks/custom-hooks';
 import tidyCodeWithPrettier from './tidier';
 
 // ----- GENERAL TODOS (in order of priority) -----
-// - autocomplete (hinter)
-// - p5-javascript
-// - search, find & replace
 // - color themes
 // - any features lost in the p5 conversion git merge
 // - javascript color picker (extension works for css but needs to be forked for js)
@@ -194,13 +192,9 @@ export default function useCodeMirror({
     return updatedFile;
   };
 
-  // TODO: Add find and replace functionality.
-  // const showFind = () => {
-  //   cmInstance.current.execCommand('findPersistent');
-  // };
-  // const showReplace = () => {
-  //   cmInstance.current.execCommand('replace');
-  // };
+  const showSearch = () => {
+    openSearchPanel(cmView.current);
+  };
 
   const tidyCode = () => {
     const fileMode = getFileMode(file.name);
@@ -211,8 +205,7 @@ export default function useCodeMirror({
     setupCodeMirrorOnContainerMounted,
     teardownCodeMirror,
     getContent,
-    tidyCode
-    // showFind,
-    // showReplace
+    tidyCode,
+    showSearch
   };
 }

client/modules/IDE/components/Editor/index.jsx

@@ -87,9 +87,8 @@ function Editor({
     teardownCodeMirror,
     // cmInstance,
     getContent,
-    tidyCode
-    // showFind,
-    // showReplace
+    tidyCode,
+    showSearch
   } = useCodeMirror({
     theme,
     lineNumbers,
@@ -115,9 +114,7 @@ function Editor({
     provideController({
       tidyCode,
       getContent,
-      // TODO: Reimplement these.
-      showFind: () => {},
-      showReplace: () => {}
+      showSearch
     });
   }, [getContent]);
 

client/modules/IDE/components/Header/MobileNav.jsx

@@ -420,7 +420,7 @@ const MoreMenu = () => {
           <MobileMenuItem onClick={cmRef.current?.tidyCode}>
             {t('Nav.Edit.TidyCode')}
           </MobileMenuItem>
-          <MobileMenuItem onClick={cmRef.current?.showFind}>
+          <MobileMenuItem onClick={cmRef.current?.showSearch}>
             {t('Nav.Edit.Find')}
           </MobileMenuItem>
           <b>{t('Nav.Sketch.Title')}</b>

client/modules/IDE/components/Header/Nav.jsx

@@ -162,8 +162,6 @@ const ProjectMenu = () => {
     shareSketch
   } = useSketchActions();
 
-  const replaceCommand =
-    metaKey === 'Ctrl' ? `${metaKeyName}+H` : `${metaKeyName}+⌥+F`;
   const newFileCommand =
     metaKey === 'Ctrl' ? `${metaKeyName}+Alt+N` : `${metaKeyName}+⌥+N`;
 
@@ -237,14 +235,10 @@ const ProjectMenu = () => {
           {t('Nav.Edit.TidyCode')}
           <span className="nav__keyboard-shortcut">{metaKeyName}+Shift+F</span>
         </MenubarItem>
-        <MenubarItem id="edit-find" onClick={cmRef.current?.showFind}>
+        <MenubarItem id="edit-find" onClick={cmRef.current?.showSearch}>
           {t('Nav.Edit.Find')}
           <span className="nav__keyboard-shortcut">{metaKeyName}+F</span>
         </MenubarItem>
-        <MenubarItem id="edit-replace" onClick={cmRef.current?.showReplace}>
-          {t('Nav.Edit.Replace')}
-          <span className="nav__keyboard-shortcut">{replaceCommand}</span>
-        </MenubarItem>
       </MenubarSubmenu>
       <MenubarSubmenu id="sketch" title={t('Nav.Sketch.Title')}>
         <MenubarItem