use autocomplete in json request body also

Author: jsajal

src/components/atoms/Editor.js

@@ -1,18 +1,58 @@
 import React, { useRef, useEffect, useState } from 'react';
 
 import { basicSetup } from 'codemirror';
-import { EditorState, Prec } from '@codemirror/state';
-import { EditorView, keymap, lineNumbers } from '@codemirror/view';
+import { EditorState, Compartment } from '@codemirror/state';
+import { EditorView, keymap, lineNumbers, tooltips } from '@codemirror/view';
 import { indentWithTab, history } from '@codemirror/commands';
 import { json } from '@codemirror/lang-json';
 import { defaultKeymap } from '@codemirror/commands';
 import { syntaxHighlighting, defaultHighlightStyle } from '@codemirror/language';
+import { isEqual } from 'lodash';
+import { autocompletion, CompletionContext } from '@codemirror/autocomplete';
+
+// Function to dynamically generate autocomplete options
+const createAutocompleteSource = (options) => {
+  return (context) => {
+    let word = context.matchBefore(/\{\{\w*$/);
+    if (!word) return null;
+
+    return {
+      from: word.from,
+      options: options.map((option) => ({ label: `{{${option}}}`, type: 'keyword' })),
+    };
+  };
+};
+
+// Create a Compartment for autocomplete
+const autocompleteCompartment = new Compartment();
+
+// Function to update autocomplete options
+const updateAutocompleteOptions = (view, newOptions) => {
+  view.dispatch({
+    effects: autocompleteCompartment.reconfigure(autocompletion({ override: [createAutocompleteSource(newOptions)] })),
+  });
+};
+
+// Custom styles to hide scrollbar
+const hideScrollbar = EditorView.theme({
+  '.cm-scroller': {
+    overflowX: 'auto',
+    overflowY: 'hidden',
+    whiteSpace: 'nowrap',
+    scrollbarWidth: 'none' /* For Firefox */,
+  },
+});
 
 export const Editor = ({ ...props }) => {
   const editor = useRef();
   const [view, setView] = useState(null);
+  const [dynamicOptions, setDynamicOptions] = useState([]);
 
   if (view) {
+    if (!isEqual(dynamicOptions, props.completionOptions)) {
+      updateAutocompleteOptions(view, props.completionOptions);
+      setDynamicOptions(props.completionOptions);
+    }
     if (props.value != view.state.doc.toString()) {
       view.dispatch({ changes: { from: 0, to: view.state.doc.length, insert: props.value } });
     }
@@ -35,6 +75,11 @@ export const Editor = ({ ...props }) => {
         onUpdate,
         EditorState.readOnly.of(props.readOnly || false),
         history(),
+        hideScrollbar,
+        autocompleteCompartment.of(autocompletion({ override: [createAutocompleteSource(dynamicOptions)] })),
+        tooltips({
+          parent: document.body,
+        }),
       ],
     });
 

src/components/molecules/flow/nodes/RequestBody.js

@@ -10,6 +10,9 @@ import NodeHorizontalDivider from 'components/atoms/flow/NodeHorizontalDivider';
 import TextInputWithLabel from 'components/atoms/common/TextInputWithLabel';
 import Button from 'components/atoms/common/Button';
 import { BUTTON_TYPES } from 'constants/Common';
+import useCollectionStore from 'stores/CollectionStore';
+import { useTabStore } from 'stores/TabStore';
+import { cloneDeep } from 'lodash';
 
 const requestBodyTypeOptions = ['None', 'form-data', 'raw-json'];
 
@@ -91,6 +94,20 @@ const RequestBody = ({ nodeId, nodeData }) => {
     }
   };
 
+  const getActiveVariables = () => {
+    const collectionId = useCanvasStore.getState().collectionId;
+    if (collectionId) {
+      const activeEnv = useCollectionStore
+        .getState()
+        .collections.find((c) => c.id === collectionId)
+        ?.environments.find((e) => e.name === useTabStore.getState().selectedEnv);
+      if (activeEnv) {
+        return Object.keys(cloneDeep(activeEnv.variables));
+      }
+    }
+    return [];
+  };
+
   return (
     <>
       <div className='flex items-center justify-between p-4 bg-background'>
@@ -137,6 +154,7 @@ const RequestBody = ({ nodeId, nodeData }) => {
                   onChange={(e) => handleRawJson(e)}
                   value={nodeData.requestBody.body}
                   classes={'w-full max-h-96'}
+                  completionOptions={getActiveVariables()}
                 />
               </div>
               <Button