Expose page delimiter (#25)

* expose page delimiter

* checkpoint

* move some deps to dev deps

Author: abrehamgezahegn

typescript/examples/vite_basic/public/test_document.json

@@ -1,4 +1,4 @@
-import { JsonDocRenderer } from "@textcortex/jsondoc";
+import { JsonDocRenderer, PageDelimiter } from "@textcortex/jsondoc";
 import "@textcortex/jsondoc/dist/index.css";
 import { useState, useEffect } from "react";
 
@@ -37,7 +37,16 @@ const App = () => {
     >
       <div>
         <h1>JSON-DOC Renderer Development</h1>
-        <JsonDocRenderer page={testPage} theme="dark" devMode={true} />
+        <JsonDocRenderer
+          page={testPage}
+          theme="dark"
+          devMode={true}
+          components={{
+            page_delimiter: (props) => {
+              return <PageDelimiter {...props} />;
+            },
+          }}
+        />
       </div>
     </div>
   );

typescript/examples/vite_basic/src/App.tsx

@@ -57,16 +57,16 @@
     "ts-jest": "^29.3.4",
     "ts-node": "^10.9.2",
     "tsup": "^8.5.0",
-    "typescript": "^5.8.3"
+    "typescript": "^5.8.3",
+    "puppeteer": "^24.9.0",
+    "strip-json-comments": "^5.0.2",
+    "json5": "^2.2.3"
   },
   "dependencies": {
     "ajv": "^8.17.1",
     "ajv-formats": "^3.0.1",
-    "json5": "^2.2.3",
     "katex": "^0.16.22",
-    "puppeteer": "^24.9.0",
-    "react-intersection-observer": "^9.13.0",
-    "strip-json-comments": "^5.0.2"
+    "react-intersection-observer": "^9.13.0"
   },
   "peerDependencies": {
     "react": "^18.2.0",

typescript/package-lock.json

@@ -11,6 +11,21 @@ export {
 } from "./utils/json";
 
 // Export React renderer components
-export { JsonDocRenderer, BlockRenderer } from "./renderer";
+export {
+  JsonDocRenderer,
+  PageDelimiter,
+  ParagraphBlockRenderer,
+  HeadingBlockRenderer,
+  ListItemBlockRenderer,
+  CodeBlockRenderer,
+  ImageBlockRenderer,
+  TableBlockRenderer,
+  QuoteBlockRenderer,
+  DividerBlockRenderer,
+  ToDoBlockRenderer,
+  ToggleBlockRenderer,
+  ColumnListBlockRenderer,
+  EquationBlockRenderer,
+} from "./renderer";
 
 export type { JsonDocRendererProps, BlockRendererProps } from "./renderer";

typescript/package.json

@@ -12,7 +12,11 @@ import { RendererProvider } from "./context/RendererContext";
 interface JsonDocRendererProps {
   page: Page;
   className?: string;
-  components?: React.ComponentProps<typeof BlockRenderer>["components"];
+  components?: React.ComponentProps<typeof BlockRenderer>["components"] & {
+    page_delimiter: React.ComponentType<{
+      pageNumber: number;
+    }>;
+  };
   theme?: "light" | "dark";
   resolveImageUrl?: (url: string) => Promise<string>;
   devMode?: boolean;
@@ -27,6 +31,7 @@ export const JsonDocRenderer = ({
   resolveImageUrl,
   devMode = false,
   viewJson = false,
+  // PageDelimiterComponent = PageDelimiter,
 }: JsonDocRendererProps) => {
   console.log("page: ", page);
 
@@ -47,7 +52,6 @@ export const JsonDocRenderer = ({
   // return null;
   const renderedContent = (
     <div className="json-doc-page">
-      hello
       {/* Page icon */}
       {page.icon && (
         <div className="json-doc-page-icon">
@@ -83,9 +87,13 @@ export const JsonDocRenderer = ({
                   depth={0}
                   components={components}
                 />
-                {showPageDelimiter && (
+
+                {showPageDelimiter && !components?.page_delimiter && (
                   <PageDelimiter pageNumber={currentPageNum} />
                 )}
+                {showPageDelimiter && components?.page_delimiter && (
+                  <components.page_delimiter pageNumber={currentPageNum} />
+                )}
               </React.Fragment>
             );
           })}
@@ -96,7 +104,6 @@ export const JsonDocRenderer = ({
 
   return (
     <RendererProvider value={{ devMode, resolveImageUrl }}>
-      hello and hello
       <div className={`json-doc-renderer jsondoc-theme-${theme} ${className}`}>
         {viewJson ? (
           <div className="flex h-screen">

typescript/src/index.ts

@@ -2,7 +2,6 @@ import React from "react";
 
 import {
   Block,
-  BlockBase,
   Heading1Block,
   Heading2Block,
   Heading3Block,

typescript/src/renderer/JsonDocRenderer.tsx

@@ -9,16 +9,14 @@ export { CodeBlockRenderer } from "./components/blocks/CodeBlockRenderer";
 export { ImageBlockRenderer } from "./components/blocks/ImageBlockRenderer";
 export { TableBlockRenderer } from "./components/blocks/TableBlockRenderer";
 export { JsonDocRenderer } from "./JsonDocRenderer";
+export { PageDelimiter } from "./components/PageDelimiter";
 export { QuoteBlockRenderer } from "./components/blocks/QuoteBlockRenderer";
 export { DividerBlockRenderer } from "./components/blocks/DividerBlockRenderer";
 export { ToDoBlockRenderer } from "./components/blocks/ToDoBlockRenderer";
 export { ToggleBlockRenderer } from "./components/blocks/ToggleBlockRenderer";
 export { ColumnListBlockRenderer } from "./components/blocks/ColumnListBlockRenderer";
 export { EquationBlockRenderer } from "./components/blocks/EquationBlockRenderer";
 
-// Export context
-export { RendererProvider, useRenderer } from "./context";
-
 // Export types
 export type { BlockComponents } from "./components/BlockRenderer";
 export type { JsonDocRendererProps, BlockRendererProps } from "./types";