claus / storyblok-rich-text-react-renderer

A React renderer for Storyblok rich text content
MIT License
86 stars 16 forks source link

Needs to resolve HTML entities #11

Closed neil-morgan closed 2 years ago

neil-morgan commented 2 years ago

For example a richtext string like this in storyblok...

Screenshot 2021-11-24 at 21 06 42

When resolved like this...

[NODE_PARAGRAPH]: children => <Paragraph>{children}</Paragraph>,

Will still render the html entity...

Screenshot 2021-11-24 at 21 07 42
claus commented 2 years ago

Hey @neil-morgan, i think it would be a bit overkill to add a full HTML entity resolver to this lib, but what i could do is expose a textResolver via options, that gets called on all text nodes and that by default does nothing. You could then hook into that and run e.g. html-entities' decode() function on the text. Would that help?

neil-morgan commented 2 years ago

@claus if I am understanding you correctly I think that would be a massive help.

Essentially in an example like this:

        render(content.body, {
          nodeResolvers: {
            [NODE_PARAGRAPH]: children => <Paragraph>{children}</Paragraph>,
            [NODE_UL]: children => <List>{children}</List>,
            [NODE_OL]: children => (
              <OrderedList component="ol">{children}</OrderedList>
            ),
            [NODE_LI]: children => <ListItem>{children}</ListItem>
          },
          markResolvers: {
            [MARK_LINK]: (children, props) => (
              <Link href={props.href}>{children}</Link>
            )
          }
        })

It would be great to be able to resolve HTML entities wherever {children} is rendered.

claus commented 2 years ago

Yeah there would be a new textResolver, and all you'd have to do is:

render(doc, {
    textResolver: (string) => decode(string)
})

I haven't tested this yet, will do over the long weekend.

neil-morgan commented 2 years ago

If I am getting this right would you then have something like the below?

  render(doc, {
    textResolver: string => decode(string),
    nodeResolvers: {
      [NODE_PARAGRAPH]: children => <Paragraph>{children}</Paragraph>
    }
  });
claus commented 2 years ago

Yes, exactly

claus commented 2 years ago

@neil-morgan I published 2.5.1 with the new textResolver option, let me know if that works for you.

neil-morgan commented 2 years ago

@claus works perfectly. Thank you very much for your effort on this and the project as a whole.