82 add rich text editor for comments etc

Directory.Packages.props

@@ -9,9 +9,12 @@
     <PackageVersion Include="FluentValidation.AspNetCore" Version="11.3.0" />
     <PackageVersion Include="GaEpd.AppLibrary" Version="5.2.1" />
     <PackageVersion Include="GaEpd.FileService" Version="3.1.1" />
+    <PackageVersion Include="HtmlSanitizer" Version="8.0.865" />
     <PackageVersion Include="JetBrains.Annotations" Version="2023.3.0" />
     <PackageVersion Include="LigerShark.WebOptimizer.Core" Version="3.0.405" />
     <PackageVersion Include="MailKit" Version="4.5.0" />
+    <PackageVersion Include="Markdig" Version="0.37.0" />
+    <PackageVersion Include="Markdig.Signed" Version="0.37.0" />
     <PackageVersion Include="Microsoft.AspNetCore.Identity.EntityFrameworkCore" Version="8.0.4" />
     <PackageVersion Include="Microsoft.EntityFrameworkCore.Design" Version="8.0.4">
       <PrivateAssets>all</PrivateAssets>

src/AppServices/AutoMapper/AutoMapperProfile.cs

@@ -31,6 +31,7 @@ public AutoMapperProfile()
 
         CreateMap<WorkEntry, WorkEntrySearchResultDto>();
         CreateMap<WorkEntry, WorkEntryCreateDto>();
+        CreateMap<WorkEntry, WorkEntryUpdateDto>();
         CreateMap<WorkEntry, WorkEntryViewDto>();
     }
 }

src/AppServices/WorkEntries/CommandDto/WorkEntryCreateDto.cs

@@ -4,6 +4,7 @@ namespace MyApp.AppServices.WorkEntries.CommandDto;
 
 public record WorkEntryCreateDto : IWorkEntryCommandDto
 {
+    [Display(Name = "Entry Type")]
     public Guid EntryTypeId { get; init; }
 
     [DataType(DataType.MultilineText)]

src/AppServices/WorkEntries/CommandDto/WorkEntryUpdateDto.cs

@@ -9,6 +9,7 @@ public record WorkEntryUpdateDto : IWorkEntryCommandDto
     public bool IsDeleted { get; init; }
 
     // Data
+    [Display(Name = "Entry Type")]
     public Guid EntryTypeId { get; init; }
 
     [DataType(DataType.MultilineText)]

src/AppServices/WorkEntries/Validators/WorkEntryUpdateValidator.cs

@@ -0,0 +1,12 @@
+using FluentValidation;
+using MyApp.AppServices.WorkEntries.CommandDto;
+
+namespace MyApp.AppServices.WorkEntries.Validators;
+
+public class WorkEntryUpdateValidator : AbstractValidator<WorkEntryUpdateDto>
+{
+    public WorkEntryUpdateValidator()
+    {
+        RuleFor(dto => dto.Notes).NotEmpty();
+    }
+}

src/TestData/Constants/TextData.cs

@@ -32,9 +32,9 @@ public static class TextData
         Environment.NewLine +
         "Pudding ice cream chocolate sweet roll jelly.";
 
-    public const string Paragraph = "Oat cake gummi bears danish I love tart muffin bonbon I love. Danish tiramisu " +
+    public const string Paragraph = "**Oat cake gummi** bears danish I *love* tart muffin bonbon I love. Danish tiramisu " +
         "tootsie roll tart marshmallow icing tootsie roll. Shortbread tiramisu tiramisu chocolate bar biscuit. " +
-        "Liquorice I love biscuit bonbon jujubes croissant.";
+        "~~Liquorice I love biscuit bonbon jujubes croissant.~~";
 
     public static readonly string MultipleParagraphs = "Dessert cheesecake ice cream fruitcake chocolate bar cookie." +
         Environment.NewLine +
@@ -44,6 +44,23 @@ public static class TextData
         "candy. Oat cake muffin tart bear claw bonbon lollipop. Marshmallow donut icing chocolate bar dessert." +
         Environment.NewLine +
         Environment.NewLine +
+        "## Oat cake muffin" +
+        Environment.NewLine +
+        Environment.NewLine +
         "Dessert cheesecake ice cream fruitcake chocolate bar pie cookie. Croissant marzipan jelly cupcake cupcake " +
-        "lemon drops jelly-o. Shortbread donut pie.";
+        "lemon drops jelly-o. Shortbread donut pie." +
+        Environment.NewLine +
+        Environment.NewLine +
+        "| Dessert | Topping |" +
+        Environment.NewLine +
+        "| --- | --: |" +
+        Environment.NewLine +
+        "| lemon drops | jelly |" +
+        Environment.NewLine +
+        "| brownie | chocolate |" +
+        Environment.NewLine +
+        "| Croissant | Marshmallow |" +
+        Environment.NewLine +
+        Environment.NewLine +
+        "Lemon drops jelly-o. Shortbread donut pie.";
 }

src/TestData/WorkEntryData.cs

@@ -23,6 +23,7 @@ internal static class WorkEntryData
             ReceivedBy = UserData.GetUsers.ElementAt(1),
             ReceivedDate = DateTimeOffset.Now.AddMinutes(30),
             EntryType = EntryTypeData.GetData.ElementAt(0),
+            Notes = TextData.MultipleParagraphs,
         },
         new(new Guid("10000000-0000-0000-0000-000000000002")) // 2
         {

src/WebApp/Pages/Shared/EditorTemplates/Textarea.cshtml

@@ -1,10 +1,19 @@
 @model string
 @{
     var rows = (int?)ViewData["Rows"] ?? 2;
+    var mde = (bool?)ViewData["MDE"] ?? false;
+    var classMde = mde ? (string?)ViewData["ClassMDE"] ?? "EasyMDE" : "";
 }
 
-<div class="form-floating">
-    <textarea asp-for="@__model" class="form-control" rows="@rows.ToString()"></textarea>
-    <label asp-for="@__model" class="form-label"></label>
+<div class="@(mde ? "" : "form-floating")">
+    @if (mde)
+    {
+        <label asp-for="@__model" class="form-label"></label>
+    }
+    <textarea asp-for="@__model" class="form-control markdown @classMde" rows="@rows.ToString()"></textarea>
+    @if (!mde)
+    {
+        <label asp-for="@__model" class="form-label"></label>
+    }
     <span asp-validation-for="@__model" class="invalid-feedback"></span>
 </div>

src/WebApp/Pages/Shared/_Layout.cshtml

@@ -13,6 +13,7 @@
     <link rel="stylesheet" href="~/css/site.css" />
     <partial name="_RaygunScriptsPartial" />
     <script src="~/js/color-modes.js"></script>
+    @await RenderSectionAsync("Styles", false)
 </head>
 
 <body id="top" class="d-flex flex-column vh-100">

src/WebApp/Pages/Staff/WorkEntries/Add.cshtml

@@ -17,18 +17,20 @@
         </div>
 
         <h2>Details</h2>
+
         <div class="row">
             <div class="col-md">
                 <div class="mb-3">
                     @Html.EditorFor(model => model.Item.Notes, EditorTemplate.Textarea,
-                        additionalViewData: new { Rows = 5 })
+                        additionalViewData: new { Rows = 5, MDE = true })
                 </div>
             </div>
             <div class="col-md">
                 <div class="mb-3">
                     @Html.EditorFor(model => model.Item.EntryTypeId, EditorTemplate.Select,
                         additionalViewData: new { Items = Model.EntryTypesSelectList, Placeholder = string.Empty })
                 </div>
+
             </div>
         </div>
 
@@ -42,4 +44,10 @@
 
 @section Scripts {
     <partial name="_ValidationScriptsPartial" />
+    <script src="~/lib/easymde/dist/easymde.min.js"></script>
+    <script src="~/js/textarea-to-MDE.js" defer></script>
+}
+@section Styles {
+    <link rel="stylesheet" href="~/lib/easymde/dist/easymde.min.css" />
+    <link rel="stylesheet" href="~/css/easymde.darkmode.css"/>
 }

src/WebApp/Pages/Staff/WorkEntries/Close.cshtml

@@ -1,5 +1,6 @@
 @page "{id:Guid?}"
 @using MyApp.WebApp.Pages.Shared.EditorTemplates
+@using MyApp.WebApp.Platform.Rendering
 @model CloseModel
 
 @{
@@ -9,9 +10,17 @@
 
 <h1>@ViewData["Title"]</h1>
 
-<div class="p-3 border rounded-3">
-    <partial name="Shared/_WorkEntrySummaryPartial" model="Model.ItemView" />
-
+<div class="p-3 bg-light-subtle border rounded-3">
+    <h2 class="h4">Status</h2>
+    <p>@Model.ItemView.Status</p>
+    <h2 class="h4">Entry Type</h2>
+    <p>@Model.ItemView.EntryTypeName</p>
+    <h2 class="h4">Date Received</h2>
+    <p>@Model.ItemView.ReceivedDate</p>
+    <h2 class="h4">Notes</h2>
+    <section class="border border-info p-4 rounded mb-3">
+        @Html.Raw(MarkdownHelper.MarkdownToHtml(Model.ItemView.Notes))
+    </section>
     <form method="post">
         <div class="mb-3">
             @Html.EditorFor(model => model.EntryDto.Comments, EditorTemplate.Textarea, new { Rows = 3 })

src/WebApp/Pages/Staff/WorkEntries/Details.cshtml

@@ -3,6 +3,7 @@
 @using MyApp.AppServices.WorkEntries.Permissions
 @using MyApp.WebApp.Pages.Shared.DisplayTemplates
 @using MyApp.WebApp.Pages.Shared.EditorTemplates
+@using MyApp.WebApp.Platform.Rendering
 @model DetailsModel
 @{
     ViewData["Title"] = $"WorkEntry ID {Model.ItemView.Id.ToString()}";
@@ -85,8 +86,10 @@
 </div>
 
 <h2 class="h3">Notes</h2>
+<section class="border border-info p-4 rounded mb-3 bg-light-subtle">
+    @Html.Raw(MarkdownHelper.MarkdownToHtml(Model.ItemView.Notes))
+</section>
 
-<p class="container text-break text-pre-line">@Html.DisplayFor(_ => Model.ItemView.Notes, DisplayTemplate.StringOrPlaceholder)</p>
 
 <div class="container">
     <dl class="row">
@@ -197,7 +200,6 @@
     </div>
 }
 
-@section Scripts
-{
+@section Scripts {
     <partial name="_ValidationScriptsPartial" />
-}
+}

src/WebApp/Pages/Staff/WorkEntries/Edit.cshtml

@@ -21,7 +21,7 @@
             <div class="col-md">
                 <div class="mb-3">
                     @Html.EditorFor(model => model.Item.Notes, EditorTemplate.Textarea,
-                        additionalViewData: new { Rows = 5 })
+                        additionalViewData: new { Rows = 5, MDE = true })
                 </div>
             </div>
             <div class="col-md">
@@ -41,7 +41,14 @@
     </form>
 </div>
 
-@section Scripts
-{
+@section Scripts {
     <partial name="_ValidationScriptsPartial" />
+    <script src="~/lib/easymde/dist/easymde.min.js"></script>
+    <script src="~/lib/dompurify/purify.min.js"></script>
+    <script src="~/js/textarea-to-MDE.js" defer></script>
+}
+
+@section Styles {
+    <link rel="stylesheet" href="~/lib/easymde/dist/easymde.min.css" />
+    <link rel="stylesheet" href="~/css/easymde.darkmode.css" />
 }

src/WebApp/Platform/Rendering/Markdown.cs

@@ -0,0 +1,16 @@
+using Ganss.Xss;
+using Markdig;
+
+namespace MyApp.WebApp.Platform.Rendering
+{
+    public static class MarkdownHelper
+    {
+        public static string MarkdownToHtml(string markdown)
+        {
+            var pipeline = new MarkdownPipelineBuilder().UseBootstrap().UseAdvancedExtensions().Build();
+            var sanitizer = new HtmlSanitizer();
+            sanitizer.AllowedAttributes.Add("class");
+            return sanitizer.Sanitize(Markdown.ToHtml(markdown, pipeline));
+        }
+    }
+}

src/WebApp/WebApp.csproj

@@ -9,7 +9,9 @@
     </PropertyGroup>
 
     <ItemGroup>
+        <PackageReference Include="HtmlSanitizer" />
         <PackageReference Include="LigerShark.WebOptimizer.Core" />
+        <PackageReference Include="Markdig" />
         <PackageReference Include="Microsoft.EntityFrameworkCore.InMemory" />
         <PackageReference Include="Microsoft.EntityFrameworkCore.SqlServer" />
         <PackageReference Include="Microsoft.Identity.Web" />

src/WebApp/libman.json

@@ -52,6 +52,20 @@
         "axios.js.map",
         "axios.min.js.map"
       ]
+    },
+    {
+      "provider": "cdnjs",
+      "library": "[email protected]",
+      "destination": "wwwroot/lib/dompurify/"
+    },
+    {
+      "provider": "jsdelivr",
+      "library": "[email protected]",
+      "destination": "wwwroot/lib/easymde/",
+      "files": [
+        "dist/easymde.min.css",
+        "dist/easymde.min.js"
+      ]
     }
   ]
 }

src/WebApp/wwwroot/css/easymde.darkmode.css

@@ -0,0 +1,35 @@
+/*Dark Mode color changes*/
+
+[data-bs-theme="dark"] .CodeMirror {
+  background-color: #212529 !important;
+}
+
+[data-bs-theme="dark"] .CodeMirror-placeholder {
+  color: #f1f1f1 !important;
+}
+
+[data-bs-theme="dark"] .CodeMirror-line {
+  color: white !important;
+}
+[data-bs-theme="dark"] .CodeMirror-fullscreen.CodeMirror {
+  background-color: #212529 !important;
+}
+[data-bs-theme="dark"] .editor-toolbar button:hover {
+  background: none !important;
+}
+
+[data-bs-theme="dark"] .editor-toolbar.fullscreen {
+  background-color: #343a40 !important;
+}
+
+[data-bs-theme="dark"] .editor-toolbar button.active {
+  background-color: #ffffff20 !important;
+}
+
+[data-bs-theme="dark"] .CodeMirror-cursor {
+  border-left: 2px solid white;
+}
+
+[data-bs-theme="dark"] .editor-preview {
+  background-color: #2d3338 !important;
+}

src/WebApp/wwwroot/js/textarea-to-MDE.js

@@ -0,0 +1,31 @@
+const textareaList = document.querySelectorAll("textarea.EasyMDE");
+textareaList.forEach((area) => {
+  new EasyMDE({
+    renderingConfig: {
+      sanitizerFunction: (renderedHTML) => {
+        return DOMPurify.sanitize(renderedHTML, { USE_PROFILES: { html: true } });
+      },
+    },
+    element: area,
+    placeholder: "Type here...",
+    toolbar: [
+      "bold",
+      "italic",
+      "|",
+      "heading-1",
+      "heading-2",
+      "heading-3",
+      "|",
+      "quote",
+      "unordered-list",
+      "ordered-list",
+      "table",
+      "|",
+      "preview",
+      "side-by-side",
+      "fullscreen",
+      "guide",
+    ],
+    toolbarButtonClassPrefix: "mde",
+  });
+});