Set Cursor Position

Author: linkdotnet

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

@@ -3,7 +3,7 @@
 
 namespace LinkDotNet.Blog.Web.Shared.Services;
 
-public partial class MarkerService : IMarkerService
+public class MarkerService : IMarkerService
 {
     private readonly IJSRuntime jsRuntime;
 
@@ -23,6 +23,7 @@ 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);
         return beforeMarker + fenceBegin + marker + fenceEnd + afterMarker;
     }
 }

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

@@ -3,4 +3,10 @@ window.getSelectionFromElement = function (id) {
     const start = elem.selectionStart
     const end = elem.selectionEnd
     return { start, end }
+}
+
+window.setSelectionFromElement = function (id, cursor) {
+    const elem = document.getElementById(id)
+    elem.selectionStart = cursor
+    elem.selectionEnd = cursor
 }

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

@@ -1,3 +1,4 @@
+using System.Linq;
 using System.Threading.Tasks;
 using Bunit;
 using FluentAssertions;
@@ -23,11 +24,27 @@ public MarkerServiceTests()
     public async Task ShouldMarkString(string source, int startSelect, int endSelect, string fence, string expected)
     {
         const string element = "id";
+        JSInterop.Mode = JSRuntimeMode.Loose;
         JSInterop.Setup<SelectionRange>("getSelectionFromElement", element)
             .SetResult(new SelectionRange { Start = startSelect, End = endSelect });
 
         var actual = await cut.GetNewMarkdownForElementAsync(element, source, fence, fence);
 
         actual.Should().Be(expected);
     }
+
+    [Fact]
+    public async Task ShouldSetCursorPosition()
+    {
+        const string element = "id";
+        JSInterop.Mode = JSRuntimeMode.Loose;
+        JSInterop.Setup<SelectionRange>("getSelectionFromElement", element)
+            .SetResult(new SelectionRange { Start = 1, End = 3 });
+
+        await cut.GetNewMarkdownForElementAsync(element, "Test", "**", "**");
+
+        var setSelection = JSInterop.Invocations.SingleOrDefault(s => s.Identifier == "setSelectionFromElement");
+        setSelection.Arguments.Should().Contain(element);
+        setSelection.Arguments.Should().Contain(3);
+    }
 }