Markdown editor

EuiMarkdownEditor provides a markdown authoring experience for the user. The component consists of a toolbar, text area, and a drag-and-drop zone to accept files (if configured to do so). There are two modes: a textarea that keeps track of cursor position, and a rendered preview mode that is powered by EuiMarkdownFormat. State is maintained between the two and it is possible to pass changes from the preview area to the textarea and vice versa.

Base editor

Use the base editor to produce technical content in markdown which can contain text, code, and images. Besides this default markdown content, the base editor comes with built-in plugins that let you add emojis, to-do lists, and tooltips.

Consider applying the readOnly prop to restrict editing during asynchronous submit events, like when submitting a comment. This will ensure users understand that the content cannot be changed while the comment is being submitted.

Unregistering plugins

The EuiMarkdownEditor comes with several default plugins, demo'd below. If these defaults are unnecessary for your use-case or context, you can unregister these plugins by excluding them from the parsingPlugins, processingPlugins and uiPlugins options with a single exclude parameter passed to getDefaultEuiMarkdownPlugins(). This will ensure the syntax won't be identified or rendered, and no additional UI (like toolbar buttons or help syntax) will be displayed by the unregistered plugins.

Error handling and feedback

The errors prop allows you to pass an array of errors if syntax is malformed. The below example starts with an incomplete tooltip tag, showing this error message by default. These errors are meant to be ephemeral and part of the editing experience. They should not be a substitute for form validation.

Controlling the height

The height prop allows you to control the height of the EuiMarkdownEditor. You can set the height in pixels or pass "full" to allow the EuiMarkdownEditor to fill the height of its container. By default, the autoExpandPreview prop is set to true. This means that the preview height is automatically adjusted to fit all the content and avoid a scrollbar.

You can also control the maxHeight of the editor/preview area. This prop only works when the height is not set to "full".

Props

EuiMarkdownEditor

Extends HTMLAttributes


Prop	Description and type	Default value
Prop value#	Description and type A markdown content Type: `string`	Default value Required
Prop onChange#	Description and type callback function when markdown content is modified Type: `(value: string) => void`	Default value Required
Prop className#	Description and type Type: `string`	Default value
Prop css#	Description and type Type: `Interpolation<Theme>`	Default value
Prop height#	Description and type Sets the `height` in pixels of the editor/preview area or pass `full` to allow the EuiMarkdownEditor to fill the height of its container. When in `full` mode the vertical resize is not allowed. Type: `number \| "full"`	Default value `250`
Prop data-test-subj#	Description and type Type: `string`	Default value
Prop placeholder#	Description and type Sets the placeholder of the textarea Type: `string`	Default value
Prop readOnly#	Description and type Sets the current display mode to a read-only state. All editing gets resctricted. Type: `boolean`	Default value
Prop editorId#	Description and type a unique ID to attach to the textarea. If one isn't provided, a random one will be generated Type: `string`	Default value
Prop maxHeight#	Description and type Sets the `max-height` in pixels of the editor/preview area. It has no effect when the `height` is set to `full`. Type: `number`	Default value `500`
Prop autoExpandPreview#	Description and type Automatically adjusts the preview height to fit all the content and avoid a scrollbar. Type: `boolean`	Default value `true`
Prop parsingPluginList#	Description and type plugins to identify new syntax and parse it into an AST node Type: `PluggableList`	Default value `getDefaultEuiMarkdownParsingPlugins()`
Prop processingPluginList#	Description and type plugins to process the markdown AST nodes into a React nodes Type: `PluggableList`	Default value `getDefaultEuiMarkdownProcessingPlugins()`
Prop uiPlugins#	Description and type defines UI for plugins' buttons in the toolbar as well as any modals or extra UI that provides content to the editor Type: `EuiMarkdownEditorUiPlugin[]`	Default value `getDefaultEuiMarkdownUiPlugins()`
Prop errors#	Description and type errors to bubble up Type: `EuiMarkdownParseError[]`	Default value `[]`
Prop onParse#	Description and type callback triggered when parsing results are available Type: `(error: EuiMarkdownParseError, data: { messages: VFileMessage[]; ast: EuiMarkdownAstNode; }) => void`	Default value
Prop initialViewMode#	Description and type initial display mode for the editor Type: `MARKDOWN_MODE`	Default value `'editing' as const`
Prop dropHandlers#	Description and type array defining any drag&drop handlers Type: `EuiMarkdownDropHandler[]`	Default value `[]`
Prop markdownFormatProps#	Description and type Further extend the props applied to EuiMarkdownFormat Type: `Omit<EuiMarkdownFormatProps, "children" \| "parsingPluginList" \| "processingPluginList">`	Default value
Prop aria-label#	Description and type Defines a string value that labels the current element. aria-label OR aria-labelledby must be set @see aria-labelledby. Type: `string`	Default value
Prop ref#	Description and type Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs} Type: `LegacyRef<EuiMarkdownEditorRef>`	Default value