From 6a0909b64907cb7bd8a84f534a0bf867ca08a131 Mon Sep 17 00:00:00 2001
From: WitnessJ <47916894+wsj20010128@users.noreply.github.com>
Date: Wed, 12 Jul 2023 12:07:16 -0400
Subject: [PATCH] fix: content line break (#47)

Switch p tags to pre tags to solve line break issues.
```
Fixed the line break issue
```
---
 packages/comment-widget/src/components/CommentItem.vue |  6 +++---
 packages/comment-widget/src/components/ReplyItem.vue   | 10 ++++------
 2 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/packages/comment-widget/src/components/CommentItem.vue b/packages/comment-widget/src/components/CommentItem.vue
index 3caee3d..8d752a0 100644
--- a/packages/comment-widget/src/components/CommentItem.vue
+++ b/packages/comment-widget/src/components/CommentItem.vue
@@ -166,9 +166,9 @@ const handleUpvote = async () => {
           </div>
         </div>
         <div class="comment-content mt-2">
-          <p class="text-sm text-gray-800 dark:text-slate-200">
-            {{ comment?.spec.content }}
-          </p>
+          <pre class="text-sm text-gray-800 dark:text-slate-200">{{
+            comment?.spec.content
+          }}</pre>
         </div>
         <div class="comment-actions mt-2 flex flex-auto items-center gap-1.5">
           <div
diff --git a/packages/comment-widget/src/components/ReplyItem.vue b/packages/comment-widget/src/components/ReplyItem.vue
index 9666078..7658596 100644
--- a/packages/comment-widget/src/components/ReplyItem.vue
+++ b/packages/comment-widget/src/components/ReplyItem.vue
@@ -129,8 +129,7 @@ const handleUpvote = async () => {
           </div>
         </div>
         <div class="reply-content mt-2">
-          <p class="text-sm text-gray-800 dark:text-slate-200">
-            <a
+          <pre class="text-sm text-gray-800 dark:text-slate-200"><a
               v-if="quoteReply"
               class="mr-1 inline-flex flex-row items-center gap-1 rounded bg-gray-200 py-0.5 px-1 text-xs font-medium text-gray-600 hover:text-blue-500 hover:underline dark:bg-slate-700 dark:text-slate-200 dark:hover:text-slate-100"
               :href="`#reply-${quoteReply.metadata.name}`"
@@ -139,10 +138,9 @@ const handleUpvote = async () => {
             >
               <MdiReply />
               <span>{{ quoteReply.owner.displayName }}</span>
-            </a>
-            <br v-if="quoteReply" />
-            {{ reply.spec.content }}
-          </p>
+            </a><br v-if="quoteReply" />{{
+              reply.spec.content
+            }}</pre>
         </div>
         <div class="reply-actions mt-2 flex flex-auto items-center gap-1">
           <div