MarkdownEditor

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>
  )
}
Copy

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.

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>
  )
}
Copy

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>
  )
}
Copy

Properties #

MarkdownEditor #

Packages #

Dependencies #

Peer dependencies #