Document Manager Plugin

import { createPluginRegistration } from '@embedpdf/core'
import { EmbedPDF } from '@embedpdf/core/svelte'
// ... other imports
import { DocumentManagerPluginPackage } from '@embedpdf/plugin-document-manager/svelte'
 
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),
]

<script lang="ts">
import { DocumentContent } from '@embedpdf/plugin-document-manager/svelte';
</script>
 
<EmbedPDF engine={pdfEngine.engine} {plugins}>
  {#snippet children({ activeDocumentId })}
    {#if !activeDocumentId}
      <div>No document selected</div>
    {:else}
      <DocumentContent documentId={activeDocumentId}>
        {#snippet children(documentContent)}
          {#if documentContent.isLoading}
            <LoadingSpinner />
          {:else if documentContent.isError}
            <ErrorMessage />
          {:else if documentContent.isLoaded}
            <!-- Only render the heavy viewer components when loaded -->
            <Viewport {documentId}>
              <!-- ... Scroller, etc ... -->
            </Viewport>
          {/if}
        {/snippet}
      </DocumentContent>
    {/if}
  {/snippet}
</EmbedPDF>

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

<script lang="ts">
import { 
  useOpenDocuments, 
  useActiveDocument, 
  useDocumentManagerCapability 
} from '@embedpdf/plugin-document-manager/svelte';
 
const documents = useOpenDocuments(); // Reactive object with .current array
const activeDoc = useActiveDocument();
const docManager = useDocumentManagerCapability();
 
const handleTabClick = (docId: string) => {
  docManager.provides?.setActiveDocument(docId);
};
 
const handleClose = (e: Event, docId: string) => {
  e.stopPropagation();
  docManager.provides?.closeDocument(docId);
};
</script>
 
<div class="tabs">
  {#each documents.current as doc (doc.id)}
    <div
      class:active={doc.id === activeDoc.current?.activeDocumentId}
      onclick={() => handleTabClick(doc.id)}
    >
      {doc.name}
      <button onclick={(e) => handleClose(e, doc.id)}>x</button>
    </div>
  {/each}
</div>