Merge pull request #48 from TradeCast/feature/custom-chunk

Feature/custom chunk

Author: jpuri

README.md

@@ -21,4 +21,28 @@ const contentState = ContentState.createFromBlockArray(contentBlocks, entityMap)
 const editorState = EditorState.createWithContent(contentState);
 ```
 
+### (optional) customChunkRenderer
+Use to define additional html nodes. Only supports atomic blocks.
+
+* _nodeName: string_ - the name of the node, in lowercase
+* _node: HTMLElement_ - the parsed node itself
+
+This renderer function is executed before any other html to draft conversion.
+Return nothing (or something falsy) to continue with the normal translation.
+
+Example:
+
+```
+htmlToDraft('<hr/>', (nodeName, node) => {
+  if (nodeName === 'hr') {
+    return {
+      type: 'HORIZONTAL_RULE',
+      mutability: 'MUTABLE',
+      data: {}
+    };
+  }
+})
+```
+
+
 **Take Care:** Plz not use version `1.2.0` it has build issues.

dist/html-to-draftjs.js

@@ -24,6 +24,17 @@ describe('htmlToDraft test suite', () => {
     contentBlocks = htmlToDraft('<p>test<a>link</a></p>');
     console.log('contentBlocks', contentBlocks);
 
+    contentBlocks = htmlToDraft('<hr/>', function(nodeName) {
+      if (nodeName === 'hr') {
+        return {
+          type: 'HORIZONTAL_RULE',
+          mutability: 'IMMUTABLE',
+          data: {}
+        };
+      }
+    });
+    console.log('contentBlocks', contentBlocks);
+
     assert.equal(true, true);
   });
 });

src/library/__tests__/mainTest.js

@@ -22,15 +22,30 @@ const REGEX_NBSP = new RegExp(' ', 'g');
 
 let firstBlock = true;
 
+type CustomChunkGenerator = (nodeName: string, node: HTMLElement) => ?{type: string, mutability: string, data: {}};
+
 function genFragment(
   node: Object,
   inlineStyle: OrderedSet,
   depth: number,
   lastList: string,
-  inEntity: number
+  inEntity: number,
+  customChunkGenerator: ?CustomChunkGenerator,
 ): Object {
   const nodeName = node.nodeName.toLowerCase();
 
+  if (customChunkGenerator) {
+    const value = customChunkGenerator(nodeName, node);
+    if (value) {
+      const entityId = Entity.__create(
+        value.type,
+        value.mutability,
+        value.data || {},
+      );
+      return { chunk: getAtomicBlockChunk(entityId) };
+    }
+  }
+
   if (nodeName === '#text' && node.textContent !== '\n') {
     return createTextChunk(node, inlineStyle, inEntity);
   }
@@ -114,27 +129,27 @@ function genFragment(
   let child = node.firstChild;
   while (child) {
     const entityId = getEntityId(child);
-    const { chunk: generatedChunk } = genFragment(child, inlineStyle, depth, lastList, (entityId || inEntity));
+    const { chunk: generatedChunk } = genFragment(child, inlineStyle, depth, lastList, (entityId || inEntity), customChunkGenerator);
     chunk = joinChunks(chunk, generatedChunk);
     const sibling = child.nextSibling;
     child = sibling;
   }
   return { chunk };
 }
 
-function getChunkForHTML(html: string): Object {
+function getChunkForHTML(html: string, customChunkGenerator: ?CustomChunkGenerator): Object {
   const sanitizedHtml = html.trim().replace(REGEX_NBSP, SPACE);
   const safeBody = getSafeBodyFromHTML(sanitizedHtml);
   if (!safeBody) {
     return null;
   }
   firstBlock = true;
-  const { chunk } = genFragment(safeBody, new OrderedSet(), -1, '', undefined);
+  const { chunk } = genFragment(safeBody, new OrderedSet(), -1, '', undefined, customChunkGenerator);
   return { chunk };
 }
 
-export default function htmlToDraft(html: string): Object {
-  const chunkData = getChunkForHTML(html);
+export default function htmlToDraft(html: string, customChunkGenerator: ?CustomChunkGenerator): Object {
+  const chunkData = getChunkForHTML(html, customChunkGenerator);
   if (chunkData) {
     const { chunk } = chunkData;
     let entityMap = new OrderedMap({});