Merge pull request #3639 from processing/cm6-search-and-find

Codemirror 6 update: add MVP search and find

Author: raclim

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

@@ -9,6 +9,7 @@ import { autocompletion, closeBrackets } from '@codemirror/autocomplete';
 // import 'codemirror/addon/search/jump-to-line';
 
 import { debounce } from 'lodash';
+import { openSearchPanel } from '@codemirror/search';
 
 import {
   getFileMode,
@@ -20,9 +21,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)
@@ -208,13 +206,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);
@@ -225,8 +219,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/Editor/stateUtils.js

@@ -20,12 +20,16 @@ import {
   syntaxHighlighting,
   defaultHighlightStyle
 } from '@codemirror/language';
-import { highlightSelectionMatches } from '@codemirror/search';
 import {
   autocompletion,
   closeBrackets,
   closeBracketsKeymap
 } from '@codemirror/autocomplete';
+import {
+  highlightSelectionMatches,
+  search,
+  searchKeymap
+} from '@codemirror/search';
 import {
   defaultKeymap,
   history,
@@ -297,7 +301,8 @@ export function createNewFileState(filename, document, settings) {
     closeBracketsKeymap,
     defaultKeymap,
     historyKeymap,
-    foldKeymap
+    foldKeymap,
+    searchKeymap
   ];
 
   // https://github.com/codemirror/basic-setup/blob/main/src/codemirror.ts
@@ -312,6 +317,7 @@ export function createNewFileState(filename, document, settings) {
 
     // Everything below here should always be on.
     history(),
+    search(),
     // Highlight extensions
     highlightActiveLine(),
     highlightActiveLineGutter(),

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

@@ -427,7 +427,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

@@ -169,8 +169,6 @@ const ProjectMenu = () => {
     shareSketch
   } = useSketchActions();
 
-  const replaceCommand =
-    metaKey === 'Ctrl' ? `${metaKeyName}+H` : `${metaKeyName}+⌥+F`;
   const newFileCommand =
     metaKey === 'Ctrl' ? `${metaKeyName}+Alt+N` : `${metaKeyName}+⌥+N`;
 
@@ -242,14 +240,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

client/modules/IDE/components/Header/__snapshots__/Nav.unit.test.jsx.snap

@@ -586,14 +586,6 @@ exports[`Nav renders editor version for desktop 1`] = `
                   Ctrl+F
                 </span>
               </li>
-              <li>
-                Replace
-                <span
-                  class="nav__keyboard-shortcut"
-                >
-                  Ctrl+H
-                </span>
-              </li>
             </ul>
           </li>
           <li