Компоненты

SlashTextarea

Меню команд по «/» прямо в поле ввода — как в Notion и Linear.

Поле ввода с меню команд по «/» — как в Notion, Linear и Slack. Родня MentionTextarea, но «/» запускает действие или вставляет шаблон, а не имя.

Пример

<SlashTextarea
  value={value}
  onValueChange={setValue}
  commands={commands}
  onCommand={(cmd) => {
    if (cmd.id === "date") return new Date().toLocaleDateString(); // вставится
    createTask();                                                  // или действие
  }}
/>

Наберите «/» в поле — появится меню. Стрелки и Enter выбирают команду.

Пропсы

Проп	Тип	По умолчанию	Описание
`value / onValueChange`*	`string / (v) => void`	—	Текст поля.
`commands`*	`SlashCommand[]`	—	Команды: id, label, hint, icon, keywords.
`onCommand`*	`(cmd) => string \| void`	—	Строка вставится вместо «/…»; void — команда-действие.
`trigger`	`string`	`"/"`	Символ-триггер.
`rows`	`number`	`4`	Высота поля.

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

Текст поля.

commands*SlashCommand[]

Команды: id, label, hint, icon, keywords.

onCommand*(cmd) => string | void

Строка вставится вместо «/…»; void — команда-действие.

triggerstring

по умолчанию: "/"

Символ-триггер.

rowsnumber

по умолчанию: 4

Высота поля.

Детект триггера отдельно

tsx

import {
  triggerAt,       // активный триггер у каретки (null — меню закрыто)
  replaceTrigger,  // заменить «/…» на текст и вернуть новую каретку
  filterByQuery,   // отбор вариантов по набранному запросу
} from "@toimetdev/pathlogs-core";