Add anchor tag support for Page Navigation

[Rathod-Harshit]

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]

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]

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 ( <h3 id={createUniqueRef}> <span>{children}</span> </h3> ); },

@vinnycodes

[vinnycodes]

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.