adding support for mention tag

Author: jpuri

src/index.js

@@ -58,7 +58,22 @@ class Playground extends Component {
           />
         </div>
         <div style={{ height: 200 }}>
-          <Editor editorState={this.state.outputEditorState} />
+          <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>
     );

src/library/getBlockTypeForTag.js

@@ -34,7 +34,7 @@ const blockRenderMap = new Map({
     element: 'figure',
   },
   unstyled: {
-    element: 'div',
+    element: 'p',
   },
 });
 

src/library/getEntityId.js

@@ -6,13 +6,24 @@ const getEntityId = (node) => {
     node instanceof HTMLAnchorElement
   ) {
     const entityConfig = {};
-    entityConfig.url = node.href;
-    entityConfig.title = node.innerHTML;
-    entityId = Entity.create(
-      'LINK',
-      'MUTABLE',
-      entityConfig,
-    );
+    if (node.dataset.mention !== undefined) {
+      entityConfig.url = node.href;
+      entityConfig.text = node.innerHTML;
+      entityConfig.value = node.dataset.value;
+      entityId = Entity.create(
+        'MENTION',
+        'IMMUTABLE',
+        entityConfig,
+      );
+    } else {
+      entityConfig.url = node.href;
+      entityConfig.title = node.innerHTML;
+      entityId = Entity.create(
+        'LINK',
+        'MUTABLE',
+        entityConfig,
+      );
+    }
   }
   return entityId;
 }