Saved location not respected after modifying chapter HTML in content hook or applying custom CSS styles

[Bjoniii]

Hi,

I’m using React-Reader with epub.js and I’m running into a problem with saved locations (CFIs).

When I apply modifications to the chapter content inside the rendition.hooks.content hook — either by replacing the body.innerHTML with modified HTML, or by injecting custom CSS styles — the saved CFI location is no longer respected. On reload, the reader always jumps to the chapter start instead of the saved position.

const handleRendition = (_rendition: Rendition) => {

  _rendition.hooks.content.register(async (contents: Contents) => {
   const body = contents.document.body;
      const html = body.innerHTML;
      const modifiedHtml = await getModifiedJsonOrHtml({
        jsonOrHtml: html,
        level: level,
        lesson: lesson,
        type: "book",
      });
      body.innerHTML = modifiedHtml;
      // const style = contents.document.createElement("style");
      // style.appendChild(contents.document.createTextNode(cssText));
      // contents.document.head.appendChild(style);
    });

})

if (!finalUrl || !isReady) return ;

console.log(bookmark?.pagePosition, "bookmark?.pagePosition");
return (
<div style={{ height: "100vh", position: "relative" }}>
<ReactReader
key={${id}-${level}-${lesson}}
swipeable
url={finalUrl}
location={bookmark?.pagePosition}
loadingView={}
title={bookResults?.data?.title}
epubOptions={{
allowScriptedContent: true,
}}
locationChanged={(epubcfi: string) => {
saveLocation(epubcfi);
}}
getRendition={handleRendition}
/>

);
};

I send the html to receive formated html so i send <p>Hello world</p> and i receive from response <p>Hello <b>world</b></p>

Expected behavior:
The saved CFI location should still resolve correctly, even after applying content modifications or custom styles.

Question:
Does React-Reader / epub.js officially support modifying HTML or applying styles in content hooks while still preserving CFIs?

Thanks!

[gerhardsletten]

Pleace provide an example, but I would expect this to be something with the underlaying epubjs