Add support for custom decorator components

- Rename customComponents to customBlockComponents

Author: timolins

example/pages/[pageId].tsx

@@ -44,7 +44,7 @@ const NotionPage = ({ blockMap }) => {
       <NotionRenderer
         blockMap={blockMap}
         fullPage
-        customComponents={{
+        customBlockComponents={{
           page: ({ blockValue, renderComponent }) => (
             <Link href={`/${blockValue.id}`}>{renderComponent()}</Link>
           )

example/pages/index.tsx

@@ -29,7 +29,7 @@ const Home = ({ blockMap }) => (
     </Head>
     <NotionRenderer
       blockMap={blockMap}
-      customComponents={{
+      customBlockComponents={{
         page: ({ blockValue, renderComponent }) => (
           <Link href={`/${blockValue.id}`}>{renderComponent()}</Link>
         )

src/block.tsx

@@ -6,51 +6,79 @@ import {
   BlockMapType,
   MapPageUrl,
   MapImageUrl,
-  CustomComponents,
-  BlockValueProp
+  CustomBlockComponents,
+  BlockValueProp,
+  CustomDecoratorComponents,
+  CustomDecoratorComponentProps
 } from "./types";
 import Asset from "./components/asset";
 import Code from "./components/code";
 import PageIcon from "./components/page-icon";
 import PageHeader from "./components/page-header";
 import { classNames, getTextContent, getListNumber } from "./utils";
 
-export const renderChildText = (properties: DecorationType[]) => {
+export const createRenderChildText = (
+  customDecoratorComponents?: CustomDecoratorComponents
+) => (properties: DecorationType[]) => {
   return properties?.map(([text, decorations], i) => {
     if (!decorations) {
       return <React.Fragment key={i}>{text}</React.Fragment>;
     }
 
     return decorations.reduceRight((element, decorator) => {
-      switch (decorator[0]) {
-        case "h":
-          return (
-            <span key={i} className={`notion-${decorator[1]}`}>
-              {element}
-            </span>
-          );
-        case "c":
-          return (
-            <code key={i} className="notion-inline-code">
-              {element}
-            </code>
-          );
-        case "b":
-          return <b key={i}>{element}</b>;
-        case "i":
-          return <em key={i}>{element}</em>;
-        case "s":
-          return <s key={i}>{element}</s>;
-        case "a":
-          return (
-            <a className="notion-link" href={decorator[1]} key={i}>
-              {element}
-            </a>
-          );
+      const renderText = () => {
+        switch (decorator[0]) {
+          case "h":
+            return (
+              <span key={i} className={`notion-${decorator[1]}`}>
+                {element}
+              </span>
+            );
+          case "c":
+            return (
+              <code key={i} className="notion-inline-code">
+                {element}
+              </code>
+            );
+          case "b":
+            return <b key={i}>{element}</b>;
+          case "i":
+            return <em key={i}>{element}</em>;
+          case "s":
+            return <s key={i}>{element}</s>;
+          case "a":
+            return (
+              <a className="notion-link" href={decorator[1]} key={i}>
+                {element}
+              </a>
+            );
+
+          default:
+            return <React.Fragment key={i}>{element}</React.Fragment>;
+        }
+      };
+
+      const CustomComponent = customDecoratorComponents?.[decorator[0]];
+
+      if (CustomComponent) {
+        const props = (decorator[1]
+          ? {
+              decoratorValue: decorator[1]
+            }
+          : {}) as CustomDecoratorComponentProps<typeof decorator[0]>;
 
-        default:
-          return <React.Fragment key={i}>{element}</React.Fragment>;
+        return (
+          <CustomComponent
+            key={i}
+            {...(props as any)}
+            renderComponent={renderText}
+          >
+            {text}
+          </CustomComponent>
+        );
       }
+
+      return renderText();
     }, <>{text}</>);
   });
 };
@@ -64,7 +92,8 @@ interface Block {
 
   fullPage?: boolean;
   hideHeader?: boolean;
-  customComponents?: CustomComponents;
+  customBlockComponents?: CustomBlockComponents;
+  customDecoratorComponents?: CustomDecoratorComponents;
 }
 
 export const Block: React.FC<Block> = props => {
@@ -77,11 +106,14 @@ export const Block: React.FC<Block> = props => {
     blockMap,
     mapPageUrl,
     mapImageUrl,
-    customComponents
+    customBlockComponents,
+    customDecoratorComponents
   } = props;
   const blockValue = block?.value;
 
   const renderComponent = () => {
+    const renderChildText = createRenderChildText(customDecoratorComponents);
+
     switch (blockValue?.type) {
       case "page":
         if (level === 0) {
@@ -468,8 +500,13 @@ export const Block: React.FC<Block> = props => {
   };
 
   // render a custom component first if passed.
-  if (customComponents && customComponents[blockValue?.type] && level !== 0) {
-    const CustomComponent = customComponents[blockValue?.type]!;
+  if (
+    customBlockComponents &&
+    customBlockComponents[blockValue?.type] &&
+    // Do not use custom component for base page block
+    level !== 0
+  ) {
+    const CustomComponent = customBlockComponents[blockValue?.type]!;
     return (
       <CustomComponent
         renderComponent={renderComponent}

src/renderer.tsx

@@ -3,7 +3,8 @@ import {
   BlockMapType,
   MapPageUrl,
   MapImageUrl,
-  CustomComponents
+  CustomBlockComponents,
+  CustomDecoratorComponents
 } from "./types";
 import { Block } from "./block";
 import { defaultMapImageUrl, defaultMapPageUrl } from "./utils";
@@ -17,7 +18,8 @@ export interface NotionRendererProps {
 
   currentId?: string;
   level?: number;
-  customComponents?: CustomComponents;
+  customBlockComponents?: CustomBlockComponents;
+  customDecoratorComponents?: CustomDecoratorComponents;
 }
 
 export const NotionRenderer: React.FC<NotionRendererProps> = ({

src/types.ts

@@ -344,16 +344,31 @@ export type MapImageUrl = (image: string, block?: BlockType) => string;
 
 export type BlockValueProp<T> = Extract<BlockValueType, { type: T }>;
 
-export interface CustomComponentProps<T extends BlockValueTypeKeys> {
+export interface CustomBlockComponentProps<T extends BlockValueTypeKeys> {
   renderComponent: () => JSX.Element | null;
-  blockValue: T extends BlockValueType
-    ? Extract<BlockValueType, { type: T }>
-    : BaseValueType;
+  blockValue: T extends BlockValueType ? BlockValueProp<T> : BaseValueType;
 }
 
-export type CustomComponent<T extends BlockValueTypeKeys> = FC<
-  CustomComponentProps<T>
->;
-export type CustomComponents = {
-  [K in BlockValueTypeKeys]?: CustomComponent<K>;
+export type CustomBlockComponents = {
+  [K in BlockValueTypeKeys]?: FC<CustomBlockComponentProps<K>>;
+};
+
+type SubDecorationSymbol = SubDecorationType[0];
+type SubDecorationValue<T extends SubDecorationSymbol> = Extract<
+  SubDecorationType,
+  [T, any]
+>[1];
+
+export type CustomDecoratorComponentProps<
+  T extends SubDecorationSymbol
+> = (SubDecorationValue<T> extends never
+  ? {}
+  : {
+      decoratorValue: SubDecorationValue<T>;
+    }) & {
+  renderComponent: () => JSX.Element | null;
+};
+
+export type CustomDecoratorComponents = {
+  [K in SubDecorationSymbol]?: FC<CustomDecoratorComponentProps<K>>;
 };