From 3522ee6ee187274c84d9c541dee1a9ac3b76c7bc Mon Sep 17 00:00:00 2001
From: Simon Backx <simon@ghost.org>
Date: Tue, 5 Jul 2022 16:37:26 +0200
Subject: [PATCH] Added whitespace and newline support

---
 apps/comments-ui/src/components/Comment.js | 4 +++-
 apps/comments-ui/src/components/Form.js    | 9 ++++++++-
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/apps/comments-ui/src/components/Comment.js b/apps/comments-ui/src/components/Comment.js
index f3c8de29b3..5f8970057d 100644
--- a/apps/comments-ui/src/components/Comment.js
+++ b/apps/comments-ui/src/components/Comment.js
@@ -4,6 +4,8 @@ import {formatRelativeTime} from '../utils/helpers';
 function Comment(props) {
     const comment = props.comment;
 
+    const html = {__html: comment.html};
+
     return (
         <div className="flex mb-4">
             <div className="mr-4">
@@ -18,7 +20,7 @@ function Comment(props) {
                     </div>
                 </div>
                 <div className="mb-4 font-sans leading-normal dark:text-neutral-300">
-                    <p>{comment.html}</p>
+                    <p dangerouslySetInnerHTML={html} className="whitespace-pre-wrap"></p>
                 </div>
             </div>
         </div>
diff --git a/apps/comments-ui/src/components/Form.js b/apps/comments-ui/src/components/Form.js
index 62f3330f3b..3bc5c4a5e3 100644
--- a/apps/comments-ui/src/components/Form.js
+++ b/apps/comments-ui/src/components/Form.js
@@ -14,6 +14,13 @@ class Form extends React.Component {
         this.handleChange = this.handleChange.bind(this);
     }
 
+    getHTML() {
+        const text = this.state.message;
+
+        // Convert newlines to <br> for now (until we add a real editor)
+        return text.replace('\n', '<br>');
+    }
+
     async submitForm(event) {
         event.preventDefault();
         const message = this.state.message;
@@ -28,7 +35,7 @@ class Form extends React.Component {
             await this.context.onAction('addComment', {
                 post_id: this.context.postId,
                 status: 'published',
-                html: message
+                html: this.getHTML()
             });
 
             // Clear message on success