Renderer improvements

typescript/package.json

@@ -68,7 +68,7 @@
     "json5": "^2.2.3",
     "katex": "^0.16.22",
     "puppeteer": "^24.9.0",
-    "react-intersection-observer": "^9.16.0",
+    "react-intersection-observer": "^9.13.0",
     "strip-json-comments": "^5.0.2"
   },
   "peerDependencies": {

typescript/src/examples/index.tsx

@@ -6,7 +6,7 @@ import { HeadingBlockRenderer } from "@/renderer/components/blocks/HeadingBlockR
 
 import { JsonDocRenderer } from "../renderer/JsonDocRenderer";
 
-import testPage from "./testJsonDocs/ex1_success.json";
+import testPage from "./testJsonDocs/test_document.json";
 
 const App = () => {
   return (
@@ -23,12 +23,12 @@ const App = () => {
       <JsonDocRenderer
         page={testPage}
         theme="dark"
+        devMode={true}
         components={{
           heading_1: (props) => {
             return <HeadingBlockRenderer {...props} />;
           },
           paragraph: (props) => <ParagraphBlockRenderer {...props} />,
-          // paragraph: (props) =>
         }}
       />
     </div>

typescript/src/renderer/JsonDocRenderer.tsx

@@ -2,13 +2,18 @@ import "./styles/index.css";
 import React from "react";
 
 import { BlockRenderer } from "./components/BlockRenderer";
+import { PageDelimiter } from "./components/PageDelimiter";
+import { JsonViewPanel } from "./components/dev/JsonViewPanel";
+import { RendererProvider } from "./context/RendererContext";
 
 interface JsonDocRendererProps {
   page: any;
   className?: string;
   components?: React.ComponentProps<typeof BlockRenderer>["components"];
   theme?: "light" | "dark";
   resolveImageUrl?: (url: string) => Promise<string>;
+  devMode?: boolean;
+  viewJson?: boolean;
 }
 
 export const JsonDocRenderer = ({
@@ -17,39 +22,72 @@ export const JsonDocRenderer = ({
   components,
   theme = "light",
   resolveImageUrl,
+  devMode = false,
+  viewJson = false,
 }: JsonDocRendererProps) => {
-  return (
-    <div className={`json-doc-renderer jsondoc-theme-${theme} ${className}`}>
-      <div className="json-doc-page">
-        {/* Page icon */}
-        {page.icon && (
-          <div className="json-doc-page-icon">
-            {page.icon.type === "emoji" && page.icon.emoji}
-          </div>
-        )}
+  const renderedContent = (
+    <div className="json-doc-page">
+      {/* Page icon */}
+      {page.icon && (
+        <div className="json-doc-page-icon">
+          {page.icon.type === "emoji" && page.icon.emoji}
+        </div>
+      )}
 
-        {/* Page title */}
-        {page.properties?.title && (
-          <h1 className="json-doc-page-title">
-            {page.properties.title.title?.[0]?.plain_text || "Untitled"}
-          </h1>
-        )}
+      {/* Page title */}
+      {page.properties?.title && (
+        <h1 className="json-doc-page-title">
+          {page.properties.title.title?.[0]?.plain_text || "Untitled"}
+        </h1>
+      )}
+
+      {/* Page children blocks */}
+      {page.children && page.children.length > 0 && (
+        <div className="json-doc-page-content">
+          {page.children.map((block: any, index: number) => {
+            const currentPageNum = block.metadata?.origin?.page_num;
+            const nextPageNum =
+              index < page.children.length - 1
+                ? page.children[index + 1]?.metadata?.origin?.page_num
+                : null;
+
+            // Show delimiter after the last block of each page
+            const showPageDelimiter =
+              currentPageNum && 
+              (nextPageNum !== currentPageNum || index === page.children.length - 1);
 
-        {/* Page children blocks */}
-        {page.children && page.children.length > 0 && (
-          <div className="json-doc-page-content">
-            {page.children.map((block: any, index: number) => (
-              <BlockRenderer
-                key={block.id || index}
-                block={block}
-                depth={0}
-                components={components}
-                resolveImageUrl={resolveImageUrl}
-              />
-            ))}
+            return (
+              <React.Fragment key={block.id || index}>
+                <BlockRenderer
+                  block={block}
+                  depth={0}
+                  components={components}
+                />
+                {showPageDelimiter && (
+                  <PageDelimiter pageNumber={currentPageNum} />
+                )}
+              </React.Fragment>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+
+  return (
+    <RendererProvider value={{ devMode, resolveImageUrl }}>
+      <div className={`json-doc-renderer jsondoc-theme-${theme} ${className}`}>
+        {viewJson ? (
+          <div className="flex h-screen">
+            <div className="w-1/2 overflow-y-auto">
+              {renderedContent}
+            </div>
+            <JsonViewPanel data={page} />
           </div>
+        ) : (
+          renderedContent
         )}
       </div>
-    </div>
+    </RendererProvider>
   );
 };

typescript/src/renderer/components/BlockRenderer.tsx

@@ -1,5 +1,8 @@
 import React from "react";
 
+import { useRenderer } from "../context/RendererContext";
+
+import { DevWrapper } from "./dev/DevWrapper";
 import { ParagraphBlockRenderer } from "./blocks/ParagraphBlockRenderer";
 import { HeadingBlockRenderer } from "./blocks/HeadingBlockRenderer";
 import { ListItemBlockRenderer } from "./blocks/ListItemBlockRenderer";
@@ -56,104 +59,113 @@ interface BlockRendererProps {
   block: any;
   depth?: number;
   components?: BlockComponents;
-  resolveImageUrl?: (url: string) => Promise<string>;
 }
 
 export const BlockRenderer: React.FC<BlockRendererProps> = ({
   block,
   depth = 0,
   components,
-  resolveImageUrl,
 }) => {
+  const { devMode = false } = useRenderer();
   const commonProps = { block, depth, components };
 
+  // Helper function to wrap component with DevWrapper if devMode is enabled
+  const wrapWithDev = (component: React.ReactElement) => {
+    if (devMode) {
+      return <DevWrapper block={block}>{component}</DevWrapper>;
+    }
+    return component;
+  };
+
   // Paragraph block
   if (block?.type === "paragraph") {
     const ParagraphComponent = components?.paragraph || ParagraphBlockRenderer;
-    return <ParagraphComponent {...commonProps} />;
+    return wrapWithDev(<ParagraphComponent {...commonProps} />);
   }
 
   // Heading blocks
   if (block?.type === "heading_1") {
     const HeadingComponent = components?.heading_1 || HeadingBlockRenderer;
-    return <HeadingComponent {...commonProps} level={1} />;
+    return wrapWithDev(<HeadingComponent {...commonProps} level={1} />);
   }
   if (block?.type === "heading_2") {
     const HeadingComponent = components?.heading_2 || HeadingBlockRenderer;
-    return <HeadingComponent {...commonProps} level={2} />;
+    return wrapWithDev(<HeadingComponent {...commonProps} level={2} />);
   }
   if (block?.type === "heading_3") {
     const HeadingComponent = components?.heading_3 || HeadingBlockRenderer;
-    return <HeadingComponent {...commonProps} level={3} />;
+    return wrapWithDev(<HeadingComponent {...commonProps} level={3} />);
   }
 
   // List item blocks
   if (block?.type === "bulleted_list_item") {
     const BulletedListItemComponent =
       components?.bulleted_list_item || ListItemBlockRenderer;
-    return <BulletedListItemComponent {...commonProps} type="bulleted" />;
+    return wrapWithDev(
+      <BulletedListItemComponent {...commonProps} type="bulleted" />
+    );
   }
   if (block?.type === "numbered_list_item") {
     const NumberedListItemComponent =
       components?.numbered_list_item || ListItemBlockRenderer;
-    return <NumberedListItemComponent {...commonProps} type="numbered" />;
+    return wrapWithDev(
+      <NumberedListItemComponent {...commonProps} type="numbered" />
+    );
   }
 
   // Code block
   if (block?.type === "code") {
     const CodeComponent = components?.code || CodeBlockRenderer;
-    return <CodeComponent {...commonProps} />;
+    return wrapWithDev(<CodeComponent {...commonProps} />);
   }
 
   // Image block
   if (block?.type === "image") {
     const ImageComponent = components?.image || ImageBlockRenderer;
-    return (
-      <ImageComponent {...commonProps} resolveImageUrl={resolveImageUrl} />
-    );
+    return wrapWithDev(<ImageComponent {...commonProps} />);
   }
 
   // Table blocks
   if (block?.type === "table") {
     const TableComponent = components?.table || TableBlockRenderer;
-    return <TableComponent {...commonProps} />;
+    return wrapWithDev(<TableComponent {...commonProps} />);
   }
 
   // Quote block
   if (block?.type === "quote") {
     const QuoteComponent = components?.quote || QuoteBlockRenderer;
-    return <QuoteComponent {...commonProps} />;
+    return wrapWithDev(<QuoteComponent {...commonProps} />);
   }
 
   // Divider block
   if (block?.type === "divider") {
     const DividerComponent = components?.divider || DividerBlockRenderer;
-    return <DividerComponent {...commonProps} />;
+    return wrapWithDev(<DividerComponent {...commonProps} />);
   }
 
   // To-do block
   if (block?.type === "to_do") {
     const ToDoComponent = components?.to_do || ToDoBlockRenderer;
-    return <ToDoComponent {...commonProps} />;
+    return wrapWithDev(<ToDoComponent {...commonProps} />);
   }
 
   // Toggle block
   if (block?.type === "toggle") {
     const ToggleComponent = components?.toggle || ToggleBlockRenderer;
-    return <ToggleComponent {...commonProps} />;
+    return wrapWithDev(<ToggleComponent {...commonProps} />);
   }
 
   // Column list and column blocks
   if (block?.type === "column_list") {
     const ColumnListComponent =
       components?.column_list || ColumnListBlockRenderer;
-    return <ColumnListComponent {...commonProps} />;
+    return wrapWithDev(<ColumnListComponent {...commonProps} />);
   }
 
   // Equation block
   if (block?.type === "equation") {
     const EquationComponent = components?.equation || EquationBlockRenderer;
-    return <EquationComponent {...commonProps} />;
+    return wrapWithDev(<EquationComponent {...commonProps} />);
   }
 
   // Fallback for unsupported block types

typescript/src/renderer/components/PageDelimiter.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+interface PageDelimiterProps {
+  pageNumber: number;
+  className?: string;
+}
+
+export const PageDelimiter: React.FC<PageDelimiterProps> = ({
+  pageNumber,
+  className,
+}) => {
+  return (
+    <div className={`jsondoc-page-delimiter ${className || ""}`.trim()}>
+      <div className="jsondoc-page-delimiter-line">
+        <span className="jsondoc-page-number">
+          Page {pageNumber}
+        </span>
+      </div>
+    </div>
+  );
+};

typescript/src/renderer/components/blocks/ColumnListBlockRenderer.tsx

@@ -11,7 +11,13 @@ interface ColumnListBlockRendererProps
 
 export const ColumnListBlockRenderer: React.FC<
   ColumnListBlockRendererProps
-> = ({ block, depth = 0, className, components, ...props }) => {
+> = ({
+  block,
+  depth = 0,
+  className,
+  components,
+  ...props
+}) => {
   return (
     <div
       {...props}