type block renderers

image and rich text wip

Author: abrehamgezahegn

typescript/src/renderer/JsonDocRenderer.tsx

@@ -1,13 +1,16 @@
 import "./styles/index.css";
-import React from "react";
+import React, { useEffect } from "react";
+
+import { Page } from "@/models/generated";
+// import { validateAgainstSchema } from "@/validation/validator";
 
 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;
+  page: Page;
   className?: string;
   components?: React.ComponentProps<typeof BlockRenderer>["components"];
   theme?: "light" | "dark";
@@ -25,30 +28,46 @@ export const JsonDocRenderer = ({
   devMode = false,
   viewJson = false,
 }: JsonDocRendererProps) => {
+  console.log("page: ", page);
+
+  const loadAndValidate = async () => {
+    // const response = await fetch("/schema/page/page_schema.json"); // Updated path
+    // const data = await response.json();
+    // console.log("schema: ", data);
+    // validateAgainstSchema(
+    //   page,
+    // )
+  };
+
+  useEffect(() => {
+    console.log("in jsondocrendererrrr");
+    loadAndValidate();
+  }, []);
+
+  // return null;
   const renderedContent = (
     <div className="json-doc-page">
+      hello
       {/* 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 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
+                ? (page.children[index + 1]?.metadata as any)?.origin?.page_num
                 : null;
 
             // Show delimiter after the last block of each page
@@ -77,6 +96,7 @@ 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/renderer/components/BlockRenderer.tsx

@@ -1,5 +1,25 @@
 import React from "react";
 
+import {
+  Block,
+  BlockBase,
+  Heading1Block,
+  Heading2Block,
+  Heading3Block,
+  ParagraphBlock,
+  BulletedListItemBlock,
+  NumberedListItemBlock,
+  CodeBlock,
+  ImageBlock,
+  TableBlock,
+  QuoteBlock,
+  DividerBlock,
+  ToDoBlock,
+  ToggleBlock,
+  ColumnListBlock,
+  EquationBlock,
+} from "@/models/generated";
+
 import { useRenderer } from "../context/RendererContext";
 
 import { DevWrapper } from "./dev/DevWrapper";
@@ -56,7 +76,7 @@ export type BlockComponents = {
 };
 
 interface BlockRendererProps {
-  block: any;
+  block: Block;
   depth?: number;
   components?: BlockComponents;
 }
@@ -80,92 +100,127 @@ export const BlockRenderer: React.FC<BlockRendererProps> = ({
   // Paragraph block
   if (block?.type === "paragraph") {
     const ParagraphComponent = components?.paragraph || ParagraphBlockRenderer;
-    return wrapWithDev(<ParagraphComponent {...commonProps} />);
+    return wrapWithDev(
+      <ParagraphComponent {...commonProps} block={block as ParagraphBlock} />
+    );
   }
 
   // Heading blocks
-  if (block?.type === "heading_1") {
+  if (
+    block?.type === "heading_1" ||
+    block?.type === "heading_2" ||
+    block?.type === "heading_3"
+  ) {
     const HeadingComponent = components?.heading_1 || HeadingBlockRenderer;
-    return wrapWithDev(<HeadingComponent {...commonProps} level={1} />);
-  }
-  if (block?.type === "heading_2") {
-    const HeadingComponent = components?.heading_2 || HeadingBlockRenderer;
-    return wrapWithDev(<HeadingComponent {...commonProps} level={2} />);
-  }
-  if (block?.type === "heading_3") {
-    const HeadingComponent = components?.heading_3 || HeadingBlockRenderer;
-    return wrapWithDev(<HeadingComponent {...commonProps} level={3} />);
+    return wrapWithDev(
+      <HeadingComponent
+        {...commonProps}
+        block={block as Heading1Block | Heading2Block | Heading3Block}
+      />
+    );
   }
+  // if (block?.type === "heading_2") {
+  //   const HeadingComponent = components?.heading_2 || HeadingBlockRenderer;
+  //   return wrapWithDev(<HeadingComponent {...commonProps} level={2} />);
+  // }
+  // if (block?.type === "heading_3") {
+  //   const HeadingComponent = components?.heading_3 || HeadingBlockRenderer;
+  //   return wrapWithDev(<HeadingComponent {...commonProps} level={3} />);
+  // }
 
   // List item blocks
   if (block?.type === "bulleted_list_item") {
     const BulletedListItemComponent =
       components?.bulleted_list_item || ListItemBlockRenderer;
     return wrapWithDev(
-      <BulletedListItemComponent {...commonProps} type="bulleted" />
+      <BulletedListItemComponent
+        {...commonProps}
+        block={block as BulletedListItemBlock}
+      />
     );
   }
   if (block?.type === "numbered_list_item") {
     const NumberedListItemComponent =
       components?.numbered_list_item || ListItemBlockRenderer;
     return wrapWithDev(
-      <NumberedListItemComponent {...commonProps} type="numbered" />
+      <NumberedListItemComponent
+        {...commonProps}
+        block={block as NumberedListItemBlock}
+      />
     );
   }
 
   // Code block
   if (block?.type === "code") {
     const CodeComponent = components?.code || CodeBlockRenderer;
-    return wrapWithDev(<CodeComponent {...commonProps} />);
+    return wrapWithDev(
+      <CodeComponent {...commonProps} block={block as CodeBlock} />
+    );
   }
 
   // Image block
   if (block?.type === "image") {
     const ImageComponent = components?.image || ImageBlockRenderer;
-    return wrapWithDev(<ImageComponent {...commonProps} />);
+    return wrapWithDev(
+      <ImageComponent {...commonProps} block={block as ImageBlock} />
+    );
   }
 
   // Table blocks
   if (block?.type === "table") {
     const TableComponent = components?.table || TableBlockRenderer;
-    return wrapWithDev(<TableComponent {...commonProps} />);
+    return wrapWithDev(
+      <TableComponent {...commonProps} block={block as TableBlock} />
+    );
   }
 
   // Quote block
   if (block?.type === "quote") {
     const QuoteComponent = components?.quote || QuoteBlockRenderer;
-    return wrapWithDev(<QuoteComponent {...commonProps} />);
+    return wrapWithDev(
+      <QuoteComponent {...commonProps} block={block as QuoteBlock} />
+    );
   }
 
   // Divider block
   if (block?.type === "divider") {
     const DividerComponent = components?.divider || DividerBlockRenderer;
-    return wrapWithDev(<DividerComponent {...commonProps} />);
+    return wrapWithDev(
+      <DividerComponent {...commonProps} block={block as DividerBlock} />
+    );
   }
 
   // To-do block
   if (block?.type === "to_do") {
     const ToDoComponent = components?.to_do || ToDoBlockRenderer;
-    return wrapWithDev(<ToDoComponent {...commonProps} />);
+    return wrapWithDev(
+      <ToDoComponent {...commonProps} block={block as ToDoBlock} />
+    );
   }
 
   // Toggle block
   if (block?.type === "toggle") {
     const ToggleComponent = components?.toggle || ToggleBlockRenderer;
-    return wrapWithDev(<ToggleComponent {...commonProps} />);
+    return wrapWithDev(
+      <ToggleComponent {...commonProps} block={block as ToggleBlock} />
+    );
   }
 
   // Column list and column blocks
   if (block?.type === "column_list") {
     const ColumnListComponent =
       components?.column_list || ColumnListBlockRenderer;
-    return wrapWithDev(<ColumnListComponent {...commonProps} />);
+    return wrapWithDev(
+      <ColumnListComponent {...commonProps} block={block as ColumnListBlock} />
+    );
   }
 
   // Equation block
   if (block?.type === "equation") {
     const EquationComponent = components?.equation || EquationBlockRenderer;
-    return wrapWithDev(<EquationComponent {...commonProps} />);
+    return wrapWithDev(
+      <EquationComponent {...commonProps} block={block as EquationBlock} />
+    );
   }
 
   // Fallback for unsupported block types

typescript/src/renderer/components/RichTextRenderer.tsx

@@ -1,5 +1,7 @@
 import React from "react";
 
+// import { RichText } from "@/models/generated";
+
 interface RichTextRendererProps {
   richText: any[];
 }
@@ -13,7 +15,7 @@ export const RichTextRenderer: React.FC<RichTextRendererProps> = ({
 
   return (
     <>
-      {richText.map((item: any, index: number) => {
+      {richText.map((item, index: number) => {
         const key = `rich-text-${index}`;
 
         if (item?.type === "text") {

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

@@ -1,19 +1,16 @@
 import React from "react";
 
+import { CodeBlock } from "@/models/generated";
+
 import { RichTextRenderer } from "../RichTextRenderer";
-import { BlockRenderer } from "../BlockRenderer";
 
 interface CodeBlockRendererProps extends React.HTMLAttributes<HTMLDivElement> {
-  block: any;
-  depth?: number;
-  components?: React.ComponentProps<typeof BlockRenderer>["components"];
+  block: CodeBlock;
 }
 
 export const CodeBlockRenderer: React.FC<CodeBlockRendererProps> = ({
   block,
-  depth = 0,
   className,
-  components,
   ...props
 }) => {
   const codeData = block.code;
@@ -39,22 +36,7 @@ export const CodeBlockRenderer: React.FC<CodeBlockRendererProps> = ({
         </div>
       </div>
 
-      {/* Render children blocks recursively */}
-      {block.children && block.children.length > 0 && (
-        <div
-          className="notion-block-children"
-          style={{ marginLeft: `${depth * 24}px` }}
-        >
-          {block.children.map((child: any, index: number) => (
-            <BlockRenderer
-              key={child.id || index}
-              block={child}
-              depth={depth + 1}
-              components={components}
-            />
-          ))}
-        </div>
-      )}
+      {/* code block can't have children */}
     </div>
   );
 };

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

@@ -1,10 +1,12 @@
 import React from "react";
 
+import { ColumnListBlock } from "@/models/generated";
+
 import { BlockRenderer } from "../BlockRenderer";
 
 interface ColumnListBlockRendererProps
   extends React.HTMLAttributes<HTMLDivElement> {
-  block: any;
+  block: ColumnListBlock;
   depth?: number;
   components?: React.ComponentProps<typeof BlockRenderer>["components"];
 }
@@ -22,7 +24,7 @@ export const ColumnListBlockRenderer: React.FC<
         className="notion-column-list"
         style={{ display: "flex", gap: "16px" }}
       >
-        {block.children?.map((child: any, index: number) => {
+        {block.children?.map((child, index: number) => {
           if (child?.type === "column") {
             return (
               <div

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

@@ -1,19 +1,19 @@
 import React from "react";
 
+import { DividerBlock } from "@/models/generated";
+
 import { BlockRenderer } from "../BlockRenderer";
 
 interface DividerBlockRendererProps
   extends React.HTMLAttributes<HTMLDivElement> {
-  block: any;
+  block: DividerBlock;
   depth?: number;
   components?: React.ComponentProps<typeof BlockRenderer>["components"];
 }
 
 export const DividerBlockRenderer: React.FC<DividerBlockRendererProps> = ({
   block,
-  depth = 0,
   className,
-  components,
   ...props
 }) => {
   return (
@@ -25,23 +25,6 @@ export const DividerBlockRenderer: React.FC<DividerBlockRendererProps> = ({
       <div className="notion-cursor-default">
         <div role="separator"></div>
       </div>
-
-      {/* Render children blocks recursively */}
-      {block.children && block.children.length > 0 && (
-        <div
-          className="notion-block-children"
-          style={{ marginLeft: `${depth * 24}px` }}
-        >
-          {block.children.map((child: any, index: number) => (
-            <BlockRenderer
-              key={child.id || index}
-              block={child}
-              depth={depth + 1}
-              components={components}
-            />
-          ))}
-        </div>
-      )}
     </div>
   );
 };