Annotation Plugin

import { createPluginRegistration } from '@embedpdf/core'
import { EmbedPDF } from '@embedpdf/core/react'
// ... other imports
import { InteractionManagerPluginPackage } from '@embedpdf/plugin-interaction-manager/react'
import { SelectionPluginPackage } from '@embedpdf/plugin-selection/react'
import { HistoryPluginPackage } from '@embedpdf/plugin-history/react'
import { AnnotationPluginPackage } from '@embedpdf/plugin-annotation/react'
 
const plugins = [
  // ... other essential plugins
  createPluginRegistration(DocumentManagerPluginPackage, { /* ... */ }),
  createPluginRegistration(RenderPluginPackage),
 
  // Register dependencies first
  createPluginRegistration(InteractionManagerPluginPackage),
  createPluginRegistration(SelectionPluginPackage),
  createPluginRegistration(HistoryPluginPackage),
 
  // Register and configure the annotation plugin
  createPluginRegistration(AnnotationPluginPackage, {
    // Optional: Set the author name for created annotations
    annotationAuthor: 'Jane Doe',
  }),
]

import { PagePointerProvider } from '@embedpdf/plugin-interaction-manager/react';
import { AnnotationLayer } from '@embedpdf/plugin-annotation/react';
 
// ...
<Scroller
  documentId={activeDocumentId}
  renderPage={({ pageIndex }) => (
    <PagePointerProvider 
      documentId={activeDocumentId}
      pageIndex={pageIndex} 
    >
      <RenderLayer documentId={activeDocumentId} pageIndex={pageIndex} />
      <SelectionLayer documentId={activeDocumentId} pageIndex={pageIndex} />
      {/* Annotation Layer on top */}
      <AnnotationLayer
        documentId={activeDocumentId}
        pageIndex={pageIndex}
      />
    </PagePointerProvider>
  )}
/>

import { useState, useEffect } from 'react';
import { useAnnotation } from '@embedpdf/plugin-annotation/react';
 
const AnnotationToolbar = ({ documentId }) => {
  const { provides: annotationApi, state } = useAnnotation(documentId);
 
  const deleteSelected = () => {
    const selection = annotationApi?.getSelectedAnnotation();
    if (selection) {
      annotationApi?.deleteAnnotation(selection.object.pageIndex, selection.object.id);
    }
  }
 
  return (
    <div>
      <button onClick={() => annotationApi?.setActiveTool('highlight')}>Highlighter</button>
      <button onClick={() => annotationApi?.setActiveTool('ink')}>Pen</button>
      <button onClick={deleteSelected} disabled={!state.selectedUid}>Delete</button>
    </div>
  );
};

import { 
  AnnotationLayer, 
  useAnnotationCapability,
  type AnnotationSelectionMenuProps 
} from '@embedpdf/plugin-annotation/react';
 
// A simple menu with a delete button
const AnnotationSelectionMenu = ({ 
  selected, 
  context, 
  menuWrapperProps,
  rect,
  documentId 
}: AnnotationSelectionMenuProps & { documentId: string }) => {
  const { provides: annotationCapability } = useAnnotationCapability();
 
  const handleDelete = () => {
    const { pageIndex, id } = context.annotation.object;
    annotationCapability?.forDocument(documentId).deleteAnnotation(pageIndex, id);
  };
 
  if (!selected) return null;
 
  return (
    <div {...menuWrapperProps}>
      <div style={{ position: 'absolute', top: rect.size.height + 8, pointerEvents: 'auto', cursor: 'default' }}>
        <button onClick={handleDelete}>Delete</button>
      </div>
    </div>
  );
};
 
// Pass the menu to the AnnotationLayer
<AnnotationLayer
  documentId={activeDocumentId}
  pageIndex={pageIndex}
  selectionMenu={(props) => (
    <AnnotationSelectionMenu {...props} documentId={activeDocumentId} />
  )}
/>

<EmbedPDF
  // ...
  onInitialized={(registry) => {
    const annotationApi = registry.getPlugin('annotation')?.provides();
    annotationApi?.addTool({
      id: 'stampApproved',
      name: 'Approved Stamp',
      interaction: { exclusive: false, cursor: 'copy' },
      matchScore: () => 0, // Doesn't match existing annotations
      defaults: {
        type: PdfAnnotationSubtype.STAMP,
        imageSrc: '/images/approved-stamp.png', // URL to your stamp image
      },
    });
  }}
>
  {/* ... */}
</EmbedPDF>

import { useEffect } from 'react';
import { useAnnotation } from '@embedpdf/plugin-annotation/react';
 
const AnnotationLogger = ({ documentId }) => {
  const { provides: annotationApi } = useAnnotation(documentId);
 
  useEffect(() => {
    if (!annotationApi) return;
 
    const unsubscribe = annotationApi.onAnnotationEvent((event) => {
      console.log(`Annotation event: ${event.type}`, { event });
 
      // Example: Save to backend after a change is committed to the engine
      if (event.type === 'create' && event.committed) {
        // yourApi.saveAnnotation(event.annotation);
      }
    });
 
    // Clean up the subscription when the component unmounts
    return unsubscribe;
  }, [annotationApi]);
 
  return null; // This is a non-visual component
};

interface HandleUI {
  /** Handle size in CSS pixels */
  size?: number; // Default: 12
  /** Default background color for the handle */
  color?: string; // Default: '#007ACC'
  /** Custom component to render for each handle */
  component?: (props: HandleProps) => JSX.Element;
}