Command Palette

Create a command palette

You can only create one command palette in your plugin.

// ...

const cmd = ctx.newCommandPalette({
    placeholder: "Search for something",
    // The command palette will open when the user presses 't'
    // You can choose to not have a keyboard shortcut
    keyboardShortcut: "t",
})

// Open the command palette when the tray icon is clicked
tray.onClick(() => {
    cmd.open()
})

Keyboard shortcut

You can set a keyboard shortcut for your command palette. Read this documentation to learn how to format it: https://craig.is/killing/mice.

Items

async function fetchTodos() {
    // Fetch the todos
    const res = await ctx.fetch("https://jsonplaceholder.typicode.com/todos")
    const todos = res.json<{ title: string }[]>()

    // Set the items
    // Calling `setItems` will automatically re-render the command palette
    cmd.setItems(todos.map((todo) => ({
        label: todo.title,
        value: todo.title, // This is used for filtering, should be unique!
        // Optional filtering for when the user writes something in the input
        filterType: "includes", // or "contains"
        onSelect: () => {
            ctx.toast.info(`Todo ${todo.title} selected`)
        },
    })))
}

// Default item
cmd.setItems([
    {
        label: "Fetch Todos",
        value: "fetch todos",
        onSelect: async () => {
            await fetchTodos()
        },
    },
])