fix: use components.Link for inline text links to prevent nested anchors#697
Open
albertodainotti wants to merge 1 commit intoNotionX:masterfrom
Open
fix: use components.Link for inline text links to prevent nested anchors#697albertodainotti wants to merge 1 commit intoNotionX:masterfrom
albertodainotti wants to merge 1 commit intoNotionX:masterfrom
Conversation
The 'p' (page mention), '‣' (cross-workspace), and 'a' (internal URL) text decorators in text.tsx used components.PageLink to wrap inline text content. Since these are inline text hyperlinks (not block-level page references), children can contain other link decorators that render as <a> tags via components.Link, producing invalid nested <a> elements and causing React SSR hydration errors. Switch all three decorators to use components.Link instead, which is semantically correct: inline text hyperlinks should be handled by the Link component regardless of whether they point internally or externally. components.PageLink is reserved for block-level page references (alias blocks, collection cards, search results, breadcrumbs).
|
@albertodainotti is attempting to deploy a commit to the Saasify Team on Vercel. A member of the Team first needs to authorize it. |
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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.
Problem
When
components.PageLinkis overridden (e.g., to render a custom<div>container instead of<a>), the inline text decorators intext.tsxcreate nested DOM issues. Specifically, the'p'(page mention),'‣'(cross-workspace link), and'a'(internal URL) decorators all usecomponents.PageLink, which means:PageLink-wrapped title cell create aPageLinkinside aPageLink(nested containers)PageLinkrenders as<a>, this produces invalid<a>inside<a>HTML, causing React hydration errorsThese inline text links are semantically different from block-level page links — they appear within text content and should behave as simple navigation links, not as page-level containers.
Fix
Changed the three inline text decorators from
components.PageLinktocomponents.Link:'p'components.PageLinkcomponents.Link'‣'components.PageLinkcomponents.Link'a'components.PageLinkcomponents.LinkThis preserves the existing behavior for custom
Linkoverrides while preventing nesting issues with customPageLinkoverrides.Files Changed
packages/react-notion-x/src/components/text.tsx— 6 lines changed (3 opening tags + 3 closing tags)