Could someone help me to add annotation feature in reactsjs

JavaScript
1

I want to add annotation/Highlight Feature on selected text on pdf using react-pdf-viewer permanently. there may be one or more pdf on website and pdf may contain one or more pages.

import React, { useState, useEffect } from "react";
import { Worker, Viewer } from "@react-pdf-viewer/core";
import { ExcelRenderer, OutTable } from "react-excel-renderer";
import { defaultLayoutPlugin } from "@react-pdf-viewer/default-layout";
import "@react-pdf-viewer/highlight/lib/styles/index.css";
import "@react-pdf-viewer/core/lib/styles/index.css";
import "@react-pdf-viewer/default-layout/lib/styles/index.css";
import { highlightPlugin, Trigger } from "@react-pdf-viewer/highlight";
import "@react-pdf-viewer/highlight/lib/styles/index.css";
import { backendBaseUrl } from "../config";

function DocumentDrawer({ isOpen, toggle, viewFile }) {
  const newPdfPlugin = defaultLayoutPlugin();
  const [fileType, setFileType] = useState(null);
  const [excelData, setExcelData] = useState(null);
  const highlightPluginInstance = highlightPlugin();
    return (
    <div className={sidebar_content_viewer ${isOpen ? "open" : ""}}>
      <button className="btn ms-5 btn-primary close-button" onClick={toggle}>
        Close
      </button>
      <div className="slider_inner_contentview">
        <div className="file_container">
          {fileType === "pdf" && (
            <Worker workerUrl="https://unpkg.com/pdfjs-dist@3.11.174/build/pdf.worker.min.js">
              <Viewer
                fileUrl={${backendBaseUrl}/api/documents/ + viewFile}
                plugins={[newPdfPlugin, highlightPluginInstance]}
                defaultScale={1.2}
                preload={true}
              />
            </Worker>
          )}
                 </div>
      </div>
    </div>
  );
}

export default DocumentDrawer;
2

Here’s a general approach using react-pdf and pdfjs-dist that might help you implement text highlighting or annotation:

import React, { useState } from “react”;
import { Document, Page, pdfjs } from “react-pdf”;

// Configure PDF.js worker
pdfjs.GlobalWorkerOptions.workerSrc = //cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js;

function MyPdfViewer() {
const [numPages, setNumPages] = useState(null);
const [selectedText, setSelectedText] = useState(“”); // Store selected text

const handleTextSelection = () => {
// Implement logic to handle the selected text
// You can save it to state or perform any annotation-related actions
};

return (



{[…Array(numPages)].map((_, index) => (
<Page
key={page_${index + 1}}
pageNumber={index + 1}
onGetText={(text) => {
// Logic to get text from the page
}}
onMouseUp={(event) => {
const selection = window.getSelection();
if (selection && selection.toString().length > 0) {
setSelectedText(selection.toString());
handleTextSelection();
}
}}
/>
))}


);
}

export default MyPdfViewer;