@@ -285,39 +285,53 @@ export const Block: React.FC<Block> = props => {
285
285
</ div >
286
286
) ;
287
287
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
+
288
295
return (
289
296
< div className = "notion-row" >
290
297
< a
291
298
target = "_blank"
292
299
rel = "noopener noreferrer"
293
300
className = { classNames (
294
301
"notion-bookmark" ,
295
- blockValue . format . block_color &&
296
- `notion-${ blockValue . format . block_color } `
302
+ block_color &&
303
+ `notion-${ block_color } `
297
304
) }
298
- href = { blockValue . properties . link [ 0 ] [ 0 ] }
305
+ href = { link [ 0 ] [ 0 ] }
299
306
>
300
307
< div >
301
308
< 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 ) }
306
310
</ div >
311
+ { description && (
312
+ < div className = "notion-bookmark-description" >
313
+ { renderChildText ( description ) }
314
+ </ div >
315
+ ) }
316
+
307
317
< 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" >
308
329
< img
309
- src = { blockValue . format . bookmark_icon }
310
- alt = { getTextContent ( blockValue . properties . title ) }
330
+ src = { bookmark_cover }
331
+ alt = { getTextContent ( title ) }
311
332
/>
312
- < div > { renderChildText ( blockValue . properties . link ) } </ div >
313
333
</ 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
+ ) }
321
335
</ a >
322
336
</ div >
323
337
) ;
0 commit comments