Interface: MDXEditorProps

The props for the MDXEditor React component.

Table of contents

Properties

Properties

autoFocus

Optional autoFocus: boolean | { defaultSelection?: "rootStart" | "rootEnd" ; preventScroll?: boolean }

pass if you would like to have the editor automatically focused when mounted.


className

Optional 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

Optional 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

Optional 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.

Type declaration

▸ (name): 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.

Parameters
NameType
nameIconKey
Returns

Element


markdown

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

Optional onBlur: (e: FocusEvent) => void

Triggered when focus leaves the editor

Type declaration

▸ (e): void

Triggered when focus leaves the editor

Parameters
NameType
eFocusEvent
Returns

void


onChange

Optional 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.

Type declaration

▸ (markdown): 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.

Parameters
NameType
markdownstring
Returns

void


onError

Optional onError: (payload: { error: string ; source: string }) => void

Triggered when the markdown parser encounters an error. The payload includes the invalid source and the error message.

Type declaration

▸ (payload): void

Triggered when the markdown parser encounters an error. The payload includes the invalid source and the error message.

Parameters
NameType
payloadObject
payload.errorstring
payload.sourcestring
Returns

void


placeholder

Optional placeholder: ReactNode

The placeholder contents, displayed when the editor is empty.


plugins

Optional plugins: RealmPlugin[]

The plugins to use in the editor.


readOnly

Optional 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

Optional suppressHtmlProcessing: boolean

Set to false if you want to suppress the processing of HTML tags.


toMarkdownOptions

Optional toMarkdownOptions: Options

The markdown options used to generate the resulting markdown. See the mdast-util-to-markdown docs for the full list of options.