react-ml

React ML
========

React-base, extensible user-facing language (think BBCode/WikiCode) for the modern web.

It allows you to enrich your user-generated content (comments, forum posts...) with custom, well-integrated features.

It compiles text written by your users to injection-safe JSX (React Elements) using rules defined by you.

$3

- compiler works in the server or in the client so you can have a wonderful client-side editor but still compile on the server for maximum efficiency
- completely extensible : ReactML allows you to define custom tags and associate them with custom React components
- fast, based on React and htmldomparser2

$3

- fast
- comes with a basic set of custom tags inspired by BBCode
- very easily extensible with you own markup
- injection-safe (unless you want to allow tags like
github.com

HN
`

gets compiled to

`jsx



{'Hello'}




{'World'}




{'github.com'}






`

which in turn will be rendered using React.render to

`html


Hello

World

github.com

You can of course customize:
- the existing components from the basic layout via CSS or overloading,
- add or replace components with your own.

$3

`js
import ReactML from 'react-ml';

React.render(ReactML.compile('Hello world', ReactML.presets.basic));
`

$3

Components are defined by their tagname (eg. has tagname image). It is then up to you to define which
React Element will actually be mapped to your custom component. For example, if we wish to add a component that
will color its children in red, we would do the following:

`js
compile(source, Object.assign({}, basicPreset, {
red: (attribs, children, transformChildren) =>

{transformChildren(children)}
,
}));
`

The signature function for a component definition is:

(attribs: Object, children: Object, transformChildren: Function): React.Element

- attribs contains the attributes of the current node, eg. attribs for is { bar: 'foo' }
- children contains the list of the children node,
- transformChildren is a reference to the closured compile function to perform recursive transformation of the
children list.

Each object in children can be destructured as { type, data } = child, where type can either be text, in which
case the actual text content is in data, or tag, in which case data and the children object should be either
ignored or passed to transformChildren`.