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

ryngonzalez commented 1 year ago

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).

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 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[bot] commented 1 year ago

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 commented 2 months ago

@transitive-bullshit

NotionX / react-notion-x

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

Description

Notion Test Page ID