@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.
MDXEditor
Headings
Quote
Links
Link Dialog
- EditLinkDialog
- InactiveLinkDialog
- PreviewLinkDialog
- RectData
- applyLinkChanges$
- cancelLinkEdit$
- linkDialogState$
- openLinkEditDialog$
- removeLink$
- switchFromPreviewToLinkEdit$
- updateLink$
- linkDialogPlugin
Lists
Image
- ImageNode
- CreateImageNodeParameters
- EditingImageDialogState
- FileImageParameters
- InactiveImageDialogState
- NewImageDialogState
- SaveImageParameters
- SrcImageParameters
- ImagePreviewHandler
- ImageUploadHandler
- InsertImageParameters
- 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
- StrikeThroughSupSubToggles
- 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
- ExpressionValue
- JsxComponentDescriptor
- JsxEditorProps
- JsxPluginParams
- 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
- activeEditor$
- activePlugins$
- addActivePlugin$
- addComposerChild$
- addEditorWrapper$
- addLexicalNode$
- addNestedEditorChild$
- addTopAreaChild$
- applyBlockType$
- applyFormat$
- contentEditableClassName$
- convertSelectionToNode$
- createActiveEditorSubscription$
- createRootEditorSubscription$
- currentBlockType$
- currentFormat$
- currentSelection$
- editorInFocus$
- editorRootElementRef$
- exportVisitors$
- iconComponentFor$
- importVisitors$
- inFocus$
- insertDecoratorNode$
- insertMarkdown$
- markdown$
- onBlur$
- readOnly$
- rootEditor$
- setMarkdown$
- usedLexicalNodes$
- 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