Merge pull request #381 from embedpdf/fix/print-popup

Fix/print popup

Author: bobsingor

.changeset/capture-print-i18n-support.md

@@ -0,0 +1,8 @@
+---
+'@embedpdf/snippet': patch
+---
+
+- Add i18n support for capture and print dialogs with translations for all supported languages
+- Add `document:capture` command to toolbar for screenshot functionality
+- Refactor hint-layer and capture components to use translation hooks
+- Remove unused `@types/classnames` dependency

pnpm-lock.yaml

@@ -62,7 +62,6 @@
     "@rollup/plugin-typescript": "^12.3.0",
     "@rollup/plugin-url": "^8.0.1",
     "@tailwindcss/postcss": "^4.1.17",
-    "@types/classnames": "^2.3.1",
     "@types/node": "^20.5.4",
     "@types/react": "^18.2.0",
     "@types/uuid": "^9.0.2",

viewers/snippet/package.json

@@ -136,6 +136,7 @@ import { TabBar, TabBarVisibility } from '@/components/tab-bar';
 import { EmptyState } from '@/components/empty-state';
 import { DocumentPasswordPrompt } from '@/components/document-password-prompt';
 import { ModeSelectButton } from './mode-select-button';
+import { Capture } from '@/components/capture';
 
 // ============================================================================
 // Main Configuration Interface - Uses actual plugin config types directly
@@ -412,7 +413,6 @@ function ViewerLayout({ documentId, tabBarVisibility = 'multiple' }: ViewerLayou
                                     pageIndex={pageIndex}
                                     selectionMenu={annotationMenu}
                                   />
-                                  <HintLayer />
                                 </PagePointerProvider>
                               </Rotate>
                             )}
@@ -599,6 +599,8 @@ export function PDFViewer({ config, onRegistryReady }: PDFViewerProps) {
                     className="relative flex h-full w-full select-none flex-col"
                   >
                     <ViewerLayout documentId={activeDocumentId} tabBarVisibility={config.tabBar} />
+                    <Capture documentId={activeDocumentId} />
+                    <HintLayer documentId={activeDocumentId} />
                   </UIProvider>
                 ) : (
                   <EmptyState />

viewers/snippet/src/components/app.tsx

@@ -3,21 +3,27 @@ import { useCaptureCapability } from '@embedpdf/plugin-capture/preact';
 import { useState, useRef, useEffect } from 'preact/hooks';
 import { Dialog } from './ui/dialog';
 import { Button } from './ui/button';
+import { useTranslations } from '@embedpdf/plugin-i18n/preact';
 
-interface CaptureData {
+export interface CaptureData {
   pageIndex: number;
   rect: any;
   blob: Blob;
 }
 
-export function Capture() {
+export interface CaptureProps {
+  documentId: string;
+}
+
+export function Capture({ documentId }: CaptureProps) {
   const { provides: capture } = useCaptureCapability();
   const [open, setOpen] = useState(false);
   const [captureData, setCaptureData] = useState<CaptureData | null>(null);
   const [previewUrl, setPreviewUrl] = useState<string | null>(null);
   const [downloadUrl, setDownloadUrl] = useState<string | null>(null);
   const urlRef = useRef<string | null>(null);
   const downloadLinkRef = useRef<HTMLAnchorElement>(null);
+  const { translate } = useTranslations(documentId);
 
   const handleClose = () => {
     // Clean up object URLs
@@ -73,7 +79,12 @@ export function Capture() {
 
   return (
     <>
-      <Dialog open={open} onClose={handleClose} title="Capture PDF Area">
+      <Dialog
+        open={open}
+        onClose={handleClose}
+        title={translate('capture.title')}
+        className="md:w-[48rem]"
+      >
         <div className="space-y-6">
           <div className="flex justify-center">
             {previewUrl && (
@@ -91,19 +102,19 @@ export function Capture() {
               />
             )}
           </div>
-          <div className="flex justify-end space-x-3 border-t border-gray-200 pt-4">
+          <div className="border-border-subtle flex justify-end space-x-3 border-t pt-4">
             <Button
               onClick={handleClose}
-              className="rounded-md border border-gray-300 bg-white px-4 py-2 text-sm text-gray-700 hover:bg-gray-50"
+              className="border-border-default bg-bg-surface text-fg-secondary hover:bg-interactive-hover rounded-md border px-4 py-2 text-sm disabled:cursor-not-allowed disabled:opacity-50"
             >
-              Cancel
+              {translate('capture.cancel')}
             </Button>
             <Button
               onClick={handleDownload}
               disabled={!captureData}
-              className="rounded-md border border-transparent bg-blue-600 px-4 py-2 text-sm text-white hover:!bg-blue-700 disabled:cursor-not-allowed disabled:opacity-50"
+              className="bg-accent text-fg-on-accent hover:!bg-accent-hover flex items-center space-x-2 rounded-md border border-transparent px-4 py-2 text-sm disabled:cursor-not-allowed disabled:opacity-50"
             >
-              Download
+              {translate('capture.download')}
             </Button>
           </div>
         </div>

viewers/snippet/src/components/capture.tsx

@@ -1,20 +1,26 @@
 import { h } from 'preact';
-import { useInteractionManager } from '@embedpdf/plugin-interaction-manager/preact';
+import { useInteractionManagerCapability } from '@embedpdf/plugin-interaction-manager/preact';
 import { useEffect, useState } from 'preact/hooks';
+import { useTranslations } from '@embedpdf/plugin-i18n/preact';
 
 interface HintState {
   show: boolean;
   mode: 'marqueeZoom' | 'marqueeCapture' | null;
   isAnimating: boolean;
 }
 
-export const HintLayer = () => {
-  const { provides: interactionManager } = useInteractionManager();
+export interface HintLayerProps {
+  documentId: string;
+}
+
+export const HintLayer = ({ documentId }: HintLayerProps) => {
+  const { provides: interactionManager } = useInteractionManagerCapability();
   const [hint, setHint] = useState<HintState>({
     show: false,
     mode: null,
     isAnimating: false,
   });
+  const { translate } = useTranslations(documentId);
 
   useEffect(() => {
     if (!interactionManager) return;
@@ -54,7 +60,7 @@ export const HintLayer = () => {
   if (!hint.show && !hint.isAnimating) return null;
 
   const hintText =
-    hint.mode === 'marqueeZoom' ? 'Drag to select area to zoom' : 'Drag to select area to capture';
+    hint.mode === 'marqueeZoom' ? translate('zoom.dragTip') : translate('capture.dragTip');
 
   const hintColor = hint.mode === 'marqueeZoom' ? 'rgba(33,150,243,0.8)' : 'rgba(76,175,80,0.8)';