adds ability to override components from consuming app

Author: cball

src/block.tsx

@@ -5,7 +5,9 @@ import {
   ContentValueType,
   BlockMapType,
   MapPageUrl,
-  MapImageUrl
+  MapImageUrl,
+  BlockValueTypeKeys,
+  CustomComponent
 } from "./types";
 import Asset from "./components/asset";
 import Code from "./components/code";
@@ -62,6 +64,7 @@ interface Block {
 
   fullPage?: boolean;
   hideHeader?: boolean;
+  customComponents?: Record<BlockValueTypeKeys, CustomComponent>;
 }
 
 export const Block: React.FC<Block> = props => {
@@ -73,10 +76,17 @@ export const Block: React.FC<Block> = props => {
     hideHeader,
     blockMap,
     mapPageUrl,
-    mapImageUrl
+    mapImageUrl,
+    customComponents
   } = props;
   const blockValue = block?.value;
 
+  // render a custom component first if passed.
+  if (customComponents && customComponents[blockValue?.type]) {
+    const CustomComponent = customComponents[blockValue?.type] as any;
+    return <CustomComponent blockValue={blockValue} />;
+  }
+
   switch (blockValue?.type) {
     case "page":
       if (level === 0) {

src/components/asset.tsx

@@ -34,7 +34,9 @@ const Asset: React.FC<{
       >
         <iframe
           className="notion-image-inset"
-          src={type === "figma" ? value.properties.source[0][0] : display_source}
+          src={
+            type === "figma" ? value.properties.source[0][0] : display_source
+          }
         />
       </div>
     );

src/renderer.tsx

@@ -1,5 +1,10 @@
 import React from "react";
-import { BlockMapType, MapPageUrl, MapImageUrl } from "./types";
+import {
+  BlockMapType,
+  MapPageUrl,
+  MapImageUrl,
+  CustomComponent
+} from "./types";
 import { Block } from "./block";
 import { defaultMapImageUrl, defaultMapPageUrl } from "./utils";
 
@@ -12,6 +17,7 @@ export interface NotionRendererProps {
 
   currentId?: string;
   level?: number;
+  customComponents?: Record<string, CustomComponent>;
 }
 
 export const NotionRenderer: React.FC<NotionRendererProps> = ({

src/types.ts

@@ -8,6 +8,8 @@
  *
  */
 
+import { FC } from "react";
+
 /**
  * Base properties that all blocks share.
  */
@@ -256,6 +258,13 @@ interface TableCollectionType extends BaseValueType {
   };
 }
 
+export interface TweetType extends BaseValueType {
+  type: "tweet";
+  properties: {
+    source: [string[]];
+  };
+}
+
 export type CollectionViewType = TableGalleryType | TableCollectionType;
 
 /**
@@ -282,7 +291,10 @@ export type BlockValueType =
   | CalloutValueType
   | BookmarkValueType
   | ToggleValueType
-  | CollectionValueType;
+  | CollectionValueType
+  | TweetType;
+
+export type BlockValueTypeKeys = Pick<BlockValueType, "type">["type"];
 
 export interface BlockType {
   role: string;
@@ -329,3 +341,9 @@ export interface LoadPageChunkData {
 
 export type MapPageUrl = (pageId: string) => string;
 export type MapImageUrl = (image: string) => string;
+
+export interface CustomComponentProps {
+  blockValue: BlockValueType;
+}
+
+export type CustomComponent = FC<CustomComponentProps>;