@mdwrk/markdown-edit-in-renderer-react

In-place markdown block editing for React

This package keeps markdown in the rendered document flow, activates individual blocks in place, and emits full-document markdown updates.

Why

Use it when you want Typora-style authoring without splitting the document into a separate source-only surface.

What

• Rendered markdown with block activation.
• Source editor activation only where the user is editing.
• Integration with the MdWrk renderer and editor packages instead of a second parsing model.

Surface

• The imperative handle now exports getSnapshot(), getSelection(), setSelection(), listCommands(), and executeNamedCommand() in addition to focus and value helpers.
• The imperative handle also exports navigateSelection() so rendered-flow editors can reuse editor-core movement intents.
• useMarkdownEditInRendererCommands() exposes the first-class command inventory for rendered-flow authoring surfaces.
• useMarkdownEditInRendererNavigation() exposes the first-class keyboard navigation helpers for rendered-flow authoring surfaces.
• Command dispatch reuses the package-owned editor command descriptors so ordered lists, checklists, formatting, reorder commands, and undo/redo stay explicit instead of app-local.

Installation

Node.js 20.x through 22.x, matching the workspace engine contract in the root package manifest.

npm install @mdwrk/markdown-edit-in-renderer-react @mdwrk/markdown-renderer-react @mdwrk/markdown-editor-react

Usage

import { MarkdownEditInRenderer } from "@mdwrk/markdown-edit-in-renderer-react";
import "@mdwrk/markdown-renderer-react/styles/default.css";
import "@mdwrk/markdown-editor-react/styles/default.css";
import "@mdwrk/markdown-edit-in-renderer-react/styles/default.css";

export function DocumentEditor() {
  return (
    <MarkdownEditInRenderer
      defaultValue={"# Draft\n\nClick a block to edit it."}
      onChange={(markdown) => console.log(markdown)}
    />
  );
}

Related

• Packages index - family and package navigation
• Root README - repo overview