Interface: MDXEditorProps

The props for the MDXEditor React component.

Properties

PropertyTypeDescription
autoFocus?boolean | objectpass if you would like to have the editor automatically focused when mounted.
className?stringThe class name to apply to the root component element. Use this if you want to change the editor dimensions, maximum height, etc. For a content-specific styling, Use contentEditableClassName property.
contentEditableClassName?stringthe CSS class to apply to the content editable element of the editor. Use this to style the various content elements like lists and blockquotes.
iconComponentFor?(name: IconKey) => ElementUse this prop to customize the icons used across the editor. Pass a function that returns an icon (JSX) for a given icon key.
markdownstringThe markdown to edit. Notice that this is read only when the component is mounted. To change the component content dynamically, use the MDXEditorMethods.setMarkdown method.
onBlur?(e: FocusEvent) => voidTriggered when focus leaves the editor
onChange?(markdown: string) => voidTriggered when the editor value changes. The callback is not throttled, you can use any throttling mechanism if you intend to do auto-saving.
onError?(payload: object) => voidTriggered when the markdown parser encounters an error. The payload includes the invalid source and the error message.
placeholder?ReactNodeThe placeholder contents, displayed when the editor is empty.
plugins?RealmPlugin[]The plugins to use in the editor.
readOnly?booleanpass if you would like to have the editor in read-only mode. Note: Don't use this mode to render content for consumption - render the markdown using a library of your choice instead.
suppressHtmlProcessing?booleanSet to false if you want to suppress the processing of HTML tags.
toMarkdownOptions?OptionsThe markdown options used to generate the resulting markdown. See the mdast-util-to-markdown docs for the full list of options.
translation?TranslationPass your own translation function if you want to localize the editor.