WUI logo

MarkdownEditor

Allows user to edit a page with markdown.

version

5.17.0

install

yarn add @welcome-ui/markdown-editor

usage

import { MarkdownEditor } from '@welcome-ui/markdown-editor'

About #

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! 💃

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:

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

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
ReactElement<any, string | JSXElementConstructor<any>>
autoFocus
Boolean
disabled
Boolean
minHeight
string
8rem
name
string
onBlur
(value: string) => void
onChange
(event: MouseEvent<HTMLDivElement, MouseEvent> | CreateEvent) => void
onFocus
(value: string) => void
placeholder
string
toolbar
DefaultToolbar
[ { 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 }, ]
value
string
size
"xs"
"sm"
"md"
"lg"
variant
"error"
"focused"
"info"
"success"
"warning"
transparent
Boolean
isClearable
Boolean
hasIcon
Boolean
iconPlacement
"right"
"left"
"both"

Packages #

Dependencies #
Peer dependencies #