TD-5390-Jodit editor validation added

Author: Auldrin Possa

DigitalLearningSolutions.Web/Controllers/Support/RequestSupportTicketController.cs

@@ -137,7 +137,7 @@ public IActionResult SetRequestSummary(DlsSubApplication dlsSubApplication, Requ
             // Check if RequestDescription is null or contains any default empty tags ("<p><br></p>").  
             // This ensures that when a user navigates to the submit page and returns to SetRequestSummary,  
             // removing the description completely results in an actual empty value rather than leftover HTML tags.
-            if (requestDetailsmodel.RequestDescription == "<p><br></p>")
+            if (string.IsNullOrEmpty(StringHelper.StripHtmlTags(requestDetailsmodel.RequestDescription)))
             {
                 ModelState.AddModelError("RequestDescription", "Please enter request description");
             }
@@ -246,7 +246,7 @@ public IActionResult SupportSummary(DlsSubApplication dlsSubApplication, Support
             var data = multiPageFormService.GetMultiPageFormData<RequestSupportTicketData>(
                 MultiPageFormDataFeature.AddCustomWebForm("RequestSupportTicketCWF"),
                 TempData
-            ).GetAwaiter().GetResult(); 
+            ).GetAwaiter().GetResult();
             var model = new SupportSummaryViewModel(data);
             return View("SupportTicketSummaryPage", model);
         }
@@ -262,7 +262,7 @@ public IActionResult SubmitSupportSummary(DlsSubApplication dlsSubApplication, S
             var data = multiPageFormService.GetMultiPageFormData<RequestSupportTicketData>(
                 MultiPageFormDataFeature.AddCustomWebForm("RequestSupportTicketCWF"),
                 TempData
-            ).GetAwaiter().GetResult(); 
+            ).GetAwaiter().GetResult();
             data.GroupId = configuration.GetFreshdeskCreateTicketGroupId();
             data.ProductId = configuration.GetFreshdeskCreateTicketProductId();
             List<RequestAttachment> RequestAttachmentList = new List<RequestAttachment>();
@@ -354,7 +354,7 @@ private void setRequestSupportTicketData(RequestSupportTicketData requestSupport
             {
                 foreach (var item in requestAttachmentmodel.RequestAttachment)
                 {
-                    totalFileSize = totalFileSize + item.SizeMb??0;
+                    totalFileSize = totalFileSize + item.SizeMb ?? 0;
                 }
             }
             foreach (var item in requestAttachmentmodel.ImageFiles)

DigitalLearningSolutions.Web/Helpers/StringHelper.cs

@@ -26,8 +26,8 @@ public static string StripHtmlTags(string input)
 
             // Remove HTML tags
             string result = Regex.Replace(input, "<.*?>", string.Empty).Trim();
-
-            return string.IsNullOrEmpty(result) ? string.Empty : result;
+            result = System.Net.WebUtility.HtmlDecode(result);
+            return string.IsNullOrEmpty(result.Trim()) ? string.Empty : result;
         }
     }
 }

DigitalLearningSolutions.Web/Scripts/frameworks/htmleditor.ts

@@ -1,4 +1,4 @@
-import { Jodit } from 'jodit';
+import { Jodit } from 'jodit';
 import DOMPurify from 'dompurify';
 
 let jodited = false;
@@ -70,5 +70,31 @@ if (jodited === false) {
       const clean = DOMPurify.sanitize(editor.editor.innerHTML);
       editor.editor.innerHTML = clean;
     });
+    const textarea = document.querySelector('.nhsuk-textarea.html-editor.nhsuk-input--error') as HTMLTextAreaElement | null;
+    if (textarea) {
+      const editorDiv = document.querySelector('.jodit-container.jodit.jodit_theme_default.jodit-wysiwyg_mode') as HTMLDivElement | null;
+      editorDiv?.classList.add('jodit-container', 'jodit', 'jodit_theme_default', 'jodit-wysiwyg_mode', 'jodit-error');
+    }
+
+    const summary = document.querySelector('.nhsuk-list.nhsuk-error-summary__list') as HTMLDivElement | null;
+
+    if (summary) {
+      summary.addEventListener('click', (e: Event) => {
+        if (textarea) {
+          const textareaId = textarea.id.toString();
+          const target = e.target as HTMLElement;
+          if (target.tagName.toLowerCase() === 'a') {
+            const href = (target as HTMLAnchorElement).getAttribute('href');
+
+            if (href && href.includes(textareaId)) {
+              const editorArea = document.querySelector('.jodit-wysiwyg') as HTMLDivElement | null;
+              editorArea?.focus();
+              editorArea?.scrollIntoView({ behavior: 'smooth', block: 'center' });
+              e.preventDefault();
+            }
+          }
+        }
+      });
+    }
   }
 }

DigitalLearningSolutions.Web/Styles/jodit.scss

@@ -1 +1,6 @@
 @use "jodit/build/jodit.min";
+
+.jodit-error {
+  border: 2px solid red !important;
+  border-radius: 4px;
+}

DigitalLearningSolutions.Web/ViewModels/Support/RequestSupportTicket/RequestSummaryViewModel.cs

@@ -21,7 +21,6 @@ public RequestSummaryViewModel(RequestSupportTicketData data)
         [Required(ErrorMessage = "Please enter request summary")]
         public string? RequestSubject { get; set; }
 
-        [Required(ErrorMessage = "Please enter request description")]
         public string? RequestDescription { get; set; }
 
         public int? RequestTypeId { get; set; }

DigitalLearningSolutions.Web/Views/Support/RequestSupportTicket/RequestSummary.cshtml

@@ -40,17 +40,15 @@
                                autocomplete="given-name"
                                css-class=""
                                required="true" />
-                <nhs-form-group nhs-validation-for="RequestDescription">
-                    <vc:text-area asp-for="RequestDescription"
-                                  label="Describe your problem or request"
-                                  populate-with-current-value="true"
-                                  rows="5"
-                                  spell-check="false"
-                                  hint-text="If you are reporting a problem, please tell us exactly where it occurs and steps to recreate it. If you need to add screenshots, you will be able to do this in the next step."
-                                  css-class=""
-                                  character-count="null">
-                    </vc:text-area>
-                </nhs-form-group>
+                <vc:text-area asp-for="RequestDescription"
+                              label="Describe your problem or request"
+                              populate-with-current-value="true"
+                              rows="5"
+                              spell-check="false"
+                              hint-text="If you are reporting a problem, please tell us exactly where it occurs and steps to recreate it. If you need to add screenshots, you will be able to do this in the next step."
+                              css-class="html-editor"
+                              character-count="null">
+                </vc:text-area>
                 <button class="nhsuk-button" type="submit">Next</button>
             </form>