From d32b06bb58f9691a818aa8eafe2a3279c8b78792 Mon Sep 17 00:00:00 2001 From: miukimiu Date: Tue, 7 Sep 2021 19:18:11 +0100 Subject: [PATCH 1/4] Added placeholder prop --- .../src/views/markdown_editor/markdown_editor.js | 1 + .../views/markdown_editor/markdown_editor_errors.js | 1 + .../markdown_editor/markdown_editor_with_plugins.js | 1 + .../__snapshots__/markdown_editor.test.tsx.snap | 1 + .../markdown_editor/markdown_editor.test.tsx | 1 + src/components/markdown_editor/markdown_editor.tsx | 12 +++++++++++- 6 files changed, 16 insertions(+), 1 deletion(-) diff --git a/src-docs/src/views/markdown_editor/markdown_editor.js b/src-docs/src/views/markdown_editor/markdown_editor.js index 3729946895d..4c5b4157239 100644 --- a/src-docs/src/views/markdown_editor/markdown_editor.js +++ b/src-docs/src/views/markdown_editor/markdown_editor.js @@ -50,6 +50,7 @@ export default () => { <> { { <> diff --git a/src/components/markdown_editor/markdown_editor.test.tsx b/src/components/markdown_editor/markdown_editor.test.tsx index 1cc8a0065a7..c44ff333db0 100644 --- a/src/components/markdown_editor/markdown_editor.test.tsx +++ b/src/components/markdown_editor/markdown_editor.test.tsx @@ -18,6 +18,7 @@ describe('EuiMarkdownEditor', () => { const component = render( null} {...requiredProps} diff --git a/src/components/markdown_editor/markdown_editor.tsx b/src/components/markdown_editor/markdown_editor.tsx index 7a064cf01cb..5ee1c845eca 100644 --- a/src/components/markdown_editor/markdown_editor.tsx +++ b/src/components/markdown_editor/markdown_editor.tsx @@ -25,7 +25,10 @@ import classNames from 'classnames'; import { CommonProps, OneOf } from '../common'; import MarkdownActions, { insertText } from './markdown_actions'; import { EuiMarkdownEditorToolbar } from './markdown_editor_toolbar'; -import { EuiMarkdownEditorTextArea } from './markdown_editor_text_area'; +import { + EuiMarkdownEditorTextArea, + EuiMarkdownEditorTextAreaProps, +} from './markdown_editor_text_area'; import { EuiMarkdownFormat, EuiMarkdownFormatProps } from './markdown_format'; import { EuiMarkdownEditorDropZone } from './markdown_editor_drop_zone'; import { htmlIdGenerator } from '../../services/'; @@ -119,6 +122,11 @@ type CommonMarkdownEditorProps = Omit< /** array defining any drag&drop handlers */ dropHandlers?: EuiMarkdownDropHandler[]; + /** + * Sets the placeholder of the textarea + */ + placeholder?: EuiMarkdownEditorTextAreaProps['placeholder']; + /** * Further extend the props applied to EuiMarkdownFormat */ @@ -200,6 +208,7 @@ export const EuiMarkdownEditor = forwardRef< initialViewMode = MODE_EDITING, dropHandlers = [], markdownFormatProps, + placeholder, ...rest }, ref @@ -473,6 +482,7 @@ export const EuiMarkdownEditor = forwardRef< onChange={(e) => onChange(e.target.value)} value={value} onFocus={() => setHasUnacceptedItems(false)} + placeholder={placeholder} {...{ 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, From d3b0dcf4d15f5b39fb3fde600850609a1c1ee6ab Mon Sep 17 00:00:00 2001 From: miukimiu Date: Tue, 7 Sep 2021 19:47:35 +0100 Subject: [PATCH 2/4] Added CL --- CHANGELOG.md | 2 +- .../markdown_editor/__snapshots__/markdown_editor.test.tsx.snap | 2 +- src/components/markdown_editor/markdown_editor.test.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index f8411022ecc..719c0496730 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,6 @@ ## [`master`](https://github.com/elastic/eui/tree/master) -No public interface changes since `37.6.1`. +- Added `placeholder` prop to `EuiMarkdownEditor` ([#5151](https://github.com/elastic/eui/pull/5151)) ## [`37.6.1`](https://github.com/elastic/eui/tree/v37.6.1) 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 a15cfbdd852..bfc613bfa98 100644 --- a/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap +++ b/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap @@ -196,7 +196,7 @@ exports[`EuiMarkdownEditor is rendered 1`] = ` aria-label="aria-label" class="euiMarkdownEditorTextArea" id="editorId" - placeholder="Placeholder" + placeholder="placeholder" rows="6" style="height:calc(250px);max-height:500px" /> diff --git a/src/components/markdown_editor/markdown_editor.test.tsx b/src/components/markdown_editor/markdown_editor.test.tsx index c44ff333db0..55cd1ace52f 100644 --- a/src/components/markdown_editor/markdown_editor.test.tsx +++ b/src/components/markdown_editor/markdown_editor.test.tsx @@ -18,7 +18,7 @@ describe('EuiMarkdownEditor', () => { const component = render( null} {...requiredProps} From d95ca7ab664da2791d64b21c78307fb46b3641de Mon Sep 17 00:00:00 2001 From: miukimiu Date: Tue, 7 Sep 2021 21:40:14 +0100 Subject: [PATCH 3/4] Omit 'placeholder' --- 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 5ee1c845eca..0ff29d3993c 100644 --- a/src/components/markdown_editor/markdown_editor.tsx +++ b/src/components/markdown_editor/markdown_editor.tsx @@ -55,7 +55,7 @@ import { EuiResizeObserver } from '../observer/resize_observer'; type CommonMarkdownEditorProps = Omit< HTMLAttributes, - 'onChange' + 'onChange' | 'placeholder' > & CommonProps & { /** aria-label OR aria-labelledby must be set */ From 24bbfe4b2999d35f562704b32c1e4bcf957a76f4 Mon Sep 17 00:00:00 2001 From: miukimiu Date: Wed, 8 Sep 2021 12:45:10 +0100 Subject: [PATCH 4/4] placeholders for height demos --- .../views/markdown_editor/markdown_editor_height.js | 11 +++++++---- 1 file changed, 7 insertions(+), 4 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 dcc15857e28..a7fc1852d9b 100644 --- a/src-docs/src/views/markdown_editor/markdown_editor_height.js +++ b/src-docs/src/views/markdown_editor/markdown_editor_height.js @@ -66,7 +66,8 @@ export default () => { { { {