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'

Usage #

Markdown Editor
{
  "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"
}
{
  "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"
}
Show editor

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.

Markdown Editor
Show editor

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' }
]

Actions #

You can add some actions on the bottom of the textarea with actions childrens. We calculate automatically the height of actions.

Markdown Editor
Show editor

Properties #

MarkdownEditor #

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
  ^4.0.0-alpha.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