updated readme

added and exposed createStyleRenderer
added react and flat render styles tests with renderToStaticMarkup

Author: lokiuz

.babelrc

@@ -1,4 +1,4 @@
 {
-  "presets": ["latest"],
+  "presets": ["latest", "react"],
   "plugins": ["array-includes"]
 }

README.md

@@ -133,22 +133,38 @@ export default class Renderer extends Component {
 redraft(Object:raw, Object:renderers, Object:options)
 ```
 Returns an array of rendered blocks.
-- raw - result of the Draft.js convertToRaw
-- renderers - object with 3 groups of renders inline, blocks and entities refer to example for more info
-- options - optional settings
+- **raw** - result of the Draft.js convertToRaw
+- **renderers** - object with 3 groups of renders inline (or style), blocks and entities refer to example for more info
+- **options** - optional settings
 
+#### Using style renderer instead of inline
+If provided with a style renderer in the renders, redraft will use it instead of the inline one. This allows a flatter render more like draft.js does in the editor. Redraft also exposes a helper to create the style renderer.
 ```js
-RawParser.parse(block)
-```
-Parses the provided block and returns an ContentNode object
+import React from 'react';
+import redraft, { createStylesRenderer } from 'redraft';
 
-```js
-renderNode(Object:node, Object:inlineRendrers, Object:entityRenderers, Object:entityMap, Object:options)
+const styleMap = {
+  BOLD: {
+    fontWeight: 'bold',
+  },
+  ITALIC: {
+    fontStyle: 'italic',
+  },
+  UNDERLINE: {
+    textDecoration: 'underline',
+  },
+};
+
+// This is a wrapper callback for the inline styles
+// the style object contains all the relevant styles from the styleMap
+// it needs a key as redraft returns arrays not Components
+const InlineWrapper = ({ children, style, key }) => <span key={key} style={style}>{children}</span>
+
+const renderers = {
+  style: createStylesRenderer(InlineWrapper, styleMap),
+  ...
+};
 ```
-Returns an rendered single block.
-- node - ContentNode from `RawParser.parse(block)` method
-- inlineRendrers, entityRenderers - callbacks
-- entityMap - the entityMap from raw state `raw.entityMap`
 
 ### Options
 - `cleanup` - cleans up blocks with no text or data (metadata or entities), by default cleanup only removes empty `unstyled` blocks inserted directly after `atomic`. Accepts false or an object containing cleanup settings:

package.json

@@ -1,6 +1,6 @@
 {
   "name": "redraft",
-  "version": "0.7.0",
+  "version": "0.8.0-beta.1",
   "description": "Renders the result of Draft.js convertToRaw using provided callbacks, works well with React",
   "main": "./lib/index.js",
   "scripts": {
@@ -37,6 +37,7 @@
     "linkify-it": "^2.0.3",
     "mocha": "^3.0.2",
     "rimraf": "^2.5.2",
-    "tlds": "^1.182.0"
+    "babel-preset-react": "^6.23.0",
+    "react-dom": "^15.4.2"
   }
 }

src/createStyleRenderer.js

@@ -0,0 +1,16 @@
+/**
+ * Returns a single style object provided styleArray and stylesMap
+ */
+const reduceStyles = (styleArray, stylesMap) => styleArray
+  .map(style => stylesMap[style])
+  .reduce((prev, next) => Object.assign({}, prev, next), {});
+
+/**
+ * Returns a styleRenderer from a customStyleMap and a wrapper callback (Component)
+ */
+const createStyleRenderer = (wrapper, stylesMap) => (children, styleArray, params) => {
+  const style = reduceStyles(styleArray, stylesMap);
+  return wrapper(Object.assign({}, { children }, params, { style }));
+};
+
+export default createStyleRenderer;

src/index.js

@@ -1,7 +1,9 @@
 import RawParser from './RawParser';
+import createStylesRenderer from './createStyleRenderer';
 import { renderNode, render } from './render';
 
 export {
+  createStylesRenderer,
   RawParser,
   renderNode,
 };

test/flat.js

@@ -1,11 +1,25 @@
 import chai from 'chai';
-import redraft from '../src';
+import redraft, { createStylesRenderer } from '../src';
 import * as raws from './raws';
 import { joinRecursively, makeList } from './helpers';
+import ReactDOMServer from 'react-dom/server'
+import React from 'react';
 
 const should = chai.should();
 
 const customStyleMap = {
+  BOLD: {
+    'font-weight': 'bold',
+  },
+  ITALIC: {
+    'font-style': 'italic',
+  },
+  UNDERLINE: {
+    'text-decoration': 'underline',
+  },
+};
+
+const customStyleMapReact = {
   BOLD: {
     fontWeight: 'bold',
   },
@@ -17,14 +31,22 @@ const customStyleMap = {
   },
 };
 
+const stringifyStyles = reduced => Object.keys(reduced)
+  .map(key => `${key}:${reduced[key]};`).join('');
 
-const mapStyles = styleArray => {
-  const stylesMap = styleArray.map(style => customStyleMap[style])
-  const reduced = stylesMap.reduce((prev, next) => Object.assign({}, prev, next), {})
-  return Object.keys(reduced).map(key => `${key}: ${reduced[key]}`).join(';')
-};
 // render to HTML
-const styles = (children, styleArray) => `<span style="${mapStyles(styleArray)}">${joinRecursively(children)}</span>`;
+const styles = createStylesRenderer(
+  ({ children, style }) => `<span style="${stringifyStyles(style)}">${joinRecursively(children)}</span>`,
+  customStyleMap
+);
+
+// needs a key
+const Inline = ({ children, style, key }) => <span key={key} style={style}>{children}</span>
+
+const stylesReact = createStylesRenderer(
+  Inline,
+  customStyleMapReact
+);
 
 const blocks = {
   unstyled: (children) => `<p>${joinRecursively(children)}</p>`,
@@ -33,27 +55,51 @@ const blocks = {
   'unordered-list-item': (children) => `<ul>${makeList(children)}</ul>`,
 };
 
+
+const blocksReact = {
+  unstyled: (children, { keys }) =>
+    children.map((child, index) => <p key={keys[index]}>{child}</p>),
+  blockquote: (children, { keys }) => <blockquote key={keys[0]} >{children}</blockquote>,
+};
+
 const entities = {
-  LINK: (children, entity) => `<a href="${entity.url}" >${joinRecursively(children)}</a>`,
+  LINK: (children, entity) => `<a href="${entity.url}">${joinRecursively(children)}</a>`,
   ENTITY: (children, entity) => `<div style="color: ${entity.data.color}" >${joinRecursively(children)}</div>`,
 };
 
+const entitiesReact = {
+  LINK: (children, entity, { key }) => <a key={key} href={entity.url} >{children}</a>,
+};
+
 const renderers = {
   styles,
   blocks,
   entities,
 };
 
+const renderersReact = {
+  styles: stylesReact,
+  blocks: blocksReact,
+  entities: entitiesReact,
+};
+
 // Helpers for te
-const bold = 'fontWeight: bold';
-const italic = 'fontStyle: italic';
+const bold = 'font-weight:bold;';
+const italic = 'font-style:italic;';
+
+const corretRender = `<p><span style="${bold}">Lorem </span><a href="http://zombo.com/"><span style="${bold}${italic}">ipsum</span></a><span style="${bold}${italic}"> dolor</span><span style="${italic}"> sit amet,</span> pro nisl sonet ad. </p><blockquote>Eos affert numquam id, in est meis nobis. Legimus singulis suscipiantur eum in, <span style="${italic}">ceteros invenire </span>tractatos his id. </blockquote><p><span style="${bold}">Facer facilis definiebas ea pro, mei malis libris latine an. Senserit moderatius vituperata vis in.</span></p>` // eslint-disable-line max-len
+
 
 describe('redraft with flat styles', () => {
   it('should render flat styles correctly', () => {
     const rendered = redraft(raws.raw, renderers);
     const joined = joinRecursively(rendered);
-    joined.should.equal(
-      `<p><span style="${bold}">Lorem </span><a href="http://zombo.com/" ><span style="${bold};${italic}">ipsum</span></a><span style="${bold};${italic}"> dolor</span><span style="${italic}"> sit amet,</span> pro nisl sonet ad. </p><blockquote>Eos affert numquam id, in est meis nobis. Legimus singulis suscipiantur eum in, <span style="${italic}">ceteros invenire </span>tractatos his id. </blockquote><p><span style="${bold}">Facer facilis definiebas ea pro, mei malis libris latine an. Senserit moderatius vituperata vis in.</span></p>` // eslint-disable-line max-len
+    joined.should.equal(corretRender);
+  });
+  it('should render flat styles correctly with ReactDOMServer.renderToStaticMarkup', () => {
+    const rendered = <div>{redraft(raws.raw, renderersReact)}</div>;
+    const stringified = ReactDOMServer.renderToStaticMarkup(rendered);
+    stringified.should.equal(`<div>${corretRender}</div>`
     );
   });
 });