[EuiMarkdownEditor] Better support to extend to full height (#4245)

* Better support extend the md editor to full height * Adding previewClassName * Adding tests for previewClassName * CL number * Update src/components/markdown_editor/markdown_editor.tsx Co-authored-by: Caroline Horn <[email protected]> * Adding height prop full and resizing preview area based on textarea size. * Adding EuiResizeObserver. * Typo * Adding missing file from merge * Adding autoExpandPreview * Small fix * CL * Calculating toolbar and footer heights from their refs * Removed unused Sass file * Types * Small fixes * Account fully for markdown preview's border and margin when resizing to fit content * Update src/components/markdown_editor/markdown_editor.tsx Co-authored-by: Chandler Prall <[email protected]> * Removing unnecessary code * Respond to runtime changes in markdown footer height * Adding variable euiMarkdownEditorMinHeight * Improving snippets * Snippet Co-authored-by: Caroline Horn <[email protected]> Co-authored-by: Chandler Prall <[email protected]>
elastic · Jan 7, 2021 · b0395e5 · b0395e5
1 parent 3fa9c89
commit b0395e5
Show file tree

Hide file tree

Showing 16 changed files with 1,447 additions and 154 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `31.1.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))
 
 ## [`31.1.0`](https://github.com/elastic/eui/tree/v31.1.0)
 

diff --git a/src-docs/src/views/markdown_editor/mardown_editor_example.js b/src-docs/src/views/markdown_editor/mardown_editor_example.js
@@ -16,10 +16,52 @@ 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 = [
+  `// Custom height with auto-expanding preview
+<EuiMarkdownEditor
+  value={value}
+  onChange={setValue}
+  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={300}
+/>`,
+];
 
 export const MarkdownEditorExample = {
   title: 'Markdown editor',
@@ -66,6 +108,7 @@ export const MarkdownEditorExample = {
       props: {
         EuiMarkdownEditor,
       },
+      snippet: markdownEditorSnippet,
       demo: <MarkdownEditor />,
     },
     {
@@ -93,7 +136,47 @@ export const MarkdownEditorExample = {
       props: {
         EuiMarkdownEditor,
       },
+      snippet: markdownEditorErrorsSnippet,
       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,
+      },
+      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
@@ -0,0 +1,111 @@
+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}
+          />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </div>
+  );
+};