Autocompletion for React Ace editor

* enable autocompletion

* update snapshot

* create vanilla source mode based on ace javascript mode

* formatted custom source mode

* restore mock env file

* add description in source mode file

* restore env.example

* update snapshot

* change object keys to non-strings and delete worker file

* merge

* merge

* merge

* Add link to source.js

* Add URL to original file in react-ace, to serve as a reference

Co-authored-by: alcen <49450743+alcen@users.noreply.github.com>

Author: BobbyZhouZijian

.env.example

@@ -2,4 +2,4 @@ REACT_APP_LUMINUS_CLIENT_ID=your_luminus_client_id_here
 REACT_APP_VERSION=$npm_package_version
 REACT_APP_BACKEND_URL=http://localhost:4001
 REACT_APP_USE_BACKEND=TRUE
-REACT_APP_CHATKIT_INSTANCE_LOCATOR=instance_locator_here_otherwise_empty_string
+REACT_APP_CHATKIT_INSTANCE_LOCATOR=instance_locator_here_otherwise_empty_string

src/components/__tests__/__snapshots__/NavigationBar.tsx.snap

@@ -9,34 +9,22 @@ exports[`NavigationBar renders "Not logged in" correctly 1`] = `
         Source Academy
       </Blueprint3.NavbarHeading>
     </NavLink>
-    <a className=\\"NavigationBar__link\\" href=\\"https://luminus.nus.edu.sg/modules/57290e55-335a-4c09-b904-a795572d6cda\\" target=\\"_blank\\" rel=\\"noopener noreferrer\\">
+    <a className=\\"NavigationBar__link\\" href=\\"https://luminus.nus.edu.sg/modules/b1340bf4-fc99-4898-be2a-2c20e38c065f/announcements/active\\" target=\\"_blank\\" rel=\\"noopener noreferrer\\">
       <Blueprint3.Button minimal={true}>
         <Blueprint3.Icon icon=\\"envelope\\" />
         <div className=\\"navbar-button-text hidden-xs hidden-sm\\">
           News
         </div>
       </Blueprint3.Button>
     </a>
-    <a className=\\"NavigationBar__link\\" href=\\"https://piazza.com/class/juazn2axpf35wp\\" target=\\"_blank\\" rel=\\"noopener noreferrer\\">
+    <a className=\\"NavigationBar__link\\" href=\\"https://luminus.nus.edu.sg/modules/b1340bf4-fc99-4898-be2a-2c20e38c065f/forum\\" target=\\"_blank\\" rel=\\"noopener noreferrer\\">
       <Blueprint3.Button minimal={true}>
         <Blueprint3.Icon icon=\\"chat\\" />
         <div className=\\"navbar-button-text hidden-xs hidden-sm\\">
           Forum
         </div>
       </Blueprint3.Button>
     </a>
-    <NavLink activeClassName=\\"bp3-active\\" className=\\"NavigationBar__link bp3-button bp3-minimal\\" to=\\"/material\\" aria-current=\\"page\\">
-      <Blueprint3.Icon icon=\\"book\\" />
-      <div className=\\"navbar-button-text hidden-xs hidden-sm\\">
-        Material
-      </div>
-    </NavLink>
-    <NavLink activeClassName=\\"bp3-active\\" className=\\"NavigationBar__link bp3-button bp3-minimal\\" to=\\"/sourcecast\\" aria-current=\\"page\\">
-      <Blueprint3.Icon icon=\\"music\\" />
-      <div className=\\"navbar-button-text hidden-xs hidden-sm\\">
-        Sourcecast
-      </div>
-    </NavLink>
     <NavLink activeClassName=\\"bp3-active\\" className=\\"NavigationBar__link bp3-button bp3-minimal\\" to=\\"/playground\\" aria-current=\\"page\\">
       <Blueprint3.Icon icon=\\"code\\" />
       <div className=\\"navbar-button-text hidden-xs hidden-sm\\">
@@ -71,34 +59,22 @@ exports[`NavigationBar renders correctly with username 1`] = `
         Source Academy
       </Blueprint3.NavbarHeading>
     </NavLink>
-    <a className=\\"NavigationBar__link\\" href=\\"https://luminus.nus.edu.sg/modules/57290e55-335a-4c09-b904-a795572d6cda\\" target=\\"_blank\\" rel=\\"noopener noreferrer\\">
+    <a className=\\"NavigationBar__link\\" href=\\"https://luminus.nus.edu.sg/modules/b1340bf4-fc99-4898-be2a-2c20e38c065f/announcements/active\\" target=\\"_blank\\" rel=\\"noopener noreferrer\\">
       <Blueprint3.Button minimal={true}>
         <Blueprint3.Icon icon=\\"envelope\\" />
         <div className=\\"navbar-button-text hidden-xs hidden-sm\\">
           News
         </div>
       </Blueprint3.Button>
     </a>
-    <a className=\\"NavigationBar__link\\" href=\\"https://piazza.com/class/juazn2axpf35wp\\" target=\\"_blank\\" rel=\\"noopener noreferrer\\">
+    <a className=\\"NavigationBar__link\\" href=\\"https://luminus.nus.edu.sg/modules/b1340bf4-fc99-4898-be2a-2c20e38c065f/forum\\" target=\\"_blank\\" rel=\\"noopener noreferrer\\">
       <Blueprint3.Button minimal={true}>
         <Blueprint3.Icon icon=\\"chat\\" />
         <div className=\\"navbar-button-text hidden-xs hidden-sm\\">
           Forum
         </div>
       </Blueprint3.Button>
     </a>
-    <NavLink activeClassName=\\"bp3-active\\" className=\\"NavigationBar__link bp3-button bp3-minimal\\" to=\\"/material\\" aria-current=\\"page\\">
-      <Blueprint3.Icon icon=\\"book\\" />
-      <div className=\\"navbar-button-text hidden-xs hidden-sm\\">
-        Material
-      </div>
-    </NavLink>
-    <NavLink activeClassName=\\"bp3-active\\" className=\\"NavigationBar__link bp3-button bp3-minimal\\" to=\\"/sourcecast\\" aria-current=\\"page\\">
-      <Blueprint3.Icon icon=\\"music\\" />
-      <div className=\\"navbar-button-text hidden-xs hidden-sm\\">
-        Sourcecast
-      </div>
-    </NavLink>
     <NavLink activeClassName=\\"bp3-active\\" className=\\"NavigationBar__link bp3-button bp3-minimal\\" to=\\"/playground\\" aria-current=\\"page\\">
       <Blueprint3.Icon icon=\\"code\\" />
       <div className=\\"navbar-button-text hidden-xs hidden-sm\\">

src/components/workspace/Editor.tsx

@@ -3,8 +3,9 @@ import AceEditor, { Annotation } from 'react-ace';
 import { HotKeys } from 'react-hotkeys';
 import sharedbAce from 'sharedb-ace';
 
+import 'brace/ext/language_tools';
 import 'brace/ext/searchbox';
-import 'brace/mode/javascript';
+import './editorMode/source';
 import './editorTheme/source';
 
 import { LINKS } from '../../utils/constants';
@@ -150,14 +151,17 @@ class Editor extends React.PureComponent<IEditorProps, {}> {
             fontSize={17}
             height="100%"
             highlightActiveLine={false}
-            mode="javascript"
+            mode="source"
             onChange={this.onChangeMethod}
             onValidate={this.onValidateMethod}
             theme="source"
             value={this.props.editorValue}
             width="100%"
             setOptions={{
-              fontFamily: "'Inconsolata', 'Consolas', monospace"
+              fontFamily: "'Inconsolata', 'Consolas', monospace",
+              enableBasicAutocompletion: true,
+              enableLiveAutocompletion: true,
+              enableSnippets: true
             }}
           />
         </div>

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=\\"javascript\\" onChange={[Function]} onValidate={[Function]} theme=\\"source\\" value=\\"\\" width=\\"100%\\" setOptions={{...}} name=\\"brace-editor\\" focus={false} showGutter={true} onPaste={{...}} onLoad={{...}} onScroll={{...}} minLines={{...}} maxLines={{...}} readOnly={false} showPrintMargin={true} tabSize={4} cursorStart={1} style={{...}} scrollMargin={{...}} wrapEnabled={false} enableBasicAutocompletion={false} enableLiveAutocompletion={false} />
+    <ReactAce className=\\"react-ace\\" commands={{...}} editorProps={{...}} markers={{...}} fontSize={17} height=\\"100%\\" highlightActiveLine={false} mode=\\"source\\" onChange={[Function]} onValidate={[Function]} theme=\\"source\\" value=\\"\\" width=\\"100%\\" setOptions={{...}} name=\\"brace-editor\\" focus={false} showGutter={true} onPaste={{...}} onLoad={{...}} onScroll={{...}} minLines={{...}} maxLines={{...}} readOnly={false} showPrintMargin={true} tabSize={4} cursorStart={1} style={{...}} scrollMargin={{...}} wrapEnabled={false} enableBasicAutocompletion={false} enableLiveAutocompletion={false} />
   </div>
 </HotKeys>"
 `;