WUI logo

MarkdownEditor

Allows user to edit a page with markdown.

version

4.1.2

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 #

function () {
const [value, setValue] = React.useState("# 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")
const handleChange = event => {
setValue(event.target.value)
}
return (
<Field label="Markdown Editor">
<MarkdownEditor name="welcome" placeholder="Placeholder" value={value} onChange={handleChange} />
</Field>
)
}

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.

function () {
const [value, setValue] = React.useState('')
const handleChange = event => {
setValue(event.target.value)
}
return (
<Field label="Markdown Editor">
<MarkdownEditor
name="welcome"
placeholder="Placeholder"
onChange={handleChange}
value={value}
toolbar={[
{ name: 'bold', icon: <i className="fa fa-bold" />, title: 'Bold 🌴' },
{ name: 'italic', icon: <i className="fa fa-italic" /> },
{ name: 'divider' },
{ name: 'strikethrough', icon: <i className="zmdi zmdi-format-strikethrough-s" /> },
{ name: 'link', icon: <i className="zmdi zmdi-link" /> },
{ name: 'divider' },
{ name: 'code' },
{ name: 'quote', title: 'Quote 🌴' },
{ name: 'divider' },
{ name: 'emoji', icon: 'πŸ‘Œ' },
]}
/>
</Field>
)
}

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.

function () {
const [value, setValue] = React.useState('')
const handleChange = event => {
setValue(event.target.value)
}
return (
<Field label="Markdown Editor">
<MarkdownEditor
actions={
<>
<Button variant="quaternary" shape="square" size="sm">
<HashtagIcon />
</Button>
<Button variant="quaternary" shape="square" size="sm">
<MentionIcon />
</Button>
<Button variant="quaternary" shape="square" size="sm">
<AttachmentIcon />
</Button>
</>
}
name="welcome-actions"
placeholder="Placeholder"
onChange={handleChange}
value={value}
/>
</Field>
)
}

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
"sm"
"md"
"lg"
variant
"error"
"focused"
"info"
"success"
"warning"

Packages #

Dependencies #
Peer dependencies #