Put Shortcuts in own component instead of service

Author: linkdotnet

src/LinkDotNet.Blog.Web/ServiceExtensions.cs

@@ -16,6 +16,5 @@ public static void RegisterServices(this IServiceCollection services)
         services.AddScoped<ISitemapService, SitemapService>();
         services.AddScoped<IXmlFileWriter, XmlFileWriter>();
         services.AddScoped<IFileProcessor, FileProcessor>();
-        services.AddScoped<IMarkerService, MarkerService>();
     }
 }

src/LinkDotNet.Blog.Web/Shared/Admin/CreateNewBlogPost.razor

@@ -1,7 +1,6 @@
 @using LinkDotNet.Blog.Domain
 @using LinkDotNet.Blog.Web.Shared.Services
 @inherits MarkdownComponentBase
-@inject IMarkerService markerService
 
 <h3>@Title</h3>
 
@@ -17,14 +16,14 @@
             </div>
             <div class="mb-3">
                 <label for="short">Short Description</label>
-                <textarea class="form-control" id="short" rows="4" @onkeyup="MarkShortDescription"
-                       @oninput="args => model.ShortDescription = args.Value.ToString()">@model.ShortDescription</textarea>
+                <TextAreaWithShortcuts Id="short" Class="form-control" Rows="4"
+                                       @bind-Value="@model.ShortDescription"></TextAreaWithShortcuts>
                 <small for="short" class="form-text text-muted">You can use markdown to style your component</small>
             </div>
             <div class="mb-3">
                 <label for="content">Content</label>
-                <textarea class="form-control" id="content" @oninput="args => model.Content = args.Value.ToString()" rows="10"
-                            @onkeyup="MarkContent">@model.Content</textarea>
+                <TextAreaWithShortcuts Id="content" Class="form-control" Rows="10"
+                                       @bind-Value="@model.Content"></TextAreaWithShortcuts>
                 <small for="content" class="form-text text-muted">You can use markdown to style your component. Additional features are listed <a @onclick="@(() => FeatureDialog.Open())">here</a></small>
                 <UploadFile OnFileUploaded="SetContentFromFile" id="content-upload"></UploadFile>
                 <small for="content-upload" class="form-text text-muted">Drag and drop markdown files to upload and
@@ -117,27 +116,4 @@
     {
         model.Content = content;
     }
-
-    private async Task MarkShortDescription(KeyboardEventArgs keyboardEventArgs)
-    {
-        model.ShortDescription = await GetNewMarkdownForElementAsync(keyboardEventArgs, model.ShortDescription, "short");
-        StateHasChanged();
-    }
-
-    private async Task MarkContent(KeyboardEventArgs keyboardEventArgs)
-    {
-        model.Content = await GetNewMarkdownForElementAsync(keyboardEventArgs, model.Content, "content");
-        StateHasChanged();
-    }
-
-    private async Task<string> GetNewMarkdownForElementAsync(KeyboardEventArgs keyboardEventArgs, string original, string elementId)
-    {
-        return keyboardEventArgs.CtrlKey ? keyboardEventArgs.Key switch
-        {
-            "b" => await markerService.GetNewMarkdownForElementAsync(elementId, original, "**", "**"),
-            "i" => await markerService.GetNewMarkdownForElementAsync(elementId, original, "*", "*"),
-            _ => original,
-        } : original;
-    }
-
 }

src/LinkDotNet.Blog.Web/Shared/Services/SelectionRange.cs renamed to src/LinkDotNet.Blog.Web/Shared/SelectionRange.cs

@@ -1,4 +1,4 @@
-namespace LinkDotNet.Blog.Web.Shared.Services;
+namespace LinkDotNet.Blog.Web.Shared;
 
 public sealed class SelectionRange
 {

src/LinkDotNet.Blog.Web/Shared/Services/IMarkerService.cs

@@ -0,0 +1,70 @@
+@inject IJSRuntime jsRuntime
+
+<textarea class="@Class" id="@Id" rows="@Rows" @onkeyup="MarkShortDescription"
+                       @oninput="args => Value = args.Value.ToString()">@Value</textarea>
+
+@code {
+    private string textContent = string.Empty;
+
+    [Parameter]
+    public string Value
+    {
+        get => textContent;
+        set
+        {
+            if (textContent != value)
+            {
+                textContent = value;
+                ValueChanged.InvokeAsync(value);
+            }
+        }
+    }
+
+    [Parameter]
+    public EventCallback<string> ValueChanged { get; set; }
+
+    [Parameter]
+    public string Class { get; set; }
+
+    [Parameter]
+    public string Id { get; set; }
+
+    [Parameter]
+    public int Rows { get; set; }
+
+    private async Task MarkShortDescription(KeyboardEventArgs keyboardEventArgs)
+    {
+        Value = await GetNewMarkdownForElementAsync(keyboardEventArgs, Value, Id);
+        StateHasChanged();
+    }
+
+    private async Task<string> GetNewMarkdownForElementAsync(KeyboardEventArgs keyboardEventArgs, string original, string elementId)
+    {
+        return keyboardEventArgs.CtrlKey ? keyboardEventArgs.Key switch
+        {
+            "b" => await GetNewMarkdownForElementAsync(elementId, original, "**", "**"),
+            "i" => await GetNewMarkdownForElementAsync(elementId, original, "*", "*"),
+            _ => original,
+            } : original;
+    }
+
+    private async Task<string> GetNewMarkdownForElementAsync(
+        string elementId,
+        string content,
+        string fenceBegin,
+        string fenceEnd)
+    {
+        var selectionRange = await jsRuntime.InvokeAsync<SelectionRange>("getSelectionFromElement", elementId);
+        if (selectionRange.Start == selectionRange.End)
+        {
+            return content;
+        }
+
+        var beforeMarker = selectionRange.Start > 0 ? content[..selectionRange.Start] : string.Empty;
+        var marker = content[selectionRange.Start..selectionRange.End];
+        var afterMarker = content[selectionRange.End..];
+        var shift = selectionRange.End + fenceBegin.Length + fenceEnd.Length;
+        await jsRuntime.InvokeVoidAsync("setSelectionFromElement", elementId, shift);
+        return beforeMarker + fenceBegin + marker + fenceEnd + afterMarker;
+    }
+}

src/LinkDotNet.Blog.Web/Shared/Services/MarkerService.cs

@@ -28,7 +28,6 @@ public async Task ShouldSaveBlogPostOnSave()
         ctx.Services.AddScoped(_ => toastService.Object);
         ctx.ComponentFactories.AddStub<UploadFile>();
         ctx.Services.AddScoped(_ => Mock.Of<IFileProcessor>());
-        ctx.Services.AddScoped(_ => Mock.Of<IMarkerService>());
         using var cut = ctx.RenderComponent<CreateNewBlogPostPage>();
         var newBlogPost = cut.FindComponent<CreateNewBlogPost>();
 

src/LinkDotNet.Blog.Web/Shared/TextAreaWithShortcuts.razor

@@ -10,7 +10,6 @@
 using LinkDotNet.Blog.Web.Pages.Admin;
 using LinkDotNet.Blog.Web.Shared;
 using LinkDotNet.Blog.Web.Shared.Admin;
-using LinkDotNet.Blog.Web.Shared.Services;
 using Microsoft.EntityFrameworkCore;
 using Microsoft.Extensions.DependencyInjection;
 using Moq;
@@ -31,7 +30,6 @@ public async Task ShouldSaveBlogPostOnSave()
         ctx.Services.AddScoped<IRepository<BlogPost>>(_ => Repository);
         ctx.Services.AddScoped(_ => toastService.Object);
         ctx.ComponentFactories.AddStub<UploadFile>();
-        ctx.Services.AddScoped(_ => Mock.Of<IMarkerService>());
         using var cut = ctx.RenderComponent<UpdateBlogPostPage>(
             p => p.Add(s => s.BlogPostId, blogPost.Id));
         var newBlogPost = cut.FindComponent<CreateNewBlogPost>();

tests/LinkDotNet.Blog.IntegrationTests/Web/Pages/Admin/CreateNewBlogPostPageTests.cs

@@ -6,9 +6,6 @@
 using LinkDotNet.Blog.TestUtilities;
 using LinkDotNet.Blog.Web.Shared;
 using LinkDotNet.Blog.Web.Shared.Admin;
-using LinkDotNet.Blog.Web.Shared.Services;
-using Microsoft.Extensions.DependencyInjection;
-using Moq;
 using Xunit;
 
 namespace LinkDotNet.Blog.UnitTests.Web.Shared.Admin;
@@ -23,7 +20,6 @@ public CreateNewBlogPostTests()
     [Fact]
     public void ShouldCreateNewBlogPostWhenValidDataGiven()
     {
-        Services.AddScoped(_ => Mock.Of<IMarkerService>());
         BlogPost blogPost = null;
         var cut = RenderComponent<CreateNewBlogPost>(
             p => p.Add(c => c.OnBlogPostCreated, bp => blogPost = bp));
@@ -57,7 +53,6 @@ public void ShouldFillGivenBlogPost()
             .WithTags("tag1", "tag2")
             .Build();
         BlogPost blogPostFromComponent = null;
-        Services.AddScoped(_ => Mock.Of<IMarkerService>());
         var cut = RenderComponent<CreateNewBlogPost>(
             p =>
                 p.Add(c => c.OnBlogPostCreated, bp => blogPostFromComponent = bp)
@@ -79,7 +74,6 @@ public void ShouldFillGivenBlogPost()
     public void ShouldNotDeleteModelWhenSet()
     {
         BlogPost blogPost = null;
-        Services.AddScoped(_ => Mock.Of<IMarkerService>());
         var cut = RenderComponent<CreateNewBlogPost>(
             p => p.Add(c => c.ClearAfterCreated, true)
                 .Add(c => c.OnBlogPostCreated, post => blogPost = post));
@@ -100,7 +94,6 @@ public void ShouldNotDeleteModelWhenSet()
     public void ShouldNotDeleteModelWhenNotSet()
     {
         BlogPost blogPost = null;
-        Services.AddScoped(_ => Mock.Of<IMarkerService>());
         var cut = RenderComponent<CreateNewBlogPost>(
             p => p.Add(c => c.ClearAfterCreated, false)
                 .Add(c => c.OnBlogPostCreated, post => blogPost = post));
@@ -120,7 +113,6 @@ public void ShouldNotDeleteModelWhenNotSet()
     [Fact]
     public void ShouldNotUpdateUpdatedDateWhenCheckboxSet()
     {
-        Services.AddScoped(_ => Mock.Of<IMarkerService>());
         var somewhen = new DateTime(1991, 5, 17);
         var originalBlogPost = new BlogPostBuilder().WithUpdatedDate(somewhen).Build();
         BlogPost blogPostFromComponent = null;
@@ -143,7 +135,6 @@ public void ShouldNotUpdateUpdatedDateWhenCheckboxSet()
     [Fact]
     public void ShouldNotSetOptionToNotUpdateUpdatedDateOnInitialCreate()
     {
-        Services.AddScoped(_ => Mock.Of<IMarkerService>());
         var cut = RenderComponent<CreateNewBlogPost>();
 
         var found = cut.FindAll("#updatedate");
@@ -154,7 +145,6 @@ public void ShouldNotSetOptionToNotUpdateUpdatedDateOnInitialCreate()
     [Fact]
     public void ShouldAcceptInputWithoutLosingFocusOrEnter()
     {
-        Services.AddScoped(_ => Mock.Of<IMarkerService>());
         BlogPost blogPost = null;
         var cut = RenderComponent<CreateNewBlogPost>(
             p => p.Add(c => c.OnBlogPostCreated, bp => blogPost = bp));
@@ -177,30 +167,4 @@ public void ShouldAcceptInputWithoutLosingFocusOrEnter()
         blogPost.Tags.Should().HaveCount(3);
         blogPost.Tags.Select(t => t.Content).Should().Contain(new[] { "Tag1", "Tag2", "Tag3" });
     }
-
-    [Theory]
-    [InlineData("short", "b", true, "**", "**Test**")]
-    [InlineData("short", "i", true, "*", "*Test*")]
-    [InlineData("short", "h", true, "*", "Test")]
-    [InlineData("short", "b", false, "**", "Test")]
-    [InlineData("short", "f", false, "**", "Test")]
-    [InlineData("content", "b", true, "**", "**Test**")]
-    [InlineData("content", "i", true, "*", "*Test*")]
-    [InlineData("content", "h", true, "*", "Test")]
-    [InlineData("content", "b", false, "**", "Test")]
-    [InlineData("content", "f", false, "**", "Test")]
-    public void ShouldSetMarkerOnKeyUp(string id, string key, bool ctrlPressed, string fence, string expected)
-    {
-        var markerMock = new Mock<IMarkerService>();
-        markerMock.Setup(m => m.GetNewMarkdownForElementAsync(id, "Test", fence, fence))
-            .ReturnsAsync(expected);
-        Services.AddScoped(_ => markerMock.Object);
-        var cut = RenderComponent<CreateNewBlogPost>();
-        cut.Find($"#{id}").Input("Test");
-        cut.Find($"#{id}").KeyUp(key, ctrlKey: ctrlPressed);
-
-        var content = cut.Find($"#{id}").TextContent;
-
-        content.Should().Be(expected);
-    }
 }