Bookmark blocks do not show captions

[Korede-TA]

trafficstars

Description

Summary: Fixed issue with bookmark blocks, please review and merge code change.

Issue: Bookmark blocks do not show captions as at v6.15.7

Resolution: localhost:3000 showing the test page, before and after code change: Investigated and wrote this code changes to support bookmark captions (patterned after how image AssetWrapper components handle captions):

diff --git a/packages/notion-types/src/block.ts b/packages/notion-types/src/block.ts
index d24cd05..61b4c45 100644
--- a/packages/notion-types/src/block.ts
+++ b/packages/notion-types/src/block.ts
@@ -171,6 +171,7 @@ export interface BookmarkBlock extends BaseBlock {
     link: Decoration[]
     title: Decoration[]
     description: Decoration[]
+    caption?: Decoration[]
   }
   format: {
     block_color?: string
diff --git a/packages/react-notion-x/src/block.tsx b/packages/react-notion-x/src/block.tsx
index 9be16f1..eb23a07 100644
--- a/packages/react-notion-x/src/block.tsx
+++ b/packages/react-notion-x/src/block.tsx
@@ -612,25 +612,31 @@ export const Block: React.FC<BlockProps> = (props) => {
         title = getTextContent(link)
       }

+      let isURL = false
       if (title) {
         if (title.startsWith('http')) {
           try {
             const url = new URL(title)
             title = url.hostname
+            isURL = true
           } catch (err) {
             // ignore invalid links
           }
         }
       }

+      const caption = (block as types.BookmarkBlock)?.properties['caption']
+
       return (
+        <>
           <div className='notion-row'>
             <components.Link
               target='_blank'
               rel='noopener noreferrer'
               className={cs(
                 'notion-bookmark',
-              block.format?.block_color && `notion-${block.format.block_color}`,
+                block.format?.block_color &&
+                  `notion-${block.format.block_color}`,
                 blockId
               )}
               href={link[0][0]}
@@ -677,6 +683,13 @@ export const Block: React.FC<BlockProps> = (props) => {
               )}
             </components.Link>
           </div>
+
+          {caption && !isURL && (
+            <figcaption className='notion-asset-caption'>
+              <Text value={caption} block={block} />
+            </figcaption>
+          )}
+        </>
       )
     }

Notion Test Page ID

ed991a2e14c441469db4dd433e129034

Testing

Tested locally by updating lib/config.ts, running via yarn dev and confirmed it works (screenshots above)

[Korede-TA]

PR on my fork passes CI: https://github.com/suruleredotdev/react-notion-x/pull/1.

Merging there to test on my site

[Korede-TA]

Bumping this again, any chance this change can be merged in this week? I've tested and got good confidence that it wont break for others. Would love to contribute to this great library!