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

Example

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:

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

NameType(s)DefaultRequired
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

Peer dependencies