Wrapping HTML elements in a rich text editor and the importance of focusing on structure over design

{ title: "underline", value: "underline" },

{ title: "animation", value: "animation" },

<p class="text-2xl p-2"><div class="text-2xl p-2">Design</div></p>

<p class="text-2xl p-2"><div class="text-2xl p-2">UX/UI</div></p>

<div><p class="text-2xl p-2">Design</p>

<p class="text-2xl p-2"><p class="text-2xl p-2">UX/UI</p></div>

const portraitPortableTextComponents: any = {

normal: ({ children }) => <p _className_="text-2xl p-2">{children}</p>,

h3: ({ children }) => <h3 _className_="font-bold">{children}</h3>,

div: ({ children }) => <div _className_="text-2xl p-2">{children}</div>,