We have a customer that we’ve upgraded to 15. Before the upgrade we had customized a property editor by adding some styling, that was injected to the backoffice.
I added the styles through an entry point, and then remembered that property editors now exist in the shadow dom. Is there a way to inject styling directly to a property editor without overwriting it?
I built a react adapter that gets converted into Lit so I build easily any editor I’d like and unregister the original one
Hi @gheithen, and welcome to the forum!
You are on the right path. You have two options, I reckon;
- See if the property editor you want to style exposes any CSS custom variables. They would have the format
--umb-some-variable. These can be set directly from your stylesheet like this:
:root {
--umb-some-variable: #efefef;
}
- You can extend the entire property editor using a manifest file. If you create a web component that extends the built-in property editor, you can set the styling directly in your element without touching much else. Following that, you can register your element as a so-called propertyEditorUi and select that as your UI for the data editor in the Backoffice. All your data should be preserved.
Here is some more information about creating a property editor:
Thank you, @jacob.
Extending sounds like a good idea, is there a way to extend it with all the existing configs and functionality without having to ‘copy’ all the functionality?
If you extend (as in write a JavaScript class that extends our class), you will get the same behavior in your component. Now that you mention it, I’m not so sure you can extend the configuration - you will probably have to copy those over into your manifest file directly. Hopefully there aren’t too many of those or can be left to default.
Out of curiousity, which property editor did you have in mind to apply styling to?
@jacob, when I started this post, I wanted to add styling the tiny mce editor. Since then we changed it out with the tiptap editor. I’m gonna look into whether it can be solved with adding custom extensions instead and unregistering existing ones. Extending the entire editor and copying the configs isn’t something I want to do - I can see that new configs have been added in the latest release, and I don’t want to miss out on that kind of functionality.
That sounds very reasonable. I should think you can unregister any extensions, you don’t like. In fact, many (if not all) of the extensions can be removed directly in the data type configuration in Tiptap.