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 several default plugins that let you add emojis, to-do lists, and tooltips, which can be configured or removed as needed.
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.
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
Prop | Description and type | Default value |
|---|---|---|
Prop value# | Description and type A markdown content string | Default value Required |
Prop onChange# | Description and type callback function when markdown content is modified (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 number | "full" | Default value 250 |
Prop data-test-subj# | Description and type Type: string | Default value |
Prop readOnly# | Description and type Sets the current display mode to a read-only state. All editing gets resctricted. boolean | Default value |
Prop placeholder# | Description and type Sets the placeholder of the textarea string | Default value |
Prop editorId# | Description and type a unique ID to attach to the textarea. If one isn't provided, a random one string | Default value |
Prop maxHeight# | Description and type Sets the number | Default value 500 |
Prop autoExpandPreview# | Description and type Automatically adjusts the preview height to fit all the content and avoid a scrollbar. boolean | Default value true |
Prop parsingPluginList# | Description and type plugins to identify new syntax and parse it into an AST node PluggableList | Default value getDefaultEuiMarkdownParsingPlugins() |
Prop processingPluginList# | Description and type plugins to process the markdown AST nodes into a React nodes 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 EuiMarkdownEditorUiPlugin[] | Default value getDefaultEuiMarkdownUiPlugins() |
Prop errors# | Description and type errors to bubble up EuiMarkdownParseError[] | Default value [] |
Prop onParse# | Description and type callback triggered when parsing results are available (error: EuiMarkdownParseError, data: { messages: VFileMessage[]; ast: EuiMarkdownAstNode; }) => void | Default value |
Prop initialViewMode# | Description and type initial display mode for the editor MARKDOWN_MODE | Default value 'editing' as const |
Prop dropHandlers# | Description and type array defining any drag&drop handlers EuiMarkdownDropHandler[] | Default value [] |
Prop markdownFormatProps# | Description and type Further extend the props applied to EuiMarkdownFormat Omit<EuiMarkdownFormatProps, "children" | "parsingPluginList" | "processingPluginList"> | Default value |
Prop aria-label# | Description and type Defines a string value that labels the current element. string | Default value |
Prop ref# | Description and type Allows getting a ref to the component instance. LegacyRef<EuiMarkdownEditorRef> | Default value |