Issue with italics not working in portable text editor, resolved by removing CSS override.
9 replies
Last updated: Sep 27, 2023
H
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
H
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
H
I’m running:
Sanity Studio version 3.16.7 Latest version is 3.16.7
Sep 27, 2023, 5:56 PM
H
Very weird. I can see that the data-mark=“em” is being applied in the browser.
Sep 27, 2023, 5:56 PM
H
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
H
My studio app simply follows the Sanity starter template pattern:
Sep 27, 2023, 6:01 PM
H
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
H
For any Panda CSS users out there, this was the solution: remove the reset from Panda and add
margin: 0on 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.