Skip to content

On this page

MarkdownEditor

Full-featured Markdown input.
  • Draft
  • Not reviewed for accessibility
On this page
import {MarkdownEditor} from '@primer/react/drafts'

MarkdownEditor is a full-featured editor for GitHub Flavored Markdown, with support for:

  • Formatting (keyboard shortcuts & toolbar buttons)
  • File uploads (drag & drop, paste, click to upload)
  • Inline suggestions (emojis, @ mentions, and # references)
  • Saved replies
  • Markdown pasting (ie, paste URL onto selected text to create a link)
  • List editing (create a new list item on Enter)
  • Indenting selected text

Examples

Minimal Example

A Label is always required for accessibility:

{/ prettier-ignore-start /}

{/ prettier-ignore-end /}

Suggestions, File Uploads, and Saved Replies

{/ prettier-ignore-start /}

{/ prettier-ignore-end /}

Custom Buttons

{/ prettier-ignore-start /}

{/ prettier-ignore-end /}

Props

MarkdownEditor

NameTypeDefaultDescription
value Required
string
Current value of the editor as a multiline markdown string.
onChange Required
(newMarkdown: string) => void
Called when the value changes.
onRenderPreview Required
(markdown: string) => Promise<string>
Accepts Markdown and returns rendered HTML. To prevent XSS attacks, the HTML should be sanitized and/or come from a trusted source.
children Required
React.ReactNode
disabled
boolean
Disable the editor and all related buttons. Users can still switch between preview & edit modes.
placeholder
string
Placeholder text to show when the editor is empty. By default, no placeholder will be shown.
maxLength
number
Maximum number of characters the markdown can hold (includes formatting characters like `*`).
fullHeight
boolean
Force the editor to take up the full height of the container and disallow resizing. Only use when the container height is tall enough that the user will never want to expand the input further, ie when it takes the full height of the viewport.
aria-describedby
string
viewMode
'preview' | 'edit'
onChangeViewMode
(newViewMode: 'preview' | 'edit') => void
onPrimaryAction
() => void
minHeightLines
number
5
maxHeightLines
number
35
emojiSuggestions
SuggestionOptions<Emoji>
mentionSuggestions
SuggestionOptions<Mentionable>
referenceSuggestions
SuggestionOptions<Reference>
onUploadFile
(file: File) => Promise<FileUploadResult>
acceptedFileTypes
FileType[]
monospace
boolean
required
boolean
name
string
savedReplies
SavedReply[]
pasteUrlsAsPlainText
boolean