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>
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.
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 thep
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:
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