Issue with customizing portable text editor in Sanity v3 resolved with version update.
6 replies
Last updated: Mar 16, 2023
N
Hi everyone, I work on Sanity v3 and I want to edit my portable text editor. I followed the documentation (https://www.sanity.io/docs/customizing-the-portable-text-editor#92d92c3189a3 ) but it doesn’t work (look on the picture).
Here’s my code :
My file is a tsx due to vite build who can’t work with js file (the doc use js file, how ?)
How can I add my icon and my style in the custom component ?
Thank’s for the help
🙏
Here’s my code :
{
title: "Titre du block",
name: "titleBlock",
type: "array",
of: [{
type: "block",
marks: {
decorators: [
{ title: "Strong", value: "strong" },
{ title: "Emphasis", value: "em" },
{ title: "Code", value: "code" },
{ title: "Underline", value: "underline" },
{ title: "Strike", value: "strike-through" },
{
title: 'Highlight',
value: 'highlight',
icon: () => <span style={{fontWeight: 'bold'}}>H</span>,
component: (props: any) => <span style={{ backgroundColor: 'yellow' }}>{props.children}</span>,
}
],
}
}],
group: "text",
validation: (Rule: any) => Rule.required(),
},How can I add my icon and my style in the custom component ?
Thank’s for the help
🙏
Mar 15, 2023, 11:37 AM
N
user K
, see below. What I said here is not correct. You might find your answer though in what user M
or I have posted later...best fortune.return 'H'at the end of your routine, and see if that doeesn't make things start to work....
Mar 15, 2023, 4:17 PM
Interesting. Your code is working in my Studio. What version of the Studio are you on?
Mar 15, 2023, 5:02 PM
N
Well, I made a mistake here... as
I had missed where the proper H icon was indeed returned, as the decorator code was highlighted on the page, with the icon function proper, but just above it. The H in it was particularly hard to see in the dark mode my eyesight prefers, but this was just oversight in going too fast, my apology -- the Sanity documentation is fine.
But, it didn't work for me at first in trying it, even so, and some of the reasons might be what @Nicolas is running into:
• The main reason it didn't work is that I added the decorator to the wrong schema(!). But this is easy to do. Working on a simple blog model where I'm trying things out, I put the decorator in the seeming obvious place: the 'post' schema's block. However, I'd redefined that block to be my own type, with it's own schema. Once I put the decorator there, it worked. So maybe @Nicolas has something the same?
• to use this decorator definition, you need JSX abilities, so depending on whether you also use TypeScript or not, you need to make the schema using this a .jsx or .tsx file.
• In tsx, you might get a complaint about argument type for
• Last, to see the result in your website itself, you'll need some styling, css or what you prefer, to change the background color according to the class attribute delivered by Sanity, which by default seems to be
You can get an idea about that from the page for the language you use listed under Libraries on: https://www.sanity.io/docs/block-content (better advice just below)Whew. It does work, this...!
user M
says well, an the code you posted here, user K
, does work, on Sanity latest 3.7, a good excuse I took to update it, and so would the Sanity documents code as I now see it.I had missed where the proper H icon was indeed returned, as the decorator code was highlighted on the page, with the icon function proper, but just above it. The H in it was particularly hard to see in the dark mode my eyesight prefers, but this was just oversight in going too fast, my apology -- the Sanity documentation is fine.
But, it didn't work for me at first in trying it, even so, and some of the reasons might be what @Nicolas is running into:
• The main reason it didn't work is that I added the decorator to the wrong schema(!). But this is easy to do. Working on a simple blog model where I'm trying things out, I put the decorator in the seeming obvious place: the 'post' schema's block. However, I'd redefined that block to be my own type, with it's own schema. Once I put the decorator there, it worked. So maybe @Nicolas has something the same?
• to use this decorator definition, you need JSX abilities, so depending on whether you also use TypeScript or not, you need to make the schema using this a .jsx or .tsx file.
• In tsx, you might get a complaint about argument type for
marks:after your decorator is added -- if you do, put a `// @ts-ignore`on a line above
marks:. • Then, once actually working, there are some issues about seeing the highlight appear. If you select and apply it, the result doesn't seem to show until you move off that selection, as the decoration doesn't override the editor selection color. But you can see that it's applied by looking at the H icon - it will show the editor selection color if the selection is highlighted in your way. A small thing Sanity could perhaps improve, but workable given you let your content persons know about it.
• Last, to see the result in your website itself, you'll need some styling, css or what you prefer, to change the background color according to the class attribute delivered by Sanity, which by default seems to be
unknown__pt__mark__highlight, until you customize Sanity's
portableTextToHtml()with a custom element for marks.highlight.
Mar 15, 2023, 8:50 PM
N
One more point, when you get to presenting your highlights on web pages. I tried this out also, for a bit this evening, and think I gave you the wrong reference, crossed out just above.
This should be the right one now on v3, I think:
https://www.sanity.io/docs/presenting-block-text , and you are possibly best served by the first on the Serialization Tooling list , given here on the same page, which is Portable Text to Html.
As I'm doing this using Astro, I used the function `portableTextToHtml`from the
This should be the right one now on v3, I think:
https://www.sanity.io/docs/presenting-block-text , and you are possibly best served by the first on the Serialization Tooling list , given here on the same page, which is Portable Text to Html.
As I'm doing this using Astro, I used the function `portableTextToHtml`from the
astro-sanitypackage, which works in the same way.
Mar 16, 2023, 6:30 AM
N
Hi, thank for your help, I updated to sanity 3.7 (I had the 3.3.x before) and now it’s working well.
user Q
I use the @portabletext/to-html to edit the unknown__pt__mark__highlightand it’s work perfectly on my front app. Thanks for the support.Thank you
user M
for the time !Have a nice day.Mar 16, 2023, 7:49 AM
N
Great,
user K
, 👍 🪴Mar 16, 2023, 3:10 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.