Implemented replace & replace all feature

Author: SundeepChand

client/components/Nav.jsx

@@ -41,6 +41,8 @@ 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.handleReplaceAll = this.handleReplaceAll.bind(this);
     this.handleStop = this.handleStop.bind(this);
     this.handleStartAccessible = this.handleStartAccessible.bind(this);
     this.handleStopAccessible = this.handleStopAccessible.bind(this);
@@ -133,6 +135,16 @@ class Nav extends React.PureComponent {
     this.setDropdown('none');
   }
 
+  handleReplace() {
+    this.props.cmController.showReplace();
+    this.setDropdown('none');
+  }
+
+  handleReplaceAll() {
+    this.props.cmController.showReplaceAll();
+    this.setDropdown('none');
+  }
+
   handleAddFile() {
     this.props.newFile(this.props.rootFile.id);
     this.setDropdown('none');
@@ -419,6 +431,26 @@ 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">{metaKeyName}+R</span>
+              </button>
+            </li>
+            <li className="nav__dropdown-item">
+              <button
+                onClick={this.handleReplaceAll}
+                onFocus={this.handleFocusForEdit}
+                onBlur={this.handleBlur}
+              >
+                {this.props.t('Nav.Edit.ReplaceAll')}
+                <span className="nav__keyboard-shortcut">{'\u21E7'}+{metaKeyName}+R</span>
+              </button>
+            </li>
           </ul>
         </li>
         <li className={navDropdownState.sketch}>
@@ -793,6 +825,8 @@ Nav.propTypes = {
     showFind: PropTypes.func,
     findNext: PropTypes.func,
     findPrev: PropTypes.func,
+    showReplace: PropTypes.func,
+    showReplaceAll: PropTypes.func,
     getContent: PropTypes.func
   }),
   startSketch: PropTypes.func.isRequired,

client/modules/IDE/components/Editor.jsx

@@ -71,6 +71,8 @@ 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.showReplaceAll = this.showReplaceAll.bind(this);
     this.getContent = this.getContent.bind(this);
   }
 
@@ -122,6 +124,7 @@ class Editor extends React.Component {
       [`${metaKey}-G`]: 'findNext',
       [`Shift-${metaKey}-G`]: 'findPrev',
       [`${metaKey}-R`]: 'replace',
+      [`Shift-${metaKey}-R`]: 'replaceAll',
     });
 
     this.initializeDocuments(this.props.files);
@@ -155,6 +158,8 @@ class Editor extends React.Component {
       showFind: this.showFind,
       findNext: this.findNext,
       findPrev: this.findPrev,
+      showReplace: this.showReplace,
+      showReplaceAll: this.showReplaceAll,
       getContent: this.getContent
     });
   }
@@ -264,6 +269,14 @@ class Editor extends React.Component {
     this._cm.execCommand('findPersistent');
   }
 
+  showReplace() {
+    this._cm.execCommand('replace');
+  }
+
+  showReplaceAll() {
+    this._cm.execCommand('replaceAll');
+  }
+
   tidyCode() {
     const beautifyOptions = {
       indent_size: INDENTATION_AMOUNT,

client/modules/IDE/components/KeyboardShortcutModal.jsx

@@ -33,6 +33,18 @@ function KeyboardShortcutModal() {
           </span>
           <span>{t('KeyboardShortcuts.CodeEditing.FindPreviousTextMatch')}</span>
         </li>
+        <li className="keyboard-shortcut-item">
+          <span className="keyboard-shortcut__command">
+            {metaKeyName} + R
+          </span>
+          <span>{t('KeyboardShortcuts.CodeEditing.ReplaceTextMatch')}</span>
+        </li>
+        <li className="keyboard-shortcut-item">
+          <span className="keyboard-shortcut__command">
+            {metaKeyName} + {'\u21E7'} + R
+          </span>
+          <span>{t('KeyboardShortcuts.CodeEditing.ReplaceAllTextMatches')}</span>
+        </li>
         <li className="keyboard-shortcut-item">
           <span className="keyboard-shortcut__command">
             {metaKeyName} + [

client/styles/components/_keyboard-shortcuts.scss

@@ -2,6 +2,7 @@
   padding: #{20 / $base-font-size}rem;
   padding-bottom: #{40 / $base-font-size}rem;
   width: #{450 / $base-font-size}rem;
+  overflow-y: scroll;
 }
 
 .keyboard-shortcuts-note {

translations/locales/en-US/translations.json

@@ -15,7 +15,9 @@
       "TidyCode": "Tidy Code",
       "Find": "Find",
       "FindNext": "Find Next",
-      "FindPrevious": "Find Previous"
+      "FindPrevious": "Find Previous",
+      "Replace": "Replace",
+      "ReplaceAll": "Replace All"
     },
     "Sketch": {
       "Title": "Sketch",
@@ -159,6 +161,8 @@
       "FindText": "Find Text",
       "FindNextMatch": "Find Next Match",
       "FindPrevMatch": "Find Previous Match",
+      "ReplaceTextMatch": "Replace Text Match",
+      "ReplaceAllTextMatches": "Replace All Text Matches",
       "IndentCodeLeft": "Indent Code Left",
       "IndentCodeRight": "Indent Code Right",
       "CommentLine": "Comment Line",

translations/locales/es-419/translations.json

@@ -15,7 +15,9 @@
       "TidyCode": "Ordenar código",
       "Find": "Buscar",
       "FindNext": "Buscar siguiente",
-      "FindPrevious": "Buscar anterior"
+      "FindPrevious": "Buscar anterior",
+      "Replace": "Reemplazar",
+      "ReplaceAll": "Reemplaza todo"
     },
     "Sketch": {
       "Title": "Bosquejo",
@@ -159,6 +161,8 @@
       "FindText": "Encontrar texto",
       "FindNextMatch": "Encontrar siguiente ocurrencia",
       "FindPrevMatch": "Encontrar ocurrencia previa",
+      "ReplaceTextMatch": "Reemplazar coincidencia de texto",
+      "ReplaceAllTextMatches": "Reemplazar todas las coincidencias de texto",
       "IndentCodeLeft": "Indentar código a la izquierda",
       "IndentCodeRight": "Indentar código a la derecha",
       "CommentLine": "Comentar línea de código",