diff --git a/src/Page.tsx b/src/Page.tsx index 21070a48e..64aa9d29a 100644 --- a/src/Page.tsx +++ b/src/Page.tsx @@ -36,6 +36,7 @@ import type { PDFDocumentProxy, PDFPageProxy } from 'pdfjs-dist'; import type { EventProps } from 'make-event-props'; import type { CustomRenderer, + CustomTextLayerRenderer, CustomTextRenderer, NodeOrRenderer, OnGetAnnotationsError, @@ -66,6 +67,7 @@ export type PageProps = { children?: React.ReactNode; className?: string; customRenderer?: CustomRenderer; + customTextLayerRenderer?: CustomTextLayerRenderer; customTextRenderer?: CustomTextRenderer; devicePixelRatio?: number; error?: NodeOrRenderer; @@ -119,6 +121,7 @@ export default function Page(props: PageProps) { children, className, customRenderer: CustomRenderer, + customTextLayerRenderer, customTextRenderer, devicePixelRatio, error = 'Failed to load the page.', @@ -297,6 +300,7 @@ export default function Page(props: PageProps) { ? { _className, canvasBackground, + customTextLayerRenderer, customTextRenderer, devicePixelRatio, onGetAnnotationsError: onGetAnnotationsErrorProps, @@ -323,6 +327,7 @@ export default function Page(props: PageProps) { [ _className, canvasBackground, + customTextLayerRenderer, customTextRenderer, devicePixelRatio, onGetAnnotationsErrorProps, diff --git a/src/Page/TextLayer.tsx b/src/Page/TextLayer.tsx index ad26d7f91..e1d7c4ffb 100644 --- a/src/Page/TextLayer.tsx +++ b/src/Page/TextLayer.tsx @@ -23,6 +23,7 @@ export default function TextLayer() { invariant(pageContext, 'Unable to find Page context.'); const { + customTextLayerRenderer, customTextRenderer, onGetTextError, onGetTextSuccess, @@ -210,7 +211,14 @@ export default function TextLayer() { ? layer.querySelectorAll('.markedContent > *:not(.markedContent') : layer.children; - if (customTextRenderer) { + if (customTextLayerRenderer) { + customTextLayerRenderer({ + layerElement: layer, + pageIndex, + pageNumber, + textContentItems: textContent.items, + }); + } else if (customTextRenderer) { let index = 0; textContent.items.forEach((item, itemIndex) => { if (!isTextItem(item)) { @@ -244,6 +252,7 @@ export default function TextLayer() { } useLayoutEffect(renderTextLayer, [ + customTextLayerRenderer, customTextRenderer, onRenderError, onRenderSuccess, diff --git a/src/shared/types.ts b/src/shared/types.ts index 32694e259..afdff3fe7 100644 --- a/src/shared/types.ts +++ b/src/shared/types.ts @@ -67,6 +67,13 @@ export type UnregisterPage = (pageIndex: number) => void; /* Complex types */ export type CustomRenderer = React.FunctionComponent | React.ComponentClass; +export type CustomTextLayerRenderer = (props: { + layerElement: HTMLDivElement; + pageIndex: number; + pageNumber: number; + textContentItems: TextContent['items']; +}) => void; + export type CustomTextRenderer = ( props: { pageIndex: number; pageNumber: number; itemIndex: number } & TextItem, ) => string; @@ -144,6 +151,7 @@ export type DocumentContextType = { export type PageContextType = { _className?: string; canvasBackground?: string; + customTextLayerRenderer?: CustomTextLayerRenderer; customTextRenderer?: CustomTextRenderer; devicePixelRatio?: number; onGetAnnotationsError?: OnGetAnnotationsError;