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