Me gustaría analizar el html generado con tinymce, modificado al agregar jsx, en react.

Ejemplo:

 import Youtube from "react-youtube" function Comment() { return ( <div class="comment"> // I want something that can parse like this {parse(`<p> <code class="language-javascript">console.log("hi")</code> <Youtube videoId="10"/> <a href="https://youtu.be/stackoverflow">Youtube</a> </p>`)} </div> ) }

Me encontré con react-jsx-parser, que no funciona como se esperaba :(

También he intentado convertir una cadena html a una cadena jsx:

 import parse from "html-react-parser"; import ReactElementToJsxString from "react-element-to-jsx-string"; import { parse as parsehtml } from "node-html-parser"; function modifycomment () { const comment = ReactElementToJsxString(parse(`<p> <code class="language-javascript">console.log("hi")</code> <a href="https://youtu.be/stackoverflow">Youtube</a> </p>`)); const link = parsehtml(comment).querySelector("a"); return comment.replace(link.toString(), `<Youtube videoId="${link.getAttribute("href"),replace("https://youtu.be/", "")}"${link.toString()}`);; }

Luego analízalo:

 import Youtube from "react-youtube"; import JsxParser from "react-jsx-parser"; function Comment () { return ( <div class="comment"> <JsxParser components={{ Youtube }} jsx={modifycomment()} /> </div> ) }

lo que condujo a errores en el renderizado (algo así como que el elemento secundario a eliminar no es un elemento secundario de este Nodo) :(