Mdast React Render
A util to render an MDAST tree accroding to a schema.
API
rule
object
matchMdast: : Boolean props: : Object rules: rule isVoid: Boolean component: ReactComponent
matchMdast
Return true if the rule should render the mdast node.props
Extract props from mdast to be passed tocomponent
. Additional context is available from the orderedancestors
array—index zero is equal to the parent.rules
Optional array of sub rules to render children with. Defaults to recursively visit children.isVoid
Skip rendering children. Defaultfalse
.component
The React component to render.
renderMdast
: ReactElement | ReactElement
mdast
: Mdast | [Mdast]
The mdast tree to render.
schema.rules
: [rule]
Rules to render with
options.MissingNode
: false | ReactComponent
A component to display when no rules matches. You can also pass false to throw if there is an unhandled mdast node. The component receives an node
, index
, parent
and ancestors
prop.
options.ancestors
: undefined | [Mdast]
If you're rendering a sub tree you should pass the ancestors via options. The immediate parent is expected at index 0. Used for matchMdast
(immediate parent) and props
(parent and ancestors).
renderEmail
: HtmlString
A drop in replacement for rendering emails. Params like renderMdast
with following addition:
options.doctype
: String
Defaults to a xhtml1-transitional
doctype string.
Renders with renderMdast
, stringifies with renderToStaticMarkup ReactDOMServer.renderToStaticMarkup
, add a doctype and supports Outlook conditional comments via the mso component.
<Mso>
A dangerous helper for Outlook conditional comments.
Props:
gte
:String
a optional gte conition, usually'15'
children
:String
a dangerous html string to be between the conditional comment.
Usage:
<Mso> ` <style> img { width:800px !important; } </style> `</Mso>
General Note
The schema
and rule
objects can and should be enriched with arbitrary additional data your app might need e.g. initiate an editor for the schema
.
Utils
The packages also includes a suite of utils useful for writing your schemas.
matchType(type: String): matchMdastFn
matchHeading(depth: Number): matchMdastFn
matchZone(identifier: String): matchMdastFn
zone
is a custom mdast node typematchParagraph: matchMdastFn
matchImage: matchMdastFn
matchImageParagraph: matchMdastFn
A paragraph with one image childimageSizeInfo(url: string): null | {width, height}
Parses an url with an?size=${width}x${height}
suffiximageResizeUrl(url: string, size: string)
Appends aresize
query param withsize
as value
Example
Enzyme const mdast = 'type': 'root' 'children': 'type': 'heading' 'depth': 1 'children': 'type': 'text' 'value': 'The Titel' 'type': 'paragraph' 'children': 'type': 'text' 'value': '«A good lead.»' const schema = rules: matchMdast: <div>children</div> rules: matchMdast: <h1>children</h1> matchMdast: matchParagraph <p>children</p> assert
Example Email
const schema = rules: matchMdast: <html> <head> <Mso gte='15'> ` <xml> <o:officedocumentsettings> <o:allowpng /> <o:pixelsperinch>96</o:pixelsperinch> </o:officedocumentsettings> </xml> ` </Mso> </head> <body> children </body> </html> const mdast = 'type': 'root' 'children': let emailHtmlassert assert