From 148ac4757d620321c22ed16a737540642d2b10f0 Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Wed, 11 Aug 2021 20:21:44 -0700
Subject: [PATCH] Add EuiCodeEditor to ES UI Shared.

---
 package.json                                  |   2 +-
 .../__snapshots__/code_editor.test.tsx.snap   | 627 ++++++++++++++++++
 .../components/code_editor/_code_editor.scss  |  38 ++
 .../code_editor/code_editor.test.tsx          | 103 +++
 .../components/code_editor/code_editor.tsx    | 309 +++++++++
 .../public/components/code_editor/index.scss  |   1 +
 .../public/components/code_editor/index.ts    |   9 +
 .../components/json_editor/json_editor.tsx    |   3 +-
 yarn.lock                                     |  14 +-
 9 files changed, 1092 insertions(+), 14 deletions(-)
 create mode 100644 src/plugins/es_ui_shared/public/components/code_editor/__snapshots__/code_editor.test.tsx.snap
 create mode 100644 src/plugins/es_ui_shared/public/components/code_editor/_code_editor.scss
 create mode 100644 src/plugins/es_ui_shared/public/components/code_editor/code_editor.test.tsx
 create mode 100644 src/plugins/es_ui_shared/public/components/code_editor/code_editor.tsx
 create mode 100644 src/plugins/es_ui_shared/public/components/code_editor/index.scss
 create mode 100644 src/plugins/es_ui_shared/public/components/code_editor/index.ts

diff --git a/package.json b/package.json
index d7a072d1caef0..a4625c60af5f0 100644
--- a/package.json
+++ b/package.json
@@ -336,7 +336,7 @@
     "re-resizable": "^6.1.1",
     "re2": "^1.15.4",
     "react": "^16.12.0",
-    "react-ace": "^5.9.0",
+    "react-ace": "^7.0.5",
     "react-beautiful-dnd": "^13.0.0",
     "react-color": "^2.13.8",
     "react-dom": "^16.12.0",
diff --git a/src/plugins/es_ui_shared/public/components/code_editor/__snapshots__/code_editor.test.tsx.snap b/src/plugins/es_ui_shared/public/components/code_editor/__snapshots__/code_editor.test.tsx.snap
new file mode 100644
index 0000000000000..aeab9a66c7694
--- /dev/null
+++ b/src/plugins/es_ui_shared/public/components/code_editor/__snapshots__/code_editor.test.tsx.snap
@@ -0,0 +1,627 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EuiCodeEditor behavior hint element should be disabled when the ui ace box gains focus 1`] = `
+<button
+  class="euiCodeEditorKeyboardHint"
+  data-test-subj="codeEditorHint"
+  id="generated-id_codeEditor"
+>
+  <p
+    class="euiText"
+  >
+    Press Enter to start editing.
+  </p>
+  <p
+    class="euiText"
+  >
+    When you're done, press Escape to stop editing.
+  </p>
+</button>
+`;
+
+exports[`EuiCodeEditor behavior hint element should be enabled when the ui ace box loses focus 1`] = `
+<button
+  class="euiCodeEditorKeyboardHint"
+  data-test-subj="codeEditorHint"
+  id="generated-id_codeEditor"
+>
+  <p
+    class="euiText"
+  >
+    Press Enter to start editing.
+  </p>
+  <p
+    class="euiText"
+  >
+    When you're done, press Escape to stop editing.
+  </p>
+</button>
+`;
+
+exports[`EuiCodeEditor behavior hint element should be tabable 1`] = `
+<button
+  class="euiCodeEditorKeyboardHint"
+  data-test-subj="codeEditorHint"
+  id="generated-id_codeEditor"
+>
+  <p
+    class="euiText"
+  >
+    Press Enter to start editing.
+  </p>
+  <p
+    class="euiText"
+  >
+    When you're done, press Escape to stop editing.
+  </p>
+</button>
+`;
+
+exports[`EuiCodeEditor is rendered 1`] = `
+<div
+  class="euiCodeEditorWrapper"
+  data-test-subj="test subject string"
+>
+  <button
+    class="euiCodeEditorKeyboardHint"
+    data-test-subj="codeEditorHint"
+    id="generated-id_codeEditor"
+  >
+    <p
+      class="euiText"
+    >
+      Press Enter to start editing.
+    </p>
+    <p
+      class="euiText"
+    >
+      When you're done, press Escape to stop editing.
+    </p>
+  </button>
+  <div
+    class=" ace_editor ace-tm testClass1 testClass2"
+    id="generated-id"
+    style="width: 500px; height: 500px;"
+  >
+    <textarea
+      aria-label="aria-label"
+      autocapitalize="off"
+      autocorrect="off"
+      class="ace_text-input"
+      spellcheck="false"
+      style="opacity: 0;"
+      tabindex="-1"
+      wrap="off"
+    />
+    <div
+      aria-hidden="true"
+      class="ace_gutter"
+    >
+      <div
+        class="ace_layer ace_gutter-layer ace_folding-enabled"
+      />
+      <div
+        class="ace_gutter-active-line"
+      />
+    </div>
+    <div
+      class="ace_scroller"
+    >
+      <div
+        class="ace_content"
+      >
+        <div
+          class="ace_layer ace_print-margin-layer"
+        >
+          <div
+            class="ace_print-margin"
+            style="left: 4px; visibility: visible;"
+          />
+        </div>
+        <div
+          class="ace_layer ace_marker-layer"
+        />
+        <div
+          class="ace_layer ace_text-layer"
+          style="padding: 0px 4px;"
+        />
+        <div
+          class="ace_layer ace_marker-layer"
+        />
+        <div
+          class="ace_layer ace_cursor-layer ace_hidden-cursors"
+        >
+          <div
+            class="ace_cursor"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      class="ace_scrollbar ace_scrollbar-v"
+      style="display: none; width: 20px;"
+    >
+      <div
+        class="ace_scrollbar-inner"
+        style="width: 20px;"
+      />
+    </div>
+    <div
+      class="ace_scrollbar ace_scrollbar-h"
+      style="display: none; height: 20px;"
+    >
+      <div
+        class="ace_scrollbar-inner"
+        style="height: 20px;"
+      />
+    </div>
+    <div
+      style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: hidden;"
+    >
+      <div
+        style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
+      />
+      <div
+        style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
+      >
+        XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`EuiCodeEditor props aria attributes allows setting aria-describedby on textbox 1`] = `
+<div
+  class="euiCodeEditorWrapper"
+  data-test-subj="codeEditorContainer"
+>
+  <button
+    class="euiCodeEditorKeyboardHint"
+    data-test-subj="codeEditorHint"
+    id="generated-id_codeEditor"
+  >
+    <p
+      class="euiText"
+    >
+      Press Enter to start editing.
+    </p>
+    <p
+      class="euiText"
+    >
+      When you're done, press Escape to stop editing.
+    </p>
+  </button>
+  <div
+    class=" ace_editor ace-tm"
+    id="generated-id"
+    style="width: 500px; height: 500px;"
+  >
+    <textarea
+      aria-describedby="describedbyid"
+      autocapitalize="off"
+      autocorrect="off"
+      class="ace_text-input"
+      spellcheck="false"
+      style="opacity: 0;"
+      tabindex="-1"
+      wrap="off"
+    />
+    <div
+      aria-hidden="true"
+      class="ace_gutter"
+    >
+      <div
+        class="ace_layer ace_gutter-layer ace_folding-enabled"
+      />
+      <div
+        class="ace_gutter-active-line"
+      />
+    </div>
+    <div
+      class="ace_scroller"
+    >
+      <div
+        class="ace_content"
+      >
+        <div
+          class="ace_layer ace_print-margin-layer"
+        >
+          <div
+            class="ace_print-margin"
+            style="left: 4px; visibility: visible;"
+          />
+        </div>
+        <div
+          class="ace_layer ace_marker-layer"
+        />
+        <div
+          class="ace_layer ace_text-layer"
+          style="padding: 0px 4px;"
+        />
+        <div
+          class="ace_layer ace_marker-layer"
+        />
+        <div
+          class="ace_layer ace_cursor-layer ace_hidden-cursors"
+        >
+          <div
+            class="ace_cursor"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      class="ace_scrollbar ace_scrollbar-v"
+      style="display: none; width: 20px;"
+    >
+      <div
+        class="ace_scrollbar-inner"
+        style="width: 20px;"
+      />
+    </div>
+    <div
+      class="ace_scrollbar ace_scrollbar-h"
+      style="display: none; height: 20px;"
+    >
+      <div
+        class="ace_scrollbar-inner"
+        style="height: 20px;"
+      />
+    </div>
+    <div
+      style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: hidden;"
+    >
+      <div
+        style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
+      />
+      <div
+        style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
+      >
+        XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`EuiCodeEditor props aria attributes allows setting aria-labelledby on textbox 1`] = `
+<div
+  class="euiCodeEditorWrapper"
+  data-test-subj="codeEditorContainer"
+>
+  <button
+    class="euiCodeEditorKeyboardHint"
+    data-test-subj="codeEditorHint"
+    id="generated-id_codeEditor"
+  >
+    <p
+      class="euiText"
+    >
+      Press Enter to start editing.
+    </p>
+    <p
+      class="euiText"
+    >
+      When you're done, press Escape to stop editing.
+    </p>
+  </button>
+  <div
+    class=" ace_editor ace-tm"
+    id="generated-id"
+    style="width: 500px; height: 500px;"
+  >
+    <textarea
+      aria-labelledby="labelledbyid"
+      autocapitalize="off"
+      autocorrect="off"
+      class="ace_text-input"
+      spellcheck="false"
+      style="opacity: 0;"
+      tabindex="-1"
+      wrap="off"
+    />
+    <div
+      aria-hidden="true"
+      class="ace_gutter"
+    >
+      <div
+        class="ace_layer ace_gutter-layer ace_folding-enabled"
+      />
+      <div
+        class="ace_gutter-active-line"
+      />
+    </div>
+    <div
+      class="ace_scroller"
+    >
+      <div
+        class="ace_content"
+      >
+        <div
+          class="ace_layer ace_print-margin-layer"
+        >
+          <div
+            class="ace_print-margin"
+            style="left: 4px; visibility: visible;"
+          />
+        </div>
+        <div
+          class="ace_layer ace_marker-layer"
+        />
+        <div
+          class="ace_layer ace_text-layer"
+          style="padding: 0px 4px;"
+        />
+        <div
+          class="ace_layer ace_marker-layer"
+        />
+        <div
+          class="ace_layer ace_cursor-layer ace_hidden-cursors"
+        >
+          <div
+            class="ace_cursor"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      class="ace_scrollbar ace_scrollbar-v"
+      style="display: none; width: 20px;"
+    >
+      <div
+        class="ace_scrollbar-inner"
+        style="width: 20px;"
+      />
+    </div>
+    <div
+      class="ace_scrollbar ace_scrollbar-h"
+      style="display: none; height: 20px;"
+    >
+      <div
+        class="ace_scrollbar-inner"
+        style="height: 20px;"
+      />
+    </div>
+    <div
+      style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: hidden;"
+    >
+      <div
+        style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
+      />
+      <div
+        style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
+      >
+        XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`EuiCodeEditor props isReadOnly renders alternate hint text 1`] = `
+<div
+  class="euiCodeEditorWrapper"
+  data-test-subj="codeEditorContainer"
+>
+  <button
+    class="euiCodeEditorKeyboardHint"
+    data-test-subj="codeEditorHint"
+    id="generated-id_codeEditor"
+  >
+    <p
+      class="euiText"
+    >
+      Press Enter to start interacting with the code.
+    </p>
+    <p
+      class="euiText"
+    >
+      When you're done, press Escape to stop interacting with the code.
+    </p>
+  </button>
+  <div
+    class=" ace_editor ace-tm"
+    id="generated-id"
+    style="width: 500px; height: 500px;"
+  >
+    <textarea
+      autocapitalize="off"
+      autocorrect="off"
+      class="ace_text-input"
+      spellcheck="false"
+      style="opacity: 0;"
+      tabindex="-1"
+      wrap="off"
+    />
+    <div
+      aria-hidden="true"
+      class="ace_gutter"
+    >
+      <div
+        class="ace_layer ace_gutter-layer ace_folding-enabled"
+      />
+      <div
+        class="ace_gutter-active-line"
+        style="display: none;"
+      />
+    </div>
+    <div
+      class="ace_scroller"
+    >
+      <div
+        class="ace_content"
+      >
+        <div
+          class="ace_layer ace_print-margin-layer"
+        >
+          <div
+            class="ace_print-margin"
+            style="left: 4px; visibility: visible;"
+          />
+        </div>
+        <div
+          class="ace_layer ace_marker-layer"
+        />
+        <div
+          class="ace_layer ace_text-layer"
+          style="padding: 0px 4px;"
+        />
+        <div
+          class="ace_layer ace_marker-layer"
+        />
+        <div
+          class="ace_layer ace_cursor-layer ace_hidden-cursors"
+        >
+          <div
+            class="ace_cursor"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      class="ace_scrollbar ace_scrollbar-v"
+      style="display: none; width: 20px;"
+    >
+      <div
+        class="ace_scrollbar-inner"
+        style="width: 20px;"
+      />
+    </div>
+    <div
+      class="ace_scrollbar ace_scrollbar-h"
+      style="display: none; height: 20px;"
+    >
+      <div
+        class="ace_scrollbar-inner"
+        style="height: 20px;"
+      />
+    </div>
+    <div
+      style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: hidden;"
+    >
+      <div
+        style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
+      />
+      <div
+        style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
+      >
+        XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`EuiCodeEditor props theme renders terminal theme 1`] = `
+<div
+  class="euiCodeEditorWrapper"
+  data-test-subj="codeEditorContainer"
+>
+  <button
+    class="euiCodeEditorKeyboardHint"
+    data-test-subj="codeEditorHint"
+    id="generated-id_codeEditor"
+  >
+    <p
+      class="euiText"
+    >
+      Press Enter to start editing.
+    </p>
+    <p
+      class="euiText"
+    >
+      When you're done, press Escape to stop editing.
+    </p>
+  </button>
+  <div
+    class=" ace_editor ace-tm"
+    id="generated-id"
+    style="width: 500px; height: 500px;"
+  >
+    <textarea
+      autocapitalize="off"
+      autocorrect="off"
+      class="ace_text-input"
+      spellcheck="false"
+      style="opacity: 0;"
+      tabindex="-1"
+      wrap="off"
+    />
+    <div
+      aria-hidden="true"
+      class="ace_gutter"
+    >
+      <div
+        class="ace_layer ace_gutter-layer ace_folding-enabled"
+      />
+      <div
+        class="ace_gutter-active-line"
+      />
+    </div>
+    <div
+      class="ace_scroller"
+    >
+      <div
+        class="ace_content"
+      >
+        <div
+          class="ace_layer ace_print-margin-layer"
+        >
+          <div
+            class="ace_print-margin"
+            style="left: 4px; visibility: visible;"
+          />
+        </div>
+        <div
+          class="ace_layer ace_marker-layer"
+        />
+        <div
+          class="ace_layer ace_text-layer"
+          style="padding: 0px 4px;"
+        />
+        <div
+          class="ace_layer ace_marker-layer"
+        />
+        <div
+          class="ace_layer ace_cursor-layer ace_hidden-cursors"
+        >
+          <div
+            class="ace_cursor"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      class="ace_scrollbar ace_scrollbar-v"
+      style="display: none; width: 20px;"
+    >
+      <div
+        class="ace_scrollbar-inner"
+        style="width: 20px;"
+      />
+    </div>
+    <div
+      class="ace_scrollbar ace_scrollbar-h"
+      style="display: none; height: 20px;"
+    >
+      <div
+        class="ace_scrollbar-inner"
+        style="height: 20px;"
+      />
+    </div>
+    <div
+      style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: hidden;"
+    >
+      <div
+        style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
+      />
+      <div
+        style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
+      >
+        XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/plugins/es_ui_shared/public/components/code_editor/_code_editor.scss b/src/plugins/es_ui_shared/public/components/code_editor/_code_editor.scss
new file mode 100644
index 0000000000000..a3acf6b46e1de
--- /dev/null
+++ b/src/plugins/es_ui_shared/public/components/code_editor/_code_editor.scss
@@ -0,0 +1,38 @@
+.euiCodeEditorWrapper {
+  position: relative;
+
+  .ace_hidden-cursors {
+    opacity: 0;
+  }
+
+  &.euiCodeEditorWrapper-isEditing {
+    .ace_hidden-cursors {
+      opacity: 1;
+    }
+  }
+}
+
+.euiCodeEditorKeyboardHint {
+  position: absolute;
+  top: 0;
+  left: 0;
+  background: transparentize($euiColorGhost, .3);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  opacity: 0;
+  cursor: pointer;
+  height: 100%;
+  width: 100%;
+
+  &:focus {
+    opacity: 1;
+    border: 2px solid $euiColorPrimary;
+    z-index: $euiZLevel1;
+  }
+
+  &.euiCodeEditorKeyboardHint-isInactive {
+    display: none;
+  }
+}
diff --git a/src/plugins/es_ui_shared/public/components/code_editor/code_editor.test.tsx b/src/plugins/es_ui_shared/public/components/code_editor/code_editor.test.tsx
new file mode 100644
index 0000000000000..00c9aa08532f4
--- /dev/null
+++ b/src/plugins/es_ui_shared/public/components/code_editor/code_editor.test.tsx
@@ -0,0 +1,103 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+import { mount, ReactWrapper } from 'enzyme';
+import { EuiCodeEditor } from './code_editor';
+// @ts-ignore
+import { keys } from '@elastic/eui/lib/services';
+import { findTestSubject, requiredProps, takeMountedSnapshot } from '@elastic/eui/lib/test';
+
+describe('EuiCodeEditor', () => {
+  test('is rendered', () => {
+    const component = mount(<EuiCodeEditor {...requiredProps} />);
+    expect(takeMountedSnapshot(component)).toMatchSnapshot();
+  });
+
+  describe('props', () => {
+    describe('isReadOnly', () => {
+      test('renders alternate hint text', () => {
+        const component = mount(<EuiCodeEditor isReadOnly />);
+        expect(takeMountedSnapshot(component)).toMatchSnapshot();
+      });
+    });
+
+    describe('theme', () => {
+      test('renders terminal theme', () => {
+        const component = mount(<EuiCodeEditor theme="terminal" />);
+        expect(takeMountedSnapshot(component)).toMatchSnapshot();
+      });
+    });
+
+    describe('aria attributes', () => {
+      test('allows setting aria-labelledby on textbox', () => {
+        const component = mount(<EuiCodeEditor aria-labelledby="labelledbyid" />);
+        expect(takeMountedSnapshot(component)).toMatchSnapshot();
+      });
+
+      test('allows setting aria-describedby on textbox', () => {
+        const component = mount(<EuiCodeEditor aria-describedby="describedbyid" />);
+        expect(takeMountedSnapshot(component)).toMatchSnapshot();
+      });
+    });
+  });
+
+  describe('behavior', () => {
+    let component: ReactWrapper;
+
+    beforeEach(() => {
+      component = mount(<EuiCodeEditor />);
+    });
+
+    describe('hint element', () => {
+      test('should be tabable', () => {
+        const hint = findTestSubject(component, 'codeEditorHint').getDOMNode();
+        expect(hint).toMatchSnapshot();
+      });
+
+      test('should be disabled when the ui ace box gains focus', () => {
+        const hint = findTestSubject(component, 'codeEditorHint');
+        hint.simulate('keyup', { key: keys.ENTER });
+        expect(findTestSubject(component, 'codeEditorHint').getDOMNode()).toMatchSnapshot();
+      });
+
+      test('should be enabled when the ui ace box loses focus', () => {
+        const hint = findTestSubject(component, 'codeEditorHint');
+        hint.simulate('keyup', { key: keys.ENTER });
+        // @ts-ignore onBlurAce is known to exist and its params are only passed through to the onBlur callback
+        component.instance().onBlurAce();
+        expect(findTestSubject(component, 'codeEditorHint').getDOMNode()).toMatchSnapshot();
+      });
+    });
+
+    describe('interaction', () => {
+      test('bluring the ace textbox should call a passed onBlur prop', () => {
+        const blurSpy = jest.fn().mockName('blurSpy');
+        const el = mount(<EuiCodeEditor onBlur={blurSpy} />);
+        // @ts-ignore onBlurAce is known to exist and its params are only passed through to the onBlur callback
+        el.instance().onBlurAce();
+        expect(blurSpy).toHaveBeenCalled();
+      });
+
+      test('pressing escape in ace textbox will enable overlay', () => {
+        // We cannot simulate the `commands` path, but this interaction still
+        // serves as a fallback in cases where `commands` is unavailable.
+        // @ts-ignore onFocusAce is known to exist
+        component.instance().onFocusAce();
+        // @ts-ignore onKeydownAce is known to exist and its params' values are unimportant
+        component.instance().onKeydownAce({
+          preventDefault: () => {},
+          stopPropagation: () => {},
+          key: keys.ESCAPE,
+        });
+        const hint = findTestSubject(component, 'codeEditorHint').getDOMNode();
+        expect(hint).toBe(document.activeElement);
+      });
+    });
+  });
+});
diff --git a/src/plugins/es_ui_shared/public/components/code_editor/code_editor.tsx b/src/plugins/es_ui_shared/public/components/code_editor/code_editor.tsx
new file mode 100644
index 0000000000000..d560736fa3926
--- /dev/null
+++ b/src/plugins/es_ui_shared/public/components/code_editor/code_editor.tsx
@@ -0,0 +1,309 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React, { Component, AriaAttributes } from 'react';
+import classNames from 'classnames';
+import AceEditor, { IAceEditorProps } from 'react-ace';
+import { EuiI18n } from '@elastic/eui';
+// @ts-ignore
+import { htmlIdGenerator, keys, warnOnce } from '@elastic/eui/lib/services';
+
+import './index.scss';
+
+/**
+ * Wraps Object.keys with proper typescript definition of the resulting array
+ */
+function keysOf<T, K extends keyof T>(obj: T): K[] {
+  return Object.keys(obj) as K[];
+}
+
+const DEFAULT_MODE = 'text';
+const DEFAULT_THEME = 'textmate';
+
+function setOrRemoveAttribute(
+  element: HTMLTextAreaElement,
+  attributeName: SupportedAriaAttribute,
+  value: SupportedAriaAttributes[SupportedAriaAttribute]
+) {
+  if (value === null || value === undefined) {
+    element.removeAttribute(attributeName);
+  } else {
+    element.setAttribute(attributeName, value);
+  }
+}
+
+type SupportedAriaAttribute = 'aria-label' | 'aria-labelledby' | 'aria-describedby';
+type SupportedAriaAttributes = Pick<AriaAttributes, SupportedAriaAttribute>;
+
+export interface EuiCodeEditorProps extends SupportedAriaAttributes, Omit<IAceEditorProps, 'mode'> {
+  width?: string;
+  height?: string;
+  onBlur?: IAceEditorProps['onBlur'];
+  onFocus?: IAceEditorProps['onFocus'];
+  isReadOnly?: boolean;
+  setOptions: IAceEditorProps['setOptions'];
+  cursorStart?: number;
+  'data-test-subj'?: string;
+  /**
+   * Select the `brace` theme
+   * The matching theme file must also be imported from `brace` (e.g., `import 'brace/theme/github';`)
+   */
+  theme?: IAceEditorProps['theme'];
+
+  /**
+   * Use string for a built-in mode or object for a custom mode
+   */
+  mode?: IAceEditorProps['mode'] | object;
+  id?: string;
+}
+
+export interface EuiCodeEditorState {
+  isHintActive: boolean;
+  isEditing: boolean;
+  name: string;
+}
+
+export class EuiCodeEditor extends Component<EuiCodeEditorProps, EuiCodeEditorState> {
+  static defaultProps = {
+    setOptions: {},
+  };
+
+  state: EuiCodeEditorState = {
+    isHintActive: true,
+    isEditing: false,
+    name: htmlIdGenerator()(),
+  };
+
+  constructor(props: EuiCodeEditorProps) {
+    super(props);
+    warnOnce(
+      'EuiCodeEditor',
+      `[EUI] - DEPRECATION: \`EuiCodeEditor\` is deprecated and will be removed in a future release.
+See https://ela.st/euicodeeditor for migration options.`
+    );
+  }
+
+  idGenerator = htmlIdGenerator();
+  aceEditor: AceEditor | null = null;
+  editorHint: HTMLButtonElement | null = null;
+
+  aceEditorRef = (aceEditor: AceEditor | null) => {
+    if (aceEditor) {
+      this.aceEditor = aceEditor;
+      const textbox = aceEditor.editor.textInput.getElement() as HTMLTextAreaElement;
+      textbox.tabIndex = -1;
+      textbox.addEventListener('keydown', this.onKeydownAce);
+      setOrRemoveAttribute(textbox, 'aria-label', this.props['aria-label']);
+      setOrRemoveAttribute(textbox, 'aria-labelledby', this.props['aria-labelledby']);
+      setOrRemoveAttribute(textbox, 'aria-describedby', this.props['aria-describedby']);
+    }
+  };
+
+  onEscToExit = () => {
+    this.stopEditing();
+    if (this.editorHint) {
+      this.editorHint.focus();
+    }
+  };
+
+  onKeydownAce = (event: KeyboardEvent) => {
+    if (event.key === keys.ESCAPE) {
+      event.preventDefault();
+      event.stopPropagation();
+      // Handles exiting edit mode when `isReadOnly` is set.
+      // Other 'esc' cases handled by `stopEditingOnEsc` command.
+      // Would run after `stopEditingOnEsc`.
+      if (this.aceEditor !== null && !this.aceEditor.editor.completer && this.state.isEditing) {
+        this.onEscToExit();
+      }
+    }
+  };
+
+  onFocusAce: IAceEditorProps['onFocus'] = (event, editor) => {
+    this.setState({
+      isEditing: true,
+    });
+    if (this.props.onFocus) {
+      this.props.onFocus(event, editor);
+    }
+  };
+
+  onBlurAce: IAceEditorProps['onBlur'] = (event, editor) => {
+    this.stopEditing();
+    if (this.props.onBlur) {
+      this.props.onBlur(event, editor);
+    }
+  };
+
+  startEditing = () => {
+    this.setState({
+      isHintActive: false,
+    });
+    if (this.aceEditor !== null) {
+      this.aceEditor.editor.textInput.focus();
+    }
+  };
+
+  stopEditing() {
+    this.setState({
+      isHintActive: true,
+      isEditing: false,
+    });
+  }
+
+  isCustomMode() {
+    return typeof this.props.mode === 'object';
+  }
+
+  setCustomMode() {
+    if (this.aceEditor !== null) {
+      this.aceEditor.editor.getSession().setMode(this.props.mode);
+    }
+  }
+
+  componentDidMount() {
+    if (this.isCustomMode()) {
+      this.setCustomMode();
+    }
+    const { isReadOnly, id } = this.props;
+
+    const textareaProps: {
+      id?: string;
+      readOnly?: boolean;
+    } = { id, readOnly: isReadOnly };
+
+    const el = document.getElementById(this.state.name);
+    if (el) {
+      const textarea = el.querySelector('textarea');
+      if (textarea)
+        keysOf(textareaProps).forEach((key) => {
+          if (textareaProps[key]) textarea.setAttribute(`${key}`, textareaProps[key]!.toString());
+        });
+    }
+  }
+
+  componentDidUpdate(prevProps: EuiCodeEditorProps) {
+    if (this.props.mode !== prevProps.mode && this.isCustomMode()) {
+      this.setCustomMode();
+    }
+  }
+
+  render() {
+    const {
+      width,
+      height,
+      onBlur,
+      isReadOnly,
+      setOptions,
+      cursorStart,
+      mode = DEFAULT_MODE,
+      'data-test-subj': dataTestSubj = 'codeEditorContainer',
+      theme = DEFAULT_THEME,
+      commands = [],
+      ...rest
+    } = this.props;
+
+    const classes = classNames('euiCodeEditorWrapper', {
+      'euiCodeEditorWrapper-isEditing': this.state.isEditing,
+    });
+
+    const promptClasses = classNames('euiCodeEditorKeyboardHint', {
+      'euiCodeEditorKeyboardHint-isInactive': !this.state.isHintActive,
+    });
+
+    let filteredCursorStart;
+
+    const options: IAceEditorProps['setOptions'] = { ...setOptions };
+
+    if (isReadOnly) {
+      // Put the cursor at the beginning of the editor, so that it doesn't look like
+      // a prompt to begin typing.
+      filteredCursorStart = -1;
+
+      Object.assign(options, {
+        readOnly: true,
+        highlightActiveLine: false,
+        highlightGutterLine: false,
+      });
+    } else {
+      filteredCursorStart = cursorStart;
+    }
+
+    const prompt = (
+      <button
+        className={promptClasses}
+        id={this.idGenerator('codeEditor')}
+        ref={(hint) => {
+          this.editorHint = hint;
+        }}
+        onClick={this.startEditing}
+        data-test-subj="codeEditorHint"
+      >
+        <p className="euiText">
+          {isReadOnly ? (
+            <EuiI18n
+              token="euiCodeEditor.startInteracting"
+              default="Press Enter to start interacting with the code."
+            />
+          ) : (
+            <EuiI18n token="euiCodeEditor.startEditing" default="Press Enter to start editing." />
+          )}
+        </p>
+
+        <p className="euiText">
+          {isReadOnly ? (
+            <EuiI18n
+              token="euiCodeEditor.stopInteracting"
+              default="When you're done, press Escape to stop interacting with the code."
+            />
+          ) : (
+            <EuiI18n
+              token="euiCodeEditor.stopEditing"
+              default="When you're done, press Escape to stop editing."
+            />
+          )}
+        </p>
+      </button>
+    );
+
+    return (
+      <div className={classes} style={{ width, height }} data-test-subj={dataTestSubj}>
+        {prompt}
+
+        <AceEditor
+          // Setting a default, existing `mode` is necessary to properly initialize the editor
+          // prior to dynamically setting a custom mode (https://github.com/elastic/eui/pull/2616)
+          mode={this.isCustomMode() ? DEFAULT_MODE : (mode as string)} // https://github.com/securingsincity/react-ace/pull/771
+          name={this.state.name}
+          theme={theme}
+          ref={this.aceEditorRef}
+          width={width}
+          height={height}
+          onFocus={this.onFocusAce}
+          onBlur={this.onBlurAce}
+          setOptions={options}
+          editorProps={{
+            $blockScrolling: Infinity,
+          }}
+          cursorStart={filteredCursorStart}
+          commands={[
+            // Handles exiting edit mode in all cases except `isReadOnly`
+            // Runs before `onKeydownAce`.
+            {
+              name: 'stopEditingOnEsc',
+              bindKey: { win: 'Esc', mac: 'Esc' },
+              exec: this.onEscToExit,
+            },
+            ...commands,
+          ]}
+          {...rest}
+        />
+      </div>
+    );
+  }
+}
diff --git a/src/plugins/es_ui_shared/public/components/code_editor/index.scss b/src/plugins/es_ui_shared/public/components/code_editor/index.scss
new file mode 100644
index 0000000000000..e68320413af86
--- /dev/null
+++ b/src/plugins/es_ui_shared/public/components/code_editor/index.scss
@@ -0,0 +1 @@
+@import 'code_editor';
diff --git a/src/plugins/es_ui_shared/public/components/code_editor/index.ts b/src/plugins/es_ui_shared/public/components/code_editor/index.ts
new file mode 100644
index 0000000000000..f4933785cf7ae
--- /dev/null
+++ b/src/plugins/es_ui_shared/public/components/code_editor/index.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
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export { EuiCodeEditor, EuiCodeEditorProps } from './code_editor';
diff --git a/src/plugins/es_ui_shared/public/components/json_editor/json_editor.tsx b/src/plugins/es_ui_shared/public/components/json_editor/json_editor.tsx
index 2e4fe3619d314..9eb7695bbae00 100644
--- a/src/plugins/es_ui_shared/public/components/json_editor/json_editor.tsx
+++ b/src/plugins/es_ui_shared/public/components/json_editor/json_editor.tsx
@@ -7,9 +7,10 @@
  */
 
 import React, { useCallback, useMemo } from 'react';
-import { EuiFormRow, EuiCodeEditor } from '@elastic/eui';
+import { EuiFormRow } from '@elastic/eui';
 import { debounce } from 'lodash';
 
+import { EuiCodeEditor } from '../code_editor';
 import { useJson, OnJsonEditorUpdateHandler } from './use_json';
 
 interface Props<T extends object = { [key: string]: any }> {
diff --git a/yarn.lock b/yarn.lock
index 5ff06955b63cb..41e153445f5c8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8500,7 +8500,7 @@ brace-expansion@^1.1.7:
     balanced-match "^1.0.0"
     concat-map "0.0.1"
 
-brace@0.11.1, brace@^0.11.0, brace@^0.11.1:
+brace@0.11.1, brace@^0.11.1:
   version "0.11.1"
   resolved "https://registry.yarnpkg.com/brace/-/brace-0.11.1.tgz#4896fcc9d544eef45f4bb7660db320d3b379fe58"
   integrity sha1-SJb8ydVE7vRfS7dmDbMg07N5/lg=
@@ -18684,7 +18684,7 @@ lodash.isempty@^4.4.0:
   resolved "https://registry.yarnpkg.com/lodash.isempty/-/lodash.isempty-4.4.0.tgz#6f86cbedd8be4ec987be9aaf33c9684db1b31e7e"
   integrity sha1-b4bL7di+TsmHvpqvM8loTbGzHn4=
 
-lodash.isequal@^4.0.0, lodash.isequal@^4.1.1, lodash.isequal@^4.5.0:
+lodash.isequal@^4.0.0, lodash.isequal@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0"
   integrity sha1-QVxEePK8wwEgwizhDtMib30+GOA=
@@ -22865,16 +22865,6 @@ re2@^1.15.4:
     nan "^2.14.1"
     node-gyp "^7.0.0"
 
-react-ace@^5.9.0:
-  version "5.9.0"
-  resolved "https://registry.yarnpkg.com/react-ace/-/react-ace-5.9.0.tgz#427a1cc4869b960a6f9748aa7eb169a9269fc336"
-  integrity sha512-r6Tuce6seG05g9kT2Tio6DWohy06knG7e5u9OfhvMquZL+Cyu4eqPf60K1Vi2RXlS3+FWrdG8Rinwu4+oQjjgw==
-  dependencies:
-    brace "^0.11.0"
-    lodash.get "^4.4.2"
-    lodash.isequal "^4.1.1"
-    prop-types "^15.5.8"
-
 react-ace@^7.0.5:
   version "7.0.5"
   resolved "https://registry.yarnpkg.com/react-ace/-/react-ace-7.0.5.tgz#798299fd52ddf3a3dcc92afc5865538463544f01"