Estoy usando Prismjs en mi aplicación React y todo funciona bien. Solo tengo un retraso en la visualización del símbolo de intercalación cada vez que lo muevo usando las flechas de mi teclado. En entradas/áreas de texto estándar, parece que el signo de intercalación "restablece" su ciclo cuando se mueve. Pero aquí, sigue parpadeando al mismo ritmo. Entonces, si presiona la flecha izquierda cuatro veces seguidas, tendrá que esperar hasta que aparezca nuevamente el símbolo de intercalación para ver su posición actual (que dura aproximadamente 0,5 segundos). Lo cual es un poco perturbador. Aquí está mi código si ayuda:
import { useState, useEffect } from "react"; import Prism from "prismjs"; export default function EditCode() { const [content, setContent] = useState(""); const handleKeyDown = (e) => { let value = content, selStartPos = e.currentTarget.selectionStart; if (e.key === "Tab") { value = value.substring(0, selStartPos) + " " + value.substring(selStartPos, value.length); e.currentTarget.selectionStart = selStartPos + 3; e.currentTarget.selectionEnd = selStartPos + 4; e.preventDefault(); setContent(value); } }; useEffect(() => { Prism.highlightAll(); }, []); useEffect(() => { Prism.highlightAll(); }, [content]); return ( <section className="codeGlobalContainer"> <textarea className="codeInput" spellCheck="false" wrap="off" cols="200" value={content} onChange={(e) => setContent(e.target.value)} onKeyDown={(e) => handleKeyDown(e)} /> <pre className="codeOutput"> <code className={`language-javascript`}>{content}</code> </pre> </section> ); }Entiendo que no hay una propiedad CSS como caret-blinking-speed, pero ¿hay algo que pueda hacer? ¿Es la función handleKeyDown() la fuente de mi problema?
NB: si selecciono texto en mi área de texto, usando el teclado, todo va bien. Del mismo modo, si muevo el cursor con las flechas de mi teclado y escribo texto al instante, tampoco hay problema. Es realmente solo la visualización del signo de intercalación.
Editar: si elimino el bloque previo, el problema se resuelve y el símbolo de intercalación vuelve a su estado básico de "restablecer ciclo de parpadeo en movimiento".
Después de varias pruebas, descubrí que es la spellCheck="false" en mi área de texto la que crea mi problema. Así que está resuelto por ahora... Pero no sé por qué.