[#12578] @ sign is shown as @ when viewing essay question submission page

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">

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 @ 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's a test';
+    fixture.detectChanges();
+
+    expect(component.decodedAnswer).toBe("It's a test");
+  });
 });

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);
+  }
 }