Fix oppia#18505 : Corrected character-counting logic in the hint edit…

…or (oppia#19518) * Corrected Logic for Hint Editor * Corrected Logic for Hint Editor * Corrected Logic for Hint Editor * Corrected Logic for Hint Editor * Corrected Logic for Hint Editor * Corrected frontend tests * Added logic for other RTE Components * Added logic for other RTE Components * Added Try-Catch block and tests * Added Try-Catch block and tests * Added hint logic in Hint-Modal and tests * Changes logic * Extracting Tag Id to check tag * Combined function * Removed getWeigthForTextNode() * Added JsDoc * Added detailed comments * Minor Indentation fixes * Length word standardized * Removed Slice() * Changed string cast to type assertion * Corrected comment
Ash-2k3 · Mar 3, 2024 · e57a95b · e57a95b
1 parent 215c0aa
commit e57a95b
Show file tree

Hide file tree

Showing 7 changed files with 652 additions and 85 deletions.
diff --git a/core/templates/components/state-directives/hint-editor/hint-editor.component.spec.ts b/core/templates/components/state-directives/hint-editor/hint-editor.component.spec.ts
@@ -118,11 +118,11 @@ describe('HintEditorComponent', () => {
 
   it('should check if hint HTML length exceeds 500 characters', () => {
     component.hint = new Hint(
-      SubtitledHtml.createDefault('a'.repeat(500), 'contentID'));
+      SubtitledHtml.createDefault(`<p>${'a'.repeat(500)}</p>`, 'contentID'));
     expect(component.isHintLengthExceeded()).toBe(false);
 
     component.hint = new Hint(
-      SubtitledHtml.createDefault('a'.repeat(501), 'contentID'));
+      SubtitledHtml.createDefault(`<p>${'a'.repeat(501)}</p>`, 'contentID'));
     expect(component.isHintLengthExceeded()).toBe(true);
   });
 

diff --git a/core/templates/components/state-directives/hint-editor/hint-editor.component.ts b/core/templates/components/state-directives/hint-editor/hint-editor.component.ts
@@ -25,6 +25,8 @@ import { ContextService } from 'services/context.service';
 import { EditabilityService } from 'services/editability.service';
 import { ExternalSaveService } from 'services/external-save.service';
 import { Hint } from 'domain/exploration/hint-object.model';
+import { ExplorationEditorPageConstants } from 'pages/exploration-editor-page/exploration-editor-page.constants';
+import { CALCULATION_TYPE_CHARACTER, HtmlLengthService } from 'services/html-length.service';
 
 interface HintFormSchema {
   type: string;
@@ -53,6 +55,7 @@ export class HintEditorComponent implements OnInit, OnDestroy {
     private contextService: ContextService,
     private editabilityService: EditabilityService,
     private externalSaveService: ExternalSaveService,
+    private htmlLengthService: HtmlLengthService,
   ) {}
 
   getSchema(): HintFormSchema {
@@ -71,7 +74,10 @@ export class HintEditorComponent implements OnInit, OnDestroy {
   }
 
   isHintLengthExceeded(): boolean {
-    return (this.hint.hintContent._html.length > 500);
+    return Boolean(
+      this.htmlLengthService.computeHtmlLength(
+        this.hint.hintContent._html, CALCULATION_TYPE_CHARACTER) >
+        ExplorationEditorPageConstants.HINT_CHARACTER_LIMIT);
   }
 
   saveThisHint(): void {

diff --git a/...contributor-dashboard-page/contributions-and-review/contributions-and-review.component.ts b/...contributor-dashboard-page/contributions-and-review/contributions-and-review.component.ts
@@ -39,7 +39,7 @@ import { ContributionAndReviewService } from '../services/contribution-and-revie
 import { ContributionOpportunitiesService } from '../services/contribution-opportunities.service';
 import { OpportunitiesListComponent } from '../opportunities-list/opportunities-list.component';
 import { PlatformFeatureService } from 'services/platform-feature.service';
-import { HtmlLengthService } from 'services/html-length.service';
+import { CALCULATION_TYPE_WORD, HtmlLengthService } from 'services/html-length.service';
 import { HtmlEscaperService } from 'services/html-escaper.service';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { ExplorationOpportunitySummary } from 'domain/opportunity/exploration-opportunity-summary.model';
@@ -259,8 +259,9 @@ export class ContributionsAndReview
           this.activeTabType === this.TAB_TYPE_REVIEWS ? 'Review' : 'View'),
         translationWordCount: (
           this.isReviewTranslationsTab() && this.activeExplorationId) ? (
-            this.htmlLengthService.computeHtmlLengthInWords(
-              suggestion.change_cmd.content_html)) : undefined
+            this.htmlLengthService.computeHtmlLength(
+              suggestion.change_cmd.content_html,
+              CALCULATION_TYPE_WORD)) : undefined
       };
 
       translationContributionsSummaryList.push(requiredData);

diff --git a/...oration-editor-page/editor-tab/templates/modal-templates/add-hint-modal.component.spec.ts b/...oration-editor-page/editor-tab/templates/modal-templates/add-hint-modal.component.spec.ts
@@ -109,16 +109,16 @@ describe('Add Hint Modal Component', () => {
   });
 
   it('should check if hint length is not valid', () => {
-    let hint1 = '<p>This is a hint </p>';
+    let hint1 = '<p>This is a hint.</p>';
     let hint2 = hint1.repeat(35);
 
     expect(component.isHintLengthExceeded(hint2)).toBe(true);
   });
 
   it('should update hint', () => {
-    component.tmpHint = 'hint';
+    component.tmpHint = '<p>hint</p>';
 
-    let hint = 'new hint';
+    let hint = '<p>new hint</p>';
     component.updateLocalHint(hint);
 
     expect(component.tmpHint).toEqual(hint);

diff --git a/.../exploration-editor-page/editor-tab/templates/modal-templates/add-hint-modal.component.ts b/.../exploration-editor-page/editor-tab/templates/modal-templates/add-hint-modal.component.ts
@@ -26,6 +26,7 @@ import { Hint } from 'domain/exploration/hint-object.model';
 import { ContextService } from 'services/context.service';
 import { GenerateContentIdService } from 'services/generate-content-id.service';
 import { ExplorationEditorPageConstants } from 'pages/exploration-editor-page/exploration-editor-page.constants';
+import { CALCULATION_TYPE_CHARACTER, HtmlLengthService } from 'services/html-length.service';
 
 interface HintFormSchema {
   type: string;
@@ -57,7 +58,8 @@ export class AddHintModalComponent
     private contextService: ContextService,
     private generateContentIdService: GenerateContentIdService,
     private ngbActiveModal: NgbActiveModal,
-    private stateHintsService: StateHintsService
+    private stateHintsService: StateHintsService,
+    private htmlLengthService: HtmlLengthService,
   ) {
     super(ngbActiveModal);
   }
@@ -73,20 +75,10 @@ export class AddHintModalComponent
   }
 
   isHintLengthExceeded(tmpHint: string): boolean {
-    // The variable charCount stores the number of remaining characters after
-    // removing the html tags from tmpHint.
-    const domParser = new DOMParser();
-    let charCount = 0;
-    if (tmpHint.length) {
-      let dom = domParser.parseFromString(tmpHint, 'text/html');
-      if (dom.body.textContent) {
-        charCount = dom.body.textContent.replace(
-          ExplorationEditorPageConstants.NEW_LINE_REGEX, '').length;
-      }
-    }
-    // Note: charCount does not include the characters from Rich Text ELements.
     return Boolean(
-      charCount > ExplorationEditorPageConstants.HINT_CHARACTER_LIMIT);
+      this.htmlLengthService.computeHtmlLength(
+        tmpHint, CALCULATION_TYPE_CHARACTER) >
+        ExplorationEditorPageConstants.HINT_CHARACTER_LIMIT);
   }
 
   updateLocalHint($event: string): void {