Expression editor bug fixes and maintainability improvement

workspaces/ballerina/ballerina-side-panel/package.json

@@ -28,7 +28,11 @@
         "lodash": "~4.17.21",
         "react-hook-form": "7.56.4",
         "react-markdown": "~10.1.0",
-        "@github/markdown-toolbar-element": "^2.2.3"
+        "@github/markdown-toolbar-element": "^2.2.3",
+        "@codemirror/commands": "~6.10.0",
+        "@codemirror/state": "~6.5.2",
+        "@codemirror/view": "~6.38.6",
+        "@codemirror/autocomplete": "~6.19.1"
     },
     "devDependencies": {
         "@storybook/react": "^6.5.16",

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

@@ -19,7 +19,7 @@
 import React from "react";
 import styled from "@emotion/styled";
 import { EditorModeExpressionProps } from "./types";
-import { ChipExpressionBaseComponent } from "../../MultiModeExpressionEditor/ChipExpressionEditor/ChipExpressionBaseComponent";
+import { ChipExpressionEditorComponent } from "../../MultiModeExpressionEditor/ChipExpressionEditor/components/ChipExpressionEditor";
 
 const ExpressionContainer = styled.div`
     width: 100%;
@@ -48,7 +48,7 @@ export const ExpressionMode: React.FC<EditorModeExpressionProps> = ({
 
     return (
         <ExpressionContainer>
-            <ChipExpressionBaseComponent
+            <ChipExpressionEditorComponent
                 value={value}
                 onChange={handleChange}
                 completions={completions}
@@ -57,6 +57,7 @@ export const ExpressionMode: React.FC<EditorModeExpressionProps> = ({
                 extractArgsFromFunction={extractArgsFromFunction}
                 getHelperPane={getHelperPane}
                 isInExpandedMode={true}
+                isExpandedVersion={true}
             />
         </ExpressionContainer>
     );

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

@@ -28,9 +28,9 @@ import {
 import { S } from './ExpressionEditor';
 import TextModeEditor from './MultiModeExpressionEditor/TextExpressionEditor/TextModeEditor';
 import { InputMode } from './MultiModeExpressionEditor/ChipExpressionEditor/types';
-import { ChipExpressionBaseComponent } from './MultiModeExpressionEditor/ChipExpressionEditor/ChipExpressionBaseComponent';
 import { LineRange } from '@wso2/ballerina-core/lib/interfaces/common';
 import { HelperpaneOnChangeOptions } from '../Form/types';
+import { ChipExpressionEditorComponent } from './MultiModeExpressionEditor/ChipExpressionEditor/components/ChipExpressionEditor';
 
 export interface ExpressionField {
     inputMode: InputMode;
@@ -150,8 +150,9 @@ export const ExpressionField: React.FC<ExpressionField> = ({
     }
 
     return (
-        <ChipExpressionBaseComponent
+        <ChipExpressionEditorComponent
             getHelperPane={getHelperPane}
+            isExpandedVersion={false}
             completions={completions}
             onChange={onChange}
             value={value}