lots of react fixes, also drag-n-drop images!

Author: jaredly

plugins/collapse/node.js

@@ -36,7 +36,7 @@ module.exports = {
       return <div className={cx({
         'm_Collapser': true,
         'm_Collapser-collapsed': node.collapsed
-      })} onClick={actions.toggleCollapse.bind(actions, node.id)}/>
+      })} key="collapser" onClick={actions.toggleCollapse.bind(actions, node.id)}/>
     }
   },
 }

plugins/image/index.js

@@ -2,6 +2,7 @@
 var React = require('react/addons')
   , cx = React.addons.classSet
   , PT = React.PropTypes
+  , classnames = require('classnames')
   , DefaultEditor = require('../../views/body/default-editor')
   , DefaultRenderer = require('../../views/body/default-renderer')
   , Uploader = require('./uploader')
@@ -13,11 +14,56 @@ var ImageBase = React.createClass({
     onUpload: PT.func,
     onClick: PT.func,
   },
+
+  getInitialState() {
+    return {dragging: false}
+  },
+
+  _dragOver(e) {
+    e.preventDefault()
+    if (!this.state.dragging) {
+      this.setState({dragging: true})
+    }
+  },
+
+  _dragEnd(e) {
+    e.preventDefault()
+    this.setState({dragging: false})
+  },
+
+  _drop(e) {
+    e.preventDefault()
+    this.setState({dragging: false})
+    let files = e.dataTransfer.files
+    if (!files.length) return
+    const file = files[0]
+    if (!file.type.match(/^image\//)) {
+      return console.warn('not an image file')
+    }
+    getSrc(file, this.props.onUpload)
+  },
+
   render: function () {
     if (!this.props.src) {
-      return <Uploader onUpload={this.props.onUpload}/>
+      return <div
+          className={classnames('ImageBase', this.state.dragging && 'ImageBase-dragging')}
+          onClick={this.props.onClick} 
+          onDragEnter={this._dragOver}
+          onDragOver={this._dragOver}
+          onDragLeave={this._dragEnd}
+          onDragEnd={this._dragEnd}
+          onDrop={this._drop}>
+        <Uploader onUpload={this.props.onUpload}/>
+      </div>
     }
-    return <div onClick={this.props.onClick} className='ImageBase'>
+    return <div
+        className={classnames('ImageBase', this.state.dragging && 'ImageBase-dragging')}
+        onClick={this.props.onClick} 
+        onDragEnter={this._dragOver}
+        onDragOver={this._dragOver}
+        onDragLeave={this._dragEnd}
+        onDragEnd={this._dragEnd}
+        onDrop={this._drop}>
       <img src={this.props.src} title={this.props.title}/>
       <div onClick={e => {
         e.stopPropagation()

plugins/image/index.less

@@ -31,6 +31,11 @@
 .ImageBase {
   position: relative;
 
+  &-dragging {
+    opacity: .5;
+    outline: 10px dotted black;
+  }
+
   &_close {
     position: absolute;
     top: 0;

plugins/image/uploader.js

@@ -2,6 +2,7 @@
 var React = require('react/addons')
   , cx = React.addons.classSet
   , PT = React.PropTypes
+  , classnames = require('classnames')
   , getSrc = require('./get-src')
 
 var Uploader = React.createClass({

plugins/rebase/breadcrumb.js

@@ -30,7 +30,7 @@ var Breadcrumb = React.createClass({
   render: function () {
     return <ul className='Breadcrumb'>
       {this.state.pedigree.map(item =>
-        <li onClick={this.props.rebase.bind(null, item.id)} className="Breadcrumb_item">
+        <li key={item.id} onClick={this.props.rebase.bind(null, item.id)} className="Breadcrumb_item">
           {item.content.slice(0, 25)}
         </li>
       )}

plugins/rebase/index.js

@@ -11,20 +11,22 @@ module.exports = {
   view: {
     statusbar: function (store) {
       var actions = store.actions
-      return Breadcrumb({
-        rebase: actions.rebase.bind(actions),
-        reload: store.getters.getPedigree.bind(store.getters, true),
-        store: store,
-      })
+      return <Breadcrumb
+        key="rebase-breadcrumb"
+        rebase={actions.rebase.bind(actions)}
+        reload={store.getters.getPedigree.bind(store.getters, true)}
+        store={store}
+      />
     },
 
     blocks: {
       top: function (actions, state, store) {
-        return Breadcrumb({
-          rebase: actions.rebase.bind(actions),
-          reload: store.getters.getPedigree.bind(store.getters, true),
-          store: store,
-        })
+        return <Breadcrumb
+          key="rebase-breadcrumb"
+          rebase={actions.rebase.bind(actions)}
+          reload={store.getters.getPedigree.bind(store.getters, true)}
+          store={store}
+        />
       },
     },
   },

plugins/todo/index.js

@@ -49,7 +49,7 @@ module.exports = {
         return <div className={cx({
           'm_Todo': true,
           'm_Todo-done': node.done,
-        })} onClick={actions.toggleTodoDone.bind(actions, node.id)}/>
+        })} key="todo" onClick={actions.toggleTodoDone.bind(actions, node.id)}/>
       }
     },
   },

views/body/default-renderer.js

@@ -11,7 +11,7 @@ renderer.link = function (href, title, text) {
 
 marked.setOptions({
   gfm: true,
-  sanitize: true,
+  // sanitize: true,
   tables: true,
   breaks: true,
   pedantic: false,

views/body/simple.js

@@ -90,18 +90,23 @@ var SimpleBody = React.createClass({
 
   editor: function () {
     var Ctrl = this.props.editor || DefaultEditor
-    return <Ctrl
-      ref="text"
-      value={this.state.content}
-      node={this.props.node}
-      store={this.props.store}
-      goDown={this.props.actions.goDown.bind(this.props.actions)}
-      goUp={this.props.actions.goUp.bind(this.props.actions)}
-      joinUp={this.props.actions.joinUp.bind(this.props.actions)}
-      createAfter={this.props.actions.createAfter.bind(this.props.actions)}
-      removeEmpty={this.props.actions.removeEmpty.bind(this.props.actions)}
-      onChange={this._onChange}
-      onBlur={this._onBlur}/>
+    const props = {
+      ref: "text",
+      value: this.state.content,
+      node: this.props.node,
+      store: this.props.store,
+      goDown: this.props.actions.goDown.bind(this.props.actions),
+      goUp: this.props.actions.goUp.bind(this.props.actions),
+      joinUp: this.props.actions.joinUp.bind(this.props.actions),
+      createAfter: this.props.actions.createAfter.bind(this.props.actions),
+      removeEmpty: this.props.actions.removeEmpty.bind(this.props.actions),
+      onChange: this._onChange,
+      onBlur: this._onBlur
+    }
+    if (Ctrl.isReactLegacyFactory) {
+      return <Ctrl {...props}/>
+    }
+    return Ctrl(props)
   },
 
   renderer: function () {

views/body/textarea-grow.js

@@ -110,12 +110,11 @@ var Textarea = React.createClass({
     return <div className={
       'textarea-grow ' + this.props.className
     }>
-      {
-        this.transferPropsTo(<textarea
-          ref='area'
-          className='body_input'
-          />)
-      }
+      <textarea
+        ref='area'
+        className='body_input'
+        {...this.props}
+        />
       <div
         ref='shadow'
         className='shadow'>