chat-js: render markdown in messages

Renders markdown in text messages but not url or code messages.

pkg/interface/chat/gulpfile.js

@@ -7,6 +7,8 @@ var sucrase = require('@sucrase/gulp-plugin');
 var minify = require('gulp-minify');
 var rename = require('gulp-rename');
 var del = require('del');
+var json = require('rollup-plugin-json');
+
 
 var resolve = require('rollup-plugin-node-resolve');
 var commonjs = require('rollup-plugin-commonjs');
@@ -69,6 +71,7 @@ gulp.task('js-imports', function(cb) {
           useEntry: 'prepend',
           extensions: '.js'
         }),
+        json(),
         globals(),
         resolve()
       ]
@@ -95,6 +98,7 @@ gulp.task('tile-js-imports', function(cb) {
           useEntry: 'prepend',
           extensions: '.js'
         }),
+        json(),
         globals(),
         resolve()
       ]
@@ -127,6 +131,7 @@ gulp.task('js-imports-prod', function(cb) {
           extensions: '.js'
         }),
         globals(),
+        json(),
         resolve()
       ]
     }, 'umd'))

pkg/interface/chat/package-lock.json

@@ -5648,6 +5648,15 @@
         "rollup-pluginutils": "^2.6.0"
       }
     },
+    "rollup-plugin-json": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/rollup-plugin-json/-/rollup-plugin-json-4.0.0.tgz",
+      "integrity": "sha512-hgb8N7Cgfw5SZAkb3jf0QXii6QX/FOkiIq2M7BAQIEydjHvTyxXHQiIzZaTFgx1GK0cRCHOCBHIyEkkLdWKxow==",
+      "dev": true,
+      "requires": {
+        "rollup-pluginutils": "^2.5.0"
+      }
+    },
     "rollup-plugin-node-globals": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/rollup-plugin-node-globals/-/rollup-plugin-node-globals-1.4.0.tgz",

pkg/interface/chat/package.json

@@ -20,6 +20,7 @@
     "gulp-rename": "^1.4.0",
     "rollup": "^1.6.0",
     "rollup-plugin-commonjs": "^9.3.4",
+    "rollup-plugin-json": "^4.0.0",
     "rollup-plugin-node-globals": "^1.4.0",
     "rollup-plugin-node-resolve": "^4.0.0",
     "rollup-plugin-root-import": "^0.2.3",

pkg/interface/chat/src/js/components/lib/message.js

@@ -6,7 +6,9 @@ import { uxToHex, cite, writeText } from '/lib/util';
 import urbitOb from 'urbit-ob';
 import moment from 'moment';
 import _ from 'lodash';
+import ReactMarkdown from 'react-markdown';
 
+const MemoMarkdown = React.memo(ReactMarkdown);
 
 export class Message extends Component {
   constructor() {
@@ -125,10 +127,11 @@ export class Message extends Component {
         </p>
       );
     } else {
-        let text = letter.text.split ('\n').map ((item, i) => <p className='f7 lh-copy v-top' key={i}>{item}</p>);
         return (
           <section>
-            {text}
+            <MemoMarkdown
+              source={letter.text}
+            />
           </section>
         );
     }
@@ -163,7 +166,7 @@ export class Message extends Component {
       return (
         <div
           className={
-            "w-100 f8 pl3 pt4 pr3 cf flex lh-copy " + " " + pending
+            "w-100 f7 pl3 pt4 pr3 cf flex lh-copy " + " " + pending
           }
           style={{
             minHeight: "min-content"
@@ -211,7 +214,7 @@ export class Message extends Component {
             minHeight: "min-content"
           }}>
           <p className="child pt2 pl2 pr1 mono f9 gray2 dib">{timestamp}</p>
-          <div className="fr f7 clamp-message white-d pr3" style={{ flexGrow: 1 }}>
+          <div className="fr f7 clamp-message white-d pr3 lh-copy" style={{ flexGrow: 1 }}>
            {this.renderContent()}
           </div>
         </div>