[EuiMarkdownEditor] Better support to extend to full height

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)
 

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,43 @@ 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. 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 prop only works when the{' '}
+            <EuiCode>height</EuiCode> is not set to{' '}
+            <EuiCode>&quot;full&quot;</EuiCode>.
+          </p>
+        </>
+      ),
+      props: {
+        EuiMarkdownEditor,
+      },
+      demo: <MarkdownEditorHeight />,
+    },
   ],
 };

src-docs/src/views/markdown_editor/markdown_editor_height.js

@@ -0,0 +1,112 @@
+import React, { useState } from 'react';
+
+import {
+  EuiMarkdownEditor,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiSpacer,
+} from '../../../../src/components';
+
+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 😍
+
+`;
+
+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\`
+`;
+
+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\` 
+
+### 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">
+      <EuiFlexGroup>
+        <EuiFlexItem>
+          <EuiMarkdownEditor
+            aria-label="EUI markdown editor demo"
+            initialViewMode="viewing"
+            value={value1}
+            onChange={setValue1}
+            height={200}
+          />
+        </EuiFlexItem>
+        <EuiFlexItem style={{ height: '600px' }}>
+          <EuiMarkdownEditor
+            aria-label="EUI markdown editor demo"
+            initialViewMode="viewing"
+            value={value2}
+            onChange={setValue2}
+            height="full"
+          />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+
+      <EuiSpacer />
+
+      <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>
+  );
+};