Merge release/v3.0.1 into master

Author: synbot

CHANGELOG.md

@@ -1,5 +1,10 @@
 CHANGELOG
 =========
+## v3.0.2
+* Fix deprecation warnings
+* Fix image and video blocks
+* Fix onChange not firing when custom blocks are added
+
 ## v3.0.0
 * Update for React v15.5 deprecation warnings: PropTypes is now a separate `prop-types` package
 * Added prettier formatting

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synapsestudios/draftjs-editor",
-  "version": "3.0.0",
+  "version": "3.0.2",
   "description": "A customized WYSIWYG editor utilizing Facebook's Draft.js library",
   "repository": {
     "type": "git",
@@ -57,6 +57,8 @@
     "husky": "^0.13.3",
     "lint-staged": "^3.4.1",
     "prettier": "^1.3.1",
+    "react": "^15.3.0",
+    "react-dom": "^15.3.0",
     "stylus": "^0.54.5"
   },
   "peerDependencies": {

src/DraftJSEditor.jsx

@@ -7,7 +7,6 @@ import {
   CompositeDecorator,
   Editor,
   EditorState,
-  Entity,
   RichUtils,
 } from 'draft-js';
 
@@ -62,7 +61,7 @@ class DraftJSEditor extends Component {
     this.confirmBlock = this._confirmBlock.bind(this);
     this.onBlockInputKeyDown = this._onBlockInputKeyDown.bind(this);
     this.onBlockDataChange = this._onBlockDataChange.bind(this);
-    this.renderBlock = this._renderBlock.bind(this);
+    this.renderBlock = this._renderBlock.bind(this, editorState.getCurrentContent());
   }
 
   componentWillReceiveProps(newProps) {
@@ -140,10 +139,11 @@ class DraftJSEditor extends Component {
 
   _confirmLink() {
     const { editorState, urlValue } = this.state;
-    const entityKey = Entity.create('LINK', 'MUTABLE', {
+    const contentState = editorState.getCurrentContent().createEntity('LINK', 'MUTABLE', {
       target: this.props.linkTarget,
       url: urlValue,
     });
+    const entityKey = contentState.getLastCreatedEntityKey();
 
     this.onChange(
       RichUtils.toggleLink(editorState, editorState.getSelection(), entityKey)
@@ -186,7 +186,7 @@ class DraftJSEditor extends Component {
     this.onChange(RichUtils.toggleLink(editorState, selection, null));
   }
 
-  _confirmBlock(e, data) {
+  _confirmBlock(data) {
     this.setState(
       {
         customBlockData: {},
@@ -199,6 +199,8 @@ class DraftJSEditor extends Component {
         showCustomBlockInput: false,
       },
       () => {
+        const contentState = this.state.editorState.getCurrentContent();
+        this.props.onChange(convertToRaw(contentState));
         setTimeout(() => this.focus(), 0);
       }
     );
@@ -215,7 +217,8 @@ class DraftJSEditor extends Component {
   }
 
   _insertCustomBlock(editorState, type, data) {
-    const entityKey = Entity.create(type, 'IMMUTABLE', data);
+    const contentState = editorState.getCurrentContent().createEntity(type, 'IMMUTABLE', data);
+    const entityKey = contentState.getLastCreatedEntityKey();
 
     // if you use an empty string for the block content here Draft will die
     return AtomicBlockUtils.insertAtomicBlock(editorState, entityKey, ' ');
@@ -240,9 +243,9 @@ class DraftJSEditor extends Component {
     }
   }
 
-  _renderBlock(block) {
+  _renderBlock(contentState, block) {
     if (block.getType() === 'atomic') {
-      const entityType = Entity.get(block.getEntityAt(0)).getType();
+      const entityType = contentState.getEntity(block.getEntityAt(0)).getType();
 
       return this.props.customBlocks[entityType]
         ? this.props.customBlocks[entityType].getBlockRenderer()

src/blocks/img.jsx

@@ -1,12 +1,11 @@
-import { Entity } from 'draft-js';
 import React from 'react';
 import Photo from '../icons/Photo';
 
 export default {
   getBlockRenderer() {
     return {
       component: props => {
-        const entity = Entity.get(props.block.getEntityAt(0)); // eslint-disable-line
+        const entity = props.contentState.getEntity(props.block.getEntityAt(0)); // eslint-disable-line
         const { src, alt } = entity.getData();
         return <img src={src} alt={alt} />;
       },
@@ -62,7 +61,7 @@ export default {
           onKeyDown={onKeyDown}
           placeholder="Alt text"
         />
-        <button onMouseDown={onSubmit}>
+        <button onClick={() => onSubmit(data)}>
           Confirm
         </button>
       </div>

src/blocks/video.jsx

@@ -64,12 +64,6 @@ export default {
       return transformed;
     };
 
-    const handleSubmit = e => {
-      onSubmit(e, {
-        src: transformSource(data.src),
-      });
-    };
-
     return (
       <div>
         <input
@@ -82,7 +76,9 @@ export default {
             this.refs.customBlockInput = c;
           }}
         />
-        <button onMouseDown={handleSubmit}>
+        <button
+          onClick={() => onSubmit({ src: transformSource(data.src) })}
+        >
           Confirm
         </button>
       </div>

src/decorators/link.jsx

@@ -1,16 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Entity } from 'draft-js';
 
-const linkStrategy = (contentBlock, callback) => {
+const linkStrategy = (contentBlock, callback, contentState) => {
   contentBlock.findEntityRanges(character => {
     const entityKey = character.getEntity();
-    return entityKey !== null && Entity.get(entityKey).getType() === 'LINK';
+    return entityKey !== null && contentState.getEntity(entityKey).getType() === 'LINK';
   }, callback);
 };
 
 const Link = props => {
-  const { target, url } = Entity.get(props.entityKey).getData();
+  const { target, url } = props.contentState.getEntity(props.entityKey).getData();
   return (
     <a href={url} target={target}>
       {props.children}

src/renderer.js

@@ -1,4 +1,4 @@
-import { convertFromRaw, Entity } from 'draft-js';
+import { convertFromRaw } from 'draft-js';
 import { stateToHTML } from 'draft-js-export-html';
 
 export default class Renderer {
@@ -9,11 +9,14 @@ export default class Renderer {
   }
 
   convertRawToHTML(rawContent) {
+    let entityMapIndex = 0;
     const options = {
       blockRenderers: {
         atomic: block => {
-          const data = Entity.get(block.getEntityAt(0)).getData();
-          const type = Entity.get(block.getEntityAt(0)).getType();
+          const entity = rawContent.entityMap[entityMapIndex];
+          const data = entity.data;
+          const type = entity.type;
+          entityMapIndex += 1;
 
           return this.customBlocks[type]
             ? this.customBlocks[type].renderHTML(data)

storybook/stories/SetStateExample.js

@@ -22,15 +22,15 @@ class SetStateExample extends Component {
 
   onChange = content => {
     action('onChange')(content); // Log to storybook's "action-logger"
-    this.setState(content);
+    this.setState({ content });
   };
 
   render() {
     return (
       <div>
         <h1>@synapsestudios/draftjs-editor</h1>
         <p className="p text-center">
-          A customized WYSIWYG editor utilizing Facebook's Draft.js library
+          {`A customized WYSIWYG editor utilizing Facebook's Draft.js library`}
         </p>
         <p className="p text-center">
           View this project on
@@ -39,7 +39,7 @@ class SetStateExample extends Component {
         </p>
         <DraftJSEditor
           content={this.state.content || null}
-          onChange={content => this.setState({ content })}
+          onChange={this.onChange}
           placeholder="Tell a story..."
           customBlocks={defaultBlocks}
           customBlockControls={Object.keys(defaultBlocks)}

yarn.lock

@@ -1477,6 +1477,14 @@ create-react-class@^15.5.2:
     fbjs "^0.8.9"
     object-assign "^4.1.1"
 
+create-react-class@^15.6.0:
+  version "15.6.0"
+  resolved "https://registry.yarnpkg.com/create-react-class/-/create-react-class-15.6.0.tgz#ab448497c26566e1e29413e883207d57cfe7bed4"
+  dependencies:
+    fbjs "^0.8.9"
+    loose-envify "^1.3.1"
+    object-assign "^4.1.1"
+
 cross-spawn@^5.0.1:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-5.1.0.tgz#e8bd0efee58fcff6f8f94510a0a554bbfa235449"
@@ -3919,6 +3927,13 @@ promise@^7.1.1:
   dependencies:
     asap "~2.0.3"
 
+prop-types@^15.5.10:
+  version "15.5.10"
+  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.5.10.tgz#2797dfc3126182e3a95e3dfbb2e893ddd7456154"
+  dependencies:
+    fbjs "^0.8.9"
+    loose-envify "^1.3.1"
+
 prop-types@^15.5.7, prop-types@^15.5.9:
   version "15.5.9"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.5.9.tgz#d478eef0e761396942f70c78e772f76e8be747c9"
@@ -4008,6 +4023,15 @@ react-docgen@^2.12.1:
     node-dir "^0.1.10"
     recast "^0.11.5"
 
+react-dom@^15.3.0:
+  version "15.6.1"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-15.6.1.tgz#2cb0ed4191038e53c209eb3a79a23e2a4cf99470"
+  dependencies:
+    fbjs "^0.8.9"
+    loose-envify "^1.1.0"
+    object-assign "^4.1.0"
+    prop-types "^15.5.10"
+
 react-fuzzy@^0.3.3:
   version "0.3.3"
   resolved "https://registry.yarnpkg.com/react-fuzzy/-/react-fuzzy-0.3.3.tgz#9f6775393cd03bbd3c977651771abe16c8b29a81"
@@ -4066,6 +4090,16 @@ react-stubber@^1.0.0:
   dependencies:
     babel-runtime "^6.5.0"
 
+react@^15.3.0:
+  version "15.6.1"
+  resolved "https://registry.yarnpkg.com/react/-/react-15.6.1.tgz#baa8434ec6780bde997cdc380b79cd33b96393df"
+  dependencies:
+    create-react-class "^15.6.0"
+    fbjs "^0.8.9"
+    loose-envify "^1.1.0"
+    object-assign "^4.1.0"
+    prop-types "^15.5.10"
+
 "readable-stream@^2.0.0 || ^1.1.13", readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.0.5, readable-stream@^2.1.4, readable-stream@^2.2.2, readable-stream@^2.2.6:
   version "2.2.9"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.2.9.tgz#cf78ec6f4a6d1eb43d26488cac97f042e74b7fc8"