User Input

[johnlindquist]

User Input

Receive text from a user by adding arg to your script:

let value = await arg()

arg will prompt the user to enter text, wait for the text, then return the value of the text to value and continue on with the script.
You can then use value as a string in your script however you want.

If you want to tell the user what information the prompt expects, provide a string:

await arg("Please enter your name")

If you want give the user options to select, provide an array as the second argument:

await arg("Select a fruit:", ["apple", "banana", "grape"])

Drag and drop

Prompt the user to drag and drop a file by using the drop method:

let filePath = await drop()

Longer Text

Allow the user to input multiple lines of text using textarea:

let text = await textarea()

Pre-load the textarea with text by passing a string:

let pleaseEditMe = `Some text I want to edit`
let text = await textarea(pleaseEditMe)

Code Editor

(💵 In the future, using editor will require a paid update)

Launch a full code editor using editor. This is great

let text = await editor()

Pre-load the editor with text and specify a language for code highlighting/features:

let text = `
# My Markdown

* one
* two
`
let editedText = await editor(text, "markdown")
await div(md(editedText))

Keyboard Shortcut

let keyData = await hotkey()

If you were to type cmd+j, keyData would give you the following response:

{
  "key": "j",
  "command": true,
  "shift": false,
  "option": false,
  "control": false,
  "fn": false,
  "hyper": false,
  "os": false,
  "super": false,
  "win": false,
  "shortcut": "command j"
}

[joelgrimberg]

is it possible to 'preload' the text to make it a bit like:
const subject = await arg("some-subject")
if you just 'enter' to the next question, the subject will be 'some-subject'. if changed before the enter, the subject will be the new value

[johnlindquist]

Like so?

Open preloading-text in Script Kit

// Name: Preloading Text

import "@johnlindquist/kit"

let input = await arg("some-subject")
if(!input) input = "some-subject"

await arg({
    placeholder: "Another Subject",
    input
})

[evan-liu]

Is there a way to allow multiple-select on arg options?

[johnlindquist]

"Yes", I haven't released an official option, but it will end up working something like this:

Open multi-select-arg in Script Kit

// Name: Multi Select Arg

import "@johnlindquist/kit"

let people = ["John", "Mindy", "Ben", "Sarah"].map(name => {
    return {
        name,
        id: uuid() //ids allow for a choice to stay selected when the list updates
    }
})

let selectedPeople = []

while (!flag?.cmd) { // press cmd+return to escape while loop
    let person = await arg({
        placeholder: "Select people",
        hint: `cmd+return to submit`
    }, people.map(p => {
            return {
                name: `${selectedPeople.find(sp => sp.id === p.id) ? "✅ " : "☑️"} ${p.name}`,                
                value: p,
                id: p.id
            }        
    }))

    if (flag.cmd) break; //break before updating list

    let maybeIndex = selectedPeople.findIndex(({ id }) => id === person.id)
    
    if (maybeIndex > -1) {
        selectedPeople.splice(maybeIndex, 1)
    } else {
        selectedPeople.push(person)   
    }
}


dev(selectedPeople) //inspect the results

[evan-liu]

Great 👍, thanks @johnlindquist

[davelosert]

It would be great if one could use keycode(), but with an invisible kit-prompt.

This would allow for some vim or emacs like modes where, when activated, all keys on the keyboard can have special functions until hitting escape (it basically does this already, but the kit prompt flashes a lot which makes this somewhat unpleasant).

For example:
Id like to have a mode where I can select and modify all my currently opened windows (focus, resize, move etc.) using yabai`.
A simple script to just cycle through the windows with the arrow keys would look like this:

// Menu: [C]ycle through windows
// Description: Use arrows up and down to cycle through the stacked windows


let cont = true;
while(cont) {
  focusedWindow = await getFocusedWindow();

  let keyData = await hotkey({
    // this would be the setting I'd like to have
    invisiblePrompt: true,
    // Exit the script on escape, kind of like exiting a mode
    onEscape: async () => {
      cont = false;
    }
  });

  if(keyData.key === 'ArrowDown') {
      await $`yabai -m window --focus stack.next`;
  }

  if(keyData.key === 'ArrowUp') {
      await $`yabai -m window --focus stack.prev`;
  }
}

Is this possible already somehow?

[johnlindquist]

Here's how I would tackle it:

1. Listening to keyboard

Grab a package with npm like "iohook" to listen to global keystrokes:
https://www.npmjs.com/package/iohook

Note: This is how Kit.app listens for snippets // Snippet and why it prompts for accessibility access. It would technically be possible to stream these key presses to a script. I'll add it to the backlog of ideas.

2. Switch to a listen "mode"

• menu can show the user you're in a certain "mode".
• An invisible widget can block other apps from receiving keystrokes

Open testing-invisible-widget in Script Kit

// Name: Testing Invisible Widget

import "@johnlindquist/kit"

menu("👂")

// start iohook and listen to keys

// Invisible widget
let w = await widget(``, {
    transparent: true,
    hasShadow: false
})

// "escape" will close the widget
w.onClose(() => {
    // end iohook
    menu("")
})

// Note: If you lose track of the invisible widget
// Open Kit.app, press cmd+p to list running processes/scripts
// You can terminate it from there

⭐ P.S. - We're starting up a Discord if you want to come hang out and chat ideas/features/whatever:
https://discord.gg/hBbMnWcT

[davelosert]

Great, thank you for the idea.

iohook does not compile for me on my M1 Macbook (seems like it is no longer maintained), but I found an alternative with uiohook-napi.

Using a widget rather than an invisible prompt is great - it even gave me the idea that I could present a top or bottom bar, showing the current mode and the possible key-combinations so it is even easier to use.

However, I still run into a problem where a listener created with uiohook-napi only fires on the first keystroke, but not on the subsequent ones:

// Menu: [z]o cycle
// Description: Use hotkeys here
// Author: David Losert
import "@johnlindquist/kit";

// import { uIOhook } from 'uiohook-napi';

const { uIOhook } = await npm('uiohook-napi');


menu("👂")

let w = await widget(`
  <div>
    <p>You typed: {{ message }}</p>
  </div>
`, {
  state: {
    message: 'nothing yet',
  }
});

// "escape" will close the widget
w.onClose(async () => {
    menu("");
    // required as else iouhook will keep the script running
    process.exit(0);
});

// only ever fires once
uIOhook.on('keydown', (key) => {
  w.setState({
    message: key.keycode
  });
});

uIOhook.start();

Still not sure as of why this happens, but I will try to figure it out and post here once I found a solution.

And I joined the discord, thanks for the invite!

[johnlindquist]

I'm using this fork of iohook: https://www.npmjs.com/package/@hcfy/iohook

[jmatthewpryor]

hi @johnlindquist - is the multi-select-arg available? I tried the code above but CMD+RETURN doesn't exit the loop. Perhaps I missed an proper example/docs somewhere else

[johnlindquist]

@jmatthewpryor Since the additions of shortcuts a while back, a multi-arg would be more like this:

// Name: Multi Select Arg

import "@johnlindquist/kit"

let people = ["John", "Mindy", "Ben", "Sarah"].map(name => {
  return {
    name,
    id: uuid(), //ids allow for a choice to stay selected when the list updates
  }
})

let selectedIds = []
let done = false
let defaultValue = null

while (!done) {
  let id = await arg(
    {
      placeholder: "Select People",
      defaultValue,
      enter: "Toggle",
      shortcuts: [
        {
          name: "Submit",
          key: `cmd+enter`,
          bar: "right",
          onPress: async () => {
            submit(false)
            done = true
          },
        },
      ],
    },
    people.map(p => {
      let selected = selectedIds.find(id => id === p.id)
      return {
        name: `${selected ? "✅ " : "☑️"} ${p.name}`,
        value: p.id,
        id: p.id,
      }
    })
  )

  if (done) break

  if (selectedIds.includes(id)) {
    _.remove(selectedIds, _id => _id === id)
  } else {
    selectedIds.push(id)
  }
  defaultValue = id
}

let selectedPeople = people.filter(p =>
  selectedIds.includes(p.id)
)

dev({ selectedPeople })

Open multi-select-arg in Script Kit

[itsanji]

Hello, How can I create an arg that not wait for user to input can be passed when run from terminal ?.