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,164 +2,153 @@
 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)
+  var authorized = topic.authorizeToEdit(ActiveMapper)
-  const descMarkdown = (topic.get('desc') === '' && authorized)
+  var selectingMetacode = false
-    ? 'Click to add description...'
+  // attach the listener that shows the metacode title when you hover over the image
-    : topic.get('desc')
+  $('.showcard .metacodeImage').mouseenter(function() {
-  return Util.mdToHTML(descMarkdown)
+    $('.showcard .icon').css('z-index', '4')
-}
+    $('.showcard .metacodeTitle').show()
-
+  })
-var funcs = {
+  $('.showcard .linkItem.icon').mouseleave(function() {
-  bindShowCardListeners: function(topic, ActiveMapper) {
+    if (!selectingMetacode) {
-    var authorized = topic.authorizeToEdit(ActiveMapper)
+      $('.showcard .metacodeTitle').hide()
-    var selectingMetacode = false
-    // attach the listener that shows the metacode title when you hover over the image
-    $('.showcard .metacodeImage').mouseenter(function() {
-      $('.showcard .icon').css('z-index', '4')
-      $('.showcard .metacodeTitle').show()
-    })
-    $('.showcard .linkItem.icon').mouseleave(function() {
-      if (!selectingMetacode) {
-        $('.showcard .metacodeTitle').hide()
-        $('.showcard .icon').css('z-index', '1')
-      }
-    })
-
-    var metacodeLiClick = function() {
-      selectingMetacode = false
-      var metacodeId = parseInt($(this).attr('data-id'))
-      var metacode = DataModel.Metacodes.get(metacodeId)
-      $('.CardOnGraph').find('.metacodeTitle').html(metacode.get('name'))
-        .append('<div class="expandMetacodeSelect"></div>')
-        .attr('class', 'metacodeTitle mbg' + metacode.id)
-      $('.CardOnGraph').find('.metacodeImage').css('background-image', 'url(' + metacode.get('icon') + ')')
-      topic.save({
-        metacode_id: metacode.id
-      })
-      Visualize.mGraph.plot()
-      $('.metacodeSelect').hide().removeClass('onRightEdge onBottomEdge')
-      $('.metacodeTitle').hide()
       $('.showcard .icon').css('z-index', '1')
     }
+  })
 
-    var openMetacodeSelect = function(event) {
+  var metacodeLiClick = function() {
-      var TOPICCARD_WIDTH = 300
+    selectingMetacode = false
-      var METACODESELECT_WIDTH = 404
+    var metacodeId = parseInt($(this).attr('data-id'))
-      var MAX_METACODELIST_HEIGHT = 270
+    var metacode = DataModel.Metacodes.get(metacodeId)
-
+    $('.CardOnGraph').find('.metacodeTitle').html(metacode.get('name'))
-      if (!selectingMetacode) {
+      .append('<div class="expandMetacodeSelect"></div>')
-        selectingMetacode = true
+      .attr('class', 'metacodeTitle mbg' + metacode.id)
-
+    $('.CardOnGraph').find('.metacodeImage').css('background-image', 'url(' + metacode.get('icon') + ')')
-        // this is to make sure the metacode
+    topic.save({
-        // select is accessible onscreen, when opened
+      metacode_id: metacode.id
-        // while topic card is close to the right
-        // edge of the screen
-        var windowWidth = $(window).width()
-        var showcardLeft = parseInt($('.showcard').css('left'))
-        var distanceFromEdge = windowWidth - (showcardLeft + TOPICCARD_WIDTH)
-        if (distanceFromEdge < METACODESELECT_WIDTH) {
-          $('.metacodeSelect').addClass('onRightEdge')
-        }
-
-        // this is to make sure the metacode
-        // select is accessible onscreen, when opened
-        // while topic card is close to the bottom
-        // edge of the screen
-        var windowHeight = $(window).height()
-        var showcardTop = parseInt($('.showcard').css('top'))
-        var topicTitleHeight = $('.showcard .title').height() + parseInt($('.showcard .title').css('padding-top')) + parseInt($('.showcard .title').css('padding-bottom'))
-        var distanceFromBottom = windowHeight - (showcardTop + topicTitleHeight)
-        if (distanceFromBottom < MAX_METACODELIST_HEIGHT) {
-          $('.metacodeSelect').addClass('onBottomEdge')
-        }
-
-        $('.metacodeSelect').show()
-        event.stopPropagation()
-      }
-    }
-
-    var hideMetacodeSelect = function() {
-      selectingMetacode = false
-      $('.metacodeSelect').hide().removeClass('onRightEdge onBottomEdge')
-      $('.metacodeTitle').hide()
-      $('.showcard .icon').css('z-index', '1')
-    }
-
-    if (authorized) {
-      $('.showcard .metacodeTitle').click(openMetacodeSelect)
-      $('.showcard').click(hideMetacodeSelect)
-      $('.metacodeSelect > ul > li').click(function(event) {
-        event.stopPropagation()
-      })
-      $('.metacodeSelect li li').click(metacodeLiClick)
-    }
-
-    var hidePermissionSelect = function() {
-      selectingPermission = false
-      $('.showcard .yourTopic .mapPerm').removeClass('minimize') // this line flips the pull up arrow to a drop down arrow
-      $('.showcard .permissionSelect').remove()
-    }
-
-    var permissionLiClick = function(event) {
-      selectingPermission = false
-      var permission = $(this).attr('class')
-      topic.save({
-        permission: permission,
-        defer_to_map_id: null
-      })
-      $('.showcard .mapPerm').removeClass('co pu pr').addClass(permission.substring(0, 2))
-      hidePermissionSelect()
-    }
-
-    var openPermissionSelect = function(event) {
-      if (!selectingPermission) {
-        selectingPermission = true
-        $(this).addClass('minimize') // this line flips the drop down arrow to a pull up arrow
-        if ($(this).hasClass('co')) {
-          $(this).append('<ul class="permissionSelect"><li class="public"></li><li class="private"></li></ul>')
-        } else if ($(this).hasClass('pu')) {
-          $(this).append('<ul class="permissionSelect"><li class="commons"></li><li class="private"></li></ul>')
-        } else if ($(this).hasClass('pr')) {
-          $(this).append('<ul class="permissionSelect"><li class="commons"></li><li class="public"></li></ul>')
-        }
-        $('.showcard .permissionSelect li').click(permissionLiClick)
-        event.stopPropagation()
-      }
-    }
-    // ability to change permission
-    var selectingPermission = false
-    if (topic.authorizePermissionChange(ActiveMapper)) {
-      $('.showcard .yourTopic .mapPerm').click(openPermissionSelect)
-      $('.showcard').click(hidePermissionSelect)
-    }
-
-    $('.links .mapCount').unbind().click(function(event) {
-      $('.mapCount .tip').toggle()
-      $('.showcard .hoverTip').toggleClass('hide')
     })
-    $('.showcard').unbind('.hideTip').bind('click.hideTip', function() {
+    Visualize.mGraph.plot()
-      $('.mapCount .tip').hide()
+    $('.metacodeSelect').hide().removeClass('onRightEdge onBottomEdge')
-      $('.showcard .hoverTip').removeClass('hide')
+    $('.metacodeTitle').hide()
-    })
+    $('.showcard .icon').css('z-index', '1')
-
-    var originalText = $('.showMore').html()
-    $('.mapCount .tip .showMore').unbind().toggle(
-      function(event) {
-        $('.extraText').toggleClass('hideExtra')
-        $('.showMore').html('Show less...')
-      },
-      function(event) {
-        $('.extraText').toggleClass('hideExtra')
-        $('.showMore').html(originalText)
-      }
-    )
   }
+
+  var openMetacodeSelect = function(event) {
+    var TOPICCARD_WIDTH = 300
+    var METACODESELECT_WIDTH = 404
+    var MAX_METACODELIST_HEIGHT = 270
+
+    if (!selectingMetacode) {
+      selectingMetacode = true
+
+      // this is to make sure the metacode
+      // select is accessible onscreen, when opened
+      // while topic card is close to the right
+      // edge of the screen
+      var windowWidth = $(window).width()
+      var showcardLeft = parseInt($('.showcard').css('left'))
+      var distanceFromEdge = windowWidth - (showcardLeft + TOPICCARD_WIDTH)
+      if (distanceFromEdge < METACODESELECT_WIDTH) {
+        $('.metacodeSelect').addClass('onRightEdge')
+      }
+
+      // this is to make sure the metacode
+      // select is accessible onscreen, when opened
+      // while topic card is close to the bottom
+      // edge of the screen
+      var windowHeight = $(window).height()
+      var showcardTop = parseInt($('.showcard').css('top'))
+      var topicTitleHeight = $('.showcard .title').height() + parseInt($('.showcard .title').css('padding-top')) + parseInt($('.showcard .title').css('padding-bottom'))
+      var distanceFromBottom = windowHeight - (showcardTop + topicTitleHeight)
+      if (distanceFromBottom < MAX_METACODELIST_HEIGHT) {
+        $('.metacodeSelect').addClass('onBottomEdge')
+      }
+
+      $('.metacodeSelect').show()
+      event.stopPropagation()
+    }
+  }
+
+  var hideMetacodeSelect = function() {
+    selectingMetacode = false
+    $('.metacodeSelect').hide().removeClass('onRightEdge onBottomEdge')
+    $('.metacodeTitle').hide()
+    $('.showcard .icon').css('z-index', '1')
+  }
+
+  if (authorized) {
+    $('.showcard .metacodeTitle').click(openMetacodeSelect)
+    $('.showcard').click(hideMetacodeSelect)
+    $('.metacodeSelect > ul > li').click(function(event) {
+      event.stopPropagation()
+    })
+    $('.metacodeSelect li li').click(metacodeLiClick)
+  }
+
+  var hidePermissionSelect = function() {
+    selectingPermission = false
+    $('.showcard .yourTopic .mapPerm').removeClass('minimize') // this line flips the pull up arrow to a drop down arrow
+    $('.showcard .permissionSelect').remove()
+  }
+
+  var permissionLiClick = function(event) {
+    selectingPermission = false
+    var permission = $(this).attr('class')
+    topic.save({
+      permission: permission,
+      defer_to_map_id: null
+    })
+    $('.showcard .mapPerm').removeClass('co pu pr').addClass(permission.substring(0, 2))
+    hidePermissionSelect()
+  }
+
+  var openPermissionSelect = function(event) {
+    if (!selectingPermission) {
+      selectingPermission = true
+      $(this).addClass('minimize') // this line flips the drop down arrow to a pull up arrow
+      if ($(this).hasClass('co')) {
+        $(this).append('<ul class="permissionSelect"><li class="public"></li><li class="private"></li></ul>')
+      } else if ($(this).hasClass('pu')) {
+        $(this).append('<ul class="permissionSelect"><li class="commons"></li><li class="private"></li></ul>')
+      } else if ($(this).hasClass('pr')) {
+        $(this).append('<ul class="permissionSelect"><li class="commons"></li><li class="public"></li></ul>')
+      }
+      $('.showcard .permissionSelect li').click(permissionLiClick)
+      event.stopPropagation()
+    }
+  }
+  // ability to change permission
+  var selectingPermission = false
+  if (topic.authorizePermissionChange(ActiveMapper)) {
+    $('.showcard .yourTopic .mapPerm').click(openPermissionSelect)
+    $('.showcard').click(hidePermissionSelect)
+  }
+
+  $('.links .mapCount').unbind().click(function(event) {
+    $('.mapCount .tip').toggle()
+    $('.showcard .hoverTip').toggleClass('hide')
+  })
+  $('.showcard').unbind('.hideTip').bind('click.hideTip', function() {
+    $('.mapCount .tip').hide()
+    $('.showcard .hoverTip').removeClass('hide')
+  })
+
+  var originalText = $('.showMore').html()
+  $('.mapCount .tip .showMore').unbind().toggle(
+    function(event) {
+      $('.extraText').toggleClass('hideExtra')
+      $('.showMore').html('Show less...')
+    },
+    function(event) {
+      $('.extraText').toggleClass('hideExtra')
+      $('.showMore').html(originalText)
+    }
+  )
 }
 
 class ReactTopicCard extends Component {
@@ -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')}