Input: handle delete key (#429)

* make cursor absolute

* Revert "make cursor absolute"

This reverts commit 6c67176.

* handle delete key

* createChangeEvent

* format

src/UI_Components/Input.re

@@ -28,7 +28,6 @@ type action =
   | CursorTimer
   | SetFocus(bool)
   | UpdateText(textUpdate)
-  | Backspace(textUpdate)
   | ResetCursorTimer;
 
 let getStringParts = (index, str) =>
@@ -47,13 +46,26 @@ let getSafeStringBounds = (str, cursorPosition, change) => {
     ? currentLength : nextPosition < 0 ? 0 : nextPosition;
 };
 
-let removeCharacter = (word, cursorPosition) => {
+let removeCharacterBefore = (word, cursorPosition) => {
   let (startStr, endStr) = getStringParts(cursorPosition, word);
   let nextPosition = getSafeStringBounds(startStr, cursorPosition, -1);
   let newString = Str.string_before(startStr, nextPosition) ++ endStr;
   {newString, cursorPosition: nextPosition};
 };
 
+let removeCharacterAfter = (word, cursorPosition) => {
+  let (startStr, endStr) = getStringParts(cursorPosition, word);
+  let newString =
+    startStr
+    ++ (
+      switch (endStr) {
+      | "" => ""
+      | _ => Str.last_chars(endStr, String.length(endStr) - 1)
+      }
+    );
+  {newString, cursorPosition};
+};
+
 let addCharacter = (word, char, index) => {
   let (startStr, endStr) = getStringParts(index, word);
   {
@@ -81,9 +93,6 @@ let reducer = (action, state) =>
     state.isFocused
       ? {...state, cursorPosition, isFocused: true, inputString: newString}
       : state
-  | Backspace({newString, cursorPosition}) =>
-    state.isFocused
-      ? {...state, inputString: newString, cursorPosition} : state
   | ResetCursorTimer => {...state, cursorTimer: Time.Seconds(0.0)}
   };
 
@@ -166,6 +175,16 @@ let make =
     };
 
     let handleKeyDown = (event: NodeEvents.keyEventParams) => {
+      let createChangeEvent = inputString => {
+        value: inputString,
+        character: Key.toString(event.key),
+        key: event.key,
+        altKey: event.altKey,
+        ctrlKey: event.ctrlKey,
+        shiftKey: event.shiftKey,
+        superKey: event.superKey,
+      };
+
       dispatch(ResetCursorTimer);
 
       switch (event.key) {
@@ -175,24 +194,24 @@ let make =
       | Key.KEY_RIGHT =>
         onKeyDown(event);
         dispatch(CursorPosition(1));
+      | Key.KEY_DELETE =>
+        removeCharacterAfter(inputString, cursorPosition)
+        |> (
+          update => {
+            dispatch(UpdateText(update));
+            onKeyDown(event);
+            onChange(createChangeEvent(update.newString));
+          }
+        )
       | Key.KEY_BACKSPACE =>
-        dispatch(CursorPosition(-1));
-        removeCharacter(inputString, cursorPosition)
+        removeCharacterBefore(inputString, cursorPosition)
         |> (
           update => {
-            dispatch(Backspace(update));
+            dispatch(UpdateText(update));
             onKeyDown(event);
-            onChange({
-              value: update.newString,
-              character: Key.toString(event.key),
-              key: event.key,
-              altKey: event.altKey,
-              ctrlKey: event.ctrlKey,
-              shiftKey: event.shiftKey,
-              superKey: event.superKey,
-            });
+            onChange(createChangeEvent(update.newString));
           }
-        );
+        )
       | Key.KEY_ESCAPE =>
         onKeyDown(event);
         Focus.loseFocus();