Skip to content

fix(EuiMarkdownEditor): update types to allow UI plugins to not have a button#9634

Merged
tkajtoch merged 2 commits intoelastic:mainfrom
tkajtoch:fix/markdown-editor-uiplugins-type
May 5, 2026
Merged

fix(EuiMarkdownEditor): update types to allow UI plugins to not have a button#9634
tkajtoch merged 2 commits intoelastic:mainfrom
tkajtoch:fix/markdown-editor-uiplugins-type

Conversation

@tkajtoch
Copy link
Copy Markdown
Member

@tkajtoch tkajtoch commented May 4, 2026

Summary

Resolves #9557

This PR updates the EuiMarkdownEditorUiPlugin type to make the button property optional per our documentation, and applies necessary adjustments to the internal EuiMarkdownEditorToolbar.

API Changes

component / parent prop / child change description
EuiMarkdownEditor uiPlugins[].button button is now optional The button property is now correctly marked as optional in the type definition. When unset, the button won't be rendered in the toolbar, allowing for formatting-only plugins.

Screenshots

N/A

Impact Assessment

Note: Most PRs should be tested in Kibana to help gauge their Impact before merging.

  • 🔴 Breaking changes — What will break? How many usages in Kibana/Cloud UI are impacted?
  • 💅 Visual changes — May impact style overrides; could require visual testing. Explain and estimate impact.
  • 🧪 Test impact — May break functional or snapshot tests (e.g., HTML structure, class names, default values).
  • 🔧 Hard to integrate — If changes require substantial updates to Kibana, please stage the changes and link them here.

Impact level: 🟢 None, because the type becomes less strict.

Release Readiness

  • Documentation: {link to docs page(s)}
  • Figma: {link to Figma or issue}
  • Migration guide: {steps or link, for breaking/visual changes or deprecations}
  • Adoption plan (new features): {link to issue/doc or outline who will integrate this and where}

QA instructions for reviewer

  • Type correctness
    • Checkout this PR, install dependencies and confirm that the EuiMarkdownEditorUiPlugin type allows for skipping the button property.
  • UI correctness
    • Go to https://eui.elastic.co/pr_9634/docs/components/editors-and-syntax/markdown/editor/#base-editor
    • Update the interactive example to the following:
      import React, { useCallback, useState } from 'react';
      import { EuiMarkdownEditor, getDefaultEuiMarkdownPlugins } from '@elastic/eui';
      
      const { uiPlugins } = getDefaultEuiMarkdownPlugins();
      uiPlugins.push({
       name: 'PR test',
       formatting: { prefix: '!{blah[', suffix: ']()}' },
       helpText: 'Thanks for testing my PR!'
      })
      
      export default () => {
       const [value, setValue] = useState('## Hello, World!');
       const [messages, setMessages] = useState([]);
       const onParse = useCallback((err, { messages, ast }) => {
         setMessages(err ? [err] : messages);
       }, []);
      
       const [isReadOnly, setIsReadOnly] = useState(false);
      
       const onChange = (e) => {
         setIsReadOnly(e.target.checked);
       };
      
       return (
         <EuiMarkdownEditor
           aria-label="EUI markdown editor demo"
           placeholder="Your markdown here..."
           value={value}
           onChange={setValue}
           height={400}
           onParse={onParse}
           errors={messages}
           readOnly={isReadOnly}
           initialViewMode="viewing"
           uiPlugins={uiPlugins}
         />
       );
      };
    • Confirm that the toolbar doesn't render any extra icons when compared with the default example and that TypeError: Cannot read properties of undefined (reading 'label') is not thrown (it is on main)

Checklist before marking Ready for Review

Reviewer checklist

  • Approved Impact Assessment — Acceptable to merge given the consumer impact.
  • Approved Release Readiness — Docs, Figma, and migration info are sufficient to ship.

@tkajtoch tkajtoch self-assigned this May 4, 2026
@elasticmachine
Copy link
Copy Markdown
Collaborator

💚 Build Succeeded

cc @tkajtoch

@tkajtoch tkajtoch marked this pull request as ready for review May 4, 2026 21:56
@tkajtoch tkajtoch requested a review from a team as a code owner May 4, 2026 21:56
@elasticmachine
Copy link
Copy Markdown
Collaborator

💚 Build Succeeded

cc @tkajtoch

@mgadewoll mgadewoll self-requested a review May 5, 2026 08:49
Copy link
Copy Markdown
Contributor

@mgadewoll mgadewoll left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🟢 Changes are LGTM. Tested the update locally - the type for button works correctly and the button can be rendered optionally as expected.

@tkajtoch tkajtoch merged commit 939d45e into elastic:main May 5, 2026
6 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[EuiMarkdownEditorUiPlugin] Type def does not support omitting the button, even though this is supported and documented

3 participants