Как на React создать текстовое поле с кастомными переменными?

Question

[danil_linkins]

Как создать на React текстовое поле с возможностью ввода переменных такого типа {{FirstName}}?
Такая переменная должна иметь свою визуализацию (например как кнопка) с функционалом (при клике можно выбрать другие переменные), допустим.
И при напечатании "{{" появляется поле с выбором переменной и при выборе она появляется в водимом тексте.

Есть ли какие то средства для разработки такого, может быть готовые решения?

Я рассматривал фреймворк draft.js
Но сроки не позволяют изучить его и написать что то на нем достаточно быстро

Comments

[Антон Спирин]

По описанию похоже на обычный search select.

[danil_linkins]

Антон Спирин, Не совсем, переменные должны быть прямо в текстовом поле для ввода, подсвечиваться, и иметь кликабельный функционал, при этом, оставаться текстом на вывод

[Антон Спирин]

danil_linkins, размытое описание задачи. Вам code editor нужен?

[danil_linkins]

Антон Спирин, Нет, просто текстовый редактор с кастомным функционалом

[danil_linkins]

Антон Спирин, First Name и Lsat Name - это переменные которые в тексте записаны так {{FirstName}} {{LastName}}
но отображаюся кастомно и кликабельные

Answer 1

[Александр Вульф]

Мы долго искали похожий функционал, в итоге либо что-то не на React брать и писать обёртку (либо использовать готовую), либо draftjs (в котором, кстати, миллион багов). Если что-то найдёте, напишите, пожалуйста здесь. Подписался :)

Comments

[danil_linkins]

Добрый день! Ну как? У вас получилось что-нибудь?
Я нашел только 2 способа сделать, это либо draft.js либо slate.js и в них много багов и сложно разобраться в документации

[Александр Вульф]

danil_linkins, нет, всё абсолютно также. Либо draft, либо slate. Интересного так и не нашли.

[Александр Вульф]

danil_linkins, сами используем draft, миримся с кучей багов. Пока планируем написать что-то очень узкое своё.