Dec 14th - Learn how Tecovas roped in success with Sanity and Shopify 🤠

Issue with italics not working in portable text editor, resolved by removing CSS override.

9 replies
Last updated: Sep 27, 2023
Italics are not working for me in my portable text editor using a standard blockContent schema. Bold is working however. Is this happening to anyone else or am I doing something wrong? Code in 🧵
Sep 27, 2023, 5:34 PM
import { defineArrayMember, defineType } from 'sanity'

export default defineType({
    title: 'Simple Block Content',
    name: 'simpleBlockContent',
    type: 'array',
    of: [
        defineArrayMember({
            title: 'Block',
            type: 'block',
            styles: [
                { title: 'Normal', value: 'normal' },
                { title: 'Heading', value: 'h4' }
            ],
            lists: [
                { title: 'Bullet', value: 'bullet' },
                { title: 'Numbered', value: 'number' }
            ],
            marks: {
                decorators: [
                    { title: 'Strong', value: 'strong' },
                    { title: 'Emphasis', value: 'em' }
                ],
                annotations: [
                    {
                        title: 'URL',
                        name: 'link',
                        type: 'object',
                        fields: [
                            {
                                title: 'URL',
                                name: 'href',
                                type: 'url',
                                validation: (rule) =>
                                    rule.uri({
                                        allowRelative: false,
                                        scheme: ['https', 'http', 'mailto', 'tel']
                                    })
                            }
                        ]
                    }
                ]
            }
        })
    ]
})
Sep 27, 2023, 5:34 PM
What version of the Studio are you running?
Sep 27, 2023, 5:38 PM
I’m running:
Sanity Studio version 3.16.7
Latest version is 3.16.7
Sep 27, 2023, 5:56 PM
Very weird. I can see that the data-mark=“em” is being applied in the browser.
Sep 27, 2023, 5:56 PM
My project has an embedded studio in a Next JS 13 app router project, but I have separated the css into route groups. I am using panda css, so it’s a little untested waters in that regard, but I don’t see where any css would be overriding the studio styles. And it’s weird that bold and underline both work in the editor.
Sep 27, 2023, 5:58 PM
My studio app simply follows the Sanity starter template pattern:
Sep 27, 2023, 6:01 PM
Huh, ok I commented out the css in that route that was taking care of the studio #app appearance and it fixed the issue — so obviously I was somehow overriding the italics from the panda css file. Thanks for letting me work this out out loud
user M
🙂
Sep 27, 2023, 6:05 PM
For any Panda CSS users out there, this was the solution: remove the reset from Panda and add
margin: 0
on body

@layer base, tokens, recipes, utilities;

@layer base {
    body {
        margin: 0;
    }

    #app {
        height: 100vh;
        max-height: 100dvh;
        overscroll-behavior: none;
        -webkit-font-smoothing: antialiased;
        overflow: auto;
        margin: 0;
    }
}
Sep 27, 2023, 6:35 PM
Ah thank you for taking me along for the ride!
Sep 27, 2023, 7:37 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?