如何在Firefox中区分换行文本的第一个和最后一个位置

const textEl = document.getElementById("myText")

textEl.addEventListener("keyup", (event) => {
  const domSelection = window.getSelection();
  if (domSelection && domSelection.isCollapsed && domSelection.anchorNode) {
    let offsetNewLine = 0;

    let domRange = domSelection.getRangeAt(0);
    let rect = domRange.getBoundingClientRect();
    const rects = domRange.getClientRects();
    const newRange = document.createRange();
    const newRangeNextOffset = domSelection.anchorNode.textContent.length < domSelection.anchorOffset + 1 ? domSelection.anchorOffset : domSelection.anchorOffset + 1

    newRange.setStart(domSelection.anchorNode, newRangeNextOffset);
    newRange.setEnd(domSelection.anchorNode, newRangeNextOffset);
    let nextCharacterRect = newRange.getBoundingClientRect();

    console.log(`anchorOffset: ${domSelection.anchorOffset}, CURRENT_TOP: ${rect.y}, NEXT_CHAR_TOP: ${nextCharacterRect.y}`);
  }
})

.text-container {
  width: 500px;
  display: inline-block;
  border: 1px solid black;
  line-height: 20px;
  padding: 5px;
}

<span id="myText" class="text-container" contentEditable="true">Go on the last position in the first row and come it to first position in the second row</span>

// our denotation values, see above
let isNewline = false;
const isFirefox = typeof InstallTrigger !== 'undefined';

const textEl = document.getElementById("myText")

textEl.addEventListener("keyup", (event) => {
  const domSelection = window.getSelection();
  if (domSelection && domSelection.isCollapsed && domSelection.anchorNode) {
    let offsetNewLine = 0;

    let domRange = domSelection.getRangeAt(0);
    let rect = domRange.getBoundingClientRect();
    const rects = domRange.getClientRects();
    const newRange = document.createRange();
    const newRangeNextOffset = domSelection.anchorNode.textContent.length < domSelection.anchorOffset + 1 ? domSelection.anchorOffset : domSelection.anchorOffset + 1

    newRange.setStart(domSelection.anchorNode, newRangeNextOffset);
    newRange.setEnd(domSelection.anchorNode, newRangeNextOffset);
    const nextCharacterRect = newRange.getBoundingClientRect();

    // the line-hopping, see above
    if(isFirefox && rect.y < nextCharacterRect.y)
    {
        if(isNewline)
        {
            domRange = newRange;
            domSelection.getRangeAt(0);
            rect = domRange.getBoundingClientRect();
            isNewline = false;
        }
        else
            isNewline = true;
    }

    console.log(`anchorOffset: ${domSelection.anchorOffset}, CURRENT_TOP: ${rect.y}, NEXT_CHAR_TOP: ${nextCharacterRect.y}`);
  }
})

.text-container {
  width: 500px;
  display: inline-block;
  border: 1px solid black;
  line-height: 20px;
  padding: 5px;
}

<span id="myText" class="text-container" contentEditable="true">Go on the last position in the first row and come it to first position in the second row</span>

const textEl = document.getElementById("myText");
let bbText = textEl.getBoundingClientRect();
let textElTop = bbText.top;
let textElRight = bbText.right;

let lastCharPos = 0;
let lastTop = 0;
let forwards = true;

// simple firefox agent detection
const isFirefox = typeof InstallTrigger !== "undefined";

myText.addEventListener("click", (e) => {
  updateSelection(e);
});

document.addEventListener("keyup", (e) => {
  updateSelection(e);
});

function updateSelection(e) {
  let selection = window.getSelection();
  let caret = selection.getRangeAt(0);
  let range = document.createRange();
  let { anchorNode, anchorOffset } = selection;
  range.setStart(anchorNode, anchorOffset);

  let bb = caret.getBoundingClientRect();
  let height = bb.height;
  let top = bb.top - textElTop;

  if (isFirefox) {
    // get y pos of next character
    let anchorOffset2 =
      anchorOffset < anchorNode.textContent.length - 1
        ? anchorOffset + 1
        : anchorOffset;

    let anchorOffset3 = anchorOffset > 0 ? anchorOffset - 1 : anchorOffset;

    let rangeN = document.createRange();
    rangeN.setStart(anchorNode, anchorOffset2);

    let rangeP = document.createRange();
    rangeP.setStart(anchorNode, anchorOffset3);

    let bb2 = rangeN.getBoundingClientRect();
    let bb0 = rangeP.getBoundingClientRect();

    let top2 = bb2.top - textElTop;
    let top0 = bb0.top - textElTop;

    // check mouse position on click
    let mouseX = e.pageX ? e.pageX : 0;
    let mouseY = e.pageY ? e.pageY : 0;

    // check keybord inputs
    let key = e.key ? e.key : "";

    let distX = mouseX ? Math.abs(bb.left - mouseX) : 0;
    let distX2 = mouseX ? Math.abs(bb2.left - mouseX) : 0;

    let distY = mouseY ? Math.abs(bb.top - mouseY) : 0;
    let distY2 = mouseY ? Math.abs(bb2.top - mouseY) : 0;

    // direction: forward or backward
    if (
      lastCharPos > anchorOffset ||
      key === "ArrowLeft" ||
      key === "ArrowUp" ||
      (distY && distY < distY2)
    ) {
      forwards = false;
    } else if (
      lastCharPos < anchorOffset ||
      key === "ArrowRight" ||
      key === "ArrowDown" ||
      (distY && distY > distY2)
    ) {
      forwards = true;
    }

    // forwards
    if (
      forwards &&
      (lastCharPos == anchorOffset || distX > distX2 || key === "ArrowDown")
    ) {
      top = top2;
    }
    
    // backwards
    else {
      //console.log("back", lastCharPos, anchorOffset);
      if (lastCharPos > anchorOffset) {
        top = top2;
      }
    }

    // update
    lastCharPos = anchorOffset;
    lastTop = top;
  }

  // shift line indicator
  selectionLine.setAttribute("style", `top:${top}px; height:${height}px;`);
  cursor.setAttribute("style", `top:${bb.top}px; left:${bb.left}px;`);
}

body{
  font-size: 2em;
  margin:0em;
  padding:11px;
}

*{
  box-sizing:border-box;
}

.wrap{
  position: relative;
  width: 300px;

}

.text-container {
  display: block;
  border: 1px solid black;
  line-height: 1.5em;
  padding: 1em;
  position: relative;
}




.text-container:focus+
.selectionLine {
  border-left: 10px solid green;
  display:block;
  position: absolute;
  width:0;
  height:1em;
  top:0;
  right:0;

}

#cursor{
    position: absolute;
  width:0.2em;
  height:0.2em;
  top:0;
  right:0;
  background: red;
    border-radius: 50%;
}

<div id="info" style="position:absolute; right:0; top:0;"></div>
<div class="wrap">
<div id="myText" class="text-container" contentEditable="true">Go on the last position in the first row and come it to first position in the second row. 
</div>
<div id="selectionLine" class="selectionLine"></div>
  </div>

<div id="cursor"></div>