Support markdown in CMS-Kit comments

resolves https://github.com/abpframework/abp/issues/10789

modules/cms-kit/src/Volo.CmsKit.Domain.Shared/Volo/CmsKit/Localization/Resources/en.json

@@ -158,6 +158,7 @@
     "YourEmailAddress": "Your e-mail address",
     "YourFullName": "Your full name",
     "YourMessage": "Your Message",
-    "YourReply": "Your reply"
+    "YourReply": "Your reply",
+    "MarkdownSupported": "<a href=\"https://www.markdownguide.org/basic-syntax/\">Markdown</a> supported."
   }
 }

modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Commenting/CommentingViewComponent.cs

@@ -8,6 +8,7 @@ using Volo.Abp.AspNetCore.Mvc;
 using Volo.Abp.AspNetCore.Mvc.UI;
 using Volo.Abp.AspNetCore.Mvc.UI.Widgets;
 using Volo.CmsKit.Public.Comments;
+using Volo.CmsKit.Public.Web.Renderers;
 
 namespace Volo.CmsKit.Public.Web.Pages.CmsKit.Shared.Components.Commenting;
 
@@ -21,13 +22,16 @@ namespace Volo.CmsKit.Public.Web.Pages.CmsKit.Shared.Components.Commenting;
 public class CommentingViewComponent : AbpViewComponent
 {
     public ICommentPublicAppService CommentPublicAppService { get; }
+    public IMarkdownToHtmlRenderer MarkdownToHtmlRenderer { get; }
     public AbpMvcUiOptions AbpMvcUiOptions { get; }
 
     public CommentingViewComponent(
         ICommentPublicAppService commentPublicAppService,
-        IOptions<AbpMvcUiOptions> options)
+        IOptions<AbpMvcUiOptions> options,
+        IMarkdownToHtmlRenderer markdownToHtmlRenderer)
     {
         CommentPublicAppService = commentPublicAppService;
+        MarkdownToHtmlRenderer = markdownToHtmlRenderer;
         AbpMvcUiOptions = options.Value;
     }
 
@@ -35,8 +39,9 @@ public class CommentingViewComponent : AbpViewComponent
         string entityType,
         string entityId)
     {
-        var result = await CommentPublicAppService
+        var comments = (await CommentPublicAppService
-            .GetListAsync(entityType, entityId);
+            .GetListAsync(entityType, entityId)).Items;
+
 
         var loginUrl = $"{AbpMvcUiOptions.LoginUrl}?returnUrl={HttpContext.Request.Path.ToString()}&returnUrlHash=#cms-comment_{entityType}_{entityId}";
 
@@ -45,12 +50,31 @@ public class CommentingViewComponent : AbpViewComponent
             EntityId = entityId,
             EntityType = entityType,
             LoginUrl = loginUrl,
-            Comments = result.Items.OrderByDescending(i => i.CreationTime).ToList()
+            Comments = comments.OrderByDescending(i => i.CreationTime).ToList()
         };
 
+        await ConvertMarkdownTextsToHtml(viewModel);
+
         return View("~/Pages/CmsKit/Shared/Components/Commenting/Default.cshtml", viewModel);
     }
 
+    private async Task ConvertMarkdownTextsToHtml(CommentingViewModel viewModel)
+    {
+        viewModel.RawCommentTexts = new Dictionary<Guid, string>();
+
+        foreach (var comment in viewModel.Comments)
+        {
+            viewModel.RawCommentTexts.Add(comment.Id, comment.Text);
+            comment.Text = await MarkdownToHtmlRenderer.RenderAsync(comment.Text);
+
+            foreach (var reply in comment.Replies)
+            {
+                viewModel.RawCommentTexts.Add(reply.Id, reply.Text);
+                reply.Text = await MarkdownToHtmlRenderer.RenderAsync(reply.Text);
+            }
+        }
+    }
+
     public class CommentingViewModel
     {
         public string EntityType { get; set; }
@@ -59,6 +83,9 @@ public class CommentingViewComponent : AbpViewComponent
 
         public string LoginUrl { get; set; }
 
-        public IReadOnlyList<CommentWithDetailsDto> Comments { get; set; }
+        public List<CommentWithDetailsDto> Comments { get; set; }
+
+        public Dictionary<Guid, string> RawCommentTexts { get; set; }
     }
 }
+

modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Commenting/Default.cshtml

@@ -49,6 +49,9 @@
                         }
                     </div>
                 </div>
+                <div class="mt-0">
+                    <small class="text-muted float-start" >@L["MarkdownSupported"]</small>
+                </div>
             </div>
         </form>
     </div>;
@@ -57,16 +60,7 @@
     Func<dynamic, IHtmlContent> GetCommentContentArea(Guid id, string text) =>
     @<div class="cms-comment-content-area" data-id="@id.ToString()">
         <p class="m-0">
-            @{
+            @Html.Raw(text)
-                var lines = text.SplitToLines();
-                if (lines.Any())
-                {
-                    foreach (var line in lines)
-                    {
-                        @line <br />
-                    }
-                }
-            }
         </p>
     </div>;
 }
@@ -114,9 +108,11 @@
                         <div class="text-end">
                             <abp-button type="submit" button-type="Primary" size="Block"> @L["Update"] </abp-button>
                             <abp-button type="button" button-type="Light" size="Block_Small" class="comment-edit-cancel-button" data-id="@id.ToString()"><i class="fa fa-times me-1"></i>  @L["Cancel"] </abp-button>
-
                         </div>
                     </div>
+                    <div class="mt-0">
+                        <small class="text-muted float-start" >@L["MarkdownSupported"]</small>
+                    </div>
                 </div>
             </form>
         </div>
@@ -161,7 +157,7 @@
                         </div>
                     </div>
                 </div>
-                @GetEditArea(comment.Id, comment.Text, comment.ConcurrencyStamp).Invoke(null)
+                @GetEditArea(comment.Id, Model.RawCommentTexts[comment.Id], comment.ConcurrencyStamp).Invoke(null)
 
                 @if (comment.Replies.Any())
                 {
@@ -191,7 +187,7 @@
                                     </div>
                                 </div>
 
-                                @GetEditArea(reply.Id, reply.Text, reply.ConcurrencyStamp).Invoke(null)
+                                @GetEditArea(reply.Id, Model.RawCommentTexts[reply.Id], reply.ConcurrencyStamp).Invoke(null)
                             </div>
                         </div>
                     }
@@ -220,4 +216,3 @@
         </div>
     }
 </div>
-