livebook/lib/livebook_web/live/session_live/shortcuts_component.ex

147 lines
4.7 KiB
Elixir
Raw Normal View History

defmodule LivebookWeb.SessionLive.ShortcutsComponent do
use LivebookWeb, :live_component
@shortcuts %{
insert_mode: [
%{seq: ["esc"], desc: "Switch back to navigation mode"},
%{
seq: ["ctrl", ""],
seq_mac: ["", ""],
press_all: true,
desc: "Evaluate cell and stay in insert mode"
},
%{seq: ["tab"], desc: "Autocomplete expression when applicable"},
%{
seq: ["ctrl", ""],
press_all: true,
desc: "Show completion list, use twice for details"
},
%{
seq: ["ctrl", "shift", "i"],
seq_mac: ["", "", "f"],
seq_windows: ["shift", "alt", "f"],
press_all: true,
desc: "Format Elixir code"
}
],
navigation_mode: [
%{seq: ["?"], desc: "Open this help modal"},
%{seq: ["j"], desc: "Focus next cell"},
%{seq: ["k"], desc: "Focus previous cell"},
%{seq: ["J"], desc: "Move cell down"},
%{seq: ["K"], desc: "Move cell up"},
%{seq: ["i"], desc: "Switch to insert mode"},
%{seq: ["n"], desc: "Insert Elixir cell below"},
%{seq: ["m"], desc: "Insert Markdown cell below"},
%{seq: ["N"], desc: "Insert Elixir cell above"},
%{seq: ["M"], desc: "Insert Markdown cell above"},
%{seq: ["d", "d"], desc: "Delete cell"},
%{seq: ["e", "e"], desc: "Evaluate cell"},
%{seq: ["e", "s"], desc: "Evaluate section"},
%{seq: ["e", "a"], desc: "Evaluate all stale/new cells"},
%{seq: ["e", "j"], desc: "Evaluate cells below"},
%{seq: ["e", "x"], desc: "Cancel cell evaluation"},
%{seq: ["s", "s"], desc: "Toggle sections panel"},
%{seq: ["s", "u"], desc: "Toggle users panel"},
%{seq: ["s", "r"], desc: "Show runtime settings"},
%{seq: ["s", "b"], desc: "Show bin"},
%{seq: ["0", "0"], desc: "Restart current runtime"}
],
universal: [
%{seq: ["ctrl", "s"], seq_mac: ["", "s"], press_all: true, desc: "Save notebook"}
]
}
@impl true
def mount(socket) do
{:ok, assign(socket, shortcuts: @shortcuts)}
end
@impl true
def render(assigns) do
~L"""
<div class="p-6 flex flex-col space-y-3">
<h3 class="text-2xl font-semibold text-gray-800">
Keyboard shortcuts
</h3>
<p class="text-gray-700">
Livebook highly embraces keyboard navigation to improve your productivity.
It operates in one of two modes similarly to the Vim text editor.
In <span class="font-semibold">navigation mode</span> you move around
the notebook and execute commands, whereas in the <span class="font-semibold">insert mode</span>
you have editor focus and directly modify the given cell content.
</p>
<%= render_shortcuts_section("Navigation mode", @shortcuts.navigation_mode, @platform) %>
<%= render_shortcuts_section("Insert mode", @shortcuts.insert_mode, @platform) %>
<%= render_shortcuts_section("Universal", @shortcuts.universal, @platform) %>
</div>
"""
end
defp render_shortcuts_section(title, shortcuts, platform) do
{left, right} = split_in_half(shortcuts)
assigns = %{title: title, left: left, right: right, platform: platform}
~L"""
2021-04-04 18:42:46 +08:00
<h3 class="text-lg font-medium text-gray-900 pt-4">
<%= @title %>
</h3>
<div class="mt-2 flex flex-col sm:flex-row sm:space-x-2">
2021-04-21 19:50:55 +08:00
<div class="flex-grow">
<%= render_shortcuts_section_table(@left, @platform) %>
</div>
2021-04-21 19:50:55 +08:00
<div class="flex-grow">
<%= render_shortcuts_section_table(@right, @platform) %>
</div>
</div>
"""
end
defp render_shortcuts_section_table(shortcuts, platform) do
assigns = %{shortcuts: shortcuts, platform: platform}
~L"""
<table>
<tbody>
<%= for shortcut <- @shortcuts do %>
<tr>
<td class="py-2 pr-3">
<%= render_shortcut_seq(shortcut, @platform) %>
</td>
<td>
<%= shortcut.desc %>
</td>
</tr>
<% end %>
</tbody>
</table>
"""
end
defp render_shortcut_seq(shortcut, platform) do
seq = shortcut[:"seq_#{platform}"] || shortcut.seq
press_all = Map.get(shortcut, :press_all, false)
joiner =
if press_all do
remix_icon("add-line", class: "text-lg text-gray-600")
end
elements = Enum.map_intersperse(seq, joiner, &content_tag("kbd", &1))
assigns = %{elements: elements}
~L"""
<div class="flex space-x-1 items-center markdown">
<%= for element <- @elements do %>
<%= element %>
<% end %>
</div>
"""
end
defp split_in_half(list) do
half_idx = list |> length() |> Kernel.+(1) |> div(2)
Enum.split(list, half_idx)
end
end