From a02d424793ad06f8185a8d55018dbecf287add40 Mon Sep 17 00:00:00 2001
From: Loi Tran <33661324+tdloi@users.noreply.github.com>
Date: Tue, 3 Nov 2020 11:21:25 +0700
Subject: [PATCH 1/3] Fix render link to other page

---
 src/block.tsx | 53 +++++++++++++++++++++++++++++++++------------------
 1 file changed, 34 insertions(+), 19 deletions(-)

diff --git a/src/block.tsx b/src/block.tsx
index 9939273..cee0a72 100644
--- a/src/block.tsx
+++ b/src/block.tsx
@@ -19,12 +19,16 @@ import { classNames, getTextContent, getListNumber } from "./utils";
 
 export const createRenderChildText = (
   customDecoratorComponents?: CustomDecoratorComponents
-) => (properties: DecorationType[]) => {
+) => (properties: DecorationType[], blocks: BlockMapType) => {
   return properties?.map(([text, decorations], i) => {
     if (!decorations) {
       return <React.Fragment key={i}>{text}</React.Fragment>;
     }
 
+    if (text === "‣" && decorations[0][0] === "p") {
+      text = blocks[decorations[0][1]].value.properties.title;
+    }
+
     return decorations.reduceRight((element, decorator) => {
       const renderText = () => {
         switch (decorator[0]) {
@@ -52,6 +56,12 @@ export const createRenderChildText = (
                 {element}
               </a>
             );
+          case "p":
+            return (
+              <a className="notion-link" href={decorator[1]} key={i}>
+                {element}
+              </a>
+            );
 
           default:
             return <React.Fragment key={i}>{element}</React.Fragment>;
@@ -171,7 +181,7 @@ export const Block: React.FC<Block> = props => {
                   )}
 
                   <div className="notion-title">
-                    {renderChildText(blockValue.properties.title)}
+                    {renderChildText(blockValue.properties.title, blockMap)}
                   </div>
 
                   {children}
@@ -191,7 +201,7 @@ export const Block: React.FC<Block> = props => {
                 </div>
               )}
               <div className="notion-page-text">
-                {renderChildText(blockValue.properties.title)}
+                {renderChildText(blockValue.properties.title, blockMap)}
               </div>
             </a>
           );
@@ -200,21 +210,21 @@ export const Block: React.FC<Block> = props => {
         if (!blockValue.properties) return null;
         return (
           <h1 className="notion-h1">
-            {renderChildText(blockValue.properties.title)}
+            {renderChildText(blockValue.properties.title, blockMap)}
           </h1>
         );
       case "sub_header":
         if (!blockValue.properties) return null;
         return (
           <h2 className="notion-h2">
-            {renderChildText(blockValue.properties.title)}
+            {renderChildText(blockValue.properties.title, blockMap)}
           </h2>
         );
       case "sub_sub_header":
         if (!blockValue.properties) return null;
         return (
           <h3 className="notion-h3">
-            {renderChildText(blockValue.properties.title)}
+            {renderChildText(blockValue.properties.title, blockMap)}
           </h3>
         );
       case "divider":
@@ -231,7 +241,7 @@ export const Block: React.FC<Block> = props => {
               blockColor && `notion-${blockColor}`
             )}
           >
-            {renderChildText(blockValue.properties.title)}
+            {renderChildText(blockValue.properties.title, blockMap)}
           </p>
         );
       case "bulleted_list":
@@ -251,14 +261,16 @@ export const Block: React.FC<Block> = props => {
           output = (
             <>
               {blockValue.properties && (
-                <li>{renderChildText(blockValue.properties.title)}</li>
+                <li>
+                  {renderChildText(blockValue.properties.title, blockMap)}
+                </li>
               )}
               {wrapList(children)}
             </>
           );
         } else {
           output = blockValue.properties ? (
-            <li>{renderChildText(blockValue.properties.title)}</li>
+            <li>{renderChildText(blockValue.properties.title, blockMap)}</li>
           ) : null;
         }
 
@@ -287,13 +299,13 @@ export const Block: React.FC<Block> = props => {
 
             {value.properties.caption && (
               <figcaption className="notion-image-caption">
-                {renderChildText(value.properties.caption)}
+                {renderChildText(value.properties.caption, blockMap)}
               </figcaption>
             )}
           </figure>
         );
       case "code": {
-        if (blockValue.properties.title) {
+        if ((blockValue.properties.title, blockMap)) {
           const content = blockValue.properties.title[0][0];
           const language = blockValue.properties.language[0][0];
           return (
@@ -326,7 +338,7 @@ export const Block: React.FC<Block> = props => {
         if (!blockValue.properties) return null;
         return (
           <blockquote className="notion-quote">
-            {renderChildText(blockValue.properties.title)}
+            {renderChildText(blockValue.properties.title, blockMap)}
           </blockquote>
         );
       case "collection_view":
@@ -337,7 +349,7 @@ export const Block: React.FC<Block> = props => {
         return (
           <div>
             <h3 className="notion-h3">
-              {renderChildText(block.collection?.title!)}
+              {renderChildText(block.collection?.title!, blockMap)}
             </h3>
 
             {collectionView?.type === "table" && (
@@ -376,7 +388,8 @@ export const Block: React.FC<Block> = props => {
                                 renderChildText(
                                   row[
                                     block.collection?.schema[gp.property]?.name!
-                                  ]
+                                  ],
+                                  blockMap
                                 )!
                               }
                             </td>
@@ -428,7 +441,7 @@ export const Block: React.FC<Block> = props => {
               <PageIcon block={block} mapImageUrl={mapImageUrl} />
             </div>
             <div className="notion-callout-text">
-              {renderChildText(blockValue.properties.title)}
+              {renderChildText(blockValue.properties.title, blockMap)}
             </div>
           </div>
         );
@@ -453,11 +466,11 @@ export const Block: React.FC<Block> = props => {
             >
               <div>
                 <div className="notion-bookmark-title">
-                  {renderChildText(title)}
+                  {renderChildText(title, blockMap)}
                 </div>
                 {description && (
                   <div className="notion-bookmark-description">
-                    {renderChildText(description)}
+                    {renderChildText(description, blockMap)}
                   </div>
                 )}
 
@@ -465,7 +478,7 @@ export const Block: React.FC<Block> = props => {
                   {bookmark_icon && (
                     <img src={bookmark_icon} alt={getTextContent(title)} />
                   )}
-                  <div>{renderChildText(link)}</div>
+                  <div>{renderChildText(link, blockMap)}</div>
                 </div>
               </div>
               {bookmark_cover && (
@@ -479,7 +492,9 @@ export const Block: React.FC<Block> = props => {
       case "toggle":
         return (
           <details className="notion-toggle">
-            <summary>{renderChildText(blockValue.properties.title)}</summary>
+            <summary>
+              {renderChildText(blockValue.properties.title, blockMap)}
+            </summary>
             <div>{children}</div>
           </details>
         );

From a19a243755aca0ce395ff151b496b2daa61109f3 Mon Sep 17 00:00:00 2001
From: Loi Tran <33661324+tdloi@users.noreply.github.com>
Date: Thu, 19 Nov 2020 21:05:05 +0700
Subject: [PATCH 2/3] Fix blockquote not render new line

---
 src/block.tsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/block.tsx b/src/block.tsx
index cee0a72..e4b2a3f 100644
--- a/src/block.tsx
+++ b/src/block.tsx
@@ -22,7 +22,15 @@ export const createRenderChildText = (
 ) => (properties: DecorationType[], blocks: BlockMapType) => {
   return properties?.map(([text, decorations], i) => {
     if (!decorations) {
-      return <React.Fragment key={i}>{text}</React.Fragment>;
+      return (
+        <React.Fragment key={i}>
+          {text.split(/(\n)/).map((t, index) => (
+            <React.Fragment key={index}>
+              {t !== "\n" ? t : <br />}
+            </React.Fragment>
+          ))}
+        </React.Fragment>
+      );
     }
 
     if (text === "‣" && decorations[0][0] === "p") {

From 2e6b46ad11f63d3fd32effcaaec687bb932c33f2 Mon Sep 17 00:00:00 2001
From: Loi Tran <33661324+tdloi@users.noreply.github.com>
Date: Thu, 19 Nov 2020 22:41:13 +0700
Subject: [PATCH 3/3] Fallback empty for empty page block in mention page

---
 src/block.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/block.tsx b/src/block.tsx
index e4b2a3f..ee8ee4e 100644
--- a/src/block.tsx
+++ b/src/block.tsx
@@ -34,7 +34,7 @@ export const createRenderChildText = (
     }
 
     if (text === "‣" && decorations[0][0] === "p") {
-      text = blocks[decorations[0][1]].value.properties.title;
+      text = blocks[decorations[0][1]]?.value?.properties?.title ?? "";
     }
 
     return decorations.reduceRight((element, decorator) => {