From fc4d869a86c4ebe9b85ae5a0f86c547926271e60 Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Tue, 10 Nov 2020 12:56:13 +0000
Subject: [PATCH 01/23] Better support extend the md editor to full height

---
 CHANGELOG.md                                  |   1 +
 .../markdown_editor.test.tsx.snap             | 438 +++++++++++++++++-
 .../_markdown_editor_drop_zone.scss           |   1 -
 .../markdown_editor/markdown_editor.test.tsx  |  34 ++
 .../markdown_editor/markdown_editor.tsx       |   7 +
 .../markdown_editor_text_area.tsx             |  13 +-
 6 files changed, 489 insertions(+), 5 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0d57bb62b8e..2f8c8f3d365 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,7 @@
 - Added `EuiColorPaletteDisplay` component ([#3865](https://github.com/elastic/eui/pull/3865))
 - Added `initialFocusedItemIndex` support to `EuiContextMenuPanelDescriptor` ([#4223](https://github.com/elastic/eui/pull/4223))
 - Added `role="alert"` and `aria-live="assertive"` to `EuiForm`'s `EuiCallOut` for the errors ([#4238](https://github.com/elastic/eui/pull/4238))
+- Added a `textareaClassName` prop to `EuiMarkdownEditor` to better to better support extend it to full height ([#3865](https://github.com/elastic/eui/pull/3865))
 
 **Bug fixes**
 
diff --git a/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap b/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap
index 628c25a8f8d..a110057ee39 100644
--- a/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap
+++ b/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap
@@ -186,7 +186,443 @@ exports[`EuiMarkdownEditor is rendered 1`] = `
         class="euiMarkdownEditorTextArea"
         id="editorId"
         rows="6"
-        style="height:calc(116px"
+        style="height:calc(116px)"
+      />
+      <div
+        class="euiMarkdownEditorFooter"
+      >
+        <div
+          class="euiMarkdownEditorFooter__actions"
+        />
+        <button
+          aria-label="Show markdown help"
+          class="euiButtonIcon euiButtonIcon--text euiMarkdownEditorFooter__help"
+          type="button"
+        >
+          <span
+            aria-hidden="true"
+            class="euiButtonIcon__icon"
+            data-euiicon-type="MarkdownLogo"
+          />
+        </button>
+      </div>
+      <input
+        autocomplete="off"
+        multiple=""
+        style="display:none"
+        tabindex="-1"
+        type="file"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`EuiMarkdownEditor props height is rendered 1`] = `
+<div
+  class="euiMarkdownEditor testClass1 testClass2"
+  data-test-subj="test subject string"
+>
+  <div
+    class="euiMarkdownEditorToolbar"
+  >
+    <div
+      class="euiMarkdownEditorToolbar__buttons"
+    >
+      <span
+        class="euiToolTipAnchor"
+      >
+        <button
+          aria-label="Bold"
+          class="euiButtonIcon euiButtonIcon--text"
+          type="button"
+        >
+          <span
+            aria-hidden="true"
+            class="euiButtonIcon__icon"
+            data-euiicon-type="editorBold"
+          />
+        </button>
+      </span>
+      <span
+        class="euiToolTipAnchor"
+      >
+        <button
+          aria-label="Italic"
+          class="euiButtonIcon euiButtonIcon--text"
+          type="button"
+        >
+          <span
+            aria-hidden="true"
+            class="euiButtonIcon__icon"
+            data-euiicon-type="editorItalic"
+          />
+        </button>
+      </span>
+      <span
+        class="euiMarkdownEditorToolbar__divider"
+      />
+      <span
+        class="euiToolTipAnchor"
+      >
+        <button
+          aria-label="Unordered list"
+          class="euiButtonIcon euiButtonIcon--text"
+          type="button"
+        >
+          <span
+            aria-hidden="true"
+            class="euiButtonIcon__icon"
+            data-euiicon-type="editorUnorderedList"
+          />
+        </button>
+      </span>
+      <span
+        class="euiToolTipAnchor"
+      >
+        <button
+          aria-label="Ordered list"
+          class="euiButtonIcon euiButtonIcon--text"
+          type="button"
+        >
+          <span
+            aria-hidden="true"
+            class="euiButtonIcon__icon"
+            data-euiicon-type="editorOrderedList"
+          />
+        </button>
+      </span>
+      <span
+        class="euiToolTipAnchor"
+      >
+        <button
+          aria-label="Task list"
+          class="euiButtonIcon euiButtonIcon--text"
+          type="button"
+        >
+          <span
+            aria-hidden="true"
+            class="euiButtonIcon__icon"
+            data-euiicon-type="MarkdownCheckmark"
+          />
+        </button>
+      </span>
+      <span
+        class="euiMarkdownEditorToolbar__divider"
+      />
+      <span
+        class="euiToolTipAnchor"
+      >
+        <button
+          aria-label="Quote"
+          class="euiButtonIcon euiButtonIcon--text"
+          type="button"
+        >
+          <span
+            aria-hidden="true"
+            class="euiButtonIcon__icon"
+            data-euiicon-type="quote"
+          />
+        </button>
+      </span>
+      <span
+        class="euiToolTipAnchor"
+      >
+        <button
+          aria-label="Code"
+          class="euiButtonIcon euiButtonIcon--text"
+          type="button"
+        >
+          <span
+            aria-hidden="true"
+            class="euiButtonIcon__icon"
+            data-euiicon-type="editorCodeBlock"
+          />
+        </button>
+      </span>
+      <span
+        class="euiToolTipAnchor"
+      >
+        <button
+          aria-label="Link"
+          class="euiButtonIcon euiButtonIcon--text"
+          type="button"
+        >
+          <span
+            aria-hidden="true"
+            class="euiButtonIcon__icon"
+            data-euiicon-type="editorLink"
+          />
+        </button>
+      </span>
+      <span
+        class="euiMarkdownEditorToolbar__divider"
+      />
+      <span
+        class="euiToolTipAnchor"
+      >
+        <button
+          aria-label="Tooltip"
+          class="euiButtonIcon euiButtonIcon--text"
+          type="button"
+        >
+          <span
+            aria-hidden="true"
+            class="euiButtonIcon__icon"
+            data-euiicon-type="editorComment"
+          />
+        </button>
+      </span>
+    </div>
+    <button
+      class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small"
+      type="button"
+    >
+      <span
+        class="euiButtonContent euiButtonEmpty__content"
+      >
+        <span
+          class="euiButtonContent__icon"
+          data-euiicon-type="eye"
+        />
+        <span
+          class="euiButtonEmpty__text"
+        >
+          Preview
+        </span>
+      </span>
+    </button>
+  </div>
+  <div
+    style="display:block"
+  >
+    <div
+      class="euiMarkdownEditorDropZone"
+    >
+      <textarea
+        aria-label="aria-label"
+        class="euiMarkdownEditorTextArea"
+        id="editorId"
+        rows="6"
+        style="height:calc(566px)"
+      />
+      <div
+        class="euiMarkdownEditorFooter"
+      >
+        <div
+          class="euiMarkdownEditorFooter__actions"
+        />
+        <button
+          aria-label="Show markdown help"
+          class="euiButtonIcon euiButtonIcon--text euiMarkdownEditorFooter__help"
+          type="button"
+        >
+          <span
+            aria-hidden="true"
+            class="euiButtonIcon__icon"
+            data-euiicon-type="MarkdownLogo"
+          />
+        </button>
+      </div>
+      <input
+        autocomplete="off"
+        multiple=""
+        style="display:none"
+        tabindex="-1"
+        type="file"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`EuiMarkdownEditor props textareaClassName is rendered 1`] = `
+<div
+  class="euiMarkdownEditor testClass1 testClass2"
+  data-test-subj="test subject string"
+>
+  <div
+    class="euiMarkdownEditorToolbar"
+  >
+    <div
+      class="euiMarkdownEditorToolbar__buttons"
+    >
+      <span
+        class="euiToolTipAnchor"
+      >
+        <button
+          aria-label="Bold"
+          class="euiButtonIcon euiButtonIcon--text"
+          type="button"
+        >
+          <span
+            aria-hidden="true"
+            class="euiButtonIcon__icon"
+            data-euiicon-type="editorBold"
+          />
+        </button>
+      </span>
+      <span
+        class="euiToolTipAnchor"
+      >
+        <button
+          aria-label="Italic"
+          class="euiButtonIcon euiButtonIcon--text"
+          type="button"
+        >
+          <span
+            aria-hidden="true"
+            class="euiButtonIcon__icon"
+            data-euiicon-type="editorItalic"
+          />
+        </button>
+      </span>
+      <span
+        class="euiMarkdownEditorToolbar__divider"
+      />
+      <span
+        class="euiToolTipAnchor"
+      >
+        <button
+          aria-label="Unordered list"
+          class="euiButtonIcon euiButtonIcon--text"
+          type="button"
+        >
+          <span
+            aria-hidden="true"
+            class="euiButtonIcon__icon"
+            data-euiicon-type="editorUnorderedList"
+          />
+        </button>
+      </span>
+      <span
+        class="euiToolTipAnchor"
+      >
+        <button
+          aria-label="Ordered list"
+          class="euiButtonIcon euiButtonIcon--text"
+          type="button"
+        >
+          <span
+            aria-hidden="true"
+            class="euiButtonIcon__icon"
+            data-euiicon-type="editorOrderedList"
+          />
+        </button>
+      </span>
+      <span
+        class="euiToolTipAnchor"
+      >
+        <button
+          aria-label="Task list"
+          class="euiButtonIcon euiButtonIcon--text"
+          type="button"
+        >
+          <span
+            aria-hidden="true"
+            class="euiButtonIcon__icon"
+            data-euiicon-type="MarkdownCheckmark"
+          />
+        </button>
+      </span>
+      <span
+        class="euiMarkdownEditorToolbar__divider"
+      />
+      <span
+        class="euiToolTipAnchor"
+      >
+        <button
+          aria-label="Quote"
+          class="euiButtonIcon euiButtonIcon--text"
+          type="button"
+        >
+          <span
+            aria-hidden="true"
+            class="euiButtonIcon__icon"
+            data-euiicon-type="quote"
+          />
+        </button>
+      </span>
+      <span
+        class="euiToolTipAnchor"
+      >
+        <button
+          aria-label="Code"
+          class="euiButtonIcon euiButtonIcon--text"
+          type="button"
+        >
+          <span
+            aria-hidden="true"
+            class="euiButtonIcon__icon"
+            data-euiicon-type="editorCodeBlock"
+          />
+        </button>
+      </span>
+      <span
+        class="euiToolTipAnchor"
+      >
+        <button
+          aria-label="Link"
+          class="euiButtonIcon euiButtonIcon--text"
+          type="button"
+        >
+          <span
+            aria-hidden="true"
+            class="euiButtonIcon__icon"
+            data-euiicon-type="editorLink"
+          />
+        </button>
+      </span>
+      <span
+        class="euiMarkdownEditorToolbar__divider"
+      />
+      <span
+        class="euiToolTipAnchor"
+      >
+        <button
+          aria-label="Tooltip"
+          class="euiButtonIcon euiButtonIcon--text"
+          type="button"
+        >
+          <span
+            aria-hidden="true"
+            class="euiButtonIcon__icon"
+            data-euiicon-type="editorComment"
+          />
+        </button>
+      </span>
+    </div>
+    <button
+      class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small"
+      type="button"
+    >
+      <span
+        class="euiButtonContent euiButtonEmpty__content"
+      >
+        <span
+          class="euiButtonContent__icon"
+          data-euiicon-type="eye"
+        />
+        <span
+          class="euiButtonEmpty__text"
+        >
+          Preview
+        </span>
+      </span>
+    </button>
+  </div>
+  <div
+    style="display:block"
+  >
+    <div
+      class="euiMarkdownEditorDropZone"
+    >
+      <textarea
+        aria-label="aria-label"
+        class="euiMarkdownEditorTextArea myTextareaClassName"
+        id="editorId"
+        rows="6"
+        style="height:calc(116px)"
       />
       <div
         class="euiMarkdownEditorFooter"
diff --git a/src/components/markdown_editor/_markdown_editor_drop_zone.scss b/src/components/markdown_editor/_markdown_editor_drop_zone.scss
index 8a355aaa440..6086971dd17 100644
--- a/src/components/markdown_editor/_markdown_editor_drop_zone.scss
+++ b/src/components/markdown_editor/_markdown_editor_drop_zone.scss
@@ -4,7 +4,6 @@
   position: relative;
   flex-direction: column;
   min-height: 150px;
-  max-height: 600px;
 
   &__input {
     position: absolute;
diff --git a/src/components/markdown_editor/markdown_editor.test.tsx b/src/components/markdown_editor/markdown_editor.test.tsx
index cb20dadc0ff..9755cab7745 100644
--- a/src/components/markdown_editor/markdown_editor.test.tsx
+++ b/src/components/markdown_editor/markdown_editor.test.tsx
@@ -38,6 +38,40 @@ describe('EuiMarkdownEditor', () => {
     expect(component).toMatchSnapshot();
   });
 
+  describe('props', () => {
+    describe('height', () => {
+      test('is rendered', () => {
+        const component = render(
+          <EuiMarkdownEditor
+            height={600}
+            editorId="editorId"
+            value=""
+            onChange={() => null}
+            {...requiredProps}
+          />
+        );
+
+        expect(component).toMatchSnapshot();
+      });
+    });
+
+    describe('textareaClassName', () => {
+      test('is rendered', () => {
+        const component = render(
+          <EuiMarkdownEditor
+            textareaClassName="myTextareaClassName"
+            editorId="editorId"
+            value=""
+            onChange={() => null}
+            {...requiredProps}
+          />
+        );
+
+        expect(component).toMatchSnapshot();
+      });
+    });
+  });
+
   test('is preview rendered', () => {
     const component = mount(
       <EuiMarkdownEditor
diff --git a/src/components/markdown_editor/markdown_editor.tsx b/src/components/markdown_editor/markdown_editor.tsx
index eb1dad4bb89..7c5827a31e1 100644
--- a/src/components/markdown_editor/markdown_editor.tsx
+++ b/src/components/markdown_editor/markdown_editor.tsx
@@ -72,6 +72,11 @@ type CommonMarkdownEditorProps = Omit<
     /** ID of an element describing the text editor, useful for associating error messages */
     'aria-describedby'?: string;
 
+    /**
+     * Optional class applied to the textarea element
+     */
+    textareaClassName?: string;
+
     /** a unique ID to attach to the textarea. If one isn't provided, a random one
      * will be generated */
     editorId?: string;
@@ -149,6 +154,7 @@ export const EuiMarkdownEditor = forwardRef<
   (
     {
       className,
+      textareaClassName,
       editorId: _editorId,
       value,
       onChange,
@@ -341,6 +347,7 @@ export const EuiMarkdownEditor = forwardRef<
               setHasUnacceptedItems={setHasUnacceptedItems}>
               <EuiMarkdownEditorTextArea
                 ref={textareaRef}
+                textareaClassName={textareaClassName}
                 height={height}
                 id={editorId}
                 onChange={(e) => onChange(e.target.value)}
diff --git a/src/components/markdown_editor/markdown_editor_text_area.tsx b/src/components/markdown_editor/markdown_editor_text_area.tsx
index a9576c90467..b97580dfb24 100644
--- a/src/components/markdown_editor/markdown_editor_text_area.tsx
+++ b/src/components/markdown_editor/markdown_editor_text_area.tsx
@@ -18,6 +18,7 @@
  */
 
 import React, { TextareaHTMLAttributes, forwardRef } from 'react';
+import classNames from 'classnames';
 import { CommonProps } from '../common';
 
 export type EuiMarkdownEditorTextAreaProps = TextareaHTMLAttributes<
@@ -27,6 +28,7 @@ export type EuiMarkdownEditorTextAreaProps = TextareaHTMLAttributes<
     isInvalid?: boolean;
     fullWidth?: boolean;
     compressed?: boolean;
+    textareaClassName?: string;
 
     /**
      * Which direction, if at all, should the textarea resize
@@ -52,7 +54,7 @@ export const EuiMarkdownEditorTextArea = forwardRef<
   (
     {
       children,
-      className,
+      textareaClassName,
       compressed,
       id,
       isInvalid,
@@ -66,11 +68,16 @@ export const EuiMarkdownEditorTextArea = forwardRef<
   ) => {
     const markdownFooterHeight = 34;
 
+    const textareaClasses = classNames(
+      'euiMarkdownEditorTextArea',
+      textareaClassName
+    );
+
     return (
       <textarea
         ref={ref}
-        style={{ height: `calc(${height - markdownFooterHeight}px` }}
-        className="euiMarkdownEditorTextArea"
+        style={{ height: `calc(${height - markdownFooterHeight}px)` }}
+        className={textareaClasses}
         {...rest}
         rows={6}
         name={name}

From f4296b670039cb10dfa36d4eb800d72733b71f42 Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Tue, 10 Nov 2020 14:15:34 +0000
Subject: [PATCH 02/23] Adding previewClassName

---
 CHANGELOG.md                                      |  2 +-
 .../markdown_editor/_markdown_editor_preview.scss |  3 ++-
 .../markdown_editor/markdown_editor.tsx           | 15 ++++++++++++---
 3 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2f8c8f3d365..3e8f6e890e8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,7 +3,7 @@
 - Added `EuiColorPaletteDisplay` component ([#3865](https://github.com/elastic/eui/pull/3865))
 - Added `initialFocusedItemIndex` support to `EuiContextMenuPanelDescriptor` ([#4223](https://github.com/elastic/eui/pull/4223))
 - Added `role="alert"` and `aria-live="assertive"` to `EuiForm`'s `EuiCallOut` for the errors ([#4238](https://github.com/elastic/eui/pull/4238))
-- Added a `textareaClassName` prop to `EuiMarkdownEditor` to better to better support extend it to full height ([#3865](https://github.com/elastic/eui/pull/3865))
+- Added `textareaClassName` and `previewClassName` props to `EuiMarkdownEditor` to better support extend it to full height ([#3865](https://github.com/elastic/eui/pull/3865))
 
 **Bug fixes**
 
diff --git a/src/components/markdown_editor/_markdown_editor_preview.scss b/src/components/markdown_editor/_markdown_editor_preview.scss
index 1762bb327bd..9896e3ab83d 100644
--- a/src/components/markdown_editor/_markdown_editor_preview.scss
+++ b/src/components/markdown_editor/_markdown_editor_preview.scss
@@ -1,6 +1,7 @@
 .euiMarkdownEditorPreview {
   @include euiScrollBar;
-  height: 150px;
+  background: $euiColorEmptyShade;
+  min-height: 150px;
   overflow-y: auto;
   border: $euiBorderThin;
   padding: $euiSizeM;
diff --git a/src/components/markdown_editor/markdown_editor.tsx b/src/components/markdown_editor/markdown_editor.tsx
index 7c5827a31e1..9e6813a87d3 100644
--- a/src/components/markdown_editor/markdown_editor.tsx
+++ b/src/components/markdown_editor/markdown_editor.tsx
@@ -77,6 +77,11 @@ type CommonMarkdownEditorProps = Omit<
      */
     textareaClassName?: string;
 
+    /**
+     * Optional class applied to the preview element
+     */
+    previewClassName?: string;
+
     /** a unique ID to attach to the textarea. If one isn't provided, a random one
      * will be generated */
     editorId?: string;
@@ -155,6 +160,7 @@ export const EuiMarkdownEditor = forwardRef<
     {
       className,
       textareaClassName,
+      previewClassName,
       editorId: _editorId,
       value,
       onChange,
@@ -295,6 +301,11 @@ export const EuiMarkdownEditor = forwardRef<
 
     const [hasUnacceptedItems, setHasUnacceptedItems] = React.useState(false);
 
+    const previewClasses = classNames(
+      'euiMarkdownEditorPreview',
+      previewClassName
+    );
+
     return (
       <EuiMarkdownContext.Provider value={contextValue}>
         <div className={classes} {...rest}>
@@ -309,9 +320,7 @@ export const EuiMarkdownEditor = forwardRef<
           />
 
           {isPreviewing && (
-            <div
-              className="euiMarkdownEditorPreview"
-              style={{ height: `${height}px` }}>
+            <div className={previewClasses} style={{ height: `${height}px` }}>
               <EuiMarkdownFormat
                 parsingPluginList={parsingPluginList}
                 processingPluginList={processingPluginList}>

From 944973e98851e3568e181ee72bbd884d7af765ce Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Tue, 10 Nov 2020 14:37:35 +0000
Subject: [PATCH 03/23] Adding tests for previewClassName

---
 .../markdown_editor.test.tsx.snap             | 237 ++++++++++++++++++
 .../markdown_editor/markdown_editor.test.tsx  |  19 +-
 2 files changed, 255 insertions(+), 1 deletion(-)

diff --git a/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap b/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap
index a110057ee39..8a24fc399b3 100644
--- a/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap
+++ b/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap
@@ -436,6 +436,243 @@ exports[`EuiMarkdownEditor props height is rendered 1`] = `
 </div>
 `;
 
+exports[`EuiMarkdownEditor props previewClassName is rendered 1`] = `
+<div
+  class="euiMarkdownEditor testClass1 testClass2"
+  data-test-subj="test subject string"
+>
+  <div
+    class="euiMarkdownEditorToolbar"
+  >
+    <div
+      class="euiMarkdownEditorToolbar__buttons"
+    >
+      <span
+        class="euiToolTipAnchor"
+      >
+        <button
+          aria-label="Bold"
+          class="euiButtonIcon euiButtonIcon--text"
+          disabled=""
+          type="button"
+        >
+          <span
+            aria-hidden="true"
+            class="euiButtonIcon__icon"
+            data-euiicon-type="editorBold"
+          />
+        </button>
+      </span>
+      <span
+        class="euiToolTipAnchor"
+      >
+        <button
+          aria-label="Italic"
+          class="euiButtonIcon euiButtonIcon--text"
+          disabled=""
+          type="button"
+        >
+          <span
+            aria-hidden="true"
+            class="euiButtonIcon__icon"
+            data-euiicon-type="editorItalic"
+          />
+        </button>
+      </span>
+      <span
+        class="euiMarkdownEditorToolbar__divider"
+      />
+      <span
+        class="euiToolTipAnchor"
+      >
+        <button
+          aria-label="Unordered list"
+          class="euiButtonIcon euiButtonIcon--text"
+          disabled=""
+          type="button"
+        >
+          <span
+            aria-hidden="true"
+            class="euiButtonIcon__icon"
+            data-euiicon-type="editorUnorderedList"
+          />
+        </button>
+      </span>
+      <span
+        class="euiToolTipAnchor"
+      >
+        <button
+          aria-label="Ordered list"
+          class="euiButtonIcon euiButtonIcon--text"
+          disabled=""
+          type="button"
+        >
+          <span
+            aria-hidden="true"
+            class="euiButtonIcon__icon"
+            data-euiicon-type="editorOrderedList"
+          />
+        </button>
+      </span>
+      <span
+        class="euiToolTipAnchor"
+      >
+        <button
+          aria-label="Task list"
+          class="euiButtonIcon euiButtonIcon--text"
+          disabled=""
+          type="button"
+        >
+          <span
+            aria-hidden="true"
+            class="euiButtonIcon__icon"
+            data-euiicon-type="MarkdownCheckmark"
+          />
+        </button>
+      </span>
+      <span
+        class="euiMarkdownEditorToolbar__divider"
+      />
+      <span
+        class="euiToolTipAnchor"
+      >
+        <button
+          aria-label="Quote"
+          class="euiButtonIcon euiButtonIcon--text"
+          disabled=""
+          type="button"
+        >
+          <span
+            aria-hidden="true"
+            class="euiButtonIcon__icon"
+            data-euiicon-type="quote"
+          />
+        </button>
+      </span>
+      <span
+        class="euiToolTipAnchor"
+      >
+        <button
+          aria-label="Code"
+          class="euiButtonIcon euiButtonIcon--text"
+          disabled=""
+          type="button"
+        >
+          <span
+            aria-hidden="true"
+            class="euiButtonIcon__icon"
+            data-euiicon-type="editorCodeBlock"
+          />
+        </button>
+      </span>
+      <span
+        class="euiToolTipAnchor"
+      >
+        <button
+          aria-label="Link"
+          class="euiButtonIcon euiButtonIcon--text"
+          disabled=""
+          type="button"
+        >
+          <span
+            aria-hidden="true"
+            class="euiButtonIcon__icon"
+            data-euiicon-type="editorLink"
+          />
+        </button>
+      </span>
+      <span
+        class="euiMarkdownEditorToolbar__divider"
+      />
+      <span
+        class="euiToolTipAnchor"
+      >
+        <button
+          aria-label="Tooltip"
+          class="euiButtonIcon euiButtonIcon--text"
+          disabled=""
+          type="button"
+        >
+          <span
+            aria-hidden="true"
+            class="euiButtonIcon__icon"
+            data-euiicon-type="editorComment"
+          />
+        </button>
+      </span>
+    </div>
+    <button
+      class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small"
+      type="button"
+    >
+      <span
+        class="euiButtonContent euiButtonEmpty__content"
+      >
+        <span
+          class="euiButtonContent__icon"
+          data-euiicon-type="editorCodeBlock"
+        />
+        <span
+          class="euiButtonEmpty__text"
+        >
+          Editor
+        </span>
+      </span>
+    </button>
+  </div>
+  <div
+    class="euiMarkdownEditorPreview myPreviewClassName"
+    style="height:150px"
+  >
+    <div
+      class="euiMarkdownFormat"
+    >
+      <div />
+    </div>
+  </div>
+  <div
+    style="display:none"
+  >
+    <div
+      class="euiMarkdownEditorDropZone"
+    >
+      <textarea
+        aria-label="aria-label"
+        class="euiMarkdownEditorTextArea"
+        id="editorId"
+        rows="6"
+        style="height:calc(116px)"
+      />
+      <div
+        class="euiMarkdownEditorFooter"
+      >
+        <div
+          class="euiMarkdownEditorFooter__actions"
+        />
+        <button
+          aria-label="Show markdown help"
+          class="euiButtonIcon euiButtonIcon--text euiMarkdownEditorFooter__help"
+          type="button"
+        >
+          <span
+            aria-hidden="true"
+            class="euiButtonIcon__icon"
+            data-euiicon-type="MarkdownLogo"
+          />
+        </button>
+      </div>
+      <input
+        autocomplete="off"
+        multiple=""
+        style="display:none"
+        tabindex="-1"
+        type="file"
+      />
+    </div>
+  </div>
+</div>
+`;
+
 exports[`EuiMarkdownEditor props textareaClassName is rendered 1`] = `
 <div
   class="euiMarkdownEditor testClass1 testClass2"
diff --git a/src/components/markdown_editor/markdown_editor.test.tsx b/src/components/markdown_editor/markdown_editor.test.tsx
index 9755cab7745..966d105e074 100644
--- a/src/components/markdown_editor/markdown_editor.test.tsx
+++ b/src/components/markdown_editor/markdown_editor.test.tsx
@@ -43,8 +43,8 @@ describe('EuiMarkdownEditor', () => {
       test('is rendered', () => {
         const component = render(
           <EuiMarkdownEditor
-            height={600}
             editorId="editorId"
+            height={600}
             value=""
             onChange={() => null}
             {...requiredProps}
@@ -59,8 +59,25 @@ describe('EuiMarkdownEditor', () => {
       test('is rendered', () => {
         const component = render(
           <EuiMarkdownEditor
+            editorId="editorId"
             textareaClassName="myTextareaClassName"
+            value=""
+            onChange={() => null}
+            {...requiredProps}
+          />
+        );
+
+        expect(component).toMatchSnapshot();
+      });
+    });
+
+    describe('previewClassName', () => {
+      test('is rendered', () => {
+        const component = render(
+          <EuiMarkdownEditor
             editorId="editorId"
+            initialViewMode="viewing"
+            previewClassName="myPreviewClassName"
             value=""
             onChange={() => null}
             {...requiredProps}

From 6c8fb43c4bd1aa5804cbe4ef5c2f7486d45fbe8a Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Tue, 10 Nov 2020 15:08:12 +0000
Subject: [PATCH 04/23] CL number

---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3e8f6e890e8..e85016414cd 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,7 +3,7 @@
 - Added `EuiColorPaletteDisplay` component ([#3865](https://github.com/elastic/eui/pull/3865))
 - Added `initialFocusedItemIndex` support to `EuiContextMenuPanelDescriptor` ([#4223](https://github.com/elastic/eui/pull/4223))
 - Added `role="alert"` and `aria-live="assertive"` to `EuiForm`'s `EuiCallOut` for the errors ([#4238](https://github.com/elastic/eui/pull/4238))
-- Added `textareaClassName` and `previewClassName` props to `EuiMarkdownEditor` to better support extend it to full height ([#3865](https://github.com/elastic/eui/pull/3865))
+- Added `textareaClassName` and `previewClassName` props to `EuiMarkdownEditor` to better support extend it to full height ([#4245](https://github.com/elastic/eui/pull/4245))
 
 **Bug fixes**
 

From 21c2b1a10ed3b03cee371d1c261ede1bc539d88e Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@elastic.co>
Date: Tue, 10 Nov 2020 17:47:26 +0000
Subject: [PATCH 05/23] Update
 src/components/markdown_editor/markdown_editor.tsx

Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com>
---
 src/components/markdown_editor/markdown_editor.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/markdown_editor/markdown_editor.tsx b/src/components/markdown_editor/markdown_editor.tsx
index 9e6813a87d3..49de0b735ea 100644
--- a/src/components/markdown_editor/markdown_editor.tsx
+++ b/src/components/markdown_editor/markdown_editor.tsx
@@ -75,12 +75,12 @@ type CommonMarkdownEditorProps = Omit<
     /**
      * Optional class applied to the textarea element
      */
-    textareaClassName?: string;
+    textareaProps?: TextareaHTMLAttributes<HTMLTextAreaElement> & CommonProps;
 
     /**
-     * Optional class applied to the preview element
+     * Optional props applied to the preview element
      */
-    previewClassName?: string;
+    previewProps?: <HTMLAttributes<HTMLDivElement> & CommonProps;
 
     /** a unique ID to attach to the textarea. If one isn't provided, a random one
      * will be generated */

From a35a9e2684f46d1faf39031f210c70fa80b719cd Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Thu, 12 Nov 2020 14:48:42 +0000
Subject: [PATCH 06/23] Adding height prop full and resizing preview area based
 on  textarea size.

---
 .../markdown_editor/mardown_editor_example.js | 39 +++++++++
 .../markdown_editor/markdown_editor_height.js | 67 +++++++++++++++
 .../markdown_editor.test.tsx.snap             | 48 ++++-------
 src/components/markdown_editor/_index.scss    |  1 +
 .../markdown_editor/_markdown_editor.scss     | 19 +++++
 .../_markdown_editor_drop_zone.scss           |  1 -
 .../_markdown_editor_footer.scss              |  3 +-
 .../markdown_editor/_variables.scss           |  2 +
 .../markdown_editor/markdown_editor.test.tsx  | 17 ++--
 .../markdown_editor/markdown_editor.tsx       | 84 +++++++++++++------
 .../markdown_editor_text_area.tsx             | 20 ++---
 11 files changed, 221 insertions(+), 80 deletions(-)
 create mode 100644 src-docs/src/views/markdown_editor/markdown_editor_height.js
 create mode 100644 src/components/markdown_editor/_variables.scss

diff --git a/src-docs/src/views/markdown_editor/mardown_editor_example.js b/src-docs/src/views/markdown_editor/mardown_editor_example.js
index 98b8cd40e47..320baff8e41 100644
--- a/src-docs/src/views/markdown_editor/mardown_editor_example.js
+++ b/src-docs/src/views/markdown_editor/mardown_editor_example.js
@@ -21,6 +21,10 @@ import MarkdownEditorErrors from './markdown_editor_errors';
 const markdownEditorErrorsSource = require('!!raw-loader!./markdown_editor_errors');
 const markdownEditorErrorsHtml = renderToHtml(MarkdownEditorErrors);
 
+import MarkdownEditorHeight from './markdown_editor_height';
+const markdownEditorHeightSource = require('!!raw-loader!./markdown_editor_height');
+const markdownEditorHeightHtml = renderToHtml(MarkdownEditorHeight);
+
 export const MarkdownEditorExample = {
   title: 'Markdown editor',
   beta: true,
@@ -95,5 +99,40 @@ export const MarkdownEditorExample = {
       },
       demo: <MarkdownEditorErrors />,
     },
+    {
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: markdownEditorHeightSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: markdownEditorHeightHtml,
+        },
+      ],
+      title: 'Controlling the height',
+      text: (
+        <>
+          <p>
+            The <EuiCode>height</EuiCode> prop allows you to control the height
+            of the <strong>EuiMarkdownEditor</strong>. You can set the{' '}
+            <EuiCode>height</EuiCode> in pixels or pass{' '}
+            <EuiCode>&quot;full&quot;</EuiCode> to allow the{' '}
+            <strong>EuiMarkdownEditor</strong> to fill the height of its
+            container.
+          </p>
+          <p>
+            You can also control the <EuiCode>maxHeight</EuiCode> of the
+            editor/preview area. This feature only works when the{' '}
+            <EuiCode>height</EuiCode> is not set to{' '}
+            <EuiCode>&quot;full&quot;</EuiCode>.
+          </p>
+        </>
+      ),
+      props: {
+        EuiMarkdownEditor,
+      },
+      demo: <MarkdownEditorHeight />,
+    },
   ],
 };
diff --git a/src-docs/src/views/markdown_editor/markdown_editor_height.js b/src-docs/src/views/markdown_editor/markdown_editor_height.js
new file mode 100644
index 00000000000..25b489e1dbd
--- /dev/null
+++ b/src-docs/src/views/markdown_editor/markdown_editor_height.js
@@ -0,0 +1,67 @@
+import React, { useState } from 'react';
+
+import {
+  EuiMarkdownEditor,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiSpacer,
+} from '../../../../src/components';
+
+const initialContent1 = `## Hello world!
+
+I'm a **EuiMarkdownEditor** with a \`height\` set to \`400\`. My parent container is a flex item with a height set to \`600\`.
+`;
+
+const initialContent2 = `## Hello world!
+
+I'm a **EuiMarkdownEditor** with a \`height\` set to \`"full"\`. My parent container is a flex item with a \`height\` set to \`600\`.
+`;
+
+const initialContent3 = `## Hello world!
+
+I'm a **EuiMarkdownEditor** with a \`height\` set to \`"full"\`. My parent container is a div with a \`height\` set to \`600\`.
+`;
+
+export default () => {
+  const [value1, setValue1] = useState(initialContent1);
+  const [value2, setValue2] = useState(initialContent2);
+  const [value3, setValue3] = useState(initialContent3);
+
+  return (
+    <div className="guideDemo__highlightGrid">
+      <EuiFlexGroup>
+        <EuiFlexItem style={{ height: '600px' }}>
+          <EuiMarkdownEditor
+            aria-label="EUI markdown editor demo"
+            initialViewMode="viewing"
+            value={value1}
+            onChange={setValue1}
+            height={400}
+            maxHeight={440}
+          />
+        </EuiFlexItem>
+        <EuiFlexItem style={{ height: '600px' }}>
+          <EuiMarkdownEditor
+            aria-label="EUI markdown editor demo"
+            initialViewMode="viewing"
+            value={value2}
+            onChange={setValue2}
+            height="full"
+          />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+
+      <EuiSpacer />
+
+      <div style={{ height: '600px', background: 'aliceblue' }}>
+        <EuiMarkdownEditor
+          aria-label="EUI markdown editor demo"
+          initialViewMode="viewing"
+          value={value3}
+          onChange={setValue3}
+          height="full"
+        />
+      </div>
+    </div>
+  );
+};
diff --git a/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap b/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap
index 8a24fc399b3..2cccd8761cb 100644
--- a/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap
+++ b/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap
@@ -176,6 +176,7 @@ exports[`EuiMarkdownEditor is rendered 1`] = `
     </button>
   </div>
   <div
+    class="euiMarkdownEditor__toggleContainer"
     style="display:block"
   >
     <div
@@ -186,7 +187,7 @@ exports[`EuiMarkdownEditor is rendered 1`] = `
         class="euiMarkdownEditorTextArea"
         id="editorId"
         rows="6"
-        style="height:calc(116px)"
+        style="height:calc(216px);max-height:466px"
       />
       <div
         class="euiMarkdownEditorFooter"
@@ -218,7 +219,7 @@ exports[`EuiMarkdownEditor is rendered 1`] = `
 </div>
 `;
 
-exports[`EuiMarkdownEditor props height is rendered 1`] = `
+exports[`EuiMarkdownEditor props height is rendered with a custom size 1`] = `
 <div
   class="euiMarkdownEditor testClass1 testClass2"
   data-test-subj="test subject string"
@@ -394,6 +395,7 @@ exports[`EuiMarkdownEditor props height is rendered 1`] = `
     </button>
   </div>
   <div
+    class="euiMarkdownEditor__toggleContainer"
     style="display:block"
   >
     <div
@@ -404,7 +406,7 @@ exports[`EuiMarkdownEditor props height is rendered 1`] = `
         class="euiMarkdownEditorTextArea"
         id="editorId"
         rows="6"
-        style="height:calc(566px)"
+        style="height:calc(366px);max-height:466px"
       />
       <div
         class="euiMarkdownEditorFooter"
@@ -436,9 +438,9 @@ exports[`EuiMarkdownEditor props height is rendered 1`] = `
 </div>
 `;
 
-exports[`EuiMarkdownEditor props previewClassName is rendered 1`] = `
+exports[`EuiMarkdownEditor props height is rendered with full mode provided 1`] = `
 <div
-  class="euiMarkdownEditor testClass1 testClass2"
+  class="euiMarkdownEditor euiMarkdownEditor--fullHeight testClass1 testClass2"
   data-test-subj="test subject string"
 >
   <div
@@ -453,7 +455,6 @@ exports[`EuiMarkdownEditor props previewClassName is rendered 1`] = `
         <button
           aria-label="Bold"
           class="euiButtonIcon euiButtonIcon--text"
-          disabled=""
           type="button"
         >
           <span
@@ -469,7 +470,6 @@ exports[`EuiMarkdownEditor props previewClassName is rendered 1`] = `
         <button
           aria-label="Italic"
           class="euiButtonIcon euiButtonIcon--text"
-          disabled=""
           type="button"
         >
           <span
@@ -488,7 +488,6 @@ exports[`EuiMarkdownEditor props previewClassName is rendered 1`] = `
         <button
           aria-label="Unordered list"
           class="euiButtonIcon euiButtonIcon--text"
-          disabled=""
           type="button"
         >
           <span
@@ -504,7 +503,6 @@ exports[`EuiMarkdownEditor props previewClassName is rendered 1`] = `
         <button
           aria-label="Ordered list"
           class="euiButtonIcon euiButtonIcon--text"
-          disabled=""
           type="button"
         >
           <span
@@ -520,7 +518,6 @@ exports[`EuiMarkdownEditor props previewClassName is rendered 1`] = `
         <button
           aria-label="Task list"
           class="euiButtonIcon euiButtonIcon--text"
-          disabled=""
           type="button"
         >
           <span
@@ -539,7 +536,6 @@ exports[`EuiMarkdownEditor props previewClassName is rendered 1`] = `
         <button
           aria-label="Quote"
           class="euiButtonIcon euiButtonIcon--text"
-          disabled=""
           type="button"
         >
           <span
@@ -555,7 +551,6 @@ exports[`EuiMarkdownEditor props previewClassName is rendered 1`] = `
         <button
           aria-label="Code"
           class="euiButtonIcon euiButtonIcon--text"
-          disabled=""
           type="button"
         >
           <span
@@ -571,7 +566,6 @@ exports[`EuiMarkdownEditor props previewClassName is rendered 1`] = `
         <button
           aria-label="Link"
           class="euiButtonIcon euiButtonIcon--text"
-          disabled=""
           type="button"
         >
           <span
@@ -590,7 +584,6 @@ exports[`EuiMarkdownEditor props previewClassName is rendered 1`] = `
         <button
           aria-label="Tooltip"
           class="euiButtonIcon euiButtonIcon--text"
-          disabled=""
           type="button"
         >
           <span
@@ -610,28 +603,19 @@ exports[`EuiMarkdownEditor props previewClassName is rendered 1`] = `
       >
         <span
           class="euiButtonContent__icon"
-          data-euiicon-type="editorCodeBlock"
+          data-euiicon-type="eye"
         />
         <span
           class="euiButtonEmpty__text"
         >
-          Editor
+          Preview
         </span>
       </span>
     </button>
   </div>
   <div
-    class="euiMarkdownEditorPreview myPreviewClassName"
-    style="height:150px"
-  >
-    <div
-      class="euiMarkdownFormat"
-    >
-      <div />
-    </div>
-  </div>
-  <div
-    style="display:none"
+    class="euiMarkdownEditor__toggleContainer"
+    style="display:block"
   >
     <div
       class="euiMarkdownEditorDropZone"
@@ -641,7 +625,7 @@ exports[`EuiMarkdownEditor props previewClassName is rendered 1`] = `
         class="euiMarkdownEditorTextArea"
         id="editorId"
         rows="6"
-        style="height:calc(116px)"
+        style="height:100%;max-height:"
       />
       <div
         class="euiMarkdownEditorFooter"
@@ -673,10 +657,11 @@ exports[`EuiMarkdownEditor props previewClassName is rendered 1`] = `
 </div>
 `;
 
-exports[`EuiMarkdownEditor props textareaClassName is rendered 1`] = `
+exports[`EuiMarkdownEditor props maxHeight is rendered with a custom size 1`] = `
 <div
   class="euiMarkdownEditor testClass1 testClass2"
   data-test-subj="test subject string"
+  max-height="600"
 >
   <div
     class="euiMarkdownEditorToolbar"
@@ -849,6 +834,7 @@ exports[`EuiMarkdownEditor props textareaClassName is rendered 1`] = `
     </button>
   </div>
   <div
+    class="euiMarkdownEditor__toggleContainer"
     style="display:block"
   >
     <div
@@ -856,10 +842,10 @@ exports[`EuiMarkdownEditor props textareaClassName is rendered 1`] = `
     >
       <textarea
         aria-label="aria-label"
-        class="euiMarkdownEditorTextArea myTextareaClassName"
+        class="euiMarkdownEditorTextArea"
         id="editorId"
         rows="6"
-        style="height:calc(116px)"
+        style="height:calc(216px);max-height:466px"
       />
       <div
         class="euiMarkdownEditorFooter"
diff --git a/src/components/markdown_editor/_index.scss b/src/components/markdown_editor/_index.scss
index dd5dfac5390..c0d8b9e6538 100644
--- a/src/components/markdown_editor/_index.scss
+++ b/src/components/markdown_editor/_index.scss
@@ -1,3 +1,4 @@
+@import 'variables';
 @import 'markdown_editor';
 @import 'markdown_editor_drop_zone';
 @import 'markdown_format';
diff --git a/src/components/markdown_editor/_markdown_editor.scss b/src/components/markdown_editor/_markdown_editor.scss
index f88bb5d63a0..970d672604b 100644
--- a/src/components/markdown_editor/_markdown_editor.scss
+++ b/src/components/markdown_editor/_markdown_editor.scss
@@ -5,4 +5,23 @@
   &:focus-within {
     @include euiSlightShadowHover;
   }
+
+  &--fullHeight {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+
+    .euiMarkdownEditorTextArea {
+      resize: none;
+    }
+
+    // safari needs this calc. Other browsers work well with 100%
+    .euiMarkdownEditor__toggleContainer {
+      height: calc(100% - #{$euiMarkdownEditorToolbarHeight});
+    }
+
+    .euiMarkdownEditorDropZone {
+      height: 100%;
+    }
+  }
 }
\ No newline at end of file
diff --git a/src/components/markdown_editor/_markdown_editor_drop_zone.scss b/src/components/markdown_editor/_markdown_editor_drop_zone.scss
index 6086971dd17..395303c4727 100644
--- a/src/components/markdown_editor/_markdown_editor_drop_zone.scss
+++ b/src/components/markdown_editor/_markdown_editor_drop_zone.scss
@@ -1,5 +1,4 @@
 .euiMarkdownEditorDropZone {
-  @include euiFormControlDefaultShadow;
   display: flex;
   position: relative;
   flex-direction: column;
diff --git a/src/components/markdown_editor/_markdown_editor_footer.scss b/src/components/markdown_editor/_markdown_editor_footer.scss
index ccbf4e4a142..21fdb36695d 100644
--- a/src/components/markdown_editor/_markdown_editor_footer.scss
+++ b/src/components/markdown_editor/_markdown_editor_footer.scss
@@ -1,6 +1,7 @@
 .euiMarkdownEditorFooter {
   display: inline-flex;
-  padding: $euiSizeXS;
+  padding: $euiSizeXS 0;
+  height: $euiMarkdownEditorFooterHeight;
   border: $euiBorderThin;
   align-items: center;
   background: $euiPageBackgroundColor;
diff --git a/src/components/markdown_editor/_variables.scss b/src/components/markdown_editor/_variables.scss
new file mode 100644
index 00000000000..2c24c84f8b2
--- /dev/null
+++ b/src/components/markdown_editor/_variables.scss
@@ -0,0 +1,2 @@
+$euiMarkdownEditorToolbarHeight: 40px;
+$euiMarkdownEditorFooterHeight: 34px;
\ No newline at end of file
diff --git a/src/components/markdown_editor/markdown_editor.test.tsx b/src/components/markdown_editor/markdown_editor.test.tsx
index 966d105e074..b1156897593 100644
--- a/src/components/markdown_editor/markdown_editor.test.tsx
+++ b/src/components/markdown_editor/markdown_editor.test.tsx
@@ -40,11 +40,11 @@ describe('EuiMarkdownEditor', () => {
 
   describe('props', () => {
     describe('height', () => {
-      test('is rendered', () => {
+      test('is rendered with a custom size', () => {
         const component = render(
           <EuiMarkdownEditor
             editorId="editorId"
-            height={600}
+            height={400}
             value=""
             onChange={() => null}
             {...requiredProps}
@@ -55,12 +55,12 @@ describe('EuiMarkdownEditor', () => {
       });
     });
 
-    describe('textareaClassName', () => {
-      test('is rendered', () => {
+    describe('height', () => {
+      test('is rendered with full mode provided', () => {
         const component = render(
           <EuiMarkdownEditor
             editorId="editorId"
-            textareaClassName="myTextareaClassName"
+            height="full"
             value=""
             onChange={() => null}
             {...requiredProps}
@@ -71,13 +71,12 @@ describe('EuiMarkdownEditor', () => {
       });
     });
 
-    describe('previewClassName', () => {
-      test('is rendered', () => {
+    describe('maxHeight', () => {
+      test('is rendered with a custom size', () => {
         const component = render(
           <EuiMarkdownEditor
             editorId="editorId"
-            initialViewMode="viewing"
-            previewClassName="myPreviewClassName"
+            max-height={600}
             value=""
             onChange={() => null}
             {...requiredProps}
diff --git a/src/components/markdown_editor/markdown_editor.tsx b/src/components/markdown_editor/markdown_editor.tsx
index 49de0b735ea..5b46f9161b7 100644
--- a/src/components/markdown_editor/markdown_editor.tsx
+++ b/src/components/markdown_editor/markdown_editor.tsx
@@ -72,16 +72,6 @@ type CommonMarkdownEditorProps = Omit<
     /** ID of an element describing the text editor, useful for associating error messages */
     'aria-describedby'?: string;
 
-    /**
-     * Optional class applied to the textarea element
-     */
-    textareaProps?: TextareaHTMLAttributes<HTMLTextAreaElement> & CommonProps;
-
-    /**
-     * Optional props applied to the preview element
-     */
-    previewProps?: <HTMLAttributes<HTMLDivElement> & CommonProps;
-
     /** a unique ID to attach to the textarea. If one isn't provided, a random one
      * will be generated */
     editorId?: string;
@@ -92,8 +82,18 @@ type CommonMarkdownEditorProps = Omit<
     /** callback function when markdown content is modified */
     onChange: (value: string) => void;
 
-    /** height of the content/preview area */
-    height?: number;
+    /**
+     * Sets the `height` in pixels of the editor/preview area or pass `full` to allow
+     * the EuiMarkdownEditor to fill the height of its container.
+     * When in `full` mode the vertical resize is not allowed.
+     */
+    height?: number | 'full';
+
+    /**
+     * Sets the `max-height` in pixels of the editor/preview area.
+     * It doesn't work when the `height` is set to `full`.
+     */
+    maxHeight?: number;
 
     /** plugins to identify new syntax and parse it into an AST node */
     parsingPluginList?: PluggableList;
@@ -122,6 +122,7 @@ type CommonMarkdownEditorProps = Omit<
     /** array defining any drag&drop handlers */
     dropHandlers?: EuiMarkdownDropHandler[];
   };
+
 export type EuiMarkdownEditorProps = OneOf<
   CommonMarkdownEditorProps,
   'aria-label' | 'aria-labelledby'
@@ -159,12 +160,11 @@ export const EuiMarkdownEditor = forwardRef<
   (
     {
       className,
-      textareaClassName,
-      previewClassName,
       editorId: _editorId,
       value,
       onChange,
-      height = 150,
+      height = 250,
+      maxHeight = 500,
       parsingPluginList = defaultParsingPlugins,
       processingPluginList = defaultProcessingPlugins,
       uiPlugins = [],
@@ -197,7 +197,11 @@ export const EuiMarkdownEditor = forwardRef<
       [editorId, toolbarPlugins.map(({ name }) => name).join(',')]
     );
 
-    const classes = classNames('euiMarkdownEditor', className);
+    const classes = classNames(
+      'euiMarkdownEditor',
+      height === 'full' && 'euiMarkdownEditor--fullHeight',
+      className
+    );
 
     const parser = useMemo(() => {
       const Compiler = (tree: any) => {
@@ -301,10 +305,35 @@ export const EuiMarkdownEditor = forwardRef<
 
     const [hasUnacceptedItems, setHasUnacceptedItems] = React.useState(false);
 
-    const previewClasses = classNames(
-      'euiMarkdownEditorPreview',
-      previewClassName
-    );
+    const [currentHeight, setCurrentHeight] = useState(height);
+
+    const markdownFooterHeight = 34;
+
+    // TODO do this in a better way
+    // Setting the height this way has a bug
+    // when we resize to the textareat to the max-height this functions doesn't trigger
+    // Not sure if I can use the EuiResizeObserver
+    const setTextAreaHeight = () => {
+      console.log('setTextAreaHeight was triggered onMouseUp');
+
+      if (textareaRef.current && viewMode === 'editing') {
+        const height = textareaRef.current.clientHeight;
+
+        setCurrentHeight(height + markdownFooterHeight);
+      }
+    };
+
+    const previewHeight =
+      height === 'full'
+        ? `calc(100% - ${markdownFooterHeight}px`
+        : currentHeight;
+
+    const textAreaHeight =
+      height === 'full' ? '100%' : `calc(${height - markdownFooterHeight}px)`;
+
+    // we just want add a max-height to the textarea when the height is not set to 'full'
+    const textAreaMaxHeight =
+      height !== 'full' ? `${maxHeight - markdownFooterHeight}px` : '';
 
     return (
       <EuiMarkdownContext.Provider value={contextValue}>
@@ -320,7 +349,9 @@ export const EuiMarkdownEditor = forwardRef<
           />
 
           {isPreviewing && (
-            <div className={previewClasses} style={{ height: `${height}px` }}>
+            <div
+              className="euiMarkdownEditorPreview"
+              style={{ height: previewHeight }}>
               <EuiMarkdownFormat
                 parsingPluginList={parsingPluginList}
                 processingPluginList={processingPluginList}>
@@ -329,7 +360,9 @@ export const EuiMarkdownEditor = forwardRef<
             </div>
           )}
           {/* Toggle the editor's display instead of unmounting to retain its undo/redo history */}
-          <div style={{ display: isPreviewing ? 'none' : 'block' }}>
+          <div
+            className="euiMarkdownEditor__toggleContainer"
+            style={{ display: isPreviewing ? 'none' : 'block' }}>
             <EuiMarkdownEditorDropZone
               dropHandlers={dropHandlers}
               insertText={(
@@ -355,9 +388,12 @@ export const EuiMarkdownEditor = forwardRef<
               hasUnacceptedItems={hasUnacceptedItems}
               setHasUnacceptedItems={setHasUnacceptedItems}>
               <EuiMarkdownEditorTextArea
+                onMouseUp={() => {
+                  setTextAreaHeight();
+                }}
+                height={textAreaHeight}
+                maxHeight={textAreaMaxHeight}
                 ref={textareaRef}
-                textareaClassName={textareaClassName}
-                height={height}
                 id={editorId}
                 onChange={(e) => onChange(e.target.value)}
                 value={value}
diff --git a/src/components/markdown_editor/markdown_editor_text_area.tsx b/src/components/markdown_editor/markdown_editor_text_area.tsx
index b97580dfb24..c5866777bde 100644
--- a/src/components/markdown_editor/markdown_editor_text_area.tsx
+++ b/src/components/markdown_editor/markdown_editor_text_area.tsx
@@ -18,7 +18,7 @@
  */
 
 import React, { TextareaHTMLAttributes, forwardRef } from 'react';
-import classNames from 'classnames';
+
 import { CommonProps } from '../common';
 
 export type EuiMarkdownEditorTextAreaProps = TextareaHTMLAttributes<
@@ -28,14 +28,13 @@ export type EuiMarkdownEditorTextAreaProps = TextareaHTMLAttributes<
     isInvalid?: boolean;
     fullWidth?: boolean;
     compressed?: boolean;
-    textareaClassName?: string;
+    height: string;
+    maxHeight: string;
 
     /**
      * Which direction, if at all, should the textarea resize
      */
     resize?: keyof typeof resizeToClassNameMap;
-
-    height: number;
   };
 
 const resizeToClassNameMap = {
@@ -54,7 +53,6 @@ export const EuiMarkdownEditorTextArea = forwardRef<
   (
     {
       children,
-      textareaClassName,
       compressed,
       id,
       isInvalid,
@@ -62,22 +60,16 @@ export const EuiMarkdownEditorTextArea = forwardRef<
       placeholder,
       rows,
       height,
+      maxHeight,
       ...rest
     },
     ref
   ) => {
-    const markdownFooterHeight = 34;
-
-    const textareaClasses = classNames(
-      'euiMarkdownEditorTextArea',
-      textareaClassName
-    );
-
     return (
       <textarea
         ref={ref}
-        style={{ height: `calc(${height - markdownFooterHeight}px)` }}
-        className={textareaClasses}
+        style={{ height, maxHeight }}
+        className="euiMarkdownEditorTextArea"
         {...rest}
         rows={6}
         name={name}

From c9c84f4b113eaa0b26f765de78d15730465ac5a7 Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Thu, 12 Nov 2020 19:56:32 +0000
Subject: [PATCH 07/23] Adding EuiResizeObserver.

---
 .../markdown_editor/markdown_editor_height.js |  2 +-
 .../markdown_editor/markdown_editor.tsx       | 65 ++++++++++++-------
 2 files changed, 42 insertions(+), 25 deletions(-)

diff --git a/src-docs/src/views/markdown_editor/markdown_editor_height.js b/src-docs/src/views/markdown_editor/markdown_editor_height.js
index 25b489e1dbd..8f3faf4e40e 100644
--- a/src-docs/src/views/markdown_editor/markdown_editor_height.js
+++ b/src-docs/src/views/markdown_editor/markdown_editor_height.js
@@ -30,7 +30,7 @@ export default () => {
   return (
     <div className="guideDemo__highlightGrid">
       <EuiFlexGroup>
-        <EuiFlexItem style={{ height: '600px' }}>
+        <EuiFlexItem>
           <EuiMarkdownEditor
             aria-label="EUI markdown editor demo"
             initialViewMode="viewing"
diff --git a/src/components/markdown_editor/markdown_editor.tsx b/src/components/markdown_editor/markdown_editor.tsx
index 5b46f9161b7..6a1a340a58e 100644
--- a/src/components/markdown_editor/markdown_editor.tsx
+++ b/src/components/markdown_editor/markdown_editor.tsx
@@ -39,7 +39,7 @@ import { EuiMarkdownEditorToolbar } from './markdown_editor_toolbar';
 import { EuiMarkdownEditorTextArea } from './markdown_editor_text_area';
 import { EuiMarkdownFormat } from './markdown_format';
 import { EuiMarkdownEditorDropZone } from './markdown_editor_drop_zone';
-import { htmlIdGenerator } from '../../services/accessibility';
+import { htmlIdGenerator } from '../../services/';
 
 import { MARKDOWN_MODE, MODE_EDITING, MODE_VIEWING } from './markdown_modes';
 import {
@@ -58,6 +58,8 @@ import {
   defaultProcessingPlugins,
 } from './plugins/markdown_default_plugins';
 
+import { EuiResizeObserver } from '../observer/resize_observer';
+
 type CommonMarkdownEditorProps = Omit<
   HTMLAttributes<HTMLDivElement>,
   'onChange'
@@ -128,6 +130,24 @@ export type EuiMarkdownEditorProps = OneOf<
   'aria-label' | 'aria-labelledby'
 >;
 
+// TODO I wanted to use the useCombinedRefs
+// but I can't because it's not allowed to use react hooks
+// inside og a callback.
+const mergeRefs = (...refs: any[]) => {
+  const filteredRefs = refs.filter(Boolean);
+  if (!filteredRefs.length) return null;
+  if (filteredRefs.length === 0) return filteredRefs[0];
+  return (inst: any) => {
+    for (const ref of filteredRefs) {
+      if (typeof ref === 'function') {
+        ref(inst);
+      } else if (ref) {
+        ref.current = inst;
+      }
+    }
+  };
+};
+
 interface EuiMarkdownEditorRef {
   textarea: HTMLTextAreaElement | null;
   replaceNode: ContextShape['replaceNode'];
@@ -309,13 +329,7 @@ export const EuiMarkdownEditor = forwardRef<
 
     const markdownFooterHeight = 34;
 
-    // TODO do this in a better way
-    // Setting the height this way has a bug
-    // when we resize to the textareat to the max-height this functions doesn't trigger
-    // Not sure if I can use the EuiResizeObserver
-    const setTextAreaHeight = () => {
-      console.log('setTextAreaHeight was triggered onMouseUp');
-
+    const onResize = () => {
       if (textareaRef.current && viewMode === 'editing') {
         const height = textareaRef.current.clientHeight;
 
@@ -387,23 +401,26 @@ export const EuiMarkdownEditor = forwardRef<
               errors={errors}
               hasUnacceptedItems={hasUnacceptedItems}
               setHasUnacceptedItems={setHasUnacceptedItems}>
-              <EuiMarkdownEditorTextArea
-                onMouseUp={() => {
-                  setTextAreaHeight();
-                }}
-                height={textAreaHeight}
-                maxHeight={textAreaMaxHeight}
-                ref={textareaRef}
-                id={editorId}
-                onChange={(e) => onChange(e.target.value)}
-                value={value}
-                onFocus={() => setHasUnacceptedItems(false)}
-                {...{
-                  'aria-label': ariaLabel,
-                  'aria-labelledby': ariaLabelledBy,
-                  'aria-describedby': ariaDescribedBy,
+              <EuiResizeObserver onResize={onResize}>
+                {(resizeRef) => {
+                  return (
+                    <EuiMarkdownEditorTextArea
+                      height={textAreaHeight}
+                      maxHeight={textAreaMaxHeight}
+                      ref={mergeRefs(textareaRef, resizeRef)}
+                      id={editorId}
+                      onChange={(e) => onChange(e.target.value)}
+                      value={value}
+                      onFocus={() => setHasUnacceptedItems(false)}
+                      {...{
+                        'aria-label': ariaLabel,
+                        'aria-labelledby': ariaLabelledBy,
+                        'aria-describedby': ariaDescribedBy,
+                      }}
+                    />
+                  );
                 }}
-              />
+              </EuiResizeObserver>
             </EuiMarkdownEditorDropZone>
 
             {pluginEditorPlugin && (

From e079f94a7c0725f57ba7434c1ce65ba6deb2922f Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Thu, 12 Nov 2020 19:59:15 +0000
Subject: [PATCH 08/23] Typo

---
 src/components/markdown_editor/markdown_editor.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/markdown_editor/markdown_editor.tsx b/src/components/markdown_editor/markdown_editor.tsx
index 6a1a340a58e..fff21205fe1 100644
--- a/src/components/markdown_editor/markdown_editor.tsx
+++ b/src/components/markdown_editor/markdown_editor.tsx
@@ -132,7 +132,7 @@ export type EuiMarkdownEditorProps = OneOf<
 
 // TODO I wanted to use the useCombinedRefs
 // but I can't because it's not allowed to use react hooks
-// inside og a callback.
+// inside a callback.
 const mergeRefs = (...refs: any[]) => {
   const filteredRefs = refs.filter(Boolean);
   if (!filteredRefs.length) return null;

From 518b9901d852827ac69303852a29bc760f25be6d Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Tue, 17 Nov 2020 19:42:15 +0000
Subject: [PATCH 09/23] Adding missing file from merge

---
 .../icon/__snapshots__/icon.test.tsx.snap     | 20 +++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/src/components/icon/__snapshots__/icon.test.tsx.snap b/src/components/icon/__snapshots__/icon.test.tsx.snap
index 3b892e58545..d1e94fad1d9 100644
--- a/src/components/icon/__snapshots__/icon.test.tsx.snap
+++ b/src/components/icon/__snapshots__/icon.test.tsx.snap
@@ -2238,6 +2238,26 @@ exports[`EuiIcon props type emsApp is rendered 1`] = `
 </svg>
 `;
 
+exports[`EuiIcon props type eql is rendered 1`] = `
+<svg
+  aria-hidden="true"
+  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  focusable="false"
+  height="16"
+  role="img"
+  viewBox="0 0 16 16"
+  width="16"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M15.853 14.34L11.39 9.88l-.004-.004-.326-.326a.523.523 0 00-.739.739l.397.397.01.01 3.493 3.492h-2.164l-1.907-1.907-1.185-1.116a.53.53 0 00-.515-.121l-.765.23-.034.01a5.13 5.13 0 01-1.382.21 5.225 5.225 0 115.225-5.225.522.522 0 001.046 0l-.001-.003a6.27 6.27 0 10-8.132 5.992l.049.013a6.219 6.219 0 004.055-.152l1.89 1.891c.338.374.695.73 1.068 1.068.125.1.281.153.442.152.082.004.167.003.258.003h3.313a.527.527 0 00.37-.892z"
+  />
+  <path
+    d="M9.258 4.276L6.503 2.685a.468.468 0 00-.466 0l-2.755 1.59a.466.466 0 00-.232.403V7.86a.466.466 0 00.232.402l2.755 1.59a.46.46 0 00.466 0l2.755-1.59a.466.466 0 00.232-.402V4.678a.466.466 0 00-.232-.402zm-.787.93V7.33a.36.36 0 01-.18.312L6.45 8.706a.359.359 0 01-.36 0L4.25 7.643a.36.36 0 01-.181-.312V5.206a.362.362 0 01.18-.312L6.09 3.831a.359.359 0 01.36 0l1.84 1.063a.362.362 0 01.181.312z"
+  />
+</svg>
+`;
+
 exports[`EuiIcon props type exit is rendered 1`] = `
 <svg
   aria-hidden="true"

From 029296cee690097dafa0e4737e6e493c37d0e014 Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Wed, 18 Nov 2020 17:39:37 +0000
Subject: [PATCH 10/23] Adding autoExpandPreview

---
 .../markdown_editor/mardown_editor_example.js |  13 +-
 .../markdown_editor/markdown_editor_height.js |  79 ++++--
 .../markdown_editor.test.tsx.snap             | 228 +++++++++++++++++-
 .../markdown_editor/markdown_editor.test.tsx  |  20 +-
 .../markdown_editor/markdown_editor.tsx       |  30 ++-
 5 files changed, 337 insertions(+), 33 deletions(-)

diff --git a/src-docs/src/views/markdown_editor/mardown_editor_example.js b/src-docs/src/views/markdown_editor/mardown_editor_example.js
index 320baff8e41..e8da31f57fd 100644
--- a/src-docs/src/views/markdown_editor/mardown_editor_example.js
+++ b/src-docs/src/views/markdown_editor/mardown_editor_example.js
@@ -119,13 +119,18 @@ export const MarkdownEditorExample = {
             <EuiCode>height</EuiCode> in pixels or pass{' '}
             <EuiCode>&quot;full&quot;</EuiCode> to allow the{' '}
             <strong>EuiMarkdownEditor</strong> to fill the height of its
-            container.
+            container. By default, the <EuiCode>autoExpandPreview</EuiCode> prop
+            is set to <EuiCode>true</EuiCode>. This means that the preview{' '}
+            <EuiCode>height</EuiCode> is automatically adjusted to fit all the
+            content and avoid a scrollbar.
           </p>
           <p>
-            You can also control the <EuiCode>maxHeight</EuiCode> of the
-            editor/preview area. This feature only works when the{' '}
+            You can also control the <EuiCode>maxHeight</EuiCode> of the{' '}
+            editor/preview area. This prop only works when the{' '}
             <EuiCode>height</EuiCode> is not set to{' '}
-            <EuiCode>&quot;full&quot;</EuiCode>.
+            <EuiCode>&quot;full&quot;</EuiCode> and won&apos;t work for the
+            preview if the <EuiCode>autoExpandPreview</EuiCode> is set to{' '}
+            <EuiCode>true</EuiCode>.
           </p>
         </>
       ),
diff --git a/src-docs/src/views/markdown_editor/markdown_editor_height.js b/src-docs/src/views/markdown_editor/markdown_editor_height.js
index 8f3faf4e40e..21e019ae03f 100644
--- a/src-docs/src/views/markdown_editor/markdown_editor_height.js
+++ b/src-docs/src/views/markdown_editor/markdown_editor_height.js
@@ -7,25 +7,57 @@ import {
   EuiSpacer,
 } from '../../../../src/components';
 
-const initialContent1 = `## Hello world!
+const initialContent1 = `## 👋 Hello there!
+
+I'm a **EuiMarkdownEditor** with:
+
+- a \`height\` set to \`200\`
+- my parent container is a flex item
+
+
+### Things you should know 
+
+When my content is very long 😅
+
+The preview height is automatically adjusted 😉
+
+To avoid a scrollbar 😌
+
+### That's why I look good 😍
 
-I'm a **EuiMarkdownEditor** with a \`height\` set to \`400\`. My parent container is a flex item with a height set to \`600\`.
 `;
 
-const initialContent2 = `## Hello world!
+const initialContent2 = `## 👋 Hello again!
 
-I'm a **EuiMarkdownEditor** with a \`height\` set to \`"full"\`. My parent container is a flex item with a \`height\` set to \`600\`.
+I'm a **EuiMarkdownEditor** with:
+- a \`height\` set to \`"full"\`
+- my parent container is a flex item with a \`height\` set to \`600\`
 `;
 
-const initialContent3 = `## Hello world!
+const initialContent3 = `## 👋 Hi!
+
+I'm a **EuiMarkdownEditor** with:
+- a \`height\` set to \`200\`
+- my parent container is a flex item. 
+- the \`autoExpandPreview\` is set to \`false\` 
 
-I'm a **EuiMarkdownEditor** with a \`height\` set to \`"full"\`. My parent container is a div with a \`height\` set to \`600\`.
+### Things you should know 
+
+When the content grows the preview height is not automatically adjusted. Just because the \`autoExpandPreview\` is set to \`false\` 😉 
+`;
+
+const initialContent4 = `## 👋 Hello again!
+
+I'm just a **EuiMarkdownEditor** with:
+- a \`height\` set to \`200\`
+- a \`maxHeight\` set to \`300\`
 `;
 
 export default () => {
   const [value1, setValue1] = useState(initialContent1);
   const [value2, setValue2] = useState(initialContent2);
   const [value3, setValue3] = useState(initialContent3);
+  const [value4, setValue4] = useState(initialContent4);
 
   return (
     <div className="guideDemo__highlightGrid">
@@ -36,8 +68,7 @@ export default () => {
             initialViewMode="viewing"
             value={value1}
             onChange={setValue1}
-            height={400}
-            maxHeight={440}
+            height={200}
           />
         </EuiFlexItem>
         <EuiFlexItem style={{ height: '600px' }}>
@@ -53,15 +84,29 @@ export default () => {
 
       <EuiSpacer />
 
-      <div style={{ height: '600px', background: 'aliceblue' }}>
-        <EuiMarkdownEditor
-          aria-label="EUI markdown editor demo"
-          initialViewMode="viewing"
-          value={value3}
-          onChange={setValue3}
-          height="full"
-        />
-      </div>
+      <EuiFlexGroup>
+        <EuiFlexItem>
+          <EuiMarkdownEditor
+            aria-label="EUI markdown editor demo"
+            initialViewMode="viewing"
+            value={value3}
+            onChange={setValue3}
+            height={200}
+            autoExpandPreview={false}
+          />
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <EuiMarkdownEditor
+            aria-label="EUI markdown editor demo"
+            initialViewMode="viewing"
+            value={value4}
+            onChange={setValue4}
+            height={200}
+            maxHeight={300}
+            autoExpandPreview={false}
+          />
+        </EuiFlexItem>
+      </EuiFlexGroup>
     </div>
   );
 };
diff --git a/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap b/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap
index 2cccd8761cb..d50e6870a6a 100644
--- a/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap
+++ b/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap
@@ -219,7 +219,7 @@ exports[`EuiMarkdownEditor is rendered 1`] = `
 </div>
 `;
 
-exports[`EuiMarkdownEditor props height is rendered with a custom size 1`] = `
+exports[`EuiMarkdownEditor props autoExpandPreview is rendered with false 1`] = `
 <div
   class="euiMarkdownEditor testClass1 testClass2"
   data-test-subj="test subject string"
@@ -406,7 +406,7 @@ exports[`EuiMarkdownEditor props height is rendered with a custom size 1`] = `
         class="euiMarkdownEditorTextArea"
         id="editorId"
         rows="6"
-        style="height:calc(366px);max-height:466px"
+        style="height:calc(216px);max-height:466px"
       />
       <div
         class="euiMarkdownEditorFooter"
@@ -438,7 +438,7 @@ exports[`EuiMarkdownEditor props height is rendered with a custom size 1`] = `
 </div>
 `;
 
-exports[`EuiMarkdownEditor props height is rendered with full mode provided 1`] = `
+exports[`EuiMarkdownEditor props height is rendered in full mode 1`] = `
 <div
   class="euiMarkdownEditor euiMarkdownEditor--fullHeight testClass1 testClass2"
   data-test-subj="test subject string"
@@ -657,11 +657,229 @@ exports[`EuiMarkdownEditor props height is rendered with full mode provided 1`]
 </div>
 `;
 
+exports[`EuiMarkdownEditor props height is rendered with a custom size 1`] = `
+<div
+  class="euiMarkdownEditor testClass1 testClass2"
+  data-test-subj="test subject string"
+>
+  <div
+    class="euiMarkdownEditorToolbar"
+  >
+    <div
+      class="euiMarkdownEditorToolbar__buttons"
+    >
+      <span
+        class="euiToolTipAnchor"
+      >
+        <button
+          aria-label="Bold"
+          class="euiButtonIcon euiButtonIcon--text"
+          type="button"
+        >
+          <span
+            aria-hidden="true"
+            class="euiButtonIcon__icon"
+            data-euiicon-type="editorBold"
+          />
+        </button>
+      </span>
+      <span
+        class="euiToolTipAnchor"
+      >
+        <button
+          aria-label="Italic"
+          class="euiButtonIcon euiButtonIcon--text"
+          type="button"
+        >
+          <span
+            aria-hidden="true"
+            class="euiButtonIcon__icon"
+            data-euiicon-type="editorItalic"
+          />
+        </button>
+      </span>
+      <span
+        class="euiMarkdownEditorToolbar__divider"
+      />
+      <span
+        class="euiToolTipAnchor"
+      >
+        <button
+          aria-label="Unordered list"
+          class="euiButtonIcon euiButtonIcon--text"
+          type="button"
+        >
+          <span
+            aria-hidden="true"
+            class="euiButtonIcon__icon"
+            data-euiicon-type="editorUnorderedList"
+          />
+        </button>
+      </span>
+      <span
+        class="euiToolTipAnchor"
+      >
+        <button
+          aria-label="Ordered list"
+          class="euiButtonIcon euiButtonIcon--text"
+          type="button"
+        >
+          <span
+            aria-hidden="true"
+            class="euiButtonIcon__icon"
+            data-euiicon-type="editorOrderedList"
+          />
+        </button>
+      </span>
+      <span
+        class="euiToolTipAnchor"
+      >
+        <button
+          aria-label="Task list"
+          class="euiButtonIcon euiButtonIcon--text"
+          type="button"
+        >
+          <span
+            aria-hidden="true"
+            class="euiButtonIcon__icon"
+            data-euiicon-type="MarkdownCheckmark"
+          />
+        </button>
+      </span>
+      <span
+        class="euiMarkdownEditorToolbar__divider"
+      />
+      <span
+        class="euiToolTipAnchor"
+      >
+        <button
+          aria-label="Quote"
+          class="euiButtonIcon euiButtonIcon--text"
+          type="button"
+        >
+          <span
+            aria-hidden="true"
+            class="euiButtonIcon__icon"
+            data-euiicon-type="quote"
+          />
+        </button>
+      </span>
+      <span
+        class="euiToolTipAnchor"
+      >
+        <button
+          aria-label="Code"
+          class="euiButtonIcon euiButtonIcon--text"
+          type="button"
+        >
+          <span
+            aria-hidden="true"
+            class="euiButtonIcon__icon"
+            data-euiicon-type="editorCodeBlock"
+          />
+        </button>
+      </span>
+      <span
+        class="euiToolTipAnchor"
+      >
+        <button
+          aria-label="Link"
+          class="euiButtonIcon euiButtonIcon--text"
+          type="button"
+        >
+          <span
+            aria-hidden="true"
+            class="euiButtonIcon__icon"
+            data-euiicon-type="editorLink"
+          />
+        </button>
+      </span>
+      <span
+        class="euiMarkdownEditorToolbar__divider"
+      />
+      <span
+        class="euiToolTipAnchor"
+      >
+        <button
+          aria-label="Tooltip"
+          class="euiButtonIcon euiButtonIcon--text"
+          type="button"
+        >
+          <span
+            aria-hidden="true"
+            class="euiButtonIcon__icon"
+            data-euiicon-type="editorComment"
+          />
+        </button>
+      </span>
+    </div>
+    <button
+      class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small"
+      type="button"
+    >
+      <span
+        class="euiButtonContent euiButtonEmpty__content"
+      >
+        <span
+          class="euiButtonContent__icon"
+          data-euiicon-type="eye"
+        />
+        <span
+          class="euiButtonEmpty__text"
+        >
+          Preview
+        </span>
+      </span>
+    </button>
+  </div>
+  <div
+    class="euiMarkdownEditor__toggleContainer"
+    style="display:block"
+  >
+    <div
+      class="euiMarkdownEditorDropZone"
+    >
+      <textarea
+        aria-label="aria-label"
+        class="euiMarkdownEditorTextArea"
+        id="editorId"
+        rows="6"
+        style="height:calc(366px);max-height:466px"
+      />
+      <div
+        class="euiMarkdownEditorFooter"
+      >
+        <div
+          class="euiMarkdownEditorFooter__actions"
+        />
+        <button
+          aria-label="Show markdown help"
+          class="euiButtonIcon euiButtonIcon--text euiMarkdownEditorFooter__help"
+          type="button"
+        >
+          <span
+            aria-hidden="true"
+            class="euiButtonIcon__icon"
+            data-euiicon-type="MarkdownLogo"
+          />
+        </button>
+      </div>
+      <input
+        autocomplete="off"
+        multiple=""
+        style="display:none"
+        tabindex="-1"
+        type="file"
+      />
+    </div>
+  </div>
+</div>
+`;
+
 exports[`EuiMarkdownEditor props maxHeight is rendered with a custom size 1`] = `
 <div
   class="euiMarkdownEditor testClass1 testClass2"
   data-test-subj="test subject string"
-  max-height="600"
 >
   <div
     class="euiMarkdownEditorToolbar"
@@ -845,7 +1063,7 @@ exports[`EuiMarkdownEditor props maxHeight is rendered with a custom size 1`] =
         class="euiMarkdownEditorTextArea"
         id="editorId"
         rows="6"
-        style="height:calc(216px);max-height:466px"
+        style="height:calc(216px);max-height:566px"
       />
       <div
         class="euiMarkdownEditorFooter"
diff --git a/src/components/markdown_editor/markdown_editor.test.tsx b/src/components/markdown_editor/markdown_editor.test.tsx
index b1156897593..983569dabe0 100644
--- a/src/components/markdown_editor/markdown_editor.test.tsx
+++ b/src/components/markdown_editor/markdown_editor.test.tsx
@@ -56,7 +56,7 @@ describe('EuiMarkdownEditor', () => {
     });
 
     describe('height', () => {
-      test('is rendered with full mode provided', () => {
+      test('is rendered in full mode', () => {
         const component = render(
           <EuiMarkdownEditor
             editorId="editorId"
@@ -76,7 +76,23 @@ describe('EuiMarkdownEditor', () => {
         const component = render(
           <EuiMarkdownEditor
             editorId="editorId"
-            max-height={600}
+            maxHeight={600}
+            value=""
+            onChange={() => null}
+            {...requiredProps}
+          />
+        );
+
+        expect(component).toMatchSnapshot();
+      });
+    });
+
+    describe('autoExpandPreview', () => {
+      test('is rendered with false', () => {
+        const component = render(
+          <EuiMarkdownEditor
+            editorId="editorId"
+            autoExpandPreview={false}
             value=""
             onChange={() => null}
             {...requiredProps}
diff --git a/src/components/markdown_editor/markdown_editor.tsx b/src/components/markdown_editor/markdown_editor.tsx
index fff21205fe1..5c3f9493e7f 100644
--- a/src/components/markdown_editor/markdown_editor.tsx
+++ b/src/components/markdown_editor/markdown_editor.tsx
@@ -97,6 +97,11 @@ type CommonMarkdownEditorProps = Omit<
      */
     maxHeight?: number;
 
+    /**
+     * Automatically adjusts the preview height to fit all the content and avoid a scrollbar.
+     */
+    autoExpandPreview?: boolean;
+
     /** plugins to identify new syntax and parse it into an AST node */
     parsingPluginList?: PluggableList;
 
@@ -185,6 +190,7 @@ export const EuiMarkdownEditor = forwardRef<
       onChange,
       height = 250,
       maxHeight = 500,
+      autoExpandPreview = true,
       parsingPluginList = defaultParsingPlugins,
       processingPluginList = defaultProcessingPlugins,
       uiPlugins = [],
@@ -325,18 +331,31 @@ export const EuiMarkdownEditor = forwardRef<
 
     const [hasUnacceptedItems, setHasUnacceptedItems] = React.useState(false);
 
-    const [currentHeight, setCurrentHeight] = useState(height);
-
     const markdownFooterHeight = 34;
+    const [currentHeight, setCurrentHeight] = useState(height);
+    const textarea = textareaRef.current;
+    const previewRef = useRef<HTMLDivElement>(null);
 
     const onResize = () => {
-      if (textareaRef.current && viewMode === 'editing') {
-        const height = textareaRef.current.clientHeight;
+      if (textarea && viewMode === 'editing' && height !== 'full') {
+        const resizedTextareaHeight =
+          textarea.clientHeight + markdownFooterHeight;
 
-        setCurrentHeight(height + markdownFooterHeight);
+        setCurrentHeight(resizedTextareaHeight);
       }
     };
 
+    useEffect(() => {
+      if (isPreviewing && autoExpandPreview && height !== 'full') {
+        if (previewRef.current!.scrollHeight > currentHeight) {
+          // Adds 5 pixels to prevent scrollbar
+          setCurrentHeight(previewRef.current!.scrollHeight + 5);
+        } else {
+          setCurrentHeight(currentHeight);
+        }
+      }
+    }, [currentHeight, isPreviewing, height, autoExpandPreview]);
+
     const previewHeight =
       height === 'full'
         ? `calc(100% - ${markdownFooterHeight}px`
@@ -364,6 +383,7 @@ export const EuiMarkdownEditor = forwardRef<
 
           {isPreviewing && (
             <div
+              ref={previewRef}
               className="euiMarkdownEditorPreview"
               style={{ height: previewHeight }}>
               <EuiMarkdownFormat

From 936cfbe60038095013d844da086214d435da2914 Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Wed, 18 Nov 2020 17:45:11 +0000
Subject: [PATCH 11/23] Small fix

---
 src-docs/src/views/markdown_editor/mardown_editor_example.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src-docs/src/views/markdown_editor/mardown_editor_example.js b/src-docs/src/views/markdown_editor/mardown_editor_example.js
index e8da31f57fd..eb7efc98def 100644
--- a/src-docs/src/views/markdown_editor/mardown_editor_example.js
+++ b/src-docs/src/views/markdown_editor/mardown_editor_example.js
@@ -128,9 +128,7 @@ export const MarkdownEditorExample = {
             You can also control the <EuiCode>maxHeight</EuiCode> of the{' '}
             editor/preview area. This prop only works when the{' '}
             <EuiCode>height</EuiCode> is not set to{' '}
-            <EuiCode>&quot;full&quot;</EuiCode> and won&apos;t work for the
-            preview if the <EuiCode>autoExpandPreview</EuiCode> is set to{' '}
-            <EuiCode>true</EuiCode>.
+            <EuiCode>&quot;full&quot;</EuiCode>.
           </p>
         </>
       ),

From 4aa4dbdad61d6fd79bf8fbe5f6e7e4aa89b33948 Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Wed, 18 Nov 2020 17:59:41 +0000
Subject: [PATCH 12/23] CL

---
 CHANGELOG.md | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ae413a7f55e..a8eac0f22d8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `30.4.0`.
+- Added `'full'` option to the `height` prop of `EuiMarkdownEditor`. Added `autoExpandPreview` and `maxHeight` props to `EuiMarkdownEditor` ([#4245](https://github.com/elastic/eui/pull/4245))
 
 ## [`30.4.0`](https://github.com/elastic/eui/tree/v30.4.0)
 
@@ -8,7 +8,6 @@ No public interface changes since `30.4.0`.
 - Added `testenv` mock for `htmlIdGenerator` ([#4212](https://github.com/elastic/eui/pull/4212))
 - Added several Sass mixins for handling of unified focus/hover states ([#4242](https://github.com/elastic/eui/pull/4242))
 - Exported `useDataGridColumnSelector`, `useDataGridColumnSorting`, and `useDataGridStyleSelector` hooks ([#4271](https://github.com/elastic/eui/pull/4271))
-- Added `textareaClassName` and `previewClassName` props to `EuiMarkdownEditor` to better support extend it to full height ([#4245](https://github.com/elastic/eui/pull/4245))
 
 **Theme: Amsterdam**
 

From 1feb0f11a4093826dd0c7d60ca2f921f4ab0b9c0 Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Fri, 20 Nov 2020 18:43:00 +0000
Subject: [PATCH 13/23] Calculating toolbar and footer heights from their refs

---
 .../markdown_editor/mardown_editor_example.js |  19 ++
 .../markdown_editor/markdown_editor_height.js |   1 -
 .../markdown_editor.test.tsx.snap             |  18 +-
 .../markdown_editor/_markdown_editor.scss     |  10 +-
 .../_markdown_editor_footer.scss              |   3 +-
 .../markdown_editor/markdown_editor.test.tsx  |   2 -
 .../markdown_editor/markdown_editor.tsx       |  51 +++--
 .../markdown_editor_drop_zone.tsx             |  13 +-
 .../markdown_editor_footer.tsx                |  15 +-
 .../markdown_editor_toolbar.tsx               | 204 +++++++++---------
 10 files changed, 195 insertions(+), 141 deletions(-)

diff --git a/src-docs/src/views/markdown_editor/mardown_editor_example.js b/src-docs/src/views/markdown_editor/mardown_editor_example.js
index eb7efc98def..33b53a47dba 100644
--- a/src-docs/src/views/markdown_editor/mardown_editor_example.js
+++ b/src-docs/src/views/markdown_editor/mardown_editor_example.js
@@ -16,14 +16,30 @@ import { Link } from 'react-router-dom';
 import MarkdownEditor from './markdown_editor';
 const markdownEditorSource = require('!!raw-loader!./markdown_editor');
 const markdownEditorHtml = renderToHtml(MarkdownEditor);
+const markdownEditorSnippet = `<EuiMarkdownEditor
+  value={value}
+  onChange={setValue}
+/>`;
 
 import MarkdownEditorErrors from './markdown_editor_errors';
 const markdownEditorErrorsSource = require('!!raw-loader!./markdown_editor_errors');
 const markdownEditorErrorsHtml = renderToHtml(MarkdownEditorErrors);
+const markdownEditorErrorsSnippet = `<EuiMarkdownEditor
+  value={value}
+  onChange={setValue}
+  onParse={onParse}
+  errors={messages}
+/>`;
 
 import MarkdownEditorHeight from './markdown_editor_height';
 const markdownEditorHeightSource = require('!!raw-loader!./markdown_editor_height');
 const markdownEditorHeightHtml = renderToHtml(MarkdownEditorHeight);
+const markdownEditorHeightSnippet = `<EuiMarkdownEditor
+  value={value}
+  onChange={setValue}
+  height={400}
+  maxHeight={600}
+/>`;
 
 export const MarkdownEditorExample = {
   title: 'Markdown editor',
@@ -70,6 +86,7 @@ export const MarkdownEditorExample = {
       props: {
         EuiMarkdownEditor,
       },
+      snippet: markdownEditorSnippet,
       demo: <MarkdownEditor />,
     },
     {
@@ -97,6 +114,7 @@ export const MarkdownEditorExample = {
       props: {
         EuiMarkdownEditor,
       },
+      snippet: markdownEditorErrorsSnippet,
       demo: <MarkdownEditorErrors />,
     },
     {
@@ -135,6 +153,7 @@ export const MarkdownEditorExample = {
       props: {
         EuiMarkdownEditor,
       },
+      snippet: markdownEditorHeightSnippet,
       demo: <MarkdownEditorHeight />,
     },
   ],
diff --git a/src-docs/src/views/markdown_editor/markdown_editor_height.js b/src-docs/src/views/markdown_editor/markdown_editor_height.js
index 21e019ae03f..bc1eb43bc74 100644
--- a/src-docs/src/views/markdown_editor/markdown_editor_height.js
+++ b/src-docs/src/views/markdown_editor/markdown_editor_height.js
@@ -103,7 +103,6 @@ export default () => {
             onChange={setValue4}
             height={200}
             maxHeight={300}
-            autoExpandPreview={false}
           />
         </EuiFlexItem>
       </EuiFlexGroup>
diff --git a/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap b/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap
index d50e6870a6a..253487a8172 100644
--- a/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap
+++ b/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap
@@ -177,7 +177,7 @@ exports[`EuiMarkdownEditor is rendered 1`] = `
   </div>
   <div
     class="euiMarkdownEditor__toggleContainer"
-    style="display:block"
+    style="height:calc(100% - 0px)"
   >
     <div
       class="euiMarkdownEditorDropZone"
@@ -187,7 +187,7 @@ exports[`EuiMarkdownEditor is rendered 1`] = `
         class="euiMarkdownEditorTextArea"
         id="editorId"
         rows="6"
-        style="height:calc(216px);max-height:466px"
+        style="height:calc(250px);max-height:500px"
       />
       <div
         class="euiMarkdownEditorFooter"
@@ -396,7 +396,7 @@ exports[`EuiMarkdownEditor props autoExpandPreview is rendered with false 1`] =
   </div>
   <div
     class="euiMarkdownEditor__toggleContainer"
-    style="display:block"
+    style="height:calc(100% - 0px)"
   >
     <div
       class="euiMarkdownEditorDropZone"
@@ -406,7 +406,7 @@ exports[`EuiMarkdownEditor props autoExpandPreview is rendered with false 1`] =
         class="euiMarkdownEditorTextArea"
         id="editorId"
         rows="6"
-        style="height:calc(216px);max-height:466px"
+        style="height:calc(250px);max-height:500px"
       />
       <div
         class="euiMarkdownEditorFooter"
@@ -615,7 +615,7 @@ exports[`EuiMarkdownEditor props height is rendered in full mode 1`] = `
   </div>
   <div
     class="euiMarkdownEditor__toggleContainer"
-    style="display:block"
+    style="height:calc(100% - 0px)"
   >
     <div
       class="euiMarkdownEditorDropZone"
@@ -834,7 +834,7 @@ exports[`EuiMarkdownEditor props height is rendered with a custom size 1`] = `
   </div>
   <div
     class="euiMarkdownEditor__toggleContainer"
-    style="display:block"
+    style="height:calc(100% - 0px)"
   >
     <div
       class="euiMarkdownEditorDropZone"
@@ -844,7 +844,7 @@ exports[`EuiMarkdownEditor props height is rendered with a custom size 1`] = `
         class="euiMarkdownEditorTextArea"
         id="editorId"
         rows="6"
-        style="height:calc(366px);max-height:466px"
+        style="height:calc(400px);max-height:500px"
       />
       <div
         class="euiMarkdownEditorFooter"
@@ -1053,7 +1053,7 @@ exports[`EuiMarkdownEditor props maxHeight is rendered with a custom size 1`] =
   </div>
   <div
     class="euiMarkdownEditor__toggleContainer"
-    style="display:block"
+    style="height:calc(100% - 0px)"
   >
     <div
       class="euiMarkdownEditorDropZone"
@@ -1063,7 +1063,7 @@ exports[`EuiMarkdownEditor props maxHeight is rendered with a custom size 1`] =
         class="euiMarkdownEditorTextArea"
         id="editorId"
         rows="6"
-        style="height:calc(216px);max-height:566px"
+        style="height:calc(250px);max-height:600px"
       />
       <div
         class="euiMarkdownEditorFooter"
diff --git a/src/components/markdown_editor/_markdown_editor.scss b/src/components/markdown_editor/_markdown_editor.scss
index 970d672604b..308e4960d02 100644
--- a/src/components/markdown_editor/_markdown_editor.scss
+++ b/src/components/markdown_editor/_markdown_editor.scss
@@ -6,6 +6,12 @@
     @include euiSlightShadowHover;
   }
 
+  &--isPreviewing {
+    .euiMarkdownEditor__toggleContainer {
+      display: none;
+    }
+  }
+
   &--fullHeight {
     display: flex;
     flex-direction: column;
@@ -15,10 +21,6 @@
       resize: none;
     }
 
-    // safari needs this calc. Other browsers work well with 100%
-    .euiMarkdownEditor__toggleContainer {
-      height: calc(100% - #{$euiMarkdownEditorToolbarHeight});
-    }
 
     .euiMarkdownEditorDropZone {
       height: 100%;
diff --git a/src/components/markdown_editor/_markdown_editor_footer.scss b/src/components/markdown_editor/_markdown_editor_footer.scss
index 21fdb36695d..ccbf4e4a142 100644
--- a/src/components/markdown_editor/_markdown_editor_footer.scss
+++ b/src/components/markdown_editor/_markdown_editor_footer.scss
@@ -1,7 +1,6 @@
 .euiMarkdownEditorFooter {
   display: inline-flex;
-  padding: $euiSizeXS 0;
-  height: $euiMarkdownEditorFooterHeight;
+  padding: $euiSizeXS;
   border: $euiBorderThin;
   align-items: center;
   background: $euiPageBackgroundColor;
diff --git a/src/components/markdown_editor/markdown_editor.test.tsx b/src/components/markdown_editor/markdown_editor.test.tsx
index 983569dabe0..9d38e7de4b9 100644
--- a/src/components/markdown_editor/markdown_editor.test.tsx
+++ b/src/components/markdown_editor/markdown_editor.test.tsx
@@ -53,9 +53,7 @@ describe('EuiMarkdownEditor', () => {
 
         expect(component).toMatchSnapshot();
       });
-    });
 
-    describe('height', () => {
       test('is rendered in full mode', () => {
         const component = render(
           <EuiMarkdownEditor
diff --git a/src/components/markdown_editor/markdown_editor.tsx b/src/components/markdown_editor/markdown_editor.tsx
index 5c3f9493e7f..c0cb34844ff 100644
--- a/src/components/markdown_editor/markdown_editor.tsx
+++ b/src/components/markdown_editor/markdown_editor.tsx
@@ -223,12 +223,6 @@ export const EuiMarkdownEditor = forwardRef<
       [editorId, toolbarPlugins.map(({ name }) => name).join(',')]
     );
 
-    const classes = classNames(
-      'euiMarkdownEditor',
-      height === 'full' && 'euiMarkdownEditor--fullHeight',
-      className
-    );
-
     const parser = useMemo(() => {
       const Compiler = (tree: any) => {
         return tree;
@@ -252,6 +246,7 @@ export const EuiMarkdownEditor = forwardRef<
     }, [parser, value]);
 
     const isPreviewing = viewMode === MODE_VIEWING;
+    const isEditing = viewMode === MODE_EDITING;
 
     const replaceNode = useCallback(
       (position, next) => {
@@ -329,22 +324,36 @@ export const EuiMarkdownEditor = forwardRef<
       [replaceNode]
     );
 
-    const [hasUnacceptedItems, setHasUnacceptedItems] = React.useState(false);
-
-    const markdownFooterHeight = 34;
-    const [currentHeight, setCurrentHeight] = useState(height);
     const textarea = textareaRef.current;
     const previewRef = useRef<HTMLDivElement>(null);
+    const editorToolbarRef = useRef<HTMLDivElement>(null);
+    const [hasUnacceptedItems, setHasUnacceptedItems] = React.useState(false);
+    const [currentHeight, setCurrentHeight] = useState(height);
+    const [editorFooterHeight, setEditorFooterHeight] = useState(0);
+    const [editorToolbarHeight, setEditorToolbarHeight] = useState(0);
+
+    const classes = classNames(
+      'euiMarkdownEditor',
+      { 'euiMarkdownEditor--fullHeight': height === 'full' },
+      {
+        'euiMarkdownEditor--isPreviewing': isPreviewing,
+      },
+      className
+    );
 
     const onResize = () => {
-      if (textarea && viewMode === 'editing' && height !== 'full') {
+      if (textarea && isEditing && height !== 'full') {
         const resizedTextareaHeight =
-          textarea.clientHeight + markdownFooterHeight;
+          textarea.offsetHeight + editorFooterHeight;
 
         setCurrentHeight(resizedTextareaHeight);
       }
     };
 
+    useEffect(() => {
+      setEditorToolbarHeight(editorToolbarRef.current!.offsetHeight);
+    }, [setEditorToolbarHeight]);
+
     useEffect(() => {
       if (isPreviewing && autoExpandPreview && height !== 'full') {
         if (previewRef.current!.scrollHeight > currentHeight) {
@@ -358,20 +367,26 @@ export const EuiMarkdownEditor = forwardRef<
 
     const previewHeight =
       height === 'full'
-        ? `calc(100% - ${markdownFooterHeight}px`
+        ? `calc(100% - ${editorFooterHeight}px)`
         : currentHeight;
 
     const textAreaHeight =
-      height === 'full' ? '100%' : `calc(${height - markdownFooterHeight}px)`;
+      height === 'full' ? '100%' : `calc(${height - editorFooterHeight}px)`;
 
     // we just want add a max-height to the textarea when the height is not set to 'full'
     const textAreaMaxHeight =
-      height !== 'full' ? `${maxHeight - markdownFooterHeight}px` : '';
+      height !== 'full' ? `${maxHeight - editorFooterHeight}px` : '';
+
+    // safari needs this calc when the height is set to full
+    const editorToggleContainerHeight = `calc(100% - ${editorToolbarHeight}px)`;
+
+    console.log('editorToolbarHeight', editorToolbarHeight);
 
     return (
       <EuiMarkdownContext.Provider value={contextValue}>
         <div className={classes} {...rest}>
           <EuiMarkdownEditorToolbar
+            ref={editorToolbarRef}
             selectedNode={selectedNode}
             markdownActions={markdownActions}
             onClickPreview={() =>
@@ -396,8 +411,12 @@ export const EuiMarkdownEditor = forwardRef<
           {/* Toggle the editor's display instead of unmounting to retain its undo/redo history */}
           <div
             className="euiMarkdownEditor__toggleContainer"
-            style={{ display: isPreviewing ? 'none' : 'block' }}>
+            style={{
+              height: editorToggleContainerHeight,
+            }}>
             <EuiMarkdownEditorDropZone
+              setEditorFooterHeight={setEditorFooterHeight}
+              isEditing={isEditing}
               dropHandlers={dropHandlers}
               insertText={(
                 text: string,
diff --git a/src/components/markdown_editor/markdown_editor_drop_zone.tsx b/src/components/markdown_editor/markdown_editor_drop_zone.tsx
index 8b2dd395cb5..8f8e4941d2e 100644
--- a/src/components/markdown_editor/markdown_editor_drop_zone.tsx
+++ b/src/components/markdown_editor/markdown_editor_drop_zone.tsx
@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import React, { FunctionComponent } from 'react';
+import React, { FunctionComponent, useRef, useEffect } from 'react';
 import classNames from 'classnames';
 import { useDropzone } from 'react-dropzone';
 import { EuiMarkdownEditorFooter } from './markdown_editor_footer';
@@ -36,6 +36,8 @@ interface EuiMarkdownEditorDropZoneProps {
   insertText: (text: string, config: EuiMarkdownStringTagConfig) => void;
   hasUnacceptedItems: boolean;
   setHasUnacceptedItems: (hasUnacceptedItems: boolean) => void;
+  setEditorFooterHeight: any;
+  isEditing: boolean;
 }
 
 const getUnacceptedItems = (
@@ -78,6 +80,8 @@ export const EuiMarkdownEditorDropZone: FunctionComponent<EuiMarkdownEditorDropZ
     insertText,
     hasUnacceptedItems,
     setHasUnacceptedItems,
+    setEditorFooterHeight,
+    isEditing,
   } = props;
 
   const classes = classNames('euiMarkdownEditorDropZone', {
@@ -86,6 +90,12 @@ export const EuiMarkdownEditorDropZone: FunctionComponent<EuiMarkdownEditorDropZ
     'euiMarkdownEditorDropZone--isDraggingError': isDraggingError,
   });
 
+  const editorFooterRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    isEditing && setEditorFooterHeight(editorFooterRef.current!.offsetHeight);
+  }, [setEditorFooterHeight, isEditing]);
+
   const { getRootProps, getInputProps, open } = useDropzone({
     disabled: dropHandlers.length === 0,
     // Disable click and keydown behavior
@@ -190,6 +200,7 @@ export const EuiMarkdownEditorDropZone: FunctionComponent<EuiMarkdownEditorDropZ
     <div {...getRootProps()} className={classes}>
       {children}
       <EuiMarkdownEditorFooter
+        ref={editorFooterRef}
         uiPlugins={uiPlugins}
         openFiles={() => {
           setHasUnacceptedItems(false);
diff --git a/src/components/markdown_editor/markdown_editor_footer.tsx b/src/components/markdown_editor/markdown_editor_footer.tsx
index 5d2e5b0e7ca..59dea1ed9d9 100644
--- a/src/components/markdown_editor/markdown_editor_footer.tsx
+++ b/src/components/markdown_editor/markdown_editor_footer.tsx
@@ -18,11 +18,11 @@
  */
 
 import React, {
-  FunctionComponent,
   useState,
   useMemo,
   Fragment,
   ReactChild,
+  forwardRef,
 } from 'react';
 import { EuiLoadingSpinner } from '../loading';
 import { EuiButtonEmpty, EuiButtonIcon } from '../button';
@@ -52,9 +52,10 @@ interface EuiMarkdownEditorFooterProps {
   dropHandlers: EuiMarkdownDropHandler[];
 }
 
-export const EuiMarkdownEditorFooter: FunctionComponent<EuiMarkdownEditorFooterProps> = (
-  props
-) => {
+export const EuiMarkdownEditorFooter = forwardRef<
+  HTMLDivElement,
+  EuiMarkdownEditorFooterProps
+>((props, ref) => {
   const {
     uiPlugins,
     isUploadingFiles,
@@ -177,7 +178,7 @@ export const EuiMarkdownEditorFooter: FunctionComponent<EuiMarkdownEditorFooterP
   }
 
   return (
-    <div className="euiMarkdownEditorFooter">
+    <div ref={ref} className="euiMarkdownEditorFooter">
       <div className="euiMarkdownEditorFooter__actions">
         {uploadButton}
         {errorsButton}
@@ -250,4 +251,6 @@ export const EuiMarkdownEditorFooter: FunctionComponent<EuiMarkdownEditorFooterP
       )}
     </div>
   );
-};
+});
+
+EuiMarkdownEditorFooter.displayName = 'EuiMarkdownEditorFooter';
diff --git a/src/components/markdown_editor/markdown_editor_toolbar.tsx b/src/components/markdown_editor/markdown_editor_toolbar.tsx
index 3dfbc4a7a00..5c9246ff012 100644
--- a/src/components/markdown_editor/markdown_editor_toolbar.tsx
+++ b/src/components/markdown_editor/markdown_editor_toolbar.tsx
@@ -18,10 +18,10 @@
  */
 
 import React, {
-  FunctionComponent,
   HTMLAttributes,
   MouseEventHandler,
   useContext,
+  forwardRef,
 } from 'react';
 import { CommonProps } from '../common';
 import { EuiButtonEmpty, EuiButtonIcon } from '../button';
@@ -100,108 +100,112 @@ const quoteCodeLinkButtons = [
   },
 ];
 
-export const EuiMarkdownEditorToolbar: FunctionComponent<EuiMarkdownEditorToolbarProps> = ({
-  markdownActions,
-  viewMode,
-  onClickPreview,
-  uiPlugins,
-  selectedNode,
-}) => {
-  const { openPluginEditor } = useContext(EuiMarkdownContext);
+export const EuiMarkdownEditorToolbar = forwardRef<
+  HTMLDivElement,
+  EuiMarkdownEditorToolbarProps
+>(
+  (
+    { markdownActions, viewMode, onClickPreview, uiPlugins, selectedNode },
+    ref
+  ) => {
+    const { openPluginEditor } = useContext(EuiMarkdownContext);
 
-  const handleMdButtonClick = (mdButtonId: string) => {
-    const actionResult = markdownActions.do(mdButtonId);
-    if (actionResult !== true) openPluginEditor(actionResult);
-  };
+    const handleMdButtonClick = (mdButtonId: string) => {
+      const actionResult = markdownActions.do(mdButtonId);
+      if (actionResult !== true) openPluginEditor(actionResult);
+    };
 
-  const isPreviewing = viewMode === MODE_VIEWING;
+    const isPreviewing = viewMode === MODE_VIEWING;
 
-  return (
-    <div className="euiMarkdownEditorToolbar">
-      <div className="euiMarkdownEditorToolbar__buttons">
-        {boldItalicButtons.map((item) => (
-          <EuiToolTip key={item.id} content={item.label} delay="long">
-            <EuiButtonIcon
-              color="text"
-              onClick={() => handleMdButtonClick(item.id)}
-              iconType={item.iconType}
-              aria-label={item.label}
-              isDisabled={isPreviewing}
-            />
-          </EuiToolTip>
-        ))}
-        <span className="euiMarkdownEditorToolbar__divider" />
-        {listButtons.map((item) => (
-          <EuiToolTip key={item.id} content={item.label} delay="long">
-            <EuiButtonIcon
-              color="text"
-              onClick={() => handleMdButtonClick(item.id)}
-              iconType={item.iconType}
-              aria-label={item.label}
-              isDisabled={isPreviewing}
-            />
-          </EuiToolTip>
-        ))}
-        <span className="euiMarkdownEditorToolbar__divider" />
-        {quoteCodeLinkButtons.map((item) => (
-          <EuiToolTip key={item.id} content={item.label} delay="long">
-            <EuiButtonIcon
-              color="text"
-              onClick={() => handleMdButtonClick(item.id)}
-              iconType={item.iconType}
-              aria-label={item.label}
-              isDisabled={isPreviewing}
-            />
-          </EuiToolTip>
-        ))}
+    return (
+      <div ref={ref} className="euiMarkdownEditorToolbar">
+        <div className="euiMarkdownEditorToolbar__buttons">
+          {boldItalicButtons.map((item) => (
+            <EuiToolTip key={item.id} content={item.label} delay="long">
+              <EuiButtonIcon
+                color="text"
+                onClick={() => handleMdButtonClick(item.id)}
+                iconType={item.iconType}
+                aria-label={item.label}
+                isDisabled={isPreviewing}
+              />
+            </EuiToolTip>
+          ))}
+          <span className="euiMarkdownEditorToolbar__divider" />
+          {listButtons.map((item) => (
+            <EuiToolTip key={item.id} content={item.label} delay="long">
+              <EuiButtonIcon
+                color="text"
+                onClick={() => handleMdButtonClick(item.id)}
+                iconType={item.iconType}
+                aria-label={item.label}
+                isDisabled={isPreviewing}
+              />
+            </EuiToolTip>
+          ))}
+          <span className="euiMarkdownEditorToolbar__divider" />
+          {quoteCodeLinkButtons.map((item) => (
+            <EuiToolTip key={item.id} content={item.label} delay="long">
+              <EuiButtonIcon
+                color="text"
+                onClick={() => handleMdButtonClick(item.id)}
+                iconType={item.iconType}
+                aria-label={item.label}
+                isDisabled={isPreviewing}
+              />
+            </EuiToolTip>
+          ))}
+
+          {uiPlugins.length > 0 ? (
+            <>
+              <span className="euiMarkdownEditorToolbar__divider" />
+              {uiPlugins.map(({ name, button }) => {
+                const isSelectedNodeType =
+                  selectedNode && selectedNode.type === name;
+                return (
+                  <EuiToolTip key={name} content={button.label} delay="long">
+                    <EuiButtonIcon
+                      color="text"
+                      {...(isSelectedNodeType
+                        ? {
+                            style: { background: 'rgba(0, 0, 0, 0.15)' },
+                          }
+                        : null)}
+                      onClick={() => handleMdButtonClick(name)}
+                      iconType={button.iconType}
+                      aria-label={button.label}
+                      isDisabled={isPreviewing}
+                    />
+                  </EuiToolTip>
+                );
+              })}
+            </>
+          ) : null}
+        </div>
 
-        {uiPlugins.length > 0 ? (
-          <>
-            <span className="euiMarkdownEditorToolbar__divider" />
-            {uiPlugins.map(({ name, button }) => {
-              const isSelectedNodeType =
-                selectedNode && selectedNode.type === name;
-              return (
-                <EuiToolTip key={name} content={button.label} delay="long">
-                  <EuiButtonIcon
-                    color="text"
-                    {...(isSelectedNodeType
-                      ? {
-                          style: { background: 'rgba(0, 0, 0, 0.15)' },
-                        }
-                      : null)}
-                    onClick={() => handleMdButtonClick(name)}
-                    iconType={button.iconType}
-                    aria-label={button.label}
-                    isDisabled={isPreviewing}
-                  />
-                </EuiToolTip>
-              );
-            })}
-          </>
-        ) : null}
+        {isPreviewing ? (
+          <EuiButtonEmpty
+            iconType="editorCodeBlock"
+            color="text"
+            size="s"
+            onClick={onClickPreview}>
+            <EuiI18n token="euiMarkdownEditorToolbar.editor" default="Editor" />
+          </EuiButtonEmpty>
+        ) : (
+          <EuiButtonEmpty
+            iconType="eye"
+            color="text"
+            size="s"
+            onClick={onClickPreview}>
+            <EuiI18n
+              token="euiMarkdownEditorToolbar.previewMarkdown"
+              default="Preview"
+            />
+          </EuiButtonEmpty>
+        )}
       </div>
+    );
+  }
+);
 
-      {isPreviewing ? (
-        <EuiButtonEmpty
-          iconType="editorCodeBlock"
-          color="text"
-          size="s"
-          onClick={onClickPreview}>
-          <EuiI18n token="euiMarkdownEditorToolbar.editor" default="Editor" />
-        </EuiButtonEmpty>
-      ) : (
-        <EuiButtonEmpty
-          iconType="eye"
-          color="text"
-          size="s"
-          onClick={onClickPreview}>
-          <EuiI18n
-            token="euiMarkdownEditorToolbar.previewMarkdown"
-            default="Preview"
-          />
-        </EuiButtonEmpty>
-      )}
-    </div>
-  );
-};
+EuiMarkdownEditorToolbar.displayName = 'EuiMarkdownEditorToolbar';

From 7f8574aba9e0cc0703d9d8d878a57b5a7b7abb67 Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Fri, 20 Nov 2020 19:20:15 +0000
Subject: [PATCH 14/23] Removed unused Sass file

---
 src/components/markdown_editor/_index.scss     | 1 -
 src/components/markdown_editor/_variables.scss | 2 --
 2 files changed, 3 deletions(-)
 delete mode 100644 src/components/markdown_editor/_variables.scss

diff --git a/src/components/markdown_editor/_index.scss b/src/components/markdown_editor/_index.scss
index c0d8b9e6538..dd5dfac5390 100644
--- a/src/components/markdown_editor/_index.scss
+++ b/src/components/markdown_editor/_index.scss
@@ -1,4 +1,3 @@
-@import 'variables';
 @import 'markdown_editor';
 @import 'markdown_editor_drop_zone';
 @import 'markdown_format';
diff --git a/src/components/markdown_editor/_variables.scss b/src/components/markdown_editor/_variables.scss
deleted file mode 100644
index 2c24c84f8b2..00000000000
--- a/src/components/markdown_editor/_variables.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-$euiMarkdownEditorToolbarHeight: 40px;
-$euiMarkdownEditorFooterHeight: 34px;
\ No newline at end of file

From 136acf96b7234bd606b46a1af017235a1733e221 Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Fri, 20 Nov 2020 19:44:24 +0000
Subject: [PATCH 15/23] Types

---
 src/components/markdown_editor/markdown_editor.tsx           | 1 -
 src/components/markdown_editor/markdown_editor_drop_zone.tsx | 2 +-
 src/components/markdown_editor/markdown_editor_toolbar.tsx   | 3 ++-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/markdown_editor/markdown_editor.tsx b/src/components/markdown_editor/markdown_editor.tsx
index c0cb34844ff..ea1f34a3326 100644
--- a/src/components/markdown_editor/markdown_editor.tsx
+++ b/src/components/markdown_editor/markdown_editor.tsx
@@ -373,7 +373,6 @@ export const EuiMarkdownEditor = forwardRef<
     const textAreaHeight =
       height === 'full' ? '100%' : `calc(${height - editorFooterHeight}px)`;
 
-    // we just want add a max-height to the textarea when the height is not set to 'full'
     const textAreaMaxHeight =
       height !== 'full' ? `${maxHeight - editorFooterHeight}px` : '';
 
diff --git a/src/components/markdown_editor/markdown_editor_drop_zone.tsx b/src/components/markdown_editor/markdown_editor_drop_zone.tsx
index 8f8e4941d2e..af2bb710fe6 100644
--- a/src/components/markdown_editor/markdown_editor_drop_zone.tsx
+++ b/src/components/markdown_editor/markdown_editor_drop_zone.tsx
@@ -36,7 +36,7 @@ interface EuiMarkdownEditorDropZoneProps {
   insertText: (text: string, config: EuiMarkdownStringTagConfig) => void;
   hasUnacceptedItems: boolean;
   setHasUnacceptedItems: (hasUnacceptedItems: boolean) => void;
-  setEditorFooterHeight: any;
+  setEditorFooterHeight: (height: number) => void;
   isEditing: boolean;
 }
 
diff --git a/src/components/markdown_editor/markdown_editor_toolbar.tsx b/src/components/markdown_editor/markdown_editor_toolbar.tsx
index 5c9246ff012..a93ac559048 100644
--- a/src/components/markdown_editor/markdown_editor_toolbar.tsx
+++ b/src/components/markdown_editor/markdown_editor_toolbar.tsx
@@ -22,6 +22,7 @@ import React, {
   MouseEventHandler,
   useContext,
   forwardRef,
+  Ref,
 } from 'react';
 import { CommonProps } from '../common';
 import { EuiButtonEmpty, EuiButtonIcon } from '../button';
@@ -106,7 +107,7 @@ export const EuiMarkdownEditorToolbar = forwardRef<
 >(
   (
     { markdownActions, viewMode, onClickPreview, uiPlugins, selectedNode },
-    ref
+    ref: Ref<HTMLDivElement>
   ) => {
     const { openPluginEditor } = useContext(EuiMarkdownContext);
 

From 66381fed87b287d98b0fa104893ed0211edb2575 Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Fri, 20 Nov 2020 20:00:30 +0000
Subject: [PATCH 16/23] Small fixes

---
 src/components/markdown_editor/_markdown_editor.scss | 3 +--
 src/components/markdown_editor/markdown_editor.tsx   | 4 +---
 2 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/components/markdown_editor/_markdown_editor.scss b/src/components/markdown_editor/_markdown_editor.scss
index 28ed944aba7..831bdfa878c 100644
--- a/src/components/markdown_editor/_markdown_editor.scss
+++ b/src/components/markdown_editor/_markdown_editor.scss
@@ -14,9 +14,8 @@
       resize: none;
     }
 
-
     .euiMarkdownEditorDropZone {
       height: 100%;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/markdown_editor/markdown_editor.tsx b/src/components/markdown_editor/markdown_editor.tsx
index ea1f34a3326..dcea48471b8 100644
--- a/src/components/markdown_editor/markdown_editor.tsx
+++ b/src/components/markdown_editor/markdown_editor.tsx
@@ -357,7 +357,7 @@ export const EuiMarkdownEditor = forwardRef<
     useEffect(() => {
       if (isPreviewing && autoExpandPreview && height !== 'full') {
         if (previewRef.current!.scrollHeight > currentHeight) {
-          // Adds 5 pixels to prevent scrollbar
+          // Adds 5 pixels to prevent a scrollbar
           setCurrentHeight(previewRef.current!.scrollHeight + 5);
         } else {
           setCurrentHeight(currentHeight);
@@ -379,8 +379,6 @@ export const EuiMarkdownEditor = forwardRef<
     // safari needs this calc when the height is set to full
     const editorToggleContainerHeight = `calc(100% - ${editorToolbarHeight}px)`;
 
-    console.log('editorToolbarHeight', editorToolbarHeight);
-
     return (
       <EuiMarkdownContext.Provider value={contextValue}>
         <div className={classes} {...rest}>

From 340be1cf3141400b09c1fff042552819961695a2 Mon Sep 17 00:00:00 2001
From: Chandler Prall <chandler.prall@gmail.com>
Date: Thu, 10 Dec 2020 11:24:02 -0700
Subject: [PATCH 17/23] Account fully for markdown preview's border and margin
 when resizing to fit content

---
 .../markdown_editor/markdown_editor.tsx       | 20 +++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/components/markdown_editor/markdown_editor.tsx b/src/components/markdown_editor/markdown_editor.tsx
index dcea48471b8..f68840d8048 100644
--- a/src/components/markdown_editor/markdown_editor.tsx
+++ b/src/components/markdown_editor/markdown_editor.tsx
@@ -357,8 +357,24 @@ export const EuiMarkdownEditor = forwardRef<
     useEffect(() => {
       if (isPreviewing && autoExpandPreview && height !== 'full') {
         if (previewRef.current!.scrollHeight > currentHeight) {
-          // Adds 5 pixels to prevent a scrollbar
-          setCurrentHeight(previewRef.current!.scrollHeight + 5);
+          // scrollHeight does not include the border or margin
+          // so we ask for the computed value for those,
+          // which is always in pixels because getComputedValue
+          // returns the resolved values
+          const elementComputedStyle = window.getComputedStyle(
+            previewRef.current!
+          );
+          const borderWidth =
+            parseFloat(elementComputedStyle.borderTopWidth) +
+            parseFloat(elementComputedStyle.borderBottomWidth);
+          const marginWidth =
+            parseFloat(elementComputedStyle.marginTop) +
+            parseFloat(elementComputedStyle.marginBottom);
+
+          // then add an extra pixel for safety and because the scrollHeight value is rounded
+          const extraHeight = borderWidth + marginWidth + 1;
+
+          setCurrentHeight(previewRef.current!.scrollHeight + extraHeight);
         } else {
           setCurrentHeight(currentHeight);
         }

From 9d6f1d744ab38afc1770d918682fe72ccb421fd0 Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@elastic.co>
Date: Fri, 11 Dec 2020 16:59:40 +0000
Subject: [PATCH 18/23] Update
 src/components/markdown_editor/markdown_editor.tsx

Co-authored-by: Chandler Prall <chandler.prall@gmail.com>
---
 src/components/markdown_editor/markdown_editor.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/markdown_editor/markdown_editor.tsx b/src/components/markdown_editor/markdown_editor.tsx
index f68840d8048..1234a80d933 100644
--- a/src/components/markdown_editor/markdown_editor.tsx
+++ b/src/components/markdown_editor/markdown_editor.tsx
@@ -93,7 +93,7 @@ type CommonMarkdownEditorProps = Omit<
 
     /**
      * Sets the `max-height` in pixels of the editor/preview area.
-     * It doesn't work when the `height` is set to `full`.
+     * It has no effect when the `height` is set to `full`.
      */
     maxHeight?: number;
 

From 5b5e393d71fba0750d74598772adda4fa5efe0c9 Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Mon, 14 Dec 2020 11:08:41 +0000
Subject: [PATCH 19/23] Removing unnecessary code

---
 src/components/markdown_editor/markdown_editor.tsx |  2 --
 .../markdown_editor/markdown_editor_text_area.tsx  | 14 --------------
 2 files changed, 16 deletions(-)

diff --git a/src/components/markdown_editor/markdown_editor.tsx b/src/components/markdown_editor/markdown_editor.tsx
index 1234a80d933..99981936dbb 100644
--- a/src/components/markdown_editor/markdown_editor.tsx
+++ b/src/components/markdown_editor/markdown_editor.tsx
@@ -375,8 +375,6 @@ export const EuiMarkdownEditor = forwardRef<
           const extraHeight = borderWidth + marginWidth + 1;
 
           setCurrentHeight(previewRef.current!.scrollHeight + extraHeight);
-        } else {
-          setCurrentHeight(currentHeight);
         }
       }
     }, [currentHeight, isPreviewing, height, autoExpandPreview]);
diff --git a/src/components/markdown_editor/markdown_editor_text_area.tsx b/src/components/markdown_editor/markdown_editor_text_area.tsx
index c5866777bde..7a8b8fcf87a 100644
--- a/src/components/markdown_editor/markdown_editor_text_area.tsx
+++ b/src/components/markdown_editor/markdown_editor_text_area.tsx
@@ -30,22 +30,8 @@ export type EuiMarkdownEditorTextAreaProps = TextareaHTMLAttributes<
     compressed?: boolean;
     height: string;
     maxHeight: string;
-
-    /**
-     * Which direction, if at all, should the textarea resize
-     */
-    resize?: keyof typeof resizeToClassNameMap;
   };
 
-const resizeToClassNameMap = {
-  vertical: 'euiTextArea--resizeVertical',
-  horizontal: 'euiTextArea--resizeHorizontal',
-  both: 'euiTextArea--resizeBoth',
-  none: 'euiTextArea--resizeNone',
-};
-
-export const RESIZE = Object.keys(resizeToClassNameMap);
-
 export const EuiMarkdownEditorTextArea = forwardRef<
   HTMLTextAreaElement,
   EuiMarkdownEditorTextAreaProps

From fc492431e8b8a5fd6d61d139c4de5ee352f043dc Mon Sep 17 00:00:00 2001
From: Chandler Prall <chandler.prall@gmail.com>
Date: Tue, 5 Jan 2021 14:28:06 -0700
Subject: [PATCH 20/23] Respond to runtime changes in markdown footer height

---
 .../markdown_editor_drop_zone.tsx             | 21 ++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/components/markdown_editor/markdown_editor_drop_zone.tsx b/src/components/markdown_editor/markdown_editor_drop_zone.tsx
index af2bb710fe6..dd2c78f246d 100644
--- a/src/components/markdown_editor/markdown_editor_drop_zone.tsx
+++ b/src/components/markdown_editor/markdown_editor_drop_zone.tsx
@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import React, { FunctionComponent, useRef, useEffect } from 'react';
+import React, { FunctionComponent, useEffect } from 'react';
 import classNames from 'classnames';
 import { useDropzone } from 'react-dropzone';
 import { EuiMarkdownEditorFooter } from './markdown_editor_footer';
@@ -28,6 +28,7 @@ import {
   EuiMarkdownStringTagConfig,
   EuiMarkdownDragAndDropResult,
 } from './markdown_types';
+import { useResizeObserver } from '../observer/resize_observer';
 
 interface EuiMarkdownEditorDropZoneProps {
   uiPlugins: EuiMarkdownEditorUiPlugin[];
@@ -90,11 +91,21 @@ export const EuiMarkdownEditorDropZone: FunctionComponent<EuiMarkdownEditorDropZ
     'euiMarkdownEditorDropZone--isDraggingError': isDraggingError,
   });
 
-  const editorFooterRef = useRef<HTMLDivElement>(null);
+  const [
+    editorFooterRef,
+    setEditorFooterRef,
+  ] = React.useState<HTMLDivElement | null>(null);
+
+  const { height: editorFooterHeight } = useResizeObserver(
+    editorFooterRef,
+    'height'
+  );
 
   useEffect(() => {
-    isEditing && setEditorFooterHeight(editorFooterRef.current!.offsetHeight);
-  }, [setEditorFooterHeight, isEditing]);
+    if (editorFooterHeight !== 0) {
+      setEditorFooterHeight(editorFooterHeight);
+    }
+  }, [setEditorFooterHeight, isEditing, editorFooterHeight]);
 
   const { getRootProps, getInputProps, open } = useDropzone({
     disabled: dropHandlers.length === 0,
@@ -200,7 +211,7 @@ export const EuiMarkdownEditorDropZone: FunctionComponent<EuiMarkdownEditorDropZ
     <div {...getRootProps()} className={classes}>
       {children}
       <EuiMarkdownEditorFooter
-        ref={editorFooterRef}
+        ref={setEditorFooterRef}
         uiPlugins={uiPlugins}
         openFiles={() => {
           setHasUnacceptedItems(false);

From 77364787a1528f6d2736089f64313a14aa7de79b Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Thu, 7 Jan 2021 13:35:24 +0000
Subject: [PATCH 21/23] Adding variable euiMarkdownEditorMinHeight

---
 src/components/markdown_editor/_index.scss                     | 1 +
 src/components/markdown_editor/_markdown_editor_drop_zone.scss | 2 +-
 src/components/markdown_editor/_markdown_editor_preview.scss   | 2 +-
 src/components/markdown_editor/_markdown_editor_text_area.scss | 2 +-
 src/components/markdown_editor/_variables.scss                 | 1 +
 5 files changed, 5 insertions(+), 3 deletions(-)
 create mode 100644 src/components/markdown_editor/_variables.scss

diff --git a/src/components/markdown_editor/_index.scss b/src/components/markdown_editor/_index.scss
index dd5dfac5390..c0d8b9e6538 100644
--- a/src/components/markdown_editor/_index.scss
+++ b/src/components/markdown_editor/_index.scss
@@ -1,3 +1,4 @@
+@import 'variables';
 @import 'markdown_editor';
 @import 'markdown_editor_drop_zone';
 @import 'markdown_format';
diff --git a/src/components/markdown_editor/_markdown_editor_drop_zone.scss b/src/components/markdown_editor/_markdown_editor_drop_zone.scss
index 395303c4727..95d3d94399f 100644
--- a/src/components/markdown_editor/_markdown_editor_drop_zone.scss
+++ b/src/components/markdown_editor/_markdown_editor_drop_zone.scss
@@ -2,7 +2,7 @@
   display: flex;
   position: relative;
   flex-direction: column;
-  min-height: 150px;
+  min-height: $euiMarkdownEditorMinHeight;
 
   &__input {
     position: absolute;
diff --git a/src/components/markdown_editor/_markdown_editor_preview.scss b/src/components/markdown_editor/_markdown_editor_preview.scss
index 9896e3ab83d..32749abf0cb 100644
--- a/src/components/markdown_editor/_markdown_editor_preview.scss
+++ b/src/components/markdown_editor/_markdown_editor_preview.scss
@@ -1,7 +1,7 @@
 .euiMarkdownEditorPreview {
   @include euiScrollBar;
   background: $euiColorEmptyShade;
-  min-height: 150px;
+  min-height: $euiMarkdownEditorMinHeight;
   overflow-y: auto;
   border: $euiBorderThin;
   padding: $euiSizeM;
diff --git a/src/components/markdown_editor/_markdown_editor_text_area.scss b/src/components/markdown_editor/_markdown_editor_text_area.scss
index b71c98d3046..1af68c17d85 100644
--- a/src/components/markdown_editor/_markdown_editor_text_area.scss
+++ b/src/components/markdown_editor/_markdown_editor_text_area.scss
@@ -3,7 +3,7 @@
   @include euiScrollBar;
   width: 100%;
   height: 100%;
-  min-height: 150px;
+  min-height: $euiMarkdownEditorMinHeight;
   padding: $euiSizeM;
   border: $euiBorderThin;
   border-bottom: none;
diff --git a/src/components/markdown_editor/_variables.scss b/src/components/markdown_editor/_variables.scss
new file mode 100644
index 00000000000..a4a119cb56a
--- /dev/null
+++ b/src/components/markdown_editor/_variables.scss
@@ -0,0 +1 @@
+$euiMarkdownEditorMinHeight: '150px';
\ No newline at end of file

From dd7ca7b8be4448e2b4ed4ab365087164537e25de Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Thu, 7 Jan 2021 14:32:50 +0000
Subject: [PATCH 22/23] Improving snippets

---
 .../markdown_editor/mardown_editor_example.js | 28 +++++++++++++++++--
 1 file changed, 25 insertions(+), 3 deletions(-)

diff --git a/src-docs/src/views/markdown_editor/mardown_editor_example.js b/src-docs/src/views/markdown_editor/mardown_editor_example.js
index 33b53a47dba..0ddffb2bf86 100644
--- a/src-docs/src/views/markdown_editor/mardown_editor_example.js
+++ b/src-docs/src/views/markdown_editor/mardown_editor_example.js
@@ -34,12 +34,34 @@ const markdownEditorErrorsSnippet = `<EuiMarkdownEditor
 import MarkdownEditorHeight from './markdown_editor_height';
 const markdownEditorHeightSource = require('!!raw-loader!./markdown_editor_height');
 const markdownEditorHeightHtml = renderToHtml(MarkdownEditorHeight);
-const markdownEditorHeightSnippet = `<EuiMarkdownEditor
+const markdownEditorHeightSnippet = [
+  `// Custom height with auto-expanding preview
+<EuiMarkdownEditor
   value={value}
   onChange={setValue}
-  height={400}
+  height={200}
+/>`,
+  `// Height set to full
+<EuiMarkdownEditor
+  value={value}
+  onChange={setValue}
+  height="full"
+/>`,
+  `// Custom height with no auto-expanding preview
+<EuiMarkdownEditor
+  value={value}
+  onChange={setValue}
+  height={200}
+  autoExpandPreview={false}
+/>`,
+  `// Custom height and custom max height
+<EuiMarkdownEditor
+  value={value}
+  onChange={setValue}
+  height={200}
   maxHeight={600}
-/>`;
+/>`,
+];
 
 export const MarkdownEditorExample = {
   title: 'Markdown editor',

From 1e09b29c62ac389ca9df3fcaf5c4bdc8b329fc27 Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Thu, 7 Jan 2021 14:38:29 +0000
Subject: [PATCH 23/23] Snippet

---
 src-docs/src/views/markdown_editor/mardown_editor_example.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src-docs/src/views/markdown_editor/mardown_editor_example.js b/src-docs/src/views/markdown_editor/mardown_editor_example.js
index 0ddffb2bf86..e5a78549503 100644
--- a/src-docs/src/views/markdown_editor/mardown_editor_example.js
+++ b/src-docs/src/views/markdown_editor/mardown_editor_example.js
@@ -59,7 +59,7 @@ const markdownEditorHeightSnippet = [
   value={value}
   onChange={setValue}
   height={200}
-  maxHeight={600}
+  maxHeight={300}
 />`,
 ];