draft-js-plugins · whitejava · Oct 8, 2016 · Oct 8, 2016 · Oct 10, 2016 · Oct 11, 2016
diff --git a/draft-js-image-plugin/README.md b/draft-js-image-plugin/README.md
@@ -9,3 +9,20 @@ import createImagePlugin from 'draft-js-image-plugin';
 
 const imagePlugin = createImagePlugin();
 ```
+
+Then you can paste image after you make a screen capture or something else.
+
+By default, the image data is stored as `dataUrl` directly into the editorState.
+As the image data is large, this may cause performance issues.
+So we strongly recommand you to implement your own uploading method by adding a config item.
+
+```
+const imagePlugin = createImagePlugin({upload: function(dataUrl, callback){
+  // Upload the data url and call the callback!
+  // eg. dataUrl = 'data:image/png;base64,iVBORE6+ogD...'
+  $.post('/upload',{data_url:dataUrl},function(result)){
+    // the result contains a new url, eg. result.url = '/image/1.png'
+    callback(result.url);
+  }
+}})
+```
diff --git a/draft-js-image-plugin/src/index.js b/draft-js-image-plugin/src/index.js
@@ -1,36 +1,85 @@
-import { Entity } from 'draft-js';
+import { Entity, AtomicBlockUtils } from 'draft-js';
 import decorateComponentWithProps from 'decorate-component-with-props';
 import addImage from './modifiers/addImage';
 import ImageComponent from './Image';
 import imageStyles from './imageStyles.css';
 
+const ACCEPTED_MIMES = ['image/png', 'image/jpeg', 'image/gif'];
+
 const defaultTheme = {
-  image: imageStyles.image,
+  image: imageStyles.image
 };
 
-const imagePlugin = (config = {}) => {
+const imagePlugin = function(config) {
+  if(!config)config = {};
   const theme = config.theme ? config.theme : defaultTheme;
+  const upload = config.upload || function (x, callback) {
+    callback(x);
+  };
   let Image = config.imageComponent || ImageComponent;
   if (config.decorator) {
     Image = config.decorator(Image);
   }
   const ThemedImage = decorateComponentWithProps(Image, { theme });
   return {
-    blockRendererFn: (block) => {
+    blockRendererFn(block) {
       if (block.getType() === 'atomic') {
         const entity = Entity.get(block.getEntityAt(0));
         const type = entity.getType();
-        if (type === 'image') {
+        console.log('entity type',type);
+        if (type === 'block-image') {
           return {
             component: ThemedImage,
-            editable: false,
+            editable: false
           };
         }
       }
 
       return null;
     },
     addImage,
+    handlePastedFiles(e, editor) {
+      // Get editor state
+      let editorState = editor.getEditorState();
+
+      // No image found
+      if (e.length === 0) {
+        return;
+      }
+
+      // Only support one image
+      if (e.length !== 1) {
+        return;
+      }
+
+      // get image
+      const image = e[0];
+
+      // Only image is accepted
+      if (ACCEPTED_MIMES.indexOf(image.type) < 0) {
+        return;
+      }
+
+      // get image blob data as data url
+      const reader = new FileReader();
+      reader.onload = function (event) {
+        // upload data url
+        const url = event.target.result;
+        upload(url, (url2) => {
+          // insert image
+          const entityKey = Entity.create('block-image', 'IMMUTABLE',
+            {
+              src: url2, progress: -1
+            }
+          );
+          editorState = AtomicBlockUtils.insertAtomicBlock(editorState, entityKey, ' ');
+
+          // Set editor state
+          editor.setEditorState(editorState);
+        });
+      };
+      reader.readAsDataURL(image);
+    }
   };
 };