feat: improve completion provider (#1364)

source/javascripts/components/unified-editor/StepConfigDrawer/components/StepCodeEditor.tsx

@@ -13,8 +13,6 @@ const EDITOR_OPTIONS = {
   contextmenu: false,
   minimap: { enabled: false },
   padding: { top: 16, bottom: 16 },
-  suggestOnTriggerCharacters: true,
-  quickSuggestions: false,
 };
 
 type Props = {

source/javascripts/hooks/useMonacoCompletionProvider.ts

@@ -15,12 +15,26 @@ const useEnvVarsAndSecretsCompletionProvider = ({ monaco, language }: Props) =>
     () => ({
       triggerCharacters: ['$'],
       provideCompletionItems: (model, position) => {
-        const word = model.getWordUntilPosition(position);
+        const wordUntilPosition = model.getWordUntilPosition(position);
+        const { startColumn, endColumn } = wordUntilPosition;
+
+        const { lineNumber } = position;
+        const lineContent = model.getLineContent(lineNumber);
+        // NOTE Needs to be -2 because column is 1-based, and chars are 0-based
+        // -1 would get us the char at the cursor
+        const prefixPos = startColumn - 2;
+        const prefixChar = lineContent.charAt(prefixPos);
+
+        // Word doesn't have $ prefix, so it's not an env var or secret
+        if (prefixChar !== '$') {
+          return { suggestions: [] };
+        }
+
         const range = {
-          startLineNumber: position.lineNumber,
-          startColumn: word.startColumn,
-          endLineNumber: position.lineNumber,
-          endColumn: word.endColumn,
+          startLineNumber: lineNumber,
+          startColumn,
+          endLineNumber: lineNumber,
+          endColumn,
         };
 
         const suggestions: languages.CompletionItem[] = items.map((item) => ({