DatoCMS plugin: Custom text Styles

This DatoCMS plugin makes it possible to add custom styles to the editor of Structured text fields by setting css properties. You can add as many styles as you'd like in the Plugin settings.

Features

• Add custom styles to editor of Structured Text Fields
• Add custom CSS class names to rendered nodes in your Structured Text Fields

Configuration

Plugin Settings

Add your own Custom Styles. You can set the following attributes:

• Slug Set this slug to what you want your final css class to be. Please Note: Upon changing this property, you will have to update all Structured Text Fields already used in DatoCMS.

• Title This title will be shown in the DatoCMS Structured Text editor.

• Node For now, you can choose between heading and paragraph

• CSS This is the CSS shown in the DatoCMS Structured Text editor

Front End Structured Text Implementation

Nodes inside Structured Text will be rendered with a style attribute corresponding with the Slug set in the Plugin Settings. (See more info from DatoCMS)[https://www.datocms.com/docs/plugin-sdk/structured-text-customizations#adding-custom-styles-to-nodes]

1
{
2
    "type": "paragraph",
3
    "style": "stand-out",
4
    "children": [
5
      {
6
        "type": "span",
7
        "value": "This is a stand out"
8
      }
9
    ]
10
},

Update your front end so that you attribute the style property as a CSS class.

1
// example of a possible implementation of a Paragraph Node
2
---
3
import type { Paragraph } from 'datocms-structured-text-utils';
4

5
interface Props {
6
  node: Paragraph;
7
}
8

9
const { node } = Astro.props;
10
---
11
// Style attribute ('stand-out') will be accesible from the node
12
// Paragraphs that have a custom style of 'Shout Out' will have the css class 'stand-out'
13
<p>&lt;slot /&gt;</p>

1
<p> This is a Shout Out</p>

You can now proceed to implement your own custom CSS for the stand-out class

1
p.stand-out {
2
  font-size: 24px;
3
  color: pink;
4
}