How to Handle the isDocumentEdited API in React PDF Viewer?

Description:

This article explains how to handle the isDocumentEdited API in the Syncfusion PDF Viewer component for React applications. The isDocumentEdited flag tracks whether a document has been edited. This guide will demonstrate how to manage the state of this flag and reset it based on document annotations. After following this guide, users will be able to programmatically track and reset the edit status of a PDF document.

Solution:

This solution demonstrates how to manage the isDocumentEdited API in Syncfusion PDF Viewer by tracking document changes based on annotations. The isDocumentEdited flag is updated when a comment is added or deleted, allowing you to monitor whether the document has been edited. By using event handlers for adding and deleting comments, you can easily reset or track the document’s edit status.

Prerequisites:

1. Syncfusion PDF Viewer Setup: Make sure the Syncfusion PDF Viewer is installed and set up in your React project. Follow the Getting Started with Syncfusion PDFViewer for React guide if you haven’t already.
2. Basic Knowledge of React: Familiarity with React components and the basic setup of React projects will help you follow along with the implementation.

Code Snippets

Import Necessary Modules

Begin by importing the required modules from the Syncfusion PDF Viewer package in your index.js file.

import ReactDOM from 'react-dom/client';
import './index.css';
import {
  PdfViewerComponent,
  Toolbar,
  Magnification,
  Navigation,
  LinkAnnotation,
  BookmarkView,
  ThumbnailView,
  Print,
  TextSelection,
  TextSearch,
  Annotation,
  FormFields,
  FormDesigner,
  PageOrganizer,
  Inject,
} from '@syncfusion/ej2-react-pdfviewer';

Define the isDocumentEdited Flag and Functions

Set up the isDocumentEdited flag and two key functions: commentAdd and commentDelete. These will track whether a comment is added or deleted from the PDF.

function Default() {
  var isDocumentEdited;

  // Function to add a comment
  function commentAdd() {
    var viewer = document.getElementById('container').ej2_instances[0];
    if (viewer.annotationCollection[0]) {
      var comments = viewer.annotationCollection[0].note;
    }
    console.log(comments);
    if (viewer.annotationCollection[0] && viewer.annotationCollection[0].note) {
      isDocumentEdited = true;
    } else {
      isDocumentEdited = false;
    }
  }

  // Function to delete a comment and reset `isDocumentEdited`
  function commentDelete(args) {
    var viewer = document.getElementById('container').ej2_instances[0];

    // Loop through each annotation in the annotationCollection
    for (let i = 0; i < viewer.annotationCollection.length; i++) {
      let annotation = viewer.annotationCollection[i];
      let comments = annotation.note;

      console.log(comments);

      // Check if the note and annotationId match
      if (
        args.annotation.note === comments &&
        args.id === annotation.annotationId
      ) {
        isDocumentEdited = false;
      } else {
        isDocumentEdited = true;
      }
    }

    console.log(isDocumentEdited);
  }

  // Function to check the status of `isDocumentEdited`
  function isDocumentEditedStatus() {
    console.log('isDocumentEdited (after save): ' + isDocumentEdited);
  }

  return (
    <div>
      <button onClick={isDocumentEditedStatus}>isDocumentEdited </button>
      <PdfViewerComponent
        id="container"
        documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
        resourceUrl="https://cdn.syncfusion.com/ej2/23.2.6/dist/ej2-pdfviewer-lib"
        commentAdd={commentAdd}
        commentDelete={commentDelete}
      >
        <Inject
          services={[
            Toolbar,
            Magnification,
            Navigation,
            LinkAnnotation,
            BookmarkView,
            ThumbnailView,
            Print,
            TextSelection,
            TextSearch,
            Annotation,
            FormFields,
            FormDesigner,
            PageOrganizer,
          ]}
        />
      </PdfViewerComponent>
    </div>
  );
}

export default Default;

const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<Default />);

Key Features Used in the Code

1. Annotation Collection: The annotationCollection is used to track annotations made within the PDF viewer, allowing for interaction with comments or notes.
2. Comment Add and Delete Handlers: The commentAdd and commentDelete functions are used to manage the isDocumentEdited flag based on user actions with annotations.

Sample:

You can find the full sample code in our GitHub repository

Conclusion:

I hope this article helped you learn on how to handle the isDocumentEdited API in React PDF Viewer.

You can refer to React PDF Viewer feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our React PDF Viewer example PDF Viewer example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!