Upgrading to draft-js 0.10.0 and to the new Entity API (#129)

docs/custom_entities.md

@@ -194,7 +194,8 @@ import {DraftJS} from "draft-js";
 
 
 export default ({entityKey, children}) => {
-  const {url} = DraftJS.Entity.get(this.props.entityKey).getData();
+  const contentState = this.props.contentState;
+  const {url} = contentState.getEntity(this.props.entityKey).getData();
   return (
     <a className="editor__link" href={url} title={url}>
       {children}

package.json

@@ -6,7 +6,7 @@
   "dependencies": {
     "backstage-modal": "^0.2.3",
     "classnames": "^2.2.5",
-    "draft-js": "0.9.1",
+    "draft-js": "0.10.0",
     "immutable": "^3.8.1",
     "setimmediate": "^1.0.4"
   },

src/components/Link.js

@@ -5,12 +5,12 @@
  */
 
 import React, {Component} from "react";
-import {Entity} from "draft-js";
 
 
 export default class Link extends Component {
   render() {
-    const {url} = Entity.get(this.props.entityKey).getData();
+    const contentState = this.props.contentState;
+    const {url} = contentState.getEntity(this.props.entityKey).getData();
     return (
       <a className="editor__link" href={url} title={url}>
         {this.props.children}

src/components/Toolbar.js

@@ -5,7 +5,7 @@
  */
 
 import React, {Component} from "react";
-import {EditorState, RichUtils, Entity} from "draft-js";
+import {EditorState, RichUtils} from "draft-js";
 import classNames from "classnames";
 import ToolbarItem from "./ToolbarItem";
 import {getSelectionCoords} from "../utils";
@@ -141,9 +141,10 @@ export default class Toolbar extends Component {
   }
 
   getCurrentEntity() {
+    const contentState = this.props.editorState.getCurrentContent();
     const entityKey = this.getCurrentEntityKey();
     if(entityKey) {
-      return Entity.get(entityKey);
+      return contentState.getEntity(entityKey);
     }
     return null;
   }
@@ -158,7 +159,9 @@ export default class Toolbar extends Component {
 
   setEntity(entityType, data, mutability = "MUTABLE") {
     const {editorState} = this.props;
-    const entityKey = Entity.create(entityType, mutability, data);
+    const contentState = editorState.getCurrentContent();
+    const contentStateWithEntity = contentState.createEntity(entityType, mutability, data);
+    const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
     const newState = RichUtils.toggleLink(
       editorState,
       editorState.getSelection(),

src/utils.js

@@ -6,7 +6,6 @@
  */
 
 import {
-  Entity,
   convertToRaw,
   convertFromRaw,
   EditorState,
@@ -65,13 +64,13 @@ export function getSelectionCoords(editor, toolbar) {
 }
 
 export function createTypeStrategy(type) {
-  return (contentBlock, callback) => {
+  return (contentBlock, callback, contentState) => {
     contentBlock.findEntityRanges(
       (character) => {
         const entityKey = character.getEntity();
         return (
           entityKey !== null &&
-          Entity.get(entityKey).getType() === type
+          contentState.getEntity(entityKey).getType() === type
         );
       },
       callback

tests/components/toolbar_test.js

@@ -5,7 +5,7 @@
  */
 
 import React, {Component} from "react";
-import {EditorState, SelectionState, Entity} from "draft-js";
+import {EditorState, SelectionState} from "draft-js";
 import chai from "chai";
 import {mount} from "enzyme";
 
@@ -238,7 +238,7 @@ describe("Toolbar Component", function() {
         const contentState = this.wrapper.state("editorState").getCurrentContent();
         const blockWithLinkAtBeginning = contentState.getBlockForKey("ag6qs");
         const linkKey = blockWithLinkAtBeginning.getEntityAt(0);
-        const linkInstance = Entity.get(linkKey);
+        const linkInstance = contentState.getEntity(linkKey);
         const {url} = linkInstance.getData();
 
         expect(url).to.be.equal("http://www.globo.com");