Skip to content

Commit 8aaf017

Browse files
lokiuzlokiuz
authored
Merge pull request #37 from lokiuz/next
0.10.0
2 parents 8a609f8 + 089ab7e commit 8aaf017

27 files changed

+5922
-413
lines changed

‎.eslintrc‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
"env": {
55
"browser": true,
66
"node": true,
7-
"mocha": true
7+
"jest": true
88
},
99
"rules": {
1010
"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],

‎.travis.yml‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,9 @@ cache:
77
- node_modules
88

99
node_js:
10+
- '9'
11+
- '8'
1012
- '6'
11-
- '5'
1213

1314
install: 'npm install && npm run compile'
1415
script: 'npm run test'

‎CHANGELOG.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
1+
## 0.10.0
2+
- switch from Decorator option to custom decorators in renderer array #33
3+
- add blockFallback option, render provided type when missing renderer for a block #35
4+
- expose createBlockRenderer to create block renderer from blockRenderMap #32
5+
- add Common Issues to readme
6+
17
## 0.9.0
28
- added support for custom Decorator class and accessing contentState #30
39
- fixed inline style key collision #29

‎README.md‎

Lines changed: 38 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ Renders the result of Draft.js convertToRaw using provided callbacks, works well
99
## What does it do?
1010
It can convert whole raw state or just specific parts to desired output like React components or an html string.
1111

12-
Additionally you could just parse the raw using provided RawPraser to get a nested structure for a specific block.
12+
Additionally you could just parse the raw using provided RawParser to get a nested structure for a specific block.
1313

1414
## Install
1515
``` sh
@@ -84,7 +84,7 @@ const renderers = {
8484
* Array of decorators,
8585
* Entities receive children and the entity data,
8686
* inspired by https://facebook.github.io/draft-js/docs/advanced-topics-decorators.html
87-
* it's also possible to pass a Decorator class to options instead (or additionaly)
87+
* 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)
8888
*/
8989
decorators: [
9090
{
@@ -95,7 +95,8 @@ const renderers = {
9595
// decoratedText a plain string matched by the strategy
9696
// if your decorator depends on draft-js contentState you need to provide convertFromRaw in redraft options
9797
component: ({ children, decoratedText }) => <a href={decoratedText}>{children}/>,
98-
}
98+
},
99+
new CustomDecorator(someOptions),
99100
],
100101
}
101102

@@ -141,12 +142,11 @@ Returns an array of rendered blocks.
141142
- **renderers** - object with 3 groups of renders inline (or style), blocks and entities refer to example for more info
142143
- **options** - optional settings
143144
144-
#### Using style renderer instead of inline
145-
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.
145+
#### Using styleMap and blockRenderMap instead of inline and block renders
146+
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.
146147
```js
147148
import React from 'react';
148-
import redraft, { createStylesRenderer } from 'redraft';
149-
149+
import redraft, { createStylesRenderer, createBlockRenderer } from 'redraft';
150150

151151
const styleMap = {
152152
BOLD: {
@@ -166,9 +166,28 @@ const styleMap = {
166166
const InlineWrapper = ({ children, style, key }) => <span key={key} style={style}>{children}</span>
167167
// this Component results in a flatter output as it can have multiple styles (also possibly less semantic)
168168

169-
// note the style key and createStylesRenderer helper
169+
// Api aligned w draft-js, aliasedElements are not required as draft-js uses them for parsing pasted html
170+
const blockRenderMap = {
171+
unstyled: {
172+
element: 'div',
173+
},
174+
blockquote: {
175+
element: 'blockquote',
176+
},
177+
'ordered-list-item': {
178+
element: 'li',
179+
wrapper: 'ol',
180+
},
181+
'unordered-list-item': {
182+
element: 'li',
183+
wrapper: 'ul',
184+
},
185+
};
186+
170187
const renderers = {
188+
// note the styles key and createStylesRenderer helper
171189
styles: createStylesRenderer(InlineWrapper, styleMap),
190+
blocks: createBlockRenderer(React.createElement, blockRenderMap),
172191
...
173192
};
174193
```
@@ -186,23 +205,31 @@ const renderers = {
186205
### Joining the output
187206
`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`)
188207
189-
### Using custom Decorator class
190-
`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).
208+
209+
### Render fallback for missing block type
210+
`blockFallback` - redraft will render this block type if its missing a block renderer for a specific type (default: `'unstyled'`)
191211
192212
### Accessing contentState
193213
`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.
194214
195215
### Creating the ContentBlock
196216
`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
197217
198-
*Exmaple usage with ContentBlock from draft-js*
218+
*Example usage with ContentBlock from draft-js*
199219
```js
200220
import { ContentBlock } from 'draft-js'
201221

202222
const createContentBlock = block => new ContentBlock(block)
203223

204224
```
205225
226+
## Common issues
227+
228+
#### Missing String.fromCodePoint in React Native
229+
Consider using a polyfill like [`String.fromCodePoint`](https://github.com/mathiasbynens/String.fromCodePoint) or [`babel-polyfill`](https://babeljs.io/docs/usage/polyfill/)
230+
231+
#### Can the multiple spaces between text be persisted?
232+
Add `white-space: pre-wrap` to a parent div, this way it will preserve spaces and wrap to new lines (as editor js does)
206233
207234
## Changelog
208235
The changelog is available here [CHANGELOG](CHANGELOG.md)

‎__mocks__/react.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
const react = require('react');
2+
// Resolution for requestAnimationFrame not supported in jest error :
3+
// https://github.com/facebook/react/issues/9102#issuecomment-283873039
4+
global.window = global;
5+
window.addEventListener = () => {};
6+
window.requestAnimationFrame = () => {
7+
throw new Error('requestAnimationFrame is not supported in Node');
8+
};
9+
10+
module.exports = react;

‎__tests__/__snapshots__/renderWithReact.js.snap‎

Lines changed: 177 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,177 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`renders blocks with depth correctly 1/2 1`] = `
4+
<div>
5+
<ul
6+
className="ul-level-0"
7+
>
8+
<li>
9+
Hey
10+
<ul
11+
className="ul-level-1"
12+
>
13+
<li>
14+
Ho
15+
<ul
16+
className="ul-level-2"
17+
>
18+
<li>
19+
Let's
20+
</li>
21+
</ul>
22+
<ol
23+
className="ol-level-2"
24+
>
25+
<li>
26+
Go
27+
</li>
28+
</ol>
29+
</li>
30+
</ul>
31+
</li>
32+
</ul>
33+
</div>
34+
`;
35+
36+
exports[`renders blocks with depth correctly 2/2 1`] = `
37+
<div>
38+
<ul
39+
className="ul-level-0"
40+
>
41+
<li>
42+
Hey
43+
<ul
44+
className="ul-level-1"
45+
>
46+
<li>
47+
Ho
48+
<ul
49+
className="ul-level-2"
50+
>
51+
<li>
52+
Let's
53+
</li>
54+
</ul>
55+
</li>
56+
</ul>
57+
</li>
58+
</ul>
59+
<ol
60+
className="ol-level-0"
61+
>
62+
<li>
63+
Go
64+
</li>
65+
</ol>
66+
</div>
67+
`;
68+
69+
exports[`renders blocks with depth from custom map correctly 1/2 1`] = `
70+
<div>
71+
<ul>
72+
<li>
73+
Hey
74+
<ul>
75+
<li>
76+
Ho
77+
<ul>
78+
<li>
79+
Let's
80+
</li>
81+
</ul>
82+
<ol>
83+
<li>
84+
Go
85+
</li>
86+
</ol>
87+
</li>
88+
</ul>
89+
</li>
90+
</ul>
91+
</div>
92+
`;
93+
94+
exports[`renders blocks with renderer from custom map 1`] = `
95+
<div>
96+
<p>
97+
Paragraph one
98+
</p>
99+
<blockquote>
100+
A quote
101+
Spanning multiple lines
102+
</blockquote>
103+
<p>
104+
A second paragraph.
105+
</p>
106+
</div>
107+
`;
108+
109+
exports[`renders blocks with single char correctly 1`] = `
110+
<div>
111+
<p>
112+
!
113+
</p>
114+
</div>
115+
`;
116+
117+
exports[`renders correctly 1`] = `
118+
<div>
119+
<p>
120+
<strong>
121+
Lorem
122+
</strong>
123+
<strong>
124+
<em>
125+
ipsum
126+
</em>
127+
</strong>
128+
<strong>
129+
<em>
130+
<u>
131+
<span
132+
style={
133+
Object {
134+
"textDecoration": "line-through",
135+
}
136+
}
137+
>
138+
dolor
139+
</span>
140+
</u>
141+
</em>
142+
</strong>
143+
<em>
144+
sit amet,
145+
</em>
146+
pro nisl sonet ad.
147+
</p>
148+
<blockquote>
149+
Eos affert numquam id, in est meis nobis. Legimus singulis suscipiantur eum in,
150+
<em>
151+
ceteros invenire
152+
</em>
153+
tractatos his id.
154+
</blockquote>
155+
<p>
156+
<strong>
157+
Facer facilis definiebas ea pro, mei malis libris latine an. Senserit moderatius vituperata vis in.
158+
</strong>
159+
</p>
160+
</div>
161+
`;
162+
163+
exports[`renders provided fallback block if current block type is unsuported 1`] = `
164+
<div>
165+
<blockquote>
166+
Block of this type is not supported
167+
</blockquote>
168+
</div>
169+
`;
170+
171+
exports[`renders unstyled block by default if current block type is unsuported 1`] = `
172+
<div>
173+
<p>
174+
Block of this type is not supported
175+
</p>
176+
</div>
177+
`;

0 commit comments

Comments
 (0)