Autocomplete feature (#1051)

tuesmiddt · web-flow · commit 788f1a91755f · 2020-04-07T23:36:27.000+08:00
* Add autocompletion and documentation display (#2) Add autocompletion and documentation display for builtins * Integrate code autocompletion * Bump js-slang version, handle editor prepend * Comment
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -45,7 +45,7 @@
     "draft-js": "^0.10.5",
     "flexboxgrid": "^6.3.1",
     "flexboxgrid-helpers": "^1.1.3",
-    "js-slang": "^0.4.20",
+    "js-slang": "^0.4.23",
     "jwt-decode": "^2.2.0",
     "lodash": "^4.17.13",
     "lz-string": "^1.4.4",
diff --git a/src/actions/actionTypes.ts b/src/actions/actionTypes.ts
@@ -40,6 +40,7 @@ export const END_CLEAR_CONTEXT = 'END_CLEAR_CONTEXT';
 export const ENSURE_LIBRARIES_LOADED = 'ENSURE_LIBRARIES_LOADED';
 export const EVAL_EDITOR = 'EVAL_EDITOR';
 export const EVAL_REPL = 'EVAL_REPL';
+export const PROMPT_AUTOCOMPLETE = 'PROMPT_AUTOCOMPLETE';
 // For interpreting code blocks silently (e.g. prepend) BEFORE the test case is run
 export const EVAL_SILENT = 'EVAL_SILENT';
 export const EVAL_TESTCASE = 'EVAL_TESTCASE';
diff --git a/src/actions/workspaces.ts b/src/actions/workspaces.ts
@@ -209,3 +209,16 @@ export const updateHasUnsavedChanges = (
     workspaceLocation,
     hasUnsavedChanges
   });
+
+export const promptAutocomplete = (
+  workspaceLocation: WorkspaceLocation,
+  row: number,
+  column: number,
+  callback: any // TODO: define a type for this
+) =>
+  action(actionTypes.PROMPT_AUTOCOMPLETE, {
+    workspaceLocation,
+    row,
+    column,
+    callback
+  });
diff --git a/src/components/Playground.tsx b/src/components/Playground.tsx
@@ -104,6 +104,7 @@ export interface IDispatchProps {
   handleDebuggerResume: () => void;
   handleDebuggerReset: () => void;
   handleToggleEditorAutorun: () => void;
+  handlePromptAutocomplete: (row: number, col: number, callback: any) => void;
 }
 
 type PlaygroundState = {
@@ -272,6 +273,7 @@ class Playground extends React.Component<IPlaygroundProps, PlaygroundState> {
         handleDeclarationNavigate: this.props.handleDeclarationNavigate,
         handleEditorEval: this.props.handleEditorEval,
         handleEditorValueChange: this.props.handleEditorValueChange,
+        handlePromptAutocomplete: this.props.handlePromptAutocomplete,
         handleFinishInvite: this.props.handleFinishInvite,
         sharedbAceInitValue: this.props.sharedbAceInitValue,
         sharedbAceIsInviting: this.props.sharedbAceIsInviting,
diff --git a/src/components/__tests__/Playground.tsx b/src/components/__tests__/Playground.tsx
@@ -54,7 +54,8 @@ const baseProps = {
   handleUsingSubst: (usingSubst: boolean) => {},
   handleDebuggerPause: () => {},
   handleDebuggerResume: () => {},
-  handleDebuggerReset: () => {}
+  handleDebuggerReset: () => {},
+  handlePromptAutocomplete: (row: number, col: number, callback: any) => {}
 };
 
 const testValueProps: IPlaygroundProps = {
diff --git a/src/components/academy/grading/GradingWorkspace.tsx b/src/components/academy/grading/GradingWorkspace.tsx
@@ -88,6 +88,7 @@ export type DispatchProps = {
   handleDebuggerReset: () => void;
   handleUpdateCurrentSubmissionId: (submissionId: number, questionId: number) => void;
   handleUpdateHasUnsavedChanges: (hasUnsavedChanges: boolean) => void;
+  handlePromptAutocomplete: (row: number, col: number, callback: any) => void;
 };
 
 class GradingWorkspace extends React.Component<GradingWorkspaceProps> {
@@ -179,6 +180,7 @@ class GradingWorkspace extends React.Component<GradingWorkspaceProps> {
               highlightedLines: this.props.highlightedLines,
               newCursorPosition: this.props.newCursorPosition,
               handleEditorUpdateBreakpoints: this.props.handleEditorUpdateBreakpoints,
+              handlePromptAutocomplete: this.props.handlePromptAutocomplete,
               isEditorAutorun: false
             }
           : undefined,
diff --git a/src/components/assessment/AssessmentWorkspace.tsx b/src/components/assessment/AssessmentWorkspace.tsx
@@ -108,6 +108,7 @@ export type DispatchProps = {
   handleDebuggerPause: () => void;
   handleDebuggerResume: () => void;
   handleDebuggerReset: () => void;
+  handlePromptAutocomplete: (row: number, col: number, callback: any) => void;
 };
 
 class AssessmentWorkspace extends React.Component<
@@ -248,6 +249,7 @@ class AssessmentWorkspace extends React.Component<
               highlightedLines: this.props.highlightedLines,
               newCursorPosition: this.props.newCursorPosition,
               handleEditorUpdateBreakpoints: this.props.handleEditorUpdateBreakpoints,
+              handlePromptAutocomplete: this.props.handlePromptAutocomplete,
               isEditorAutorun: false
             }
           : undefined,
diff --git a/src/components/assessment/__tests__/AssessmentWorkspace.tsx b/src/components/assessment/__tests__/AssessmentWorkspace.tsx
@@ -45,6 +45,7 @@ const defaultProps: AssessmentWorkspaceProps = {
   handleDebuggerPause: () => {},
   handleDebuggerResume: () => {},
   handleDebuggerReset: () => {},
+  handlePromptAutocomplete: (row: number, col: number, callback: any) => {},
   isRunning: false,
   isDebugging: false,
   enableDebugging: false,
diff --git a/src/components/missionControl/EditingWorkspace.tsx b/src/components/missionControl/EditingWorkspace.tsx
@@ -102,6 +102,7 @@ export type DispatchProps = {
   handleDebuggerReset: () => void;
   handleUpdateCurrentAssessmentId: (assessmentId: number, questionId: number) => void;
   handleUpdateHasUnsavedChanges: (hasUnsavedChanges: boolean) => void;
+  handlePromptAutocomplete: (row: number, col: number, callback: any) => void;
 };
 
 interface IState {
@@ -182,6 +183,7 @@ class AssessmentWorkspace extends React.Component<AssessmentWorkspaceProps, ISta
               newCursorPosition: this.props.newCursorPosition,
               handleEditorUpdateBreakpoints: this.props.handleEditorUpdateBreakpoints,
               handleUpdateHasUnsavedChanges: this.props.handleUpdateHasUnsavedChanges,
+              handlePromptAutocomplete: this.props.handlePromptAutocomplete,
               isEditorAutorun: false
             }
           : undefined,
diff --git a/src/components/sourcecast/Sourcecast.tsx b/src/components/sourcecast/Sourcecast.tsx
@@ -71,6 +71,7 @@ export interface IDispatchProps {
   handleEditorEval: () => void;
   handleEditorHeightChange: (height: number) => void;
   handleEditorValueChange: (val: string) => void;
+  handlePromptAutocomplete: (row: number, col: number, callback: any) => void;
   handleEditorWidthChange: (widthChange: number) => void;
   handleEditorUpdateBreakpoints: (breakpoints: string[]) => void;
   handleExternalSelect: (externalLibraryName: ExternalLibraryName) => void;
@@ -234,6 +235,7 @@ class Sourcecast extends React.Component<ISourcecastProps> {
     };
     const sourcecastControlbarProps: ISourcecastControlbarProps = {
       handleEditorValueChange: this.props.handleEditorValueChange,
+      handlePromptAutocomplete: this.props.handlePromptAutocomplete,
       handleSetCodeDeltasToApply: this.props.handleSetCodeDeltasToApply,
       handleSetEditorReadonly: this.props.handleSetEditorReadonly,
       handleSetInputToApply: this.props.handleSetInputToApply,
diff --git a/src/components/sourcecast/SourcecastControlbar.tsx b/src/components/sourcecast/SourcecastControlbar.tsx
@@ -204,6 +204,7 @@ export interface ISourcecastControlbarProps {
   playbackStatus: PlaybackStatus;
   handleChapterSelect: (chapter: number) => void;
   handleExternalSelect: (name: ExternalLibraryName) => void;
+  handlePromptAutocomplete: (row: number, col: number, callback: any) => void;
 }
 
 export interface ISourcecastControlbarState {
diff --git a/src/components/workspace/Editor.tsx b/src/components/workspace/Editor.tsx
@@ -3,6 +3,7 @@ import AceEditor, { IAnnotation } from 'react-ace';
 import { HotKeys } from 'react-hotkeys';
 import sharedbAce from 'sharedb-ace';
 
+import { require as acequire } from 'ace-builds';
 import 'ace-builds/src-noconflict/ext-language_tools';
 import 'ace-builds/src-noconflict/ext-searchbox';
 import { createContext, getAllOccurrencesInScope, getScope } from 'js-slang';
@@ -35,6 +36,7 @@ export interface IEditorProps {
   handleEditorValueChange: (newCode: string) => void;
   handleEditorUpdateBreakpoints: (breakpoints: string[]) => void;
   handleFinishInvite?: () => void;
+  handlePromptAutocomplete: (row: number, col: number, callback: any) => void;
   handleSetWebsocketStatus?: (websocketStatus: number) => void;
   handleUpdateHasUnsavedChanges?: (hasUnsavedChanges: boolean) => void;
 }
@@ -44,12 +46,23 @@ export interface IPosition {
   column: number;
 }
 
+// This interface is actually unused but ace poorly documents this feature so
+// we leave this here for reference.
+export interface IAutocompletionResult {
+  caption: string;
+  value: string;
+  meta?: string;
+  docHTML?: string;
+  score?: number;
+}
+
 class Editor extends React.PureComponent<IEditorProps, {}> {
   public ShareAce: any;
   public AceEditor: React.RefObject<AceEditor>;
   private markerIds: number[];
   private onChangeMethod: (newCode: string) => void;
   private onValidateMethod: (annotations: IAnnotation[]) => void;
+  private completer: {};
 
   constructor(props: IEditorProps) {
     super(props);
@@ -68,6 +81,13 @@ class Editor extends React.PureComponent<IEditorProps, {}> {
         this.props.handleEditorEval();
       }
     };
+
+    this.completer = {
+      getCompletions: (editor: any, session: any, pos: any, prefix: any, callback: any) => {
+        // console.log(pos); // Cursor col is insertion location i.e. last char col + 1
+        this.props.handlePromptAutocomplete(pos.row + 1, pos.column, callback);
+      }
+    };
   }
 
   public getBreakpoints() {
@@ -117,6 +137,9 @@ class Editor extends React.PureComponent<IEditorProps, {}> {
     // Change all info annotations to error annotations
     session.on('changeAnnotation', this.handleAnnotationChange(session));
 
+    // Start autocompletion
+    acequire('ace/ext/language_tools').setCompleters([this.completer]);
+
     // Has session ID
     if (this.props.editorSessionId !== '') {
       this.handleStartCollabEditing(editor);
@@ -222,6 +245,8 @@ class Editor extends React.PureComponent<IEditorProps, {}> {
             value={this.props.editorValue}
             width="100%"
             setOptions={{
+              enableBasicAutocompletion: true,
+              enableLiveAutocompletion: true,
               fontFamily: "'Inconsolata', 'Consolas', monospace"
             }}
           />
diff --git a/src/components/workspace/__tests__/Editor.tsx b/src/components/workspace/__tests__/Editor.tsx
@@ -23,7 +23,8 @@ test('Editor renders correctly', () => {
     handleEditorUpdateBreakpoints: breakpoints => {},
     handleFinishInvite: () => {},
     handleSetWebsocketStatus: websocketStatus => {},
-    handleUpdateHasUnsavedChanges: hasUnsavedChanges => {}
+    handleUpdateHasUnsavedChanges: hasUnsavedChanges => {},
+    handlePromptAutocomplete: (row: number, col: number, callback: any) => {}
   };
   const app = <Editor {...props} />;
   const tree = shallow(app);
diff --git a/src/containers/ApplicationContainer.ts b/src/containers/ApplicationContainer.ts
@@ -6,6 +6,7 @@ import {
   changeExecTime,
   ensureLibrariesLoaded,
   externalLibrarySelect,
+  promptAutocomplete,
   WorkspaceLocations
 } from '../actions/workspaces';
 import Application, { IDispatchProps, IStateProps } from '../components/Application';
@@ -47,6 +48,8 @@ const mapDispatchToProps: MapDispatchToProps<IDispatchProps, {}> = (dispatch: Di
           workspaceLocation
         ),
       handleEditorValueChange: (val: string) => updateEditorValue(val, workspaceLocation),
+      handlePromptAutocomplete: (row: number, col: number, callback: any) =>
+        promptAutocomplete(workspaceLocation, row, col, callback),
       handleEditorUpdateBreakpoints: (breakpoints: string[]) =>
         setEditorBreakpoint(breakpoints, workspaceLocation),
       handleEnsureLibrariesLoaded: ensureLibrariesLoaded,
diff --git a/src/containers/PlaygroundContainer.ts b/src/containers/PlaygroundContainer.ts
@@ -23,6 +23,7 @@ import {
   initInvite,
   invalidEditorSessionId,
   navigateToDeclaration,
+  promptAutocomplete,
   setEditorBreakpoint,
   setEditorSessionId,
   setWebsocketStatus,
@@ -104,7 +105,9 @@ const mapDispatchToProps: MapDispatchToProps<IDispatchProps, {}> = (dispatch: Di
       handleUsingSubst: (usingSubst: boolean) => toggleUsingSubst(usingSubst),
       handleDebuggerPause: () => beginDebuggerPause(workspaceLocation),
       handleDebuggerResume: () => debuggerResume(workspaceLocation),
-      handleDebuggerReset: () => debuggerReset(workspaceLocation)
+      handleDebuggerReset: () => debuggerReset(workspaceLocation),
+      handlePromptAutocomplete: (row: number, col: number, callback: any) =>
+        promptAutocomplete(workspaceLocation, row, col, callback)
     },
     dispatch
   );
diff --git a/src/containers/academy/grading/GradingWorkspaceContainer.ts b/src/containers/academy/grading/GradingWorkspaceContainer.ts
@@ -18,6 +18,7 @@ import {
   evalTestcase,
   fetchGrading,
   navigateToDeclaration,
+  promptAutocomplete,
   setEditorBreakpoint,
   updateActiveTab,
   updateEditorValue,
@@ -101,7 +102,9 @@ const mapDispatchToProps: MapDispatchToProps<DispatchProps, {}> = (dispatch: Dis
         updateHasUnsavedChanges(workspaceLocation, unsavedChanges),
       handleDebuggerPause: () => beginDebuggerPause(workspaceLocation),
       handleDebuggerResume: () => debuggerResume(workspaceLocation),
-      handleDebuggerReset: () => debuggerReset(workspaceLocation)
+      handleDebuggerReset: () => debuggerReset(workspaceLocation),
+      handlePromptAutocomplete: (row: number, col: number, callback: any) =>
+        promptAutocomplete(workspaceLocation, row, col, callback)
     },
     dispatch
   );
diff --git a/src/containers/assessment/AssessmentWorkspaceContainer.ts b/src/containers/assessment/AssessmentWorkspaceContainer.ts
@@ -19,6 +19,7 @@ import {
   evalTestcase,
   fetchAssessment,
   navigateToDeclaration,
+  promptAutocomplete,
   setEditorBreakpoint,
   submitAnswer,
   updateActiveTab,
@@ -102,7 +103,9 @@ const mapDispatchToProps: MapDispatchToProps<DispatchProps, {}> = (dispatch: Dis
       handleUpdateCurrentAssessmentId: updateCurrentAssessmentId,
       handleDebuggerPause: () => beginDebuggerPause(workspaceLocation),
       handleDebuggerResume: () => debuggerResume(workspaceLocation),
-      handleDebuggerReset: () => debuggerReset(workspaceLocation)
+      handleDebuggerReset: () => debuggerReset(workspaceLocation),
+      handlePromptAutocomplete: (row: number, col: number, callback: any) =>
+        promptAutocomplete(workspaceLocation, row, col, callback)
     },
     dispatch
   );
diff --git a/src/containers/missionControl/EditingWorkspaceContainer.ts b/src/containers/missionControl/EditingWorkspaceContainer.ts
@@ -18,6 +18,7 @@ import {
   evalRepl,
   evalTestcase,
   navigateToDeclaration,
+  promptAutocomplete,
   setEditorBreakpoint,
   submitAnswer,
   updateEditorValue,
@@ -95,7 +96,9 @@ const mapDispatchToProps: MapDispatchToProps<DispatchProps, {}> = (dispatch: Dis
       handleUpdateCurrentAssessmentId: updateCurrentAssessmentId,
       handleDebuggerPause: () => beginDebuggerPause(workspaceLocation),
       handleDebuggerResume: () => debuggerResume(workspaceLocation),
-      handleDebuggerReset: () => debuggerReset(workspaceLocation)
+      handleDebuggerReset: () => debuggerReset(workspaceLocation),
+      handlePromptAutocomplete: (row: number, col: number, callback: any) =>
+        promptAutocomplete(workspaceLocation, row, col, callback)
     },
     dispatch
   );
diff --git a/src/containers/sourcecast/SourcecastContainer.ts b/src/containers/sourcecast/SourcecastContainer.ts
@@ -18,6 +18,7 @@ import {
   externalLibrarySelect,
   fetchSourcecastIndex,
   navigateToDeclaration,
+  promptAutocomplete,
   setCodeDeltasToApply,
   setEditorBreakpoint,
   setEditorReadonly,
@@ -112,7 +113,9 @@ const mapDispatchToProps: MapDispatchToProps<IDispatchProps, {}> = (dispatch: Di
       handleToggleEditorAutorun: () => toggleEditorAutorun(location),
       handleDebuggerPause: () => beginDebuggerPause(location),
       handleDebuggerResume: () => debuggerResume(location),
-      handleDebuggerReset: () => debuggerReset(location)
+      handleDebuggerReset: () => debuggerReset(location),
+      handlePromptAutocomplete: (row: number, col: number, callback: any) =>
+        promptAutocomplete(location, row, col, callback)
     },
     dispatch
   );
diff --git a/src/containers/sourcecast/SourcereelContainer.ts b/src/containers/sourcecast/SourcereelContainer.ts
diff --git a/src/reducers/documentation.ts b/src/reducers/documentation.ts
diff --git a/src/sagas/workspaces.ts b/src/sagas/workspaces.ts
