adding support for links

Author: jpuri

src/index.js

@@ -17,8 +17,8 @@ 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('2', convertFromHTML(html) && convertFromHTML(html))
+    // console.log('1', htmlToDraft(html) && htmlToDraft(html).contentBlocks)
+    // console.log('2', convertFromHTML(html) && convertFromHTML(html))
     if (contentBlock) {
       const contentState = ContentState.createFromBlockArray(contentBlock.contentBlocks);
       const outputEditorState = EditorState.createWithContent(contentState);
@@ -33,7 +33,22 @@ class Playground extends Component {
     return (
       <div>
         <div style={{ height: 200 }}>
-          <Editor onEditorStateChange={this.onInputEditorChange} />
+          <Editor
+            onEditorStateChange={this.onInputEditorChange}
+            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 style={{ height: 200 }}>
           <textarea

src/library/chunkBuilder.js

@@ -3,29 +3,25 @@ import { OrderedSet } from 'immutable';
 const SPACE = ' ';
 const MAX_DEPTH = 4;
 
-const getWhitespaceChunk = (inEntity: ?string): Object => {
-  const entities = new Array(1);
-  if (inEntity) {
-    entities[0] = inEntity;
-  }
+const getWhitespaceChunk = (entityId: ?string): Object => {
   return {
     text: SPACE,
     inlines: [new OrderedSet()],
-    entities,
+    entities: [entityId],
     blocks: [],
   };
 };
 
-const createTextChunk = (node: Object, inlineStyle: OrderedSet): Object => {
+const createTextChunk = (node: Object, inlineStyle: OrderedSet, entityId: number): Object => {
   const text = node.textContent;
   if (text.trim() === '') {
-    return { chunk: getWhitespaceChunk() };
+    return { chunk: getWhitespaceChunk(entityId) };
   }
   return {
     chunk: {
       text,
       inlines: Array(text.length).fill(inlineStyle),
-      entities: Array(text.length).fill(null),
+      entities: Array(text.length).fill(entityId),
       blocks: [],
     },
   };

src/library/getEntityId.js

@@ -0,0 +1,20 @@
+import { Entity } from 'draft-js';
+
+const getEntityId = (node) => {
+  let entityId = undefined;
+  if (
+    node instanceof HTMLAnchorElement
+  ) {
+    const entityConfig = {};
+    entityConfig.url = node.href;
+    entityConfig.title = node.innerHTML;
+    entityId = Entity.create(
+      'LINK',
+      'MUTABLE',
+      entityConfig,
+    );
+  }
+  return entityId;
+}
+
+module.exports = getEntityId;

src/library/getSafeBodyFromHTML.js

@@ -1,7 +1,6 @@
-function getSafeBodyFromHTML(html: string): ?Element {
+const getSafeBodyFromHTML = (html: string): ?Element => {
   var doc;
   var root = null;
-  // Provides a safe context
   if (
     document.implementation &&
     document.implementation.createHTMLDocument

src/library/index.js

@@ -14,6 +14,7 @@ import {
 import getBlockTypeForTag from './getBlockTypeForTag';
 import processInlineTag from './processInlineTag';
 import getBlockData from './getBlockData';
+import getEntityId from './getEntityId';
 
 const SPACE = ' ';
 const REGEX_NBSP = new RegExp(' ', 'g');
@@ -24,12 +25,13 @@ function genFragment(
   node: Object,
   inlineStyle: OrderedSet,
   depth: number,
-  lastList: string
+  lastList: string,
+  inEntity: number
 ): Object {
   const nodeName = node.nodeName.toLowerCase();
 
   if (nodeName === '#text' && node.textContent !== '\n') {
-    return createTextChunk(node, inlineStyle);
+    return createTextChunk(node, inlineStyle, inEntity);
   }
 
   if (nodeName === 'br') {
@@ -74,7 +76,8 @@ function genFragment(
 
   let child = node.firstChild;
   while (child) {
-    const { chunk: generatedChunk } = genFragment(child, inlineStyle, depth, lastList);
+    const entityId = getEntityId(child);
+    const { chunk: generatedChunk } = genFragment(child, inlineStyle, depth, lastList, (entityId || inEntity));
     if (nodeName.toLowerCase() === 'li' &&
       (child.nodeName.toLowerCase() === 'ul' || child.nodeName.toLowerCase() === 'ol')
     ) {
@@ -96,7 +99,7 @@ function getChunkForHTML(html: string): Object {
     return null;
   }
   firstBlock = true;
-  const { chunk } = genFragment(safeBody, new OrderedSet(), -1, '');
+  const { chunk } = genFragment(safeBody, new OrderedSet(), -1, '', undefined);
   return { chunk };
 }