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(LoaderPluginPackage, { /* ... */ }),
  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
  renderPage={({ width, height, pageIndex, scale, rotation }) => (
    <PagePointerProvider {...{ width, height, pageIndex, scale, rotation }}>
      <RenderLayer pageIndex={pageIndex} scale={scale} />
      <SelectionLayer pageIndex={pageIndex} scale={scale} />
      {/* Annotation Layer on top */}
      <AnnotationLayer
        pageIndex={pageIndex}
        scale={scale}
        pageWidth={width}
        pageHeight={height}
        rotation={rotation}
      />
    </PagePointerProvider>
  )}
/>

import { useState, useEffect } from 'react';
import { useAnnotationCapability } from '@embedpdf/plugin-annotation/react';
 
const AnnotationToolbar = () => {
  const { provides: annotationApi } = useAnnotationCapability();
  const [selected, setSelected] = useState(false);
 
  useEffect(() => {
    if (!annotationApi) return;
    // Listen for selection changes to enable/disable the delete button
    return annotationApi.onStateChange((state) => setSelected(!!state.selectedUid));
  }, [annotationApi]);
 
  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={!selected}>Delete</button>
    </div>
  );
};

<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 { useAnnotationCapability } from '@embedpdf/plugin-annotation/react';
 
const AnnotationLogger = () => {
  const { provides: annotationApi } = useAnnotationCapability();
 
  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;
}