Add replace

client/components/Nav.jsx

@@ -13,7 +13,7 @@ import { setAllAccessibleOutput, setLanguage } from '../modules/IDE/actions/pref
 import { logoutUser } from '../modules/User/actions';
 
 import getConfig from '../utils/getConfig';
-import { metaKeyName, } from '../utils/metaKey';
+import { metaKeyName, metaKey } from '../utils/metaKey';
 import { getIsUserOwner } from '../modules/IDE/selectors/users';
 
 import CaretLeftIcon from '../images/left-arrow.svg';
@@ -42,6 +42,7 @@ class Nav extends React.PureComponent {
     this.handleFindNext = this.handleFindNext.bind(this);
     this.handleRun = this.handleRun.bind(this);
     this.handleFindPrevious = this.handleFindPrevious.bind(this);
+    this.handleReplace = this.handleReplace.bind(this);
     this.handleStop = this.handleStop.bind(this);
     this.handleStartAccessible = this.handleStartAccessible.bind(this);
     this.handleStopAccessible = this.handleStopAccessible.bind(this);
@@ -134,6 +135,11 @@ class Nav extends React.PureComponent {
     this.setDropdown('none');
   }
 
+  handleReplace() {
+    this.props.cmController.showReplace();
+    this.setDropdown('none');
+  }
+
   handleAddFile() {
     this.props.newFile(this.props.rootFile.id);
     this.setDropdown('none');
@@ -251,6 +257,7 @@ class Nav extends React.PureComponent {
   }
 
   renderProjectMenu(navDropdownState) {
+    const replaceCommand = metaKey === 'Ctrl' ? `${metaKeyName}+H` : `${metaKeyName}+⌥+F`;
     return (
       <ul className="nav__items-left">
         <li className="nav__item-logo">
@@ -416,6 +423,16 @@ class Nav extends React.PureComponent {
                 <span className="nav__keyboard-shortcut">{'\u21E7'}+{metaKeyName}+G</span>
               </button>
             </li>
+            <li className="nav__dropdown-item">
+              <button
+                onClick={this.handleReplace}
+                onFocus={this.handleFocusForEdit}
+                onBlur={this.handleBlur}
+              >
+                {this.props.t('Nav.Edit.Replace')}
+                <span className="nav__keyboard-shortcut">{replaceCommand}</span>
+              </button>
+            </li>
           </ul>
         </li>
         <li className={navDropdownState.sketch}>
@@ -777,6 +794,7 @@ Nav.propTypes = {
     showFind: PropTypes.func,
     findNext: PropTypes.func,
     findPrev: PropTypes.func,
+    showReplace: PropTypes.func,
     getContent: PropTypes.func
   }),
   startSketch: PropTypes.func.isRequired,

client/components/__test__/Nav.test.jsx

@@ -35,7 +35,8 @@ describe('Nav', () => {
       tidyCode: jest.fn(),
       showFind: jest.fn(),
       findNext: jest.fn(),
-      findPrev: jest.fn()
+      findPrev: jest.fn(),
+      showReplace: jest.fn(),
     },
     startSketch: jest.fn(),
     stopSketch: jest.fn(),

client/components/__test__/__snapshots__/Nav.test.jsx.snap

@@ -122,6 +122,17 @@ exports[`Nav renders correctly 1`] = `
                 </span>
               </button>
             </li>
+            <li
+              class="nav__dropdown-item"
+            >
+              <button>
+                <span
+                  class="nav__keyboard-shortcut"
+                >
+                  ⌃+H
+                </span>
+              </button>
+            </li>
           </ul>
         </li>
         <li

client/modules/IDE/components/Editor.jsx

@@ -22,6 +22,7 @@ import 'codemirror/addon/search/match-highlighter';
 import 'codemirror/addon/search/jump-to-line';
 import 'codemirror/addon/edit/matchbrackets';
 import 'codemirror/addon/edit/closebrackets';
+import 'codemirror/addon/selection/mark-selection';
 
 import { JSHINT } from 'jshint';
 import { CSSLint } from 'csslint';
@@ -37,7 +38,7 @@ import Timer from '../components/Timer';
 import EditorAccessibility from '../components/EditorAccessibility';
 import { metaKey, } from '../../../utils/metaKey';
 
-import search from '../../../utils/codemirror-search';
+import '../../../utils/codemirror-search';
 
 import beepUrl from '../../../sounds/audioAlert.mp3';
 import UnsavedChangesDotIcon from '../../../images/unsaved-changes-dot.svg';
@@ -55,8 +56,6 @@ import * as UserActions from '../../User/actions';
 import * as ToastActions from '../actions/toast';
 import * as ConsoleActions from '../actions/console';
 
-search(CodeMirror);
-
 const beautifyCSS = beautifyJS.css;
 const beautifyHTML = beautifyJS.html;
 
@@ -86,6 +85,7 @@ class Editor extends React.Component {
     this.showFind = this.showFind.bind(this);
     this.findNext = this.findNext.bind(this);
     this.findPrev = this.findPrev.bind(this);
+    this.showReplace = this.showReplace.bind(this);
     this.getContent = this.getContent.bind(this);
   }
 
@@ -106,6 +106,7 @@ class Editor extends React.Component {
       highlightSelectionMatches: true, // highlight current search match
       matchBrackets: true,
       autoCloseBrackets: this.props.autocloseBracketsQuotes,
+      styleSelectedText: true,
       lint: {
         onUpdateLinting: ((annotations) => {
           this.props.hideRuntimeErrorWarning();
@@ -122,6 +123,7 @@ class Editor extends React.Component {
 
     delete this._cm.options.lint.options.errors;
 
+    const replaceCommand = metaKey === 'Ctrl' ? `${metaKey}-H` : `${metaKey}-Option-F`;
     this._cm.setOption('extraKeys', {
       Tab: (cm) => {
         // might need to specify and indent more?
@@ -137,6 +139,7 @@ class Editor extends React.Component {
       [`${metaKey}-F`]: 'findPersistent',
       [`${metaKey}-G`]: 'findNext',
       [`Shift-${metaKey}-G`]: 'findPrev',
+      replaceCommand: 'replace',
     });
 
     this.initializeDocuments(this.props.files);
@@ -170,6 +173,7 @@ class Editor extends React.Component {
       showFind: this.showFind,
       findNext: this.findNext,
       findPrev: this.findPrev,
+      showReplace: this.showReplace,
       getContent: this.getContent
     });
   }
@@ -283,6 +287,10 @@ class Editor extends React.Component {
     this._cm.execCommand('findPersistent');
   }
 
+  showReplace() {
+    this._cm.execCommand('replace');
+  }
+
   tidyCode() {
     const beautifyOptions = {
       indent_size: INDENTATION_AMOUNT,

client/modules/IDE/components/KeyboardShortcutModal.jsx

@@ -1,9 +1,10 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { metaKeyName, } from '../../../utils/metaKey';
+import { metaKeyName, metaKey } from '../../../utils/metaKey';
 
 function KeyboardShortcutModal() {
   const { t } = useTranslation();
+  const replaceCommand = metaKey === 'Ctrl' ? `${metaKeyName} + H` : `${metaKeyName} + ⌥ + F`;
   return (
     <div className="keyboard-shortcuts">
       <h3 className="keyboard-shortcuts__title">{t('KeyboardShortcuts.CodeEditing.CodeEditing')}</h3>
@@ -33,6 +34,12 @@ function KeyboardShortcutModal() {
           </span>
           <span>{t('KeyboardShortcuts.CodeEditing.FindPreviousTextMatch')}</span>
         </li>
+        <li className="keyboard-shortcut-item">
+          <span className="keyboard-shortcut__command">
+            {replaceCommand}
+          </span>
+          <span>{t('KeyboardShortcuts.CodeEditing.ReplaceTextMatch')}</span>
+        </li>
         <li className="keyboard-shortcut-item">
           <span className="keyboard-shortcut__command">
             {metaKeyName} + [

client/styles/abstracts/_placeholders.scss

@@ -173,9 +173,15 @@
 		text-decoration: none;
 		color: getThemifyVariable('inactive-text-color');
 		cursor: pointer;
+		& g, & path {
+			fill: getThemifyVariable('inactive-text-color');
+		}
 		&:hover {
 			text-decoration: none;
 			color: getThemifyVariable('heavy-text-color');
+			& g, & path {
+				fill: getThemifyVariable('heavy-text-color');
+			}
 		}
 	}
 }

client/styles/abstracts/_variables.scss

@@ -2,6 +2,7 @@ $base-font-size: 12;
 
 //colors
 $p5js-pink: #ed225d;
+$p5js-pink-opacity: #ed225d80;
 $processing-blue: #007BBB;
 $p5js-active-pink: #f10046;
 $white: #fff;