MarkdownEditor

v2.0.2
duplicate

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:

Properties

MarkdownEditor

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