Как я могу улучшить удобство использования API выбора на contenteditable ⇐ Javascript

[Anonymous]

У меня есть следующий код, который по сути проверяет узлы редактора, созданного с помощью редактируемого элемента div. Код предназначен для получения строки, которой принадлежат узлы. Я использую API выбора. Если направление не «нет», я получаю узлы фокуса и привязки и проверяю, какой линии они принадлежат. Код ниже.

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

Selection Log
Text: 

Line: 

Selection: 

Range:

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

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

function addIndentMetaToLines(lines, currentLineIndex, selection, editor = undefined) {
if (selection.direction === "none") {
lines[currentLineIndex].indentLevel += 1;
return
}
// else check line / lines of selection
console.log(selection);
console.log([getCurrentLineIndex(editor, selection.anchorNode), getCurrentLineIndex(editor, selection.focusNode)].sort());
}

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

function getCurrentLineIndex(editor, node) {

// keep helper encapsulated for now
function findCurrentEditorChild(editor, node) {
// if node parent is not div editor, set node to parent - repeat. when node parent is editor, then return node
while (NOT(node.parentNode === editor)) {
node = node.parentNode;
}
return node;
}

if (node === editor) {
return 0;
}
const currentEditorChild = findCurrentEditorChild(editor, node)
return Array.from(editor.childNodes).findIndex(node => node === currentEditorChild)

}

Однако пользовательский интерфейс не ясен!
Это то, что я ожидаю от пользовательского интерфейса.


Это неожиданное поведение.


Направление выбора — обратное, поэтому ожидается, что focusOffset будет слева от anchorOffset. Вы можете видеть, что выделение выглядит идентично. Однако при первом выборе пользовательский интерфейс правильно представляет выбор, принадлежащий одной строке, тогда как при втором выборе. Пользовательский интерфейс показывает только одну строку, если выбор охватывает несколько узлов.
Существует ли исправление CSS или программное исправление? Если да, то что вы порекомендуете?

Подробнее здесь: https://stackoverflow.com/questions/798 ... nteditable