Mischief

26 / Documents

Markdown Blocks

Extracted document regions rendered as markdown, each one selectable so it can be tied back to where it came from.

Live previewSource

Installation

Copy the source into your project, or keep it behind a package.

Copy the component into your project and make it yours.

Usage

const blocks = [
  { id: "title", kind: "heading", content: "# Master Agreement", page: 1 },
]

export function Layout() {
  return <MarkdownBlocks blocks={blocks} onActiveChange={highlightRegion} />
}

API

blocksMarkdownBlock[]Id, markdown content, and optional kind, page, and label.
activeId, defaultActiveIdstring | nullThe selected block, controlled or uncontrolled.
onActiveChange(id: string | null) => voidRuns when a block is selected or cleared. Pair with Bounding Boxes.
showKindsbooleanShows the kind and page above each block.

Accessibility

Blocks are an ordered list of toggle buttons, so selection is reachable by keyboard and announced. Raw HTML inside a block is not rendered, since react-markdown ignores it unless a raw plugin is added, which this component deliberately does not add. Tables come from GitHub flavoured markdown and render as real tables.

Dependencies

react-markdown, remark-gfm