Add Features: Refactoring and Variable Highlighting (source-academy#1037)

* Add Refactoring functionality: Ctrl-M/Cmd-M

* Add variable highlighting

Author: Caephler

src/components/workspace/AceRange.tsx

@@ -0,0 +1,9 @@
+/***
+ * We need access to the Range class in the Ace Editor to create our own ranges, and
+ * this is the only way to do it.
+ */
+const ace = (() => {
+  return (window as any).ace;
+})() as any;
+const { Range } = ace.acequire('ace/range');
+export default Range;

src/components/workspace/Editor.tsx

@@ -5,9 +5,11 @@ import sharedbAce from 'sharedb-ace';
 
 import 'ace-builds/src-noconflict/ext-language_tools';
 import 'ace-builds/src-noconflict/ext-searchbox';
+import { createContext, getAllOccurrencesInScope } from 'js-slang';
 import { HighlightRulesSelector, ModeSelector } from 'js-slang/dist/editors/ace/modes/source';
 import 'js-slang/dist/editors/ace/theme/source';
 import { LINKS } from '../../utils/constants';
+import AceRange from './AceRange';
 import { checkSessionIdExists } from './collabEditing/helper';
 
 /**
@@ -45,18 +47,21 @@ export interface IPosition {
 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;
 
   constructor(props: IEditorProps) {
     super(props);
     this.AceEditor = React.createRef();
     this.ShareAce = null;
+    this.markerIds = [];
     this.onChangeMethod = (newCode: string) => {
       if (this.props.handleUpdateHasUnsavedChanges) {
         this.props.handleUpdateHasUnsavedChanges(true);
       }
       this.props.handleEditorValueChange(newCode);
+      this.handleVariableHighlighting();
     };
     this.onValidateMethod = (annotations: IAnnotation[]) => {
       if (this.props.isEditorAutorun && annotations.length === 0) {
@@ -116,6 +121,8 @@ class Editor extends React.PureComponent<IEditorProps, {}> {
     if (this.props.editorSessionId !== '') {
       this.handleStartCollabEditing(editor);
     }
+
+    this.handleVariableHighlighting();
   }
 
   public componentWillUnmount() {
@@ -181,6 +188,14 @@ class Editor extends React.PureComponent<IEditorProps, {}> {
                   mac: 'Command-B'
                 },
                 exec: this.handleNavigate
+              },
+              {
+                name: 'refactor',
+                bindKey: {
+                  win: 'Ctrl-M',
+                  mac: 'Command-M'
+                },
+                exec: this.handleRefactor
               }
             ]}
             editorProps={{
@@ -193,6 +208,7 @@ class Editor extends React.PureComponent<IEditorProps, {}> {
             highlightActiveLine={false}
             mode={this.chapterNo()} // select according to props.sourceChapter
             onChange={this.onChangeMethod}
+            onCursorChange={this.handleVariableHighlighting}
             onValidate={this.onValidateMethod}
             theme="source"
             value={this.props.editorValue}
@@ -230,6 +246,59 @@ class Editor extends React.PureComponent<IEditorProps, {}> {
     }
   };
 
+  private handleRefactor = () => {
+    const editor = (this.AceEditor.current as any).editor;
+    if (!editor) {
+      return;
+    }
+    const code = this.props.editorValue;
+    const chapter = this.props.sourceChapter;
+    const position = editor.getCursorPosition();
+
+    const sourceLocations = getAllOccurrencesInScope(code, createContext(chapter), {
+      line: position.row + 1, // getCursorPosition returns 0-indexed row, function here takes in 1-indexed row
+      column: position.column
+    });
+
+    const selection = editor.getSelection();
+    const ranges = sourceLocations.map(
+      loc => new AceRange(loc.start.line - 1, loc.start.column, loc.end.line - 1, loc.end.column)
+    );
+    ranges.forEach(range => selection.addRange(range));
+  };
+
+  private handleVariableHighlighting = () => {
+    // using Ace Editor's way of highlighting as seen here: https://github.com/ajaxorg/ace/blob/master/lib/ace/editor.js#L497
+    // We use async blocks so we don't block the browser during editing
+
+    setTimeout(() => {
+      const editor = (this.AceEditor.current as any).editor;
+      const session = editor.session;
+      const code = this.props.editorValue;
+      const chapterNumber = this.props.sourceChapter;
+      const position = editor.getCursorPosition();
+      if (!session || !session.bgTokenizer) {
+        return;
+      }
+      this.markerIds.forEach(id => {
+        session.removeMarker(id);
+      });
+      const ranges = getAllOccurrencesInScope(code, createContext(chapterNumber), {
+        line: position.row + 1,
+        column: position.column
+      }).map(
+        loc => new AceRange(loc.start.line - 1, loc.start.column, loc.end.line - 1, loc.end.column)
+      );
+
+      const markerType = 'ace_variable_highlighting';
+      const markerIds = ranges.map(range => {
+        // returns the marker ID for removal later
+        return session.addMarker(range, markerType, 'text');
+      });
+      this.markerIds = markerIds;
+    }, 10);
+  };
+
   private handleGutterClick = (e: any) => {
     const target = e.domEvent.target;
     if (

src/components/workspace/__tests__/__snapshots__/Editor.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Editor renders correctly 1`] = `
 "<HotKeys className=\\"Editor\\" handlers={{...}}>
   <div className=\\"row editor-react-ace\\">
-    <ReactAce className=\\"react-ace\\" commands={{...}} editorProps={{...}} markers={{...}} fontSize={17} height=\\"100%\\" highlightActiveLine={false} mode=\\"source1\\" onChange={[Function]} onValidate={[Function]} theme=\\"source\\" value=\\"\\" width=\\"100%\\" setOptions={{...}} name=\\"ace-editor\\" focus={false} enableSnippets={false} showGutter={true} onPaste={{...}} onLoad={{...}} onScroll={{...}} minLines={{...}} maxLines={{...}} readOnly={false} showPrintMargin={true} tabSize={4} cursorStart={1} style={{...}} scrollMargin={{...}} wrapEnabled={false} enableBasicAutocompletion={false} enableLiveAutocompletion={false} placeholder={{...}} navigateToFileEnd={true} />
+    <ReactAce className=\\"react-ace\\" commands={{...}} editorProps={{...}} markers={{...}} fontSize={17} height=\\"100%\\" highlightActiveLine={false} mode=\\"source1\\" onChange={[Function]} onCursorChange={[Function]} onValidate={[Function]} theme=\\"source\\" value=\\"\\" width=\\"100%\\" setOptions={{...}} name=\\"ace-editor\\" focus={false} enableSnippets={false} showGutter={true} onPaste={{...}} onLoad={{...}} onScroll={{...}} minLines={{...}} maxLines={{...}} readOnly={false} showPrintMargin={true} tabSize={4} cursorStart={1} style={{...}} scrollMargin={{...}} wrapEnabled={false} enableBasicAutocompletion={false} enableLiveAutocompletion={false} placeholder={{...}} navigateToFileEnd={true} />
   </div>
 </HotKeys>"
 `;

src/styles/_variableHighlighting.scss

@@ -0,0 +1,6 @@
+.ace_variable_highlighting {
+  z-index: 4;
+  position: absolute;
+  box-sizing: border-box;
+  border: 1px dashed rgba(255, 255, 255, 0.6);
+}

src/styles/index.scss

@@ -30,5 +30,6 @@
 @import 'playground';
 @import 'sourcereel';
 @import 'sourcecast';
+@import 'variableHighlighting';
 @import 'workspaceGreen';
 @import 'workspace';