Adding my own style sheet to displaying custom styles added to TipTap RTE Umbraco 17 via umbraco-package.json

Questions
1

Background

I have added custom styles to the Umbraco 17 TipTap RTE via a umbraco-package.json, which all works great

image
image944×768 40.2 KB

When I select one of these options, again it works great and the classes are applied to the markup. Take for example

<p class="text text--medium">

Problem

I cannot add my own style sheet to style .text–medium and no way (it appears) to inject my styles. The issue appears to be the ShadowDom? I have tried everything I can think off at this point.

Any ideas?

2

Hi @charlesa-ccs

Have you created a CSS file under Stylesheets in the backoffice and associated it with your RTE data type?

image
image400×113 6.12 KB

Until you do that, the CSS won’t get applied in the backoffice.

Justin

3

Hi @justin-nevitech the style sheet is there and loaded correctly.

image
image827×259 16 KB

For example when I add the class ‘text–large’ to a <p></p> within the TipTap RTE I expect to see the text at font-size: 1.6rem, but this style is never picked up looking in devtools :frowning:.

4

Hi @charlesa-ccs

Have you added it into your RTE datatype as per my screenshot?

Justin

5

I did not see your screen shot. Of course it needs to be added to the RTE via the styles :woman_facepalming:

6

Thanks so much! That was driving me insane :rofl: