create working Desc editor

app/assets/stylesheets/base.scss.erb

@@ -129,7 +129,7 @@
   height: auto;
 }
 
-.CardOnGraph .best_in_place_desc textarea {
+.CardOnGraph .riek-editing textarea {
   font-size: 13px;
   line-height:15px;
   font-family: helvetica, sans-serif;
@@ -174,13 +174,13 @@
  * End Markdown styling
  */
 
-.CardOnGraph .best_in_place_desc {
+.CardOnGraph .riek_desc {
   display:block;
   margin-top:2px;
   padding-right: 18px;
   margin-right: 8px;
 }
-.canEdit .CardOnGraph .best_in_place_desc:hover {
+.canEdit .CardOnGraph .riek_desc:hover {
   background-image: url(<%= asset_data_uri('edit.png') %>);
   background-position: top right;
   background-repeat: no-repeat;

frontend/src/components/TopicCard/Desc.js

@@ -0,0 +1,62 @@
+import React, { PropTypes, Component } from 'react'
+import { get } from 'lodash'
+import { RIETextArea } from 'riek'
+import Util from '../../Metamaps/Util'
+
+class MdTextArea extends RIETextArea {
+  renderNormalComponent = () => {
+    const value = this.state.newValue || this.props.value
+
+    // defaultProps MUST use dangerouslySetInnerHTML
+    return <span tabIndex="0"
+      className={this.makeClassString()}
+      onFocus={this.startEditing}
+      onClick={this.startEditing}
+      {...this.props.defaultProps}
+    />
+  }
+}
+
+class Desc extends Component {
+  render = () => {
+    const descHTML = (this.props.desc === '' && this.props.authorizedToEdit)
+      ? '<p.Click to add description...</p>'
+      : Util.mdToHTML(this.props.desc)
+
+    const htmlSpan = <span dangerouslySetInnerHTML={{ __html: descHTML }} />
+
+    return (
+      <div className="scroll">
+        <div className="desc">
+          <MdTextArea value={this.props.desc}
+            propName="desc"
+            change={this.props.onChange}
+            className="riek_desc"
+            classEditing="riek-editing"
+            editProps={{
+              onKeyPress: e => {
+                const ENTER = 13
+                if (e.shiftKey && e.which === ENTER) {
+                  e.preventDefault()
+                  this.props.onChange({ desc: e.target.value })
+                }
+              }
+            }}
+            defaultProps={{
+              dangerouslySetInnerHTML: { __html: descHTML }
+            }}
+          />
+          <div className="clearfloat"></div>
+        </div>
+      </div>
+    )
+  }
+}
+
+Desc.propTypes = {
+  desc: PropTypes.string, // markdown
+  authorizedToEdit: PropTypes.bool,
+  onChange: PropTypes.func
+}
+
+export default Desc

frontend/src/components/TopicCard/index.js

@@ -2,21 +2,11 @@
 import React, { PropTypes, Component } from 'react'
 import { RIETextArea } from 'riek'
 
-import Util from '../../Metamaps/Util'
-
 import Title from './Title'
 import Links from './Links'
+import Desc from './Desc'
 
-const descHTML = (topic, ActiveMapper) => {
+const bindShowCardListeners = (topic, ActiveMapper) => {
-  const authorized = topic.authorizeToEdit(ActiveMapper)
-  const descMarkdown = (topic.get('desc') === '' && authorized)
-    ? 'Click to add description...'
-    : topic.get('desc')
-  return Util.mdToHTML(descMarkdown)
-}
-
-var funcs = {
-  bindShowCardListeners: function(topic, ActiveMapper) {
   var authorized = topic.authorizeToEdit(ActiveMapper)
   var selectingMetacode = false
   // attach the listener that shows the metacode title when you hover over the image
@@ -160,7 +150,6 @@ var funcs = {
     }
   )
 }
-}
 
 class ReactTopicCard extends Component {
   constructor(props) {
@@ -180,7 +169,7 @@ class ReactTopicCard extends Component {
     const { topic, ActiveMapper } = this.props
     embedly('on', 'card.rendered', this.embedlyCardRendered)
     topic.get('link') && topic.get('link') !== '' && this.loadLink()
-    funcs.bindShowCardListeners(topic, ActiveMapper)
+    bindShowCardListeners(topic, ActiveMapper)
   }
 
   componentWillUnmount = () => {
@@ -254,21 +243,16 @@ class ReactTopicCard extends Component {
     if (topic.authorizePermissionChange(ActiveMapper)) classname += ' yourTopic'
     const hasAttachment = topic.get('link') && topic.get('link') !== ''
 
-    const topicId = topic.isNew() ? topic.cid : topic.id
+    const topicId = topic.isNew() ? topic.cid : topic.id // TODO should we be using cid here???
     return (
       <div className={classname}>
         <div className={`CardOnGraph ${hasAttachment ? 'hasAttachment' : ''}`} id={`topic_${topicId}`}>
           <Title name={topic.get('name')} onChange={this.props.updateTopic} />
           <Links topic={topic} />
-          <div className="scroll">
+          <Desc desc={topic.get('desc')}
-            <div className="desc">
+            authorizedToEdit={topic.authorizeToEdit(ActiveMapper)}
-              <span className="best_in_place best_in_place_desc"
+            onChange={this.props.updateTopic}
-                dangerouslySetInnerHTML={{  __html: descHTML(topic, ActiveMapper) }}
+          />
-                >
-              </span>
-              <div className="clearfloat"></div>
-            </div>
-          </div>
           {hasAttachment && <div className={`embeds ${embedlyLinkLoaded ? '' : 'nonEmbedlyLink'}`}>
             <a href={topic.get('link')} id="embedlyLink" target="_blank" data-card-description="0">
               {topic.get('link')}