Interface: MDXEditorProps
The props for the MDXEditor React component.
Properties
Property | Type | Description |
---|---|---|
autoFocus? | boolean | object | pass if you would like to have the editor automatically focused when mounted. |
className? | string | 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 | 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 ) => Element | 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 | Triggered when focus leaves the editor |
onChange? | (markdown : string ) => void | 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 : object ) => void | Triggered when the markdown parser encounters an error. The payload includes the invalid source and the error message. |
placeholder? | ReactNode | The placeholder contents, displayed when the editor is empty. |
plugins? | RealmPlugin [] | The plugins to use in the editor. |
readOnly? | boolean | 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 | Set to false if you want to suppress the processing of HTML tags. |
toMarkdownOptions? | Options | The markdown options used to generate the resulting markdown. See the mdast-util-to-markdown docs for the full list of options. |
translation? | Translation | Pass your own translation function if you want to localize the editor. |
trim? | boolean | Whether to apply trim() to the initial markdown input (default: true) |