✨Discover storytelling in the AI age with Pixar's Matthew Luhn at Sanity Connect, May 8th—register now

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

25 replies
Last updated: May 27, 2022
hi ! i'd like to know if i can wrap my
<li>
elements in a div.current schema :
marks: {

decorators: [

{ title: "strong", value: "strong" },

{ title: "em", value: "em" },

{ title: "strike", value: "strike" },

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

{ title: "blue", value: "blue" },

{ title: "green", value: "green" },

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

{ title: "muted", value: "muted" },

{ title: "div", value: "div" },
But when i do something like that it just wrap my element in the li not the 2 li elements i want.
I just want the last li elements to be wrapped inside the div
May 27, 2022, 7:13 AM
Wrapping a
<li>
element in a
<div>
would yield invalid HTML and break list semantics.
May 27, 2022, 8:25 AM
ok so i tried to put an h2 and an h1 in a div but it doesnt let me
May 27, 2022, 11:34 AM
do i have to put the div as a decorator ?
May 27, 2022, 11:35 AM
<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>
May 27, 2022, 11:42 AM
my code looks like that
May 27, 2022, 11:44 AM
<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>
May 27, 2022, 11:46 AM
while i want it to look like that
May 27, 2022, 11:46 AM
here s my portable text code
May 27, 2022, 11:47 AM
const portraitPortableTextComponents: any = {

block: {

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

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

},

marks: {

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

},

}
May 27, 2022, 11:47 AM
tldr i want to wrap my content in a div
May 27, 2022, 11:55 AM
tldr i want to wrap my content in a div in a rich text block
May 27, 2022, 11:59 AM
I’m a little confused as to why? The rich text editor is not an HTML editor. It gives structure, not markup. Ultimately, you map these nodes to whatever you want on your frontend. Or am I missing something?
May 27, 2022, 12:01 PM
it was just to have a line break but after a seond thought i might me able to do it another way like "going to the next line" :X
May 27, 2022, 12:04 PM
in my editor
May 27, 2022, 12:04 PM
its true that i was hoping to replace all my tags with predefined ones in my editor but that my not be the right way to do things
May 27, 2022, 12:06 PM
I would generally advise against trying to make the editor look like the frontend version of the content. The editor is suppose to convey content and structure, but not design per se. 🙂
May 27, 2022, 12:08 PM
alright you must be right. I'm new to the cms things to be honest and i 'm trying to find my way on my own.
May 27, 2022, 12:09 PM
tahnk you for your advices i will rethink my process
May 27, 2022, 12:09 PM
It takes a bit of time to get the hang of it, but I think a healthy way to think about the portable text editor is to think about structure really. Similar to Markdown in a way.
You or your editors need to be able to say “this is a heading, this is a list, this is a map widget with these options, this is an image with this alt text, this is a 2 columns layout with this content.” How it will look (beyond the options you defined like layout or things like this) is the responsibility of the frontend. And markup is definitely on the frontend side as well.
🙂
May 27, 2022, 12:14 PM
alright 🙂
May 27, 2022, 12:25 PM
thank you for your time
May 27, 2022, 12:25 PM
no need to say ill be back
May 27, 2022, 12:25 PM
haha
May 27, 2022, 12:25 PM
Haha, take care. ❤️
May 27, 2022, 12:26 PM
thanks you too
May 27, 2022, 12:26 PM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Was this answer helpful?