Display newlines in thread view

Fixes #582

src/js/ui/inbox/thread/threadView.tsx

@@ -1,7 +1,9 @@
+import * as h from 'mithril/hyperscript'
 import * as helper from '../../helper'
 import { header as headerWidget, backButton, userStatus } from '../../shared/common'
 import layout from '../../layout'
 import i18n from '../../../i18n'
+import { escapeHtml } from '../../../utils'
 import redraw from '../../../utils/redraw'
 import { ThreadState, Post, ThreadAttrs } from '../interfaces'
 
@@ -58,7 +60,9 @@ function renderPost(post: Post, index: number, posts: Array<Post>) {
         &nbsp;–&nbsp;
         {postDateFormat(post.createdAt)}
       </div>
-      <div className="text">{post.text}</div>
+      <div className="text">
+        {h.trust(escapeHtml(post.text).replace(/\n/g, '<br>'))}
+      </div>
     </div>
   )
 }

src/js/utils/html.ts

@@ -0,0 +1,20 @@
+// Implementation originally from Twitter's Hogan.js:
+// https://github.com/twitter/hogan.js/blob/master/lib/template.js#L325-L335
+const rAmp = /&/g
+const rLt = /</g
+const rApos = /\'/g
+const rQuot = /\"/g
+const hChars = /[&<>\"\']/
+
+export function escape(str: string) {
+  if (hChars.test(String(str))) {
+    return str
+    .replace(rAmp, '&amp;')
+    .replace(rLt, '&lt;')
+    .replace(rApos, '&apos;')
+    .replace(rQuot, '&quot;')
+  }
+  else {
+    return str
+  }
+}

src/js/utils/index.ts

@@ -257,3 +257,23 @@ export function mapObject<K extends string, T, U>(obj: Record<K, T>, f: (x: T) =
 export function lichessAssetSrc(path: string) {
   return `${window.lichess.apiEndPoint}/assets/${path}`
 }
+
+// Implementation originally from Twitter's Hogan.js:
+// https://github.com/twitter/hogan.js/blob/master/lib/template.js#L325-L335
+const rAmp = /&/g
+const rLt = /</g
+const rApos = /\'/g
+const rQuot = /\"/g
+const hChars = /[&<>\"\']/
+export function escapeHtml(str: string) {
+  if (hChars.test(String(str))) {
+    return str
+    .replace(rAmp, '&amp;')
+    .replace(rLt, '&lt;')
+    .replace(rApos, '&apos;')
+    .replace(rQuot, '&quot;')
+  }
+  else {
+    return str
+  }
+}

src/styl/inbox.styl

@@ -88,7 +88,7 @@ table.threadList
   >.postWrapper
     width 90%
     margin 0 auto
-    padding 5px 0px 5px 0px
+    padding 1em 0
     border-top 1px solid #444
     &.first
       border-top none