Autocomplete and Hinter

client/constants.js

@@ -75,6 +75,7 @@ export const SET_TEXT_OUTPUT = 'SET_TEXT_OUTPUT';
 export const SET_GRID_OUTPUT = 'SET_GRID_OUTPUT';
 export const SET_SOUND_OUTPUT = 'SET_SOUND_OUTPUT';
 export const SET_AUTOCLOSE_BRACKETS_QUOTES = 'SET_AUTOCLOSE_BRACKETS_QUOTES';
+export const SET_AUTOCOMPLETE_HINTER = 'SET_AUTOCOMPLETE_HINTER';
 
 export const OPEN_PROJECT_OPTIONS = 'OPEN_PROJECT_OPTIONS';
 export const CLOSE_PROJECT_OPTIONS = 'CLOSE_PROJECT_OPTIONS';

client/modules/IDE/actions/preferences.js

@@ -16,7 +16,8 @@ function updatePreferences(formParams, dispatch) {
 }
 
 export function setFontSize(value) {
-  return (dispatch, getState) => { // eslint-disable-line
+  return (dispatch, getState) => {
+    // eslint-disable-line
     dispatch({
       type: ActionTypes.SET_FONT_SIZE,
       value
@@ -69,6 +70,24 @@ export function setAutocloseBracketsQuotes(value) {
   };
 }
 
+export function setAutocompleteHinter(value) {
+  return (dispatch, getState) => {
+    dispatch({
+      type: ActionTypes.SET_AUTOCOMPLETE_HINTER,
+      value
+    });
+    const state = getState();
+    if (state.user.authenticated) {
+      const formParams = {
+        preferences: {
+          autocompleteHinter: value
+        }
+      };
+      updatePreferences(formParams, dispatch);
+    }
+  };
+}
+
 export function setAutosave(value) {
   return (dispatch, getState) => {
     dispatch({

client/modules/IDE/components/Editor.jsx

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import CodeMirror from 'codemirror';
+import Fuse from 'fuse.js';
 import emmet from '@emmetio/codemirror-plugin';
 import prettier from 'prettier/standalone';
 import babelParser from 'prettier/parser-babel';
@@ -29,6 +30,7 @@ import 'codemirror/addon/search/jump-to-line';
 import 'codemirror/addon/edit/matchbrackets';
 import 'codemirror/addon/edit/closebrackets';
 import 'codemirror/addon/selection/mark-selection';
+import 'codemirror/addon/hint/css-hint';
 import 'codemirror-colorpicker';
 
 import { JSHINT } from 'jshint';
@@ -43,6 +45,8 @@ import '../../../utils/p5-javascript';
 import Timer from '../components/Timer';
 import EditorAccessibility from '../components/EditorAccessibility';
 import { metaKey } from '../../../utils/metaKey';
+import './show-hint';
+import * as hinter from '../../../utils/p5-hinter';
 
 import '../../../utils/codemirror-search';
 
@@ -131,6 +135,11 @@ class Editor extends React.Component {
       }
     });
 
+    this.hinter = new Fuse(hinter.p5Hinter, {
+      threshold: 0.05,
+      keys: ['text']
+    });
+
     delete this._cm.options.lint.options.errors;
 
     const replaceCommand =
@@ -186,16 +195,21 @@ class Editor extends React.Component {
     });
 
     this._cm.on('keydown', (_cm, e) => {
-      // 70 === f
       if (
         ((metaKey === 'Cmd' && e.metaKey) ||
           (metaKey === 'Ctrl' && e.ctrlKey)) &&
         e.shiftKey &&
-        e.keyCode === 70
+        e.key === 'f'
       ) {
         e.preventDefault();
         this.tidyCode();
       }
+
+      // Show hint
+      const mode = this._cm.getOption('mode');
+      if (/^[a-z]$/i.test(e.key) && (mode === 'css' || mode === 'javascript')) {
+        this.showHint(_cm);
+      }
     });
 
     this._cm.getWrapperElement().style[
@@ -253,6 +267,12 @@ class Editor extends React.Component {
         this.props.autocloseBracketsQuotes
       );
     }
+    if (this.props.autocompleteHinter !== prevProps.autocompleteHinter) {
+      if (!this.props.autocompleteHinter) {
+        // close the hinter window once the preference is turned off
+        CodeMirror.showHint(this._cm, () => {});
+      }
+    }
 
     if (this.props.runtimeErrorWarningVisible) {
       if (this.props.consoleEvents.length !== prevProps.consoleEvents.length) {
@@ -331,6 +351,100 @@ class Editor extends React.Component {
     this._cm.execCommand('findPersistent');
   }
 
+  showHint(_cm) {
+    if (!this.props.autocompleteHinter) {
+      CodeMirror.showHint(_cm, () => {});
+      return;
+    }
+
+    let focusedLinkElement = null;
+    const setFocusedLinkElement = (set) => {
+      if (set && !focusedLinkElement) {
+        const activeItemLink = document.querySelector(
+          `.CodeMirror-hint-active a`
+        );
+        if (activeItemLink) {
+          focusedLinkElement = activeItemLink;
+          focusedLinkElement.classList.add('focused-hint-link');
+          focusedLinkElement.parentElement.parentElement.classList.add(
+            'unfocused'
+          );
+        }
+      }
+    };
+    const removeFocusedLinkElement = () => {
+      if (focusedLinkElement) {
+        focusedLinkElement.classList.remove('focused-hint-link');
+        focusedLinkElement.parentElement.parentElement.classList.remove(
+          'unfocused'
+        );
+        focusedLinkElement = null;
+        return true;
+      }
+      return false;
+    };
+
+    const hintOptions = {
+      _fontSize: this.props.fontSize,
+      completeSingle: false,
+      extraKeys: {
+        'Shift-Right': (cm, e) => {
+          const activeItemLink = document.querySelector(
+            `.CodeMirror-hint-active a`
+          );
+          if (activeItemLink) activeItemLink.click();
+        },
+        Right: (cm, e) => {
+          setFocusedLinkElement(true);
+        },
+        Left: (cm, e) => {
+          removeFocusedLinkElement();
+        },
+        Up: (cm, e) => {
+          const onLink = removeFocusedLinkElement();
+          e.moveFocus(-1);
+          setFocusedLinkElement(onLink);
+        },
+        Down: (cm, e) => {
+          const onLink = removeFocusedLinkElement();
+          e.moveFocus(1);
+          setFocusedLinkElement(onLink);
+        },
+        Enter: (cm, e) => {
+          if (focusedLinkElement) focusedLinkElement.click();
+          else e.pick();
+        }
+      },
+      closeOnUnfocus: false
+      // completeOnSingleClick: false,
+      // closeOnPick: false
+    };
+
+    // CSS
+    if (_cm.options.mode === 'css') {
+      CodeMirror.showHint(_cm, CodeMirror.hint.css, hintOptions);
+      return;
+    }
+
+    // JavaScript
+    CodeMirror.showHint(
+      _cm,
+      () => {
+        const c = _cm.getCursor();
+        const token = _cm.getTokenAt(c);
+
+        const hints = this.hinter.search(token.string);
+
+        return {
+          list: hints,
+          from: CodeMirror.Pos(c.line, token.start),
+          to: CodeMirror.Pos(c.line, c.ch)
+        };
+      },
+      hintOptions
+    );
+  }
+
   showReplace() {
     this._cm.execCommand('replace');
   }
@@ -437,6 +551,7 @@ class Editor extends React.Component {
 
 Editor.propTypes = {
   autocloseBracketsQuotes: PropTypes.bool.isRequired,
+  autocompleteHinter: PropTypes.bool.isRequired,
   lineNumbers: PropTypes.bool.isRequired,
   lintWarning: PropTypes.bool.isRequired,
   linewrap: PropTypes.bool.isRequired,

client/modules/IDE/components/KeyboardShortcutModal.jsx

@@ -100,6 +100,10 @@ function KeyboardShortcutModal() {
           </span>
           <span>{t('KeyboardShortcuts.General.TurnOffAccessibleOutput')}</span>
         </li>
+        <li className="keyboard-shortcut-item">
+          <span className="keyboard-shortcut__command">{'\u21E7'} + Right</span>
+          <span>Go to Reference for Selected Item in Hinter</span>
+        </li>
       </ul>
     </div>
   );

client/modules/IDE/components/Preferences/Preferences.unit.test.jsx

@@ -7,6 +7,7 @@ import Preferences from './index';
  * - this.props.fontSize : number
  * - this.props.autosave : bool
  * - this.props.autocloseBracketsQuotes : bool
+ * - this.props.autocompleteHinter : bool
  * - this.props.linewrap : bool
  * - this.props.lineNumbers : bool
  * - this.props.theme : string
@@ -35,6 +36,7 @@ describe('<Preferences />', () => {
     fontSize: 12,
     autosave: false,
     autocloseBracketsQuotes: false,
+    autocompleteHinter: false,
     linewrap: false,
     lineNumbers: false,
     theme: 'contrast',
@@ -45,6 +47,7 @@ describe('<Preferences />', () => {
     setFontSize: jest.fn(),
     setAutosave: jest.fn(),
     setAutocloseBracketsQuotes: jest.fn(),
+    setAutocompleteHinter: jest.fn(),
     setLinewrap: jest.fn(),
     setLineNumbers: jest.fn(),
     setTheme: jest.fn(),
@@ -426,6 +429,28 @@ describe('<Preferences />', () => {
       );
     });
 
+    it('autocompleteHinter toggle, starting at false', () => {
+      // render the component with autocompleteHinter prop set to false
+      act(() => {
+        subject();
+      });
+
+      // get ahold of the radio buttons for toggling autocompleteHinter
+      const autocompleteRadioFalse = screen.getByRole('radio', {
+        name: /autocomplete hinter off/i
+      });
+      const autocompleteRadioTrue = screen.getByRole('radio', {
+        name: /autocomplete hinter on/i
+      });
+
+      testToggle(
+        autocompleteRadioFalse,
+        autocompleteRadioTrue,
+        props.setAutocompleteHinter,
+        true
+      );
+    });
+
     describe('start autosave value at true', () => {
       beforeAll(() => {
         props.autosave = true;
@@ -481,6 +506,34 @@ describe('<Preferences />', () => {
       });
     });
 
+    describe('start autocomplete hinter value at true', () => {
+      beforeAll(() => {
+        props.autocompleteHinter = true;
+      });
+
+      it('autocompleteHinter toggle, starting at true', () => {
+        // render the component with autocompleteHinter prop set to true
+        act(() => {
+          subject();
+        });
+
+        // get ahold of the radio buttons for toggling autocompleteHinter
+        const autocompleteRadioFalse = screen.getByRole('radio', {
+          name: /autocomplete hinter off/i
+        });
+        const autocompleteRadioTrue = screen.getByRole('radio', {
+          name: /autocomplete hinter on/i
+        });
+
+        testToggle(
+          autocompleteRadioTrue,
+          autocompleteRadioFalse,
+          props.setAutocompleteHinter,
+          false
+        );
+      });
+    });
+
     describe('start linewrap at false', () => {
       beforeAll(() => {
         props.linewrap = false;
@@ -492,7 +545,7 @@ describe('<Preferences />', () => {
           subject();
         });
 
-        // get ahold of the radio buttons for toggling autocloseBracketsQuotes
+        // get ahold of the radio buttons for toggling linewrap
         const linewrapRadioFalse = screen.getByRole('radio', {
           name: /linewrap off/i
         });
@@ -520,7 +573,7 @@ describe('<Preferences />', () => {
           subject();
         });
 
-        // get ahold of the radio buttons for toggling autocloseBracketsQuotes
+        // get ahold of the radio buttons for toggling linewrap
         const linewrapRadioFalse = screen.getByRole('radio', {
           name: /linewrap off/i
         });