DOM not ready inside Page.onRenderSuccess() ?

[dannybullo]

Hi. I have a problem that cannot figure it out. The highlighting example on codesandbox.io does not work with latest version.
So Im trying to make my own. Im trying to INPECT the DOM to do manual highlighting:

I'm rendering a PDF, one Page at a time, with Prev/Next Controls. All works fine except for this.

Rendered PDF:

<span role="presentation" dir="ltr" style="left: 66.59%; top: 6.55%; font-size: calc(var(--scale-factor)*6.75px); font-family: sans-serif; transform: scaleX(1.00915);">XYZ</span>

  <Page
              scale={scale}
              pageNumber={pageNumber}
              width={width}
              onRenderSuccess={highlightText}
            />

  const highlightText = (page) => {
    document.querySelectorAll('[role="presentation"]').forEach((element) => {
      const spanTextContent = element.textContent.trim();

      if (spanTextContent === 'MH LAB') {
        element.innerHTML = `<mark>${element.innerHTML}</mark>`;
      }
    });
  };

Im trying to get all SPANS with role="presentation" and if the TextContent is XYZ, change the markup and make it
XYZ.

The behavior is erratic. Sometimes it works, other time it does not. It looks like the DOM is not ready in onRenderSuccess. Do you know how to solve this?

Any idea on how to make this work?
Thanks

Danny Bullo

[wojtekmaj]

Main layer and text layer are different things :) If you need a callback called after text layer is fully rendered (and that includes changes applied by your custom function), consider using onRenderTextLayerSuccess.