Hi!
I have a project which I created in my Windows laptop, but now I changed for MacBook (MacBook pro), and when I try to edit one of my custom components fields, and I click on this component all of my default styling will be deleted:
You can see this in action in this video:
Please let me know, why is this happening, have you seen something like that before? (Only breaks in mac, windows working properly, although same Chrome browser)
Hi @radikris! Can you share the link to the Builder page this is occurring on?
Is this link good enough, or where can I link this? (this link has the apiKey, and this page is the ‘home’ urlPath: /
@radikris I found the page, thank you! I will take a look. What framework are you using?
I am using next.js, and my custom component has richText field, and this field is richText with a defaultValue (which has some styling), for styling I use TailwindCSS, everything worked properly till yesterday, I don’t know what happened, but the richText styling is gone after I click on an item
Like it would override all of my richText style and will be only a simple paragraph tag
Thanks for those details! Would you mind sharing the code for your Custom Hero component so we can investigate further?
I would say it is not the issue with my custom component, it has worked properly before:
const CustomHero = ({
hasUnderline,
supertitle,
title,
description,
heroContent,
buttonList,
reversed,
}) => {
const cols = heroContent == null || heroContent == '' ? 1 : 2
const order = reversed ? '-order-1' : 'order-1'
return (
<>
<div className={`grid grid-cols-${cols} gap-2`}>
<div className="col-span-1">
<div className="inline-flex flex-col items-start justify-start">
<div className="flex flex-col items-start justify-start">
<div className="flex flex-col space-y-1 items-start justify-start">
{supertitle && parse(supertitle)}
{title && parse(title)}
</div>
{description && parse(description)}
</div>
<div className="inline-flex space-x-8 items-center justify-start">
{buttonList &&
buttonList.map((item, index) => {
const button = item.button
return (
<CustomButton
key={index}
buttonType={button.buttonType}
link={button.link}
text={button.text}
/>
)
})}
</div>
</div>
</div>
{heroContent && (
<div
className={`col-span-1 left-0 right-0 mr-auto w-full h-full ${order}`}
>
{parse(heroContent)}
</div>
)}
</div>
{hasUnderline && <div className="bg-gray-300 h-0.5 w-full" />}
</>
)
}
But if you see the richText editor, it is buggy. I add default value, eg:
{
name: 'title',
type: 'richText',
defaultValue: `<p className="text-5xl font-semibold leading-10 text-Barion-gray">
The smartest way to pay
</p>`,
},
And so the richText will have this custom css values, but when you click in the richText editor and modify the text, it will override all of the default css, and it will be a plain paragraph, I think that’s the root issue of this styling disappearing problem.
If I click on it by default:
As you can see all of my previous default styling vanishing just by typing in this richText editor, so it is definitely not the expected behaviour in my opinion.
Let me know!
@radikris Thanks for sharing those details. I tried reproducing this issue on my end but haven’t been able to reproduce richText styling breaking on mac. Your Customgrid component also has richText, but I’m not able to reproduce this issue with that element so it seems specific to the Custom hero component. Is there any difference between the way the two components are registered? If you can share a reproduction with codesandbox/stackblitz we can dig in further.
Hi!
I can say that it is not the issue with mac, I switched back to Windows but the issue is the same:
I can just say, that the richText editor will override the current styling:
You could not see that in the CustomGrid, although it also got overriden:
But the difference between Hero and this CustomGrid
And the hero don’t has any wrapper p element around the html-parser
But still breaks the styling, and I noticed this bug earlier as well, you can add any css class to the richText paragraph element, and if you for example change the color or something it will override it.
Please investigate more on this richText editor field.
I can confirm this behavior. If you add a vanilla text block and add classes via the code view, go back to wysiwyg, shift focus to another element all class attributes will be stripped. Is there something we can configure to turn this off? It’s pretty aggressive
@radikris If you add your styling directly to the default value like pictured above, these styles will be wiped out when you replace your default text. If you want your styles to persist, you can instead add wrapper <div>s to the element that has the relevant classes. So we can investigate any other styles that are removed when editing, can you please provide a reproduction with codesandbox/stackblitz?
Hi @amineo! To confirm, are you referring to editing a default text block, not within a custom component?
@amineo @maddy It doesn’t matter if we are talking about a custom compoknent or a drag and drop richtext editor, if I click on my component and click edit, my cursor automatically will focus the richText editor, and as you said it will wipe out the styles by default although the text will stay the same.
This is the problem with the editor.
I can just link here again my video, I can not emphatise that more:
@maddy @radikris – Yes, the richText editor seems to strip styles regardless if its from the standard Builder Text block component or from a custom component. When the rich text editor loses focus/regains focus it strips all class attributes. @radikris videos above illustrate this.
Expedited result is to keep the class attribute
<strong class="text-highlight">Some Text</strong>
Whats happening is the class attribute gets removed
<strong>Some Text</strong>
Hope this helps to clarify things
@radikris @amineo Thank you for those details. I’ve shared this with our engineering team so we can investigate further and I’ll keep you both updated!
@radikris @amineo Our engineering team has released a fix for editing html in the rich text editor, let me know if this has resolved the issues you were running into!
@maddy Thanks so much! The rich text editor is no longer stripping classes and is working great.
@maddy It appears that this issue isn’t completely fixed.
It looks like the editor now strips all classes/styling if content was updated from the WYSIWYG Editor after styling has been applied from source.
Please find a link to a screen-capture illustrating this bug: https://www.dropbox.com/s/9go4semst5y53lm/builder-editor-bug.mov?dl=0
Hi @amineo! Thanks for reaching back out, I will share this with our team.
Thanks so much for the quick response!
Hello @maddy , do you know if there has been any movement on this bug? Much appreciated!