Necesito un componente de entrada donde pueda insertar texto y cuando ingreso un carácter especial, aparece una ventana con una selección de variables y se insertará como una etiqueta, y esta etiqueta variable se puede insertar en cualquier parte del texto. Según tengo entendido, esto debería hacerse con contentEditable.

todo lo que pude hacer es una entrada de este tipo, donde pongo el símbolo $ solo al final, y no se agrega una etiqueta, sino texto:

Encontré muchos ejemplos en los que solo se agregan etiquetas ( https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/ ), pero no encontré un componente donde las etiquetas se mezclen con el texto, ¿alguien puede verlo? ¿este?

 import { useState } from 'react' import classNames from 'classnames' import ContentEditable from 'react-contenteditable' import { useAppSelector } from '../../app/hooks' import { selectVariables } from '../../redux/reducers/variables' import styles from '../../stylesheets/components/common/InputVariable.module.scss' export const InputVariable = ({ className, label, onChange, value }: any) => { const { variables } = useAppSelector(selectVariables) const [symbol, symbolSet] = useState(false) const handleChange = (e: any) => { const str = e.target.value onChange(str) if (str.charAt(str.length - 1) === '$') { symbolSet(true) } else { symbolSet(false) } } const handleClickVariable = (variable: any) => { const newStr = `${value.substring(0, value.length - 1)}{{${variable.id}}}` onChange(newStr) symbolSet(false) } const onPaste = (e: any) => { e.preventDefault() const text = e.clipboardData.getData('text/plain') console.log(text) } return ( <div className={classNames(styles.inputVariable, className)}> <span className={styles.label}>{label}</span> <ContentEditable className={styles.root} html={value} disabled={false} onChange={handleChange} onPaste={onPaste} /> {symbol && ( <div className={styles.variables}> {variables && variables.map((variable: any) => ( <div key={variable.id} onClick={() => handleClickVariable(variable)} className={styles.variable}> {variable.name} </div> ))} </div> )} </div> ) } export default InputVariable