page override wip (#39)

* page override wip

* cleanup

---------

Co-authored-by: Onur <[email protected]>

Author: abrehamgezahegn

examples/vite_basic/src/App.tsx

@@ -18,11 +18,10 @@ const App = () => {
     handleFileChange,
   } = useFileLoader(AVAILABLE_FILES[0]);
 
-  console.log("test page ", testPage);
-
-  if (testPage) {
-    testPage.children = [undefined];
-  }
+  // uncomment to trigger error in renderer
+  // if (testPage) {
+  //   testPage.children = [undefined];
+  // }
 
   // Get backrefs for the currently selected file
   const currentBackrefs = selectedFile?.backrefs || [];
@@ -64,8 +63,6 @@ const App = () => {
     );
   }
 
-  console.log("showBackrefs ", currentBackrefs);
-
   return (
     <div
       style={{
@@ -112,6 +109,10 @@ const App = () => {
                 return <PageDelimiter {...props} />;
               },
             }}
+            pageOverride={{
+              pageNum: 1,
+              component: <p>hehe</p>,
+            }}
           />
         )}
       </div>

typescript/src/renderer/JsonDocRenderer.tsx

@@ -22,6 +22,10 @@ interface JsonDocRendererProps {
   viewJson?: boolean;
   backrefs?: Backref[];
   onError?: (error: Error, errorInfo: React.ErrorInfo) => void;
+  pageOverride?: {
+    pageNum: number;
+    component: React.ReactNode;
+  };
 }
 
 export const JsonDocRenderer = ({
@@ -34,8 +38,8 @@ export const JsonDocRenderer = ({
   viewJson = false,
   backrefs = [],
   onError,
+  pageOverride,
 }: JsonDocRendererProps) => {
-  console.log("theme: ", theme);
   return (
     <div
       className={`jsondoc-theme-${theme}`}
@@ -50,6 +54,7 @@ export const JsonDocRenderer = ({
           resolveImageUrl={resolveImageUrl}
           viewJson={viewJson}
           backrefs={backrefs}
+          pageOverride={pageOverride}
         />
       </GlobalErrorBoundary>
     </div>

typescript/src/renderer/components/RendererContainer.tsx

@@ -24,6 +24,10 @@ interface RendererContainerProps {
   resolveImageUrl?: (url: string) => Promise<string>;
   viewJson?: boolean;
   backrefs?: Backref[];
+  pageOverride?: {
+    pageNum: number;
+    component: React.ReactNode;
+  };
 }
 
 export const RendererContainer: React.FC<RendererContainerProps> = ({
@@ -34,6 +38,7 @@ export const RendererContainer: React.FC<RendererContainerProps> = ({
   resolveImageUrl,
   viewJson = false,
   backrefs = [],
+  pageOverride,
 }) => {
   // Use the modular hooks for highlight management
   const { highlightCount, currentActiveIndex, navigateToHighlight } =
@@ -78,6 +83,30 @@ export const RendererContainer: React.FC<RendererContainerProps> = ({
                 ? (page.children[index + 1]?.metadata as any)?.origin?.page_num
                 : null;
 
+            // Check if this page should be replaced with override component
+            if (pageOverride && currentPageNum === pageOverride.pageNum) {
+              // Skip rendering blocks for this page and show override instead
+              const isLastBlockOfPage =
+                nextPageNum !== currentPageNum ||
+                index === page.children.length - 1;
+              if (isLastBlockOfPage) {
+                return (
+                  <React.Fragment key={`page-override-${currentPageNum}`}>
+                    {pageOverride.component}
+                    {/* Still show page delimiter after override */}
+                    {!components?.page_delimiter && (
+                      <PageDelimiter pageNumber={currentPageNum} />
+                    )}
+                    {components?.page_delimiter && (
+                      <components.page_delimiter pageNumber={currentPageNum} />
+                    )}
+                  </React.Fragment>
+                );
+              }
+              // Skip other blocks of the same page
+              return null;
+            }
+
             // Show delimiter after the last block of each page
             const showPageDelimiter =
               currentPageNum &&