adding support for embedded links

Author: jpuri

src/index.js

@@ -17,7 +17,7 @@ class Playground extends Component {
     const rawContent = convertToRaw(inputEditorState.getCurrentContent());
     const html = draftToHtml(rawContent);
     const contentBlock = htmlToDraft(html);
-    // console.log('1', htmlToDraft(html) && htmlToDraft(html).contentBlocks)
+    console.log('1', contentBlock)
     // console.log('2', convertFromHTML(html) && convertFromHTML(html))
     if (contentBlock) {
       const contentState = ContentState.createFromBlockArray(contentBlock.contentBlocks);

src/library/chunkBuilder.js

@@ -71,6 +71,18 @@ const getBlockDividerChunk = (blockType: string, depth: number, data: Object): O
   };
 };
 
+const getAtomicBlockChunk = (entityId: number): Object => {
+  return {
+    text: '\r ',
+    inlines: [new OrderedSet()],
+    entities: [entityId],
+    blocks: [{
+      type: 'atomic',
+      depth: 0,
+    }],
+  };
+};
+
 const joinChunks = (A: Object, B: Object): Object => {
   return {
     text: A.text + B.text,
@@ -87,5 +99,6 @@ module.exports = {
   getEmptyChunk,
   getBlockDividerChunk,
   getFirstBlockChunk,
+  getAtomicBlockChunk,
   joinChunks,
 };

src/library/getAtomicEntities.js

@@ -1,14 +1,15 @@
 /* @flow */
 
-import { CharacterMetadata, ContentBlock, genKey } from 'draft-js';
-import { List, Map, OrderedSet } from 'immutable';
+import { CharacterMetadata, ContentBlock, genKey, Entity } from 'draft-js';
+import { List, OrderedMap, OrderedSet } from 'immutable';
 import getSafeBodyFromHTML from './getSafeBodyFromHTML';
 import {
   createTextChunk,
   getSoftNewlineChunk,
   getEmptyChunk,
   getBlockDividerChunk,
   getFirstBlockChunk,
+  getAtomicBlockChunk,
   joinChunks,
 } from './chunkBuilder';
 import getBlockTypeForTag from './getBlockTypeForTag';
@@ -38,6 +39,39 @@ function genFragment(
     return { chunk: getSoftNewlineChunk() };
   }
 
+  if (
+    nodeName === 'img' &&
+    node instanceof HTMLImageElement
+  ) {
+    const entityConfig = {};
+    entityConfig.src = node.src;
+    entityConfig.height = node.style.height;
+    entityConfig.width = node.style.width;
+    const entityId = Entity.create(
+      'IMAGE',
+      'MUTABLE',
+      entityConfig,
+    );
+    return { chunk: getAtomicBlockChunk(entityId) };
+  }
+
+  if (
+    nodeName === 'iframe' &&
+    node instanceof HTMLIFrameElement
+  ) {
+    const entityConfig = {};
+    entityConfig.src = node.src;
+    entityConfig.height = node.height;
+    entityConfig.width = node.width;
+    console.log('entityConfig', entityConfig)
+    const entityId = Entity.create(
+      'EMBEDDED_LINK',
+      'MUTABLE',
+      entityConfig,
+    );
+    return { chunk: getAtomicBlockChunk(entityId) };
+  }
+
   const blockType = getBlockTypeForTag(nodeName, lastList);
 
   let chunk;
@@ -107,6 +141,10 @@ export default function htmlToDraft(html: string): Object {
   const chunkData = getChunkForHTML(html);
   if (chunkData) {
     const { chunk } = chunkData;
+    let entityMap = new OrderedMap({});
+    // chunk.entities && chunk.entities.forEach(entity => {
+    //   entityMap = entityMap.set(entity, Entity.get(entity));
+    // });
     let start = 0;
     return {
       contentBlocks: chunk.text.split('\r')
@@ -135,7 +173,7 @@ export default function htmlToDraft(html: string): Object {
           });
         },
       ),
-      entityMap: new Map({}),
+      entityMap,
     };
     return null;
   }