add markdown to topic cards

app/views/layouts/_templates.html.erb

@@ -220,7 +220,7 @@
         </div>
         <div class="scroll">
             <div class="desc">
-                <span class="best_in_place best_in_place_desc" data-url="/topics/{{id}}" data-object="topic" data-nil="{{desc_nil}}" data-attribute="desc" data-type="textarea">{{desc}}</span> 
+                <span class="best_in_place best_in_place_desc" data-url="/topics/{{id}}" data-object="topic" data-nil="{{desc_nil}}" data-attribute="desc" data-type="textarea" data-original-content="{{desc_markdown}}">{{{desc_html}}}</span>
                 <div class="clearfloat"></div>
             </div>
         </div>

frontend/src/Metamaps/TopicCard.js

@@ -273,10 +273,14 @@ const TopicCard = {
         topic.trigger('saved')
       })
 
+      // this is for all subsequent renders after in-place editing the desc field
       $(showCard).find('.best_in_place_desc').bind('ajax:success', function () {
-        this.innerHTML = this.innerHTML.replace(/\r/g, '')
-        var desc = $(this).html() === $(this).data('nil') ? '' : $(this).html()
+        var desc = $(this).html() === $(this).data('nil')
+          ? ''
+          : $(this).text()
         topic.set('desc', desc)
+        $(this).data('bestInPlaceEditor').original_content = desc
+        this.innerHTML = Util.mdToHTML(desc)
         topic.trigger('saved')
       })
     }
@@ -397,8 +401,6 @@ const TopicCard = {
     } else {
     }
 
-    var desc_nil = 'Click to add description...'
-
     nodeValues.attachmentsHidden = ''
     if (topic.get('link') && topic.get('link') !== '') {
       nodeValues.embeds = '<a href="' + topic.get('link') + '" id="embedlyLink" target="_blank" data-card-description="0">'
@@ -454,8 +456,11 @@ const TopicCard = {
     nodeValues.date = topic.getDate()
     // the code for this is stored in /views/main/_metacodeOptions.html.erb
     nodeValues.metacode_select = $('#metacodeOptions').html()
-    nodeValues.desc_nil = desc_nil
-    nodeValues.desc = (topic.get('desc') == '' && authorized) ? desc_nil : topic.get('desc')
+    nodeValues.desc_nil = 'Click to add description...'
+    nodeValues.desc_markdown = (topic.get('desc') === '' && authorized)
+     ? desc_nil
+     : topic.get('desc')
+    nodeValues.desc_html = Util.mdToHTML(nodeValues.desc_markdown)
     return nodeValues
   }
 }

frontend/src/Metamaps/Util.js

@@ -1,3 +1,5 @@
+import { Parser, HtmlRenderer } from 'commonmark'
+
 import Visualize from './Visualize'
 
 const Util = {
@@ -119,6 +121,9 @@ const Util = {
   },
   checkURLisYoutubeVideo: function (url) {
     return (url.match(/^https?:\/\/(?:www\.)?youtube.com\/watch\?(?=[^?]*v=\w+)(?:[^\s?]+)?$/) != null)
+  },
+  mdToHTML: text => {
+    return new HtmlRenderer().render(new Parser().parse(text))
   }
 }
 

package.json

@@ -26,14 +26,16 @@
     "babel-preset-es2015": "6.14.0",
     "babel-preset-react": "6.11.1",
     "backbone": "1.0.0",
-    "underscore": "1.4.4",
+    "commonmark": "0.26.0",
     "csv-parse": "1.1.7",
+    "json-loader": "0.5.4",
     "lodash": "4.16.1",
     "node-uuid": "1.4.7",
     "outdent": "0.2.1",
     "react": "15.3.2",
     "react-dom": "15.3.2",
     "socket.io": "0.9.12",
+    "underscore": "1.4.4",
     "webpack": "1.13.2"
   },
   "devDependencies": {

webpack.config.js

@@ -21,6 +21,9 @@ const config = module.exports = {
   plugins,
   devtool,
   module: {
+    preLoaders: [
+      { test: /\.json$/, loader: 'json' }
+    ],
     loaders: [
       {
         test: /\.(js|jsx)?$/,