How to disable 'normal text' in a rich text editor in Sanity.io
8 replies
Last updated: Jul 31, 2021
J
Is there anyway to disable ‘normal text’ in a rich text editor? or just make a heading 2 the default?
Jul 1, 2021, 4:01 PM
J
I think you can remove the styles you dont want from your config.
Jul 1, 2021, 4:35 PM
J
Thanks
user X
, even if you just set it to Heading 2 it will always render normal text and set that as the default. I guess the only way is to write a custom serializer to set a default if nothing is set, quite annoyingJul 1, 2021, 4:56 PM
J
Done this now:
import BlockContent from "@sanity/block-content-to-react";
export default function customSerializer({ props, defaultTag }) {
const { style = "normal" } = props.node;
// if user hasn't selected a style, and it should be h1,h2,h3... force it
if (style === "normal" && defaultTag) {
return React.createElement(defaultTag, {}, props.children);
}
// default styling
return BlockContent.defaultSerializers.types.block(props);
}Jul 1, 2021, 5:02 PM
J
Because this will always render ‘normal’ and set it as the default 😕
export default {
title: "Content",
name: "headingThree",
type: "array",
of: [
{
title: "Block",
type: "block",
styles: [{ title: "Heading 3", value: "h3" }],
lists: [],
marks: {
decorators: [],
annotations: [],
},
},
],
};Jul 1, 2021, 5:03 PM
Hey User! If you know that that field is always going to be an h3 could you just use a
stringor a
texttype, then handle the styling on your frontend? Or do you need access to Block Content features besides styling here?
Jul 1, 2021, 7:38 PM
J
Hey User, thanks I needed <br/> tags and I do need a few blocks with a few different types. I came up with a custom serializer to solve:
import React from "react";
import BlockContent from "@sanity/block-content-to-react";
function customSerializer({ props, defaultTag }) {
const { style = "normal", _type = "paragraph" } = props.node;
// if user hasn't selected a style, and it should be h1,h2,h3... force it
if (style === "normal" && defaultTag) {
return React.createElement(defaultTag, {}, props.children);
}
// default styling
return BlockContent.defaultSerializers.types.block(props);
}
export default function serializers(defaultTag) {
return {
list: props => {
const { type } = props;
const bullet = type === "bullet";
if (bullet) {
return <ul>{props.children}</ul>;
}
return <ol>{props.children}</ol>;
},
listItem: props => <li>{props.children}</li>,
types: {
block: props => customSerializer({ props, defaultTag }),
}
};
}Jul 1, 2021, 7:50 PM
S
Hey User, I was searching for the same question and came across your post. It might not be relevant to you anymore, but I’ve found you can override the default ‘Normal’ style. This means you can set custom styling but it doesn’t render the dropdown in the block editor (meaning that the user doesn’t need to select a style):
import React from 'react'
const TitleStyle = props => (
<span style={{fontFamily: 'Garamond', fontSize: '2em'}}>{props.children}</span>
)
export default {
title: "Content",
name: "content",
type: "document",
fields: [
{
title: "Text",
name: "text",
type: "array",
of: [
{
type: "block",
styles: [
{ title: "Normal", value: "normal", blockEditor: {render: TitleStyle} },
],
lists: [],
marks: {
decorators: [],
annotations: [],
},
},
],
},
],
}; Jul 29, 2021, 11:27 AM
J
Awesome!! Thanks User
Jul 31, 2021, 8:12 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.