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

yarn add @welcome-ui/markdown-editor @xstyled/styled-components @xstyled/system prop-types react react-dom styled-components
import { MarkdownEditor } from '@welcome-ui/markdown-editor'

Example

{
"welcome": "# Hi!\n## Look at me!\n\nWe've got some **bold** and *italic* text, a cheeky bit of ~~strikethrough~~, some `inline code` and a [link](https://welcometothejungle.com). We can also do inline images by hand ![Milou](https://fr.tintin.com/images/tintin/persos/images/milou.png 'Milou') as well as:\n\n* Unordered lists\n* Unordered lists\n\n1. Ordered lists\n1. Ordered lists\n\nAnd of course the classics:\n\n```\nA code block\nwith multiple lines\n```\n\n> And a quote"
}

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:

[
{ name: 'bold', title: 'Bold' },
{ name: 'italic', title: 'Italic' },
{ name: 'strikethrough', title: 'Strikethrough' },
{ name: 'link', title: 'Link' },
{ name: 'divider' },
{ name: 'heading_1', title: 'Heading 1' },
{ name: 'heading_2', title: 'Heading 2' },
{ name: 'divider' },
{ name: 'unordered_list', title: 'Unordered list' },
{ name: 'ordered_list', title: 'Ordered list' },
{ name: 'divider' },
{ name: 'code', title: 'Code' },
{ name: 'quote', title: 'Quote' },
{ name: 'divider' },
{ name: 'emoji', icon: '🙂', title: 'Emoji' }
]

Properties

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