Estoy creando un componente usando el campo de input en React para escribir una sintaxis de queries similar a (A=2 and B="Value2") . Necesito resaltar los errors by showing red wavy line below objects which are not correct en lugar de la consulta completa .
Utilicé los siguientes enfoques hasta ahora: -
Usó un div with transparent color text , lo alineó below the input field , asignó los errors in the div y mostró la línea ondulada. Funcionó hasta un ancho fijo, pero as my input value going beyond the width of input field and is becoming scrollable, it is not working en ese caso ya que el div no se desplaza junto con el valor de entrada.
Usé contentEditableDiv para modificar innerHTML , pero está rompiendo otras cosas que se requieren para el componente.
El primer enfoque es útil, pero solo si I find any way to scroll the div in synchronization with the input value . Después de hacer muchos esfuerzos, lo he buscado pero no pude encontrar ninguna respuesta adecuada para esto.
Si alguien puede ayudar o sugerir algún otro enfoque mejor para lograr esto.
¡Gracias por adelantado!
Intentaría hacer el div con texto de color transparente, pero envolvería las palabras que debe subrayar en un lapso con una clase wavy y aplicaría este css:
text-decoration-line: underline; text-decoration-style: wavy; text-decoration-color: red; Si hace que su div transparente se superponga a la entrada con una posición absoluta o algo similar, hágalo del mismo ancho que la entrada y hágalo desplazable como con overflow: auto , podría funcionar.
EDITAR: si no hay una necesidad absoluta de usar input o textarea, puede usar div con contentEditable="true" y diseñarlo para que se vea similar. Aquí hay una muestra de stackblitz https://stackblitz.com/edit/js-jaz62k?file=index.html