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'

View package View source

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 #

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.

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 #

Name	Type(s)	Default
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"