Document Manager Plugin

import { createPluginRegistration } from '@embedpdf/core'
import { EmbedPDF } from '@embedpdf/core/react'
// ... other imports
import { DocumentManagerPluginPackage } from '@embedpdf/plugin-document-manager/react'
 
const plugins = [
  // Register the document manager plugin first
  createPluginRegistration(DocumentManagerPluginPackage, {
    // Optional: Load documents automatically on initialization
    initialDocuments: [
      { url: 'https://example.com/document1.pdf' },
      { url: 'https://example.com/document2.pdf' },
    ],
    // Optional: Limit the maximum number of open documents
    maxDocuments: 10,
  }),
  // ... other plugins like Viewport, Scroll, Render, etc.
  createPluginRegistration(ViewportPluginPackage),
  createPluginRegistration(ScrollPluginPackage),
  createPluginRegistration(RenderPluginPackage),
]

import { DocumentContent } from '@embedpdf/plugin-document-manager/react';
 
const MainViewerArea = ({ activeDocumentId }) => {
  // If no document is selected, show a placeholder
  if (!activeDocumentId) return <div>No document selected</div>;
 
  return (
    <DocumentContent documentId={activeDocumentId}>
      {({ isLoading, isError, isLoaded }) => (
        <>
          {isLoading && <LoadingSpinner />}
          {isError && <ErrorMessage />}
          
          {/* Only render the heavy viewer components when loaded */}
          {isLoaded && (
             <Viewport documentId={activeDocumentId}>
               {/* ... Scroller, etc ... */}
             </Viewport>
          )}
        </>
      )}
    </DocumentContent>
  );
};

import { useDocumentManagerCapability } from '@embedpdf/plugin-document-manager/react';
 
const OpenButton = () => {
  const { provides: docManager } = useDocumentManagerCapability();
 
  const handleOpenFile = async () => {
    // Opens the native system file picker
    // The plugin handles reading the buffer and creating the document
    await docManager.openFileDialog(); 
  };
 
  const handleOpenUrl = () => {
    docManager.openDocumentUrl({ 
      url: 'https://example.com/report.pdf',
      password: 'optional-password' 
    });
  };
 
  return <button onClick={handleOpenFile}>Open File</button>;
};

import { useOpenDocuments, useActiveDocument, useDocumentManagerCapability } from '@embedpdf/plugin-document-manager/react';
 
const TabBar = () => {
  const documents = useOpenDocuments(); // Array of all open document states
  const { activeDocumentId } = useActiveDocument();
  const { provides: docManager } = useDocumentManagerCapability();
 
  return (
    <div className="tabs">
      {documents.map(doc => (
        <div 
          key={doc.id}
          className={doc.id === activeDocumentId ? 'active' : ''}
          onClick={() => docManager.setActiveDocument(doc.id)}
        >
          {doc.name}
          <button onClick={(e) => {
             e.stopPropagation(); 
             docManager.closeDocument(doc.id);
          }}>x</button>
        </div>
      ))}
    </div>
  );
};