initial implementation of ime interop for web

src/Web/Avalonia.Web.Blazor/Interop/InputHelperInterop.cs

@@ -1,4 +1,5 @@
 using Microsoft.AspNetCore.Components;
+using Microsoft.JSInterop;
 
 namespace Avalonia.Web.Blazor.Interop
 {
@@ -9,14 +10,24 @@ namespace Avalonia.Web.Blazor.Interop
         private const string SetCursorSymbol = "InputHelper.setCursor";
         private const string HideSymbol = "InputHelper.hide";
         private const string ShowSymbol = "InputHelper.show";
+        private const string StartSymbol = "InputHelper.start";
 
         private readonly AvaloniaModule _module;
         private readonly ElementReference _inputElement;
+        private readonly ActionHelper _actionHelper;
+        private DotNetObjectReference<ActionHelper>? callbackReference;
 
         public InputHelperInterop(AvaloniaModule module, ElementReference inputElement)
         {
             _module = module;
             _inputElement = inputElement;
+
+            _actionHelper = new ActionHelper(() =>
+            {
+
+            });
+            
+            Start();
         }
 
         public void Clear() => _module.Invoke(ClearSymbol, _inputElement);
@@ -28,5 +39,15 @@ namespace Avalonia.Web.Blazor.Interop
         public void Hide() => _module.Invoke(HideSymbol, _inputElement);
 
         public void Show() => _module.Invoke(ShowSymbol, _inputElement);
+
+        private void Start()
+        {
+            if(callbackReference != null)
+                return;
+            
+            callbackReference = DotNetObjectReference.Create(_actionHelper);
+
+            _module.Invoke(StartSymbol, _inputElement, callbackReference);
+        }
     }
 }

src/Web/Avalonia.Web.Blazor/webapp/modules/Avalonia/InputHelper.ts

@@ -1,8 +1,18 @@
 export class InputHelper {
+    static callback?: DotNet.DotNetObject;
+    
+    public static start(inputElement: HTMLInputElement, callback: DotNet.DotNetObject)
+    {
+        InputHelper.callback = callback;
+
+        inputElement.addEventListener('compositionstart', InputHelper.onCompositionEvent);
+        inputElement.addEventListener('compositionupdate', InputHelper.onCompositionEvent);
+        inputElement.addEventListener('compositionend', InputHelper.onCompositionEvent);
+    }
+    
     public static clear(inputElement: HTMLInputElement) {
         inputElement.value = "";
     }
-
     
     public static isInputElement( element : HTMLInputElement | HTMLElement ) : element is HTMLInputElement {
         return ( element as HTMLInputElement).setSelectionRange !== undefined;
@@ -28,4 +38,19 @@
     public static show(inputElement: HTMLInputElement) {
         inputElement.style.display = 'block';
     }
+
+    private static onCompositionEvent(ev: CompositionEvent)
+    {
+        if(!InputHelper.callback)
+            return;
+        
+        switch (ev.type)
+        {
+            case "compositionstart":
+            case "compositionupdate":
+            case "compositionend":
+                InputHelper.callback.invokeMethod('Invoke');
+                break;
+        }
+    }
 }