­ in text, hyphens

Developing with Prismic
1

When I try to use ­ do manually decide where to get hyphens it prints it out as text if i use
prismic-rich-text :field="slice.primary.description"

Do you know how to fix this?

2

Hey @victorthevictoriousv, which is the output you're expecting to render from the description Rich Text field, and what are you getting instead?

4

This thread has been closed due to inactivity. Flag to reopen.

6

Hey @Pau , I'm running into an issue with this as well. I'm struggling to get hyphens: auto to work when using and from @prismicio/react (I realize this post is tagged with nuxtjs, happy to start a new thread). Hoping someone can help me understand why this isn't working.

Would either like to 1) get hyphens: auto working, or 2) at least figure out how to get ­ working if the former isn't possible.

  1. <div class='container'><PrismicRichText field={document.data.title} ></PrismicRichText></div> does not hyphenate automatically on word breaks where CSS contains .container { hyphens: auto } and document.data.title is a rich text field containing "abbreviation"

Output:
"abbreviation"
Expected:
"abbrevia-
tion"

  1. <div class='container'><PrismicRichText field={document.data.title} ></PrismicRichText></div> does not hyphenate automatically on word breaks where CSS contains .container { hyphens: manual } and document.data.title is a rich text field containing "abbrevia­tion"

Output:
"abbrevia­tion"
Expected:
"abbrevia-
tion"

abbreviation

Thanks for any help you can provide!

7

Hi Taylor I think you might need to modify the output of the Rich Text field, and provide a list of component overrides to the components prop. The list of components maps an element type to its React component. Here is an example using custom components for first-level headings and paragraphs:

<PrismicRichText
  field={document.data.example_rich_text}
  components={{
    heading1: ({ children }) => <Heading className="container">{children}</Heading>,
    paragraph: ({ children }) => <p className="paragraph">{children}</p>,
  }}
/>

Learn more about customizing Rich Text output in HTML Serializing.

9

Thanks for the quick response! After some more investigating, it turns out that the words weren't being hyphenated in Chrome and Firefox because they were capitalized - didn't think to consider that..

So now I'm stuck trying to render the rich text with &shy; soft hyphens and hyphens: manual on the container element. I've tried using component overrides similar to your example with <PrismicRichText>, <PrismicText>, and also tried using asHTML() and asText() from the prismicio/helpers package.

The only thing I've been able to get to work is using dangerouslySetInnerHTML, which is fine, but I'm wondering if there is a better Prismic way to go about it. I read into custom labels as well. Is that how people are handling issues like this?

RichText field:
Re&shy;design

Expected:
Re- design

Actual output for all but the asHTML() method varies across browsers.. one of Re&shy;design, Re&amp;shy;design, while asHTML() outputs <p>Re&shy;design</p>

Thanks again!

1 Like
10

Where are you doing your styling for this? Is it globally or scoped in the component?