😎 Discover cool tips and tricks for customization in our next Developer Deep Dive virtual event - sign up now!

I try adding indentations but it just jumps to the publish button

6 replies
Last updated: Feb 4, 2021
I try adding these indentations, but when I hit tab, it just jumps to the publish button instead of indenting
Feb 2, 2021, 2:27 PM
Hi Brian, these seem to clash with the studio's own keyboard navigation. I'm checking if we have any other way to get them to work.
Feb 2, 2021, 3:02 PM
Much appreciated
Feb 2, 2021, 3:05 PM
Just got word back from our product design team. Unfortunately, it seems like we don't support them at the moment. Noting this down as a feature request.
Feb 2, 2021, 3:10 PM
Sounds good, thanks for the help!
Feb 2, 2021, 3:11 PM
Hi Brian. What follows doesn’t solve your request for tab indentations, but if you only need to indent once, you could add something like this to your schema styles:

{
  title: "Indented",
  value: "indented",
  blockEditor: {
    render: ({ children}) => <p style={{ marginLeft: "2em" }}>{children}</p>
  }
},
Then on your front end (assuming you want the indents to render out), you could add to your serializer. Something like:


import BlockContent from '@sanity/block-content-to-react';

...

const serializers = {
  types: {
    block: (props) => {
      const { style = 'normal' } = props.node;
      if (style === 'indented') return <p style={{ marginLeft: "2em" }}>{props.children}</p>;
      return BlockContent.defaultSerializers.types.block(props);
    },
    …
  },
  ...
}
Feb 4, 2021, 4:26 PM
Ahhh that can work, thanks!
Feb 4, 2021, 5:02 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?