Add anchor tag support for Page Navigation

Rathod-Harshit commented 1 year ago

Hi,

First if all, thanks for this awesome lib. It has simplified my implementation.

Problem Statement: As a user I want to navigate within the same page using anchor tags. Type: Enhancement

I am using Hygraph rich-text and as of now, I could not find a way to add id to the div. I want to add id to div so that, I am able to navigate within the page using anchor tags.

Solution: This use case will mostly apply to headings. In Rich text editor I can add a class to heading with prefix anchor- and in the package add an id to div, if classname matches the prefix. Id will be same as classname. (This is not a very good approach, but I can not think of any other solution. )

Enhance https://github.com/hygraph/rich-text/blob/main/packages/react-renderer/src/elements/Class.tsx

vinnycodes commented 1 year ago

Currently looking for a similar resolution to this as well. Going to see if posting to their feedback page will yield a faster response.

https://feedback.hygraph.com/148

Rathod-Harshit commented 1 year ago

Actually, I was able to find a simple work-around.

Lets say we have an h3 with title: Anchor one then create an unique id as: anchor-one and link it.

` h3: ({ children }) => { const createUniqueRef = contentText .toLowerCase() .split(" ") .join("_"); return (

{children}

        );
      },

`

@vinnycodes

vinnycodes commented 1 year ago

Yep. I'm considering creating a similar work around. Possibly using "class" feature and then check if it starts with an octothorp. I still think this is worth a feature request as it is a standard for modern development and it creates unnecessary coding edits /fragments for what should be common practice.

hygraph / rich-text

Add anchor tag support for Page Navigation #101

{children}