Introducing Line Breaks Using PrismicRichText from @prismicio/react

Prismic Administrative Support
1

Hi there!

After spending a couple days reading through the documentation, I thought I'd write a post to explain a simple need that I've not seen demonstrated in a way that would allow me to begin formatting text with Prismic.

I will need to use Prismic's serializers to format my content text, and need a simple example of introducing line breaks into content rendered by PrismicRichText from @prismicio/react.

I'm just "not getting it".

Text content appears in my site as a single block of uninterrupted words, but the CMS content contains line breaks to distinguish paragraphs (see attached screen capture). I would like to understand this simple use case of introducing line breaks to text that contains them in the editor. I think this will help me grasp more complex ways of formatting.

I enjoy adopting complex implementations when they offer power and versatility, which this system seems to offer. However I feel that people need to be introduced to the very basics first. I have seen a lack of this kind of content in the documentation.

For me, introducing simple line breaks is this starting point.

Here is the code for my slice:

import styles from "@/styles/slices/AboutRichText/AboutRichText.module.scss";
import { PrismicRichText } from "@prismicio/react";

/**
 * @typedef {import("@prismicio/client").Content.AboutRichTextSlice} AboutRichTextSlice
 * @typedef {import("@prismicio/react").SliceComponentProps<AboutRichTextSlice>} AboutRichTextProps
 * @param {AboutRichTextProps}
 */
const AboutRichText = ({ slice }) => {
  return (
    <section
      data-slice-type={slice.slice_type}
      data-slice-variation={slice.variation}
    >
      <div className={styles.contentWrapper}>
        <div className={styles.textWrapper}>
          {/* This text uses line breaks to separate content into paragraphs. */}
          <PrismicRichText field={slice.primary.about_text} />
        </div>
      </div>
    </section>
  );
};

export default AboutRichText;

rich-text-in-editor
rich-text-in-editor1962×562 71.5 KB

Thanks in advance, and I apologize if this post makes it seem as if an effort hasn't been made to document how to format text. It's obvious it has; I just can't find a starting point from which to ease into this system of formatting text.

2

Hi @michael.britton,
Have you console.log your slice.primary.about_text property? Are you getting an array as you'd expect?
I get something like the following:

console.log('my richText says -->', JSON.stringify(slice.primary.about_text))
[{"type":"paragraph","text":"Elit anim aliqua cupidatat consectetur eiusmod sint elit incididunt aute irure. Anim cupidatat amet voluptate nostrud.","spans":[],"direction":"ltr"},{"type":"paragraph","text":"Second Paragraph","spans":[],"direction":"ltr"}]
3

Yes, I get the same. Thanks for the response! How do I add the serializer?

5

Hi @michael.britton,

The line breaks should be happening automatically with no configuration, which suggests to me that something else might be going on here.

When I look at the screenshot of your text input, it looks like the line spaces are a little wider than usual. By any chance, do you create your line breaks by typing shift + enter? If so, it's possible you're creating a line feed instead of a carriage return. A line feed will not create a new paragraph — it will instead create a \n character in your text, which might get ignored depending on the context in which it is rendered.

Let me know if that helps with your issue. It's also possible that I've misunderstood your issue altogether, in which case please let me know.

Sam

6

When I enter text into a rich text field, I'm not able to create a line break by pressing RETURN. I'm using MacOS on an M1 Mac.

Nothing happens. When I press SHIFT+ENTER, a line break does happen, and a /n is produced in the output.

I've seen examples of serializer methods that allow specific formatting. Is one necessary to introduce line breaks?

Why does nothing happen when I press RETURN to create a line break in my rich text content?

image
image1166×386 16.6 KB

7

Posting back to let everyone know I was following prismic-dom documentation like a moron, and thought I needed a serializer to format text. Not completely sure if this is still necessary, but I'm passing fields to PrismicRichText from @prismicio/react and formatting is happening as expected.

2 Likes