From 409ff80d64d65f73622f8092c6b91ec05eea5acb Mon Sep 17 00:00:00 2001
From: OFF0 <offbyn@protonmail.com>
Date: Wed, 23 Nov 2022 20:13:08 +0100
Subject: [PATCH] test multiline comments

---
 src/index.html |  2 +-
 src/main.js    | 10 ++++++++--
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/index.html b/src/index.html
index 0d05479..2b392a0 100644
--- a/src/index.html
+++ b/src/index.html
@@ -25,7 +25,7 @@
             <img class="mbox-img" id="bubble" src="assets/comment.svg" alt="">
             <div class="mbox-body" id="newMessage">
               <form action="#" class="form-inline" id="writeForm">
-                <input type="text" name="message">
+                <textarea name="message"></textarea>
                 <button type="submit" id="publish" disabled>send</button>
               </form>
               <small id="sendstatus" class="form-status"></small>
diff --git a/src/main.js b/src/main.js
index a79b8e3..bbf6a1c 100644
--- a/src/main.js
+++ b/src/main.js
@@ -152,6 +152,12 @@ setInterval(() => {
   });
 }, 10000);
 
+function renderMultilineText(string) {
+  return string
+    .split('\n')
+    .reduce((acc, next, i) => acc.concat(i === 0 ? next : [elem('br'), next]), []);
+}
+
 function createTextNote(evt, relay) {
   const {host, img, isReply, replies, time, userName} = getMetadata(evt, relay);
   const isLongContent = evt.content.length > 280;
@@ -172,7 +178,7 @@ function createTextNote(evt, relay) {
         elem('time', {dateTime: time.toISOString()}, formatTime(time)),
       ]),
     ]),
-    elem('div', {data: isLongContent ? {append: evt.content.slice(280)} : null}, content),
+    elem('div', {data: isLongContent ? {append: evt.content.slice(280)} : null}, renderMultilineText(content)),
     elem('button', {
       className: 'btn-inline', name: 'star', type: 'button',
       data: {'eventId': evt.id, relay},
@@ -360,7 +366,7 @@ function getMetadata(evt, relay) {
 
 // reply
 const writeForm = document.querySelector('#writeForm');
-const input = document.querySelector('input[name="message"]');
+const input = document.querySelector('textarea[name="message"]');
 let lastReplyBtn = null;
 let replyTo = null;
 feedContainer.addEventListener('click', (e) => {