MarkdownEditor
We use react-simplemde-editor as a base with the following changes:
- We've added simple styles around it to keep it consistent with our other form fields
- We've made the toolbar icons more flexible (see below)
- The toolbar is sticky for when your Markdown gets really long
- You can insert emojis! 💃
Install and import
Usage
Toolbar
You can send an array of toolbar items with the shape:
{ name: 'bold', icon: <i className="fa fa-bold" />, action={item => { // Do something with item }}, title: 'Bold 🌴' }
.
For example, in the toolbar below we're using icons from:
- FontAwesome (bold, italic)
- Material Design Iconic Font: (strikethrough, link)
- our own Icons: (code, quote)
- and plain text (emoji)
Note: to use FontAwesome or Material Design icons (or any other 3rd-party icon font), you'll have to include the font stylesheet somewhere in your app.
The default toolbar uses Welcome UI icons with the following items:
Actions
You can add some actions on the bottom of the textarea with actions
childrens. We calculate automatically the height of actions.
Properties
MarkdownEditor
Name | Type(s) | Default | Required |
---|---|---|---|
actions | node | ||
autoFocus | bool | ||
disabled | bool | ||
minHeight | string | 8rem | |
name | string | ||
onBlur | func | ||
onChange | func | ||
onFocus | func | ||
placeholder | string | node | ||
toolbar | arrayOf | DEFAULT_TOOLBAR | |
value | string | ||
variant | error info success valid warning |
Dependencies
- - @welcome-ui/icons.bold^3.4.0
- - @welcome-ui/icons.code^3.4.0
- - @welcome-ui/icons.heading_1^3.4.0
- - @welcome-ui/icons.heading_2^3.4.0
- - @welcome-ui/icons.italic^3.4.0
- - @welcome-ui/icons.link^3.0.0
- - @welcome-ui/icons.ordered_list^3.4.0
- - @welcome-ui/icons.quote^3.4.0
- - @welcome-ui/icons.strikethrough^3.4.0
- - @welcome-ui/icons.unordered_list^3.4.0
- - @welcome-ui/system^3.0.0
- - @welcome-ui/utils^3.0.0
- - emoji-mart=2.11.1
- - react-simplemde-editor=4.0.2
Peer dependencies
- - @xstyled/styled-components^2.2.3
- - @xstyled/system^2.2.3
- - prop-types^15.7.2
- - react^16.10.2 || ^17.0.1
- - react-dom^16.10.2 || ^17.0.1
- - styled-components^5.2.1