From 6cdd2e7655f4fe42cf47fbe52f969689d421d6c2 Mon Sep 17 00:00:00 2001
From: saitoukun <saitoukun13@gmail.com>
Date: Sat, 4 Jul 2020 17:09:50 +0900
Subject: [PATCH] fix BookmarkValueType

---
 src/block.tsx | 48 +++++++++++++++++++++++++++++++-----------------
 src/types.ts  |  6 +++---
 2 files changed, 34 insertions(+), 20 deletions(-)

diff --git a/src/block.tsx b/src/block.tsx
index 7d5b643..2c0f236 100644
--- a/src/block.tsx
+++ b/src/block.tsx
@@ -285,6 +285,13 @@ export const Block: React.FC<Block> = props => {
         </div>
       );
     case "bookmark":
+      const link = blockValue.properties.link
+      const title = blockValue.properties.title ?? link
+      const description = blockValue.properties.description
+      const block_color = blockValue.format?.block_color
+      const bookmark_icon = blockValue.format?.bookmark_icon
+      const bookmark_cover = blockValue.format?.bookmark_cover
+          
       return (
         <div className="notion-row">
           <a
@@ -292,32 +299,39 @@ export const Block: React.FC<Block> = props => {
             rel="noopener noreferrer"
             className={classNames(
               "notion-bookmark",
-              blockValue.format.block_color &&
-                `notion-${blockValue.format.block_color}`
+              block_color &&
+                `notion-${block_color}`
             )}
-            href={blockValue.properties.link[0][0]}
+            href={link[0][0]}
           >
             <div>
               <div className="notion-bookmark-title">
-                {renderChildText(blockValue.properties.title)}
-              </div>
-              <div className="notion-bookmark-description">
-                {renderChildText(blockValue.properties.description)}
+                {renderChildText(title)}
               </div>
+              {description && (
+                <div className="notion-bookmark-description">
+                  {renderChildText(description)}
+                </div>
+              )}
+              
               <div className="notion-bookmark-link">
+                {bookmark_icon && (
+                  <img
+                  src={bookmark_icon}
+                  alt={getTextContent(title)}
+                  />
+                )}
+                <div>{renderChildText(link)}</div>
+              </div>
+            </div>
+            {bookmark_cover && (
+              <div className="notion-bookmark-image">
                 <img
-                  src={blockValue.format.bookmark_icon}
-                  alt={getTextContent(blockValue.properties.title)}
+                  src={bookmark_cover}
+                  alt={getTextContent(title)}
                 />
-                <div>{renderChildText(blockValue.properties.link)}</div>
               </div>
-            </div>
-            <div className="notion-bookmark-image">
-              <img
-                src={blockValue.format.bookmark_cover}
-                alt={getTextContent(blockValue.properties.title)}
-              />
-            </div>
+            )}
           </a>
         </div>
       );
diff --git a/src/types.ts b/src/types.ts
index e82f0ba..61a341f 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -110,10 +110,10 @@ interface BookmarkValueType extends BaseValueType {
   type: "bookmark";
   properties: {
     link: DecorationType[];
-    title: DecorationType[];
-    description: DecorationType[];
+    title?: DecorationType[];
+    description?: DecorationType[];
   };
-  format: {
+  format?: {
     block_color?: string;
     bookmark_icon: string;
     bookmark_cover: string;