Links
MDXEditor supports markdown links through the links plugin. An additional popover dialog is provided to let the users insert/edit the link.
The link plugin
To enable the markdown link import, pass the linkPlugin
to the plugins property of the MDXEditor component.
import { linkPlugin } from '@mdxeditor/editor/plugins/link'
// ...
<MDXEditor markdown='Hello [world](https://virtuoso.dev/)' plugins={[linkPlugin()]} />
The link dialog plugin
The link dialog plugin enables a floating popover that appears when the cursor is inside a link, similar to Google docs. The popover allows the user to edit the link and remove it. The popover also supports a keyboard shortcut to open it - Ctrl+K
on Windows and Cmd+K
on Mac.
<MDXEditor markdown='Hello [world](https://virtuoso.dev/)' plugins={[linkPlugin(), linkDialogPlugin()]} />
Link autocomplete suggestions
The link dialog can auto-suggest a pre-configured set of links to the user. This comes in handy if you're using an editor in a CMS and you can generate a list of links to the pages that are available in the CMS. The links are passed to the plugin as a property.
<MDXEditor
markdown='Hello [world](https://virtuoso.dev/)'
plugins={[
linkPlugin(),
linkDialogPlugin({
linkAutocompleteSuggestions: [
'https://virtuoso.dev',
'https://mdxeditor.dev'
]
})]
}
/>