Integrate HotKeys

Web/Program.cs

@@ -52,4 +52,6 @@ static void ConfigureServices(IServiceCollection services, string baseAddress)
     services.AddScoped<ScopedServiceDemo>();
 
     services.AddSingleton<SingletonServiceDemo>();
+
+    services.AddHotKeys2();
 }

Web/Shared/Search.razor

@@ -12,7 +12,7 @@
     </button>
     <div class="[ dropdown ] [ @(ShowSuggestions ? "is-active" : null) ] [ w-1/2 ] [ @(SmallDevice && !HideNonSearchItems ? "hidden" : null) ] [ @(SmallDevice && HideNonSearchItems ? "grow" : null) ]">
         <div class="[ dropdown-trigger ] [ w-full ]">
-            <input type="search" placeholder="Search" class="[ w-full h-full ] [ px-4 ] [ border-2 ] [ focus:outline-none focus:border-gray-400 ] [ dark:bg-black dark:border-gray-800 dark:focus:border-b-white dark:md:focus:border-blue-800 dark:caret-white dark:text-white ]"
+            <input type="search" placeholder="Type / to search" class="[ w-full h-full ] [ px-4 ] [ border-2 ] [ focus:outline-none focus:border-gray-400 ] [ dark:bg-black dark:border-gray-800 dark:focus:border-b-white dark:md:focus:border-blue-800 dark:caret-white dark:text-white ]"
                    autocapitalize="none" autocomplete="off" autocorrect="off" aria-haspopup="true" aria-controls="dropdown-menu"
                    @bind-value="@SearchText" @bind-value:event="oninput" @onkeyup="KeyUpHandler" @ref="SearchInput"
                    @onfocusout="FocusOutHandler" />

Web/Shared/Search.razor.cs

@@ -2,6 +2,7 @@
 using Microsoft.AspNetCore.Components.Web;
 using Microsoft.JSInterop;
 using SharedModels;
+using Toolbelt.Blazor.HotKeys2;
 
 namespace Web.Shared;
 
@@ -10,6 +11,7 @@ public class SearchBase : ComponentBase, IAsyncDisposable
     private IJSObjectReference? module;
     private short _selectedListItemIndex = -1;
     private string _searchText = string.Empty;
+    private HotKeysContext HotKeysContext = default!;
 
     protected bool HideNonSearchItems;
     protected Guid _componentId = Guid.NewGuid();
@@ -34,6 +36,7 @@ protected string SearchText
     [Inject] private TableOfContents TableOfContents { get; set; } = default!;
     [Inject] private IJSRuntime JSRuntime { get; set; } = default!;
     [Inject] private NavigationManager NavigationManager { get; set; } = default!;
+    [Inject] private HotKeys HotKeys { get; set; } = default!;
 
     [Parameter, EditorRequired] public EventCallback<bool> ToggleNonSearchItems { get; set; }
     [CascadingParameter] public bool SmallDevice { get; set; }
@@ -42,6 +45,8 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
     {
         if (firstRender)
         {
+            HotKeysContext = HotKeys.CreateContext()
+                                    .Add(Key.Slash, async () => await SearchInput.FocusAsync());
             module = await JSRuntime.InvokeAsync<IJSObjectReference>("import", "./js/search.js");
         }
     }
@@ -143,6 +148,8 @@ private async Task ToggleNonSearchItem()
 
     async ValueTask IAsyncDisposable.DisposeAsync()
     {
+        HotKeysContext.Dispose();
+
         if (module is not null)
         {
             await module.DisposeAsync();

Web/Web.csproj

@@ -27,6 +27,7 @@
 		<PackageReference Include="Microsoft.Extensions.Http" Version="7.0.0" />
 		<PackageReference Include="PublishSPAforGitHubPages.Build" Version="2.1.0" />
 		<PackageReference Include="Toolbelt.Blazor.HeadElement" Version="7.3.1" />
+		<PackageReference Include="Toolbelt.Blazor.HotKeys2" Version="3.0.0" />
 	</ItemGroup>
 
 	<ItemGroup>