Preserve submitted matchmaking text formatting without altering wording.

This keeps profile copy unchanged while rendering line breaks and spacing consistently for better readability.

Made-with: Cursor

Author: bernardhanna

resources/js/components/matchmaking/ToolCard.vue

@@ -71,7 +71,7 @@
           class="relative flex-grow text-slate-500 text-[16px] leading-[22px] mb-2 overflow-hidden"
           style="height: auto"
         >
-          <div v-html="tool.description" />
+          <div v-html="formatMultiline(tool.description)" />
 
           <div
             v-if="needShowMore"
@@ -121,6 +121,19 @@ export default {
     };
   },
   methods: {
+    escapeHtml(value = '') {
+      return String(value)
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#39;');
+    },
+    formatMultiline(value) {
+      if (!value) return '';
+      const normalized = String(value).replace(/\r\n?/g, '\n');
+      return this.escapeHtml(normalized).replace(/\n/g, '<br>');
+    },
     computeDescriptionHeight() {
       const containerEl = this.$refs.descriptionContainerRef;
       const descriptionEl = this.$refs.descriptionRef;

resources/js/components/matchmaking/ToolDetailCard.vue

@@ -17,7 +17,7 @@
             <p
               v-if="isOrganisation"
               class="text-[#20262C] font-normal text-2xl p-0 mb-10"
-              v-html="data.description"
+              v-html="formatMultiline(data.description)"
             />
 
             <h3
@@ -72,7 +72,7 @@
                     <p
                       v-for="detail in item.list"
                       class="p-0 pb-4 w-full"
-                      v-html="detail"
+                      v-html="formatMultiline(detail)"
                     />
                   </div>
                 </div>
@@ -113,7 +113,7 @@
               <p
                 v-if="isOrganisation"
                 class="p-0 text-slate-500 text-xl font-normal"
-                v-html="data.description"
+                v-html="formatMultiline(data.description)"
               />
             </div>
           </div>
@@ -307,6 +307,20 @@ export default {
       }
     };
 
+    const escapeHtml = (value = '') =>
+      String(value)
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#39;');
+
+    const formatMultiline = (value) => {
+      if (!value) return '';
+      const normalized = String(value).replace(/\r\n?/g, '\n');
+      return escapeHtml(normalized).replace(/\n/g, '<br>');
+    };
+
     const orgData = computed(() => {
       const org = profileData.value;
       if (org.type !== 'organisation') return null;
@@ -510,6 +524,7 @@ export default {
       showAboutIndexes,
       handleToggleAbout,
       setDescriptionRef,
+      formatMultiline,
     };
   },
 };