Get help on Discord

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 🧵
AI Update

I understand you're experiencing an issue where italics aren't working in your portable text editor, even though bold is working fine. This is actually a common configuration issue, and you're not alone in experiencing this!

Based on the standard portable text configuration, both bold (strong) and italics (em) should be included by default. However, if you're using a custom blockContent schema, you might have accidentally overridden the default decorators.

Check Your Schema Configuration

If you've customized your block content schema and explicitly defined the decorators array under marks, you need to make sure the em decorator is included. Here's what a proper configuration should look like:

{
  name: 'content',
  type: 'array',
  of: [
    {
      type: 'block',
      marks: {
        decorators: [
          {title: 'Strong', value: 'strong'},
          {title: 'Emphasis', value: 'em'},  // Make sure this is included!
          {title: 'Code', value: 'code'}
        ]
      }
    }
  ]
}

Common Causes

  1. Custom decorator configuration: If you've defined a custom decorators array but forgot to include {title: 'Emphasis', value: 'em'}, italics won't appear in the toolbar
  2. Partial override: Sometimes when customizing one aspect of marks (like adding custom decorators), you accidentally replace the entire default configuration instead of extending it

Solution

Make sure your schema includes the em decorator. If you're not seeing the italics button in your toolbar, add it explicitly to your marks configuration.

The default decorators that come with portable text are:

  • strong (bold)
  • em (italics/emphasis)
  • code (inline code)
  • underline
  • strike-through

Important: When you define a custom decorators array, it completely replaces the defaults. So if you've added custom decorators, you need to include all the default ones you want to keep alongside your custom ones.

Try adding the em decorator back to your configuration and restart your Studio. That should resolve the issue! If you're still having trouble, feel free to share your schema code and I can help identify the specific issue.

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']
                                    })
                            }
                        ]
                    }
                ]
            }
        })
    ]
})
What version of the Studio are you running?
I’m running:
Sanity Studio version 3.16.7
Latest version is 3.16.7
Very weird. I can see that the data-mark=“em” is being applied in the browser.
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.
My studio app simply follows the Sanity starter template pattern:
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
🙂
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;
    }
}
Ah thank you for taking me along for the ride!

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Get started for freeExplore the demo

Was this answer helpful?