react-notion-x icon indicating copy to clipboard operation
react-notion-x copied to clipboard

fix: support direct image hyperlinks

Open raymondanythings opened this issue 5 months ago • 1 comments
trafficstars

fix #637

Description

adds native support for hyperlinks applied directly to image blocks. While Notion allows hyperlinks via image captions, exposing the link as a caption feels intrusive and affects the user experience.

To address this, we modify the asset-wrapper logic to properly detect and wrap images in anchor tags when a valid image_hyperlink is present.

Solution

  1. Introduced getURLInfo()
  • Determines whether the image should link to
    • a Notion page (/xxx pattern with UUID),
    • an external URL (validated using a URL regex).
  1. Improved link handling logic
  • Fallback order: imageHyperlink → caption
  • Automatically wraps the image with <components.PageLink> only when a valid link is detected.
  • Maintains support for internal Notion page routing via mapPageUrl.

Notion Test Page ID

2061b06afbf1807b8e35d35e7a7fd146

raymondanythings avatar Jun 02 '25 00:06 raymondanythings