MDXEditorProps interface

The properties of the MDXEditor React component.

Signature:

export interface MDXEditorProps 

Properties

PropertyModifiersTypeDescription
autoFocus?boolean | { defaultSelection?: 'rootStart' | 'rootEnd'; preventScroll?: boolean; }(Optional) pass if you would like to have the editor automatically focused when mounted.
className?string(Optional) The 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?string(Optional) the 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) => JSX.Element(Optional) Use 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) => void(Optional) Triggered when focus leaves the editor
onChange?(markdown: string) => void(Optional) Triggered 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: { error: string; source: string; }) => void(Optional) Triggered when the markdown parser encounters an error. The payload includes the invalid source and the error message.
placeholder?React.ReactNode(Optional) The placeholder contents, displayed when the editor is empty.
plugins?React.ComponentProps<typeof RealmPluginInitializer>['plugins'](Optional) The plugins to use in the editor.
readOnly?boolean(Optional) pass 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?boolean(Optional) Set to false if you want to suppress the processing of HTML tags.
toMarkdownOptions?ToMarkdownOptions(Optional) The markdown options used to generate the resulting markdown. See the mdast-util-to-markdown docs for the full list of options.