fix: content line break (#47)

Switch p tags to pre tags to solve line break issues. ``` Fixed the line break issue ```
halo-dev · Jul 12, 2023 · 6a0909b · 6a0909b
1 parent a8b3bc0
commit 6a0909b
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 9 deletions.
diff --git 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
@@ -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