React-base, extensible user-facing language (= BBCode/WikiCode for the modern web).
npm install react-mlReact 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.
- 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
- 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 , or , which you can)
- allows you to generate unsafe-looking code in a safe way
Using reaml-ml/app/presets/basic, the following text:
```
HelloMess with DOM
World
github.com
gets compiled to
`jsx`
{'Hello'}
{'World'}
{'github.com'}
which in turn will be rendered using React.render to
`html`
You can of course customize:
- the existing components from the basic layout via CSS or overloading,
- add or replace components with your own.
`js
import ReactML from 'react-ml';
React.render(ReactML.compile('Hello world', ReactML.presets.basic));
`
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 thechildren list.
Each object in children can be destructured as { type, data } = child, where type can either be text, in whichdata
case the actual text content is in , or tag, in which case data and the children object should be eithertransformChildren`.
ignored or passed to