From 2db5009911982482fadbbb2381db23192ae15452 Mon Sep 17 00:00:00 2001
From: "Tom (plebeius.eth)" <tom@plebbit.com>
Date: Sat, 14 Sep 2024 17:34:56 +0200
Subject: [PATCH] fix(popular threads box): don't display markdown syntax,
 remove white space

---
 .../popular-threads-box.tsx                   | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/views/home/popular-threads-box/popular-threads-box.tsx b/src/views/home/popular-threads-box/popular-threads-box.tsx
index f06e73de..3d11925a 100644
--- a/src/views/home/popular-threads-box/popular-threads-box.tsx
+++ b/src/views/home/popular-threads-box/popular-threads-box.tsx
@@ -10,6 +10,7 @@ import { CatalogPostMedia } from '../../../components/catalog-row';
 import LoadingEllipsis from '../../../components/loading-ellipsis';
 import BoxModal from '../box-modal';
 import { nsfwTags } from '../home';
+import removeMarkdown from 'remove-markdown';
 
 interface PopularThreadProps {
   post: Comment;
@@ -17,11 +18,19 @@ interface PopularThreadProps {
   boardShortAddress: string;
 }
 
-const PopularThreadCard = ({ post, boardTitle, boardShortAddress }: PopularThreadProps) => {
-  const { cid, subplebbitAddress, title } = post || {};
-  const commentMediaInfo = getCommentMediaInfo(post);
+const ContentPreview = ({ content, maxLength = 99 }: { content: string; maxLength?: number }) => {
+  const plainText = removeMarkdown(content).trim().replaceAll('&nbsp;', '').replace(/\n\n/g, '\n').replaceAll('\n\n', '');
 
-  let content = post?.content?.replace(/\n\n/g, '\n');
+  const truncatedText = plainText.length > maxLength ? `${plainText.substring(0, maxLength).trim()}...` : plainText;
+
+  console.log(content);
+
+  return truncatedText;
+};
+
+const PopularThreadCard = ({ post, boardTitle, boardShortAddress }: PopularThreadProps) => {
+  const { cid, content, subplebbitAddress, title } = post || {};
+  const commentMediaInfo = getCommentMediaInfo(post);
 
   return (
     <div className={styles.popularThread} key={cid}>
@@ -38,7 +47,7 @@ const PopularThreadCard = ({ post, boardTitle, boardShortAddress }: PopularThrea
             {content && ': '}
           </>
         )}
-        {content && (content.length > 99 ? `${content.substring(0, 99).trim()}...` : `${content}`)}
+        {content && <ContentPreview content={content} maxLength={99} />}
       </div>
     </div>
   );