Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: Fix collection list view hydration (remove invalid <a> tag nesting) #506

Open
wants to merge 3 commits into
base: master
Choose a base branch
from

Conversation

ryngonzalez
Copy link

Description

react-notion-x, when rendering a CollectionViewList row, in the Collection component, nests two <a> tags within each other, which is invalid HTML (fixes #492).

Screenshot 2023-07-09 at 1 34 18 PM

When used with a next.js project, this causes a hydration error (fixes #410).

Screenshot 2023-07-09 at 1 33 15 PM

This PR makes the following changes to fix this:

  • linkToTitlePage on the Property component used in a CollectionViewList is set to false to prevent a nested <a> tag in the row's root element.
  • With the non-nesting occurring, .notion-list-item-title is updated to have a text-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.
  • Some CSS formatting is fixed.

Notion Test Page ID

Test idea for a page with a Collection List View is here: 0260a95744a64f4ca67456420761be24

@vercel
Copy link

vercel bot commented Jul 9, 2023

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated (UTC)
react-notion-x ✅ Ready (Inspect) Visit Preview Jul 9, 2023 6:31am
react-notion-x-minimal-demo ✅ Ready (Inspect) Visit Preview Jul 9, 2023 6:31am

@rimonhanna
Copy link

@transitive-bullshit

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
2 participants