JS Input event (#460)

* Minor refactoring character in insert Text can be val

* Preparations for minimal js input examplt

* White-Listing special keys in SkiaLayer.js.kt proof of concept

* proof-of-concept toSkikoTypeEvent

* proof-of-concept toSkikoTypeEvent in Convertors.js.kt
Co-authored-by: Roman Sedaikin <roman.sedaikin@jetbrains.com>

skiko/src/jsMain/kotlin/org/jetbrains/skiko/Convertors.js.kt

@@ -5,6 +5,60 @@ import org.w3c.dom.events.KeyboardEvent
 import org.w3c.dom.events.WheelEvent
 import org.w3c.dom.events.InputEvent
 
+private val SPECIAL_KEYS = setOf(
+    "Unidentified",
+    "Alt",
+    "AltGraph",
+    "Backspace",
+    "CapsLock",
+    "Control",
+    "Fn",
+    "FnLock",
+    "Hyper",
+    "Meta",
+    "NumLock",
+    "ScrollLock",
+    "Shift",
+    "Super",
+    "Symbol",
+    "SymbolLock",
+    "F1",
+    "F2",
+    "F3",
+    "F4",
+    "F5",
+    "F6",
+    "F7",
+    "F8",
+    "F9",
+    "F10",
+    "F11",
+    "F12",
+    "F13",
+    "F14",
+    "F15",
+    "F16",
+    "F17",
+    "F18",
+    "F19",
+    "F20",
+    "F21",
+    "F22",
+    "ArrowLeft",
+    "ArrowUp",
+    "ArrowRight",
+    "ArrowDown",
+    "Help",
+    "Home",
+    "Delete",
+    "End",
+    "PageUp",
+    "PageDown",
+    "Escape",
+    "Clear",
+    "Clear"
+)
+
 fun toSkikoEvent(
     event: MouseEvent,
     buttons: Boolean,
@@ -35,6 +89,31 @@ fun toSkikoDragEvent(
     )
 }
 
+fun toSkikoTypeEvent(
+    character: String,
+    event: KeyboardEvent?,
+): SkikoInputEvent? {
+    return if (SPECIAL_KEYS.contains(character)) {
+        null
+    } else {
+        val input = when (character) {
+            "Enter" -> "\n"
+            "Tab" -> "\t"
+            else -> character
+        }
+        val key = if (event != null) SkikoKey.valueOf(event.keyCode) else SkikoKey.KEY_UNKNOWN
+        val modifiers = if  (event != null) toSkikoModifiers(event) else SkikoInputModifiers.EMPTY
+        SkikoInputEvent(
+            input,
+            key,
+            modifiers,
+            SkikoKeyboardEventKind.TYPE,
+            event
+        )
+    }
+}
+
+
 fun toSkikoEvent(
     event: KeyboardEvent,
     kind: SkikoKeyboardEventKind

skiko/src/jsMain/kotlin/org/jetbrains/skiko/SkiaLayer.js.kt

@@ -90,6 +90,10 @@ actual open class SkiaLayer {
         htmlCanvas.addEventListener("keydown", { event ->
             event as KeyboardEvent
             skikoView?.onKeyboardEvent(toSkikoEvent(event, SkikoKeyboardEventKind.DOWN))
+
+            toSkikoTypeEvent(event.key, event)?.let { inputEvent ->
+                skikoView?.onInputEvent(inputEvent)
+            }
         })
         htmlCanvas.addEventListener("keyup", { event ->
             event as KeyboardEvent
@@ -112,9 +116,7 @@ var onContentScaleChanged: ((Float) -> Unit)? = null
 
 actual typealias SkikoTouchPlatformEvent = Any
 actual typealias SkikoGesturePlatformEvent = Any
-actual typealias SkikoPlatformInputEvent = InputEvent
+actual typealias SkikoPlatformInputEvent = KeyboardEvent
 actual typealias SkikoPlatformKeyboardEvent = KeyboardEvent
 //  MouseEvent is base class of PointerEvent
 actual typealias SkikoPlatformPointerEvent = MouseEvent
-
-

skiko/src/macosMain/kotlin/org/jetbrains/skiko/SkiaLayer.macos.kt

@@ -147,11 +147,9 @@ actual open class SkiaLayer {
                 return NSMakeRect(x, y, 0.0, 0.0)
             }
             override fun insertText(string: Any, replacementRange: CValue<NSRange>) {
-                var character = ""
-                if (string is NSAttributedString) {
-                    character = string.string
-                } else {
-                    character = string as String
+                val character = when(string) {
+                    is NSAttributedString -> string.string
+                    else -> string as String
                 }
                 skikoView?.onInputEvent(toSkikoTypeEvent(character, keyEvent))
             }