From cbc3aaa33d3b6f56963eae0c92e2d17c8b90bc4e Mon Sep 17 00:00:00 2001
From: Boromir <boromir@squad.dev>
Date: Tue, 12 May 2026 23:46:11 -0700
Subject: [PATCH] feat(ui): replace InputTextArea with TextEditor markdown
 editor in Create and Edit flows (#324)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Fix CPM NU1010: add Markdig v0.44.0 and PSC.Blazor.Components.MarkdownEditor v10.0.7 to Directory.Packages.props
- Wire Font Awesome CDN + PSC EasyMDE CSS/JS into App.razor shell
- Replace InputTextArea with TextEditor component in Create.razor (label: Content → Markdown)
- Replace InputTextArea with TextEditor component in Edit.razor
- Add IFileStorage mock and JSInterop.Mode = Loose to EditAclTests constructor
- Add global using for MyBlog.Web.Infrastructure.FileStorage in bUnit test project
- Update RazorSmokeTests: use FindComponent<TextEditor>() and ContentChanged.InvokeAsync() instead of textarea.Change()

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 Directory.Packages.props                            |  2 +-
 src/Web/Components/App.razor                        |  7 ++++++-
 src/Web/Components/_Imports.razor                   |  2 +-
 src/Web/Features/BlogPosts/Create/Create.razor      |  6 ++++--
 src/Web/Features/BlogPosts/Edit/Edit.razor          |  4 ++--
 src/Web/Features/_Imports.razor                     |  2 +-
 src/Web/Web.csproj                                  |  1 -
 tests/Web.Tests.Bunit/Components/RazorSmokeTests.cs | 13 +++++++------
 tests/Web.Tests.Bunit/Features/EditAclTests.cs      |  1 +
 .../Web.Tests.Bunit/Features/RichTextEditorTests.cs |  7 +++++--
 tests/Web.Tests.Bunit/GlobalUsings.cs               |  1 +
 11 files changed, 29 insertions(+), 17 deletions(-)

diff --git a/Directory.Packages.props b/Directory.Packages.props
index 807e390d..375a1b3f 100644
--- a/Directory.Packages.props
+++ b/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 -->
diff --git a/src/Web/Components/App.razor b/src/Web/Components/App.razor
index c54caaab..cd4f7770 100644
--- a/src/Web/Components/App.razor
+++ b/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>
 
diff --git a/src/Web/Components/_Imports.razor b/src/Web/Components/_Imports.razor
index b52038bb..76009ebe 100644
--- a/src/Web/Components/_Imports.razor
+++ b/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
diff --git a/src/Web/Features/BlogPosts/Create/Create.razor b/src/Web/Features/BlogPosts/Create/Create.razor
index a77c6b63..39e502b9 100644
--- a/src/Web/Features/BlogPosts/Create/Create.razor
+++ b/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">
diff --git a/src/Web/Features/BlogPosts/Edit/Edit.razor b/src/Web/Features/BlogPosts/Edit/Edit.razor
index 07137ac2..c03914cc 100644
--- a/src/Web/Features/BlogPosts/Edit/Edit.razor
+++ b/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">
diff --git a/src/Web/Features/_Imports.razor b/src/Web/Features/_Imports.razor
index c223f40b..aaea72bf 100644
--- a/src/Web/Features/_Imports.razor
+++ b/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
diff --git a/src/Web/Web.csproj b/src/Web/Web.csproj
index 25084d61..e4973d7a 100644
--- a/src/Web/Web.csproj
+++ b/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" />
diff --git a/tests/Web.Tests.Bunit/Components/RazorSmokeTests.cs b/tests/Web.Tests.Bunit/Components/RazorSmokeTests.cs
index ce50e77e..42b59722 100644
--- a/tests/Web.Tests.Bunit/Components/RazorSmokeTests.cs
+++ b/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]
diff --git a/tests/Web.Tests.Bunit/Features/EditAclTests.cs b/tests/Web.Tests.Bunit/Features/EditAclTests.cs
index faede254..4abbf96f 100644
--- a/tests/Web.Tests.Bunit/Features/EditAclTests.cs
+++ b/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]
diff --git a/tests/Web.Tests.Bunit/Features/RichTextEditorTests.cs b/tests/Web.Tests.Bunit/Features/RichTextEditorTests.cs
index 03a76b78..4f6b42d3 100644
--- a/tests/Web.Tests.Bunit/Features/RichTextEditorTests.cs
+++ b/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)
diff --git a/tests/Web.Tests.Bunit/GlobalUsings.cs b/tests/Web.Tests.Bunit/GlobalUsings.cs
index d53edeec..121e0e14 100644
--- a/tests/Web.Tests.Bunit/GlobalUsings.cs
+++ b/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;