fix(editor): Capture indexed access expressions when building completions (#8331)

packages/editor-ui/src/plugins/codemirror/completions/__tests__/completions.test.ts

@@ -197,6 +197,17 @@ describe('Resolution-based completions', () => {
 		});
 	});
 
+	describe('indexed access completions', () => {
+		test('should return string completions for indexed access that resolves to string literal: {{ "abc"[0].| }}', () => {
+			// @ts-expect-error Spied function is mistyped
+			resolveParameterSpy.mockReturnValueOnce('a');
+
+			expect(completions('{{ "abc"[0].| }}')).toHaveLength(
+				natives('string').length + extensions('string').length,
+			);
+		});
+	});
+
 	describe('complex expression completions', () => {
 		const resolveParameterSpy = vi.spyOn(workflowHelpers, 'resolveParameter');
 		const { $input } = mockProxy;

packages/editor-ui/src/plugins/codemirror/completions/datatype.completions.ts

@@ -503,6 +503,7 @@ const regexes = {
 	doubleQuoteStringLiteral: /(".+")\.([^"{\s])*/, // "abc".
 	dateLiteral: /\(?new Date\(\(?.*?\)\)?\.([^{\s])*/, // new Date(). or (new Date()).
 	arrayLiteral: /(\[.+\])\.([^{\s])*/, // [1, 2, 3].
+	indexedAccess: /([^{\s]+\[.+\])\.([^{\s])*/, // 'abc'[0]. or 'abc'.split('')[0] or similar ones
 	objectLiteral: /\(\{.*\}\)\.([^{\s])*/, // ({}).
 
 	mathGlobal: /Math\.([^{\s])*/, // Math.

packages/editor-ui/src/plugins/codemirror/completions/utils.ts

@@ -43,9 +43,8 @@ export function longestCommonPrefix(...strings: string[]) {
 // suggestions can be matched based on it.
 function extractSubExpression(userInput: string): string {
 	const dollarSignIndex = userInput.indexOf('$');
-	// If it's not a dollar sign expression just strip parentheses
 	if (dollarSignIndex === -1) {
-		userInput = userInput.replace(/^.+(\(|\[|{)/, '');
+		return userInput;
 	} else if (!stringLiteralRegex.test(userInput)) {
 		// If there is a dollar sign in the input and input is not a string literal,
 		// extract part of following the last $