How to add a custom icon in the Editor Modal in Sanity.io
16 replies
Last updated: Aug 23, 2021
H
I've created a couple of dynamic sections with the rich text editor in sanity. Is it possible to have a custom icon for each section?
Aug 20, 2021, 7:37 PM
H
cc:
user A
Aug 20, 2021, 7:37 PM
J
Are you looking for this kind of thing? There’s pretty good info in this bit of documentation: https://www.sanity.io/docs/previews-list-views#d82fd035385f
Aug 20, 2021, 7:40 PM
H
Kindof but I'm looking for similar Image for Rich Text editor previews and not in the list pane.
user R
Aug 20, 2021, 7:42 PM
J
Might be worth giving it a go. Looking at this tutorial on adding custom elements to the Block editor, the preview bit looks exactly the same: https://www.sanity.io/guides/portable-text-how-to-add-a-custom-youtube-embed-block#8d08a02d3d04 🤷
Aug 20, 2021, 7:46 PM
H
Nope! It won't show a preview for items in a custom editor modal.Thanks again
user R
Aug 20, 2021, 8:00 PM
H
Nope! It won't show a preview for items in a custom editor modal.Thanks again
user R
Aug 20, 2021, 8:00 PM
Can you post that part of your schema?
Aug 20, 2021, 8:06 PM
H
user A
Aug 20, 2021, 8:08 PM
H
Every data ie title and its contents are read dynamically and I've already shown a preview in editor.
I want to show a custom icon in Editor Modal!
I want to show a custom icon in Editor Modal!
Aug 20, 2021, 8:10 PM
H
user A
Aug 20, 2021, 8:10 PM
If you put a
previewon your object, you should be able to set an icon (if by that you mean to replace that folded piece of paper icon) using
mediain the
preparefunction, which allows you to return JSX:
preview: {
select: {
title: 'title'
},
prepare({ title }) {
return {
title,
media: <>'🙌'</>
};
},
},Aug 20, 2021, 8:16 PM
If you put a
previewon your object, you should be able to set an icon (if by that you mean to replace that folded piece of paper icon) using
mediain the
preparefunction, which allows you to return JSX:
preview: {
select: {
title: 'title'
},
prepare({ title }) {
return {
title,
media: <>'🙌'</>
};
},
},Aug 20, 2021, 8:16 PM
H
Hi
Am I missing out something?
user A
I tried adding preview but it isn't working for me!Am I missing out something?
Aug 22, 2021, 4:58 AM
Could you try moving the previews to be siblings of the
fieldsarrays on the objects?
{
type: 'object',
name: 'question',
title: 'Question',
fields: [
// ...
],
preview: {
// ...
},
}Aug 23, 2021, 4:00 AM
H
Woo hoo! That worked.Thanks for your awesome support
user A
🙂Aug 23, 2021, 1:08 PM
Glad to hear it! 👍
Aug 23, 2021, 4:28 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.