@@ -285,39 +285,53 @@ export const Block: React.FC<Block> = props => {
285285 </ div >
286286 ) ;
287287 case "bookmark" :
288+ const link = blockValue . properties . link
289+ const title = blockValue . properties . title ?? link
290+ const description = blockValue . properties . description
291+ const block_color = blockValue . format ?. block_color
292+ const bookmark_icon = blockValue . format ?. bookmark_icon
293+ const bookmark_cover = blockValue . format ?. bookmark_cover
294+
288295 return (
289296 < div className = "notion-row" >
290297 < a
291298 target = "_blank"
292299 rel = "noopener noreferrer"
293300 className = { classNames (
294301 "notion-bookmark" ,
295- blockValue . format . block_color &&
296- `notion-${ blockValue . format . block_color } `
302+ block_color &&
303+ `notion-${ block_color } `
297304 ) }
298- href = { blockValue . properties . link [ 0 ] [ 0 ] }
305+ href = { link [ 0 ] [ 0 ] }
299306 >
300307 < div >
301308 < div className = "notion-bookmark-title" >
302- { renderChildText ( blockValue . properties . title ) }
303- </ div >
304- < div className = "notion-bookmark-description" >
305- { renderChildText ( blockValue . properties . description ) }
309+ { renderChildText ( title ) }
306310 </ div >
311+ { description && (
312+ < div className = "notion-bookmark-description" >
313+ { renderChildText ( description ) }
314+ </ div >
315+ ) }
316+
307317 < div className = "notion-bookmark-link" >
318+ { bookmark_icon && (
319+ < img
320+ src = { bookmark_icon }
321+ alt = { getTextContent ( title ) }
322+ />
323+ ) }
324+ < div > { renderChildText ( link ) } </ div >
325+ </ div >
326+ </ div >
327+ { bookmark_cover && (
328+ < div className = "notion-bookmark-image" >
308329 < img
309- src = { blockValue . format . bookmark_icon }
310- alt = { getTextContent ( blockValue . properties . title ) }
330+ src = { bookmark_cover }
331+ alt = { getTextContent ( title ) }
311332 />
312- < div > { renderChildText ( blockValue . properties . link ) } </ div >
313333 </ div >
314- </ div >
315- < div className = "notion-bookmark-image" >
316- < img
317- src = { blockValue . format . bookmark_cover }
318- alt = { getTextContent ( blockValue . properties . title ) }
319- />
320- </ div >
334+ ) }
321335 </ a >
322336 </ div >
323337 ) ;
0 commit comments