Update draft-js to v0.10.0 (#18)

Author: sugarshin

package.json

@@ -61,7 +61,7 @@
     "css-loader": "^0.26.0",
     "css-modules-require-hook": "^4.0.5",
     "dirty-chai": "^1.2.2",
-    "draft-js-plugins-editor": "2.0.0-beta7",
+    "draft-js-plugins-editor": "2.0.0-beta10",
     "draft-js-prism": "ngs/draft-js-prism#6edb31c3805dd1de3fb897cc27fced6bac1bafbb",
     "enzyme": "^2.6.0",
     "eslint": "^3.11.1",
@@ -83,8 +83,10 @@
     "nyc": "^10.0.0",
     "postcss-loader": "^1.1.1",
     "prismjs": "^1.6.0",
+    "react": "^15.4.1",
     "react-addons-pure-render-mixin": "^15.4.1",
     "react-addons-test-utils": "^15.4.1",
+    "react-dom": "^15.4.1",
     "react-github-fork-ribbon": "^0.4.4",
     "rimraf": "^2.5.4",
     "sinon": "^1.17.6",
@@ -97,17 +99,17 @@
     "webpack-hot-middleware": "^2.13.2"
   },
   "peerDependencies": {
-    "draft-js-plugins-editor": "2.0.0-beta7"
+    "draft-js-plugins-editor": "2.0.0-beta10",
+    "react": "^15.0.0",
+    "react-dom": "^15.0.0"
   },
   "contributors": [
     "Atsushi Nagase <a@ngs.io>"
   ],
   "dependencies": {
     "decorate-component-with-props": "^1.0.2",
-    "draft-js": "^0.9.1",
-    "draft-js-checkable-list-item": "^2.0.2",
-    "immutable": "^3.8.1",
-    "react": "^15.4.1",
-    "react-dom": "^15.4.1"
+    "draft-js": "~0.10.0",
+    "draft-js-checkable-list-item": "^2.0.4",
+    "immutable": "~3.7.4"
   }
 }

src/components/Image/__test__/Image-test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Entity } from 'draft-js';
+import { ContentState } from 'draft-js';
 import { shallow } from 'enzyme';
 import chai, { expect } from 'chai';
 import chaiEnzyme from 'chai-enzyme';
@@ -10,13 +10,14 @@ chai.use(chaiEnzyme());
 
 describe('<Image />', () => {
   it('renders anchor tag', () => {
-    const entityKey = Entity.create('IMG', 'MUTABLE', {
+    const contentState = ContentState.createFromText('').createEntity('IMG', 'MUTABLE', {
       alt: 'alt',
       src: 'http://cultofthepartyparrot.com/parrots/aussieparrot.gif',
       title: 'parrot'
     });
+    const entityKey = contentState.getLastCreatedEntityKey();
     expect(
-      shallow(<Image entityKey={entityKey}>&nbsp;</Image>).html()
+      shallow(<Image entityKey={entityKey} contentState={contentState}>&nbsp;</Image>).html()
     ).to.equal(
       '<span> <img src="http://cultofthepartyparrot.com/parrots/aussieparrot.gif" alt="alt" title="parrot"/></span>'
     );

src/components/Image/index.js

@@ -1,8 +1,7 @@
 import React from 'react';
-import { Entity } from 'draft-js';
 
-const Image = ({ entityKey, children }) => {
-  const { src, alt, title } = Entity.get(entityKey).getData();
+const Image = ({ entityKey, children, contentState }) => {
+  const { src, alt, title } = contentState.getEntity(entityKey).getData();
   return (
     <span>
       {children}

src/components/Link/__test__/Link-test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Entity } from 'draft-js';
+import { ContentState } from 'draft-js';
 import { shallow } from 'enzyme';
 import chai, { expect } from 'chai';
 import chaiEnzyme from 'chai-enzyme';
@@ -10,12 +10,13 @@ chai.use(chaiEnzyme());
 
 describe('<Link />', () => {
   it('renders anchor tag', () => {
-    const entityKey = Entity.create('LINK', 'MUTABLE', {
+    const contentState = ContentState.createFromText('').createEntity('LINK', 'MUTABLE', {
       href: 'http://cultofthepartyparrot.com/',
       title: 'parrot'
     });
+    const entityKey = contentState.getLastCreatedEntityKey();
     expect(
-      shallow(<Link entityKey={entityKey}><b>Hello</b></Link>).html()
+      shallow(<Link entityKey={entityKey} contentState={contentState}><b>Hello</b></Link>).html()
     ).to.equal(
       '<a href="http://cultofthepartyparrot.com/" title="parrot"><b>Hello</b></a>'
     );

src/components/Link/index.js

@@ -1,8 +1,7 @@
 import React from 'react';
-import { Entity } from 'draft-js';
 
 const Link = (props) => {
-  const { href, title } = Entity.get(props.entityKey).getData();
+  const { href, title } = props.contentState.getEntity(props.entityKey).getData();
   return (
     <a href={href} title={title}>
       {props.children}

src/decorators/image/__test__/imageStrategy-test.js

@@ -42,7 +42,7 @@ describe('imageStrategy', () => {
     const strategy = createImageStrategy();
     const cb = sinon.spy();
     expect(block).to.be.an('object');
-    strategy(block, cb);
+    strategy(block, cb, contentState);
     expect(cb).to.have.been.calledWith(0, 1);
   });
 });

src/decorators/image/imageStrategy.js

@@ -1,12 +1,10 @@
-import { Entity } from 'draft-js';
-
 const createImageStrategy = () => {
-  const findImageEntities = (contentBlock, callback) => {
+  const findImageEntities = (contentBlock, callback, contentState) => {
     contentBlock.findEntityRanges((character) => {
       const entityKey = character.getEntity();
       return (
         entityKey !== null &&
-        Entity.get(entityKey).getType() === 'IMG'
+        contentState.getEntity(entityKey).getType() === 'IMG'
       );
     }, callback);
   };

src/decorators/link/__test__/linkStrategy-test.js

@@ -41,7 +41,7 @@ describe('linkStrategy', () => {
     const strategy = createLinkStrategy();
     const cb = sinon.spy();
     expect(block).to.be.an('object');
-    strategy(block, cb);
+    strategy(block, cb, contentState);
     expect(cb).to.have.been.calledWith(7, 12);
   });
 });

src/decorators/link/linkStrategy.js

@@ -1,12 +1,10 @@
-import { Entity } from 'draft-js';
-
 const createLinkStrategy = () => {
-  const findLinkEntities = (contentBlock, callback) => {
+  const findLinkEntities = (contentBlock, callback, contentState) => {
     contentBlock.findEntityRanges((character) => {
       const entityKey = character.getEntity();
       return (
         entityKey !== null &&
-        Entity.get(entityKey).getType() === 'LINK'
+        contentState.getEntity(entityKey).getType() === 'LINK'
       );
     }, callback);
   };

src/modifiers/insertImage.js

@@ -1,4 +1,4 @@
-import { EditorState, RichUtils, SelectionState, Entity, Modifier } from 'draft-js';
+import { EditorState, RichUtils, SelectionState, Modifier } from 'draft-js';
 
 const insertImage = (editorState, matchArr) => {
   const currentContent = editorState.getCurrentContent();
@@ -16,13 +16,14 @@ const insertImage = (editorState, matchArr) => {
     anchorOffset: index,
     focusOffset
   });
-  const entityKey = Entity.create(
+  const nextContent = currentContent.createEntity(
     'IMG',
     'IMMUTABLE',
     { alt, src, title }
   );
+  const entityKey = nextContent.getLastCreatedEntityKey();
   let newContentState = Modifier.replaceText(
-    currentContent,
+    nextContent,
     wordSelection,
     '\u200B',
     null,