Merge branch 'master' into feature/style-support

Author: jpuri

.gitignore

@@ -13,3 +13,5 @@ npm-debug.log
 
 #IntelliJ
 .idea
+
+stats.json

README.md

@@ -10,12 +10,39 @@ npm install html-to-draftjs --save
 ```
 
 ## Usage
+
 ```
 import { EditorState, ContentState } from 'draft-js';
 import htmlToDraft from 'html-to-draftjs';
 
 const blocksFromHtml = htmlToDraft(this.props.content);
-const { contentBlocks, entityMap } = blocksFromHtml.contentBlock;
+const { contentBlocks, entityMap } = blocksFromHtml;
 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.

config/webpack.build.js renamed to config/webpack.config.js

@@ -10,10 +10,12 @@ module.exports = {
   output: {
     path: path.join(__dirname, '../dist'),
     filename: 'html-to-draftjs.js',
-    libraryTarget: 'commonjs2',
+    library: 'htmlToDraftjs',
+    libraryTarget: 'umd',
   },
   externals: {
     'draft-js': 'draft-js',
+    immutable: 'immutable',
   },
   plugins: [
     new webpack.DefinePlugin({

dist/html-to-draftjs.js

@@ -1,34 +1,38 @@
 {
   "name": "html-to-draftjs",
-  "version": "1.0.1",
+  "version": "1.4.0",
   "main": "dist/html-to-draftjs.js",
   "repository": {
     "type": "git",
     "url": "https://github.com/jpuri/html-to-draftjs.git"
   },
   "devDependencies": {
+    "babel-core": "^6.26.0",
+    "babel-loader": "^7.1.2",
+    "babel-preset-env": "^1.6.1",
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-react": "^6.24.1",
     "babel-preset-stage-0": "^6.24.1",
     "chai": "^4.1.2",
-    "draft-js": "^0.10.3",
-    "draftjs-to-html": "^0.7.5",
-    "react": "^16.0.0",
-    "react-dom": "^16.0.0",
+    "draft-js": "^0.10.4",
+    "draftjs-to-html": "^0.7.6",
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0",
     "react-draft-wysiwyg": "^1.10.12",
-    "react-scripts": "1.0.14",
+    "react-scripts": "1.0.17",
     "rimraf": "^2.6.2",
-    "webpack": "^3.6.0"
+    "webpack": "^3.9.1"
   },
   "peerDependencies": {
-    "draft-js": "^0.9.x || ^0.10.x"
+    "immutable": "3.x.x || 4.x.x",
+    "draft-js": "^0.10.x"
   },
   "scripts": {
     "start": "react-scripts start",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject",
     "clean": "rimraf dist",
-    "build": "npm run clean && webpack --config config/webpack.build.js"
+    "build": "npm run clean && webpack --config config/webpack.config.js"
   },
   "author": "Jyoti Puri",
   "license": "MIT"

package.json

@@ -7,6 +7,10 @@ export default function getBlockData(
     return new Map({
       'text-align': node.style.textAlign,
     })
+  } else if (node.style.marginLeft) {
+    return new Map({
+      'margin-left': node.style.marginLeft,
+    })
   }
   return undefined;
 }

report.html

@@ -18,7 +18,7 @@ const getEntityId = (node) => {
     } else {
       entityConfig.url = node.getAttribute ? node.getAttribute('href') || node.href : node.href;
       entityConfig.title = node.innerHTML;
-      entityConfig.target = node.target;
+      entityConfig.targetOption = node.target;
       entityId = Entity.__create(
         'LINK',
         'MUTABLE',

src/library/getBlockData.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);
   }
@@ -59,6 +74,26 @@ function genFragment(
     return { chunk: getAtomicBlockChunk(entityId) };
   }
 
+  if (
+    nodeName === 'video' &&
+    node instanceof HTMLVideoElement
+  ) {
+    const entityConfig = {};
+    entityConfig.src = node.getAttribute ? node.getAttribute('src') || node.src : node.src;
+    entityConfig.alt = node.alt;
+    entityConfig.height = node.style.height;
+    entityConfig.width = node.style.width;
+    if (node.style.float) {
+      entityConfig.alignment = node.style.float;
+    }
+    const entityId = Entity.__create(
+      'VIDEO',
+      'MUTABLE',
+      entityConfig,
+    );
+    return { chunk: getAtomicBlockChunk(entityId) };
+  }
+
   if (
     nodeName === 'iframe' &&
     node instanceof HTMLIFrameElement
@@ -114,27 +149,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({});

src/library/getEntityId.js

@@ -35,7 +35,7 @@ export default function processInlineTag(
         style.add(`bgcolor-${backgroundColor.replace(/ /g, '')}`);
       }
       if (fontSize) {
-        style.add(`fontsize-${fontSize.substr(0, fontSize.length - 2)}`);
+        style.add(`fontsize-${fontSize.replace(/px$/g, '')}`);
       }
       if (fontFamily) {
         style.add(`fontfamily-${fontFamily}`);