ShortcutGuide

Description

The "keyboard shortcuts" sheet, listing an app's shortcuts in titled sections and optionally answering them

ShortcutGuide is the sheet an app opens from its help menu or with Ctrl+/: a Modal whose content is a list of sections, each row a description on the left and its keys on the right, drawn by KeyboardShortcut. It takes the same key names KeyboardShortcut.Matches tests, so a shortcut is declared once and what is listed cannot drift from what is bound.

Usage

Section(title) starts a section — every shortcut added after it is listed under it, until the next Section(...); pass null or empty for an untitled one. Shortcut(description, params keys) adds a row, with key names such as "Ctrl", "Shift", "Enter", "Escape" and "ArrowUp", so modifiers show as ⌘/⇧ on macOS and Ctrl/Shift elsewhere. Describe what the shortcut does ("Quick chat or search"), not what the command is called in the code.

OnPressed(action) gives the shortcut added last something to do. A row without one is listed but not answered, which is right when the key belongs to some other component. Handle(KeyboardEvent) runs the first listed shortcut the event matches and returns whether one did, so the caller stops the event only when the press was taken:

window.addEventListener("keydown", ev =>
{
    if (guide.Handle(ev.As<KeyboardEvent>())) StopEvent(ev);
});

Show(), Hide(onHidden) and Toggle() drive the sheet, and IsVisible reads the state. ShowEmbedded() returns a component to place in a settings or help page instead of floating it. SetTitle(string), Width(UnitSize) (560px by default), LightDismiss() (on by default) / NoLightDismiss() and OnShow / OnHide configure the modal underneath, and the sizing helpers apply to it as they do on Modal.

Var(out var self) hands the guide to its own rows, which is how the Ctrl+/ entry both advertises and performs the toggle.

using Transpose.Core;
using Tesserae;
using static Transpose.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var guide = ShortcutGuide()
               .Var(out var self)
               .Section("General")
                   .Shortcut("Quick chat or search", "Ctrl", "K").OnPressed(() => console.log("palette"))
                   .Shortcut("Toggle sidebar",       "Ctrl", ".").OnPressed(() => console.log("sidebar"))
                   .Shortcut("Keyboard shortcuts",   "Ctrl", "/").OnPressed(() => self.Toggle())
               .Section("In chats")
                   .Shortcut("Send message",        "Enter")
                   .Shortcut("New line in message", "Shift", "Enter")
                   .Shortcut("Stop the response",   "Escape");

            var component = Button("Keyboard shortcuts")
               .Primary()
               .SetIcon(UIcons.Keyboard)
               .OnClick((s, e) => guide.Show());

            document.body.style.overflow = "hidden";
            MountCenteredToBody(component);
        }
    }
}

API reference

public sealed class ShortcutGuide : IComponent, ISpecialCaseStyling

public ShortcutGuide(string title = "Keyboard shortcuts")

public HTMLElement StylingContainer

public bool PropagateStylesToWrapper

public bool IsVisible

public ShortcutGuide Section(string title)

public ShortcutGuide Shortcut(string description, params string[] keys)

public ShortcutGuide OnPressed(Action action)

public bool Handle(KeyboardEvent e)

public ShortcutGuide SetTitle(string title)

public ShortcutGuide Width(UnitSize width)

public ShortcutGuide W(UnitSize width)

public ShortcutGuide LightDismiss()

public ShortcutGuide NoLightDismiss()

public ShortcutGuide OnShow(Modal.OnShowHandler onShow)

public ShortcutGuide OnHide(Modal.OnHideHandler onHide)

public ShortcutGuide Show()

public ShortcutGuide Hide(Action onHidden = null)

public ShortcutGuide Toggle()

public IComponent ShowEmbedded()

public HTMLElement Render()

See also

• Keyboard Shortcut — the key chips, and Matches
• Modal — the surface underneath
• Command Palette — the Ctrl/Cmd-K launcher a guide usually lists
• Sidebar — SidebarButton.SetKeyboardShortcut(...)
• Component catalog