0

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/pdfjs-dist@3.4.120/build/pdf.worker.min.js">
      <div style={{ height: "720px" }}>
        <Viewer fileUrl={"Brief.pdf"} plugins={[defaultLayoutPluginInstance]} />
      </div>
    </Worker>
  );
}
Michael Chen
  • 9
  • 4
Venkatesh
  • 58
  • 8

1 Answers1

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/pdfjs-dist@3.4.120/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.

Oliver Cape
  • 832
  • 10
  • 14
  • this is what i need, but some error i am facing, there is no , i am getting undefined ``` highlightPluginInstance.current.highlight(range); ``` – Venkatesh Jul 11 '23 at 04:50
  • 1
    I updated my answer and based it on the example provided by the highlight plugin. Check if the hardcoded data works, if yes, then you may replace it with the metadata that you have. – Oliver Cape Jul 11 '23 at 05:40
  • super this is working, but i have only line number, i don't know how that area, can we able to do with the line number – Venkatesh Jul 11 '23 at 06:13
  • 1
    I am afraid that line numbers are not enough to be able to highlight something on the pdf. Is there a way for you to be able to add something on the metadata like a `pageIndex`? If that's possbile, it will become a less complex since you can just calculate `top` and `height`. If not, you might need to use some libraries (like `pdf.js`) to extract these metadata. – Oliver Cape Jul 11 '23 at 06:46
  • ok , thank you for your help, but only i am getting line number from meta data, not page index. – Venkatesh Jul 11 '23 at 06:54