Fix truncating logic to take into account bulletpoints and text written on separate lines

src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/DashboardWidgets/NewsItem.vue

@@ -41,6 +41,11 @@ const props = defineProps({
         type: Number,
         required: false,
         default: 200,
+    },
+    maxLines: {
+        type: Number,
+        required: false,
+        default: 3
     }
 })
 
@@ -58,14 +63,26 @@ const closeModal = () => {
 };
 
 const shouldTruncate = (content: string): boolean => {
-    return content.length > props.maxLength;
+    const lines = content.split('\n');
+
+    // Check if any line exceeds the maximum length
+    const tooManyLines = lines.length > props.maxLines;
+
+    return content.length > props.maxLength || tooManyLines;
 };
 
 const truncateContent = (content: string): string => {
-    if (shouldTruncate(content)) {
+    // if (shouldTruncate(content)) {
         let truncatedContent = content.slice(0, props.maxLength);
         let linkDepth = 0;
         let linkStartIndex = -1;
+        const lines = content.split('\n');
+
+        // Truncate if amount of lines are too many
+        if (lines.length > props.maxLines) {
+            const truncatedContent = lines.slice(0, props.maxLines).join('\n').trim();
+            return truncatedContent + '...';
+        }
 
         for (let i = 0; i < truncatedContent.length; i++) {
             const char = truncatedContent[i];
@@ -98,13 +115,15 @@ const truncateContent = (content: string): string => {
         truncatedContent += '...';
 
         return truncatedContent;
-    } else {
-        return content;
-    }
+    // }
+    // else {
+    //     return content;
+    // }
 };
 
 const convertMarkdownToHtml = (markdown: string): string => {
     const rawHtml = marked(markdown);
+    // console.log(rawHtml)
     return DOMPurify.sanitize(rawHtml)
 };
 
@@ -130,7 +149,7 @@ h2 {
 }
 
 .content {
-    max-height: 100px; /* Adjust the max height as needed */
+    max-height: 12em;
     overflow: hidden;
 }
 
@@ -144,7 +163,7 @@ button {
 }
 
 .read-more {
-    color: #3498db; /* Adjust the color as needed */
+    color: #3498db;
     cursor: pointer;
 }