Невозможно восстановить выделение с помощью window.getSelection () и диапазона после повторного рендеринга contenteditable div - PullRequest
Новая
       16

Невозможно восстановить выделение с помощью window.getSelection () и диапазона после повторного рендеринга contenteditable div

0 голосов
/ 03 апреля 2020

У меня есть спорный див. После некоторых действий contenteditable перерисовывается. Перед повторным рендерингом div я сохраняю данные диапазона для объекта следующим образом: 

this.rangeData = {
    anchorNodeKey: null,
    anchorOffset: null, 
    focusNodeKey: null, 
    focusOffset: null,
    isCollapsed: null,
};

Я храню ключи узлов вместо anchorNode. После повторного рендеринга div я получаю узлы по этому ключу и использую их для создания диапазона и восстановления выделения следующим образом: 

const range = document.createRange();

const anchorNode = this.getNodeByKey(this.rangeData.anchorNodeKey);
range.setStart(anchorNode, this.rangeData.anchorOffset);

const focusNode = this.getNodeByKey(this.rangeData.focusNodeKey);
range.setEnd(focusNode, this.rangeData.focusOffset);

range.collapse(this.rangeData.isCollapsed);

const selection = window.getSelection();

selection.removeAllRanges();
selection.addRange(range);

Каретка помещается после повторного рендеринга в соответствующее место, но я не могу восстановить выделение (например, выбранное слово становится невыбранным и в конце этого слова помещается каретка). Selection объект имеет свойство type (https://developer.mozilla.org/en-US/docs/Web/API/Selection/type), которое может иметь значение «Range», но я не могу найти, как его установить.

Что я пропустил?

...