|
| 1 | +'use client' |
| 2 | +import { |
| 3 | + CommandsPlugin, |
| 4 | + PDFViewer, |
| 5 | + PDFViewerRef, |
| 6 | + UIPlugin, |
| 7 | + ToolbarItem, |
| 8 | + GroupItem, |
| 9 | + MenuItem, |
| 10 | +} from '@embedpdf/react-pdf-viewer' |
| 11 | +import { useRef, useState, useEffect, useCallback } from 'react' |
| 12 | + |
| 13 | +interface UICustomizationExampleProps { |
| 14 | + themePreference?: 'light' | 'dark' |
| 15 | +} |
| 16 | + |
| 17 | +// Type guard to check if an item is a GroupItem |
| 18 | +function isGroupItem(item: ToolbarItem): item is GroupItem { |
| 19 | + return item.type === 'group' |
| 20 | +} |
| 21 | + |
| 22 | +export default function UICustomizationExample({ |
| 23 | + themePreference = 'light', |
| 24 | +}: UICustomizationExampleProps) { |
| 25 | + const viewerRef = useRef<PDFViewerRef>(null) |
| 26 | + const [isReady, setIsReady] = useState(false) |
| 27 | + const [lastAction, setLastAction] = useState<string | null>(null) |
| 28 | + |
| 29 | + // Update theme when preference changes |
| 30 | + useEffect(() => { |
| 31 | + viewerRef.current?.container?.setTheme({ preference: themePreference }) |
| 32 | + }, [themePreference]) |
| 33 | + |
| 34 | + // Setup custom commands and UI when viewer is ready |
| 35 | + const handleReady = useCallback(async () => { |
| 36 | + const container = viewerRef.current?.container |
| 37 | + if (!container) return |
| 38 | + |
| 39 | + const registry = await container.registry |
| 40 | + |
| 41 | + const commands = registry.getPlugin<CommandsPlugin>('commands')?.provides() |
| 42 | + const ui = registry.getPlugin<UIPlugin>('ui')?.provides() |
| 43 | + |
| 44 | + if (!commands || !ui) return |
| 45 | + |
| 46 | + // ───────────────────────────────────────────────────────── |
| 47 | + // 1. Register custom icons (stroke-based Tabler icons) |
| 48 | + // ───────────────────────────────────────────────────────── |
| 49 | + container.registerIcons({ |
| 50 | + customSmiley: { |
| 51 | + viewBox: '0 0 24 24', |
| 52 | + paths: [ |
| 53 | + { |
| 54 | + d: 'M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0', |
| 55 | + stroke: 'currentColor', |
| 56 | + fill: 'none', |
| 57 | + }, |
| 58 | + { d: 'M9 10l.01 0', stroke: 'currentColor', fill: 'none' }, |
| 59 | + { d: 'M15 10l.01 0', stroke: 'currentColor', fill: 'none' }, |
| 60 | + { |
| 61 | + d: 'M9.5 15a3.5 3.5 0 0 0 5 0', |
| 62 | + stroke: 'currentColor', |
| 63 | + fill: 'none', |
| 64 | + }, |
| 65 | + ], |
| 66 | + }, |
| 67 | + customStar: { |
| 68 | + viewBox: '0 0 24 24', |
| 69 | + paths: [ |
| 70 | + { |
| 71 | + d: 'M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z', |
| 72 | + stroke: 'currentColor', |
| 73 | + fill: 'none', |
| 74 | + }, |
| 75 | + ], |
| 76 | + }, |
| 77 | + }) |
| 78 | + |
| 79 | + // ───────────────────────────────────────────────────────── |
| 80 | + // 2. Register custom commands |
| 81 | + // ───────────────────────────────────────────────────────── |
| 82 | + commands.registerCommand({ |
| 83 | + id: 'custom.smiley', |
| 84 | + label: 'Say Hello', |
| 85 | + icon: 'customSmiley', |
| 86 | + action: () => { |
| 87 | + setLastAction('Hello! 👋') |
| 88 | + setTimeout(() => setLastAction(null), 2000) |
| 89 | + }, |
| 90 | + }) |
| 91 | + |
| 92 | + commands.registerCommand({ |
| 93 | + id: 'custom.star', |
| 94 | + label: 'Add to Favorites', |
| 95 | + icon: 'customStar', |
| 96 | + action: () => { |
| 97 | + setLastAction('Added to favorites! ⭐') |
| 98 | + setTimeout(() => setLastAction(null), 2000) |
| 99 | + }, |
| 100 | + }) |
| 101 | + |
| 102 | + // ───────────────────────────────────────────────────────── |
| 103 | + // 3. Modify the UI: Replace comment button with smiley |
| 104 | + // ───────────────────────────────────────────────────────── |
| 105 | + const currentSchema = ui.getSchema() |
| 106 | + const mainToolbar = currentSchema.toolbars['main-toolbar'] |
| 107 | + |
| 108 | + if (mainToolbar) { |
| 109 | + // Clone items with proper typing using structuredClone |
| 110 | + const items: ToolbarItem[] = structuredClone(mainToolbar.items) |
| 111 | + |
| 112 | + // Find the right-group using type guard |
| 113 | + const rightGroup = items.find( |
| 114 | + (item): item is GroupItem => |
| 115 | + isGroupItem(item) && item.id === 'right-group', |
| 116 | + ) |
| 117 | + |
| 118 | + if (rightGroup) { |
| 119 | + // Find and replace the comment button with our smiley button |
| 120 | + const commentIndex = rightGroup.items.findIndex( |
| 121 | + (item) => item.id === 'comment-button', |
| 122 | + ) |
| 123 | + |
| 124 | + if (commentIndex !== -1) { |
| 125 | + rightGroup.items[commentIndex] = { |
| 126 | + type: 'command-button', |
| 127 | + id: 'smiley-button', |
| 128 | + commandId: 'custom.smiley', |
| 129 | + variant: 'icon', |
| 130 | + } |
| 131 | + } |
| 132 | + } |
| 133 | + |
| 134 | + ui.mergeSchema({ |
| 135 | + toolbars: { |
| 136 | + 'main-toolbar': { |
| 137 | + ...mainToolbar, |
| 138 | + items, |
| 139 | + }, |
| 140 | + }, |
| 141 | + }) |
| 142 | + } |
| 143 | + |
| 144 | + // ───────────────────────────────────────────────────────── |
| 145 | + // 4. Add star command to the document menu |
| 146 | + // ───────────────────────────────────────────────────────── |
| 147 | + const documentMenu = currentSchema.menus['document-menu'] |
| 148 | + |
| 149 | + if (documentMenu) { |
| 150 | + const menuItems: MenuItem[] = [ |
| 151 | + ...documentMenu.items, |
| 152 | + { type: 'divider', id: 'custom-divider' }, |
| 153 | + { type: 'command', id: 'star-menu-item', commandId: 'custom.star' }, |
| 154 | + ] |
| 155 | + |
| 156 | + ui.mergeSchema({ |
| 157 | + menus: { |
| 158 | + 'document-menu': { |
| 159 | + ...documentMenu, |
| 160 | + items: menuItems, |
| 161 | + }, |
| 162 | + }, |
| 163 | + }) |
| 164 | + } |
| 165 | + |
| 166 | + setIsReady(true) |
| 167 | + }, []) |
| 168 | + |
| 169 | + return ( |
| 170 | + <div className="flex flex-col gap-4"> |
| 171 | + {/* Status indicator */} |
| 172 | + <div className="flex flex-wrap items-center gap-4 rounded-lg border border-gray-200 bg-gray-50 p-4 dark:border-gray-700 dark:bg-gray-800"> |
| 173 | + <div className="flex items-center gap-2"> |
| 174 | + <span |
| 175 | + className={`inline-block h-2 w-2 rounded-full ${isReady ? 'bg-green-500' : 'bg-yellow-500'}`} |
| 176 | + /> |
| 177 | + <span className="text-sm text-gray-600 dark:text-gray-300"> |
| 178 | + {isReady ? 'UI customized!' : 'Loading...'} |
| 179 | + </span> |
| 180 | + </div> |
| 181 | + |
| 182 | + {lastAction && ( |
| 183 | + <div className="animate-pulse rounded bg-green-100 px-3 py-1 text-sm font-medium text-green-800 dark:bg-green-900 dark:text-green-200"> |
| 184 | + {lastAction} |
| 185 | + </div> |
| 186 | + )} |
| 187 | + |
| 188 | + {isReady && ( |
| 189 | + <div className="ml-auto text-xs text-gray-400"> |
| 190 | + 😊 replaced comment button • ⭐ added to document menu |
| 191 | + </div> |
| 192 | + )} |
| 193 | + </div> |
| 194 | + |
| 195 | + {/* Viewer Container */} |
| 196 | + <div className="h-[600px] w-full overflow-hidden rounded-xl border border-gray-300 shadow-lg dark:border-gray-600"> |
| 197 | + <PDFViewer |
| 198 | + ref={viewerRef} |
| 199 | + config={{ |
| 200 | + src: 'https://snippet.embedpdf.com/ebook.pdf', |
| 201 | + theme: { preference: themePreference }, |
| 202 | + }} |
| 203 | + style={{ width: '100%', height: '100%' }} |
| 204 | + onReady={handleReady} |
| 205 | + /> |
| 206 | + </div> |
| 207 | + </div> |
| 208 | + ) |
| 209 | +} |
0 commit comments