MDXEditorProps interface
The properties of the MDXEditor React component.
Signature:
export interface MDXEditorProps
Properties
Property | Modifiers | Type | Description |
---|---|---|---|
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. | |
markdown | string | The 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. |