read bold text

postrify-frontend/src/app/components/post-detail/post-detail.component.ts

@@ -6,11 +6,12 @@ import { PostService } from '../../services/post.service';
 import { CommonModule } from '@angular/common';
 import { ToastService } from '../../services/toast.service';
 import { ReadingTimePipe } from '../../pipes/reading-time.pipe';
+import { BoldTextPipe } from '../../pipes/bold-text.pipe';
 
 @Component({
   selector: 'app-post-detail',
   standalone: true,
-  imports: [CommonModule, ReadingTimePipe],
+  imports: [CommonModule, ReadingTimePipe, BoldTextPipe],
   template: `
     <div class="post-detail-container">
       @if (post) {
@@ -92,7 +93,7 @@ import { ReadingTimePipe } from '../../pipes/reading-time.pipe';
             }}</span>
             <span class="date">{{ post.createdAt | date: 'mediumDate' }}</span>
           </div>
-          <p class="post-body">{{ post.content }}</p>
+          <p class="post-body" [innerHTML]="post.content | boldText"></p>
         </article>
       } @else {
         <div class="loading">

postrify-frontend/src/app/components/post-update/post-update.component.ts

@@ -45,10 +45,10 @@ import { ToastService } from '../../services/toast.service';
             [(ngModel)]="post.content"
             required
             minlength="10"
-            maxlength="1000"
+            maxlength="5000"
             #contentInput="ngModel"
           ></textarea>
-          <div class="character-count">{{ post.content.length }}/1000</div>
+          <div class="character-count">{{ post.content.length }}/5000</div>
           @if (
             contentInput.invalid && (contentInput.dirty || contentInput.touched)
           ) {

postrify-frontend/src/app/pipes/bold-text.pipe.spec.ts

@@ -0,0 +1,8 @@
+import { BoldTextPipe } from './bold-text.pipe';
+
+describe('BoldTextPipe', () => {
+  it('create an instance', () => {
+    const pipe = new BoldTextPipe();
+    expect(pipe).toBeTruthy();
+  });
+});

postrify-frontend/src/app/pipes/bold-text.pipe.ts

@@ -0,0 +1,16 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+
+@Pipe({
+  name: 'boldText',
+  standalone: true,
+})
+export class BoldTextPipe implements PipeTransform {
+  constructor(private sanitizer: DomSanitizer) {}
+
+  transform(value: string): SafeHtml {
+    if (!value) return '';
+    const boldedText = value.replace(/\*(.*?)\*/g, '<strong>$1</strong>');
+    return this.sanitizer.bypassSecurityTrustHtml(boldedText);
+  }
+}