Как отличить первую и последнюю позицию обернутого текста в Firefox ⇐ Html

[Anonymous]

Я работаю с диапазоном contentEditable, где я хочу поместить элемент Position: Absolute в ту же строку, что и курсор. Проблема возникает, когда текст переносится, потому что он не подходит - первая и последняя позиция обернутых строк ведут себя странно.
Для них обоих, когда я нахожусь на первой позиции во второй строке, смещение y метода getBoundingClientRect() равно смещению первой строки, однако, если я перемещаюсь на одну позицию дальше во второй строке, смещение y правильно соответствует второй строке.
В фрагмент ниже этого поведения отображается для Firefox. Для Chrome это работает нормально, хотя в моей полной реализации оно также ведет себя неточно, но мне удалось решить эту проблему для Chrome. Однако для Firefox последняя позиция первой строки имеет смещение, равное первой строке, первая позиция во второй строке имеет смещение, равное первой строке, после чего все работает нормально.
В этом примере перейдите к последнему месту в первой строке и обратите внимание, что значение CURRENT_TOP в консоли равно 16. Если вы пойдете на одно место вправо и курсор уже окажется на следующей строке, там все равно будет написано 16. если вы переместите еще один вправо, будет написано 36

Код: Выделить всё

const textEl = document.getElementById("myText")

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

const domRange = domSelection.getRangeAt(0);
const 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();

console.log(`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;
}

Код: Выделить всё

Go on the last position in the first row and come it to first position in the second row

Подробнее здесь: https://stackoverflow.com/questions/774 ... in-firefox