`@stesura/mermaid-react`

React UI for Mermaid diagrams. Most hosts need createMermaidUiExtension and mermaidKeymapPlugin; the pieces are exported for hosts that build their own toolbar.

`createMermaidUiExtension`

The node view, the Insert tab’s Diagram group and the Diagram contextual tab, as one UI extension. Call it once, at module scope.


import { createMermaidUiExtension } from '@stesura/mermaid-react'
 
const uiExtensions = [createMermaidUiExtension()]

Mermaid diagrams in the editor: the node view, the Insert tab’s Diagram group, a Diagram tab and a context menu while one is selected. The schema needs mermaidNodes (@stesura/mermaid), and Enter-to-edit needs mermaidKeymapPlugin. Call once at module scope.

Parameters:

This function does not accept any parameters.

Returns:

StesuraUIExtension

`mermaidKeymapPlugin`

Enter or F2 on a selected diagram opens its source editor. It handles the keydown before the editor’s keymap, so it works from extraPlugins, which run after the core plugins.


import { useLocalEditor } from "@stesura/editor-react";
import { mermaidKeymapPlugin } from '@stesura/mermaid-react'
 
const editor = useLocalEditor({ schema, extraPlugins: () => [mermaidKeymapPlugin()] })

Opening the source editor

Export	Role
`openSelectedMermaidEditor`	Command: opens the selected diagram’s editor. A probe (no dispatch) only reports whether a diagram is selected.
`requestMermaidEditor(nodeId)`	Opens a diagram’s editor by id.
`mermaidEditorRequest`	The nanostore holding the requested id; the diagram’s view opens its editor and clears it on close.

Node views

Export	Role
`MermaidNodeView`	Renders the SVG, the error or empty state, and the source editor. Sets `data-render-pending` while rendering, and the `data-oversized-*` attributes that shrink a diagram taller than a page.
`MermaidSourceEditor`	The popover: source, live preview, Close. Applies the edit when it closes.
`MermaidSourceEditorProps`	`anchor` (the element it hangs from), `source`, `theme?` (for the preview), `onApply(source)` (called on close) and `onOpenChange(open)`.

Export	Role
`InsertDiagramGroup`	The Insert tab group, for `toolbarDefaultExtensions`.
`diagramToolbarTab`	The Diagram contextual tab, a `ToolbarExtensionTab` for `toolbarTabs`. Visible while a `mermaid` node is selected.
`mermaidProbes`	`insertMermaid` and `editSource` probes, for custom buttons.

@stesura/mermaid-react

createMermaidUiExtension

mermaidKeymapPlugin