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

[mbondyra]

Summary

Resolves #8865

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

• footerProps.visibility — allows consumers to 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)

[mgadewoll]

Since this is a standalone component now and the variants use the same component, we could simplify this to use a single EuiButtonEmpty with conditional props. Something like this:

return (
    <EuiButtonEmpty
      data-test-subj={
        isPreviewing
          ? "markdown_editor_edit_button"
          : "markdown_editor_preview_button"
      }
      iconType={isPreviewing ? "code" : "eye"}
      color="text"
      size="s"
      onClick={onClickPreview}
      isDisabled={readOnly}
    >
      {isPreviewing ? (
        <EuiI18n token="euiMarkdownEditorToolbar.editor" default="Editor" />
      ) : (
        <EuiI18n
          token="euiMarkdownEditorToolbar.previewMarkdown"
          default="Preview"
        />
      )}
    </EuiButtonEmpty>
  );

[mgadewoll]

We're missing the data-test-subj now after the update. Let's revert it, because if that attribute was used anywhere it might break tests.

[mbondyra]

@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.

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: a42e88d
• Documentation website
• Storybook

History

• 💚 Build #854 succeeded 008152e
• 💚 Build #847 succeeded 34e8bb5
• 💚 Build #844 succeeded bfe931c
• 💚 Build #842 succeeded 38db8ec
• 💚 Build #841 succeeded f6a383c
• 💚 Build #835 succeeded b50e21c

cc @mbondyra

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: a42e88d

History

• 💚 Build #4432 succeeded 34e8bb5
• 💔 Build #4429 failed bfe931c
• 💚 Build #4423 succeeded b50e21c

cc @mbondyra