Обработка выделения текста и динамического переноса интервалов с помощью манипуляций с классами в простом JavaScript ⇐ Html

[Anonymous]

Я хочу, чтобы, когда пользователь выделяет текст и нажимает кнопку, которая, например, делает этот текст жирным, мы преобразуем выбранный текстовый узел в диапазон и добавляем к нему класс.
но позвольте скажем, они выделяют только отдельную букву, мы преобразуем эту отдельную букву в диапазон, и допустим, что пользователь затем решает выделить остальную часть текста для этого символа, мы удаляем старый диапазон, извлекаем из него класс и группируем его в новый диапазон с добавлением старого класса в это.
это тоже тот же самый стих. если текст ndoe уже является диапазоном и выделена одна буква, мы создаем для него собственный диапазон. но сейчас я пытаюсь собрать текстовый узел, и, кажется, я захватываю текстовые узлы с пустым пространством, а родительский контейнер находится повсюду в зависимости от разных обстоятельств. например, выделение двойным щелчком мыши и место, где я начинаю выделение.
Я использую следующий текст в качестве тестового примера/
этот текст можно заменить
TLDR пытается воспроизвести https://quilljs.com/playground/snow, но без использования quill или другой третьей стороны, поскольку они, похоже, не делают то, что я хочу.
let selection = this.window.getSelection();
let node = null;

for (let rangeNumber = selection.rangeCount-1; rangeNumber >= 0; rangeNumber--) {
let range = selection.getRangeAt(rangeNumber);
// range.collapse(true)
console.log(range)

if (range.startContainer === range.endContainer && range.endContainer.nodeType === Node.TEXT_NODE) {
range.startContainer.splitText(range.endOffset);
let textNode = range.startContainer.splitText(range.startOffset);
rangeNodes.push(textNode);
console.log("same container")
} else {
/* edge-case for rare circumstances where, the end-container may contain a text node, but not be the text node itself, end-container is redefined for iterator */
let startContainer=range.startContainer;
let endContainer=range.endContainer;
if (range.endContainer.nodeType != Node.TEXT_NODE && range.endContainer.childNodes.length>range.endOffset) endContainer=range.endContainer.childNodes[range.endOffset];
if (range.startContainer.nodeType != Node.TEXT_NODE && range.startOffset>0) startContainer=range.startContainer.childNodes[range.startOffset-1];
/* collect all text nodes inside range, ignore them if they are marked as non-selectable through css */
let textIterator = document.createNodeIterator(range.commonAncestorContainer, NodeFilter.SHOW_TEXT, (node) => (node.compareDocumentPosition(startContainer)==Node.DOCUMENT_POSITION_PRECEDING && node.compareDocumentPosition(endContainer)==Node.DOCUMENT_POSITION_FOLLOWING) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT );
while (node = textIterator.nextNode()) { console.log("textirator"); if (!isTextNodeUnparsedWhitespace(node) && window.getComputedStyle(node.parentElement).userSelect!="none") rangeNodes.push(node);}
/* separate first and final text node */
if (range.endContainer.nodeType === Node.TEXT_NODE && window.getComputedStyle(range.endContainer.parentElement).userSelect!="none") {
const endNode = range.endContainer.splitText(range.endOffset);

const text = document.createTextNode(range.endContainer.textContent);
console.log(text.textContent , "endcontainer")
rangeNodes.push(text);

// range.endContainer.parentNode.replaceChild(text, range.endContainer);

// console.log(range.endContainer, range.endContainer,range.endContainer.parentElement, range.startOffset, range.endOffset,"end node")

}
if (range.startContainer.nodeType === Node.TEXT_NODE && window.getComputedStyle(range.startContainer.parentElement).userSelect!="none") {
const startNode = range.startContainer.splitText(range.startOffset);
// console.log(startNode, range.startContainer)
console.log(startNode.textContent , "startcontainer")

rangeNodes.unshift(startNode);
}
}

}


Подробнее здесь: https://stackoverflow.com/questions/793 ... ion-in-pla