Extended Structured Text

Extends Structured text fields to add additional marks and block styles

Install plugin

This is a Community Plugin! Learn how create your own plugin, or copy and remix existing ones in our documentation

Extended Structured Text

This is a DatoCMS plugin designed to extend the default structured text marks and block styles.

Custom Marks

This plugin adds support for the following marks: <small />, <sub /> & <sup />

see customMarkRules on the StructuredText component exported from datocms-react

1
export const spanRule = renderNodeRule(isSpan, ({ ancestors, node, key }) =&gt; {
2
  const marks = {
3
    strikethrough: (props) =&gt; <s />,
4
    superscript: (props) =&gt; <sup />,
5
    highlight: (props) =&gt; <mark />,
6
    strong: (props) =&gt; <strong />,
7
    subscript: (props) =&gt; <sub />,
8
    underline: (props) =&gt; <u />,
9
    emphasis: (props) =&gt; <em />,
10
    code: (props) =&gt; <code />,
11
    small: (props) =&gt; <small />,
12
  };
13

14
  node.marks?.forEach((mark) =&gt; (children = marks[mark]({ children })));
15

16
  return <span>{children}</span>;
17
});

Custom Block Style

It also adds in a block style for blockquote which you can use to output blockquote's instead of paragraph tags:

Add this to your application's code See: <https://github.com/datocms/react-datocms/blob/master/docs/structured-text.md#override-default-rendering-of-nodes>

1
export const paragraphRule = renderNodeRule(
2
  isParagraph,
3
  ({ ancestors, children, key, node }) =&gt;
4
    node.style === 'blockquote' ? (
5
      <blockquote>
6
        {children}
7
      </blockquote>
8
    ) : (
9
      <p>{children}</p>
10
    )
11
);

Alignment

We removed text alignment from this plugin as it makes much more sense being a block and we would encourage you to add text alignment as a custom block instead.