Added MarkerService

Author: linkdotnet

src/LinkDotNet.Blog.Web/Pages/_Layout.cshtml

@@ -48,6 +48,7 @@
 <script async src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/languages/csharp.min.js" integrity="sha512-v7mtZg9ySysViDE/8FxpWzLPe4Qzj+xQ//OqdMkl0UapomXAjp79QNiziv6PLmG5GSXjTcfCOzEBv5B/Rp6COg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 <script async src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/js/all.min.js" integrity="sha512-Tn2m0TIpgVyTzzvmxLNuqbSJH3JP8jm+Cy3hvHrW7ndTDcJ1w5mBiksqDBb8GpE2ksktFvDB/ykZ0mDpsZj20w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 <script async src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha256-cMPWkL3FzjuaFSfEYESYmjF25hCIL6mfRSPnW8OVvM4=" crossorigin="anonymous"></script>
+<script async src="components/selection.js" ></script>
 <script async src="components/slideshow.js" ></script>
 </body>
 </html>

src/LinkDotNet.Blog.Web/ServiceExtensions.cs

@@ -16,5 +16,6 @@ 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,5 +1,7 @@
 @using LinkDotNet.Blog.Domain
+@using LinkDotNet.Blog.Web.Shared.Services
 @inherits MarkdownComponentBase
+@inject IMarkerService markerService
 
 <h3>@Title</h3>
 
@@ -15,13 +17,14 @@
             </div>
             <div class="mb-3">
                 <label for="short">Short Description</label>
-                <textarea class="form-control" id="short" rows="4"
+                <textarea class="form-control" id="short" rows="4" @onkeyup="MarkShortDescription"
                        @oninput="args => model.ShortDescription = args.Value.ToString()">@model.ShortDescription</textarea>
                 <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">@model.Content</textarea>
+                <textarea class="form-control" id="content" @oninput="args => model.Content = args.Value.ToString()" rows="10"
+                            @onkeyup="MarkContent">@model.Content</textarea>
                 <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
@@ -83,6 +86,8 @@
 
     private FeatureInfoDialog FeatureDialog { get; set; }
 
+    private ElementReference reference;
+
     private CreateNewModel model = new();
 
     protected override void OnParametersSet()
@@ -114,4 +119,25 @@
     {
         model.Content = content;
     }
+
+    private async Task MarkShortDescription(KeyboardEventArgs keyboardEventArgs)
+    {
+        model.ShortDescription = await GetNewMarkdownForElementAsync(keyboardEventArgs, model.ShortDescription, "short");
+    }
+
+    private async Task MarkContent(KeyboardEventArgs keyboardEventArgs)
+    {
+        model.Content = await GetNewMarkdownForElementAsync(keyboardEventArgs, model.Content, "content");
+    }
+
+    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/IMarkerService.cs

@@ -0,0 +1,8 @@
+using System.Threading.Tasks;
+
+namespace LinkDotNet.Blog.Web.Shared.Services;
+
+public interface IMarkerService
+{
+    Task<string> GetNewMarkdownForElementAsync(string elementId, string content, string fenceBegin, string fenceEnd);
+}

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

@@ -0,0 +1,35 @@
+using System.Threading.Tasks;
+using Microsoft.JSInterop;
+
+namespace LinkDotNet.Blog.Web.Shared.Services;
+
+public class MarkerService : IMarkerService
+{
+    private readonly IJSRuntime jsRuntime;
+
+    public MarkerService(IJSRuntime jsRuntime)
+    {
+        this.jsRuntime = jsRuntime;
+    }
+
+    public 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 string.Empty;
+        }
+
+        var beforeMarker = selectionRange.Start > 0 ? content[..selectionRange.Start] : string.Empty;
+        var marker = content.Substring(selectionRange.Start, selectionRange.End - selectionRange.Start);
+        var afterMarker = content.Substring(selectionRange.End, content.Length - selectionRange.End - 1);
+        return beforeMarker + fenceBegin + marker + fenceEnd + afterMarker;
+    }
+
+    private sealed class SelectionRange
+    {
+        public int Start { get; set; }
+
+        public int End { get; set; }
+    }
+}

src/LinkDotNet.Blog.Web/wwwroot/components/selection.js

@@ -0,0 +1,7 @@
+window.getSelectionFromElement = function (id) {
+    const elem = document.getElementById(id)
+    const start = elem.selectionStart
+    const end = elem.selectionEnd
+    elem.selectionStart = elem.selectionEnd = 0
+    return { start, end }
+}

tests/LinkDotNet.Blog.UnitTests/Web/Shared/Admin/CreateNewBlogPostTests.cs

@@ -14,7 +14,7 @@ public class CreateNewBlogPostTests : TestContext
 {
     public CreateNewBlogPostTests()
     {
-        ComponentFactories.AddStub<UploadFile>();
+        ComponentFactories.Add<UploadFile, UploadFile>():
     }
 
     [Fact]