From 53f5eab757393fdd03397515da34a992bfd29d51 Mon Sep 17 00:00:00 2001
From: Bnyro <bnyro@tutanota.com>
Date: Mon, 11 Sep 2023 19:13:05 +0200
Subject: [PATCH] feat: make long comments collapsable

---
 src/components/CollapsableText.vue | 10 +++++++---
 src/components/CommentItem.vue     | 11 +++--------
 2 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/src/components/CollapsableText.vue b/src/components/CollapsableText.vue
index 39a07886..6c0e55c0 100644
--- a/src/components/CollapsableText.vue
+++ b/src/components/CollapsableText.vue
@@ -4,9 +4,9 @@
         <span v-if="showFullText" v-html="fullText()" />
         <!-- eslint-disable-next-line vue/no-v-html -->
         <span v-else v-html="colapsedText()" />
-        <span v-if="text.length > 100 && !showFullText">...</span>
+        <span v-if="text.length > visibleLimit && !showFullText">...</span>
         <button
-            v-if="text.length > 100"
+            v-if="text.length > visibleLimit"
             class="block whitespace-normal font-semibold text-neutral-500 hover:underline"
             @click="showFullText = !showFullText"
         >
@@ -24,6 +24,10 @@ export default {
             type: String,
             default: null,
         },
+        visibleLimit: {
+            type: Number,
+            default: 100,
+        },
     },
     data() {
         return {
@@ -35,7 +39,7 @@ export default {
             return purifyHTML(rewriteDescription(this.text));
         },
         colapsedText() {
-            return purifyHTML(rewriteDescription(this.text.slice(0, 100)));
+            return purifyHTML(rewriteDescription(this.text.slice(0, this.visibleLimit)));
         },
     },
 };
diff --git a/src/components/CommentItem.vue b/src/components/CommentItem.vue
index 45d53132..3eb69524 100644
--- a/src/components/CommentItem.vue
+++ b/src/components/CommentItem.vue
@@ -29,7 +29,7 @@
                 <div class="comment-meta mb-1.5 text-sm" v-text="comment.commentedTime" />
             </div>
             <!-- eslint-disable-next-line vue/no-v-html -->
-            <div class="whitespace-pre-wrap" v-html="purifiedText" />
+            <CollapsableText :text="comment.commentText" :visible-limit="500" />
             <div class="comment-footer mt-1 flex items-center">
                 <div class="i-fa6-solid:thumbs-up" />
                 <span class="ml-1" v-text="numberFormat(comment.likeCount)" />
@@ -61,9 +61,10 @@
 </template>
 
 <script>
-import { purifyHTML } from "@/utils/HtmlUtils";
+import CollapsableText from "./CollapsableText.vue";
 
 export default {
+    components: { CollapsableText },
     props: {
         comment: {
             type: Object,
@@ -82,18 +83,12 @@ export default {
             nextpage: null,
         };
     },
-    computed: {
-        purifiedText() {
-            return purifyHTML(this.comment.commentText);
-        },
-    },
     methods: {
         async loadReplies() {
             if (!this.showingReplies && this.loadingReplies) {
                 this.showingReplies = true;
                 return;
             }
-
             this.loadingReplies = true;
             this.showingReplies = true;
             this.fetchJson(this.apiUrl() + "/nextpage/comments/" + this.videoId, {