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

packages/eui/changelogs/8889.md

@@ -0,0 +1 @@
+- Added `hideFooter` and `toolbarProps.right` props to `EuiMarkdownEditor` for more flexible layout control. ([#8889](https://github.com/elastic/eui/pull/8889))

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

@@ -214,6 +214,7 @@ exports[`EuiMarkdownEditor is rendered 1`] = `
       />
       <div
         class="euiMarkdownEditorFooter emotion-euiMarkdownEditorFooter"
+        data-test-subj="euiMarkdownEditorFooter"
       >
         <div
           class="euiMarkdownEditorFooter__actions emotion-euiMarkdownEditorFooter__actions"
@@ -460,6 +461,7 @@ exports[`EuiMarkdownEditor props autoExpandPreview is rendered with false 1`] =
       />
       <div
         class="euiMarkdownEditorFooter emotion-euiMarkdownEditorFooter"
+        data-test-subj="euiMarkdownEditorFooter"
       >
         <div
           class="euiMarkdownEditorFooter__actions emotion-euiMarkdownEditorFooter__actions"
@@ -706,6 +708,7 @@ exports[`EuiMarkdownEditor props height is rendered in full mode 1`] = `
       />
       <div
         class="euiMarkdownEditorFooter emotion-euiMarkdownEditorFooter"
+        data-test-subj="euiMarkdownEditorFooter"
       >
         <div
           class="euiMarkdownEditorFooter__actions emotion-euiMarkdownEditorFooter__actions"
@@ -952,6 +955,7 @@ exports[`EuiMarkdownEditor props height is rendered with a custom size 1`] = `
       />
       <div
         class="euiMarkdownEditorFooter emotion-euiMarkdownEditorFooter"
+        data-test-subj="euiMarkdownEditorFooter"
       >
         <div
           class="euiMarkdownEditorFooter__actions emotion-euiMarkdownEditorFooter__actions"
@@ -1198,6 +1202,7 @@ exports[`EuiMarkdownEditor props maxHeight is rendered with a custom size 1`] =
       />
       <div
         class="euiMarkdownEditorFooter emotion-euiMarkdownEditorFooter"
+        data-test-subj="euiMarkdownEditorFooter"
       >
         <div
           class="euiMarkdownEditorFooter__actions emotion-euiMarkdownEditorFooter__actions"
@@ -1454,6 +1459,7 @@ exports[`EuiMarkdownEditor props readOnly is set to true 1`] = `
       />
       <div
         class="euiMarkdownEditorFooter emotion-euiMarkdownEditorFooter"
+        data-test-subj="euiMarkdownEditorFooter"
       >
         <div
           class="euiMarkdownEditorFooter__actions emotion-euiMarkdownEditorFooter__actions"

packages/eui/src/components/markdown_editor/index.ts

@@ -8,6 +8,7 @@
 
 export type { EuiMarkdownEditorProps } from './markdown_editor';
 export { EuiMarkdownEditor } from './markdown_editor';
+export { EuiMarkdownEditorHelpButton } from './markdown_editor_help_button';
 export {
   getDefaultEuiMarkdownParsingPlugins,
   getDefaultEuiMarkdownProcessingPlugins,

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

@@ -7,7 +7,7 @@
  */
 
 import React from 'react';
-import { fireEvent } from '@testing-library/react';
+import { cleanup, fireEvent } from '@testing-library/react';
 import { shouldRenderCustomStyles } from '../../test/internal';
 import { requiredProps } from '../../test/required_props';
 import { render, screen } from '../../test/rtl';
@@ -139,7 +139,7 @@ describe('EuiMarkdownEditor', () => {
   });
 
   test('modal with help syntax is rendered', () => {
-    const { baseElement, getByLabelText } = render(
+    const { baseElement } = render(
       <EuiMarkdownEditor
         editorId="editorId"
         value=""
@@ -149,7 +149,7 @@ describe('EuiMarkdownEditor', () => {
     );
     expect(baseElement.querySelector('.euiModal')).not.toBeInTheDocument();
 
-    fireEvent.click(getByLabelText('Show markdown help'));
+    fireEvent.click(screen.getByLabelText('Show markdown help'));
 
     expect(baseElement.querySelector('.euiModal')).toBeInTheDocument();
   });
@@ -158,7 +158,7 @@ describe('EuiMarkdownEditor', () => {
     const { parsingPlugins, processingPlugins, uiPlugins } =
       getDefaultEuiMarkdownPlugins({ exclude: ['tooltip'] });
 
-    const { baseElement, getByLabelText } = render(
+    const { baseElement } = render(
       <EuiMarkdownEditor
         editorId="editorId"
         value=""
@@ -169,7 +169,7 @@ describe('EuiMarkdownEditor', () => {
         {...requiredProps}
       />
     );
-    fireEvent.click(getByLabelText('Show markdown help'));
+    fireEvent.click(screen.getByLabelText('Show markdown help'));
 
     expect(baseElement.querySelector('.euiModal')).not.toBeInTheDocument();
     expect(baseElement.querySelector('.euiPopover')).toBeInTheDocument();
@@ -182,12 +182,13 @@ describe('EuiMarkdownEditor', () => {
       onChange: jest.fn(),
     };
 
-    const { getByTestSubject } = render(
-      <EuiMarkdownEditor {...testProps} {...requiredProps} />
-    );
+    render(<EuiMarkdownEditor {...testProps} {...requiredProps} />);
 
     const event = { target: { value: 'sometext' } };
-    fireEvent.change(getByTestSubject('euiMarkdownEditorTextArea'), event);
+    fireEvent.change(
+      screen.getByTestSubject('euiMarkdownEditorTextArea'),
+      event
+    );
 
     expect(testProps.onChange).toHaveBeenCalledTimes(1);
     expect(testProps.onChange).toHaveBeenLastCalledWith(event.target.value);
@@ -239,11 +240,9 @@ describe('EuiMarkdownEditor', () => {
         errors: testMessage,
       };
 
-      const { getByLabelText } = render(
-        <EuiMarkdownEditor {...testProps} {...requiredProps} />
-      );
+      render(<EuiMarkdownEditor {...testProps} {...requiredProps} />);
 
-      expect(getByLabelText('Show errors')).toBeInTheDocument();
+      expect(screen.getByLabelText('Show errors')).toBeInTheDocument();
     });
 
     test('does not render error if error messages are empty', () => {
@@ -254,11 +253,9 @@ describe('EuiMarkdownEditor', () => {
         errors: [],
       };
 
-      const { queryByTestSubject } = render(
-        <EuiMarkdownEditor {...testProps} {...requiredProps} />
-      );
+      render(<EuiMarkdownEditor {...testProps} {...requiredProps} />);
 
-      expect(queryByTestSubject('Show errors')).not.toBeInTheDocument();
+      expect(screen.queryByTestSubject('Show errors')).not.toBeInTheDocument();
     });
   });
 
@@ -286,11 +283,9 @@ describe('EuiMarkdownEditor', () => {
     document.execCommand = execCommandMock;
 
     beforeEach(() => {
-      const { getByTestSubject } = render(
-        <EuiMarkdownEditor {...testProps} {...requiredProps} />
-      );
+      render(<EuiMarkdownEditor {...testProps} {...requiredProps} />);
 
-      const textarea = getByTestSubject(
+      const textarea = screen.getByTestSubject(
         'euiMarkdownEditorTextArea'
       ) as HTMLTextAreaElement;
       textarea.setSelectionRange(0, 5);
@@ -380,4 +375,61 @@ describe('EuiMarkdownEditor', () => {
       );
     });
   });
+  describe('toolbar props', () => {
+    it('shows the custom toolbar component when passed', () => {
+      const CustomToolbarComponent = () => <div>Custom toolbar</div>;
+      render(
+        <EuiMarkdownEditor
+          onChange={() => null}
+          value="markdown test"
+          {...requiredProps}
+          toolbarProps={{ right: <CustomToolbarComponent /> }}
+        />
+      );
+      expect(screen.getByText('Custom toolbar')).toBeInTheDocument();
+      expect(
+        screen.queryByRole('button', { name: 'Preview' })
+      ).not.toBeInTheDocument();
+      cleanup();
+      render(
+        <EuiMarkdownEditor
+          onChange={() => null}
+          value="markdown test"
+          {...requiredProps}
+        />
+      );
+      expect(screen.queryByText('Custom toolbar')).not.toBeInTheDocument();
+      expect(
+        screen.getByRole('button', { name: 'Preview' })
+      ).toBeInTheDocument();
+      fireEvent.click(screen.getByRole('button', { name: 'Preview' }));
+      expect(
+        screen.getByRole('button', { name: 'Editor' })
+      ).toBeInTheDocument();
+    });
+  });
+  it('should show footer by default and hide when hideFooter is true', () => {
+    render(
+      <EuiMarkdownEditor
+        onChange={() => null}
+        value="markdown test"
+        {...requiredProps}
+      />
+    );
+    expect(
+      screen.getByTestSubject('euiMarkdownEditorFooter')
+    ).toBeInTheDocument();
+    cleanup();
+    render(
+      <EuiMarkdownEditor
+        onChange={() => null}
+        value="markdown test"
+        {...requiredProps}
+        hideFooter={true}
+      />
+    );
+    expect(
+      screen.queryByTestSubject('euiMarkdownEditorFooter')
+    ).not.toBeInTheDocument();
+  });
 });

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

@@ -16,6 +16,7 @@ import React, {
   useCallback,
   useRef,
   forwardRef,
+  ReactNode,
 } from 'react';
 
 import unified, { PluggableList, Processor } from 'unified';
@@ -137,6 +138,12 @@ type CommonMarkdownEditorProps = Omit<
       EuiMarkdownFormatProps,
       'parsingPluginList' | 'processingPluginList' | 'children'
     >;
+    toolbarProps?: {
+      /** Renders a custom node instead of the default preview/editor switch on the right side of the toolbar */
+      right?: ReactNode;
+    };
+    /** Controls whether the footer is shown */
+    hideFooter?: boolean;
   };
 
 export type EuiMarkdownEditorProps = OneOf<
@@ -213,6 +220,8 @@ export const EuiMarkdownEditor = forwardRef<
       markdownFormatProps,
       placeholder,
       readOnly,
+      toolbarProps,
+      hideFooter,
       ...rest
     },
     ref
@@ -433,6 +442,7 @@ export const EuiMarkdownEditor = forwardRef<
             }
             viewMode={viewMode}
             uiPlugins={toolbarPlugins}
+            toolbarProps={toolbarProps}
           />
 
           {isPreviewing && (
@@ -481,6 +491,7 @@ export const EuiMarkdownEditor = forwardRef<
                   selectionEnd: newSelectionPoint,
                 });
               }}
+              hideFooter={hideFooter}
               uiPlugins={toolbarPlugins}
               errors={errors}
               hasUnacceptedItems={hasUnacceptedItems}

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

@@ -38,6 +38,7 @@ interface EuiMarkdownEditorDropZoneProps extends PropsWithChildren {
   setHasUnacceptedItems: (hasUnacceptedItems: boolean) => void;
   setEditorFooterHeight: (height: number) => void;
   isEditing: boolean;
+  hideFooter?: boolean;
 }
 
 const getUnacceptedItems = (
@@ -84,6 +85,7 @@ export const EuiMarkdownEditorDropZone: FunctionComponent<
     setHasUnacceptedItems,
     setEditorFooterHeight,
     isEditing,
+    hideFooter,
   } = props;
 
   const classes = classNames('euiMarkdownEditorDropZone');
@@ -217,18 +219,21 @@ export const EuiMarkdownEditorDropZone: FunctionComponent<
   return (
     <div {...rootProps} css={cssStyles} className={classes}>
       {children}
-      <EuiMarkdownEditorFooter
-        ref={setEditorFooterRef}
-        uiPlugins={uiPlugins}
-        openFiles={() => {
-          setHasUnacceptedItems(false);
-          open();
-        }}
-        isUploadingFiles={isUploadingFiles}
-        hasUnacceptedItems={hasUnacceptedItems}
-        dropHandlers={dropHandlers}
-        errors={errors}
-      />
+      {!hideFooter && (
+        <EuiMarkdownEditorFooter
+          ref={setEditorFooterRef}
+          uiPlugins={uiPlugins}
+          openFiles={() => {
+            setHasUnacceptedItems(false);
+            open();
+          }}
+          isUploadingFiles={isUploadingFiles}
+          hasUnacceptedItems={hasUnacceptedItems}
+          dropHandlers={dropHandlers}
+          errors={errors}
+        />
+      )}
+
       <input {...getInputProps()} />
     </div>
   );

packages/eui/src/components/markdown_editor/markdown_editor_footer.styles.ts

@@ -35,12 +35,6 @@ export const euiMarkdownEditorFooterStyles = (euiThemeContext: UseEuiTheme) => {
     euiMarkdownEditorFooter__uploadError: css`
       border-radius: ${borderRadius};
     `,
-    // Override the default button icon width size
-    euiMarkdownEditorFooter__helpButton: css`
-      .euiIcon {
-        ${logicalCSS('width', '26px')}
-      }
-    `,
     euiMarkdownEditorFooter__popover: css`
       ${logicalCSS('width', '300px')}
     `,