move items from editor dropdown to nav

client/components/Nav.jsx

@@ -180,7 +180,6 @@ class Nav extends React.PureComponent {
               </li>
             </ul>
           </li>
-          {/* TODO--add these things to the nav
           <li className={navDropdownState.edit}>
             <button
               onClick={this.toggleDropdown.bind(this, 'edit')}
@@ -196,13 +195,26 @@ class Nav extends React.PureComponent {
                 <InlineSVG src={triangleUrl} />
               </li>
               <li className="nav__dropdown-item">
+                <button
+                  onClick={() => this.props.cmController.tidyCode()}
+                  onFocus={this.handleFocus.bind(this, 'edit')}
+                  onBlur={this.handleBlur}
+                >
                   Tidy Code
+                </button>
               </li>
               <li className="nav__dropdown-item">
+                <button
+                  onClick={() => this.props.cmController.showFind()}
+                  onFocus={this.handleFocus.bind(this, 'edit')}
+                  onBlur={this.handleBlur}
+                >
                   Find
+                </button>
               </li>
             </ul>
           </li>
+          {/*
           <li className={navDropdownState.sketch}>
             <button
               onClick={this.toggleDropdown.bind(this, 'sketch')}
@@ -373,14 +385,19 @@ Nav.propTypes = {
   showErrorModal: PropTypes.func.isRequired,
   unsavedChanges: PropTypes.bool.isRequired,
   warnIfUnsavedChanges: PropTypes.func.isRequired,
-  showKeyboardShortcutModal: PropTypes.func.isRequired
+  showKeyboardShortcutModal: PropTypes.func.isRequired,
+  cmController: PropTypes.shape({
+    tidyCode: PropTypes.func,
+    showFind: PropTypes.func
+  })
 };
 
 Nav.defaultProps = {
   project: {
     id: undefined,
     owner: undefined
-  }
+  },
+  cmController: {}
 };
 
 export default Nav;

client/modules/IDE/components/Editor.jsx

@@ -40,7 +40,6 @@ window.CSSLint = CSSLint;
 window.HTMLHint = HTMLHint;
 
 const beepUrl = require('../../../sounds/audioAlert.mp3');
-const downArrowUrl = require('../../../images/down-arrow.svg');
 const unsavedChangesDotUrl = require('../../../images/unsaved-changes-dot.svg');
 const rightArrowUrl = require('../../../images/right-arrow.svg');
 const leftArrowUrl = require('../../../images/left-arrow.svg');
@@ -49,6 +48,7 @@ class Editor extends React.Component {
   constructor(props) {
     super(props);
     this.tidyCode = this.tidyCode.bind(this);
+    this.showFind = this.showFind.bind(this);
   }
   componentDidMount() {
     this.beep = new Audio(beepUrl);
@@ -119,6 +119,11 @@ class Editor extends React.Component {
     this._cm.getWrapperElement().style['font-size'] = `${this.props.fontSize}px`;
     this._cm.setOption('indentWithTabs', this.props.isTabIndent);
     this._cm.setOption('tabSize', this.props.indentationAmount);
+
+    this.props.provideController({
+      tidyCode: this.tidyCode,
+      showFind: this.showFind
+    });
   }
 
   componentWillUpdate(nextProps) {
@@ -158,6 +163,7 @@ class Editor extends React.Component {
 
   componentWillUnmount() {
     this._cm = null;
+    this.props.provideController(null);
   }
 
   getFileMode(fileName) {
@@ -201,6 +207,10 @@ class Editor extends React.Component {
     }
   }
 
+  showFind() {
+    this._cm.execCommand('find');
+  }
+
   toggleEditorOptions() {
     if (this.props.editorOptionsVisible) {
       this.props.closeEditorOptions();
@@ -250,26 +260,6 @@ class Editor extends React.Component {
               isUserOwner={this.props.isUserOwner}
             />
           </div>
-          <button
-            className="editor__options-button"
-            aria-label="editor options"
-            tabIndex="0"
-            ref={(element) => { this.optionsButton = element; }}
-            onClick={() => {
-              this.toggleEditorOptions();
-            }}
-            onBlur={() => setTimeout(this.props.closeEditorOptions, 200)}
-          >
-            <InlineSVG src={downArrowUrl} />
-          </button>
-          <ul className="editor__options" title="editor options">
-            <li>
-              <button onClick={this.tidyCode}>Tidy</button>
-            </li>
-            <li>
-              <button onClick={this.props.showKeyboardShortcutModal}>Keyboard shortcuts</button>
-            </li>
-          </ul>
         </header>
         <div ref={(element) => { this.codemirrorContainer = element; }} className="editor-holder" tabIndex="0">
         </div>
@@ -303,7 +293,6 @@ Editor.propTypes = {
   editorOptionsVisible: PropTypes.bool.isRequired,
   showEditorOptions: PropTypes.func.isRequired,
   closeEditorOptions: PropTypes.func.isRequired,
-  showKeyboardShortcutModal: PropTypes.func.isRequired,
   setUnsavedChanges: PropTypes.func.isRequired,
   startRefreshSketch: PropTypes.func.isRequired,
   autorefresh: PropTypes.bool.isRequired,
@@ -320,7 +309,8 @@ Editor.propTypes = {
   collapseSidebar: PropTypes.func.isRequired,
   expandSidebar: PropTypes.func.isRequired,
   isUserOwner: PropTypes.bool,
-  clearConsole: PropTypes.func.isRequired
+  clearConsole: PropTypes.func.isRequired,
+  provideController: PropTypes.func.isRequired
 };
 
 Editor.defaultProps = {

client/modules/IDE/pages/IDEView.jsx

@@ -219,6 +219,7 @@ class IDEView extends React.Component {
           unsavedChanges={this.props.ide.unsavedChanges}
           warnIfUnsavedChanges={this.warnIfUnsavedChanges}
           showKeyboardShortcutModal={this.props.showKeyboardShortcutModal}
+          cmController={this.cmController}
         />
         <Toolbar
           className="Toolbar"
@@ -342,6 +343,7 @@ class IDEView extends React.Component {
                   collapseSidebar={this.props.collapseSidebar}
                   isUserOwner={this.isUserOwner()}
                   clearConsole={this.props.clearConsole}
+                  provideController={(ctl) => { this.cmController = ctl; }}
                 />
                 <Console
                   consoleEvents={this.props.console}
@@ -527,7 +529,6 @@ class IDEView extends React.Component {
           }
         })()}
       </div>
-
     );
   }
 }