react-markdown

5 files changed, 231 insertions, 16 deletions

diff --git a/vnext/package-lock.json b/vnext/package-lock.json
index 9d88e553..f2762533 100644
--- a/vnext/package-lock.json
+++ b/vnext/package-lock.json
@@ -949,6 +949,11 @@
       "integrity": "sha512-q/UEjfGJ2Cm3oKV71DJz9d25TPnq5rhBVL2Q4fA5wcC3jcrdn7+SssEybFIxwAvvP+YCsCYNKughoF33GxgycQ==",
       "dev": true
     },
+    "bail": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/bail/-/bail-1.0.2.tgz",
+      "integrity": "sha1-99bBcxYwqfnw1NNe0fli4gdKF2Q="
+    },
     "balanced-match": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
@@ -1414,6 +1419,21 @@
         "supports-color": "2.0.0"
       }
     },
+    "character-entities": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/character-entities/-/character-entities-1.2.1.tgz",
+      "integrity": "sha1-92hxvl72bdt/j440eOzDdMJ9bco="
+    },
+    "character-entities-legacy": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-1.1.1.tgz",
+      "integrity": "sha1-9Ad53xoQGHK7UQo9KV4fzPFHIC8="
+    },
+    "character-reference-invalid": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-1.1.1.tgz",
+      "integrity": "sha1-lCg191Dk7GGjCOYMLvjMEBEgLvw="
+    },
     "chokidar": {
       "version": "1.7.0",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-1.7.0.tgz",
@@ -1501,6 +1521,11 @@
       "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=",
       "dev": true
     },
+    "collapse-white-space": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/collapse-white-space/-/collapse-white-space-1.0.3.tgz",
+      "integrity": "sha1-S5BvZw5aljqHt2sOFolkM0G2Ajw="
+    },
     "color": {
       "version": "0.11.4",
       "resolved": "https://registry.npmjs.org/color/-/color-0.11.4.tgz",
@@ -2841,8 +2866,7 @@
     "extend": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.1.tgz",
-      "integrity": "sha1-p1Xqe8Gt/MWjHOfnYtuq3F5jZEQ=",
-      "dev": true
+      "integrity": "sha1-p1Xqe8Gt/MWjHOfnYtuq3F5jZEQ="
     },
     "extend-shallow": {
       "version": "2.0.1",
@@ -3991,8 +4015,7 @@
     "inherits": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
-      "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
-      "dev": true
+      "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4="
     },
     "ini": {
       "version": "1.3.5",
@@ -4063,6 +4086,20 @@
       "integrity": "sha1-UFMN+4T8yap9vnhS6Do3uTufKqY=",
       "dev": true
     },
+    "is-alphabetical": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-1.0.1.tgz",
+      "integrity": "sha1-x3B5zJHU76x3W+EDS/LSQ/lebwg="
+    },
+    "is-alphanumerical": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-1.0.1.tgz",
+      "integrity": "sha1-37SqTRCF4zvbYcLe6cgOnGwZ9Ts=",
+      "requires": {
+        "is-alphabetical": "1.0.1",
+        "is-decimal": "1.0.1"
+      }
+    },
     "is-arrayish": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
@@ -4081,8 +4118,7 @@
     "is-buffer": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
-      "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==",
-      "dev": true
+      "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w=="
     },
     "is-builtin-module": {
       "version": "1.0.0",
@@ -4128,6 +4164,11 @@
       "integrity": "sha1-mqIOtq7rv/d/vTPnTKAbM1gdOhY=",
       "dev": true
     },
+    "is-decimal": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-1.0.1.tgz",
+      "integrity": "sha1-9ftqlJlq2ejjdh+/vQkfH8qMToI="
+    },
     "is-dotfile": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/is-dotfile/-/is-dotfile-1.0.3.tgz",
@@ -4194,6 +4235,11 @@
       "integrity": "sha1-bKiwe5nHeZgCWQDlVc7Y7YCHmoM=",
       "dev": true
     },
+    "is-hexadecimal": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-1.0.1.tgz",
+      "integrity": "sha1-bghLvJIGH7sJcexYts5tQE4k2mk="
+    },
     "is-jpg": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-jpg/-/is-jpg-1.0.0.tgz",
@@ -4248,8 +4294,7 @@
     "is-plain-obj": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-1.1.0.tgz",
-      "integrity": "sha1-caUMhCnfync8kqOQpKA7OfzVHT4=",
-      "dev": true
+      "integrity": "sha1-caUMhCnfync8kqOQpKA7OfzVHT4="
     },
     "is-png": {
       "version": "1.1.0",
@@ -4340,6 +4385,16 @@
       "integrity": "sha1-1LVcafUYhvm2XHDWwmItN+KfSP4=",
       "dev": true
     },
+    "is-whitespace-character": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-whitespace-character/-/is-whitespace-character-1.0.1.tgz",
+      "integrity": "sha1-muAXbzKCtlRXoZks2whPil+DPjs="
+    },
+    "is-word-character": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-word-character/-/is-word-character-1.0.1.tgz",
+      "integrity": "sha1-WgP6HqkazopusMfNdw64bWXIvvs="
+    },
     "is-wsl": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-1.1.0.tgz",
@@ -4784,6 +4839,11 @@
       "integrity": "sha1-2TPOuSBdgr3PSIb2dCvcK03qFG0=",
       "dev": true
     },
+    "markdown-escapes": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/markdown-escapes/-/markdown-escapes-1.0.1.tgz",
+      "integrity": "sha1-GZTfLTr0gR3lmmcUk0wrIpJzRRg="
+    },
     "math-expression-evaluator": {
       "version": "1.2.17",
       "resolved": "https://registry.npmjs.org/math-expression-evaluator/-/math-expression-evaluator-1.2.17.tgz",
@@ -5495,6 +5555,19 @@
         "pbkdf2": "3.0.14"
       }
     },
+    "parse-entities": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-1.1.1.tgz",
+      "integrity": "sha1-gRLYhHExnyerrk1klksSL+ThuJA=",
+      "requires": {
+        "character-entities": "1.2.1",
+        "character-entities-legacy": "1.1.1",
+        "character-reference-invalid": "1.1.1",
+        "is-alphanumerical": "1.0.1",
+        "is-decimal": "1.0.1",
+        "is-hexadecimal": "1.0.1"
+      }
+    },
     "parse-glob": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/parse-glob/-/parse-glob-3.0.4.tgz",
@@ -6504,6 +6577,18 @@
         }
       }
     },
+    "react-markdown": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/react-markdown/-/react-markdown-3.1.3.tgz",
+      "integrity": "sha512-m1iaGEXEVm+dmBxom7UdrC+bLa0zOgk/MihhFpwW7bc8rsmZrUwUXf+u+VowIhPFgWfZW2QrrFfGM5eo4MIIQQ==",
+      "requires": {
+        "prop-types": "15.6.0",
+        "remark-parse": "4.0.0",
+        "unified": "6.1.6",
+        "unist-util-visit": "1.3.0",
+        "xtend": "4.0.1"
+      }
+    },
     "react-proxy": {
       "version": "3.0.0-alpha.1",
       "resolved": "https://registry.npmjs.org/react-proxy/-/react-proxy-3.0.0-alpha.1.tgz",
@@ -6740,6 +6825,28 @@
         }
       }
     },
+    "remark-parse": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/remark-parse/-/remark-parse-4.0.0.tgz",
+      "integrity": "sha512-XZgICP2gJ1MHU7+vQaRM+VA9HEL3X253uwUM/BGgx3iv6TH2B3bF3B8q00DKcyP9YrJV+/7WOWEWBFF/u8cIsw==",
+      "requires": {
+        "collapse-white-space": "1.0.3",
+        "is-alphabetical": "1.0.1",
+        "is-decimal": "1.0.1",
+        "is-whitespace-character": "1.0.1",
+        "is-word-character": "1.0.1",
+        "markdown-escapes": "1.0.1",
+        "parse-entities": "1.1.1",
+        "repeat-string": "1.6.1",
+        "state-toggle": "1.0.0",
+        "trim": "0.0.1",
+        "trim-trailing-lines": "1.1.0",
+        "unherit": "1.1.0",
+        "unist-util-remove-position": "1.1.1",
+        "vfile-location": "2.0.2",
+        "xtend": "4.0.1"
+      }
+    },
     "remove-trailing-separator": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz",
@@ -6755,8 +6862,7 @@
     "repeat-string": {
       "version": "1.6.1",
       "resolved": "https://registry.npmjs.org/repeat-string/-/repeat-string-1.6.1.tgz",
-      "integrity": "sha1-jcrkcOHIirwtYA//Sndihtp15jc=",
-      "dev": true
+      "integrity": "sha1-jcrkcOHIirwtYA//Sndihtp15jc="
     },
     "repeating": {
       "version": "2.0.1",
@@ -6770,8 +6876,7 @@
     "replace-ext": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/replace-ext/-/replace-ext-1.0.0.tgz",
-      "integrity": "sha1-3mMSg3P8v3w8z6TeWkgMRaZ5WOs=",
-      "dev": true
+      "integrity": "sha1-3mMSg3P8v3w8z6TeWkgMRaZ5WOs="
     },
     "require-directory": {
       "version": "2.1.1",
@@ -7194,6 +7299,11 @@
       "integrity": "sha1-5sgLYjEj19gM8TLOU480YokHJQI=",
       "dev": true
     },
+    "state-toggle": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/state-toggle/-/state-toggle-1.0.0.tgz",
+      "integrity": "sha1-0g+aYWu08MO5i5GSLSW2QKorxCU="
+    },
     "statuses": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.3.1.tgz",
@@ -7650,6 +7760,11 @@
       "integrity": "sha1-uDVx+k2MJbguIxsG46MFXeTKGkc=",
       "dev": true
     },
+    "trim": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/trim/-/trim-0.0.1.tgz",
+      "integrity": "sha1-WFhUf2spB1fulczMZm+1AITEYN0="
+    },
     "trim-newlines": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/trim-newlines/-/trim-newlines-1.0.0.tgz",
@@ -7671,6 +7786,16 @@
       "integrity": "sha1-yy4SAwZ+DI3h9hQJS5/kVwTqYAM=",
       "dev": true
     },
+    "trim-trailing-lines": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/trim-trailing-lines/-/trim-trailing-lines-1.1.0.tgz",
+      "integrity": "sha1-eu+7eAjfnWafbaLkOMrIxGradoQ="
+    },
+    "trough": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/trough/-/trough-1.0.1.tgz",
+      "integrity": "sha1-qf2LA5Swro//guBjOgo2zK1bX4Y="
+    },
     "tty-browserify": {
       "version": "0.0.0",
       "resolved": "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz",
@@ -7749,6 +7874,29 @@
         }
       }
     },
+    "unherit": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/unherit/-/unherit-1.1.0.tgz",
+      "integrity": "sha1-a5qu379z3xdWrZ4xbdmBiFhAzX0=",
+      "requires": {
+        "inherits": "2.0.3",
+        "xtend": "4.0.1"
+      }
+    },
+    "unified": {
+      "version": "6.1.6",
+      "resolved": "https://registry.npmjs.org/unified/-/unified-6.1.6.tgz",
+      "integrity": "sha512-pW2f82bCIo2ifuIGYcV12fL96kMMYgw7JKVEgh7ODlrM9rj6vXSY3BV+H6lCcv1ksxynFf582hwWLnA1qRFy4w==",
+      "requires": {
+        "bail": "1.0.2",
+        "extend": "3.0.1",
+        "is-plain-obj": "1.1.0",
+        "trough": "1.0.1",
+        "vfile": "2.3.0",
+        "x-is-function": "1.0.4",
+        "x-is-string": "0.1.0"
+      }
+    },
     "uniq": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/uniq/-/uniq-1.0.1.tgz",
@@ -7780,6 +7928,32 @@
         "through2-filter": "2.0.0"
       }
     },
+    "unist-util-is": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-2.1.1.tgz",
+      "integrity": "sha1-DDEmKeP5YMZukx6BLT2A53AQlHs="
+    },
+    "unist-util-remove-position": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/unist-util-remove-position/-/unist-util-remove-position-1.1.1.tgz",
+      "integrity": "sha1-WoXBVV/BugwQG4ZwfRXlD6TIcbs=",
+      "requires": {
+        "unist-util-visit": "1.3.0"
+      }
+    },
+    "unist-util-stringify-position": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-1.1.1.tgz",
+      "integrity": "sha1-PMvcU2ee7W7PN3fdf14yKcG2qjw="
+    },
+    "unist-util-visit": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-1.3.0.tgz",
+      "integrity": "sha512-9ntYcxPFtl44gnwXrQKZ5bMqXMY0ZHzUpqMFiU4zcc8mmf/jzYm8GhYgezuUlX4cJIM1zIDYaO6fG/fI+L6iiQ==",
+      "requires": {
+        "unist-util-is": "2.1.1"
+      }
+    },
     "unpipe": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
@@ -7909,6 +8083,30 @@
       "integrity": "sha1-N61zyO5Bf7PVgOeFMSMH0nSEfyI=",
       "dev": true
     },
+    "vfile": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/vfile/-/vfile-2.3.0.tgz",
+      "integrity": "sha512-ASt4mBUHcTpMKD/l5Q+WJXNtshlWxOogYyGYYrg4lt/vuRjC1EFQtlAofL5VmtVNIZJzWYFJjzGWZ0Gw8pzW1w==",
+      "requires": {
+        "is-buffer": "1.1.6",
+        "replace-ext": "1.0.0",
+        "unist-util-stringify-position": "1.1.1",
+        "vfile-message": "1.0.0"
+      }
+    },
+    "vfile-location": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/vfile-location/-/vfile-location-2.0.2.tgz",
+      "integrity": "sha1-02dcWch3SY5JK0dW/2Xkrxp1IlU="
+    },
+    "vfile-message": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-1.0.0.tgz",
+      "integrity": "sha512-HPREhzTOB/sNDc9/Mxf8w0FmHnThg5CRSJdR9VRFkD2riqYWs+fuXlj5z8mIpv2LrD7uU41+oPWFOL4Mjlf+dw==",
+      "requires": {
+        "unist-util-stringify-position": "1.1.1"
+      }
+    },
     "vinyl": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/vinyl/-/vinyl-1.2.0.tgz",
@@ -8521,6 +8719,21 @@
       "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
       "dev": true
     },
+    "x-is-function": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/x-is-function/-/x-is-function-1.0.4.tgz",
+      "integrity": "sha1-XSlNw9Joy90GJYDgxd93o5HR+h4="
+    },
+    "x-is-string": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/x-is-string/-/x-is-string-0.1.0.tgz",
+      "integrity": "sha1-R0tQhlrzpJqcRlfwWs0UVFj3fYI="
+    },
+    "xtend": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.1.tgz",
+      "integrity": "sha1-pcbVMr5lbiPbgg77lDofBJmNY68="
+    },
     "y18n": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/y18n/-/y18n-3.2.1.tgz",
diff --git a/vnext/package.json b/vnext/package.json
index b101fde9..db7cd129 100644
--- a/vnext/package.json
+++ b/vnext/package.json
@@ -33,6 +33,7 @@
   "dependencies": {
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
+    "react-markdown": "^3.1.3",
     "whatwg-fetch": "^2.0.3"
   }
 }
diff --git a/vnext/src/components/Message.js b/vnext/src/components/Message.js
index cf287ce9..ba853f5c 100644
--- a/vnext/src/components/Message.js
+++ b/vnext/src/components/Message.js
@@ -1,5 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import ReactMarkdown from 'react-markdown'
 
 export default class Message extends React.Component {
   render() { 
@@ -25,7 +26,7 @@ export default class Message extends React.Component {
             <Tags data={msg.tags || []} />
         </div>
       </header>
-      <p>{msg.body}</p>
+      <ReactMarkdown source={msg.body}/>
       { msg.photo && 
       <p className="ir"><a href={`//i.juick.com/p/${msg.mid}.${msg.attach}`} data-fname={`${msg.mid}.${msg.attach}`}>
         <img itemProp="image" src={`//i.juick.com/p/${msg.mid}.${msg.attach}`} alt=""/></a>
diff --git a/vnext/src/style/main.css b/vnext/src/style/main.css
index 080a179e..c09d7e88 100644
--- a/vnext/src/style/main.css
+++ b/vnext/src/style/main.css
@@ -537,8 +537,8 @@ q:before,
 q:after {
     content: "";
 }
-q {
-    border-left: 1px dashed #CCC;
+q, blockquote {
+    border-left: 3px solid #CCC;
     color: #666;
     display: block;
     margin: 10px 0 10px 10px;
diff --git a/vnext/webpack.config.js b/vnext/webpack.config.js
index d86fa182..151b4bd5 100644
--- a/vnext/webpack.config.js
+++ b/vnext/webpack.config.js
@@ -2,7 +2,7 @@ var webpack = require("webpack");
 module.exports = {
     devtool: 'eval',
     entry: {
-    "vendor": ['react', 'react-dom', 'whatwg-fetch'],
+    "vendor": ['react', 'react-dom', 'react-markdown', 'whatwg-fetch'],
     "app": [
         'file-loader?name=index.html!./src/views/index.html',
         __dirname + "/src/app.js",