How to modify href for in-page links?
k5o opened this issue · 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!