使用颤振的选择偏移

Question

我正在尝试使用 Flutter 制作一个带有 html 书籍的阅读应用程序，并且我使用 javascript 进行操作。

我正在尝试用标记标记包围所选文本，并将此标记的偏移量和路径值保存在我的数据库中。

到目前为止一切都很好，除了一个问题：有时用户有多个具有相同路径的标记，如果用户将删除前一个标记，当我重新插入标记时不会显示下一个标记，因为第二个标记得到了它的偏移量第一个之后的值。

这是我的功能

function addHighlight(color) {
  if (window.getSelection) {
    var selection = window.getSelection();
    if (selection.rangeCount) {
      var path = getSelectedPath();
      var mark = document.createElement("mark");
      mark.className = getClassByColor(color);
      var range = selection.getRangeAt(0).cloneRange();
      range.surroundContents(mark);
      selection.removeAllRanges();
      selection.addRange(range);
      return path;
    }
  }
  return;
}

function restoreHighlight(startOffset, startXPath, endOffset, endXPath, color) {
  var range = restoreSelection(startOffset, startXPath, endOffset, endXPath);
  var mark = document.createElement("mark");
  mark.className = getClassByColor(color);
  range.surroundContents(mark);
  selection.removeAllRanges();
  selection.addRange(range);
}

function restoreSelection(startOffset, startXPath, endOffset, endXPath) {
  var range = document.createRange();
  range.setStart(document.evaluate(startXPath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue, Number(startOffset));
  range.setEnd(document.evaluate(endXPath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue, Number(endOffset));
  return range;
}

function getSelectedPath() {
  var selection = window.getSelection();
  var range = selection.getRangeAt(0);
  var selectObj = {
    'startXPath': makeXPath(range.startContainer),
    'startOffset': range.startOffset,
    'endXPath': makeXPath(range.endContainer),
    'endOffset': range.endOffset
  }
  return selectObj;
}