How to highlight the pdf page text based upon the line number in reactjs

Question

This is the data, based upon the metadata I need to use to highlight the text:

 const data = {
    text: "The requirements include...",
    sourceDocuments: [
      {
        pageContent:"Functionality requirements, backend functionality\nUser data information\nAbility to collect and sort...",
        metadata: { "loc.lines.from": 161, "loc.lines.to": 173 }
      },
    ],
  };

This is my react code to open the pdf:

import { Worker, Viewer } from "@react-pdf-viewer/core";
import { defaultLayoutPlugin } from "@react-pdf-viewer/default-layout";
import "@react-pdf-viewer/core/lib/styles/index.css";
import "@react-pdf-viewer/default-layout/lib/styles/index.css";

export default function App() {
   const data = {
    text: "The requirements include...",
    sourceDocuments: [
      {
        pageContent:"Functionality requirements, backend functionality\nUser data information\nAbility to collect and sort...",
        metadata: { "loc.lines.from": 161, "loc.lines.to": 173 }
      },
    ],
  };

  const defaultLayoutPluginInstance = defaultLayoutPlugin();

  return (
    <Worker workerUrl="https://unpkg.com/[email protected]/build/pdf.worker.min.js">
      <div style={{ height: "720px" }}>
        <Viewer fileUrl={"Brief.pdf"} plugins={[defaultLayoutPluginInstance]} />
      </div>
    </Worker>
  );
}

Answer 1

Have you tried using @react-pdf-viewer/highlight?

Documentation here

I haven't tested this but It goes something like:

import { Worker, Viewer } from "@react-pdf-viewer/core";
import { defaultLayoutPlugin } from "@react-pdf-viewer/default-layout";
import { highlightPlugin, Trigger } from '@react-pdf-viewer/highlight';
import type { HighlightArea, RenderHighlightsProps } from '@react-pdf-viewer/highlight';

import "@react-pdf-viewer/core/lib/styles/index.css";
import "@react-pdf-viewer/default-layout/lib/styles/index.css";
import '@react-pdf-viewer/highlight/lib/styles/index.css';

export default function App() {
  const data = {
    text: "The requirements include...",
    sourceDocuments: [
      {
        pageContent:"Functionality requirements, backend functionality\nUser data information\nAbility to collect and sort...",
        metadata: { "loc.lines.from": 161, "loc.lines.to": 173 }
      },
    ],
  };
  // I am temporarily using hardcoded area data, replace this with your sourceDocument metadata
  const areas: HighlightArea[] = {[
    {
      pageIndex: 3,
      height: 1.55401,
      width: 28.1674,
      left: 27.5399,
      top: 15.0772,
    },
    {
      pageIndex: 3,
      height: 1.32637,
      width: 37.477,
      left: 55.7062,
      top: 15.2715,
    },
    {
      pageIndex: 3,
      height: 1.55401,
      width: 28.7437,
      left: 16.3638,
      top: 16.6616,
    },
  ]};

  const fileUrl: string = 'Brief.pdf';

  const defaultLayoutPluginInstance = defaultLayoutPlugin();

  const renderHighlights = (props: RenderHighlightsProps) => (
    <div>
      {areas
        .filter((area) => area.pageIndex === props.pageIndex)
        .map((area, idx) => (
          <div
            key={idx}
            className="highlight-area"
            style={Object.assign(
              {},
              {
                background: 'yellow',
                opacity: 0.4,
              },
              props.getCssProperties(area, props.rotation)
            )}
          />
        ))}
    </div>
  );
  const highlightPluginInstance = highlightPlugin({
    renderHighlights,
    trigger: Trigger.None,
  });

  return (
    <Worker workerUrl="https://unpkg.com/[email protected]/build/pdf.worker.min.js">
      <div style={{ height: "720px" }}>
        <Viewer fileUrl={fileUrl} plugins={[defaultLayoutPluginInstance, highlightPluginInstance]} />
      </div>
    </Worker>
  );
}

This is based on the example shown here. Kindly replace the hardcoded data with the ones that you have on your metadata.