integrate

qatoco · qatoco · commit caddad71ce7a · 2019-11-27T18:10:45.000+09:00
diff --git a/AddImageByURLButton.js b/AddImageByURLButton.js
@@ -3,7 +3,8 @@ import ReactDOM from 'react-dom';
 import insertDataBlock from 'draft-js-buttons-plugin/lib/utils/insertDataBlock.js';
 import axios from 'axios';
 
-const token = `?token=f9403fc5f537b4ab332d`;
+const token = '?token=token';
+const serverURL = 'http://localhost:25478';
 
 export default class imageButton extends Component {
   onClick = e => {
@@ -15,10 +16,10 @@ export default class imageButton extends Component {
     const file = e.target.files[0];
     const params = new FormData();
     params.append('file', file);
-    const response = await axios.post(`http://localhost:25478/upload${token}`, params, {
+    const response = await axios.post(`${serverURL}/upload${token}`, params, {
       headers: { 'Content-Type': `multipart/form-data; boundary=${params._boundary}` }
     });
-    const imageData = { src: `http://localhost:25478/${response.data.path}${token}`, type: 'placeholder' };
+    const imageData = { src: `${serverURL}/${response.data.path}${token}`, type: 'placeholder' };
     this.props.setEditorState(insertDataBlock(this.props.getEditorState(), imageData, 'image'));
   };
 
@@ -29,7 +30,7 @@ export default class imageButton extends Component {
   render() {
     const { theme } = this.props;
     return (
-      <div className={theme.buttonWrapper} onMouseDown={this.preventBubblingUp}>
+      <div className={theme.buttonWrapper} onMouseDown={this.preventBubblingUp} style={{ color: 'inherit' }}>
         <button className={theme.button} onClick={this.onClick} type="button">
           <svg width="24" height="24" viewBox="0 0 24 24">
             <path
@@ -41,7 +42,7 @@ export default class imageButton extends Component {
         </button>
 
         <div className={theme.addImage}>
-          <input type="file" ref="fileInput" onChange={::this.inputChange} style={{ display: 'none' }} />
+          <input type="file" ref="fileInput" onChange={this.inputChange} style={{ display: 'none' }} />
         </div>
       </div>
     );
diff --git a/README.md b/README.md
@@ -5,12 +5,12 @@
 yarn && yarn start
 
 # 2. run file upload/donwload sever locally
-docker run --rm -p 25478:25478 -v $HOME/tmp:/var/root mayth/simple-upload-server app -token f9403fc5f537b4ab332d /var/root
+docker run --rm -p 25478:25478 --name demoserver -v $HOME/tmp:/var/root mayth/simple-upload-server app -token token /var/root
 # > time="2019-11-26T16:25:31Z" level=info msg="starting up simple-upload-server"
 # > time="2019-11-26T16:25:31Z" level=info msg="start listening" ip=0.0.0.0 port=25478 root=/var/root token=f9403fc5f537b4ab332d upload_limit=5242880
 
 # 3. upload test
-curl --form file=@`pwd`/demo1.gif 'http://localhost:25478/upload?token=f9403fc5f537b4ab332d'
+curl --form file=@`pwd`/demo1.gif 'http://localhost:25478/upload?token=token'
 # > {"ok":true,"path":"/files/demo1.gif"}
 
 # 4. quit google chrome and re-run with cors-disabled
diff --git a/index.html b/index.html
@@ -12,6 +12,9 @@
         position: relative;
         z-index: 1;
       }
+      [style='color: inherit;'] button {
+        background-color: red;
+      }
     </style>
   </head>
   <body>
diff --git a/index.js b/index.js
@@ -4,9 +4,9 @@ import { EditorState, ContentState } from 'draft-js';
 import Editor, { composeDecorators } from 'draft-js-plugins-editor';
 import createImagePlugin from 'draft-js-image-plugin';
 import createResizeablePlugin from 'draft-js-resizeable-plugin';
-import { BlockquoteButton } from 'draft-js-buttons';
 import createSideToolbarPlugin from 'draft-js-side-toolbar-plugin';
-import AddImageButton from './AddImageButton';
+import AddImageByURLButton from './AddImageByURLButton';
+import { AddImageButton } from 'draft-js-buttons-plugin';
 import 'draft-js-side-toolbar-plugin/lib/plugin.css';
 
 const resizeablePlugin = createResizeablePlugin();
@@ -28,8 +28,8 @@ class ExampleEditor extends Component {
         <SideToolbar>
           {externalProps => (
             <div>
+              <AddImageByURLButton {...externalProps} />
               <AddImageButton {...externalProps} />
-              <BlockquoteButton {...externalProps} />
             </div>
           )}
         </SideToolbar>
