fix: Fix collection list view hydration (remove invalid <a> tag nesting) #506
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.
Description
react-notion-x
, when rendering aCollectionViewList
row, in theCollection
component, nests two<a>
tags within each other, which is invalid HTML (fixes #492).When used with a next.js project, this causes a hydration error (fixes #410).
This PR makes the following changes to fix this:
linkToTitlePage
on theProperty
component used in aCollectionViewList
is set tofalse
to prevent a nested<a>
tag in the row's root element..notion-list-item-title
is updated to have atext-decoration: underline
to match.notion-link
. Some new CSS variables are added to support this..notion-list-item-property
is updated to vertically align it's content, as it is in Notion.Notion Test Page ID
Test idea for a page with a Collection List View is here:
0260a95744a64f4ca67456420761be24