Skip to content

Incorrect epubcfi with FILTER_SKIP <span> wrapped text #100

@fondoger

Description

@fondoger

Test Example: https://jsfiddle.net/9mo8j67g/1/

Part of text node is wrapped with <span>, and NodeFilter.FILTER_SKIP is used to skip that <span>.
The generated epubcfi should be the same.

Image
full test script
<!-- Test Case 1 -->
<p id="test-1">Hello, World</p>
<div id="result-1"></div>

<!-- Test Case 2 -->
<p id="test-2"><span class="SKIP">H</span>e<span class="SKIP">ll</span>o, World</p>
<div id="result-2"></div>

<script type="module">
  import * as epubcfi from "https://cdn.jsdelivr.net/gh/johnfactotum/foliate-js/epubcfi.js"

  function myFilter(node) {
    return node.classList?.contains("SKIP")
      ? NodeFilter.FILTER_SKIP
      : NodeFilter.FILTER_ACCEPT
  }

  window.find("lo, W")
  var range1 = window.getSelection().getRangeAt(0)
  var result1 = epubcfi.fromRange(range1, myFilter)
  document.querySelector("#result-1").innerHTML = " > " + result1

  window.find("lo, W")
  var range2 = window.getSelection().getRangeAt(0)
  var result2 = epubcfi.fromRange(range2, myFilter)
  document.querySelector("#result-2").innerHTML = " > " + result2

  CSS.highlights.set("my-underline", new Highlight(range1, range2))
</script>
<style>
  .SKIP {
    color: red;
  }

  ::highlight(my-underline) {
    text-decoration: underline;
  }
</style>

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions