Merge pull request #37 from lokiuz/next

0.10.0
lokiuz · Jan 27, 2018 · 8aaf017 · 8aaf017
2 parents 8a609f8 + 089ab7e
commit 8aaf017
Show file tree

Hide file tree

Showing 27 changed files with 5,922 additions and 413 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -4,7 +4,7 @@
   "env": {
     "browser": true,
     "node": true,
-    "mocha": true
+    "jest": true
   },
   "rules": {
       "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],

diff --git a/.travis.yml b/.travis.yml
@@ -7,8 +7,9 @@ cache:
   - node_modules
 
 node_js:
+- '9'
+- '8'
 - '6'
-- '5'
 
 install: 'npm install && npm run compile'
 script: 'npm run test'
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,9 @@
+## 0.10.0
+- switch from Decorator option to custom decorators in renderer array #33
+- add blockFallback option, render provided type when missing renderer for a block #35
+- expose createBlockRenderer to create block renderer from blockRenderMap #32
+- add Common Issues to readme
+
 ## 0.9.0
 - added support for custom Decorator class and accessing contentState #30
 - fixed inline style key collision #29

diff --git a/README.md b/README.md
@@ -9,7 +9,7 @@ Renders the result of Draft.js convertToRaw using provided callbacks, works well
 ## What does it do?
 It can convert whole raw state or just specific parts to desired output like React components or an html string.
 
-Additionally you could just parse the raw using provided RawPraser to get a nested structure for a specific block.
+Additionally you could just parse the raw using provided RawParser to get a nested structure for a specific block.
 
 ## Install
 ``` sh
@@ -84,7 +84,7 @@ const renderers = {
    * Array of decorators,
    * Entities receive children and the entity data,
    * inspired by https://facebook.github.io/draft-js/docs/advanced-topics-decorators.html
-   * it's also possible to pass a Decorator class to options instead (or additionaly)
+   * it's also possible to pass a custom Decorator class that matches the [DraftDecoratorType](https://github.com/facebook/draft-js/blob/master/src/model/decorators/DraftDecoratorType.js)
    */
   decorators: [
     {
@@ -95,7 +95,8 @@ const renderers = {
       // decoratedText a plain string matched by the strategy
       // if your decorator depends on draft-js contentState you need to provide convertFromRaw in redraft options
       component: ({ children, decoratedText }) => <a href={decoratedText}>{children}/>,
-    }
+    },
+    new CustomDecorator(someOptions),
   ],
 }
 
@@ -141,12 +142,11 @@ Returns an array of rendered blocks.
 - **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.
+#### Using styleMap and blockRenderMap instead of inline and block renders
+If provided with a styles 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 styles and block renderers.
 ```js
 import React from 'react';
-import redraft, { createStylesRenderer } from 'redraft';
-
+import redraft, { createStylesRenderer, createBlockRenderer } from 'redraft';
 
 const styleMap = {
   BOLD: {
@@ -166,9 +166,28 @@ const styleMap = {
 const InlineWrapper = ({ children, style, key }) => <span key={key} style={style}>{children}</span>
 // this Component results in a flatter output as it can have multiple styles (also possibly less semantic)
 
-// note the style key and createStylesRenderer helper
+// Api aligned w draft-js, aliasedElements are not required as draft-js uses them for parsing pasted html 
+const blockRenderMap = {
+  unstyled: {
+    element: 'div',
+  },
+  blockquote: {
+    element: 'blockquote',
+  },
+  'ordered-list-item': {
+    element: 'li',
+    wrapper: 'ol',
+  },
+  'unordered-list-item': {
+    element: 'li',
+    wrapper: 'ul',
+  },
+};
+
 const renderers = {
+  // note the styles key and createStylesRenderer helper
   styles: createStylesRenderer(InlineWrapper, styleMap),
+  blocks: createBlockRenderer(React.createElement, blockRenderMap),
   ...
 };
 ```
@@ -186,23 +205,31 @@ const renderers = {
 ### Joining the output
 `joinOutput` - used when rendering to string, joins the output and the children of all the inline and entity renderers, it expects that all renderers return strings, you still have to join the at block level (default: `false`)
 
-### Using custom Decorator class
-`Decorator` - use this to pass a custom Decorator class that matches the [DraftDecoratorType](https://github.com/facebook/draft-js/blob/master/src/model/decorators/DraftDecoratorType.js).
+
+### Render fallback for missing block type
+`blockFallback` - redraft will render this block type if its missing a block renderer for a specific type (default: `'unstyled'`)
 
 ### Accessing contentState
 `convertFromRaw` - pass the draft-js convertFromRaw to provide the contentState object to both the components in your decorators and the custom Decorator class getDecorations method.
 
 ### Creating the ContentBlock
  `createContentBlock` - a function that receives a block and returns a draft-js ContentBlock, if not provided when using decorators redraft will create a ContentBlock stub with only some basic ContentBlock functionality
 
-*Exmaple usage with ContentBlock from draft-js*
+*Example usage with ContentBlock from draft-js*
 ```js
 import { ContentBlock } from 'draft-js'
 
 const createContentBlock = block => new ContentBlock(block)
 
 ```
 
+## Common issues 
+
+#### Missing String.fromCodePoint in React Native
+Consider using a polyfill like [`String.fromCodePoint`](https://github.com/mathiasbynens/String.fromCodePoint) or [`babel-polyfill`](https://babeljs.io/docs/usage/polyfill/)
+
+#### Can the multiple spaces between text be persisted?
+Add `white-space: pre-wrap` to a parent div, this way it will preserve spaces and wrap to new lines (as editor js does)
 
 ## Changelog
 The changelog is available here [CHANGELOG](CHANGELOG.md)

diff --git a/__mocks__/react.js b/__mocks__/react.js
@@ -0,0 +1,10 @@
+const react = require('react');
+// Resolution for requestAnimationFrame not supported in jest error :
+// https://github.com/facebook/react/issues/9102#issuecomment-283873039
+global.window = global;
+window.addEventListener = () => {};
+window.requestAnimationFrame = () => {
+  throw new Error('requestAnimationFrame is not supported in Node');
+};
+
+module.exports = react;
diff --git a/__tests__/__snapshots__/renderWithReact.js.snap b/__tests__/__snapshots__/renderWithReact.js.snap
@@ -0,0 +1,177 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders blocks with depth correctly 1/2 1`] = `
+<div>
+  <ul
+    className="ul-level-0"
+  >
+    <li>
+      Hey
+      <ul
+        className="ul-level-1"
+      >
+        <li>
+          Ho
+          <ul
+            className="ul-level-2"
+          >
+            <li>
+              Let's
+            </li>
+          </ul>
+          <ol
+            className="ol-level-2"
+          >
+            <li>
+              Go
+            </li>
+          </ol>
+        </li>
+      </ul>
+    </li>
+  </ul>
+</div>
+`;
+
+exports[`renders blocks with depth correctly 2/2 1`] = `
+<div>
+  <ul
+    className="ul-level-0"
+  >
+    <li>
+      Hey
+      <ul
+        className="ul-level-1"
+      >
+        <li>
+          Ho
+          <ul
+            className="ul-level-2"
+          >
+            <li>
+              Let's
+            </li>
+          </ul>
+        </li>
+      </ul>
+    </li>
+  </ul>
+  <ol
+    className="ol-level-0"
+  >
+    <li>
+      Go
+    </li>
+  </ol>
+</div>
+`;
+
+exports[`renders blocks with depth from custom map correctly 1/2 1`] = `
+<div>
+  <ul>
+    <li>
+      Hey
+      <ul>
+        <li>
+          Ho
+          <ul>
+            <li>
+              Let's
+            </li>
+          </ul>
+          <ol>
+            <li>
+              Go
+            </li>
+          </ol>
+        </li>
+      </ul>
+    </li>
+  </ul>
+</div>
+`;
+
+exports[`renders blocks with renderer from custom map 1`] = `
+<div>
+  <p>
+    Paragraph one
+  </p>
+  <blockquote>
+    A quote
+    Spanning multiple lines
+  </blockquote>
+  <p>
+    A second paragraph.
+  </p>
+</div>
+`;
+
+exports[`renders blocks with single char correctly 1`] = `
+<div>
+  <p>
+    !
+  </p>
+</div>
+`;
+
+exports[`renders correctly 1`] = `
+<div>
+  <p>
+    <strong>
+      Lorem 
+    </strong>
+    <strong>
+      <em>
+        ipsum
+      </em>
+    </strong>
+    <strong>
+      <em>
+        <u>
+          <span
+            style={
+              Object {
+                "textDecoration": "line-through",
+              }
+            }
+          >
+             dolor
+          </span>
+        </u>
+      </em>
+    </strong>
+    <em>
+       sit amet,
+    </em>
+     pro nisl sonet ad. 
+  </p>
+  <blockquote>
+    Eos affert numquam id, in est meis nobis. Legimus singulis suscipiantur eum in, 
+    <em>
+      ceteros invenire 
+    </em>
+    tractatos his id. 
+  </blockquote>
+  <p>
+    <strong>
+      Facer facilis definiebas ea pro, mei malis libris latine an. Senserit moderatius vituperata vis in.
+    </strong>
+  </p>
+</div>
+`;
+
+exports[`renders provided fallback block if current block type is unsuported 1`] = `
+<div>
+  <blockquote>
+    Block of this type is not supported
+  </blockquote>
+</div>
+`;
+
+exports[`renders unstyled block by default if current block type is unsuported 1`] = `
+<div>
+  <p>
+    Block of this type is not supported
+  </p>
+</div>
+`;