Highlight on fixed-layout epub

[alapiere]

Hi,
I'm trying to implement a search engine for a fixed-layout epub
I managed to :
*extract all the cfis

• indexed them in algolia
• search for it
• resolve and navigate to cfi, to the correct page
  So far so good
  Now I am trying to higlight the result; I've tried dozens of approach, but It failed

I can't implement it "manually", because of the shadow dom
Is there a way ?

Thanks a lot

[johnfactotum]

The fixed layout renderer does not support adding an overlayer yet. When it does it would work exactly like the paginator.

But note that you can overlay highlights manually without an overlayer positioned by the renderer, by positioning the rects relative to the client rect of the iframe where the page is dispalyed (you can get the iframe from document.defaultView.frameElement, where document is the document object of a page from the book; the natural place to get hold of the document object would be from the relocate event: event.detail.range.startContainer.ownerDocument).

[alapiere]

Thanks @johnfactotum
in my case, the doc is in event.detail.doc directlly, I don't have any detail.range
but when no relocating (highlighting on current page) i don't have the event ,
I have to look for the doc

  findTargetDocument(anchor) {
    const renderer = this.reader.view.renderer;
    if (!renderer || !renderer.getContents) {
      throw new Error("Renderer not available");
    }

    const contents = renderer.getContents();
    if (!contents || contents.length === 0) {
      throw new Error("No contents found in renderer");
    }

    for (const [i, content] of contents.entries()) {
      if (content.doc) {
        try {
          const range = anchor(content.doc);
          if (range && range.toString().trim().length > 0) {
            console.log(`📍 Found target in content ${i}: "${range.toString()}"`);
            return content.doc;
          }
        } catch {
          continue;
        }
      }
    }

    return null;
  }

I then tried to overlay rects, but it was a nightmare

• complex computation to account for iframe zoom;
• slow recomputation to account for resizing
• impossible to account for skew / rotated texts,
• Maintaining the state of all highlighted zones,
  ....

But I realized there was a simpler way :

get the html id from the cfi 
  getElementNodeId(cfi) {
    const elementMatch = cfi.match(/\/(\d+)\[([^\]]+)\]/g);
    const lastMatch = elementMatch ? elementMatch[elementMatch.length - 1] : null;

    if (lastMatch) {
      const idMatch = lastMatch.match(/\[([^\]]+)\]/);
      return idMatch ? idMatch[1] : null;
    }

    return null;
  }

then
doc.getElementById(id);
and add a highlight class to it.

It works in 95% of the cases; wrong doc detection sometimes I guess. (wrong page when double page on screen);
so almost done !