Major release 1.0.0

Author: albertomr86

README.md

@@ -14,7 +14,7 @@ npm install @jimmycode/draft-js-unsplash-plugin
 ## Usage
 
 ```js
-import createUnsplashPlugin from 'draft-js-unsplash-plugin';
+import createUnsplashPlugin from '@jimmycode/draft-js-unsplash-plugin';
 const unsplashPlugin = createUnsplashPlugin({
   options: {
     accessKey: 'my-access-key'
@@ -27,7 +27,7 @@ const { UnsplashButton } = unsplashPlugin;
 
 | Param             | Default                             | Description                                                       |
 |-------------------|-------------------------------------|-------------------------------------------------------------------|
-| theme             | Default styles                      | draft-js-unsplash-plugin/lib/plugin.css                           |
+| theme             | Default styles                      | @jimmycode/draft-js-unsplash-plugin/lib/plugin.css                |
 | options           | Default behavior                    | List of options.                                                  |
 | explorerType      | 'draft-js-unsplash-plugin-explorer' | Type of entity created when inserting the explorer block.         |
 | unsplashType      | 'unsplash'                          | Type of entity created when inserting the image.                  |
@@ -46,7 +46,7 @@ const { UnsplashButton } = unsplashPlugin;
 | getMetadata | -                                          | Function to determine the metadata inserted along with the image selected. It MUST return an object with at least the following keys: - src - width - height - user |
 
 ## Theming
-The plugin ships with a default styling available at this location in the installed package: `node_modules/draft-js-unsplash-plugin/lib/plugin.css`
+The plugin ships with a default styling available at this location in the installed package: `node_modules/@jimmycode/draft-js-unsplash-plugin/lib/plugin.css`
 
 *Webpack Usage*
 1.  Install Webpack loaders: `npm i style-loader css-loader --save-dev`
@@ -71,7 +71,7 @@ module.exports = {
 
 
 ```js
-import 'draft-js-unsplash-plugin/lib/plugin.css';
+import '@jimmycode/draft-js-unsplash-plugin/lib/plugin.css';
 ```
 
 ## Example
@@ -84,10 +84,10 @@ import Editor from 'draft-js-plugins-editor';
 import { EditorState } from 'draft-js';
 import createSideToolbarPlugin from 'draft-js-side-toolbar-plugin';
 import BlockTypeSelect from 'draft-js-side-toolbar-plugin/lib/components/BlockTypeSelect';
-import createUnsplashPlugin from 'draft-js-unsplash-plugin';
+import createUnsplashPlugin from '@jimmycode/draft-js-unsplash-plugin';
 
 import 'draft-js-side-toolbar-plugin/lib/plugin.css';
-import 'draft-js-unsplash-plugin/lib/plugin.css';
+import '@jimmycode/draft-js-unsplash-plugin/lib/plugin.css';
 
 const unsplashPlugin = createUnsplashPlugin({
   unsplashPlugin: {
@@ -158,12 +158,12 @@ import BlockTypeSelect from 'draft-js-side-toolbar-plugin/lib/components/BlockTy
 import createResizeablePlugin from 'draft-js-resizeable-plugin';
 import createAlignmentPlugin from 'draft-js-alignment-plugin';
 import createFocusPlugin from 'draft-js-focus-plugin';
-import createUnsplashPlugin from 'draft-js-unsplash-plugin';
+import createUnsplashPlugin from '@jimmycode/draft-js-unsplash-plugin';
 
 import 'draft-js-side-toolbar-plugin/lib/plugin.css';
 import 'draft-js-alignment-plugin/lib/plugin.css';
 import 'draft-js-focus-plugin/lib/plugin.css';
-import 'draft-js-unsplash-plugin/lib/plugin.css';
+import '@jimmycode/draft-js-unsplash-plugin/lib/plugin.css';
 
 const focusPlugin = createFocusPlugin();
 const resizeablePlugin = createResizeablePlugin();
@@ -234,7 +234,6 @@ class MyEditor extends React.Component {
             <AlignmentTool />
           </div>
         </div>
-
       </div>
     );
   }

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@jimmycode/draft-js-unsplash-plugin",
-  "version": "0.5.3",
+  "version": "1.0.0",
   "description": "Add Unsplash images in your draft-js editor.",
   "keywords": [
     "draft-js",
@@ -74,6 +74,7 @@
     "webpack-node-externals": "^1.7.2"
   },
   "dependencies": {
+    "@jimmycode/draft-js-toolbox": "^1.0.0",
     "decorate-component-with-props": "^1.1.0",
     "prop-types": "^15.6.1",
     "react-photo-gallery": "^6.0.27",

package.json

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import unionClassNames from 'union-class-names';
+import { isCurrentBlockType } from '@jimmycode/draft-js-toolbox';
 
 /**
  * Icon by: https://www.iconfinder.com/icons/115759/camera_icon
@@ -19,19 +20,9 @@ class UnsplashButton extends React.PureComponent {
     event.preventDefault();
   }
 
-  blockTypeIsActive = () => {
-    const editorState = this.props.getEditorState();
-    const blockType = editorState
-      .getCurrentContent()
-      .getBlockForKey(editorState.getSelection().getStartKey())
-      .getType();
-
-    return blockType === this.props.entityType;
-  };
-
   render () {
-    const { theme } = this.props;
-    const className = this.blockTypeIsActive()
+    const { theme, getEditorState, entityType } = this.props;
+    const className = isCurrentBlockType(getEditorState(), entityType)
       ? unionClassNames(theme.button, theme.active)
       : theme.button;
 

src/components/Button/index.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import unionClassNames from 'union-class-names';
 
 export default class Unsplash extends React.PureComponent {
   render() {
@@ -23,7 +24,7 @@ export default class Unsplash extends React.PureComponent {
       ...elementProps
     } = otherProps;
 
-    const combinedClassName = `${theme.unsplash} ${className || ''}`;
+    const combinedClassName = unionClassNames(theme.unsplash, className);
     const { src, user, description, source } = contentState.getEntity(block.getEntityAt(0)).getData();
 
     const captionPrefix = description ? 

src/components/Unsplash/index.js

@@ -1,7 +1,7 @@
 import decorateComponentWithProps from 'decorate-component-with-props';
 import { getDefaultKeyBinding } from 'draft-js';
+import { isBlockWithEntityType, getCurrentBlock, addBlock, addAtomicBlock, removeBlock } from '@jimmycode/draft-js-toolbox';
 import { UnsplashButton, UnsplashExplorer, Unsplash } from './components';
-import { addBlock, addAtomicBlock, removeBlock, getCurrentBlock } from './modifiers';
 import { buildSearchPhotosUrl } from './utils';
 import defaultTheme from './plugin.css';
 
@@ -55,20 +55,11 @@ export default ({
 
   return {
     blockRendererFn: (block, { getEditorState, setEditorState, setReadOnly }) => {
-      if (block.getType () === ATOMIC) {
-        const contentState = getEditorState().getCurrentContent();
-        const entityKey = block.getEntityAt(0);
-
-        if (!entityKey) {
-          return null;
-        }
-
-        if (contentState.getEntity(entityKey).getType() === unsplashType) {
-          return {
-            component: ThemedUnsplash,
-            editable
-          };
-        }
+      if (isBlockWithEntityType(getEditorState(), block, unsplashType)) {
+        return {
+          component: ThemedUnsplash,
+          editable
+        };
       }
       else if (block.getType() === explorerType) {
         return {
@@ -96,8 +87,7 @@ export default ({
             // When select the picture.
             onSelect: (block, data) => {
               let editorState = removeBlock(getEditorState(), block.key);
-              editorState = addUnsplash(editorState, data);
-              setEditorState(editorState);
+              setEditorState(addUnsplash(editorState, data));
             }
           }
         };