@md-forge-portable/editor-react

WYSIWYG markdown editor — one contentEditable surface, DOM-first while editing.

API (uncontrolled)

import { useRef } from 'react';
import { MarkdownEditor, type MarkdownEditorHandle } from '@md-forge-portable/editor-react';
import '@md-forge-portable/editor-react/styles.css';

const ref = useRef<MarkdownEditorHandle>(null);

<MarkdownEditor
  ref={ref}
  defaultValue="# Hello\n\n**Bold** text"
  documentKey={docId}
  debounceMs={250}
  onDebouncedChange={(md, diagnostics) => {
    console.log(md, diagnostics);
  }}
/>

// On save / publish:
const markdown = ref.current?.getMarkdown();

| Prop | Description | |------|-------------| | defaultValue | Initial markdown (parse once into the document) | | documentKey | Change to reset the editor with a new defaultValue | | onDebouncedChange | Optional preview/sync hook (not every keystroke in React state) | | debounceMs | Debounce for onDebouncedChange (default 250) |

| ref method | Description | |--------------|-------------| | getMarkdown() | Export current document as canonical markdown | | getDiagnostics() | Warnings from unsupported blocks | | setMarkdown(md) | Replace document from markdown | | focus() | Focus the editor |

While editing, the DOM is the live model. Markdown is produced only when you export (or via debounced callback).