feat: expression string method autocomplete (#5421)

## Description

Added autocomplete support for safe string and array methods in the
expression editor, as suggested by @TrySound in PR #5403.

## Changes

- Exported `allowedStringMethods` and `allowedArrayMethods` from
`packages/sdk/src/expression.ts`
- Enhanced the expression editor's autocomplete to suggest safe methods
when typing after a variable (e.g., system)
- Methods are displayed with parentheses for clarity (e.g.,
`toLowerCase()`, `replace()`, `split()`)
- Autocomplete shows helpful labels: "string method" or "array method"

## How to Test

1. Open any project in the builder
2. Click the expression editor icon next to a text property
3. Type a variable name followed by a dot (e.g., `system.`)
4. You should see autocomplete suggestions for safe string methods like
`toLowerCase()`, `replace()`, `split()`, etc.
5. Type a few letters to filter (e.g., `title.to` shows only methods
starting with "to")
6. Select a method and it will be inserted with parentheses

## Related

- Builds on PR #5403 which enabled these safe methods in the expression
engine

<img width="343" height="204" alt="Bildschirmfoto 2025-10-09 um 22 33
03"
src="https://github.com/user-attachments/assets/206a36e8-1d68-4e2a-a045-1f9e95067a28"
/>

Author: zehjotkah

apps/builder/app/builder/shared/expression-editor.tsx

@@ -27,7 +27,12 @@ import {
 } from "@codemirror/autocomplete";
 import { javascript } from "@codemirror/lang-javascript";
 import { textVariants, css, rawTheme } from "@webstudio-is/design-system";
-import { decodeDataVariableId, lintExpression } from "@webstudio-is/sdk";
+import {
+  decodeDataVariableId,
+  lintExpression,
+  allowedStringMethods,
+  allowedArrayMethods,
+} from "@webstudio-is/sdk";
 import {
   EditorContent,
   EditorDialog,
@@ -244,6 +249,56 @@ const scopeCompletionSource: CompletionSource = (context) => {
       },
     });
   }
+
+  // Add safe string and array method completions
+  if (path.path.length > 0) {
+    const methodOptions: Completion[] = [];
+
+    // Determine if target is likely a string or array based on its value
+    const isString = typeof target === "string";
+    const isArray = Array.isArray(target);
+
+    // Add string methods only if target is a string
+    if (isString) {
+      for (const method of allowedStringMethods) {
+        if (method.toLowerCase().includes(path.name.toLowerCase())) {
+          methodOptions.push({
+            label: `${method}()`,
+            detail: "string method",
+            type: "method",
+            apply: (view, completion, from, to) => {
+              view.dispatch({
+                ...insertCompletionText(view.state, `${method}()`, from, to),
+                annotations: pickedCompletion.of(completion),
+              });
+            },
+          });
+        }
+      }
+    }
+
+    // Add array methods if target is an array
+    if (isArray) {
+      for (const method of allowedArrayMethods) {
+        if (method.toLowerCase().includes(path.name.toLowerCase())) {
+          methodOptions.push({
+            label: `${method}()`,
+            detail: "array method",
+            type: "method",
+            apply: (view, completion, from, to) => {
+              view.dispatch({
+                ...insertCompletionText(view.state, `${method}()`, from, to),
+                annotations: pickedCompletion.of(completion),
+              });
+            },
+          });
+        }
+      }
+    }
+
+    options = [...options, ...methodOptions];
+  }
+
   return {
     from: context.pos - path.name.length,
     filter: false,

packages/sdk/src/expression.ts

@@ -29,7 +29,7 @@ type ExpressionVisitor = {
   [K in Expression["type"]]: (node: Extract<Expression, { type: K }>) => void;
 };
 
-const allowedStringMethods = new Set([
+export const allowedStringMethods = new Set([
   "toLowerCase",
   "replace",
   "split",
@@ -42,7 +42,7 @@ const allowedStringMethods = new Set([
   "toLocaleUpperCase",
 ]);
 
-const allowedArrayMethods = new Set(["at", "includes", "join", "slice"]);
+export const allowedArrayMethods = new Set(["at", "includes", "join", "slice"]);
 
 export const lintExpression = ({
   expression,