editor package
The @mdxeditor/editor package exports the MDXEditor React component and a set of plugins and pre-made components for custom editing/editor chrome.
Classes
| Class | Description |
|---|---|
| GenericHTMLNode | |
| ImageNode | A lexical node that represents an image. Use $createImageNode() to construct one. |
| MarkdownParseError | |
| UnrecognizedMarkdownConstructError |
Functions
| Function | Description |
|---|---|
| $createGenericHTMLNode(tag, type, attributes) | |
| $createImageNode(options) | Creates an ImageNode. |
| $isGenericHTMLNode(node) | |
| $isImageNode(node) | Retruns true if the node is an ImageNode. |
| always(value) | returns a function which when called always returns the passed value |
| call(proc) | Calls the passed function. |
| compose(a, b) | Performs left to right composition of two functions. |
| controlOrMeta(metaKey, ctrlKey) | |
| curry1to0(proc, arg) | Takes a 1 argument function and returns a function which when called, executes it with the provided argument. |
| curry2to1(proc, arg1) | Takes a 2 argument function and partially applies the first argument. |
| defaultComparator(current, next) | A comparator function to determine if two values are equal. Used by distinctUntilChanged operator. |
| fromWithinEditorRead(editor, fn) | |
| getSelectedNode(selection) | |
| getSelectionRectangle(editor) | |
| getStateAsMarkdown(editor, exportParams) | |
| isMdastJsxNode(node) | |
| isPartOftheEditorUI(element, editorRoot) | |
| joinProc(procs) | returns a function which calls all passed functions in the passed order. joinProc does not pass arguments or collect return values. |
| makeHslTransparent(hsl, alpha) | |
| noop() | |
| prop(property) | Returns a function which extracts the property from from the passed object. |
| realmFactoryToComponent(realmFactory, map, Root) | Converts a system spec to React component by mapping the system streams to component properties, events and methods. Returns hooks for querying and modifying the system streams from the component's child components. |
| realmPlugin(params) | Declares a new MDXEditor plugin. |
| replaceWhitespace(str) | |
| system(constructor, dependencies) | Declare a new state management module (system). The constructor receives the realm and the dependencies as arguments. |
| tap(arg, proc) | Calls callback with the first argument, and returns it. |
| thrush(arg, proc) | Takes a value and applies a function to it. |
| useCodeBlockEditorContext() | Use this hook in your custom code block editors to modify the underlying node code, language, and meta. |
| useLexicalNodeRemove() | A hook that returns a function that removes the lexical node from the editor. |
| useMdastNodeUpdater() | A hook that returns a function that can be used to update the mdast node. Use this in your custom editor components. |
| useNestedEditorContext() | A hook to get the current NestedEditorsContext value. Use this in your custom editor components. |
| uuidv4() | |
| voidEmitter() |
Interfaces
| Interface | Description |
|---|---|
| ButtonOrDropdownButtonProps | The properties of the ButtonOrDropdownButton React component. |
| CodeBlockEditorContextValue | A set of functions that modify the underlying code block node. Get this with the useCodeBlockEditorContext() hook. |
| CodeBlockEditorDescriptor | Implement this interface to create a custom code block editor. Pass the object in the codeBlockPlugin parameters. |
| CodeBlockEditorProps | The properties passed to the CodeBlockEditorDescriptor.Editor component. |
| CodeBlockPluginParams | The parameters passed to the codeBlockPlugin initializer. |
| Comparator | A function which determines if two values are equal. Implement custom comparators when the distinctUntilChanged operator needs to work on non-primitive objects. |
| ConditionalContentsProps | The properties of the ConditionalContents React component. |
| CreateCodeBlockNodeOptions | The options necessary to construct a new code block node. |
| CreateImageNodeOptions | The payload to create an ImageNode. |
| DialogButtonProps | The properties of the DialogButton component. |
| DiffSourcePluginParams | |
| DirectiveDescriptor | Implement this interface to create a custom editor for markdown directives. Pass the object in the directivesPlugin parameters. |
| DirectiveEditorProps | The properties passed to the DirectiveDescriptor.Editor component. |
| DirectivesPluginParams | The parameters used to configure the directivesPlugin function. |
| EditorInFocus | The type of the editor being edited currently. Custom editors can override this, so that the toolbar can change contents. |
| InsertImageFormValues | |
| JsxComponentDescriptor | Defines the structure of a JSX component that can be used within the markdown document. |
| JsxEditorProps | The properties passed to a JSX Editor component. |
| JsxPluginParams | The parameters of the jsxPlugin. |
| JsxPropertyDescriptor | Defines the structure of a JSX component property. |
| LexicalConvertOptions | Configures how the lexical tree is converted to a mdast tree and then to markdown. |
| LexicalExportVisitor | Implement this interface in order to process mdast node(s) into a lexical tree. This is part of the process that converts the editor contents to markdown. |
| LexicalNodeVisitParams | The params passed to the LexicalExportVisitor.visitLexicalNode() method. |
| LexicalVisitActions | A set of covenience utilities to manipulate the mdast tree when processing lexical nodes. |
| MdastImportVisitor | Implement this interface to convert certian mdast nodes into lexical nodes. |
| MdastVisitActions | A set of actions that can be used to modify the lexical tree while visiting the mdast tree. |
| MdastVisitParams | Parameters passed to the MdastImportVisitor.visitNode() function. |
| MDXEditorMethods | The interface for the MDXEditor object reference. |
| MDXEditorProps | The properties of the MDXEditor React component. |
| NestedEditorProps | The properties of the NestedLexicalEditor React component. |
| NestedEditorsContextValue | The value of the NestedEditorsContext React context. |
| PropertyPopoverProps | The properties of the PropertyPopover React component. |
| RealmPluginParams | The parameters of a plugin declaration. THe best way to understand what each one does is to examine the source code of the existing plugins. |
| SandpackConfig | The configuration for the available sandpack presets. |
| SandpackPreset | Defines a single preset that can be used to create a sandbox. |
| SelectProps | The properties of the Select React component. |
| SingleChoiceToggleGroupProps | The properties of the SingleChoiceToggleGroup React component. |
| System | The system interface is the runtime representation of a state management module, a record of nodes. |
| SystemConstructor | The system constructor is a function which initializes and connects nodes and returns them as a [[system]]. If the [[system]] call specifies system dependencies, the constructor receives the dependencies as an array argument. |
| SystemPropsMap | Describes the mapping between the system streams and the component properties. Each property uses the keys as the names of the properties and the values as the corresponding stream names. |
| SystemSpec | a SystemSpec is the result from a [[system]] call. To obtain the [[system]], pass the spec to [[init]]. |
Variables
| Variable | Description |
|---|---|
| AdmonitionDirectiveDescriptor | Pass this descriptor to the directivesPlugin directiveDescriptors parameter to enable markdown admonitions. |
| BlockTypeSelect | A toolbar component that allows the user to change the block type of the current selection. Supports paragraphs, headings and block quotes. |
| BoldItalicUnderlineToggles | A toolbar component that lets the user toggle bold, italic and underline formatting. |
| Button | A toolbar button primitive. |
| ButtonOrDropdownButton | Use this primitive to create a toolbar button that can be either a button or a dropdown, depending on the number of items passed. |
| ButtonWithTooltip | A toolbar button with a custom toolbar primitive. |
| CAN_USE_DOM | |
| ChangeAdmonitionType | A component that allows the user to change the admonition type of the current selection. For this component to work, you must pass the AdmonitionDirectiveDescriptor to the directivesPlugin directiveDescriptors parameter. |
| ChangeCodeMirrorLanguage | A component that allows the user to change the code block language of the current selection. For this component to work, you must enable the codeMirrorPlugin for the editor. See ConditionalContents for an example on how to display the dropdown only when a code block is in focus. |
| CodeMirrorEditor | |
| CodeToggle | A toolbar component that lets the user toggle code formatting. Use for inline code elements (like variables, methods, etc). |
| ConditionalContents | A toolbar primitive that allows you to show different contents based on the editor that is in focus. Useful for code editors that have different features and don't support rich text formatting. |
| coreSystem | Add the the core system when creating systemf for your own plugins. This gives you access to the component core state and logic, like the visitors, the lexical nodes, and the publishers used to insert nodes in the editor. |
| CreateLink | A toolbar component that opens the link edit dialog. For this component to work, you must include the linkDialogPlugin. |
| DialogButton | Use this primitive to create a toolbar button that opens a dialog with a text input, autocomplete suggestions, and a submit button.See DialogButtonProps for the properties that can be passed to this component. |
| DiffSourceToggleWrapper | A wrapper element for the toolbar contents that lets the user toggle between rich text, diff and source mode. Put the rich text toolbar contents as children of this component. For this component to work, you must include the diffSourcePlugin. |
| GenericDirectiveEditor | A generic editor that can be used as an universal UI for any directive. Allows editing of the directive content and properties. Use this editor for the DirectiveDescriptor Editor option. |
| GenericJsxEditor | A generic editor that can be used as an universal UI for any JSX element. Allows editing of the element content and properties. Use this editor for the JsxComponentDescriptor Editor option. |
| headingsPlugin | |
| headingsPluginHooks | |
| InsertAdmonition | A toolbar dropdown button that allows the user to insert admonitions. For this to work, you need to have the directives plugin enabled with the AdmonitionDirectiveDescriptor configured. |
| InsertCodeBlock | A toolbar button that allows the user to insert a fenced code block. Once the code block is focused, you can construct a special code block toolbar for it, using the ConditionalContents primitive. See the ConditionalContents documentation for an example. |
| InsertFrontmatter | A toolbar button that allows the user to insert a front-matter editor (if one is not already present). For this to work, you need to have the frontmatterPlugin plugin enabled. |
| InsertImage | A toolbar button that allows the user to insert an image from an URL. For the button to work, you need to have the imagePlugin plugin enabled. |
| InsertSandpack | A dropdown button that allows the user to insert a live code block into the editor. The dropdown offers a list of presets that are defined in the sandpack plugin config. For this to work, you need to have the sandpackPlugin installed. |
| InsertTable | A toolbar button that allows the user to insert a table. For this button to work, you need to have the tablePlugin plugin enabled. |
| InsertThematicBreak | A toolbar button that allows the user to insert a thematic break (rendered as an HR HTML element). For this button to work, you need to have the thematicBreakPlugin plugin enabled. |
| IS_APPLE | |
| KitchenSinkToolbar | A toolbar component that includes all toolbar components. Notice that some of the buttons will work only if you have the corresponding plugin enabled, so you should use it only for testing purposes. You'll probably want to create your own toolbar component that includes only the buttons that you need. |
| ListsToggle | A toolbar toggle that allows the user to toggle between bulleted and numbered lists. Pressing the selected button will convert the current list to the other type. Pressing it again will remove the list. For this button to work, you need to have the listsPlugin plugin enabled. |
| MDXEditor | The MDXEditor React component. See MDXEditorProps for the list of properties supported and the MDXEditorMethods for the methods accessible through the ref. |
| MultipleChoiceToggleGroup | A toolbar primitive that allows you to build an UI with multiple non-exclusive toggle groups, like the bold/italic/underline toggle. |
| NestedEditorsContext | Use this context to provide the necessary values to the NestedLexicalEditor React component. Place it as a wrapper in your custom lexical node decorators. |
| NestedLexicalEditor | A nested editor React component that allows editing of the contents of complex markdown nodes that have nested markdown content (for example, custom directives or JSX elements). See the NestedEditorProps for more details on the compoment props. |
| PropertyPopover | A React component that can be used in custom editors to edit the properties of the node. Displays a simple, static key/value editing UI in a popover. |
| Select | A toolbar primitive you can use to build dropdowns, such as the block type select. See SelectProps for more details. |
| Separator | A toolbar primitive that allows you to show a separator between toolbar items. By default, the separator is styled as vertical line. |
| ShowSandpackInfo | A component that displays the focused live code block's name. For this component to work, you must enable the sandpackPlugin for the editor. See ConditionalContents for an example on how to display the dropdown only when a sandpack editor is in focus. |
| SingleChoiceToggleGroup | A toolbar primitive that allows you to build an UI with multiple exclusive toggle groups, like the list type toggle. |
| TooltipWrap | A small styled wrapper around the radix-ui tooltip, that lets you display an instan tooltip on hover. |
| UndoRedo | A toolbar component that lets the user undo and redo changes in the editor. |
| WHITESPACE_MARKER |
Type Aliases
| Type Alias | Description |
|---|---|
| ConditionalContentsOption | An object that describes a possible option to be displayed in the ConditionalContents component. |
| FallBackOption | A default option to be displayed in the ConditionalContents component if none of the other options match. |
| HEADING_LEVEL | |
| ImagePreviewHandler | |
| ImageUploadHandler | |
| KnownHTMLTagType | |
| SerializedGenericHTMLNode | |
| SerializedImageNode | A serialized representation of an ImageNode. |
| VoidEmitter | An emitter object that has a single subscription that will be executed. The construct is used so that the lexical nodes can focus their React component editors. |