[Grokdebugger] Theme and Mode imports (elastic#50473) (elastic#50777)

* Added textmate theme and JSON mode imports

* Added text themes to other inputs [skip ci]

x-pack/legacy/plugins/grokdebugger/public/components/custom_patterns_input/custom_patterns_input.js

@@ -57,6 +57,8 @@ MSG message-id=<%{GREEDYDATA}>`;
         <EuiPanel paddingSize="s">
           <EuiCodeEditor
             width="100%"
+            theme="textmate"
+            mode="text"
             value={value}
             onChange={onChange}
             setOptions={{

x-pack/legacy/plugins/grokdebugger/public/components/event_input/event_input.js

@@ -28,6 +28,8 @@ export function EventInput({ value, onChange }) {
       <EuiPanel paddingSize="s">
         <EuiCodeEditor
           width="100%"
+          theme="textmate"
+          mode="text"
           value={value}
           onChange={onChange}
           setOptions={{

x-pack/legacy/plugins/grokdebugger/public/components/event_output/event_output.js

@@ -27,6 +27,7 @@ export function EventOutput({ value }) {
       <EuiPanel paddingSize="s">
         <EuiCodeEditor
           mode="json"
+          theme="textmate"
           isReadOnly
           width="100%"
           height="340px"

x-pack/legacy/plugins/grokdebugger/public/components/grok_debugger/brace_imports.ts

@@ -0,0 +1,9 @@
+/*
+ * 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 'brace/mode/json';
+import 'brace/mode/text';
+import 'brace/theme/textmate';

x-pack/legacy/plugins/grokdebugger/public/components/grok_debugger/grok_debugger.js

@@ -5,6 +5,9 @@
  */
 import React from 'react';
 import { isEmpty } from 'lodash';
+
+import './brace_imports';
+
 import {
   EuiForm,
   EuiButton,

x-pack/legacy/plugins/grokdebugger/public/components/pattern_input/pattern_input.js

@@ -29,6 +29,7 @@ export function PatternInput({ value, onChange }) {
       <EuiPanel paddingSize="s">
         <EuiCodeEditor
           width="100%"
+          theme="textmate"
           value={value}
           onChange={onChange}
           mode={new GrokMode()}