Skip to content
Unlock seamless workflows and faster delivery with our latest releases – get the details
Get help on Slack

Issue with customizing portable text editor in Sanity v3 resolved with version update.

6 replies
Last updated: Mar 16, 2023
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 :

{
  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(),
},
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
🙏
Mar 15, 2023, 11:37 AM
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.

I'm not where I can try code at the moment, but scanning that documentation, it looks like the code there might have a mistake. Look at the first example, and you can see they return a letter 'H' to create the icon. Simple and direct, right?

But as they build up patterns and capabilities to actually implement the highlighting in the editor, they no longer seem to return anything useful as an 'icon' from their routines, even considering the overused 'automatic' return of last item in arrow functions.

So how would an 'icon' show?

I would try adding a 
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
Well, I made a mistake here... as
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. 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...!
Mar 15, 2023, 8:50 PM
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 
astro-sanity
package, which works in the same way.
Mar 16, 2023, 6:30 AM
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__highlight
and 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
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.

Get started for freeExplore the demo

Was this answer helpful?