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 957c79a5c5123..655f64995d147 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.test.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/email.test.tsx
index 33ec7772ec73e..2b05c04e23e23 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/email.test.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/email.test.tsx
@@ -273,7 +273,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.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/email.tsx
index 5acc20a9736b9..5644f6c70d198 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/email.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/email.tsx
@@ -12,7 +12,6 @@ import {
   EuiFieldNumber,
   EuiFieldPassword,
   EuiComboBox,
-  EuiTextArea,
   EuiButtonEmpty,
   EuiSwitch,
   EuiFormRow,
@@ -25,7 +24,8 @@ import {
   ActionParamsProps,
 } from '../../../types';
 import { EmailActionParams, EmailActionConnector } 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 function getActionType(): ActionTypeModel {
   const mailformat = /^[^@\s]+@[^@\s]+$/;
@@ -372,14 +372,6 @@ const EmailParamsFields: React.FunctionComponent<ActionParamsProps<EmailActionPa
     // 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
@@ -536,68 +528,30 @@ const EmailParamsFields: React.FunctionComponent<ActionParamsProps<EmailActionPa
             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.test.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/es_index.test.tsx
index f8cfa6c03e432..774e73401895d 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/es_index.test.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/es_index.test.tsx
@@ -224,7 +224,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.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/es_index.tsx
index b699438fda2b8..2564e648baa71 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/es_index.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/es_index.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, useState, useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
 import {
   EuiFormRow,
   EuiSwitch,
   EuiSpacer,
-  EuiCodeEditor,
   EuiComboBox,
   EuiComboBoxOptionOption,
   EuiSelect,
@@ -17,7 +16,6 @@ import {
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
-import { useXJsonMode } from '../../../../../../../src/plugins/es_ui_shared/static/ace_x_json/hooks';
 import {
   ActionTypeModel,
   ActionConnectorFieldsProps,
@@ -32,7 +30,7 @@ import {
   getIndexOptions,
   getIndexPatterns,
 } from '../../../common/index_controls';
-import { AddMessageVariables } from '../add_message_variables';
+import { JsonEditorWithMessageVariables } from '../json_editor_with_message_variables';
 
 export function getActionType(): ActionTypeModel {
   return {
@@ -278,62 +276,36 @@ const IndexParamsFields: React.FunctionComponent<ActionParamsProps<IndexActionPa
   messageVariables,
 }) => {
   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',
         }
-      >
-        <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>
+      )}
+      aria-label={i18n.translate(
+        'xpack.triggersActionsUI.components.builtinActionTypes.indexAction.jsonDocAriaLabel',
+        {
+          defaultMessage: 'Code editor',
+        }
+      )}
+      onDocumentsChange={onDocumentsChange}
+    />
   );
 };
 
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/pagerduty.test.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/pagerduty.test.tsx
index 5c2c75fe74c0c..6829384846343 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/pagerduty.test.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/pagerduty.test.tsx
@@ -188,7 +188,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.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/pagerduty.tsx
index 46ed685249c4f..83a99098b4161 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/pagerduty.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/pagerduty.tsx
@@ -23,8 +23,8 @@ import {
 } from '../../../types';
 import { PagerDutyActionParams, PagerDutyActionConnector } from './types';
 import pagerDutySvg from './pagerduty.svg';
-import { AddMessageVariables } from '../add_message_variables';
 import { hasMustacheTokens } from '../../lib/has_mustache_tokens';
+import { TextFieldWithMessageVariables } from '../text_field_with_message_variables';
 
 export function getActionType(): ActionTypeModel {
   return {
@@ -262,14 +262,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>
@@ -326,29 +318,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>
@@ -363,32 +339,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>
@@ -401,29 +359,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
@@ -434,27 +376,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
@@ -465,27 +393,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
@@ -499,30 +413,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
@@ -534,27 +432,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.test.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/server_log.test.tsx
index 124d02a18f327..b4321c0942cc9 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/server_log.test.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/server_log.test.tsx
@@ -111,7 +111,7 @@ 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();
   });
 
   test('params validation fails when message is not valid', () => {
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/server_log.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/server_log.tsx
index 5591dcf062383..bff536e0895ef 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/server_log.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/server_log.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 { ActionTypeModel, ValidationResult, ActionParamsProps } from '../../../types';
 import { ServerLogActionParams } from './types';
-import { AddMessageVariables } from '../add_message_variables';
+import { TextAreaWithMessageVariables } from '../text_area_with_message_variables';
 
 export function getActionType(): ActionTypeModel {
   return {
@@ -73,10 +73,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
@@ -101,43 +97,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.test.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/slack.test.tsx
index b3dedc0847e40..82e94e20d511b 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/slack.test.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/slack.test.tsx
@@ -140,10 +140,10 @@ 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'
+    );
   });
 
   test('params validation fails when message is not valid', () => {
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/slack.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/slack.tsx
index cfe278399583c..4f4428ebd7467 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/slack.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/slack.tsx
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 import React, { Fragment, useEffect } from 'react';
-import { EuiFieldText, EuiTextArea, EuiFormRow, EuiLink } from '@elastic/eui';
+import { EuiFieldText, EuiFormRow, EuiLink } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 import {
@@ -14,7 +14,7 @@ import {
   ActionParamsProps,
 } from '../../../types';
 import { SlackActionParams, SlackActionConnector } from './types';
-import { AddMessageVariables } from '../add_message_variables';
+import { TextAreaWithMessageVariables } from '../text_area_with_message_variables';
 
 export function getActionType(): ActionTypeModel {
   return {
@@ -140,49 +140,20 @@ 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.test.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/webhook.test.tsx
index 8113f7d993107..97d2f8b3c3294 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/webhook.test.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/webhook.test.tsx
@@ -152,10 +152,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.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/webhook.tsx
index 982f4d32c79ed..45a8f500f826c 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/webhook.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/webhook.tsx
@@ -19,7 +19,6 @@ import {
   EuiDescriptionListDescription,
   EuiDescriptionListTitle,
   EuiTitle,
-  EuiCodeEditor,
   EuiSwitch,
   EuiButtonEmpty,
 } from '@elastic/eui';
@@ -31,7 +30,7 @@ import {
   ActionParamsProps,
 } from '../../../types';
 import { WebhookActionParams, WebhookActionConnector } from './types';
-import { AddMessageVariables } from '../add_message_variables';
+import { JsonEditorWithMessageVariables } from '../json_editor_with_message_variables';
 
 const HTTP_VERBS = ['post', 'put'];
 
@@ -465,48 +464,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 0000000000000..2aac389dce5ec
--- /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 0000000000000..0b8a9349ad5fb
--- /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 0000000000000..e280fd3f34e99
--- /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 b56e1096a076b..8a07e6e077b21 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();