react-notion icon indicating copy to clipboard operation
react-notion copied to clipboard

How to modify href for in-page links?

Open k5o opened this issue 3 years ago • 0 comments

Hi, I have a notion page that I've rendered (easily and beautifully, so well done there), but the links within it point to host/blockValue.id, but I'd love to edit it to something like host/path/blockValue.id. Therefore, something like example.com/support/abcd1234.

The problem I'm encountering is that I don't really know how to use the customDecoratorComponents and customBlockComponents, and I can't find any documentation about it besides the actual src code.

I've tried something like this (added the redundancy just to ensure it could work, I can't articulate the difference between customDecoratorComponents and customBlockComponents)

<NotionRenderer
  blockMap={this.state.data}
  customDecoratorComponents={{
    'a': ({ decoratorValue, children }) => (
      <a href={`/support/${decoratorValue}`}>
        {children}
      </a>
    )
  }}
  customBlockComponents={{
    page: ({ blockValue, renderComponent }) => {
      return (
      <a href={`/support/${blockValue.id}`}>{renderComponent()}</a>
    )}
  }}
/>

It seems that what renderComponent() returns is not respecting the modified href I've added, even if I were to add different attributes.

It does work If I add something like "foo" right after {renderComponent()}, then the renderer creates two links, the normal renderComponent() link and my decorated "foo" link, but that foo link then loses all the styles and I would rather not reinvent the wheel and apply all the styling and extra bells and whistles to my foo link from scratch.

Thank you in advance!

k5o avatar Jan 09 '22 08:01 k5o