MarkdownEditor

Textarea for editing Markdown.

React

draft

Props

MarkdownEditor

No props documented

MarkdownEditor

Name	Default	Description
value Required		`string` Current value of the editor as a multiline markdown string.
onChange Required		`(newMarkdown: string) => void` Called when the value changes.
onInputFocus		`() => void` Called when the textarea gains focus.
onRenderPreview Required		`(markdown: string) => Promise<SafeHTMLString>` 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` ID of the describing element.
labelledBy		`string` ID of the labelling element.
viewMode		`MarkdownViewMode` Optionally control the view mode. If uncontrolled, leave this `undefined`.
onChangeViewMode		`(newViewMode: MarkdownViewMode) => void` If `viewMode` is controlled, this will be called on change.
onPrimaryAction		`() => void` Called when the user presses `Ctrl`/`Cmd` + `Enter`. Should almost always be wired to the same event as clicking the primary `actionButton`.
minHeightLines	`5`	`number` Minimum number of visible lines of text in the editor.
maxHeightLines	`35`	`number` Maximum number of visible lines of text in the editor. Has no effect if `fullHeight = true`.
emojiSuggestions		`SuggestionOptions<Emoji>` Array of all possible emojis to suggest. Leave `undefined` to disable emoji autocomplete.
onShowEmojiSuggestions		`() => void` Callback for lazy-loading emoji suggestions. Called every time the emoji menu is requested.
emojiTone		`number` Skin tone preference used for rendering applicable emoji suggestions between 1-5. 0 can be used as a default value. See: https://github.com/github/g-emoji-element?tab=readme-ov-file#skin-tones for more information.
mentionSuggestions		`SuggestionOptions<Mentionable>` Array of all possible mention suggestions. Leave `undefined` to disable `@`-mention autocomplete.
onShowMentionSuggestions		`() => void` Callback for lazy-loading mention suggestions. Called every time the mention menu is requested.
referenceSuggestions		`SuggestionOptions<Reference>` Array of all possible references to suggest. Leave `undefined` to disable `#`-reference autocomplete.
onShowReferenceSuggestions		`() => void` Callback for lazy-loading reference suggestions. Called every time the reference menu is requested.
onUploadFile		`(file: File) => Promise<FileUploadResult>` Uploads a file to a hosting service and returns the URL. If not provided, file uploads will be disabled.
acceptedFileTypes		`FileType[]` Array of allowed file types. If `onUploadFile` is defined but this array is not, all file types will be accepted. You can still reject file types by rejecting the `onUploadFile` promise, but setting this array provides a better user experience by preventing the upload in the first place.
onFilesRejected		`(files: File[], rejectedTypes: string[]) => void` Callback when files are rejected due to unsupported file types. Useful for analytics tracking.
monospace		`boolean` Control whether the editor font is monospace.
required		`boolean` Control whether the input is required.
name		`string` The name that will be given to the `textarea`.
savedReplies		`SavedReply[]` To enable the saved replies feature, provide an array of replies.
onSavedRepliesOpen		`() => void` Callback when the saved replies picker is opened
pasteUrlsAsPlainText		`boolean` Control whether URLs are pasted as plain text instead of as formatted links (if the user has selected some text before pasting). Defaults to `false` (URLs will paste as links). This should typically be controlled by user settings. Users can always toggle this behavior by holding `shift` when pasting.
errorMessage		`string` Optional error message related to the markdown editor content. Displayed directly below editor. Useful for showing validation or other errors related directly to the markdown provided by the user. Note: This is separate from the error message related to drag-and-drop errors.
teamHovercardsEnabled		`boolean` Use hovercards for team mentions in preview mode
className		`string` Optional class name

MarkdownEditor

Internal Component