@mermaid-editor-sdk/ui

@mermaid-editor-sdk/ui / MermaidEditorProps

Interface: MermaidEditorProps

Defined in: package/ui/src/ui/MermaidEditor.tsx:42

Extends

• Omit<MermaidVisualEditorOptions, "value">

Properties

autoFit?

readonly optional autoFit?: boolean

Defined in: package/ui/src/ui/MermaidEditor.tsx:56

Fits the rendered diagram after rendering and when the canvas resizes.

Default

false

children?

readonly optional children?: ReactNode

Defined in: package/ui/src/ui/MermaidEditor.tsx:77

Custom composition; when provided, replaces the default UI composition.

Default

the SDK's standard editor layout

className?

readonly optional className?: string

Defined in: package/ui/src/ui/MermaidEditor.tsx:48

Class added to the default shell root.

Default

""

onChange?

optional onChange?: (value) => void

Defined in: package/ui/src/runtime/types.ts:19

Called when the user edits the source; programmatic source updates do not invoke it.

Parameters

Returns

void

Inherited from

MermaidVisualEditorOptions.onChange

onChangeDiagramType?

optional onChangeDiagramType?: (diagramType) => void

Defined in: package/ui/src/runtime/types.ts:21

Called after a new diagram type is selected and its default source is applied.

Parameters

Returns

void

Inherited from

MermaidVisualEditorOptions.onChangeDiagramType

onError?

optional onError?: (error) => void

Defined in: package/ui/src/runtime/types.ts:25

Receives parse, render, mutation, save, or lifecycle errors.

Parameters

Returns

void

Inherited from

MermaidVisualEditorOptions.onError

onRemove?

optional onRemove?: (selection, nextSource) => void | Promise<void>

Defined in: package/ui/src/runtime/types.ts:31

Called after removal with the selection and resulting source.

Parameters

Returns

void | Promise<void>

Inherited from

MermaidVisualEditorOptions.onRemove

onReset?

optional onReset?: (nextSource) => void | Promise<void>

Defined in: package/ui/src/runtime/types.ts:29

Called after Reset with the resulting source.

Parameters

Returns

void | Promise<void>

Inherited from

MermaidVisualEditorOptions.onReset

onSave?

optional onSave?: (currentSource) => void | Promise<void>

Defined in: package/ui/src/runtime/types.ts:27

Called by Save with the current source.

Parameters

Returns

void | Promise<void>

Inherited from

MermaidVisualEditorOptions.onSave

onSelectionChange?

optional onSelectionChange?: (selection) => void

Defined in: package/ui/src/runtime/types.ts:23

Called when the selection changes or clears.

Parameters

Returns

void

Inherited from

MermaidVisualEditorOptions.onSelectionChange

portalContainer?

readonly optional portalContainer?: PortalContainer

Defined in: package/ui/src/ui/MermaidEditor.tsx:73

Parent container for editor dialogs and popovers. When used inside a host modal, provide an element within that modal. The target must be in the regular DOM and in the document that loads the SDK stylesheet; Shadow DOM targets are unsupported.

Default

document.body

Example

import { useRef } from 'react';
import { MermaidEditor } from '@mermaid-editor-sdk/ui';
import '@mermaid-editor-sdk/ui/style.css';

function DiagramDialogContent({ source, setSource }: { source: string; setSource: (value: string) => void }) {
  const dialogRef = useRef<HTMLDivElement>(null);
  return <div ref={dialogRef} className="host-dialog-overlay">
    <MermaidEditor value={source} onChange={setSource} portalContainer={dialogRef} />
  </div>;
}

title?

readonly optional title?: string

Defined in: package/ui/src/ui/MermaidEditor.tsx:52

Default shell heading.

Default

"Diagram"

value

readonly value: string

Defined in: package/ui/src/ui/MermaidEditor.tsx:44

Mermaid source controlled by the host.