add json viewer

Author: abrehamgezahegn

typescript/src/renderer/JsonDocRenderer.tsx

@@ -3,6 +3,7 @@ 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 {
@@ -12,6 +13,7 @@ interface JsonDocRendererProps {
   theme?: "light" | "dark";
   resolveImageUrl?: (url: string) => Promise<string>;
   devMode?: boolean;
+  viewJson?: boolean;
 }
 
 export const JsonDocRenderer = ({
@@ -21,56 +23,70 @@ export const JsonDocRenderer = ({
   theme = "light",
   resolveImageUrl,
   devMode = false,
+  viewJson = false,
 }: JsonDocRendererProps) => {
-  return (
-    <RendererProvider value={{ devMode, resolveImageUrl }}>
-      <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;
+      {/* 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);
+            // Show delimiter after the last block of each page
+            const showPageDelimiter =
+              currentPageNum && 
+              (nextPageNum !== currentPageNum || index === page.children.length - 1);
 
-                return (
-                  <React.Fragment key={block.id || index}>
-                    <BlockRenderer
-                      block={block}
-                      depth={0}
-                      components={components}
-                    />
-                    {showPageDelimiter && (
-                      <PageDelimiter pageNumber={currentPageNum} />
-                    )}
-                  </React.Fragment>
-                );
-              })}
-            </div>
-          )}
+            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>
     </RendererProvider>
   );

typescript/src/renderer/components/dev/JsonViewPanel.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+
+interface JsonViewPanelProps {
+  data: any;
+  title?: string;
+}
+
+export const JsonViewPanel: React.FC<JsonViewPanelProps> = ({ 
+  data, 
+  title = "Raw JSON Data" 
+}) => {
+  return (
+    <div className="w-1/2 overflow-y-auto bg-gray-50 dark:bg-gray-900">
+      <div className="p-4">
+        <h4 className="text-sm font-medium text-gray-900 dark:text-gray-100 mb-3 sticky top-0 bg-gray-50 dark:bg-gray-900 pb-2">
+          {title}
+        </h4>
+        <pre className="text-xs text-gray-700 dark:text-gray-300 whitespace-pre-wrap break-words bg-white dark:bg-gray-800 p-4 rounded-md border border-gray-200 dark:border-gray-700 overflow-x-auto">
+          {data ? JSON.stringify(data, null, 2) : 'No data available'}
+        </pre>
+      </div>
+    </div>
+  );
+};