From b0395e5fb24b9719c35c111a2fee4cf2cacb9c97 Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Thu, 7 Jan 2021 15:55:06 +0000 Subject: [PATCH] [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 <549577+cchaos@users.noreply.github.com> * 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 * Removing unnecessary code * Respond to runtime changes in markdown footer height * Adding variable euiMarkdownEditorMinHeight * Improving snippets * Snippet Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> Co-authored-by: Chandler Prall --- CHANGELOG.md | 2 +- .../markdown_editor/mardown_editor_example.js | 83 ++ .../markdown_editor/markdown_editor_height.js | 111 +++ .../markdown_editor.test.tsx.snap | 881 +++++++++++++++++- src/components/markdown_editor/_index.scss | 2 + .../markdown_editor/_markdown_editor.scss | 21 + .../_markdown_editor_drop_zone.scss | 3 +- .../_markdown_editor_preview.scss | 3 +- .../_markdown_editor_text_area.scss | 2 +- .../markdown_editor/_variables.scss | 1 + .../markdown_editor/markdown_editor.test.tsx | 64 ++ .../markdown_editor/markdown_editor.tsx | 159 +++- .../markdown_editor_drop_zone.tsx | 24 +- .../markdown_editor_footer.tsx | 15 +- .../markdown_editor_text_area.tsx | 25 +- .../markdown_editor_toolbar.tsx | 205 ++-- 16 files changed, 1447 insertions(+), 154 deletions(-) create mode 100644 src-docs/src/views/markdown_editor/markdown_editor_height.js create mode 100644 src/components/markdown_editor/_markdown_editor.scss create mode 100644 src/components/markdown_editor/_variables.scss diff --git a/CHANGELOG.md b/CHANGELOG.md index 84ee5fd6d38..394ea12f22a 100644 --- 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 index 98b8cd40e47..e5a78549503 100644 --- 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 = ``; import MarkdownEditorErrors from './markdown_editor_errors'; const markdownEditorErrorsSource = require('!!raw-loader!./markdown_editor_errors'); const markdownEditorErrorsHtml = renderToHtml(MarkdownEditorErrors); +const markdownEditorErrorsSnippet = ``; + +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 +`, + `// Height set to full +`, + `// Custom height with no auto-expanding preview +`, + `// Custom height and custom max height +`, +]; export const MarkdownEditorExample = { title: 'Markdown editor', @@ -66,6 +108,7 @@ export const MarkdownEditorExample = { props: { EuiMarkdownEditor, }, + snippet: markdownEditorSnippet, demo: , }, { @@ -93,7 +136,47 @@ export const MarkdownEditorExample = { props: { EuiMarkdownEditor, }, + snippet: markdownEditorErrorsSnippet, demo: , }, + { + source: [ + { + type: GuideSectionTypes.JS, + code: markdownEditorHeightSource, + }, + { + type: GuideSectionTypes.HTML, + code: markdownEditorHeightHtml, + }, + ], + title: 'Controlling the height', + text: ( + <> +

+ The height prop allows you to control the height + of the EuiMarkdownEditor. You can set the{' '} + height in pixels or pass{' '} + "full" to allow the{' '} + EuiMarkdownEditor to fill the height of its + container. By default, the autoExpandPreview prop + is set to true. This means that the preview{' '} + height is automatically adjusted to fit all the + content and avoid a scrollbar. +

+

+ You can also control the maxHeight of the{' '} + editor/preview area. This prop only works when the{' '} + height is not set to{' '} + "full". +

+ + ), + props: { + EuiMarkdownEditor, + }, + snippet: markdownEditorHeightSnippet, + demo: , + }, ], }; 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..bc1eb43bc74 --- /dev/null +++ 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 ( +
+ + + + + + + + + + + + + + + + + + + +
+ ); +}; 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..253487a8172 100644 --- a/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap +++ b/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap @@ -176,7 +176,8 @@ exports[`EuiMarkdownEditor is rendered 1`] = `
+
+
+ +
+ +
+
+
+`; + +exports[`EuiMarkdownEditor props autoExpandPreview is rendered with false 1`] = ` +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+
+
+