added custom renderer for entire layer

Author: Ishan Kaul

packages/react-pdf/src/Page.tsx

@@ -37,6 +37,7 @@ import type { EventProps } from 'make-event-props';
 import type {
   ClassName,
   CustomRenderer,
+  CustomTextLayerRenderer,
   CustomTextRenderer,
   NodeOrRenderer,
   OnGetAnnotationsError,
@@ -67,6 +68,7 @@ export type PageProps = {
   children?: React.ReactNode;
   className?: ClassName;
   customRenderer?: CustomRenderer;
+  customTextLayerRenderer?: CustomTextLayerRenderer;
   customTextRenderer?: CustomTextRenderer;
   devicePixelRatio?: number;
   error?: NodeOrRenderer;
@@ -120,6 +122,7 @@ const Page: React.FC<PageProps> = function Page(props) {
     children,
     className,
     customRenderer: CustomRenderer,
+    customTextLayerRenderer,
     customTextRenderer,
     devicePixelRatio,
     error = 'Failed to load the page.',
@@ -298,6 +301,7 @@ const Page: React.FC<PageProps> = function Page(props) {
         ? {
             _className,
             canvasBackground,
+            customTextLayerRenderer,
             customTextRenderer,
             devicePixelRatio,
             onGetAnnotationsError: onGetAnnotationsErrorProps,
@@ -324,6 +328,7 @@ const Page: React.FC<PageProps> = function Page(props) {
     [
       _className,
       canvasBackground,
+      customTextLayerRenderer,
       customTextRenderer,
       devicePixelRatio,
       onGetAnnotationsErrorProps,

packages/react-pdf/src/Page/TextLayer.tsx

@@ -23,6 +23,7 @@ export default function TextLayer() {
   invariant(pageContext, 'Unable to find Page context.');
 
   const {
+    customTextLayerRenderer,
     customTextRenderer,
     onGetTextError,
     onGetTextSuccess,
@@ -206,7 +207,15 @@ export default function TextLayer() {
 
         const layerChildren = layer.querySelectorAll('[role="presentation"]');
 
-        if (customTextRenderer) {
+        if (customTextLayerRenderer) {
+          customTextLayerRenderer({
+            layerChildren,
+            layerElement: layer,
+            pageIndex,
+            pageNumber,
+            textContentItems: textContent.items,
+          });
+        } else if (customTextRenderer) {
           let index = 0;
           textContent.items.forEach((item, itemIndex) => {
             if (!isTextItem(item)) {
@@ -240,6 +249,7 @@ export default function TextLayer() {
   }
 
   useLayoutEffect(renderTextLayer, [
+    customTextLayerRenderer,
     customTextRenderer,
     onRenderError,
     onRenderSuccess,

packages/react-pdf/src/shared/types.ts

@@ -67,6 +67,14 @@ export type UnregisterPage = (pageIndex: number) => void;
 /* Complex types */
 export type CustomRenderer = React.FunctionComponent | React.ComponentClass;
 
+export type CustomTextLayerRenderer = (props: {
+  layerChildren: NodeListOf<Element>;
+  layerElement: HTMLDivElement;
+  pageIndex: number;
+  pageNumber: number;
+  textContentItems: TextContent['items'];
+}) => void;
+
 export type CustomTextRenderer = (
   props: { pageIndex: number; pageNumber: number; itemIndex: number } & TextItem,
 ) => string;
@@ -139,6 +147,7 @@ export type DocumentContextType = {
 export type PageContextType = {
   _className?: string;
   canvasBackground?: string;
+  customTextLayerRenderer?: CustomTextLayerRenderer;
   customTextRenderer?: CustomTextRenderer;
   devicePixelRatio?: number;
   onGetAnnotationsError?: OnGetAnnotationsError;