Replace <p>s with <br/>s consistently

Also, allow newlines in /commands.
Fixes vector-im/vector-web#2114, vector-im/vector-web#2165.

src/HtmlUtils.js

@@ -55,7 +55,30 @@ export function unicodeToImage(str) {
     });
 
     return str;
-};
+}
+
+export function stripParagraphs(html: string): string {
+    const contentDiv = document.createElement('div');
+    contentDiv.innerHTML = html;
+
+    if (contentDiv.children.length === 0) {
+        return contentDiv.innerHTML;
+    }
+
+    let contentHTML = "";
+    for (let i=0; i<contentDiv.children.length; i++) {
+        const element = contentDiv.children[i];
+        if (element.tagName.toLowerCase() === 'p') {
+            contentHTML += element.innerHTML + '<br />';
+        } else {
+            const temp = document.createElement('div');
+            temp.appendChild(element.cloneNode(true));
+            contentHTML += temp.innerHTML;
+        }
+    }
+
+    return contentHTML;
+}
 
 var sanitizeHtmlParams = {
     allowedTags: [
@@ -153,8 +176,8 @@ class BaseHighlighter {
         }
 
         // handle postamble
-        if (lastOffset != safeSnippet.length) {
-            var subSnippet = safeSnippet.substring(lastOffset, undefined);
+        if (lastOffset !== safeSnippet.length) {
+            subSnippet = safeSnippet.substring(lastOffset, undefined);
             nodes = nodes.concat(this._applySubHighlights(subSnippet, safeHighlights));
         }
         return nodes;
@@ -219,7 +242,7 @@ class TextHighlighter extends BaseHighlighter {
             </span>;
 
         if (highlight && this.highlightLink) {
-            node = <a key={key} href={this.highlightLink}>{node}</a>
+            node = <a key={key} href={this.highlightLink}>{node}</a>;
         }
 
         return node;
@@ -227,7 +250,6 @@ class TextHighlighter extends BaseHighlighter {
 }
 
 
-module.exports = {
     /* turn a matrix event body into html
      *
      * content: 'content' of the MatrixEvent
@@ -236,7 +258,7 @@ module.exports = {
      *
      * opts.highlightLink: optional href to add to highlighted words
      */
-    bodyToHtml: function(content, highlights, opts) {
+export function bodyToHtml(content, highlights, opts) {
     opts = opts || {};
 
     var isHtml = (content.format === "org.matrix.custom.html");
@@ -276,19 +298,17 @@ module.exports = {
         'markdown-body': isHtml,
     });
     return <span className={className} dangerouslySetInnerHTML={{ __html: safeBody }} />;
-    },
+}
 
-    highlightDom: function(element) {
+export function highlightDom(element) {
     var blocks = element.getElementsByTagName("code");
     for (var i = 0; i < blocks.length; i++) {
         highlight.highlightBlock(blocks[i]);
     }
-    },
+}
 
-    emojifyText: function(text) {
+export function emojifyText(text) {
     return {
         __html: unicodeToImage(escape(text)),
     };
-    },
-};
-
+}

src/SlashCommands.js

@@ -304,7 +304,7 @@ module.exports = {
         // IRC-style commands
         input = input.replace(/\s+$/, "");
         if (input[0] === "/" && input[1] !== "/") {
-            var bits = input.match(/^(\S+?)( +(.*))?$/);
+            var bits = input.match(/^(\S+?)( +((.|\n)*))?$/);
             var cmd, args;
             if (bits) {
                 cmd = bits[1].substring(1).toLowerCase();

src/components/views/rooms/MessageComposerInput.js

@@ -47,6 +47,7 @@ import KeyCode from '../../../KeyCode';
 import UserSettingsStore from '../../../UserSettingsStore';
 
 import * as RichText from '../../../RichText';
+import * as HtmlUtils from '../../../HtmlUtils';
 import Autocomplete from './Autocomplete';
 import {Completion} from "../../../autocomplete/Autocompleter";
 
@@ -63,18 +64,9 @@ function stateToMarkdown(state) {
             ''); // this is *not* a zero width space, trust me :)
 }
 
-
-// FIXME Breaks markdown with multiple paragraphs, since it only strips first and last <p>
 function mdownToHtml(mdown: string): string {
     let html = marked(mdown) || "";
     html = html.trim();
-    // strip start and end <p> tags else you get 'orrible spacing
-    if (html.indexOf("<p>") === 0) {
-        html = html.substring("<p>".length);
-    }
-    if (html.lastIndexOf("</p>") === (html.length - "</p>".length)) {
-        html = html.substring(0, html.length - "</p>".length);
-    }
     return html;
 }
 
@@ -547,6 +539,8 @@ export default class MessageComposerInput extends React.Component {
             contentHTML = mdownToHtml(contentText);
         }
 
+        contentHTML = HtmlUtils.stripParagraphs(contentHTML);
+
         let sendFn = this.client.sendHtmlMessage;
 
         if (contentText.startsWith('/me')) {
@@ -561,16 +555,16 @@ export default class MessageComposerInput extends React.Component {
 
         sendMessagePromise.then(() => {
             dis.dispatch({
-                action: 'message_sent'
+                action: 'message_sent',
             });
         }, () => {
             dis.dispatch({
-                action: 'message_send_failed'
+                action: 'message_send_failed',
             });
         });
 
         this.setState({
-            editorState: this.createEditorState()
+            editorState: this.createEditorState(),
         });
 
         return true;