Упоминание Svelte о том, что компонент не работает должным образом ⇐ Javascript

[Anonymous]

Я создаю компонент, в котором вы можете использовать определенный триггер для открытия раскрывающегося списка. После выбора он вставит данный выбор в курсор, а затем переместит курсор. Теоретически это звучит просто, но я не могу заставить это работать (одна команда почти работает, несколько полностью ломаются).
REPL: https://svelte.dev/playground/edba5955c ... ion=5.19.0< /p>
Я просто не понимаю, что делаю не так. Это должно работать как упоминание кого-то, ссылка на проблему или что-то подобное.
Я думаю, главный виновник здесь:
function handleOptionSelect(option) {
const sel = window.getSelection();
const range = sel.getRangeAt(0);
const textNode = range.startContainer;
const cursorPos = range.startOffset;
const text = textNode.textContent;

const beforeCursor = text.substring(0, cursorPos);
const afterCursor = text.substring(cursorPos);
const lastDollarIndex = beforeCursor.lastIndexOf('$');
const start = lastDollarIndex === -1 ? beforeCursor.length : lastDollarIndex;

const beforeText = document.createTextNode(beforeCursor.substring(0, start));
const commandSpan = document.createElement('span');
commandSpan.classList.add('command-span');
commandSpan.contentEditable = false;
commandSpan.textContent = option.name;

const space = document.createTextNode('\u00A0');
const afterText = document.createTextNode(afterCursor);

inputElement.textContent = '';
inputElement.appendChild(beforeText);
inputElement.appendChild(commandSpan);
inputElement.appendChild(space);
inputElement.appendChild(afterText);

const newRange = document.createRange();
newRange.setStart(afterText, 0);
newRange.collapse(true);
sel.removeAllRanges();
sel.addRange(newRange);

inputElement.focus();
sel.removeAllRanges();
sel.addRange(newRange);

showDropdown = false;
currentText = inputElement.textContent;
}


Подробнее здесь: https://stackoverflow.com/questions/793 ... s-expected