wasm: keep ime and surrounding text in sync and aligned carets (managed / native)

src/Web/Avalonia.Web.Blazor/AvaloniaView.razor

@@ -48,10 +48,10 @@
 }
 
 #inputElement {
-    opacity: 0.2;
+    opacity: 0.5;
     position: absolute;
-    width: 400px;
+    width: 5000px;
-    height: 75px;
+    height: 20px;
     top: 0px;
     left: 0px;
     z-index: 1000;

src/Web/Avalonia.Web.Blazor/AvaloniaView.razor.cs

@@ -452,11 +452,15 @@ namespace Avalonia.Web.Blazor
 
             _client = client;
             
-            if (IsActive)
+            if (IsActive && _client != null)
             {
                 _inputHelper.Show();
                 _inputElementFocused = true;
                 _inputHelper.Focus();
+                
+                var surroundingText = _client.SurroundingText;
+
+                _inputHelper?.SetSurroundingText(surroundingText.Text, surroundingText.AnchorOffset, surroundingText.CursorOffset);
             }
             else
             {
@@ -470,17 +474,25 @@ namespace Avalonia.Web.Blazor
             if(_client != null && IsComposing)
             {
                 var surroundingText = _client.SurroundingText;
-
+                
                 _inputHelper?.SetSurroundingText(surroundingText.Text, surroundingText.AnchorOffset, surroundingText.CursorOffset);
             }
         }
 
         public void SetCursorRect(Rect rect)
         {
+            _inputHelper?.Focus();
             var bounds = new PixelRect((int)rect.X, (int) rect.Y, (int) rect.Width, (int) rect.Height);
             
-            _inputHelper?.SetBounds(bounds);
+            if (_client != null)
-            _inputHelper?.Focus();
+            {
+                var surroundingText = _client.SurroundingText;
+
+                _inputHelper?.SetSurroundingText(surroundingText.Text, surroundingText.AnchorOffset,
+                    surroundingText.CursorOffset);
+                
+                _inputHelper?.SetBounds(bounds, surroundingText.CursorOffset);
+            }
         }
 
         public void SetOptions(TextInputOptions options)

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

@@ -127,9 +127,9 @@ namespace Avalonia.Web.Blazor.Interop
             _module.Invoke(SetSurroundingTextSymbol, _inputElement, text, start, end);
         }
 
-        public void SetBounds(PixelRect bounds)
+        public void SetBounds(PixelRect bounds, int caret)
         {
-            _module.Invoke(SetBoundsSymbol, _inputElement, bounds.X, bounds.Y, bounds.Width, bounds.Height);
+            _module.Invoke(SetBoundsSymbol, _inputElement, bounds.X, bounds.Y, bounds.Width, bounds.Height, caret);
         }
     }
 }

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

@@ -29,15 +29,16 @@ export class InputHelper {
         inputElement.style.cursor = kind;
     }
     
-    public static setBounds(inputElement: HTMLInputElement, x: number, y: number, width: number, height: number)
+    public static setBounds(inputElement: HTMLInputElement, x: number, y: number, width: number, height: number, caret: number)
     {
-        inputElement.style.left = (x - 5).toFixed(0) + "px";
-        inputElement.style.top = (y - 5).toFixed(0) + "px";
-        inputElement.style.height = "20px";
-        inputElement.style.width = "200px";
-
         if(inputElement.selectionStart) {
-            let {height, left, top} = CaretHelper.getCaretCoordinates(inputElement, inputElement.selectionStart);
+            inputElement.style.left = (x).toFixed(0) + "px";
+            inputElement.style.top = (y).toFixed(0) + "px";
+
+            let {height, left, top} = CaretHelper.getCaretCoordinates(inputElement, caret);
+
+            inputElement.style.left = (x - left).toFixed(0) + "px";
+            inputElement.style.top = (y - top).toFixed(0) + "px";
         }
     }