How to use NODE_HEADING?

[bnbon]

[NODE_HEADING]: (children, { attrs: { "level": 2, }}) => <H2>{children}</H2>,

I am trying this, but it doesn't seem to work, and I found the example a little terse... could you clarify for me (the H2 is a new custom component).

Also, how to remove the <p> tag which is inside a <li>, as <li><p></p></li> adds an extra space and looks rather awful when rendered!

[claus]

To return a custom component for level 2 headings you need this:

[NODE_HEADING]: (children, { level }) => {
  if (level === 2) {
    return <H2>{children}</H2>;
  } else {
    const Heading = `h${level}`;
    return <Heading>{children}</Heading>;
  }
}

This library renders the data it gets from Storyblok as is, it doesn't have any built in functionality to remove elements. That said, it also doesn't add any spaces where there are none. What you probably want to do is style those <p> inside those <li> as needed (like setting margin: 0, or display: inline)

[claus]

Regarding your second question, you could also try this:

[NODE_LI]: (children) => {
  if (Children.count(children) === 1) {
    const child = Children.toArray(children)[0];
    if (child.type === "p") {
      return <li>{child.props.children}</li>;
    }
  }
  return <li>{children}</li>;
},

(code above is untested)

[bnbon]

To return a custom component for level 2 headings you need this:

[NODE_HEADING]: (children, { level }) => {
  if (level === 2) {
    return <H2>{children}</H2>;
  } else {
    const Heading = `h${level}`;
    return <Heading>{children}</Heading>;
  }
}

Hello, I tried this, but there was no transformation occurring... the transform for the paragraph and code nodes is working... am I doing something absurd?

        nodeResolvers: {
          [NODE_HEADING]: (children, { level }) => {
            if (level === 2) {
              return <H2>{children}</H2>;
            } else if (level === 3) {
              return <H3>{children}</H3>;
            } else if (level === 4) {
              return <H4>{children}</H4>;
            } else if (level === 5) {
              return <H5>{children}</H5>;
            } else if (level === 6) {
              return <H6>{children}</H6>;
            } else {
              const Heading = `h${level}`;
              return <Heading>{children}</Heading>;
            }
          },
          [NODE_PARAGRAPH]: (children) => <P>{children}</P>,
          [NODE_CODEBLOCK]: (children) => <CodeBlock>{children}</CodeBlock>,
        },

[claus]

Hmm, that code looks good to me. Is that heading resolver executed at all?

[bnbon]

The headings aren't changed, the other elements are...

[bnbon]

Any ideas @claus I wasn't able to spot the issue.

[claus]

As i said, your code looks good, and it would be helpful if you could find out if that NODE_HEADING resolver is actually executed, for example by placing some console.log's in there and watching the browser console.