How to use Rangy with PDFjs text layer?

I’m using Rangy library to select text and apply highlight class on it, the problem is when is select a partial of text the rest become unselectable!

My highlight function:

  applyHighlight() {
   rangy.init()
   let selection = rangy.getSelection();
   if (selection.rangeCount > 0) {
   let highlighter = rangy.createHighlighter();
   highlighter.addClassApplier(rangy.createClassApplier('highlight-yellow'));
   highlighter.highlightSelection('highlight-yellow');
   rangy.getSelection().removeAllRanges();
}}

CSS class

 .highlight-yellow {
  margin: -1px !important;
  padding: 1px !important;
  background-color: rgb(252, 238, 124) !important;
  border-radius: 4px !important;
  opacity: 50%;
  cursor: pointer;}

A screenshots to describe the issue..

here is the highlighted spans
enter image description here

and this is what it looks like from the console
enter image description here

As you can see the “copies are not made or distributed” part is becomes unselectable and it goes out from the span scope.