diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/add_message_variables.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/add_message_variables.tsx
index 957c79a5c51239..655f64995d147e 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/components/add_message_variables.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/components/add_message_variables.tsx
@@ -47,6 +47,7 @@ export const AddMessageVariables: React.FunctionComponent<Props> = ({
     <EuiPopover
       button={
         <EuiButtonIcon
+          id={`${paramsProperty}AddVariableButton`}
           data-test-subj={`${paramsProperty}AddVariableButton`}
           title={addVariableButtonTitle}
           onClick={() => setIsVariablesPopoverOpen(true)}
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/email/email_params.test.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/email/email_params.test.tsx
index 053541d84c4313..08616b2895a804 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/email/email_params.test.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/email/email_params.test.tsx
@@ -28,7 +28,7 @@ describe('EmailParamsFields renders', () => {
     expect(
       wrapper.find('[data-test-subj="toEmailAddressInput"]').first().prop('selectedOptions')
     ).toStrictEqual([{ label: 'test@test.com' }]);
-    expect(wrapper.find('[data-test-subj="emailSubjectInput"]').length > 0).toBeTruthy();
-    expect(wrapper.find('[data-test-subj="emailMessageInput"]').length > 0).toBeTruthy();
+    expect(wrapper.find('[data-test-subj="subjectInput"]').length > 0).toBeTruthy();
+    expect(wrapper.find('[data-test-subj="messageTextArea"]').length > 0).toBeTruthy();
   });
 });
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/email/email_params.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/email/email_params.tsx
index 58a9685fc73d9d..39c59a10fbc813 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/email/email_params.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/email/email_params.tsx
@@ -5,11 +5,12 @@
  */
 import React, { Fragment, useState, useEffect } from 'react';
 import { FormattedMessage } from '@kbn/i18n/react';
-import { EuiFieldText, EuiComboBox, EuiTextArea, EuiButtonEmpty, EuiFormRow } from '@elastic/eui';
+import { EuiComboBox, EuiButtonEmpty, EuiFormRow } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { ActionParamsProps } from '../../../../types';
 import { EmailActionParams } from '../types';
-import { AddMessageVariables } from '../../add_message_variables';
+import { TextFieldWithMessageVariables } from '../../text_field_with_message_variables';
+import { TextAreaWithMessageVariables } from '../../text_area_with_message_variables';
 
 export const EmailParamsFields = ({
   actionParams,
@@ -33,14 +34,6 @@ export const EmailParamsFields = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  const onSelectMessageVariable = (paramsProperty: string, variable: string) => {
-    editAction(
-      paramsProperty,
-      ((actionParams as any)[paramsProperty] ?? '').concat(` {{${variable}}}`),
-      index
-    );
-  };
-
   return (
     <Fragment>
       <EuiFormRow
@@ -197,68 +190,30 @@ export const EmailParamsFields = ({
             defaultMessage: 'Subject',
           }
         )}
-        labelAppend={
-          <AddMessageVariables
-            messageVariables={messageVariables}
-            onSelectEventHandler={(variable: string) =>
-              onSelectMessageVariable('subject', variable)
-            }
-            paramsProperty="subject"
-          />
-        }
       >
-        <EuiFieldText
-          fullWidth
-          isInvalid={errors.subject.length > 0 && subject !== undefined}
-          name="subject"
-          data-test-subj="emailSubjectInput"
-          value={subject || ''}
-          onChange={(e) => {
-            editAction('subject', e.target.value, index);
-          }}
-          onBlur={() => {
-            if (!subject) {
-              editAction('subject', '', index);
-            }
-          }}
+        <TextFieldWithMessageVariables
+          index={index}
+          editAction={editAction}
+          messageVariables={messageVariables}
+          paramsProperty={'subject'}
+          inputTargetValue={subject}
+          errors={errors.subject as string[]}
         />
       </EuiFormRow>
-      <EuiFormRow
-        fullWidth
-        error={errors.message}
-        isInvalid={errors.message.length > 0 && message !== undefined}
+      <TextAreaWithMessageVariables
+        index={index}
+        editAction={editAction}
+        messageVariables={messageVariables}
+        paramsProperty={'message'}
+        inputTargetValue={message}
         label={i18n.translate(
           'xpack.triggersActionsUI.sections.builtinActionTypes.emailAction.messageTextAreaFieldLabel',
           {
             defaultMessage: 'Message',
           }
         )}
-        labelAppend={
-          <AddMessageVariables
-            messageVariables={messageVariables}
-            onSelectEventHandler={(variable: string) =>
-              onSelectMessageVariable('message', variable)
-            }
-            paramsProperty="message"
-          />
-        }
-      >
-        <EuiTextArea
-          fullWidth
-          isInvalid={errors.message.length > 0 && message !== undefined}
-          value={message || ''}
-          name="message"
-          data-test-subj="emailMessageInput"
-          onChange={(e) => {
-            editAction('message', e.target.value, index);
-          }}
-          onBlur={() => {
-            if (!message) {
-              editAction('message', '', index);
-            }
-          }}
-        />
-      </EuiFormRow>
+        errors={errors.message as string[]}
+      />
     </Fragment>
   );
 };
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/es_index/es_index_params.test.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/es_index/es_index_params.test.tsx
index 1f8bfde2cd22b4..4a6c13bf7f1a6c 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/es_index/es_index_params.test.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/es_index/es_index_params.test.tsx
@@ -20,7 +20,7 @@ describe('IndexParamsFields renders', () => {
         index={0}
       />
     );
-    expect(wrapper.find('[data-test-subj="actionIndexDoc"]').first().prop('value')).toBe(`{
+    expect(wrapper.find('[data-test-subj="documentsJsonEditor"]').first().prop('value')).toBe(`{
   "test": 123
 }`);
     expect(wrapper.find('[data-test-subj="documentsAddVariableButton"]').length > 0).toBeTruthy();
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/es_index/es_index_params.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/es_index/es_index_params.tsx
index 0b095cdc269847..fd6a3d64bd4be5 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/es_index/es_index_params.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/es_index/es_index_params.tsx
@@ -3,13 +3,11 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-import React, { Fragment } from 'react';
-import { EuiFormRow, EuiCodeEditor } from '@elastic/eui';
+import React from 'react';
 import { i18n } from '@kbn/i18n';
-import { useXJsonMode } from '../../../../../../../../src/plugins/es_ui_shared/static/ace_x_json/hooks';
 import { ActionParamsProps } from '../../../../types';
 import { IndexActionParams } from '.././types';
-import { AddMessageVariables } from '../../add_message_variables';
+import { JsonEditorWithMessageVariables } from '../../json_editor_with_message_variables';
 
 export const IndexParamsFields = ({
   actionParams,
@@ -18,62 +16,36 @@ export const IndexParamsFields = ({
   messageVariables,
 }: ActionParamsProps<IndexActionParams>) => {
   const { documents } = actionParams;
-  const { xJsonMode, convertToJson, setXJson, xJson } = useXJsonMode(
-    documents && documents.length > 0 ? documents[0] : null
-  );
-  const onSelectMessageVariable = (variable: string) => {
-    const value = (xJson ?? '').concat(` {{${variable}}}`);
-    setXJson(value);
-    // Keep the documents in sync with the editor content
-    onDocumentsChange(convertToJson(value));
-  };
 
-  function onDocumentsChange(updatedDocuments: string) {
+  const onDocumentsChange = (updatedDocuments: string) => {
     try {
       const documentsJSON = JSON.parse(updatedDocuments);
       editAction('documents', [documentsJSON], index);
       // eslint-disable-next-line no-empty
     } catch (e) {}
-  }
+  };
+
   return (
-    <Fragment>
-      <EuiFormRow
-        fullWidth
-        label={i18n.translate(
-          'xpack.triggersActionsUI.components.builtinActionTypes.indexAction.documentsFieldLabel',
-          {
-            defaultMessage: 'Document to index',
-          }
-        )}
-        labelAppend={
-          <AddMessageVariables
-            messageVariables={messageVariables}
-            onSelectEventHandler={(variable: string) => onSelectMessageVariable(variable)}
-            paramsProperty="documents"
-          />
+    <JsonEditorWithMessageVariables
+      messageVariables={messageVariables}
+      paramsProperty={'documents'}
+      inputTargetValue={
+        documents && documents.length > 0 ? ((documents[0] as unknown) as string) : ''
+      }
+      label={i18n.translate(
+        'xpack.triggersActionsUI.components.builtinActionTypes.indexAction.documentsFieldLabel',
+        {
+          defaultMessage: 'Document to index',
+        }
+      )}
+      aria-label={i18n.translate(
+        'xpack.triggersActionsUI.components.builtinActionTypes.indexAction.jsonDocAriaLabel',
+        {
+          defaultMessage: 'Code editor',
         }
-      >
-        <EuiCodeEditor
-          mode={xJsonMode}
-          width="100%"
-          height="200px"
-          theme="github"
-          data-test-subj="actionIndexDoc"
-          aria-label={i18n.translate(
-            'xpack.triggersActionsUI.components.builtinActionTypes.indexAction.jsonDocAriaLabel',
-            {
-              defaultMessage: 'Code editor',
-            }
-          )}
-          value={xJson}
-          onChange={(xjson: string) => {
-            setXJson(xjson);
-            // Keep the documents in sync with the editor content
-            onDocumentsChange(convertToJson(xjson));
-          }}
-        />
-      </EuiFormRow>
-    </Fragment>
+      )}
+      onDocumentsChange={onDocumentsChange}
+    />
   );
 };
 
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/pagerduty/pagerduty_params.test.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/pagerduty/pagerduty_params.test.tsx
index 94bea3c51760d5..1b26b1157add9e 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/pagerduty/pagerduty_params.test.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/pagerduty/pagerduty_params.test.tsx
@@ -39,7 +39,7 @@ describe('PagerDutyParamsFields renders', () => {
     expect(wrapper.find('[data-test-subj="componentInput"]').length > 0).toBeTruthy();
     expect(wrapper.find('[data-test-subj="groupInput"]').length > 0).toBeTruthy();
     expect(wrapper.find('[data-test-subj="sourceInput"]').length > 0).toBeTruthy();
-    expect(wrapper.find('[data-test-subj="pagerdutySummaryInput"]').length > 0).toBeTruthy();
+    expect(wrapper.find('[data-test-subj="summaryInput"]').length > 0).toBeTruthy();
     expect(wrapper.find('[data-test-subj="dedupKeyAddVariableButton"]').length > 0).toBeTruthy();
   });
 });
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/pagerduty/pagerduty_params.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/pagerduty/pagerduty_params.tsx
index f0b131deb14904..c8ad5f5b7080e8 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/pagerduty/pagerduty_params.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/pagerduty/pagerduty_params.tsx
@@ -4,11 +4,11 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 import React, { Fragment } from 'react';
-import { EuiFieldText, EuiFlexGroup, EuiFlexItem, EuiFormRow, EuiSelect } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiFormRow, EuiSelect } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { ActionParamsProps } from '../../../../types';
 import { PagerDutyActionParams } from '.././types';
-import { AddMessageVariables } from '../../add_message_variables';
+import { TextFieldWithMessageVariables } from '../../text_field_with_message_variables';
 
 const PagerDutyParamsFields: React.FunctionComponent<ActionParamsProps<PagerDutyActionParams>> = ({
   actionParams,
@@ -94,15 +94,6 @@ const PagerDutyParamsFields: React.FunctionComponent<ActionParamsProps<PagerDuty
       ),
     },
   ];
-
-  const onSelectMessageVariable = (paramsProperty: string, variable: string) => {
-    editAction(
-      paramsProperty,
-      ((actionParams as any)[paramsProperty] ?? '').concat(` {{${variable}}}`),
-      index
-    );
-  };
-
   return (
     <Fragment>
       <EuiFlexGroup>
@@ -159,29 +150,13 @@ const PagerDutyParamsFields: React.FunctionComponent<ActionParamsProps<PagerDuty
                 defaultMessage: 'DedupKey (optional)',
               }
             )}
-            labelAppend={
-              <AddMessageVariables
-                messageVariables={messageVariables}
-                onSelectEventHandler={(variable: string) =>
-                  onSelectMessageVariable('dedupKey', variable)
-                }
-                paramsProperty="dedupKey"
-              />
-            }
           >
-            <EuiFieldText
-              fullWidth
-              name="dedupKey"
-              data-test-subj="dedupKeyInput"
-              value={dedupKey || ''}
-              onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                editAction('dedupKey', e.target.value, index);
-              }}
-              onBlur={() => {
-                if (!dedupKey) {
-                  editAction('dedupKey', '', index);
-                }
-              }}
+            <TextFieldWithMessageVariables
+              index={index}
+              editAction={editAction}
+              messageVariables={messageVariables}
+              paramsProperty={'dedupKey'}
+              inputTargetValue={dedupKey}
             />
           </EuiFormRow>
         </EuiFlexItem>
@@ -196,32 +171,14 @@ const PagerDutyParamsFields: React.FunctionComponent<ActionParamsProps<PagerDuty
                 defaultMessage: 'Timestamp (optional)',
               }
             )}
-            labelAppend={
-              <AddMessageVariables
-                messageVariables={messageVariables}
-                onSelectEventHandler={(variable: string) =>
-                  onSelectMessageVariable('timestamp', variable)
-                }
-                paramsProperty="timestamp"
-              />
-            }
           >
-            <EuiFieldText
-              fullWidth
-              name="timestamp"
-              data-test-subj="timestampInput"
-              value={timestamp || ''}
-              isInvalid={errors.timestamp.length > 0 && timestamp !== undefined}
-              onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                editAction('timestamp', e.target.value, index);
-              }}
-              onBlur={() => {
-                if (timestamp?.trim()) {
-                  editAction('timestamp', timestamp.trim(), index);
-                } else {
-                  editAction('timestamp', '', index);
-                }
-              }}
+            <TextFieldWithMessageVariables
+              index={index}
+              editAction={editAction}
+              messageVariables={messageVariables}
+              paramsProperty={'timestamp'}
+              inputTargetValue={timestamp}
+              errors={errors.timestamp as string[]}
             />
           </EuiFormRow>
         </EuiFlexItem>
@@ -234,29 +191,13 @@ const PagerDutyParamsFields: React.FunctionComponent<ActionParamsProps<PagerDuty
             defaultMessage: 'Component (optional)',
           }
         )}
-        labelAppend={
-          <AddMessageVariables
-            messageVariables={messageVariables}
-            onSelectEventHandler={(variable: string) =>
-              onSelectMessageVariable('component', variable)
-            }
-            paramsProperty="component"
-          />
-        }
       >
-        <EuiFieldText
-          fullWidth
-          name="component"
-          data-test-subj="componentInput"
-          value={component || ''}
-          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-            editAction('component', e.target.value, index);
-          }}
-          onBlur={() => {
-            if (!component) {
-              editAction('component', '', index);
-            }
-          }}
+        <TextFieldWithMessageVariables
+          index={index}
+          editAction={editAction}
+          messageVariables={messageVariables}
+          paramsProperty={'component'}
+          inputTargetValue={component}
         />
       </EuiFormRow>
       <EuiFormRow
@@ -267,27 +208,13 @@ const PagerDutyParamsFields: React.FunctionComponent<ActionParamsProps<PagerDuty
             defaultMessage: 'Group (optional)',
           }
         )}
-        labelAppend={
-          <AddMessageVariables
-            messageVariables={messageVariables}
-            onSelectEventHandler={(variable: string) => onSelectMessageVariable('group', variable)}
-            paramsProperty="group"
-          />
-        }
       >
-        <EuiFieldText
-          fullWidth
-          name="group"
-          data-test-subj="groupInput"
-          value={group || ''}
-          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-            editAction('group', e.target.value, index);
-          }}
-          onBlur={() => {
-            if (!group) {
-              editAction('group', '', index);
-            }
-          }}
+        <TextFieldWithMessageVariables
+          index={index}
+          editAction={editAction}
+          messageVariables={messageVariables}
+          paramsProperty={'group'}
+          inputTargetValue={group}
         />
       </EuiFormRow>
       <EuiFormRow
@@ -298,27 +225,13 @@ const PagerDutyParamsFields: React.FunctionComponent<ActionParamsProps<PagerDuty
             defaultMessage: 'Source (optional)',
           }
         )}
-        labelAppend={
-          <AddMessageVariables
-            messageVariables={messageVariables}
-            onSelectEventHandler={(variable: string) => onSelectMessageVariable('source', variable)}
-            paramsProperty="source"
-          />
-        }
       >
-        <EuiFieldText
-          fullWidth
-          name="source"
-          data-test-subj="sourceInput"
-          value={source || ''}
-          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-            editAction('source', e.target.value, index);
-          }}
-          onBlur={() => {
-            if (!source) {
-              editAction('source', '', index);
-            }
-          }}
+        <TextFieldWithMessageVariables
+          index={index}
+          editAction={editAction}
+          messageVariables={messageVariables}
+          paramsProperty={'source'}
+          inputTargetValue={source}
         />
       </EuiFormRow>
       <EuiFormRow
@@ -332,30 +245,14 @@ const PagerDutyParamsFields: React.FunctionComponent<ActionParamsProps<PagerDuty
             defaultMessage: 'Summary',
           }
         )}
-        labelAppend={
-          <AddMessageVariables
-            messageVariables={messageVariables}
-            onSelectEventHandler={(variable: string) =>
-              onSelectMessageVariable('summary', variable)
-            }
-            paramsProperty="summary"
-          />
-        }
       >
-        <EuiFieldText
-          fullWidth
-          isInvalid={errors.summary.length > 0 && summary !== undefined}
-          name="summary"
-          value={summary || ''}
-          data-test-subj="pagerdutySummaryInput"
-          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-            editAction('summary', e.target.value, index);
-          }}
-          onBlur={() => {
-            if (!summary) {
-              editAction('summary', '', index);
-            }
-          }}
+        <TextFieldWithMessageVariables
+          index={index}
+          editAction={editAction}
+          messageVariables={messageVariables}
+          paramsProperty={'summary'}
+          inputTargetValue={summary}
+          errors={errors.summary as string[]}
         />
       </EuiFormRow>
       <EuiFormRow
@@ -367,27 +264,13 @@ const PagerDutyParamsFields: React.FunctionComponent<ActionParamsProps<PagerDuty
             defaultMessage: 'Class (optional)',
           }
         )}
-        labelAppend={
-          <AddMessageVariables
-            messageVariables={messageVariables}
-            onSelectEventHandler={(variable: string) => onSelectMessageVariable('class', variable)}
-            paramsProperty="class"
-          />
-        }
       >
-        <EuiFieldText
-          fullWidth
-          name="class"
-          value={actionParams.class || ''}
-          data-test-subj="pagerdutyClassInput"
-          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-            editAction('class', e.target.value, index);
-          }}
-          onBlur={() => {
-            if (!actionParams.class) {
-              editAction('class', '', index);
-            }
-          }}
+        <TextFieldWithMessageVariables
+          index={index}
+          editAction={editAction}
+          messageVariables={messageVariables}
+          paramsProperty={'class'}
+          inputTargetValue={actionParams.class}
         />
       </EuiFormRow>
     </Fragment>
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/server_log/server_log_params.test.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/server_log/server_log_params.test.tsx
index cb905023cae449..1849a7ec9817ad 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/server_log/server_log_params.test.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/server_log/server_log_params.test.tsx
@@ -27,7 +27,7 @@ describe('ServerLogParamsFields renders', () => {
     expect(
       wrapper.find('[data-test-subj="loggingLevelSelect"]').first().prop('value')
     ).toStrictEqual('trace');
-    expect(wrapper.find('[data-test-subj="loggingMessageInput"]').length > 0).toBeTruthy();
+    expect(wrapper.find('[data-test-subj="messageTextArea"]').length > 0).toBeTruthy();
   });
 
   test('level param field is rendered with default value if not selected', () => {
@@ -47,6 +47,6 @@ describe('ServerLogParamsFields renders', () => {
     expect(
       wrapper.find('[data-test-subj="loggingLevelSelect"]').first().prop('value')
     ).toStrictEqual('info');
-    expect(wrapper.find('[data-test-subj="loggingMessageInput"]').length > 0).toBeTruthy();
+    expect(wrapper.find('[data-test-subj="messageTextArea"]').length > 0).toBeTruthy();
   });
 });
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/server_log/server_log_params.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/server_log/server_log_params.tsx
index c19aec2a993db5..b79fa0ea940506 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/server_log/server_log_params.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/server_log/server_log_params.tsx
@@ -5,10 +5,10 @@
  */
 import React, { Fragment, useEffect } from 'react';
 import { i18n } from '@kbn/i18n';
-import { EuiSelect, EuiTextArea, EuiFormRow } from '@elastic/eui';
+import { EuiSelect, EuiFormRow } from '@elastic/eui';
 import { ActionParamsProps } from '../../../../types';
 import { ServerLogActionParams } from '.././types';
-import { AddMessageVariables } from '../../add_message_variables';
+import { TextAreaWithMessageVariables } from '../../text_area_with_message_variables';
 
 export const ServerLogParamsFields: React.FunctionComponent<ActionParamsProps<
   ServerLogActionParams
@@ -31,10 +31,6 @@ export const ServerLogParamsFields: React.FunctionComponent<ActionParamsProps<
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  const onSelectMessageVariable = (paramsProperty: string, variable: string) => {
-    editAction(paramsProperty, (message ?? '').concat(` {{${variable}}}`), index);
-  };
-
   return (
     <Fragment>
       <EuiFormRow
@@ -59,43 +55,20 @@ export const ServerLogParamsFields: React.FunctionComponent<ActionParamsProps<
           }}
         />
       </EuiFormRow>
-      <EuiFormRow
-        id="loggingMessage"
-        fullWidth
-        error={errors.message}
-        isInvalid={errors.message.length > 0 && message !== undefined}
+      <TextAreaWithMessageVariables
+        index={index}
+        editAction={editAction}
+        messageVariables={messageVariables}
+        paramsProperty={'message'}
+        inputTargetValue={message}
         label={i18n.translate(
           'xpack.triggersActionsUI.components.builtinActionTypes.serverLogAction.logMessageFieldLabel',
           {
             defaultMessage: 'Message',
           }
         )}
-        labelAppend={
-          <AddMessageVariables
-            messageVariables={messageVariables}
-            onSelectEventHandler={(variable: string) =>
-              onSelectMessageVariable('message', variable)
-            }
-            paramsProperty="message"
-          />
-        }
-      >
-        <EuiTextArea
-          fullWidth
-          isInvalid={errors.message.length > 0 && message !== undefined}
-          value={message || ''}
-          name="message"
-          data-test-subj="loggingMessageInput"
-          onChange={(e) => {
-            editAction('message', e.target.value, index);
-          }}
-          onBlur={() => {
-            if (!message) {
-              editAction('message', '', index);
-            }
-          }}
-        />
-      </EuiFormRow>
+        errors={errors.message as string[]}
+      />
     </Fragment>
   );
 };
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/slack/slack_params.test.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/slack/slack_params.test.tsx
index 6efa8d64dafbe7..8777c8f48e0f53 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/slack/slack_params.test.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/slack/slack_params.test.tsx
@@ -20,9 +20,9 @@ describe('SlackParamsFields renders', () => {
         index={0}
       />
     );
-    expect(wrapper.find('[data-test-subj="slackMessageTextArea"]').length > 0).toBeTruthy();
-    expect(
-      wrapper.find('[data-test-subj="slackMessageTextArea"]').first().prop('value')
-    ).toStrictEqual('test message');
+    expect(wrapper.find('[data-test-subj="messageTextArea"]').length > 0).toBeTruthy();
+    expect(wrapper.find('[data-test-subj="messageTextArea"]').first().prop('value')).toStrictEqual(
+      'test message'
+    );
   });
 });
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/slack/slack_params.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/slack/slack_params.tsx
index 5789d37a6bcf6c..80a2f9d7709cc5 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/slack/slack_params.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/slack/slack_params.tsx
@@ -3,12 +3,11 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-import React, { Fragment, useEffect } from 'react';
-import { EuiTextArea, EuiFormRow } from '@elastic/eui';
+import React, { useEffect } from 'react';
 import { i18n } from '@kbn/i18n';
 import { ActionParamsProps } from '../../../../types';
 import { SlackActionParams } from '../types';
-import { AddMessageVariables } from '../../add_message_variables';
+import { TextAreaWithMessageVariables } from '../../text_area_with_message_variables';
 
 const SlackParamsFields: React.FunctionComponent<ActionParamsProps<SlackActionParams>> = ({
   actionParams,
@@ -26,50 +25,21 @@ const SlackParamsFields: React.FunctionComponent<ActionParamsProps<SlackActionPa
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  const onSelectMessageVariable = (paramsProperty: string, variable: string) => {
-    editAction(paramsProperty, (message ?? '').concat(` {{${variable}}}`), index);
-  };
-
   return (
-    <Fragment>
-      <EuiFormRow
-        id="slackMessage"
-        fullWidth
-        error={errors.message}
-        isInvalid={errors.message.length > 0 && message !== undefined}
-        label={i18n.translate(
-          'xpack.triggersActionsUI.components.builtinActionTypes.slackAction.messageTextAreaFieldLabel',
-          {
-            defaultMessage: 'Message',
-          }
-        )}
-        labelAppend={
-          <AddMessageVariables
-            messageVariables={messageVariables}
-            onSelectEventHandler={(variable: string) =>
-              onSelectMessageVariable('message', variable)
-            }
-            paramsProperty="message"
-          />
+    <TextAreaWithMessageVariables
+      index={index}
+      editAction={editAction}
+      messageVariables={messageVariables}
+      paramsProperty={'message'}
+      inputTargetValue={message}
+      label={i18n.translate(
+        'xpack.triggersActionsUI.components.builtinActionTypes.slackAction.messageTextAreaFieldLabel',
+        {
+          defaultMessage: 'Message',
         }
-      >
-        <EuiTextArea
-          fullWidth
-          isInvalid={errors.message.length > 0 && message !== undefined}
-          name="message"
-          value={message || ''}
-          data-test-subj="slackMessageTextArea"
-          onChange={(e) => {
-            editAction('message', e.target.value, index);
-          }}
-          onBlur={() => {
-            if (!message) {
-              editAction('message', '', index);
-            }
-          }}
-        />
-      </EuiFormRow>
-    </Fragment>
+      )}
+      errors={errors.message as string[]}
+    />
   );
 };
 
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/webhook/webhook_params.test.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/webhook/webhook_params.test.tsx
index 665114bd86e9bd..9e57d7ae608cc4 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/webhook/webhook_params.test.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/webhook/webhook_params.test.tsx
@@ -20,10 +20,10 @@ describe('WebhookParamsFields renders', () => {
         index={0}
       />
     );
-    expect(wrapper.find('[data-test-subj="webhookBodyEditor"]').length > 0).toBeTruthy();
-    expect(
-      wrapper.find('[data-test-subj="webhookBodyEditor"]').first().prop('value')
-    ).toStrictEqual('test message');
+    expect(wrapper.find('[data-test-subj="bodyJsonEditor"]').length > 0).toBeTruthy();
+    expect(wrapper.find('[data-test-subj="bodyJsonEditor"]').first().prop('value')).toStrictEqual(
+      'test message'
+    );
     expect(wrapper.find('[data-test-subj="bodyAddVariableButton"]').length > 0).toBeTruthy();
   });
 });
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/webhook/webhook_params.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/webhook/webhook_params.tsx
index 9e802b96e16be3..1dfd9e3edc2c5a 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/webhook/webhook_params.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/webhook/webhook_params.tsx
@@ -3,12 +3,11 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-import React, { Fragment } from 'react';
-import { EuiFormRow, EuiCodeEditor } from '@elastic/eui';
+import React from 'react';
 import { i18n } from '@kbn/i18n';
 import { ActionParamsProps } from '../../../../types';
 import { WebhookActionParams } from '../types';
-import { AddMessageVariables } from '../../add_message_variables';
+import { JsonEditorWithMessageVariables } from '../../json_editor_with_message_variables';
 
 const WebhookParamsFields: React.FunctionComponent<ActionParamsProps<WebhookActionParams>> = ({
   actionParams,
@@ -18,49 +17,28 @@ const WebhookParamsFields: React.FunctionComponent<ActionParamsProps<WebhookActi
   errors,
 }) => {
   const { body } = actionParams;
-  const onSelectMessageVariable = (paramsProperty: string, variable: string) => {
-    editAction(paramsProperty, (body ?? '').concat(` {{${variable}}}`), index);
-  };
   return (
-    <Fragment>
-      <EuiFormRow
-        id="webhookBody"
-        label={i18n.translate(
-          'xpack.triggersActionsUI.components.builtinActionTypes.webhookAction.bodyFieldLabel',
-          {
-            defaultMessage: 'Body',
-          }
-        )}
-        isInvalid={errors.body.length > 0 && body !== undefined}
-        fullWidth
-        error={errors.body}
-        labelAppend={
-          <AddMessageVariables
-            messageVariables={messageVariables}
-            onSelectEventHandler={(variable: string) => onSelectMessageVariable('body', variable)}
-            paramsProperty="body"
-          />
+    <JsonEditorWithMessageVariables
+      messageVariables={messageVariables}
+      paramsProperty={'body'}
+      inputTargetValue={body || ''}
+      label={i18n.translate(
+        'xpack.triggersActionsUI.components.builtinActionTypes.webhookAction.bodyFieldLabel',
+        {
+          defaultMessage: 'Body',
         }
-      >
-        <EuiCodeEditor
-          mode="json"
-          width="100%"
-          height="200px"
-          theme="github"
-          data-test-subj="webhookBodyEditor"
-          aria-label={i18n.translate(
-            'xpack.triggersActionsUI.components.builtinActionTypes.webhookAction.bodyCodeEditorAriaLabel',
-            {
-              defaultMessage: 'Code editor',
-            }
-          )}
-          value={body || ''}
-          onChange={(json: string) => {
-            editAction('body', json, index);
-          }}
-        />
-      </EuiFormRow>
-    </Fragment>
+      )}
+      aria-label={i18n.translate(
+        'xpack.triggersActionsUI.components.builtinActionTypes.webhookAction.bodyCodeEditorAriaLabel',
+        {
+          defaultMessage: 'Code editor',
+        }
+      )}
+      errors={errors.body as string[]}
+      onDocumentsChange={(json: string) => {
+        editAction('body', json, index);
+      }}
+    />
   );
 };
 
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/json_editor_with_message_variables.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/json_editor_with_message_variables.tsx
new file mode 100644
index 00000000000000..2aac389dce5ecd
--- /dev/null
+++ b/x-pack/plugins/triggers_actions_ui/public/application/components/json_editor_with_message_variables.tsx
@@ -0,0 +1,86 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+import React, { useState } from 'react';
+import { EuiCodeEditor, EuiFormRow } from '@elastic/eui';
+import './add_message_variables.scss';
+import { useXJsonMode } from '../../../../../../src/plugins/es_ui_shared/static/ace_x_json/hooks';
+
+import { AddMessageVariables } from './add_message_variables';
+
+interface Props {
+  messageVariables: string[] | undefined;
+  paramsProperty: string;
+  inputTargetValue: string;
+  label: string;
+  errors?: string[];
+  areaLabel?: string;
+  onDocumentsChange: (data: string) => void;
+}
+
+export const JsonEditorWithMessageVariables: React.FunctionComponent<Props> = ({
+  messageVariables,
+  paramsProperty,
+  inputTargetValue,
+  label,
+  errors,
+  areaLabel,
+  onDocumentsChange,
+}) => {
+  const [cursorPosition, setCursorPosition] = useState<any>(null);
+
+  const { xJsonMode, convertToJson, setXJson, xJson } = useXJsonMode(inputTargetValue ?? null);
+
+  const onSelectMessageVariable = (variable: string) => {
+    const templatedVar = `{{${variable}}}`;
+    let newValue = '';
+    if (cursorPosition) {
+      const cursor = cursorPosition.getCursor();
+      cursorPosition.session.insert(cursor, templatedVar);
+      newValue = cursorPosition.session.getValue();
+    } else {
+      newValue = templatedVar;
+    }
+    setXJson(newValue);
+    // Keep the documents in sync with the editor content
+    onDocumentsChange(convertToJson(newValue));
+  };
+
+  const onClickWithMessageVariable = (_value: any) => {
+    setCursorPosition(_value);
+  };
+
+  return (
+    <EuiFormRow
+      fullWidth
+      error={errors}
+      isInvalid={errors && errors.length > 0 && inputTargetValue !== undefined}
+      label={label}
+      labelAppend={
+        <AddMessageVariables
+          messageVariables={messageVariables}
+          onSelectEventHandler={(variable: string) => onSelectMessageVariable(variable)}
+          paramsProperty={paramsProperty}
+        />
+      }
+    >
+      <EuiCodeEditor
+        mode={xJsonMode}
+        width="100%"
+        height="200px"
+        theme="github"
+        data-test-subj={`${paramsProperty}JsonEditor`}
+        aria-label={areaLabel}
+        value={xJson}
+        onChange={(xjson: string, e: any) => {
+          setXJson(xjson);
+          // Keep the documents in sync with the editor content
+          onDocumentsChange(convertToJson(xjson));
+        }}
+        onCursorChange={(_value: any) => onClickWithMessageVariable(_value)}
+      />
+    </EuiFormRow>
+  );
+};
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/text_area_with_message_variables.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/text_area_with_message_variables.tsx
new file mode 100644
index 00000000000000..0b8a9349ad5fb3
--- /dev/null
+++ b/x-pack/plugins/triggers_actions_ui/public/application/components/text_area_with_message_variables.tsx
@@ -0,0 +1,79 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+import React, { useState } from 'react';
+import { EuiTextArea, EuiFormRow } from '@elastic/eui';
+import './add_message_variables.scss';
+import { AddMessageVariables } from './add_message_variables';
+
+interface Props {
+  messageVariables: string[] | undefined;
+  paramsProperty: string;
+  index: number;
+  inputTargetValue?: string;
+  editAction: (property: string, value: any, index: number) => void;
+  label: string;
+  errors?: string[];
+}
+
+export const TextAreaWithMessageVariables: React.FunctionComponent<Props> = ({
+  messageVariables,
+  paramsProperty,
+  index,
+  inputTargetValue,
+  editAction,
+  label,
+  errors,
+}) => {
+  const [currentTextElement, setCurrentTextElement] = useState<HTMLTextAreaElement | null>(null);
+
+  const onSelectMessageVariable = (variable: string) => {
+    const templatedVar = `{{${variable}}}`;
+    const startPosition = currentTextElement?.selectionStart ?? 0;
+    const endPosition = currentTextElement?.selectionEnd ?? 0;
+    const newValue =
+      (inputTargetValue ?? '').substring(0, startPosition) +
+      templatedVar +
+      (inputTargetValue ?? '').substring(endPosition, (inputTargetValue ?? '').length);
+    editAction(paramsProperty, newValue, index);
+  };
+
+  const onChangeWithMessageVariable = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    editAction(paramsProperty, e.target.value, index);
+  };
+
+  return (
+    <EuiFormRow
+      fullWidth
+      error={errors}
+      isInvalid={errors && errors.length > 0 && inputTargetValue !== undefined}
+      label={label}
+      labelAppend={
+        <AddMessageVariables
+          messageVariables={messageVariables}
+          onSelectEventHandler={(variable: string) => onSelectMessageVariable(variable)}
+          paramsProperty={paramsProperty}
+        />
+      }
+    >
+      <EuiTextArea
+        fullWidth
+        isInvalid={errors && errors.length > 0 && inputTargetValue !== undefined}
+        name={paramsProperty}
+        value={inputTargetValue}
+        data-test-subj={`${paramsProperty}TextArea`}
+        onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => onChangeWithMessageVariable(e)}
+        onFocus={(e: React.FocusEvent<HTMLTextAreaElement>) => {
+          setCurrentTextElement(e.target);
+        }}
+        onBlur={() => {
+          if (!inputTargetValue) {
+            editAction(paramsProperty, '', index);
+          }
+        }}
+      />
+    </EuiFormRow>
+  );
+};
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/text_field_with_message_variables.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/text_field_with_message_variables.tsx
new file mode 100644
index 00000000000000..e280fd3f34e996
--- /dev/null
+++ b/x-pack/plugins/triggers_actions_ui/public/application/components/text_field_with_message_variables.tsx
@@ -0,0 +1,71 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+import React, { useState } from 'react';
+import { EuiFieldText } from '@elastic/eui';
+import './add_message_variables.scss';
+import { AddMessageVariables } from './add_message_variables';
+
+interface Props {
+  messageVariables: string[] | undefined;
+  paramsProperty: string;
+  index: number;
+  inputTargetValue?: string;
+  editAction: (property: string, value: any, index: number) => void;
+  errors?: string[];
+}
+
+export const TextFieldWithMessageVariables: React.FunctionComponent<Props> = ({
+  messageVariables,
+  paramsProperty,
+  index,
+  inputTargetValue,
+  editAction,
+  errors,
+}) => {
+  const [currentTextElement, setCurrentTextElement] = useState<HTMLInputElement | null>(null);
+
+  const onSelectMessageVariable = (variable: string) => {
+    const templatedVar = `{{${variable}}}`;
+    const startPosition = currentTextElement?.selectionStart ?? 0;
+    const endPosition = currentTextElement?.selectionEnd ?? 0;
+    const newValue =
+      (inputTargetValue ?? '').substring(0, startPosition) +
+      templatedVar +
+      (inputTargetValue ?? '').substring(endPosition, (inputTargetValue ?? '').length);
+    editAction(paramsProperty, newValue, index);
+  };
+
+  const onChangeWithMessageVariable = (e: React.ChangeEvent<HTMLInputElement>) => {
+    editAction(paramsProperty, e.target.value, index);
+  };
+
+  return (
+    <EuiFieldText
+      fullWidth
+      name={paramsProperty}
+      id={`${paramsProperty}Id`}
+      isInvalid={errors && errors.length > 0 && inputTargetValue !== undefined}
+      data-test-subj={`${paramsProperty}Input`}
+      value={inputTargetValue}
+      onChange={(e: React.ChangeEvent<HTMLInputElement>) => onChangeWithMessageVariable(e)}
+      onFocus={(e: React.FocusEvent<HTMLInputElement>) => {
+        setCurrentTextElement(e.target);
+      }}
+      onBlur={(e: React.FocusEvent<HTMLInputElement>) => {
+        if (!inputTargetValue) {
+          editAction(paramsProperty, '', index);
+        }
+      }}
+      append={
+        <AddMessageVariables
+          messageVariables={messageVariables}
+          onSelectEventHandler={(variable: string) => onSelectMessageVariable(variable)}
+          paramsProperty={paramsProperty}
+        />
+      }
+    />
+  );
+};
diff --git a/x-pack/test/functional_with_es_ssl/apps/triggers_actions_ui/alerts.ts b/x-pack/test/functional_with_es_ssl/apps/triggers_actions_ui/alerts.ts
index 8a50f7b3be2fe0..e05bfa7459492c 100644
--- a/x-pack/test/functional_with_es_ssl/apps/triggers_actions_ui/alerts.ts
+++ b/x-pack/test/functional_with_es_ssl/apps/triggers_actions_ui/alerts.ts
@@ -75,9 +75,19 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
       await find.clickByCssSelector('[data-test-subj="saveActionButtonModal"]:not(disabled)');
       const createdConnectorToastTitle = await pageObjects.common.closeToast();
       expect(createdConnectorToastTitle).to.eql(`Created '${slackConnectorName}'`);
-      await testSubjects.setValue('slackMessageTextArea', 'test message');
+      await testSubjects.setValue('messageTextArea', 'test message ');
       await testSubjects.click('messageAddVariableButton');
       await testSubjects.click('variableMenuButton-0');
+      const messageTextArea = await find.byCssSelector('[data-test-subj="messageTextArea"]');
+      expect(await messageTextArea.getAttribute('value')).to.eql('test message {{alertId}}');
+      await messageTextArea.type(' some additional text ');
+
+      await testSubjects.click('messageAddVariableButton');
+      await testSubjects.click('variableMenuButton-1');
+
+      expect(await messageTextArea.getAttribute('value')).to.eql(
+        'test message {{alertId}} some additional text {{alertName}}'
+      );
 
       await testSubjects.click('saveAlertButton');
       const toastTitle = await pageObjects.common.closeToast();