Fix: Editor not clearing on empty TextSource (#151)

* Fix: Remove redundant `console.log` from `setValueSelectionAware` in `InfiniBlazor.js`.

* Fix: Add `ClearAsync` method to `MdEditorContext` and refactor calls for source clearing in the editor

* Fix: Add `clearValue` method to `ElementLib` for input value clearing

Author: AnnaSasDev

dev/DevTools.MdTestHelper/Components/Pages/MdTestDataEditor/MdTestDataEditorData.razor

@@ -95,7 +95,8 @@
                 </InfiniTabContent>
 
                 <InfiniTabContent TabName="Blazor">
-                    <InfiniMdEditorStandalonePreview @bind-EditorContext="@EditorContext" @bind-RenderContext="@RenderContext"/>
+                    <InfiniMdEditorStandalonePreview @bind-EditorContext="@EditorContext"
+                                                     @bind-RenderContext="@RenderContext"/>
                 </InfiniTabContent>
             </InfiniTabContainer>
 
@@ -143,7 +144,7 @@
 
         EditorContext.OnSyntaxTreeChangedAsync += OnGenerateAsync;
     }
-    
+
     public void Dispose() {
         EditorContext.OnSyntaxTreeChangedAsync -= OnGenerateAsync;
     }
@@ -179,11 +180,11 @@
         IMdSyntaxTree tree = EditorContext.SyntaxTree;
         using var memoryStream = new MemoryStream();
         await MarkdownParser.Json.DeserializeToJsonStreamAsync(memoryStream, tree);
-        
+
         memoryStream.Position = 0;
         string result = await new StreamReader(memoryStream).ReadToEndAsync();
         ExpectedJsonString = result.ReplaceLineEndings("\n");
-        
+
     }
 
     private Task GenerateMarkdown() {
@@ -215,7 +216,7 @@
         EditorContext.Content = testData.MdString;
 
         if (testData.MdSyntaxTree is {} tree) {
-            using MemoryStream memoryStream = new MemoryStream();
+            using var memoryStream = new MemoryStream();
             await MarkdownParser.Xml.DeserializeToXmlStreamAsync(memoryStream, tree);
 
             memoryStream.Position = 0;
@@ -256,8 +257,8 @@
         }
 
         await ToastingProvider.PublishToastAsync(
-        new ToastingData("Test was saved", TestId),
-        ToastAppearance.Success
+            new ToastingData("Test was saved", TestId),
+            ToastAppearance.Success
         );
 
         // Notify parent component about the rename
@@ -275,14 +276,14 @@
         FileName = string.Empty;
         TestId = string.Empty;
         DeveloperNote = string.Empty;
-        EditorContext.Content = string.Empty;
         ExpectedMarkdown = string.Empty;
         ExpectedSyntaxTreeString = string.Empty;
         TestDataOrigin = null;
+        await EditorContext.ClearAsync();
 
         await ToastingProvider.PublishToastAsync(
-        new ToastingData("Test was Deleted", TestId),
-        ToastAppearance.Success
+            new ToastingData("Test was Deleted", TestId),
+            ToastAppearance.Success
         );
 
         // Notify parent component about the rename
@@ -303,8 +304,8 @@
         }
 
         await ToastingProvider.PublishToastAsync(
-        new ToastingData("Test was Renamed", TestId),
-        ToastAppearance.Success
+            new ToastingData("Test was Renamed", TestId),
+            ToastAppearance.Success
         );
 
         // Re-fetch data
@@ -318,14 +319,14 @@
         FileName = string.Empty;
         TestId = string.Empty;
         DeveloperNote = string.Empty;
-        EditorContext.Content = string.Empty;
         ExpectedMarkdown = string.Empty;
         ExpectedSyntaxTreeString = string.Empty;
         TestDataOrigin = null;
+        await EditorContext.ClearAsync();
 
         await ToastingProvider.PublishToastAsync(
-        new ToastingData("Test Cleared"),
-        ToastAppearance.Info
+            new ToastingData("Test Cleared"),
+            ToastAppearance.Info
         );
     }
 }

src/InfiniLore.InfiniBlazor.Contracts/JsRuntime/IInfiniBlazorJsElement.cs

@@ -9,6 +9,7 @@ namespace InfiniLore.InfiniBlazor.JsRuntime;
 // Code
 // ---------------------------------------------------------------------------------------------------------------------
 public interface IInfiniBlazorJsElement {
+    Task ClearValueAsync(ElementReference element, CancellationToken ct = default);
     Task SetValueAsync(ElementReference element, string text, CancellationToken ct = default);
     Task SetValueSelectionAwareAsync(ElementReference element, string text, CancellationToken ct = default);
 

src/InfiniLore.InfiniBlazor.Core.Js/InfiniBlazorJsElement.cs

@@ -19,6 +19,15 @@ ILogger<InfiniBlazorJsElement> logger
     // -----------------------------------------------------------------------------------------------------------------
     // Methods
     // -----------------------------------------------------------------------------------------------------------------
+    public async Task ClearValueAsync(ElementReference element, CancellationToken ct = default) {
+        try {
+            await jsRuntime.InvokeVoidAsync("infiniBlazor.elements.clearValue", ct, element);
+        }
+        catch (Exception e) {
+            logger.Warning(e, "Error clearing value for element {element}", element);
+        }
+    }
+    
     public async Task SetValueAsync(ElementReference element, string text, CancellationToken ct = default) {
         try {
             await jsRuntime.InvokeVoidAsync("infiniBlazor.elements.setValue", ct, element, text);

src/InfiniLore.InfiniBlazor.Core.Js/TypescriptLib/Libs/ElementLib.ts

@@ -8,6 +8,12 @@ import {IInputElement} from "../Contracts/IInputElement";
 // ---------------------------------------------------------------------------------------------------------------------
 // noinspection JSUnusedGlobalSymbols
 class ElementLib {
+    public clearValue(element: IInputElement): void {
+        if (!element) return;
+        
+        element.value = "";
+    }
+    
     public setValue(element: IInputElement, value: string): void {
         if (!element) return;
         if (!value) return;
@@ -16,7 +22,6 @@ class ElementLib {
     }
 
     public setValueSelectionAware(element: IInputElement, text: string): void {
-        console.log(text);
         if (!element) return;
         if (!text) return;
 

src/InfiniLore.InfiniBlazor.Core.Markdown.Components/InfiniMarkdownEditor/InfiniMarkdownEditor.razor

@@ -3,6 +3,7 @@
 @* ------------------------------------------------------------------------------------------------------------------ *@
 @using InfiniLore.InfiniBlazor.JsRuntime
 @using InfiniLore.InfiniBlazor.Markdown.Parsers.Blazor
+@* @using Microsoft.Extensions.Logging *@
 
 @namespace InfiniLore.InfiniBlazor.Markdown
 @* ------------------------------------------------------------------------------------------------------------------ *@
@@ -13,6 +14,7 @@
 @inject IMarkdownParser Parser
 @inject IInfiniBlazorJs InfiniBlazorJs
 @inject ITextEditor TextEditor
+@* @inject ILogger<InfiniMarkdownEditor> Logger *@
 @* ------------------------------------------------------------------------------------------------------------------ *@
 @* Html
 @* ------------------------------------------------------------------------------------------------------------------ *@
@@ -140,7 +142,8 @@
     }
 
     private async Task OnSourceChangedAsync() {
-        await InfiniBlazorJs.Element.SetValueSelectionAwareAsync(EditorContext.InputElementRef, EditorContext.TextSource.Text);
+        if (EditorContext.TextSource.IsEmpty) await InfiniBlazorJs.Element.ClearValueAsync(EditorContext.InputElementRef);
+        else await InfiniBlazorJs.Element.SetValueSelectionAwareAsync(EditorContext.InputElementRef, EditorContext.TextSource.Text);
 
         EditorContext.SyntaxTree.ReturnToPool();
         EditorContext.SyntaxTree = Parser.Markdown.SerializeToSyntaxTree(EditorContext.TextSource.Text);

src/InfiniLore.InfiniBlazor.Core.Markdown.Components/InfiniMarkdownEditor/InfiniMdEditorInput.razor

@@ -36,7 +36,7 @@
 
     protected override bool ShouldRender() {
         if (!base.ShouldRender()) return false;
-
+    
         int lastHashCode = _valueHashCode;
         _valueHashCode = EditorContext.TextSource.Text.GetHashCode();
         return _valueHashCode != lastHashCode;

src/InfiniLore.InfiniBlazor.Core.Markdown.Components/InfiniMarkdownEditor/MdEditorContext.cs

@@ -47,6 +47,9 @@ public MdEditorContext() {
     // -----------------------------------------------------------------------------------------------------------------
     // Methods
     // -----------------------------------------------------------------------------------------------------------------
+    public Task ClearAsync()
+        => InvokeSourceChangeAsync(string.Empty);
+
     public async Task InvokeSourceChangeAsync(string value) {
         TextSource.UpdateSource(value);
         if (OnSourceChangedAsync is null) return;