search

9gustin / react-notion-render

A library to render notion pages
MIT License
144 stars 20 forks source link

Fix custom components in parragraphs #47

Open 9gustin opened 3 years ago

9gustin commented 3 years ago

Now not it's possible add a custom component inline with more text. The HOC withCustomComponent find custom components usage in all parragraph plain text.

I want to use some text [My title](#some-title) more text And this should be converted to a My title with link to #some-title

mrzmyr commented 2 years ago

I don't understand what is meant by that. Can you maybe explain with code example what you mean. And maybe how I can help here?

9gustin commented 2 years ago

Yes, this would be a example of breaking blocks:

[{"object":"block","id":"54da2cb4-4205-499a-b675-33bb7d597cfd","created_time":"2021-12-16T13:46:00.000Z","last_edited_time":"2021-12-16T13:50:00.000Z","has_children":false,"archived":false,"type":"paragraph","paragraph":{"text":[{"type":"text","text":{"content":"Hey! ![my profile pic](https://avatars.githubusercontent.com/u/38046239) x aaaaaaaaaaaaaaaaaaaaaaaaaaaa","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"Hey! ![my profile pic](https://avatars.githubusercontent.com/u/38046239) x aaaaaaaaaaaaaaaaaaaaaaaaaaaa","href":null}]}},{"object":"block","id":"dc5f259a-c521-432f-aca7-92f655a16a4a","created_time":"2021-12-16T13:47:00.000Z","last_edited_time":"2021-12-16T13:48:00.000Z","has_children":false,"archived":false,"type":"paragraph","paragraph":{"text":[]}}]

In notion it looks like image

The idea is that if we use custom components the output should be "Hey! <img/> x aaaaaaaaaaaaaaaaaaaaaaaaaaaa"

Now the custom components not so used because native images/videos are supported, but i created this issue to not forget it.

One case of use that think are if a want to use a inline image with a gif-emoji.