Fix issue of block data undefined breaking code.

Author: jpuri

dist/html-to-draftjs.js

@@ -1,6 +1,6 @@
 {
   "name": "html-to-draftjs",
-  "version": "0.1.0-beta2",
+  "version": "0.1.0-beta3",
   "main": "dist/html-to-draftjs.js",
   "repository": {
     "type": "git",

dist/html-to-draftjs.js.map

@@ -7,13 +7,30 @@ import htmlToDraft from './library';
 import '../node_modules/react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
 import './styles.css';
 
+// in constructor, I use your code above, but I change outputEditorState to inputEditorState
+// in the first Editor, I use this.state.inputEditorState as editorState
+
 class Playground extends Component {
 
-  state = {
-    outputEditorState: undefined,
+  // state = {
+  //   outputEditorState: undefined,
+  // }
+
+  constructor(props) {
+    super(props)
+    const html = '<p>123</p>'
+    const contentBlock = htmlToDraft(html);
+    if (contentBlock) {
+      const contentState = ContentState.createFromBlockArray(contentBlock.contentBlocks);
+      const inputEditorState = EditorState.createWithContent(contentState);
+      this.state = {
+        inputEditorState,
+      };
+    }
   }
 
   onInputEditorChange = (inputEditorState) => {
+    console.log('*****', inputEditorState.getCurrentContent())
     const rawContent = convertToRaw(inputEditorState.getCurrentContent());
     const html = draftToHtml(rawContent);
     const contentBlock = htmlToDraft(html);
@@ -32,10 +49,13 @@ class Playground extends Component {
   }
 
   render() {
+    // console.log('*****', this.state.inputEditorState.getCurrentContent())
+    // value={this.state.inputEditorState && draftToHtml(convertToRaw(this.state.inputEditorState.getCurrentContent()))}
     return (
       <div>
         <div style={{ height: 200 }}>
           <Editor
+            editorState={this.state.inputEditorState}
             onEditorStateChange={this.onInputEditorChange}
             mention={{
               separator: ' ',
@@ -56,26 +76,10 @@ class Playground extends Component {
           <textarea
             disabled
             className="demo-content"
-            value={this.state.inputEditorState && draftToHtml(convertToRaw(this.state.inputEditorState.getCurrentContent()))}
           />
         </div>
         <div style={{ height: 200 }}>
-          <Editor
-            editorState={this.state.outputEditorState}
-            mention={{
-              separator: ' ',
-              trigger: '@',
-              suggestions: [
-                { text: 'A', value: 'a', url: 'href-a' },
-                { text: 'AB', value: 'ab', url: 'href-ab' },
-                { text: 'ABC', value: 'abc', url: 'href-abc' },
-                { text: 'ABCD', value: 'abcd', url: 'href-abcd' },
-                { text: 'ABCDE', value: 'abcde', url: 'href-abcde' },
-                { text: 'ABCDEF', value: 'abcdef', url: 'href-abcdef' },
-                { text: 'ABCDEFG', value: 'abcdefg', url: 'href-abcdefg' },
-              ],
-            }}
-          />
+
         </div>
       </div>
     );

package.json

@@ -1,4 +1,4 @@
-import { OrderedSet } from 'immutable';
+import { OrderedSet, Map } from 'immutable';
 
 const SPACE = ' ';
 const MAX_DEPTH = 4;
@@ -46,29 +46,27 @@ const getEmptyChunk = (): Object => {
 };
 
 const getFirstBlockChunk = (blockType: string, data: Object): Object => {
-  console.log('data 1', data)
   return {
     text: '',
     inlines: [],
     entities: [],
     blocks: [{
       type: blockType,
       depth: 0,
-      data,
+      data: data || new Map({}),
     }],
   };
 };
 
 const getBlockDividerChunk = (blockType: string, depth: number, data: Object): Object => {
-  console.log('data 2', data)
   return {
     text: '\r',
     inlines: [],
     entities: [],
     blocks: [{
       type: blockType,
       depth: Math.max(0, Math.min(MAX_DEPTH, depth)),
-      data,
+      data: data || new Map({}),
     }],
   };
 };
@@ -81,6 +79,7 @@ const getAtomicBlockChunk = (entityId: number): Object => {
     blocks: [{
       type: 'atomic',
       depth: 0,
+      data: {}
     }],
   };
 };

src/index.js

@@ -63,7 +63,6 @@ function genFragment(
     entityConfig.src = node.src;
     entityConfig.height = node.height;
     entityConfig.width = node.width;
-    console.log('entityConfig', entityConfig)
     const entityId = Entity.create(
       'EMBEDDED_LINK',
       'MUTABLE',