Features of Rich text Editor

Authors & Editors
,
1

Hi,

We got some feedback from our authors who were entering content for our partners. These were around a few basic features around rich text editors
a) Superscript - we have a lot of content where we need to use the superscript in the editor. Currently this is not possible from the menu items we have. Is there a way to get the superscript working?
b) Multiple Blank lines - Currently we are able to get only 1 blank line between paragraphs, there is no way to get more than 1 blank lines (like 2 blank lines) between paragraphs or contents/bullet points. This makes content look very close to each other and cluttered.
c) No option for Font selections. Right now we have only H1,h2,h3 but no paragraph or smaller font selection. Is there a way to add multi fonts?

Do we have any workarounds for these 3 items?

Thanks,
Nitesh.

1 Like
2

Hey @ngandhi

the editor for long text is actually not a “Rich Text Editor” in the classic sense.

As we’re only providing content and not the representation, you build the representation yourself. This can change from target to target (e.g. HTML vs. Word document vs. some native app components), so we make no assumptions about it and provide you the content in Markdown format, which can be rendered to basically anything you need to.

a)

A classic workaround (often used on GitHub for example) is to embed HTML tags into your Markdown document, as most of the Markdown libraries have HTML as the default target.

Please note, that with this approach you’d need to take care of finding those tags and render them to the appropriate display format for non-HTML targets. Also the Contentful editors preview tab wouldn’t show those renderings,

(Superscript tag in HTML is <sup></sup>. )

b)

The blank lines are actually preserved in the string that Contentful serves back.

c)

Fonts are representation only, and therefore should be handled by your view layer as well.

I hope this helped,
Stephan

1 Like
3

Hi Stephan, Thanks for your response. I am interested in better customization of RTF. DO you have any github samples or contentful examples you can share?
To clarify, what you mean is that inside the app.contentful.com RTF editor I should display my text like
and then in my code editor handle the custom styling?

I think that makes sense but how about if I want to show two different styles of superscript tags. I dont see how to pass in classNames on the front end so not sure how that would be possible.

Thanks!

4

We are an environmental organisation that need to use subscript for displaying things like CO2 and also the degree symbol for 1.5°. We’ve managed to get around this by using html within the rich text editor but our users are non-technical, so it is a brittle solution. This is also the reason we opted for rich text over markdown - which would be too daunting for most users.

Are there any plans to enhance the rich text editor to allow for sub/superscript as well as inserting special characters (like you can in the markdown editor)?

Thanks,
Jamie

5

I would love to see the subscript and superscript added to the Rich Text Editor as it seems like a very basic mark to add.

I have implemented a temporary work around using the contentful javascript plugin @contentful/rich-text-react-renderer

Adding this to the options will replace CO2 with the subscript version. It’s not ideal, but it does the job.

const options = {
renderText: text => {
	return text.split('CO2').reduce((children, textSegment, index) => {
		const SubText = () => (<>CO<sub>2</sub></>)
		return [...children, index > 0 && <SubText key={index} />, textSegment];
	}, []);
},

}

6

const reactStringReplace = require(“react-string-replace”);
{reactStringReplace(
item.combo.chemistry.synonyms[0],
“@2”,
(match, i) => (
{match.slice(1)}
)
)}