Merge pull request #8191 from abpframework/cms-kit/contents-as-markdown

Cms Kit - Contents as markdown

modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/BlogPosts/create.js

@@ -174,17 +174,16 @@
     });
 
     var shorDescriptionEdited = false;
-    $pageContentInput.on('change', function () {
+
+    function reflectContentChanges(htmlContent) {
         if (shorDescriptionEdited) {
             return;
         }
 
-        var htmlValue = $pageContentInput.val();
+        var plainValue = jQuery('<div>').html(htmlContent).text().replace(/\n/g, ' ').substring(0, 120);
-
-        var plainValue = jQuery('<div>').html(htmlValue).text().replace(/\n/g, ' ').substring(0, 120);
 
         $shortDescription.val(plainValue);
-    });
+    }
 
     $shortDescription.on('change', function () {
         shorDescriptionEdited = true;
@@ -234,15 +233,16 @@
             previewStyle: 'tab',
             height: "95vh",
             minHeight: "25em",
-            initialEditType: initialValue ? 'wysiwyg' : 'markdown',
+            initialEditType: 'markdown',
             language: $editorContainer.data("language"),
             hooks: {
                 addImageBlobHook: uploadFile,
             },
             events: {
                 change: function (_val) {
-                    $editorInput.val(editor.getHtml());
+                    $editorInput.val(editor.getMarkdown());
                     $editorInput.trigger("change");
+                    reflectContentChanges(editor.getHtml());
                 }
             }
         }).data(editorDataKey);

modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/BlogPosts/update.js

@@ -180,14 +180,14 @@
             previewStyle: 'tab',
             height: "95vh",
             minHeight: "25em",
-            initialEditType: initialValue ? 'wysiwyg' : 'markdown',
+            initialEditType: 'markdown',
             language: $editorContainer.data("language"),
             hooks: {
                 addImageBlobHook: uploadFile,
             },
             events: {
                 change: function (_val) {
-                    $editorInput.val(editor.getHtml());
+                    $editorInput.val(editor.getMarkdown());
                     $editorInput.trigger("change");
                 }
             }

modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/Pages/create.js

@@ -88,14 +88,14 @@
             previewStyle: 'tab',
             height: "95vh",
             minHeight: "25em",
-            initialEditType: initialValue ? 'wysiwyg' : 'markdown',
+            initialEditType: 'markdown',
             language: $editorContainer.data("language"),
             hooks: {
                 addImageBlobHook: uploadFile,
             },
             events: {
                 change: function (_val) {
-                    $editorInput.val(editor.getHtml());
+                    $editorInput.val(editor.getMarkdown());
                     $editorInput.trigger("change");
                 }
             }

modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/Pages/update.js

@@ -63,14 +63,14 @@
             previewStyle: 'tab',
             height: "95vh",
             minHeight: "25em",
-            initialEditType: initialValue ? 'wysiwyg' : 'markdown',
+            initialEditType: 'markdown',
             language: $editorContainer.data("language"),
             hooks: {
                 addImageBlobHook: uploadFile,
             },
             events: {
                 change: function (_val) {
-                    $editorInput.val(editor.getHtml());
+                    $editorInput.val(editor.getMarkdown());
                     $editorInput.trigger("change");
                 }
             }

modules/cms-kit/src/Volo.CmsKit.Public.Web/CmsKitPublicWebModule.cs

@@ -1,4 +1,5 @@
-using Microsoft.AspNetCore.Mvc.RazorPages;
+using Markdig;
+using Microsoft.AspNetCore.Mvc.RazorPages;
 using Microsoft.Extensions.DependencyInjection;
 using Volo.Abp.AspNetCore.Mvc.Localization;
 using Volo.Abp.AutoMapper;
@@ -55,6 +56,14 @@ namespace Volo.CmsKit.Public.Web
             {
                 options.AddMaps<CmsKitPublicWebModule>(validate: true);
             });
+
+            context.Services
+                .AddSingleton(_ => new MarkdownPipelineBuilder()
+                    .UseAutoLinks()
+                    .UseBootstrap()
+                    .UseGridTables()
+                    .UsePipeTables()
+                    .Build());
         }
 
         public override void PostConfigureServices(ServiceConfigurationContext context)

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

@@ -1,9 +1,14 @@
 @addTagHelper *, Volo.Abp.AspNetCore.Mvc.UI.Bootstrap
 
+@using Volo.CmsKit.Public.Web.Renderers
+@using Volo.Abp.AspNetCore.Mvc.UI.Packages.HighlightJs
+
+@inject IMarkdownToHtmlRenderer MarkdownRenderer
+
 @model Volo.CmsKit.Public.Web.Pages.CmsKit.Shared.Components.Pages.PageViewModel
 
 <abp-card>
     <abp-card-body>
-        @Html.Raw(Model.Content)
+        @Html.Raw(await MarkdownRenderer.RenderAsync(Model.Content))
     </abp-card-body>
 </abp-card>

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

@@ -3,10 +3,25 @@ using System.Threading.Tasks;
 using Microsoft.AspNetCore.Mvc;
 using Volo.Abp.AspNetCore.Mvc;
 using Volo.CmsKit.Public.Pages;
+using Volo.CmsKit.Public.Web.Renderers;
+using Volo.Abp.AspNetCore.Mvc.UI.Packages.HighlightJs;
+using Volo.Abp.AspNetCore.Mvc.UI.Widgets;
 
 namespace Volo.CmsKit.Public.Web.Pages.CmsKit.Shared.Components.Pages
 {
-    [ViewComponent(Name = "CmsDefaultPage")]
+    [Widget(
+        StyleTypes = new[]
+        {
+            typeof(HighlightJsStyleContributor)
+        },
+        ScriptTypes = new[]
+        {
+            typeof(HighlightJsScriptContributor)
+        },
+        ScriptFiles = new[]
+        {
+            "/Pages/Public/CmsKit/highlightOnLoad.js"
+        })]
     public class DefaultPageViewComponent : AbpViewComponent
     {
         protected IPagePublicAppService PagePublicAppService { get; }

modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/BlogPost.cshtml

@@ -7,14 +7,27 @@
 @using Volo.CmsKit.Public.Web.Pages.CmsKit.Shared.Components.ReactionSelection
 @using Volo.CmsKit.Public.Web.Pages.CmsKit.Shared.Components.Rating
 @using Volo.CmsKit.Public.Web.Pages.CmsKit.Shared.Components.Tags
+@using Volo.CmsKit.Public.Web.Renderers
+@using Volo.Abp.AspNetCore.Mvc.UI.Packages.HighlightJs
 
 @inherits CmsKitPublicPageBase
 
 @model Volo.CmsKit.Public.Web.Pages.Public.CmsKit.Blogs.BlogPostModel
 
+@inject IMarkdownToHtmlRenderer MarkdownRenderer
 
 @section styles{
+<abp-abp-style-bundle>
     <abp-style src="/Pages/Public/CmsKit/Blogs/blogPost.css" />
+    <abp-style type="typeof(HighlightJsStyleContributor)" />
+</abp-abp-style-bundle>
+}
+
+@section scripts{
+<abp-script-bundle>
+    <abp-script type="typeof(HighlightJsScriptContributor)" />
+    <abp-script src="/Pages/Public/CmsKit/highlightOnLoad.js" />
+</abp-script-bundle>
 }
 
 @{
@@ -31,7 +44,9 @@
                     <span class="font-weight-bold">@@@Model.BlogPost.Author?.UserName</span>
                     <small style="opacity:.65;">@Model.BlogPost.CreationTime</small>
                 </p>
-                @Html.Raw(Model.BlogPost.Content)
+
+                @Html.Raw(await MarkdownRenderer.RenderAsync(Model.BlogPost.Content))
+
                 <p class="mb-3">
                     @if (Model.BlogPost.LastModificationTime != null)
                     {

modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/BlogPost.cshtml.cs

@@ -1,4 +1,5 @@
-using Microsoft.AspNetCore.Mvc;
+using Markdig;
+using Microsoft.AspNetCore.Mvc;
 using System;
 using System.Collections.Generic;
 using System.Linq;

modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Pages/Index.cshtml

@@ -2,11 +2,15 @@
 @using Microsoft.AspNetCore.Mvc.Localization
 @using Volo.CmsKit.Localization
 @using Volo.CmsKit.Public.Web.Pages.CmsKit.Shared.Components.Pages
+
 @model Volo.CmsKit.Public.Web.Pages.Public.CmsKit.Pages.IndexModel
+
 @inject IHtmlLocalizer<CmsKitResource> L
 
 @section styles{
+    
     <abp-style src="/Pages/Public/CmsKit/Pages/index.css" />
+
     <style>
         @Html.Raw(Model.Page.Style)
     </style>

modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/highlightOnLoad.js

@@ -0,0 +1,8 @@
+$(function () {
+
+    document.querySelectorAll('code').forEach(block => {
+        $(block).addClass('hljs'); // Put in gray box even language is not supported
+        hljs.highlightBlock(block);
+    });
+
+})

modules/cms-kit/src/Volo.CmsKit.Public.Web/Renderers/IMarkdownToHtmlRenderer.cs

@@ -0,0 +1,9 @@
+using System.Threading.Tasks;
+
+namespace Volo.CmsKit.Public.Web.Renderers
+{
+    public interface IMarkdownToHtmlRenderer
+    {
+        Task<string> RenderAsync(string rawMarkdown);
+    }
+}

modules/cms-kit/src/Volo.CmsKit.Public.Web/Renderers/MarkdownToHtmlRenderer.cs

@@ -0,0 +1,22 @@
+using Markdig;
+using System.Threading.Tasks;
+using Volo.Abp.DependencyInjection;
+
+namespace Volo.CmsKit.Public.Web.Renderers
+{
+    public class MarkdownToHtmlRenderer : IMarkdownToHtmlRenderer, ITransientDependency
+    {
+        protected MarkdownPipeline MarkdownPipeline { get; }
+
+        public MarkdownToHtmlRenderer(MarkdownPipeline markdownPipeline)
+        {
+            MarkdownPipeline = markdownPipeline;
+        }
+
+        public Task<string> RenderAsync(string rawMarkdown)
+        {
+            return Task.FromResult(
+                Markdown.ToHtml(rawMarkdown, MarkdownPipeline));
+        }
+    }
+}

modules/cms-kit/src/Volo.CmsKit.Public.Web/Volo.CmsKit.Public.Web.csproj

@@ -1,4 +1,4 @@
-<Project Sdk="Microsoft.NET.Sdk.Web">
+<Project Sdk="Microsoft.NET.Sdk.Web">
 
   <Import Project="..\..\..\..\common.props" />
   <Import Project="..\..\..\..\configureawait.props" />
@@ -16,6 +16,7 @@
     <ProjectReference Include="..\Volo.CmsKit.Common.Web\Volo.CmsKit.Common.Web.csproj" />
     <ProjectReference Include="..\Volo.CmsKit.Public.HttpApi\Volo.CmsKit.Public.HttpApi.csproj" />
     <PackageReference Include="Microsoft.Extensions.FileProviders.Embedded" Version="$(MicrosoftPackageVersion)" />
+    <PackageReference Include="Markdig.Signed" Version="0.24.0" />
   </ItemGroup>
 
   <ItemGroup>
@@ -29,9 +30,4 @@
     <Content Remove="Components\**\*.css" />
   </ItemGroup>
 
-  <ItemGroup>
-    <None Remove="Pages\Public\CmsKit\Blogs\index.css" />
-    <None Remove="Pages\Public\CmsKit\Pages\index.css" />
-  </ItemGroup>
-
 </Project>

npm/packs/cms-kit.public/package.json

@@ -5,7 +5,8 @@
     "access": "public"
   },
   "dependencies": {
-    "@abp/star-rating-svg": "~4.2.2"
+    "@abp/star-rating-svg": "~4.2.2",
+    "@abp/highlight.js": "~4.2.2"
   },
   "gitHead": "bb4ea17d5996f01889134c138d00b6c8f858a431"
 }