Introduce String Template Support

workspaces/ballerina/ballerina-side-panel/src/components/editors/ExpandedEditor/modes/TemplateMode.tsx

@@ -26,6 +26,7 @@ import { MarkdownPreview } from "../controls/MarkdownPreview";
 import { transformExpressionToMarkdown } from "../utils/transformToMarkdown";
 import { useFormContext } from "../../../../context/form";
 import { ErrorBanner } from "@wso2/ui-toolkit";
+import { RawTemplateEditorConfig } from "../../MultiModeExpressionEditor/Configurations";
 
 const ExpressionContainer = styled.div`
     width: 100%;
@@ -150,6 +151,7 @@ export const TemplateMode: React.FC<EditorModeExpressionProps> = ({
                         onEditorViewReady={setEditorView}
                         toolbarRef={toolbarRef}
                         enableListContinuation={true}
+                        configuration={new RawTemplateEditorConfig()}
                     />
                 </ExpressionContainer>
             )}

workspaces/ballerina/ballerina-side-panel/src/components/editors/ExpressionEditor.tsx

@@ -449,26 +449,7 @@ export const ExpressionEditor = (props: ExpressionEditorProps) => {
             setInputMode(InputMode.EXP);
             return;
         }
-        if (newInputMode === InputMode.TEXT
-            && typeof initialFieldValue.current === 'string'
-            && initialFieldValue.current.trim() !== ''
-            && !(initialFieldValue.current.trim().startsWith("\"")
-                && initialFieldValue.current.trim().endsWith("\"")
-            )
-        ) {
-            setInputMode(InputMode.EXP)
-        } else if (newInputMode === InputMode.TEMPLATE) {
-            if (sanitizedExpression && rawExpression) {
-                const sanitized = sanitizedExpression(initialFieldValue.current as string);
-                if (sanitized !== initialFieldValue.current || !initialFieldValue.current || initialFieldValue.current.trim() === '') {
-                    setInputMode(InputMode.TEMPLATE);
-                } else {
-                    setInputMode(InputMode.EXP);
-                }
-            }
-        } else {
-            setInputMode(newInputMode);
-        }
+       setInputMode(newInputMode)
     }, [field?.valueTypeConstraint, recordTypeField]);
 
     const handleFocus = async (controllerOnChange?: (value: string) => void) => {
@@ -581,14 +562,6 @@ export const ExpressionEditor = (props: ExpressionEditorProps) => {
             return;
         }
 
-        // Auto-add quotes when switching from TEXT to EXP if not present
-        if (inputMode === InputMode.TEXT && value === InputMode.EXP) {
-            if (currentValue && typeof currentValue === 'string' &&
-                !currentValue.startsWith('"') && !currentValue.endsWith('"')) {
-                setValue(key, `"${currentValue}"`);
-            }
-        }
-
         setInputMode(value);
     };
 
@@ -698,14 +671,13 @@ export const ExpressionEditor = (props: ExpressionEditorProps) => {
                         <div>
                             <ExpressionField
                                 inputMode={inputMode}
+                                primaryMode={getInputModeFromTypes(field.valueTypeConstraint)}
                                 name={name}
                                 value={value}
                                 completions={completions}
                                 fileName={effectiveFileName}
                                 targetLineRange={effectiveTargetLineRange}
                                 autoFocus={recordTypeField ? false : autoFocus}
-                                sanitizedExpression={inputMode === InputMode.TEMPLATE ? sanitizedExpression : undefined}
-                                rawExpression={inputMode === InputMode.TEMPLATE ? rawExpression : undefined}
                                 ariaLabel={field.label}
                                 placeholder={placeholder}
                                 onChange={async (updatedValue: string, updatedCursorPosition: number) => {
@@ -714,13 +686,12 @@ export const ExpressionEditor = (props: ExpressionEditorProps) => {
                                     setFormDiagnostics([]);
                                     // Use ref to get current mode (not stale closure value)
                                     const currentMode = inputModeRef.current;
-                                    const rawValue = currentMode === InputMode.TEMPLATE && rawExpression ? rawExpression(updatedValue) : updatedValue;
 
-                                    onChange(rawValue);
+                                    onChange(updatedValue);
                                     if (getExpressionEditorDiagnostics && (currentMode === InputMode.EXP || currentMode === InputMode.TEMPLATE)) {
                                         getExpressionEditorDiagnostics(
-                                            (required ?? !field.optional) || rawValue !== '',
-                                            rawValue,
+                                            (required ?? !field.optional) || updatedValue !== '',
+                                            updatedValue,
                                             key,
                                             getPropertyFromFormField(field)
                                         );
@@ -729,18 +700,18 @@ export const ExpressionEditor = (props: ExpressionEditorProps) => {
                                     // Check if the current character is a trigger character
                                     const triggerCharacter =
                                         updatedCursorPosition > 0
-                                            ? triggerCharacters.find((char) => rawValue[updatedCursorPosition - 1] === char)
+                                            ? triggerCharacters.find((char) => updatedValue[updatedCursorPosition - 1] === char)
                                             : undefined;
                                     if (triggerCharacter) {
                                         await retrieveCompletions(
-                                            rawValue,
+                                            updatedValue,
                                             getPropertyFromFormField(field),
                                             updatedCursorPosition,
                                             triggerCharacter
                                         );
                                     } else {
                                         await retrieveCompletions(
-                                            rawValue,
+                                            updatedValue,
                                             getPropertyFromFormField(field),
                                             updatedCursorPosition
                                         );

workspaces/ballerina/ballerina-side-panel/src/components/editors/ExpressionField.tsx

@@ -27,13 +27,17 @@ import {
 } from '@wso2/ui-toolkit';
 import { S } from './ExpressionEditor';
 import TextModeEditor from './MultiModeExpressionEditor/TextExpressionEditor/TextModeEditor';
-import { InputMode } from './MultiModeExpressionEditor/ChipExpressionEditor/types';
+import { InputMode, TokenType } from './MultiModeExpressionEditor/ChipExpressionEditor/types';
 import { LineRange } from '@wso2/ballerina-core/lib/interfaces/common';
 import { HelperpaneOnChangeOptions } from '../Form/types';
 import { ChipExpressionEditorComponent } from './MultiModeExpressionEditor/ChipExpressionEditor/components/ChipExpressionEditor';
+import { ChipExpressionEditorDefaultConfiguration } from './MultiModeExpressionEditor/ChipExpressionEditor/ChipExpressionDefaultConfig';
+import RecordConfigPreviewEditor from './MultiModeExpressionEditor/RecordConfigPreviewEditor/RecordConfigPreviewEditor';
+import { RawTemplateEditorConfig, StringTemplateEditorConfig, PrimaryModeChipExpressionEditorConfig } from './MultiModeExpressionEditor/Configurations';
 
 export interface ExpressionField {
     inputMode: InputMode;
+    primaryMode: InputMode;
     name: string;
     value: string;
     fileName?: string;
@@ -96,6 +100,7 @@ const EditorRibbon = ({ onClick }: { onClick: () => void }) => {
 
 export const ExpressionField: React.FC<ExpressionField> = ({
     inputMode,
+    primaryMode,
     name,
     value,
     completions,
@@ -127,9 +132,9 @@ export const ExpressionField: React.FC<ExpressionField> = ({
     onOpenExpandedMode,
     isInExpandedMode
 }) => {
-    if (inputMode === InputMode.TEXT || inputMode === InputMode.RECORD) {
+    if (inputMode === InputMode.RECORD) {
         return (
-            <TextModeEditor
+            <RecordConfigPreviewEditor
                 exprRef={exprRef}
                 anchorRef={anchorRef}
                 name={name}
@@ -147,6 +152,47 @@ export const ExpressionField: React.FC<ExpressionField> = ({
                 onOpenExpandedMode={onOpenExpandedMode}
                 isInExpandedMode={isInExpandedMode}
             />
+        );
+    }
+    if (inputMode === InputMode.TEXT) {
+        return (
+            <TextModeEditor
+                getHelperPane={getHelperPane}
+                isExpandedVersion={false}
+                completions={completions}
+                onChange={onChange}
+                value={value}
+                sanitizedExpression={sanitizedExpression}
+                rawExpression={rawExpression}
+                fileName={fileName}
+                targetLineRange={targetLineRange}
+                extractArgsFromFunction={extractArgsFromFunction}
+                onOpenExpandedMode={onOpenExpandedMode}
+                onRemove={onRemove}
+                isInExpandedMode={isInExpandedMode}
+                configuration={new StringTemplateEditorConfig()}
+            />
+
+        );
+    }
+    if (inputMode === InputMode.TEMPLATE) {
+        return (
+            <TextModeEditor
+                getHelperPane={getHelperPane}
+                isExpandedVersion={false}
+                completions={completions}
+                onChange={onChange}
+                value={value}
+                sanitizedExpression={sanitizedExpression}
+                rawExpression={rawExpression}
+                fileName={fileName}
+                targetLineRange={targetLineRange}
+                extractArgsFromFunction={extractArgsFromFunction}
+                onOpenExpandedMode={onOpenExpandedMode}
+                onRemove={onRemove}
+                isInExpandedMode={isInExpandedMode}
+                configuration={new RawTemplateEditorConfig()}
+            />
 
         );
     }
@@ -166,6 +212,7 @@ export const ExpressionField: React.FC<ExpressionField> = ({
             onOpenExpandedMode={onOpenExpandedMode}
             onRemove={onRemove}
             isInExpandedMode={isInExpandedMode}
+            configuration={new PrimaryModeChipExpressionEditorConfig(primaryMode)}
         />
     );
 };

workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/ChipExpressionEditor/ChipExpressionDefaultConfig.ts

@@ -0,0 +1,37 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { ParsedToken } from "./utils";
+
+export abstract class ChipExpressionEditorDefaultConfiguration {
+    getHelperValue(value: string, token?: ParsedToken) {
+        return value;
+    }
+    getSerializationPrefix() {
+        return "";
+    }
+    getSerializationSuffix() {
+        return "";
+    }
+    serializeValue(value: string) {
+        return value
+    }
+    deserializeValue(value: string) {
+        return value;
+    }
+}

workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/ChipExpressionEditor/CodeUtils.ts

@@ -37,8 +37,6 @@ export type TokenStream = number[];
 
 export type TokensChangePayload = {
     tokens: TokenStream;
-    rawValue?: string;      // Raw expression (e.g., `${var}`)
-    sanitizedValue?: string; // Sanitized expression (e.g., ${var})
 };
 
 export type CursorInfo = {
@@ -225,23 +223,12 @@ export const tokenField = StateField.define<TokenFieldState>({
         for (let effect of tr.effects) {
             if (effect.is(tokensChangeEffect)) {
                 const payload = effect.value;
-                const sanitizedDoc = tr.newDoc.toString();
-
-                // Parse tokens using the raw value if provided, otherwise use sanitized
-                const valueForParsing = payload.rawValue || sanitizedDoc;
-                tokens = getParsedExpressionTokens(payload.tokens, valueForParsing);
-
-                // If we have both raw and sanitized values, map positions
-                if (payload.rawValue && payload.sanitizedValue) {
-                    tokens = tokens.map(token => ({
-                        ...token,
-                        start: mapRawToSanitized(token.start, payload.rawValue!, payload.sanitizedValue!),
-                        end: mapRawToSanitized(token.end, payload.rawValue!, payload.sanitizedValue!)
-                    }));
-                }
+                const currentValue = tr.newDoc.toString();
+
+                tokens = getParsedExpressionTokens(payload.tokens, currentValue);
 
                 // Detect compounds once when tokens change
-                compounds = detectTokenPatterns(tokens, sanitizedDoc);
+                compounds = detectTokenPatterns(tokens, currentValue);
 
                 return { tokens, compounds };
             }
@@ -618,3 +605,18 @@ export const buildHelperPaneKeymap = (getIsHelperPaneOpen: () => boolean, onClos
         }
     ];
 };
+
+export const isSelectionOnToken = (from: number, to: number, view: EditorView): ParsedToken => {
+    if (!view) return undefined;
+    const { tokens, compounds } = view.state.field(tokenField);
+
+    const matchingCompound = compounds.find(
+        compound => compound.start === from && compound.end === to
+    );
+    if (matchingCompound) return undefined;
+
+    const matchingToken = tokens.find(
+        token => token.start === from && token.end === to
+    );
+    return matchingToken;
+};