Link is not recognized

[OperationalFallacy]

Hi,

I'm trying to use link renderer for this object below, the link is an image pasted in editor.

The a pick the link up, but not link

{
    "raw": {
      "children": [
        {
          "type": "paragraph",
          "children": [
            {
              "text": "This is example of text entry. It has image.\n⁠\n⁠"
            },
            {
              "href": "blob:https://app.hygraph.com/xx",
              "type": "link",
              "title": "(Image)",
              "children": [
                {
                  "text": "blob:https://app.hygraph.com/xx"
                }
              ],
              "openInNewTab": true
            },
            {
              "text": ""
            }
          ]
        }
      ]
    }
}

[jpedroschmitz]

I don't understand the problem here. Is it not rendering the link? Or is it not rendering the image? Which package are you using? React our HTML?

Please create a reproducible example on CodeSandbox.

[OperationalFallacy]

Ok, sorry. Here's the details: I'm using latest graphcms/rich-text-react-renderer It's not rendering link in this snippet

    <RichText
      content={content}
      references={references}
      renderers={{
        link: ({ children, href }) => (
           <Image
            src={href}
            ...
        )
        ...
        />

However, it does return rendered blob link with a

[jpedroschmitz]

The renderer for the a tag is not a link. It's just an a. Please check the custom elements section on the docs: https://github.com/hygraph/rich-text/tree/main/packages/react-renderer#custom-elements.

Also, if you change the a renderer, all links on your document will try to render that Image, so you can have a lot of issues. I'd recommend you create a specific model for it and render a custom embed: https://github.com/hygraph/rich-text/tree/main/packages/react-renderer#custom-embeds.

You could have a model with an Asset field (where you upload your image) and the text link/content. Then you embed it on the RT renderer and write the logic for the renderer. Remember that if you go with this approach, you must update your query with the references and pass that to the RichText component: https://github.com/hygraph/rich-text/tree/main/packages/react-renderer#references-1.

For more information on how to work with embeds, please look at this tutorial on YouTube: https://www.youtube.com/watch?v=KqFawMHm5g4.

I am closing this issue for now.