Pre-Highlight using Search

[Avinash-Cognizer]

Hello,
How can we highlight word/section using search ? Right now the only way to Highlight any text is when you know its coordinates.
what If I am given some word or sentences, let's say via an api, and I want to highlight it when the PDF renders
is there any work-around for this ?

[Avinash-Cognizer]

Hey @agentcooper can you shed some light ?

[holub008]

My team has been hacking on this from the parent component, using window.PDFViewer; beyond being kind of gross in using a global intended for debug, I believe it's the cause of infrequent crashes when our users search (I'm sure swapping out the viewer is not healthy).

  getFindController = () => window?.PdfViewer?.viewer?.findController;

  search = (searchValue) => {
    if (window.PdfViewer?.viewer) {
      if (!this.getFindController()) {
        // We re-create the PDFViewer bc the PDFFindController needs to be initialized here
        window.PdfViewer.viewer = new PDFViewer({
          container: window.PdfViewer.containerNode,
          eventBus: window.PdfViewer.eventBus,
          enhanceTextSelection: true,
          removePageBorders: true,
          linkService: window.PdfViewer.linkService,
          findController: new PDFFindController({ eventBus: window.PdfViewer.eventBus, linkService: window.PdfViewer.linkService }),
        });
        window.PdfViewer.eventBus.on('updatetextlayermatches', this.calculateMatchProgress);
        window.PdfViewer.init();
      }
      const findController = this.getFindController();
      findController.executeCommand('find', {
        query: searchValue,
        highlightAll: true,
        phraseSearch: true,
      });
      this.setState({ searchValue });
    }
  }

I would love to move this internal to PDFHighlighter, using a search prop (default to undefined = no search to run).

[qaisershehzad]

Hi @holub008 , I am able to add PDFFindController . thanks for sharing.

Also I am looking to have page navigation (previous/next button to navigation between pages) as well if any idea please share how I can achieve in react-pdf-highlighter.

[Daan-Grashoff]

My team has been hacking on this from the parent component, using window.PDFViewer; beyond being kind of gross in using a global intended for debug, I believe it's the cause of infrequent crashes when our users search (I'm sure swapping out the viewer is not healthy).

  getFindController = () => window?.PdfViewer?.viewer?.findController;

  search = (searchValue) => {
    if (window.PdfViewer?.viewer) {
      if (!this.getFindController()) {
        // We re-create the PDFViewer bc the PDFFindController needs to be initialized here
        window.PdfViewer.viewer = new PDFViewer({
          container: window.PdfViewer.containerNode,
          eventBus: window.PdfViewer.eventBus,
          enhanceTextSelection: true,
          removePageBorders: true,
          linkService: window.PdfViewer.linkService,
          findController: new PDFFindController({ eventBus: window.PdfViewer.eventBus, linkService: window.PdfViewer.linkService }),
        });
        window.PdfViewer.eventBus.on('updatetextlayermatches', this.calculateMatchProgress);
        window.PdfViewer.init();
      }
      const findController = this.getFindController();
      findController.executeCommand('find', {
        query: searchValue,
        highlightAll: true,
        phraseSearch: true,
      });
      this.setState({ searchValue });
    }
  }

I would love to move this internal to PDFHighlighter, using a search prop (default to undefined = no search to run).

Hi could you show a more complete code snippet? I'm having issues when I try to run the executeCommand on the findcontroller

Thanks!

[holub008]

Our team opened a PR here: #185. We package the fork, which includes some other QOL goodies, on NPM: https://www.npmjs.com/package/@darian-lp/react-pdf-highlighter

It's our goal to move off the fork once the PRs are merged in, but we couldn't wait for search/zoom/rotate (standard functions on any PDF viewer) to be implemented.

[Daan-Grashoff]

Awesome! Thanks, I'm gonna check it out!

[RutgerSwirski]

I just wanted to say a MASSIVE thanks to @holub008 and his team for getting this implemented in a way more dev friendly way!!!