Невозможно отменить выделение выделения в 2 разных абзацах с помощью библиотеки Rangy

Question

JSfiddle для справки: https://jsfiddle.net/9jp346r4/20/

Я пытаюсь создать функциональность, которая позволяет пользователю выделять выделенный текст при нажатии кнопки и отменять выделение выделенного текста при щелчке правой кнопкой мыши.

Я получил его, в основном, с помощью ранжированной библиотеки, за исключением одного сценария, который не работает, и я не уверен, как его решить.

Когда я выделяю текст в двух разных параграфах, он выделяется успешно.

Проблема возникает, когда я хотел бы вернуться позже и не выделить оба абзаца.

Ожидаемое поведение: я щелкаю правой кнопкой мыши по любому выделенному тексту независимо от того, выделен он или нет, и он не выделяет весь рядом выделенный текст, даже если он разделен тегом абзаца или сильным тегом.

Текущее поведение таково: оно только выделяет текст в абзаце, который я щелкнул.

Для повторного создания: 1) Выберите текст, который перекрывает первый и второй абзацы, и нажмите кнопку "Нажмите".

2) Отмените выделение выделенного текста, щелкнув где-нибудь еще на экране.

3) Щелкните правой кнопкой мыши любой выделенный текст. Обратите внимание, что только один из абзацев не выделяется.

Если что-то неясно, не стесняйтесь задавать вопросы. Буду признателен за помощь.

Вот мой HTML:

<div id="content">
<p>
Paragraph 1
</p>
<p>
Paragraph 2
</p>
</div>
<div id="divId">
   <input id="myBtn" type="button" value="Press" onclick = "javascript:toggleItalicYellowBg()"/>
</div>

Вот мой JavaScript:

function coverAll() {
  var ranges = [];
  for(var i=0; i<window.getSelection().rangeCount; i++) {
    var range = window.getSelection().getRangeAt(i);
    while(range.startContainer.nodeType == 3
          || range.startContainer.childNodes.length == 1)
      range.setStartBefore(range.startContainer);
    while(range.endContainer.nodeType == 3
          || range.endContainer.childNodes.length == 1)
      range.setEndAfter(range.endContainer);
    ranges.push(range);
  }
  window.getSelection().removeAllRanges();
  for(var i=0; i<ranges.length; i++) {
    window.getSelection().addRange(ranges[i]);
  }
  return true;
}

function getSelectedText() {
  if (window.getSelection) {
    return window.getSelection().toString();
  } else if (document.selection) {
    return document.selection.createRange().text;
  }
  return '';
}

var italicYellowBgApplier;

function toggleItalicYellowBg() {
  italicYellowBgApplier.toggleSelection();
}

window.onload = function() {
  $(document).on("contextmenu", ".italicYellowBg", function(e){
    if(coverAll()) {
      italicYellowBgApplier.undoToSelection();
      return false;
    }
  });
  rangy.init();


  // Enable buttons
  var classApplierModule = rangy.modules.ClassApplier;

  // Next line is pure paranoia: it will only return false if the browser has no support for ranges,
  // selections or TextRanges. Even IE 5 would pass this test.
  if (rangy.supported && classApplierModule && classApplierModule.supported) {

    italicYellowBgApplier = rangy.createClassApplier("italicYellowBg",       {
      tagNames: ["span", "a", "b", "img"]
    });
  }
};

Answer 1

Я думаю, чтобы легко решить эту проблему, в памяти храните массив пользовательских выделений, один элемент этого массива не является отдельным элементом выделения, а является дополнительным "выбором выбранных элементов во время выделения", когда кто-то щелкает правой кнопкой мыши по одному сегмент выделения, находить в памяти в массиве все связанные выделения и самостоятельно снимать выделение с связанных сегментов.