feat: Add context menu functionality for PDF components with options to view, copy URL, and download

ts_web/elements/dees-pdf-preview/component.ts

@@ -4,6 +4,8 @@ import { CanvasPool, type PooledCanvas } from '../dees-pdf-shared/CanvasPool.js'
 import { PerformanceMonitor, throttle } from '../dees-pdf-shared/utils.js';
 import { previewStyles } from './styles.js';
 import { demo as demoFunc } from './demo.js';
+import { DeesContextmenu } from '../dees-contextmenu.js';
+import '../dees-icon.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -287,4 +289,66 @@ export class DeesPdfPreview extends DeesElement {
       }
     }
   }
+
+  /**
+   * Provide context menu items for right-click functionality
+   */
+  public getContextMenuItems() {
+    const items: any[] = [];
+
+    // If clickable, add option to view the PDF
+    if (this.clickable) {
+      items.push({
+        name: 'View PDF',
+        iconName: 'lucide:Eye',
+        action: async () => {
+          this.handleClick();
+        }
+      });
+      items.push({ divider: true });
+    }
+
+    items.push(
+      {
+        name: 'Open PDF in New Tab',
+        iconName: 'lucide:ExternalLink',
+        action: async () => {
+          window.open(this.pdfUrl, '_blank');
+        }
+      },
+      { divider: true },
+      {
+        name: 'Copy PDF URL',
+        iconName: 'lucide:Copy',
+        action: async () => {
+          await navigator.clipboard.writeText(this.pdfUrl);
+        }
+      },
+      {
+        name: 'Download PDF',
+        iconName: 'lucide:Download',
+        action: async () => {
+          const link = document.createElement('a');
+          link.href = this.pdfUrl;
+          link.download = this.pdfUrl.split('/').pop() || 'document.pdf';
+          link.click();
+        }
+      }
+    );
+
+    // Add page count info as a disabled item
+    if (this.pageCount > 0) {
+      items.push(
+        { divider: true },
+        {
+          name: `${this.pageCount} page${this.pageCount > 1 ? 's' : ''}`,
+          iconName: 'lucide:FileText',
+          disabled: true,
+          action: async () => {}
+        }
+      );
+    }
+
+    return items;
+  }
 }