adds initial autocomplete

Author: khanniie

client/modules/IDE/components/Editor/codemirror.js

@@ -1,6 +1,6 @@
 import { useRef, useEffect } from 'react';
 import { EditorView, lineNumbers as lineNumbersExt } from '@codemirror/view';
-import { closeBrackets } from '@codemirror/autocomplete';
+import { autocompletion, closeBrackets } from '@codemirror/autocomplete';
 
 // TODO: Check what the v6 variants of these addons are.
 // import 'codemirror/addon/search/searchcursor';
@@ -141,6 +141,18 @@ export default function useCodeMirror({
       reconfigureEffect
     });
   }, [autocloseBracketsQuotes]);
+  useEffect(() => {
+    const reconfigureEffect = (fileState) =>
+      fileState.autocompleteCpt.reconfigure(
+        autocompleteHinter ? autocompletion() : []
+      );
+    updateFileStates({
+      fileStates: fileStates.current,
+      cmView: cmView.current,
+      file,
+      reconfigureEffect
+    });
+  }, [autocompleteHinter]);
 
   // Initializes the files as CodeMirror states.
   function initializeDocuments() {
@@ -160,6 +172,7 @@ export default function useCodeMirror({
             linewrap,
             lineNumbers,
             autocloseBracketsQuotes,
+            autocomplete: autocompleteHinter,
             onUpdateLinting,
             onViewUpdate
           }

client/modules/IDE/components/Editor/stateUtils.js

@@ -21,7 +21,11 @@ import {
   defaultHighlightStyle
 } from '@codemirror/language';
 import { highlightSelectionMatches } from '@codemirror/search';
-import { closeBrackets, closeBracketsKeymap } from '@codemirror/autocomplete';
+import {
+  autocompletion,
+  closeBrackets,
+  closeBracketsKeymap
+} from '@codemirror/autocomplete';
 import {
   defaultKeymap,
   history,
@@ -265,13 +269,15 @@ export function createNewFileState(filename, document, settings) {
   const {
     linewrap,
     lineNumbers,
+    autocomplete,
     autocloseBracketsQuotes,
     onUpdateLinting,
     onViewUpdate
   } = settings;
   const lineNumbersCpt = new Compartment();
   const lineWrappingCpt = new Compartment();
   const closeBracketsCpt = new Compartment();
+  const autocompleteCpt = new Compartment();
 
   // Depending on the file mode, we have a different tidier function.
   const mode = getFileMode(filename);
@@ -294,6 +300,7 @@ export function createNewFileState(filename, document, settings) {
     lineNumbersCpt.of(lineNumbers ? lineNumbersExt() : []),
     lineWrappingCpt.of(linewrap ? EditorView.lineWrapping : []),
     closeBracketsCpt.of(autocloseBracketsQuotes ? closeBrackets() : []),
+    autocompleteCpt.of(autocomplete ? autocompletion() : []),
 
     // Everything below here should always be on.
     history(),
@@ -352,7 +359,13 @@ export function createNewFileState(filename, document, settings) {
   }
 
   const cmState = EditorState.create(stateOptions);
-  return { cmState, lineNumbersCpt, lineWrappingCpt, closeBracketsCpt };
+  return {
+    cmState,
+    lineNumbersCpt,
+    lineWrappingCpt,
+    closeBracketsCpt,
+    autocompleteCpt
+  };
 }
 
 /**