The Markdown Editor is a Textarea for multiline text that lets users quickly edit markdown text. It provides a toolbar with common actions, such as bolding text without having to remember the exact syntax.
Anatomy
Anatomy summary lists and describes all the elements within a component (including nested components).
|
Element |
Description |
Optional? |
|---|---|---|
|
1. Field label |
Mandatory textual label used to describe the form field to guide users in filling it. |
No |
|
2. Required or optional marker |
Textual label used to denote if a field is required or optional. Marker's copy is not changeable. |
Yes |
|
3. Popover trigger |
Used to display a Popover with more content explaining the context of a field. Used when Helper text is not sufficient. |
Yes |
|
4. Helper text |
Additional description helping users provide the right input, if the field label is insufficient. |
Yes |
|
5. Markdown Toolbar |
Row of formatting actions (Bold, Italic, Bulleted List, Numeric List, Link, Image, Code, Quotes). |
Yes. Only rendered while toggled on |
|
6. Format button |
Buttons for common actions: |
No |
|
7. Markdown text |
Text user types that appears as markdown. |
No |
|
8. Field |
Textarea that contains plain or markdown text. |
No |
|
9. Toolbar toggle |
Button that shows or hides the Markdown formatting toolbar |
Yes. Hidden with hideMarkdownToggle |
Component dependencies
This component is internally dependent on the following components:
Button
Stack
Stack is a layout component that creates horizontal and vertical flows.
Textarea
Used to enter free form text that spans over multiple lines of text.
Help and support