datocms / structured-text

MIT License
22 stars 7 forks source link

New version doesn't allow returning HTML #24

Closed Jorenm closed 2 years ago

Jorenm commented 2 years ago

I'm not sure when exactly this breaking change was introduced, but I upgraded from v1.3 to the latest, and my block rendering now longer works.

Returned HTML gets encoded and displayed as a string, instead of rendered. For example, this no longer functions for rendering wysiwyg content:

renderBlock({record, adapter: {renderNode}}) {
    return `<div class="${styles.wysiwyg}">${record.content}</div>`
}

Is there some new method to accomplish this? How would one render a block other than renderNode, which is impractical for something like this.

stefanoverna commented 2 years ago

Wait, what is the package you're talking about? And could you provide a minimal script that reproduces the issue? Thanks!

Jorenm commented 2 years ago

Sorry for some reason I thought I was on a repo that made the package clear. It's datocms-structured-text-to-html-string.

It's barely documented, but I used to be able to return HTML

stefanoverna commented 2 years ago

The way it is supposed to work is this: https://github.com/datocms/structured-text/blob/main/packages/to-html-string/__tests__/index.test.tsx#L197-L215

return adapter.renderNode(
  'figure',
  null,
  adapter.renderNode('blockquote', null, record.quote),
  adapter.renderNode('figcaption', null, record.author),
);

Not sure about what could have changed from 1.3 to latest version to make your behaviour change 🤷🏻

Jorenm commented 2 years ago

I made an example case: https://github.com/Jorenm/next_debug

Master branch is using latest version, where the returned html string is encoded. "oldversion" branch is using v1.3 and returns the unaltered HTML.

stefanoverna commented 2 years ago

This specific example should become

  const rendered = render(dastData.body, {
    renderBlock({ record, adapter: { renderNode } }) {
      if (record._modelApiKey == 'wysiwyg_block') {
        return renderNode('div', {
          class: 'wysiwyg_block',
          dangerouslySetInnerHTML: { __html: record.content },
        });
      }
    },
  });