Rangy.js Highlights Appearing in Wrong Places

Question

I'm encountering a problem with Rangy, where highlights that I create are showing up in incorrect places on the webpage the next day. How can I rectify this issue? Here's the function I use to create highlights:

const highlightSelection = () => {
  rangy.init();

  let highlighter = rangy.createHighlighter();

  highlighter.addClassApplier(
    rangy.createClassApplier('mark', {
      ignoreWhiteSpace: true,
      tagNames: ['span', 'a'],
    }),
  );

  highlighter.highlightSelection('mark');

  return highlighter.serialize();
}


// example input
const fourSerializedHighlights = "type:textContent|10137$10151$1$mark$|10235$10249$2$mark$|10334$10353$3$mark$|10400$10423$4$mark$"

const setHighlights = (serializedHighlights) => {
  if (highlights?.length === 0) return;

  rangy.init();

  let highlighter = rangy.createHighlighter(document, 'TextRange');

  highlighter.addClassApplier(rangy.createClassApplier('mark'));
  highlighter.deserialize(serializedHighlights);
};

Any guidance on how to correct the positioning of these highlights would be greatly appreciated.