Components

SlashTextarea

A «/» command menu right inside the input — like Notion and Linear.

A text field with a «/» command menu — as in Notion, Linear and Slack. A relative of MentionTextarea, except «/» runs an action or inserts a template rather than a name.

Example

<SlashTextarea
  value={value}
  onValueChange={setValue}
  commands={commands}
  onCommand={(cmd) => {
    if (cmd.id === "date") return new Date().toLocaleDateString(); // gets inserted
    createTask();                                                  // or an action
  }}
/>

Type «/» in the field and the menu appears. Arrows and Enter pick a command.

Props

Prop	Type	Default	Description
`value / onValueChange`*	`string / (v) => void`	—	The field's text.
`commands`*	`SlashCommand[]`	—	The commands: id, label, hint, icon, keywords.
`onCommand`*	`(cmd) => string \| void`	—	A string is inserted in place of «/…»; void means an action command.
`trigger`	`string`	`"/"`	The trigger character.
`rows`	`number`	`4`	The field height.

value / onValueChange*string / (v) => void

The field's text.

commands*SlashCommand[]

The commands: id, label, hint, icon, keywords.

onCommand*(cmd) => string | void

A string is inserted in place of «/…»; void means an action command.

triggerstring

defaults to: "/"

The trigger character.

rowsnumber

defaults to: 4

The field height.

Trigger detection, separately

tsx

import {
  triggerAt,       // the active trigger at the caret (null — menu closed)
  replaceTrigger,  // replace «/…» with text and return the new caret
  filterByQuery,   // pick matches for what has been typed
} from "@toimetdev/pathlogs-core";