From 836f63729859061b97f8b653806f14e433801c76 Mon Sep 17 00:00:00 2001
From: Rayson Yeap <88478542+Respirayson@users.noreply.github.com>
Date: Sun, 7 Jul 2024 11:19:38 +0800
Subject: [PATCH] [#12578] `@` sign is shown as `&#64;` when viewing essay
 question submission page (#13142)

* Add decoding html entity functionality

* Add unit tests

---------

Co-authored-by: domoberzin <74132255+domoberzin@users.noreply.github.com>
---
 ...t-question-edit-answer-form.component.html |  2 +-
 ...uestion-edit-answer-form.component.spec.ts | 24 +++++++++++++++++++
 ...ext-question-edit-answer-form.component.ts | 10 ++++++++
 3 files changed, 35 insertions(+), 1 deletion(-)

diff --git a/src/web/app/components/question-types/question-edit-answer-form/text-question-edit-answer-form.component.html b/src/web/app/components/question-types/question-edit-answer-form/text-question-edit-answer-form.component.html
index bc9a583b9bf..5893d2ba784 100644
--- a/src/web/app/components/question-types/question-edit-answer-form/text-question-edit-answer-form.component.html
+++ b/src/web/app/components/question-types/question-edit-answer-form/text-question-edit-answer-form.component.html
@@ -1,5 +1,5 @@
 <div class="plain-text-area" *ngIf="!questionDetails.shouldAllowRichText">
-  <textarea [ngModel]="responseDetails.answer" (ngModelChange)="triggerResponseDetailsChange('answer', $event)" [attr.aria-label]="getAriaLabel()" [disabled]="isDisabled"></textarea>
+  <textarea [ngModel]="decodedAnswer" (ngModelChange)="triggerResponseDetailsChange('answer', $event)" [attr.aria-label]="getAriaLabel()" [disabled]="isDisabled"></textarea>
 </div>
 <tm-rich-text-editor *ngIf="questionDetails.shouldAllowRichText" role="textbox" [attr.aria-label]="getAriaLabel()" [richText]="responseDetails.answer" (richTextChange)="triggerResponseDetailsChange('answer', $event)" [isDisabled]="isDisabled"></tm-rich-text-editor>
 <div class="margin-top-7px text-secondary text-end">
diff --git a/src/web/app/components/question-types/question-edit-answer-form/text-question-edit-answer-form.component.spec.ts b/src/web/app/components/question-types/question-edit-answer-form/text-question-edit-answer-form.component.spec.ts
index c15aba100cd..555268b40b6 100644
--- a/src/web/app/components/question-types/question-edit-answer-form/text-question-edit-answer-form.component.spec.ts
+++ b/src/web/app/components/question-types/question-edit-answer-form/text-question-edit-answer-form.component.spec.ts
@@ -2,6 +2,7 @@ import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { FormsModule } from '@angular/forms';
 import { TextQuestionEditAnswerFormComponent } from './text-question-edit-answer-form.component';
+import { FeedbackQuestionType } from '../../../../types/api-request';
 import { RichTextEditorModule } from '../../rich-text-editor/rich-text-editor.module';
 
 describe('TextQuestionEditAnswerFormComponent', () => {
@@ -22,10 +23,33 @@ describe('TextQuestionEditAnswerFormComponent', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(TextQuestionEditAnswerFormComponent);
     component = fixture.componentInstance;
+    component.questionDetails = {
+      shouldAllowRichText: false,
+      questionType: FeedbackQuestionType.TEXT,
+      questionText: 'Sample question',
+      recommendedLength: 50,
+    };
+    component.responseDetails = { answer: '', questionType: FeedbackQuestionType.TEXT };
     fixture.detectChanges();
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should decode HTML entities for @ sign in plain-text mode', () => {
+    component.questionDetails.shouldAllowRichText = false;
+    component.responseDetails.answer = 'Test &#64; symbol';
+    fixture.detectChanges();
+
+    expect(component.decodedAnswer).toBe('Test @ symbol');
+  });
+
+  it('should decode HTML entities for apostrophe in plain-text mode', () => {
+    component.questionDetails.shouldAllowRichText = false;
+    component.responseDetails.answer = 'It&#39;s a test';
+    fixture.detectChanges();
+
+    expect(component.decodedAnswer).toBe("It's a test");
+  });
 });
diff --git a/src/web/app/components/question-types/question-edit-answer-form/text-question-edit-answer-form.component.ts b/src/web/app/components/question-types/question-edit-answer-form/text-question-edit-answer-form.component.ts
index 670b1659d89..ce5f5613016 100644
--- a/src/web/app/components/question-types/question-edit-answer-form/text-question-edit-answer-form.component.ts
+++ b/src/web/app/components/question-types/question-edit-answer-form/text-question-edit-answer-form.component.ts
@@ -26,6 +26,12 @@ export class TextQuestionEditAnswerFormComponent
     super(DEFAULT_TEXT_QUESTION_DETAILS(), DEFAULT_TEXT_RESPONSE_DETAILS());
   }
 
+  decodeHtml(html: string): string {
+    const txt = document.createElement('textarea');
+    txt.innerHTML = html;
+    return txt.value;
+  }
+
   get wordCount(): number {
     return this.responseDetails.answer.split(/\s/g)
         .filter((item: string) => item.match(/\w/)).length;
@@ -41,4 +47,8 @@ export class TextQuestionEditAnswerFormComponent
 
     return this.wordCount > lowerLimit && this.wordCount < upperLimit;
   }
+
+  get decodedAnswer(): string {
+    return this.decodeHtml(this.responseDetails.answer);
+  }
 }