diff --git a/src/Page.tsx b/src/Page.tsx index fb8147833..4dc22f8a1 100644 --- a/src/Page.tsx +++ b/src/Page.tsx @@ -306,6 +306,7 @@ export default function Page(props: PageProps) { pageIndex, pageNumber, renderForms, + renderTextLayer: renderTextLayerProps, rotate, scale, } diff --git a/src/Page/PageCanvas.spec.tsx b/src/Page/PageCanvas.spec.tsx index fbf3a6d43..333e84810 100644 --- a/src/Page/PageCanvas.spec.tsx +++ b/src/Page/PageCanvas.spec.tsx @@ -1,6 +1,6 @@ import { beforeAll, describe, expect, it, vi } from 'vitest'; import React from 'react'; -import { render, waitFor } from '@testing-library/react'; +import { render } from '@testing-library/react'; import { pdfjs } from '../index.test'; @@ -104,14 +104,39 @@ describe('PageCanvas', () => { expect(canvasRef).toHaveBeenCalledWith(expect.any(HTMLElement)); }); - it('generates a struct tree inside the canvas', async () => { - renderWithContext(, { - page, - scale: 1, + it('does not request struct tree to be rendered when renderTextLayer = false', async () => { + const { func: onRenderSuccess, promise: onRenderSuccessPromise } = makeAsyncCallback(); + + const { container } = renderWithContext(, { + onRenderSuccess, + page: pageWithRendererMocked, + renderTextLayer: false, + }); + + await onRenderSuccessPromise; + + const structTree = container.querySelector('.react-pdf__Page__structTree'); + + expect(structTree).not.toBeInTheDocument(); + }); + + it('renders StructTree when given renderTextLayer = true', async () => { + const { func: onGetStructTreeSuccess, promise: onGetStructTreeSuccessPromise } = + makeAsyncCallback(); + + const { container } = renderWithContext(, { + onGetStructTreeSuccess, + page: pageWithRendererMocked, + renderTextLayer: true, }); - const canvas = document.querySelector('canvas'); - await waitFor(() => expect(canvas?.children.length).not.toBe(0)); + expect.assertions(1); + + await onGetStructTreeSuccessPromise; + + const canvas = container.querySelector('canvas') as HTMLCanvasElement; + + expect(canvas.children.length).toBeGreaterThan(0); }); }); }); diff --git a/src/Page/PageCanvas.tsx b/src/Page/PageCanvas.tsx index 3f1d5e657..b2388bd6f 100644 --- a/src/Page/PageCanvas.tsx +++ b/src/Page/PageCanvas.tsx @@ -37,6 +37,7 @@ export default function PageCanvas(props: PageCanvasProps) { onRenderSuccess: onRenderSuccessProps, page, renderForms, + renderTextLayer, rotate, scale, } = mergedProps; @@ -171,7 +172,7 @@ export default function PageCanvas(props: PageCanvasProps) { userSelect: 'none', }} > - + {renderTextLayer ? : null} ); } diff --git a/src/StructTree.spec.tsx b/src/StructTree.spec.tsx index cac03e776..d25d88725 100644 --- a/src/StructTree.spec.tsx +++ b/src/StructTree.spec.tsx @@ -135,7 +135,7 @@ describe('StructTree', () => { const wrapper = container.firstElementChild as HTMLSpanElement; expect(wrapper.outerHTML).toBe( - '', + '', ); }); }); diff --git a/src/StructTree.tsx b/src/StructTree.tsx index c49cd9674..b6491b740 100644 --- a/src/StructTree.tsx +++ b/src/StructTree.tsx @@ -104,5 +104,5 @@ export default function StructTree() { return null; } - return ; + return ; } diff --git a/src/StructTreeItem.tsx b/src/StructTreeItem.tsx index 3ef935bd2..8f58e9d62 100644 --- a/src/StructTreeItem.tsx +++ b/src/StructTreeItem.tsx @@ -11,10 +11,11 @@ import type { StructTreeContent } from 'pdfjs-dist/types/src/display/api'; import type { StructTreeNodeWithExtraAttributes } from './shared/types'; type StructTreeItemProps = { + className?: string; node: StructTreeNodeWithExtraAttributes | StructTreeContent; }; -export default function StructTreeItem({ node }: StructTreeItemProps) { +export default function StructTreeItem({ className, node }: StructTreeItemProps) { const attributes = useMemo(() => getAttributes(node), [node]); const children = useMemo(() => { @@ -34,7 +35,11 @@ export default function StructTreeItem({ node }: StructTreeItemProps) { }); }, [node]); - return {children}; + return ( + + {children} + + ); } StructTreeItem.propTypes = { diff --git a/src/shared/types.ts b/src/shared/types.ts index 7ea015bd2..b65e04046 100644 --- a/src/shared/types.ts +++ b/src/shared/types.ts @@ -158,6 +158,7 @@ export type PageContextType = { pageIndex: number; pageNumber: number; renderForms: boolean; + renderTextLayer: boolean; rotate: number; scale: number; } | null;