From 159b328587f3c57c73ae77c2a0c5d5c6ecc330aa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Wed, 17 Jan 2024 11:02:40 +0100
Subject: [PATCH] fix(editor): Capture indexed access expressions when building
 completions (#8331)

---
 .../completions/__tests__/completions.test.ts         | 11 +++++++++++
 .../codemirror/completions/datatype.completions.ts    |  1 +
 .../src/plugins/codemirror/completions/utils.ts       |  3 +--
 3 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/packages/editor-ui/src/plugins/codemirror/completions/__tests__/completions.test.ts b/packages/editor-ui/src/plugins/codemirror/completions/__tests__/completions.test.ts
index 1e17c4f2a3aca..2ca9c0bf9c8e9 100644
--- a/packages/editor-ui/src/plugins/codemirror/completions/__tests__/completions.test.ts
+++ b/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;
diff --git a/packages/editor-ui/src/plugins/codemirror/completions/datatype.completions.ts b/packages/editor-ui/src/plugins/codemirror/completions/datatype.completions.ts
index 2a1728a97fa5d..fc19938242026 100644
--- a/packages/editor-ui/src/plugins/codemirror/completions/datatype.completions.ts
+++ b/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.
diff --git a/packages/editor-ui/src/plugins/codemirror/completions/utils.ts b/packages/editor-ui/src/plugins/codemirror/completions/utils.ts
index 169f4d7296741..abec2b58bebbb 100644
--- a/packages/editor-ui/src/plugins/codemirror/completions/utils.ts
+++ b/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 $