I've been using editor.js and react-editor-js as a WYSIWYG editor and now that I've developed the backend for images and text storing in a mongo database, I'm facing another issue: viewing those articles.
For those of you who don't know this is how every paragraph gets stored in editor.js:
"{\"time\":1579259743447,\"blocks\":[{\"type\":\"paragraph\",\"data\":{\"text\":\"How can I resist you?\"}},{\"type\":\"list\",\"data\":{\"style\":\"ordered\",\"items\":[\"<b>Mammamia</b>\"]}},{\"type\":\"paragraph\",\"data\":{\"text\":\"1<i><b>Bebebe</b></i>\"}},{\"type\":\"paragraph\",\"data\":{\"text\":\"<a href=\\\"https://google.com/\\\">Bobobo</a>\"}},{\"type\":\"quote\",\"data\":{\"text\":\"Pull me\",\"caption\":\"\",\"alignment\":\"left\"}},{\"type\":\"header\",\"data\":{\"text\":\"Mamma\",\"level\":1}},{\"type\":\"paragraph\",\"data\":{\"text\":\"1wowowo\"}},{\"type\":\"list\",\"data\":{\"style\":\"ordered\",\"items\":[\"Bismillah\"]}},{\"type\":\"paragraph\",\"data\":{\"text\":\"We will not let you go\"}},{\"type\":\"paragraph\",\"data\":{\"text\":\"Bis\"}},{\"type\":\"list\",\"data\":{\"style\":\"ordered\",\"items\":[\"Bismillah\"]}}],\"version\":\"2.16.1\"}"
And my issue now is trying to show those <a> <i> <b> as I can't just paste them into react like this:
<p>{elem.data.text}</p>
because react will reder , and as a text instead of as elements.
What can I do to overcome this issue?
This is what I've done so far:
<section>
{article.body != undefined
? JSON.parse(article.body).blocks.map(elem => {
console.log(elem);
let rElem;
switch (elem.type) {
case "paragraph":
rElem = <p>{elem.data.text}</p>;
break;
case "list":
switch (elem.data.style) {
case "ordered":
rElem = (
<ol>
{elem.data.items.map(innerElem => {
return <li>{innerElem.text}</li>;
})}
</ol>
);
break;
case "unordered":
rElem = (
<ul>
{elem.data.items.map(innerElem => {
return <li>{innerElem.text}</li>;
})}
</ul>
);
break;
}
break;
case "image":
rElem = (
<img
src={elem.data.file.url}
width={elem.data.file.width}
height={elem.data.file.height}
alt={elem.data.file.url}
/>
);
break;
case "header":
switch (elem.data.level) {
case 1:
rElem = <h1>{elem.data.text}</h1>;
break;
case 2:
rElem = <h2>{elem.data.text}</h2>;
break;
case 3:
rElem = <h3>{elem.data.text}</h3>;
break;
case 4:
rElem = <h4>{elem.data.text}</h4>;
break;
case 5:
rElem = <h5>{elem.data.text}</h5>;
break;
case 6:
rElem = <h6>{elem.data.text}</h6>
break;
}
break;
default:
rElem = null;
}
return rElem;
})
: null}
</section>
Top comments (0)