Fixed behavior of setting cursor after selection

Author: linkdotnet

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

@@ -19,7 +19,7 @@
                 <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>
-                <small for="short" class="form-text text-muted">You can use markdown to style your component.</small>
+                <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>
@@ -86,8 +86,6 @@
 
     private FeatureInfoDialog FeatureDialog { get; set; }
 
-    private ElementReference reference;
-
     private CreateNewModel model = new();
 
     protected override void OnParametersSet()
@@ -123,11 +121,13 @@
     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)

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

@@ -23,7 +23,8 @@ public async Task<string> GetNewMarkdownForElementAsync(string elementId, string
         var beforeMarker = selectionRange.Start > 0 ? content[..selectionRange.Start] : string.Empty;
         var marker = content[selectionRange.Start..selectionRange.End];
         var afterMarker = content[selectionRange.End..];
-        await jsRuntime.InvokeVoidAsync("setSelectionFromElement", elementId, selectionRange.Start + fenceBegin.Length);
+        var shift = selectionRange.End + fenceBegin.Length + fenceEnd.Length;
+        await jsRuntime.InvokeVoidAsync("setSelectionFromElement", elementId, shift);
         return beforeMarker + fenceBegin + marker + fenceEnd + afterMarker;
     }
 }

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

@@ -181,10 +181,12 @@ public void ShouldAcceptInputWithoutLosingFocusOrEnter()
     [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)

tests/LinkDotNet.Blog.UnitTests/Web/Shared/Services/MarkerServiceTests.cs

@@ -39,12 +39,12 @@ public async Task ShouldSetCursorPosition()
         const string element = "id";
         JSInterop.Mode = JSRuntimeMode.Loose;
         JSInterop.Setup<SelectionRange>("getSelectionFromElement", element)
-            .SetResult(new SelectionRange { Start = 1, End = 3 });
+            .SetResult(new SelectionRange { Start = 2, End = 5 });
 
-        await cut.GetNewMarkdownForElementAsync(element, "Test", "**", "**");
+        await cut.GetNewMarkdownForElementAsync(element, "Hello World", "**", "**");
 
         var setSelection = JSInterop.Invocations.SingleOrDefault(s => s.Identifier == "setSelectionFromElement");
         setSelection.Arguments.Should().Contain(element);
-        setSelection.Arguments.Should().Contain(3);
+        setSelection.Arguments.Should().Contain(9);
     }
 }