/prosemirror-react-renderer

An alternative to ProseMirror's DOMSerializer that converts documents into React elements instead of DOM fragments.

Primary LanguageJavaScriptMIT LicenseMIT

prosemirror-react-renderer

An alternative to ProseMirror's DOMSerializer that converts documents into React elements instead of DOM fragments.

Quick Start

import { makeReactRenderer } from 'prosemirror-react-renderer'

const Renderer = makeReactRenderer(myProseMirrorSchema)

ReactDOM.render(
    <Renderer fragment={proseMirrorDoc.content} onClickLink={this.onClickLink} extraProp='foo' />,
    rootElement
)

API

makeReactRenderer<TProps = {}>(schema : Schema, componentName? : string)

    : React.Component<TProps & { fragment : ProseMirror.Fragment }>

Create a Renderer component from the given ProseMirror schema.

<Renderer />

Props:

fragment : ProseMirror.Fragment

Any additional props will be passed through to nodes or marks in the schema that declare a toReact method, so you can use them to inject dependencies for dynamic content (callbacks, etc.)

Caveats

  • ProseMirror toDOM methods that directly return a DOM fragment (rather than a string or an output spec array) are not supported.

  • ProseMirror toDOM methods that specify an event handler in their attributes (like onclick) will need a toReact method, since DOM event handlers are written as string expressions but React handlers are passed directly as functions.

  • Adjacent nodes with identical marks are also not currently merged as in DOMSerializer, so the React representation of a document may not be unique (which is a property offered by ProseMirror core.) PRs welcome!

Known Issues

  • Fragment elements aren't given React key values. This will be resolved before release.

License

MIT