webviewer custom panel

gistfile1.txt

/* eslint-disable @typescript-eslint/no-explicit-any */
'use client'

import { WebViewerInstance } from '@pdftron/webviewer'
import { Ref, useEffect, useState, useRef } from 'react'

export default function Viewer({ urls }: { urls?: string[] }) {
	const viewer: Ref<HTMLDivElement | any> = useRef(null)
	// eslint-disable-next-line @typescript-eslint/no-unused-vars
	const [webviewerInstance, setWebViewerInstance] = useState<
		WebViewerInstance | any
	>(null)
	const instanceRef = useRef<WebViewerInstance | null>(null)

	useEffect(() => {
		let isMounted = true

		import('@pdftron/webviewer').then((module) => {
			if (!isMounted) return

			const WebViewer = module.default
			WebViewer(
				{
					path: '/webviewer/lib',
					initialDoc: urls || [],
					licenseKey:
						'REDACTED',
					enableMeasurement: true,
				},
				viewer.current
			).then(async (instance: WebViewerInstance) => {
				if (!isMounted) {
					instance.Core.documentViewer.closeDocument()
					return
				}

				//Add a new panel that contains the text
				instance.UI.addPanel({
					dataElement: 'customPanel',
					location: 'right',
					icon: '/kiwi.svg',
					title: 'Custom Panel',
					render: () => <CustomPanel text='Hello' />,
				})

				const tabPanel = new instance.UI.Components.TabPanel({
					dataElement: 'myTabPanel',
					location: 'right',
					panelsList: [
						{
							render: instance.UI.Panels.THUMBNAIL, // or 'thumbnailsPanel'
						},
						{
							render: 'customPanel',
						},
					],
				})
				instance.UI.addPanel(tabPanel)

				const panToolButton = new instance.UI.Components.ToolButton({
					dataElement: 'panToolButton',
					toolName: instance.Core.Tools.ToolNames.PAN,
				})
				const tabPanelToggle = new instance.UI.Components.ToggleElementButton({
					dataElement: 'tabPanelToggle',
					toggleElement: 'myTabPanel',
					img: '/image.png',
					title: 'Toggle Tab Panel',
				})
				const topHeader = new instance.UI.Components.ModularHeader({
					dataElement: 'default-top-header',
					placement: 'top',
					grow: 0,
					gap: 12,
					position: 'start',
					stroke: true,
					dimension: {
						paddingTop: 8,
						paddingBottom: 8,
						borderWidth: 1,
					},
					style: {},
					items: [panToolButton, tabPanelToggle],
				})
				instance.UI.setModularHeaders([topHeader])
				instanceRef.current = instance
				setWebViewerInstance(instance)
			})
		})

		return () => {
			isMounted = false
			if (instanceRef.current) {
				instanceRef.current.Core.documentViewer.closeDocument()
			}
		}
	}, [urls])

	return (
		<div className='min-h-[calc(100vh-5rem)] h-[calc(100vh-5rem)] rounded-md'>
			<div className='h-full ' ref={viewer}></div>
		</div>
	)
}

function CustomPanel({ text }: { text: string }) {
	return <div>{text}</div>
}