search

kontent-ai / delivery-sdk-js

Kontent Delivery SDK for Javascript
https://kontent.ai
MIT License
50 stars 34 forks source link

Object resolver breaks HTML nesting rules #339

Closed Simply007 closed 2 years ago

Simply007 commented 2 years ago

Brief bug description

If you use an Object resolver that contains i.t. image (represented by figure tag), object revolver wraps this figure presentation by the p tag - which violates the HTML standard: <figure> cannot appear as a descendant of <p>

Repro steps

Fork this repo: https://github.com/Simply007/kontent-react-components/blob/716eb5a6f8302ebc65e418df0ba44282db9b9405 Run this test: https://github.com/Simply007/kontent-react-components/blob/716eb5a6f8302ebc65e418df0ba44282db9b9405/src/components/ReactRichTextElement.test.tsx#L22

You get this error:

  console.error
    Warning: validateDOMNesting(...): <figure> cannot appear as a descendant of <p>.
        at figure
        at p
        at ReactRichTextElement (C:\projects\kontent-react-components\src\components\ReactRichTextElement.tsx:18:33)

Expected behavior

Wrap the element into div or set this root element configurable.

Additional context

The wrapper component is being set here: https://github.com/Kentico/kontent-delivery-sdk-js/blob/master/lib/resolvers/rich-text/sync/rich-text-object-resolver.ts#L18