插入符号显示滞后（插入符号不会在位置更改时重置）

Question

我在我的 React 应用程序中使用 Prismjs，一切正常。每当我使用键盘箭头移动它时，我只是有一个插入符号显示滞后。在标准 inputs/textareas 中，插入符号看起来像是在移动时“重置”其循环。但在这里，它只是以相同的速度不断闪烁。因此，如果您连续按四次向左箭头，则必须等到插入符号再次出现才能看到您当前的位置（持续大约 0.5 秒）。这有点令人不安。如果有帮助，这是我的代码：

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>
  );
}

我知道没有 CSS 属性插入符号闪烁速度，但我能做些什么吗？ handleKeyDown() 函数是我问题的根源吗？

N.B。 : 如果我 select 在我的文本区域中使用键盘输入文本，一切都会顺利进行。同样，如果我用键盘箭头移动光标并立即键入文本，也没有问题。这实际上只是插入符号的显示。

编辑：如果我删除前块，问题就解决了，插入符号 returns 恢复到基本的“移动时重置闪烁周期”状态。

Answer 1

经过几次测试，我发现是文本区域中的 spellCheck="false" 行导致了我的问题。所以暂时解决了。。。但是不知道为什么。

插入符号显示滞后（插入符号不会在位置更改时重置）

Lags in caret display (caret does not reset on position change)

html

javascript

css

reactjs

prismjs