Fix hyperlinked images not rendering in markdown #98
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Images that are hyperlinked in Notion were losing their links during the markdown conversion process. This fix adds: 1. Custom image transformer in notionClient.ts that detects hyperlinks on Notion image blocks (from caption rich_text or link property) and wraps images in markdown link syntax: [](link-url) 2. Enhanced image extraction regex in imageReplacer.ts to handle both: - Regular images:  - Hyperlinked images: [](link-url) 3. Updated image replacement logic to preserve hyperlink wrappers when replacing Notion image URLs with local paths 4. Comprehensive tests for hyperlinked image handling Fixes #96
Contributor
🚀 Preview DeploymentYour documentation preview is ready! Preview URL: https://pr-98.comapeo-docs.pages.dev 🔄 Content: Regenerated 5 pages from Notion (script changes detected)
This preview will update automatically when you push new commits to this PR. Built with commit a0941d3 |
Based on research into Notion's linking behavior, hyperlinks on images are stored in the caption as link annotations. Updated the image transformer to: 1. Check caption rich_text items for link annotations first 2. Extract the link URL from the first linked caption item 3. Use non-linked caption text as alt text 4. Add fallback checks for image.link and block-level link properties 5. Add debug logging to help diagnose hyperlink detection issues This should correctly detect and preserve image hyperlinks from Notion. Related to #96
Since Notion's "Add link" menu option doesn't expose hyperlinks via the API, implement a workaround that detects URLs in image captions: Method 1: Link annotations in caption rich_text - Detects when URLs are formatted as links in captions - Uses the link.url property from the rich_text annotation Method 2: Plain text URL detection (NEW) - Detects URLs typed as plain text in captions - Uses regex to extract http(s) URLs: /https?:\/\/[^\s]+/ - Separates URL from alt text Method 3 & 4: Future-proofing - Checks for image.link and block.link properties - Will work if Notion adds API support in the future Users can now make images clickable by: 1. Typing a URL in the image caption (preferred workaround) 2. Pasting a link in the caption (Notion converts it automatically) Note: The Notion UI "Add link" feature is not supported by the API. Images using that feature will not have clickable links in the output. Related to #96
- Wrap console.log in IS_TEST_ENV check for cleaner test output - Use consistent ✓ prefix for success messages - Shorten log message for brevity
luandro
deleted the
claude/fix-hyperlinked-images-01Mo1TjQHC8zwZDNhEkZeTGY
branch
Contributor
🧹 Preview Deployment CleanupThe preview deployment for this PR has been cleaned up. Preview URL was: Note: Cloudflare Pages deployments follow automatic retention policies. Old previews are cleaned up automatically. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Images that are hyperlinked in Notion were losing their links during the markdown conversion process. This fix adds:
Custom image transformer in notionClient.ts that detects hyperlinks on Notion image blocks (from caption rich_text or link property) and wraps images in markdown link syntax:
Enhanced image extraction regex in imageReplacer.ts to handle both:
Updated image replacement logic to preserve hyperlink wrappers when replacing Notion image URLs with local paths
Comprehensive tests for hyperlinked image handling
Fixes #96