Additional text styles

[lukasoppermann]

Hey, I am not sure where the right place to suggest/ask this is, I hope it is hear.

It would be very helpful if we could define additional text styles for the rich editor. Is this planned?

Maybe it could be done by allowing this via an extension extending the rich text editor.

[lukasoppermann]

Hey @Khaledgarbaya, awesome, so you are working on it? Or is it really done, done already? How will / is it implemented. This is awesome 🎉 as it means I can actually use the rich text field. 👍

[Khaledgarbaya]

Hey @lukasoppermann,

I terribly sorry for this I think I might have commented in the wrong ticket 😅

[lukasoppermann]

Oh, nooo. 😢 I was getting pretty excited already. So is there any chance of any way of adding text styles in the near future?

[martzoukos]

Hello @lukasoppermann ,

Thanks for your feedback. This is Spiros, I'm the product manager responsible for the Rich Text Editor. As with most Contentful features, we also built this one to be context agnostic so we've intentionally left it style-free. You can see that we only support things that can be expressed in a semantic way, namely HTML elements so, while for example we don't have text alignment options, we have headings and list options. The same applies with text styling (what kind of formatting would you like to apply? It would be helpful to understand your use case) for which a workaround could be doing it via Inline Entries where you can create a Content Type for the styling option and create a new entry for each formatted word.

Regarding extensibility of this feature (which would be another way to achieve this), we don't have this in our immediate priorities as we are tackling some heavier performance issues with this feature before we move it out of the Beta phase.

I hope the above provides some clarity.

Let me know if you have any questions.

[lukasoppermann]

That is very sad 😢. I thought the rich text editor was supposed to replace us having hundres of small content pieces put together into a big one.

I don't need predefined styles, what I need is a way to "structure" content in more ways than the few available. For example I have articles with an introduction section. I would like to do this without having an extra content element of the type "intro". For stuff like code bits it is fine, as they need some config, like the language, but somehow having blocks with a special reason should be possible.

I would be fine for me if I could just give blocks a special "type" and deal with the rest e.g. adding classes, etc. in the rendering phase. The blocks could all look the same e.g. have a slight background color and say the different types at the top or something.

Is something like this possible? I understand that styling is not something you are interested in, but I feel that with the current approach the editor is too limited to be really useful.

[Khaledgarbaya]

Hey @lukasoppermann, you can still embed a reference entry that contains all the configurations in Rich text for this special use case and includes it whenever you need this special block.

The rich text does not mean that you can't use any reference entry you can use the best of both world.

[lukasoppermann]

I know, but this means I have to create entries for every second section of the text, which I thought the rich text field should help avoid. In this article https://www.contentful.com/developers/docs/tutorials/general/migrate-to-rich-text/ you suggest, that this makes everything more clean with less nested content sections.

But anything more complex than this example already does not work. For example if you have articles with quotes and pull quotes you need content pieces for one of those. Or if you want to have highlighted "notes" or any other type of special content.

Yes, this can be achieve with content pieces, but it is somewhat cumbersome, as you have to link them, go into them to edit them and have a lot of individual content pieces floating around.

It makes sense that you don't implement those pieces, as they may differ for every user, but giving the possibility to extend the editor to add them myself would be very helpful.

[martzoukos]

Hey Lukas, I see what you mean.

I'm bundling this request together with the other ones regarding extensibility of the Editor. This, currently and for the next couple of months, is not in our plans but such requests do bump this higher in our backlog.

[lukasoppermann]

Hey @martzoukos,

thanks. I totally understand that you have a defined plan and need to focus on stuff like performance first. I am looking forward to seeing the extensibility in the rich text editor. Hopefully rather sooner than later. 😉

[0xGuybrush]

Hi @martzoukos,

Just to add a +1 to this request, since you were saying that bumping requests help move them higher in the backlog 😉

Can see your view-point on making the focus on semantics rather than mark-up, but think there are still a number of use-cases that are missing from the existing elements that all have semantic HTML representations — for example, strikethrough (<del>), subscript (<sub>), superscript (<sup>) . We have a use-case now to add in-page footnote annotations, where superscript would be very useful. Trying to achieve something like this with embeddded entries would be make the editor experience quite unwieldy.

Also, I think that the current implementation of "bold", "italic", "underline" and "code" as Marks rather than Node Types already arguably blurs this distinction and allows for annotations that aren't purely semantic.

In HTML5 for example, the <u> element (previously called underline) has been renamed as "Unarticulated Annotation Element":

This element used to be called the "Underline" element in older versions of HTML, and is still sometimes misused in this way. To underline text, you should instead apply a style that includes the CSS text-decoration property set to underline.

— developer.mozilla.org

So the latest HTML5 spec is advising to treat underline as a style rather than a semantic element, which I think is correct — underline is appropriate to typographically add emphasis to something, but you wouldn't normally use it purely for emphasis on the web (like you would in print) as it has an affordance of being a link.

Personally, I agree with you that you wouldn't want to add literal styles to the editor — like font: Tahoma or border: 2px solid red.

But I think that there's definitely a use-case for being able to define my own semantic annotations to existing types (e.g. tip, warning, that to me are more semantically relevant than something like underline) — these could be added via a dropdown list, similar to the Heading list and sent as Marks section of the API response, so hopefully without needing to rework the current structure too much.

[kluhman]

I'd also like to +1 this issue. I want to embed an asset (image) inside my rich text content and it just looks out of place not being centered. I could work build a custom renderer for assets, but then I force a specific style on any embedded asset.

In order to support more than the basic text only page content, we'll need either more built in basic WYSIWYG styles like centering, embedded iframes, etc... or more extensibility for styling.

[ankesh7]

Great work! I would like to have customClasses for each Embedded asset block if possible so that we have flexibility to change styles from our implementation.

[arhoy]

Hi what are the current styling options in contentful for RTF? Currently I see the marks as bold, code, Italic and underline. The blocks are give back paragraphs,headings, lists, etc.

What about hyperlinks? Is there a way to customize hyperlinks styles? I am referencing this article here and could not find a way. https://github.com/contentful/rich-text/tree/master/packages/rich-text-react-renderer Thank you.

[mgmolisani]

@arhoy Hyperlinks are listed in the README. You can customize them.

[arhoy]

@mgmolisani Great thank you! I still cannot get it to show up correct: I am not really sure where the inlines should go and could not find any documentation on how to customize it. Here is part of my file below. Rendering marks and blocks works fine, but not inlines.

` const options = {

      renderMark: {
        [MARKS.UNDERLINE]: text => <Underline>{text}</Underline>,
        [MARKS.BOLD]: text => <Bold>{text}</Bold>,

      },
      renderInlines: {
        [INLINES.HYPERLINK]: text => <Hyperlink>{text}</Hyperlink>,    
      },
      renderNode: {
        [BLOCKS.PARAGRAPH]: (node, children) => <Paragraph>{children}</Paragraph>,
        [BLOCKS.HEADING_1]: (node, children) => <Heading1>{children}</Heading1>,
        [BLOCKS.HEADING_2]: (node, children) => <Heading2>{children}</Heading2>,

        // for embedded entries
        [BLOCKS.EMBEDDED_ENTRY]: (node) => {
          const { title, description } = node.target.fields;
          return <CustomComponent title={title} description={description} />
        }
      },
      renderText: text => text.replace('!', '?'),
  };

` Thanks for your help

[rnacken]

@arhoy You can use it in renderNode like this (in the richtext-object, it is a node which tells you it should be in renderNode):

renderNode: {
    [INLINES.HYPERLINK]: node => <CustomLinkComponent href={node.data.uri}>{node.content[0].value}</CustomLinkComponent>,
}

[hans-lincoln]

Centering text would be so clutch. I'm good with keeping the rich-text editor bare bones and semantic, but text-align just seems so useful. I hate doing hacks like creating "Centered Content" Content Types (gross).

[Ritural]

+1 to this request!

Would be keen to see <sub> and <sup> tags supported since I'm trying to add subscript text for chemical formulas.

A custom tag that could be added to the rich-text editor in Contentful which could wrap nodes and then be handled on the client side would be a great addition - basically what @another-dave was suggesting at the bottom of his message

[jakeherp]

Are there any updates on this? What I am currently missing is a way of having smaller text within the same text block. This could, in theory, be solved with the semantic element <small>. Also would be useful to have <sup> and <sub> as mentioned before.

[topherfangio]

New user here and I cannot fathom why you would want such a barebones editor. The whole point that I can see from Contentful is to build a CMS that allows users to enter their own content into the app.

If I have to go in and make a bunch of edits to get it styled correctly every time they change their mind about how it should look, I'll just choose a different solution.

[Ritural]

Hey @jakeherp,

A potential solution is to re-purpose some of the options in the RichText editor (ones that you won't be using) and then render them out as a different elements.

Luckily I wasn't using the code option in RichText, so on the client side I just rendered out a sup tag instead of a code tag.

Hopefully that helps, but it only works if you aren't already using all the tags 🤷‍♂️

[birksy89]

I have a client who is losing their mind over this.

I've persuaded them to move away from Wordpress to Contentful - And the fact that they can't center a piece of text is causing a lot of tension.

I appreciate there are "hacks" and workarounds for this... But I think this is a lesson for me to remember when considering this platform in the future.

[lukasoppermann]

Hey @Khaledgarbaya are there any news concerning this issue?

[arturhenryy]

Any News? Why is it not possible to simply add some attribute options for images for example. i just want to have an image and text aligned next to each other. image to one side and text on the other side. This seems like an absolute essential basic to me in order to have freedom in structuring the content.

[geoffgolder-ah]

+1 to this. What I am missing is the ability to "name" an anchor tag, so that that I can provide in-page "jump links" (ie, linking to #something and having it jump to the part. Sometimes called internal bookmarks.

+1 to this. We are currently in the midst of migrating from WordPress to Contentful and a common functionality such as text alignment is much needed.

[mrkimbo]

Another +1 for this from me. I'd like the option to add optional multi-column display support. Just investigating the feature atm, but would really like to avoid wrapping a rich-text entry as a ref just to add this small option.

[geoffgolder-ah]

fwiw; we gave up and implemented this as a text field with markdown. markdown also allows arbitrary HTML so this worked for us at the expense of making it impossible for our non-technical folks to actually edit the content safely :(

[jakeherp]

@mrkimbo multi column isn't part of this discussion as it requires CSS and classes to the markup in order for it to work. This discussion is to add support for native HTML elements.

[arhoy]

Centering text would be so clutch. I'm good with keeping the rich-text editor bare bones and semantic, but text-align just seems so useful. I hate doing hacks like creating "Centered Content" Content Types (gross).

why cant you just center the text using css text-align?

[0xGuybrush]

@arhoy but hooking onto what? If an editor wants to have e.g. an article with some centre-aligned text in the middle (pull quotes, quotations, poetry, etc.) but otherwise left-aligned body text, this becomes difficult to do without having a structure of:

• Left Aligned Text Area One
• Centre Aligned Text Area One
• Left Aligned Text Area Two
• Centre Aligned Text Area Two

etc.

To make rich-text editor more powerful for non-tech users while also allowing developers to mark things up and style them, we need a way to wrap blocks of content in either HTML tags (sup, del) or with attributes (e.g. <span class="quotation">) that can then have text-align: center attached.

[parkersweb]

Just another +1 - I understand the concern to separate content/presentation concerns - but having to divide the content into so many chunks feels like I'm going to need to make the interface incredibly complex to create simple formatting indications. Ideally I guess I'm perhaps looking for something that would enable you to add classes to the markup - but I'm happy to find a simple way to do it by alternative means - preferably without writing a shortcode parser in the renderer 😉

[yevmoroz]

+1 to this

[jasonhill]

Another +1 for this. Creating content types to suppport this is a workaround but having lots of content types quickly becomes cost-prohibitive too as you have to move up to higher pricing tiers. It also fragments all the content in the rich text field making it clunky to maintain, so being able to add custom classes to elements would be extrememly useful and solve a lot of issues here.

[ezelohar]

Hi, -

+1 from me :)

Is there any update when additional types for rich text will become available like text centering?

Thanks

[brendan-rius]

+1 please do this, this is our main problem with contentful. We would need a way to either customize the rich text editor, or to simply allow to pass some metadata to nodes in the rich text editor

[sumeyradavran]

I think it is essential to align image and text whereever non-tech users want. There is really no way to do this?

[franknoel]

+1 to this. Is there any news from Contenful? Also, did anyone found a temporary solution about this? (Like a custom extension)

[sumeyradavran]

+1 to this. Is there any news from Contenful? Also, did anyone found a temporary solution about this? (Like a custom extension)

Can you share your solution?

[ezelohar]

We have an entity (Widget) which has a templateId (dropdown) and one of the options is center and this Widget (Entity) also has a rich text field. Then all content in this field will be centered when rendered.

[lukasoppermann]

I used to do the same @ezelohar but it is really cumbersome for editing. I currently try to bend the possibilities in a way that I can use mostly the given options.

I only use embedded containers for: Code blocks, Images, Blocks with content (replacing a div basically) and collections of items (also the block element). The rest I try to solve via css.

However if you contentful (@Khaledgarbaya) could only add one element that allows to add classes, that would solve so much pain. All most would need is basically a pop-over like the link pop-over that allows us to add classes.

Or even better to add custom widgets to the editor. I still hope at some point contentful will move towards us all here. 😉

[parkersweb]

My only idea (which I've not built yet) was to parse the output before rendering to support Wordpress like shortcodes - something along these lines: https://www.alephsf.com/articles/tutorial-parsing-wordpress-shortcodes-in-react-redux

[arhoy]

@birksy89 ButterCMS has this feature and a lot more. Way more user friendly IMHO

[jibzo]

Does anyone else finds it absolutely ridiculous that you cant center text?

[arhoy]

Yes, and that is why I am using Butter CMS instead.

On Wed, Jun 10, 2020 at 3:56 AM jibzo notifications@github.com wrote:

Does anyone else finds it absolutely ridiculous that you cant center text?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/contentful/rich-text/issues/56#issuecomment-641893643, or unsubscribe https://github.com/notifications/unsubscribe-auth/ACPMK7NVTIMLY5U5QIURJJTRV5KFNANCNFSM4GMTMONQ .

[marianoa]

You can extend and customize the base field editors as they are available here.

Example for the rich text editor - hope this helps!

[jibzo]

Thanks for this! How would you go about using that to center text?

[Khaledgarbaya]

as @marianoa mentioned you can extend the rich text editor and use a custom one. All the field editors are opensource. I will close this ticket since there are no plans to work on such a feature right now. I also would like to remind everyone that we have a Code of conduct so please read it wisely before post off-topic comments