Handle all commandInput events in the hook (#136)

Author: eldano

assets/js/app.js

@@ -26,6 +26,21 @@ Hooks.CommandInput = {
     this.handleEvent('reset', () => {
       el.value = '';
     });
+    el.addEventListener('keydown', (e) => {
+      if (e.code === 'Tab') {
+        this.pushEventTo(
+          '#commandInput',
+          'suggest',
+          {'value': el.value, 'caret_position': el.selectionEnd}
+        );
+      } else if (e.code === 'ArrowUp') {
+        this.pushEventTo('#commandInput', 'cycle_history_up');
+      } else if (e.code === 'ArrowDown') {
+        this.pushEventTo('#commandInput', 'cycle_history_down');
+      } else {
+        this.pushEventTo('#commandInput', 'reset_history', {});
+      }
+    });
   },
   updated() {
     const newValue = this.el.dataset.input_value;

lib/elixir_console_web/live/console_live/command_input_component.ex

@@ -9,10 +9,6 @@ defmodule ElixirConsoleWeb.ConsoleLive.CommandInputComponent do
   import ElixirConsoleWeb.ConsoleLive.Helpers
   alias ElixirConsole.Autocomplete
 
-  @tab_keycode "Tab"
-  @up_keycode "ArrowUp"
-  @down_keycode "ArrowDown"
-
   def mount(socket) do
     {:ok,
      assign(
@@ -28,11 +24,7 @@ defmodule ElixirConsoleWeb.ConsoleLive.CommandInputComponent do
 
   defp ensure_number(value), do: String.to_integer(value)
 
-  def handle_event(
-        "keydown",
-        %{"key" => @tab_keycode, "value" => value, "caret_position" => caret_position},
-        socket
-      ) do
+  def handle_event("suggest", %{"value" => value, "caret_position" => caret_position}, socket) do
     %{bindings: bindings} = socket.assigns
 
     # When testing this event using render_keydown/up, even if the metadata is defined as a number,
@@ -60,7 +52,7 @@ defmodule ElixirConsoleWeb.ConsoleLive.CommandInputComponent do
     end
   end
 
-  def handle_event("keydown", %{"key" => @up_keycode}, socket) do
+  def handle_event("cycle_history_up", _params, socket) do
     %{history_counter: counter, history: history} = socket.assigns
     {input_value, new_counter} = get_previous_history_entry(history, counter)
     new_caret_position = String.length(input_value)
@@ -73,7 +65,7 @@ defmodule ElixirConsoleWeb.ConsoleLive.CommandInputComponent do
      )}
   end
 
-  def handle_event("keydown", %{"key" => @down_keycode}, socket) do
+  def handle_event("cycle_history_down", _params, socket) do
     %{history_counter: counter, history: history} = socket.assigns
     {input_value, new_counter} = get_next_history_entry(history, counter)
     new_caret_position = String.length(input_value)
@@ -86,7 +78,7 @@ defmodule ElixirConsoleWeb.ConsoleLive.CommandInputComponent do
      )}
   end
 
-  def handle_event("keydown", _key, socket) do
+  def handle_event("reset_history", _key, socket) do
     {:noreply, assign(socket, history_counter: -1, input_value: "")}
   end
 

lib/elixir_console_web/live/console_live/command_input_component.html.leex

@@ -8,7 +8,6 @@
       autocomplete="off"
       autofocus
       name="command"
-      phx-keydown="keydown"
       phx-target="#command_input"
       phx-hook="CommandInput"
       data-input_value="<%= @input_value %>"

test/elixir_console_web/live/console_live_test.exs

@@ -103,7 +103,7 @@ defmodule ElixirConsoleWeb.ConsoleLiveTest do
       {:ok, view, _html} = live(conn, "/")
 
       input = element(view, "#command_input input")
-      render_keydown(input, %{"key" => "Tab", "value" => "Enum.co", "caret_position" => 7})
+      render_hook(input, :suggest, %{"value" => "Enum.co", "caret_position" => 7})
 
       html = render(view)
 
@@ -114,7 +114,7 @@ defmodule ElixirConsoleWeb.ConsoleLiveTest do
       {:ok, view, _html} = live(conn, "/")
 
       input = element(view, "#command_input input")
-      render_keydown(input, %{"key" => "Tab", "value" => "Enum.conc", "caret_position" => 9})
+      render_hook(input, :suggest, %{"value" => "Enum.conc", "caret_position" => 9})
 
       html = render(view)
 
@@ -128,12 +128,7 @@ defmodule ElixirConsoleWeb.ConsoleLiveTest do
       {:ok, view, _html} = live(conn, "/")
 
       input = element(view, "#command_input input")
-
-      render_keydown(input, %{
-        "key" => "Tab",
-        "value" => "Enum.co([1,2]) - 2",
-        "caret_position" => 7
-      })
+      render_hook(input, :suggest, %{"value" => "Enum.co([1,2]) - 2", "caret_position" => 7})
 
       html = render(view)
 
@@ -146,11 +141,7 @@ defmodule ElixirConsoleWeb.ConsoleLiveTest do
       input = element(view, "#command_input input")
 
       html =
-        render_keydown(input, %{
-          "key" => "Tab",
-          "value" => "Enum.conc([1,2], [3])",
-          "caret_position" => 9
-        })
+        render_hook(input, :suggest, %{"value" => "Enum.conc([1,2], [3])", "caret_position" => 9})
 
       assert html =~ ~r/\<input .* data-input_value\="Enum.concat\(\[1,2\], \[3\]\)"/
       assert html =~ ~r/\<input .* data-caret_position\="11"/