Компоненты

MentionTextarea

Поле ввода с автодополнением @упоминаний.

Поле ввода с автодополнением @упоминаний. Меню открывается на «@» и закрывается на пробеле; Enter и Tab вставляют первый вариант.

Пример

import { MentionTextarea } from "@toimetdev/pathlogs-core";

<form action={addComment}>
  <MentionTextarea
    name="body"
    people={project.members}
    rows={3}
    placeholder="Наберите @ и начните вводить имя…"
  />
  <button type="submit">Отправить</button>
</form>

Вставка идёт мимо onChange, поэтому курсор возвращается сразу за вставленное имя, а не прыгает в конец текста.

Почему id, а не текст

Рядом с полем компонент держит скрытый input со списком идентификаторов упомянутых:

html

<input type="hidden" name="mentions" value="u1,u3" />

Имя скрытого поля меняется пропом mentionsName, если mentions у вас занято.

Пропсы

Проп	Тип	По умолчанию	Описание
`name`*	`string`	—	Имя поля в форме.
`people`*	`{ id, name, image? }[]`	—	Кого можно упомянуть. Фильтруются по подстроке в имени.
`mentionsName`	`string`	`"mentions"`	Имя скрытого поля со списком id через запятую.
`limit`	`number`	`6`	Сколько вариантов показывать.
`value / onValueChange`	`string / (value: string) => void`	—	Внешнее управление значением. Без них компонент держит его сам.
`rows`	`number`	`2`	Высота поля.
`placeholder`	`string`	—	Подсказка в пустом поле.
`autoFocus`	`boolean`	—	Курсор сразу в поле — для формы ответа, открытой по клику.

name*string

Имя поля в форме.

people*{ id, name, image? }[]

Кого можно упомянуть. Фильтруются по подстроке в имени.

mentionsNamestring

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

Имя скрытого поля со списком id через запятую.

limitnumber

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

Сколько вариантов показывать.

value / onValueChangestring / (value: string) => void

Внешнее управление значением. Без них компонент держит его сам.

rowsnumber

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

Высота поля.

placeholderstring

Подсказка в пустом поле.

autoFocusboolean

Курсор сразу в поле — для формы ответа, открытой по клику.