[EuiMarkdownEditor] Add footer visibility toggle and toolbar right slot to MarkdownEditor by mbondyra · Pull Request #8889 · elastic/eui

mbondyra · 2025-07-21T21:21:01Z

Summary

Resolves #8865

Adds two new props to EuiMarkdownEditor to support the Dashboard Markdown visualization use case:

showFooter — allows consumers to show/hide the editor footer entirely.
toolbarProps.right — allows replacing the default preview/editor switch with a custom node on the right side of the toolbar.

These changes make it easier to control the editor layout in custom contexts while keeping the default behavior intact.

Exposes EuiMarkdownHelpButton - in Kibana, we want to display it on the right top corner.

Checklist

Backwards compatible
Defaults remain unchanged
Tests added
Storybook updated

Screenshots

Impact to users

Defaults remain unchanged

QA

Remove or strikethrough items that do not apply to your PR.

General checklist

Browser QA
- Checked in both light and dark modes
- Checked in both MacOS and Windows high contrast modes
  - (emulate forced colors if you do not have access to a Windows machine.)
- Checked in mobile
- Checked in Chrome, Safari, Edge, and Firefox
- Checked for accessibility including keyboard-only and screenreader modes
Docs site QA
- Added documentation
- Props have proper autodocs (using @default if default values are missing) and playground toggles
- Checked Code Sandbox works for any docs examples
Code quality checklist
- Added or updated jest and cypress tests
- Updated visual regression tests
Release checklist
- A changelog entry exists and is marked appropriately.
- If applicable, added the breaking change issue label (and filled out the breaking change checklist)
Designer checklist
- If applicable, file an issue to update EUI's Figma library with any corresponding UI changes. (This is an internal repo, if you are external to Elastic, ask a maintainer to submit this request)

packages/eui/src/components/markdown_editor/markdown_editor.test.tsx

packages/eui/src/components/markdown_editor/markdown_editor.tsx

packages/eui/src/components/markdown_editor/markdown_editor_toolbar.tsx

packages/eui/src/components/markdown_editor/markdown_editor.tsx

packages/eui/changelogs/8889.md

packages/eui/src/components/markdown_editor/markdown_editor.tsx

packages/eui/changelogs/8889.md

…toolbar_props

mbondyra · 2025-07-22T11:54:22Z

@mgadewoll Thanks for a lightspeed review! I think I've addressed all your comments and added the storybook and website example as discussed offline. Not sure about the i18ntokens.json file changes - let me know if that's something I should revert, it was caused by the commit prehooks.

packages/website/docs/components/editors-and-syntax/markdown/editor.mdx

packages/eui/src/components/markdown_editor/markdown_editor.stories.tsx

…toolbar_props

packages/eui/src/components/markdown_editor/markdown_editor.tsx

mgadewoll

🟢 Code changes are looking good to me. The component props updates work as intended. Nice work! Thank you for contributing! 🎉

elasticmachine · 2025-07-23T21:42:08Z

💚 Build Succeeded

History

💚 Build #859 succeeded efdf408
💚 Build #855 succeeded a42e88d
💚 Build #854 succeeded 008152e
💚 Build #847 succeeded 34e8bb5
💚 Build #844 succeeded bfe931c
💚 Build #842 succeeded 38db8ec

cc @mbondyra

elasticmachine · 2025-07-23T21:52:21Z

💚 Build Succeeded

Buildkite Build
Commit: e9f97b3

History

💚 Build #4441 succeeded efdf408
💚 Build #4438 succeeded a42e88d
💚 Build #4432 succeeded 34e8bb5
💔 Build #4429 failed bfe931c
💚 Build #4423 succeeded b50e21c

cc @mbondyra

mbondyra · 2025-07-24T06:55:48Z

Thank you @mgadewoll! Looks like I have no permission to merge this PR. Could you hit the button? 🙏🏼

`106.1.0` ⏩ `106.2.0` [Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams) ## Package updates ### `@elastic/eui` #### [`v106.2.0`](https://github.com/elastic/eui/releases/v106.2.0) - Enhanced `EuiCheckableCard` to make non-interactive children clickable for card selection ([#8907](elastic/eui#8907)) - Added `showFooter` and `toolbarProps.right` props to `EuiMarkdownEditor` for more flexible layout control. ([#8889](elastic/eui#8889)) ([#8889](elastic/eui#8889)) **Bug fixes** - Fixed `EuiPopover` not closing on outside click after multiple fast clicks on the trigger element ([#8882](elastic/eui#8882)) **Accessibility** - Added accessible labels to virtualized `EuiCodeBlock` ([#8887](elastic/eui#8887)) --------- Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com> Co-authored-by: Marta Bondyra <4283304+mbondyra@users.noreply.github.com>

`106.1.0` ⏩ `106.2.0` [Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams) ## Package updates ### `@elastic/eui` #### [`v106.2.0`](https://github.com/elastic/eui/releases/v106.2.0) - Enhanced `EuiCheckableCard` to make non-interactive children clickable for card selection ([elastic#8907](elastic/eui#8907)) - Added `showFooter` and `toolbarProps.right` props to `EuiMarkdownEditor` for more flexible layout control. ([elastic#8889](elastic/eui#8889)) ([elastic#8889](elastic/eui#8889)) **Bug fixes** - Fixed `EuiPopover` not closing on outside click after multiple fast clicks on the trigger element ([elastic#8882](elastic/eui#8882)) **Accessibility** - Added accessible labels to virtualized `EuiCodeBlock` ([elastic#8887](elastic/eui#8887)) --------- Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com> Co-authored-by: Marta Bondyra <4283304+mbondyra@users.noreply.github.com>

mbondyra requested a review from a team as a code owner July 21, 2025 21:21

mbondyra force-pushed the support_toolbar_props branch from 9697307 to c6d3221 Compare July 21, 2025 21:26

add footer visibility prop and toolbarProps

b50e21c

mbondyra force-pushed the support_toolbar_props branch from c6d3221 to b50e21c Compare July 21, 2025 21:36

move to hideFooter

f6a383c

mgadewoll reviewed Jul 22, 2025

View reviewed changes

packages/eui/src/components/markdown_editor/markdown_editor.tsx Outdated Show resolved Hide resolved

mgadewoll reviewed Jul 22, 2025

View reviewed changes

packages/eui/changelogs/8889.md Show resolved Hide resolved

mbondyra added 5 commits July 22, 2025 11:58

showFooter it is

38db8ec

code in the dark - website

8d56937

storybook

bfe931c

small fixes

5524e37

Merge commit 'fc793441a8a5722beb2bb67f043620813be02506' into support_…

41f1bfa

…toolbar_props

revert i18ntokens

34e8bb5

weronikaolejniczak assigned mbondyra Jul 22, 2025

weronikaolejniczak linked an issue Jul 22, 2025 that may be closed by this pull request

[EuiMarkdownEditor] — Allow external control of viewMode for Markdown editor and allow not displaying editor/preview button #8865

Closed

mgadewoll reviewed Jul 22, 2025

View reviewed changes

packages/website/docs/components/editors-and-syntax/markdown/editor.mdx Outdated Show resolved Hide resolved

mgadewoll reviewed Jul 23, 2025

View reviewed changes

packages/eui/src/components/markdown_editor/markdown_editor.stories.tsx Show resolved Hide resolved

mbondyra and others added 5 commits July 23, 2025 10:56

revert changes for website

ce168cf

editor

008152e

test(vrt): add reference images

a42e88d

reverting data-test-subj removal and exposing editorRef

5d96334

Merge commit 'a42e88d338206edf89425ad0ee8fdbcffb94f303' into support_…

efdf408

…toolbar_props

mbondyra commented Jul 23, 2025

View reviewed changes

packages/eui/src/components/markdown_editor/markdown_editor.tsx Show resolved Hide resolved

mgadewoll approved these changes Jul 23, 2025

View reviewed changes

Merge branch 'main' into support_toolbar_props

e9f97b3

mgadewoll merged commit ad11d0d into elastic:main Jul 24, 2025
5 checks passed

tkajtoch mentioned this pull request Jul 28, 2025

Upgrade EUI to v106.2.0 elastic/kibana#229725

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[EuiMarkdownEditor] Add footer visibility toggle and toolbar right slot to MarkdownEditor#8889

[EuiMarkdownEditor] Add footer visibility toggle and toolbar right slot to MarkdownEditor#8889
mgadewoll merged 14 commits intoelastic:mainfrom
mbondyra:support_toolbar_props

mbondyra commented Jul 21, 2025 •

edited by mgadewoll

Loading

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

mbondyra commented Jul 22, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

mgadewoll left a comment

Uh oh!

elasticmachine commented Jul 23, 2025

Uh oh!

elasticmachine commented Jul 23, 2025

Uh oh!

mbondyra commented Jul 24, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

mbondyra commented Jul 21, 2025 • edited by mgadewoll Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Checklist

Screenshots

Impact to users

QA

General checklist

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

mbondyra commented Jul 22, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

mgadewoll left a comment

Choose a reason for hiding this comment

Uh oh!

elasticmachine commented Jul 23, 2025

💚 Build Succeeded

History

Uh oh!

elasticmachine commented Jul 23, 2025

💚 Build Succeeded

History

Uh oh!

mbondyra commented Jul 24, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

mbondyra commented Jul 21, 2025 •

edited by mgadewoll

Loading