diff --git a/docs/custom_entities.md b/docs/custom_entities.md index 25211dc5..95fc5986 100644 --- a/docs/custom_entities.md +++ b/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 ( {children} diff --git a/package.json b/package.json index 654a1c66..07cfa8fe 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,7 @@ "main": "lib/Megadraft.js", "dependencies": { "classnames": "^2.2.5", - "draft-js": "0.9.1", + "draft-js": "0.10.0", "immutable": "^3.8.1", "setimmediate": "^1.0.4" }, diff --git a/src/components/Link.js b/src/components/Link.js index d85028a6..26c0eed1 100644 --- a/src/components/Link.js +++ b/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 ( {this.props.children} diff --git a/src/components/Toolbar.js b/src/components/Toolbar.js index 2d6e910c..487c56e7 100644 --- a/src/components/Toolbar.js +++ b/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(), diff --git a/src/utils.js b/src/utils.js index bb391aa6..a51c2ca4 100644 --- a/src/utils.js +++ b/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 diff --git a/tests/components/toolbar_test.js b/tests/components/toolbar_test.js index b7a41150..e0f14902 100644 --- a/tests/components/toolbar_test.js +++ b/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");