@mdxeditor/editor
The @mdxeditor/editor
package exports the MDXEditor React component and a set of plugins and
pre-made components for editing/editor UI.
The API Reference is organized around the various features of the editor. Usually, each feature is implemented as a plugin.
Several note-worthy types of exports are available:
dollar-suffixed variables (e.g. markdown$
, applyBlockType$
, etc.). These are reactive Gurx primitives (Cells and Signals)
which let you interact with the editor state and extend it with your own custom logic.
The MDXEditor package re-exports Gurx's React hooks, so you can use them like this for example:
// use the markdown$ cell to get the current markdown value,
// and the rootEditor$ cell to get the Lexical editor instance.
const [markdown, rootEditor] = useCellValues([markdown$, rootEditor$])
// use the applyBlockType$ signal to apply a block type to the current selection
const applyBlockType = usePublisher(applyBlockType$)
dollar-prefixed functions (e.g. $isCodeBlockNode
, etc.). These are following the conventions of the Lexical API, and are usually usable within the Lexical editor read/update cycles.
plugin
functions - these are functions that return a plugin object that can be passed to the plugins
prop of the MDXEditor component. They usually accept a set of configuration options specific to the features they provide.
MDAST Nodes, Lexical Nodes and Import/Export visitors - these are part of the bi-directional Markdown to/from Lexical state conversion API.
Toolbar plugins and primitives - React components that can be used in the Editor toolbar. The primitives are meant to be used to build your own toolbar items.
Table of contents
MDXEditor
Headings
Quote
Links
Link Dialog
- EditLinkDialog
- InactiveLinkDialog
- PreviewLinkDialog
- RectData
- applyLinkChanges$
- cancelLinkEdit$
- linkDialogState$
- openLinkEditDialog$
- removeLink$
- switchFromPreviewToLinkEdit$
- updateLink$
- linkDialogPlugin
Lists
Image
- ImageNode
- CreateImageNodeParameters
- SaveImageParameters
- EditingImageDialogState
- ImagePreviewHandler
- ImageUploadHandler
- InactiveImageDialogState
- InsertImageParameters
- NewImageDialogState
- SerializedImageNode
- closeImageDialog$
- disableImageResize$
- imageAutocompleteSuggestions$
- imageDialogState$
- imagePreviewHandler$
- imageUploadHandler$
- insertImage$
- openEditImageDialog$
- openNewImageDialog$
- saveImage$
- $createImageNode
- $isImageNode
- imagePlugin
Table
Thematic Break
Toolbar
Toolbar Components
- BlockTypeSelect
- BoldItalicUnderlineToggles
- ChangeAdmonitionType
- ChangeCodeMirrorLanguage
- CodeToggle
- CreateLink
- DiffSourceToggleWrapper
- InsertAdmonition
- InsertCodeBlock
- InsertFrontmatter
- InsertImage
- InsertSandpack
- InsertTable
- InsertThematicBreak
- KitchenSinkToolbar
- ListsToggle
- ShowSandpackInfo
- UndoRedo
Toolbar Primitives
- ConditionalContentsOption
- FallbackOption
- Button
- ButtonOrDropdownButton
- ButtonWithTooltip
- ConditionalContents
- DialogButton
- MultipleChoiceToggleGroup
- Select
- Separator
- SingleChoiceToggleGroup
- TooltipWrap
Code Block
- CodeBlockNode
- CodeBlockEditorContextValue
- CodeBlockEditorDescriptor
- CodeBlockEditorProps
- CreateCodeBlockNodeOptions
- SerializedCodeBlockNode
- appendCodeBlockEditorDescriptor$
- codeBlockEditorDescriptors$
- defaultCodeBlockLanguage$
- insertCodeBlock$
- $createCodeBlockNode
- $isCodeBlockNode
- codeBlockPlugin
- useCodeBlockEditorContext
CodeMirror
- codeBlockLanguages$
- codeMirrorAutoLoadLanguageSupport$
- codeMirrorExtensions$
- insertCodeMirror$
- codeMirrorPlugin
Sandpack
Diff/Source
Directive
- DirectiveNode
- DirectiveDescriptor
- DirectiveEditorProps
- SerializedDirectiveNode
- AdmonitionDirectiveDescriptor
- directiveDescriptors$
- insertDirective$
- $createDirectiveNode
- $isDirectiveNode
- GenericDirectiveEditor
- directivesPlugin
HTML
- GenericHTMLNode
- MdastBlockHTMLNode
- MdastInlineHTMLNode
- KnownHTMLTagType
- MdastHTMLNode
- MdxNodeType
- SerializedGenericHTMLNode
- htmlTags
- $createGenericHTMLNode
- $isGenericHTMLNode
- isMdastHTMLNode
JSX
- JsxComponentDescriptor
- JsxEditorProps
- JsxPropertyDescriptor
- MdastJsx
- insertJsx$
- jsxComponentDescriptors$
- jsxIsAvailable$
- GenericJsxEditor
- isMdastJsxNode
- jsxPlugin
Frontmatter
Markdown Shortcuts
Markdown Processing
- MarkdownParseError
- UnrecognizedMarkdownConstructError
- LexicalConvertOptions
- LexicalExportVisitor
- MdastImportVisitor
- LexicalVisitor
- addExportVisitor$
- addImportVisitor$
- addMdastExtension$
- addSyntaxExtension$
- addToMarkdownExtension$
Core
- EditorInFocus
- RealmPlugin
- BlockType
- EditorSubscription
- IconKey
- activeEditor$
- activePlugins$
- addActivePlugin$
- addComposerChild$
- addEditorWrapper$
- addLexicalNode$
- addNestedEditorChild$
- addTopAreaChild$
- applyBlockType$
- applyFormat$
- contentEditableClassName$
- convertSelectionToNode$
- createActiveEditorSubscription$
- createRootEditorSubscription$
- currentBlockType$
- currentFormat$
- currentSelection$
- editorInFocus$
- editorRootElementRef$
- iconComponentFor$
- inFocus$
- insertDecoratorNode$
- insertMarkdown$
- markdown$
- onBlur$
- readOnly$
- rootEditor$
- setMarkdown$
- realmPlugin
Custom Editor Primitives
- NestedEditorsContextValue
- NestedEditorsContext
- NestedLexicalEditor
- PropertyPopover
- useLexicalNodeRemove
- useMdastNodeUpdater
- useNestedEditorContext
Utils
- VoidEmitter
- IS_APPLE
- onWindowChange$
- always
- call
- compose
- controlOrMeta
- curry1to0
- curry2to1
- fromWithinEditorRead
- getSelectedNode
- getSelectionRectangle
- joinProc
- noop
- prop
- tap
- thrush
- voidEmitter