feat(web): Edit flow markdown authoring slice (#325)

Directory.Packages.props

@@ -21,7 +21,7 @@
     <PackageVersion Include="AngleSharp.Css" Version="1.0.0-beta.216" />
     <PackageVersion Include="FluentValidation" Version="12.1.1" />
     <PackageVersion Include="FluentValidation.DependencyInjectionExtensions" Version="12.1.1" />
-    <!-- Markdown -->
+    <!-- Markdown editor -->
     <PackageVersion Include="Markdig" Version="0.44.0" />
     <PackageVersion Include="PSC.Blazor.Components.MarkdownEditor" Version="10.0.7" />
     <!-- CQRS/Mediator -->

src/Web/Components/App.razor

@@ -104,6 +104,9 @@
 	<ResourcePreloader />
 	<link rel="stylesheet" href="css/tailwind.css" />
 	<link rel="stylesheet" href="@Assets["Web.styles.css"]" />
+	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+	<link rel="stylesheet" href="_content/PSC.Blazor.Components.MarkdownEditor/css/easymde.min.css" />
+	<link rel="stylesheet" href="_content/PSC.Blazor.Components.MarkdownEditor/css/markdowneditor.css" />
 	<ImportMap />
 	<link rel="icon" type="image/png" href="favicon.png" />
 	<HeadOutlet />
@@ -113,7 +116,9 @@
 	<Routes @rendermode="InteractiveServer" />
 	<ReconnectModal />
 	<script src="js/theme.js"></script>
-	<script src="_content/RTBlazorfied/js/RTBlazorfied.js"></script>
+	<script src="_content/PSC.Blazor.Components.MarkdownEditor/js/easymde.min.js"></script>
+	<script src="_content/PSC.Blazor.Components.MarkdownEditor/js/markdownEditor.js"></script>
+	<script src="js/text-editor-helpers.js"></script>
 	<script src="@Assets["_framework/blazor.web.js"]"></script>
 </body>
 

src/Web/Components/_Imports.razor

@@ -14,4 +14,4 @@
 @using MyBlog.Web.Components.Layout
 @using MyBlog.Web.Components.Shared
 @using MyBlog.Web.Components.Theme
-@using RichTextBlazorfied
+@using PSC.Blazor.Components.MarkdownEditor

src/Web/Features/BlogPosts/Create/Create.razor

@@ -30,8 +30,10 @@
 			<InputText class="form-input" @bind-Value="_model.Title" />
 		</div>
 		<div class="form-group">
-			<label class="form-label">Content</label>
-			<RTBlazorfied @bind-Value="_model.Content" Height="400px" />
+			<label class="form-label">Markdown</label>
+			<TextEditor Content="@_model.Content"
+						ContentChanged="@(v => _model.Content = v)"
+						AlignmentOptionsEnabled="false" />
 		</div>
 		<div class="form-group">
 			<label class="form-label flex items-center gap-2">

src/Web/Features/BlogPosts/Edit/Edit.razor

@@ -43,8 +43,8 @@ else if (_model is not null)
                 <InputText class="form-input" @bind-Value="_model.Title" />
             </div>
             <div class="form-group">
-                <label class="form-label">Content</label>
-                <RTBlazorfied @bind-Value="_model.Content" Height="400px" />
+                <label class="form-label">Content <span class="text-xs text-gray-500 dark:text-gray-400 font-normal">(Markdown)</span></label>
+                <TextEditor @bind-Content="_model.Content" AlignmentOptionsEnabled="false" />
             </div>
             <div class="form-group">
                 <label class="form-label flex items-center gap-2">

src/Web/Features/_Imports.razor

@@ -6,4 +6,4 @@
 @using MediatR
 @using MyBlog.Web.Data
 @using MyBlog.Web.Components.Shared
-@using RichTextBlazorfied
+@using PSC.Blazor.Components.MarkdownEditor

src/Web/Web.csproj

@@ -14,7 +14,6 @@
     <PackageReference Include="HtmlSanitizer" />
     <PackageReference Include="Markdig" />
     <PackageReference Include="MediatR" />
-    <PackageReference Include="RTBlazorfied" />
     <PackageReference Include="Microsoft.Bcl.AsyncInterfaces" />
     <PackageReference Include="MongoDB.EntityFrameworkCore" />
     <PackageReference Include="PSC.Blazor.Components.MarkdownEditor" />

tests/Web.Tests.Bunit/Components/RazorSmokeTests.cs

@@ -37,6 +37,7 @@ public RazorSmokeTests()
 		Services.AddAuthorizationCore();
 		Services.AddSingleton<IAuthorizationService, TestAuthorizationService>();
 		Services.AddSingleton<AuthenticationStateProvider>(_authProvider);
+		Services.AddSingleton(Substitute.For<IFileStorage>());
 	}
 
 	[Fact]
@@ -333,7 +334,7 @@ public void CreatePostRendersForm()
 		heading.TextContent.Trim().Should().Be("Create Post");
 		heading.GetAttribute("class").Should().Contain("text-primary-900").And.Contain("dark:text-primary-50");
 		cut.FindAll("input").Count.Should().BeGreaterThanOrEqualTo(1);
-		cut.FindComponent<RichTextBlazorfied.RTBlazorfied>();
+		cut.FindComponent<TextEditor>();
 	}
 
 	[Fact]
@@ -367,8 +368,8 @@ public async Task CreatePostSubmitsAndNavigatesToBlogWhenCommandSucceeds()
 		var cut = RenderWithUser<Create>(CreatePrincipal("Alice", ["Author"]));
 
 		cut.FindAll("input")[0].Change("My title");
-		var editor = cut.FindComponent<RichTextBlazorfied.RTBlazorfied>();
-		await cut.InvokeAsync(() => editor.Instance.ValueChanged.InvokeAsync("Hello world"));
+		var textEditor = cut.FindComponent<TextEditor>();
+		await cut.InvokeAsync(() => textEditor.Instance.ContentChanged.InvokeAsync("Hello world"));
 		cut.Find("form").Submit();
 
 		// Assert
@@ -392,8 +393,8 @@ public async Task CreatePostShowsDismissibleErrorWhenCommandFails()
 		var cut = RenderWithUser<Create>(CreatePrincipal("Alice", ["Author"]));
 
 		cut.FindAll("input")[0].Change("My title");
-		var editor = cut.FindComponent<RichTextBlazorfied.RTBlazorfied>();
-		await cut.InvokeAsync(() => editor.Instance.ValueChanged.InvokeAsync("Hello world"));
+		var textEditor = cut.FindComponent<TextEditor>();
+		await cut.InvokeAsync(() => textEditor.Instance.ContentChanged.InvokeAsync("Hello world"));
 		cut.Find("form").Submit();
 
 		// Assert
@@ -421,7 +422,7 @@ public void EditPostLoadsExistingPost()
 		// Assert
 		cut.Markup.Should().Contain("Edit Post");
 		cut.Markup.Should().Contain("Existing title");
-		cut.FindComponent<RichTextBlazorfied.RTBlazorfied>();
+		cut.FindComponent<TextEditor>().Instance.Content.Should().Be("Existing content");
 	}
 
 	[Fact]

tests/Web.Tests.Bunit/Features/EditAclTests.cs

@@ -30,6 +30,7 @@ public EditAclTests()
 		Services.AddAuthorizationCore();
 		Services.AddSingleton<IAuthorizationService, TestAuthorizationService>();
 		Services.AddSingleton<AuthenticationStateProvider>(_authProvider);
+		Services.AddSingleton(Substitute.For<IFileStorage>());
 	}
 
 	[Fact]

tests/Web.Tests.Bunit/Features/RichTextEditorTests.cs

@@ -14,8 +14,10 @@
 using Microsoft.Extensions.DependencyInjection;
 
 using MyBlog.Domain.Abstractions;
+using MyBlog.Web.Components.Shared;
 using MyBlog.Web.Features.BlogPosts.Create;
 using MyBlog.Web.Features.BlogPosts.Edit;
+using MyBlog.Web.Infrastructure.FileStorage;
 
 using Web.Testing;
 
@@ -31,6 +33,7 @@ public RichTextEditorTests()
 		Services.AddAuthorizationCore();
 		Services.AddSingleton<IAuthorizationService, TestAuthorizationService>();
 		Services.AddSingleton<AuthenticationStateProvider>(_authProvider);
+		Services.AddSingleton(Substitute.For<IFileStorage>());
 	}
 
 	[Fact]
@@ -46,7 +49,7 @@ public void EditorRendersOnCreatePage()
 				Task.FromResult(new AuthenticationState(CreatePrincipal("Alice", ["Author"])))));
 
 		// Assert
-		cut.FindComponent<RichTextBlazorfied.RTBlazorfied>();
+		cut.FindComponent<TextEditor>();
 	}
 
 	[Fact]
@@ -72,7 +75,7 @@ public void EditorRendersOnEditPage()
 		});
 
 		// Assert
-		cut.FindComponent<RichTextBlazorfied.RTBlazorfied>();
+		cut.FindComponent<TextEditor>();
 	}
 
 	private static ClaimsPrincipal CreatePrincipal(string name, string[] roles)

tests/Web.Tests.Bunit/GlobalUsings.cs

@@ -22,6 +22,7 @@
 global using MyBlog.Domain.Interfaces;
 global using MyBlog.Domain.ValueObjects;
 global using MyBlog.Web.Data;
+global using MyBlog.Web.Infrastructure.FileStorage;
 
 global using NSubstitute;
 global using NSubstitute.ExceptionExtensions;