added custom renderer for entire layer

Author: Ishan Kaul

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,

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,

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;