# Visual Editor breaks all richText styling

**URL:** <https://forum.builder.io/t/visual-editor-breaks-all-richtext-styling/1689>\
**Category:** Technical Questions\
**Tags:** visual-editor, custom-components\
**Created:** [February 3, 2022, 9:03am UTC](https://forum.builder.io/t/visual-editor-breaks-all-richtext-styling/1689 "2022-02-03T09:03:05Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![radikris](https://avatars.discourse-cdn.com/v4/letter/r/48db29/32.png) [@radikris](https://forum.builder.io/u/radikris)\
**Post date:** [February 3, 2022, 9:03am UTC](https://forum.builder.io/t/visual-editor-breaks-all-richtext-styling/1689/1 "2022-02-03T09:03:05Z")

</div>

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)

---

<div class="post-metadata">

**Author:** ![maddy](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/maddy/32/11_2.png) [@maddy](https://forum.builder.io/u/maddy)\
**Post date:** [February 3, 2022, 2:49pm UTC](https://forum.builder.io/t/visual-editor-breaks-all-richtext-styling/1689/2 "2022-02-03T14:49:50Z")

</div>

Hi @radikris! Can you share the link to the Builder page this is occurring on?

---

<div class="post-metadata">

**Author:** ![radikris](https://avatars.discourse-cdn.com/v4/letter/r/48db29/32.png) [@radikris](https://forum.builder.io/u/radikris)\
**Post date:** [February 3, 2022, 3:03pm UTC](https://forum.builder.io/t/visual-editor-breaks-all-richtext-styling/1689/3 "2022-02-03T15:03:44Z")

</div>

[https://cdn.builder.io/api/v2/content/cookies/11e03ad2e73d4b759f034182637a239c?apiKey=29ac5503f46b4b0ea80336edf8478e24&includeRefs=true&fields=data](https://cdn.builder.io/api/v2/content/cookies/11e03ad2e73d4b759f034182637a239c?apiKey=29ac5503f46b4b0ea80336edf8478e24&includeRefs=true&fields=data)

Is this link good enough, or where can I link this? (this link has the apiKey, and this page is the ‘home’ urlPath: /

---

<div class="post-metadata">

**Author:** ![maddy](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/maddy/32/11_2.png) [@maddy](https://forum.builder.io/u/maddy)\
**Post date:** [February 3, 2022, 3:26pm UTC](https://forum.builder.io/t/visual-editor-breaks-all-richtext-styling/1689/4 "2022-02-03T15:26:14Z")

</div>

@radikris I found the page, thank you! I will take a look. What framework are you using?

---

<div class="post-metadata">

**Author:** ![radikris](https://avatars.discourse-cdn.com/v4/letter/r/48db29/32.png) [@radikris](https://forum.builder.io/u/radikris)\
**Post date:** [February 4, 2022, 7:54am UTC](https://forum.builder.io/t/visual-editor-breaks-all-richtext-styling/1689/5 "2022-02-04T07:54:59Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![maddy](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/maddy/32/11_2.png) [@maddy](https://forum.builder.io/u/maddy)\
**Post date:** [February 4, 2022, 5:28pm UTC](https://forum.builder.io/t/visual-editor-breaks-all-richtext-styling/1689/6 "2022-02-04T17:28:36Z")

</div>

Thanks for those details! Would you mind sharing the code for your Custom Hero component so we can investigate further?

---

<div class="post-metadata">

**Author:** ![radikris](https://avatars.discourse-cdn.com/v4/letter/r/48db29/32.png) [@radikris](https://forum.builder.io/u/radikris)\
**Post date:** [February 5, 2022, 9:00am UTC](https://forum.builder.io/t/visual-editor-breaks-all-richtext-styling/1689/7 "2022-02-05T09:00:53Z")

</div>

I would say it is not the issue with my custom component, it has worked properly before:

```auto
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:

```auto
    {
      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:

 ![image](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/c/c5d7973f12fcc41b01fb9c88f08870272801c7c8.png)  
If I try to edit for example the Text in the editor  
 ![image](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/f/fe31c4fa372786f28ef8e4218dec60becd15f494.png)  
 ![image](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/9/9f5a215aa5dbb2c1c00e6c323e6e12d160e0369a.png)

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!

---

<div class="post-metadata">

**Author:** ![maddy](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/maddy/32/11_2.png) [@maddy](https://forum.builder.io/u/maddy)\
**Post date:** [February 7, 2022, 6:10pm UTC](https://forum.builder.io/t/visual-editor-breaks-all-richtext-styling/1689/8 "2022-02-07T18:10:28Z")

</div>

@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.

---

<div class="post-metadata">

**Author:** ![radikris](https://avatars.discourse-cdn.com/v4/letter/r/48db29/32.png) [@radikris](https://forum.builder.io/u/radikris)\
**Post date:** [February 7, 2022, 8:25pm UTC](https://forum.builder.io/t/visual-editor-breaks-all-richtext-styling/1689/9 "2022-02-07T20:25:15Z")

</div>

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:

 ![image](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/b/b62b3013c155956353067544fd965476fc294714.png)  
 ![image](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/a/aed4ceea539c6070e22d946340215310736064fd.png)

But the difference between Hero and this CustomGrid  
 ![image](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/9/97683b89379b27ba656b8c476e6f1107923c2ad7.png)

And the hero don’t has any wrapper p element around the html-parser  
 ![image](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/6/63540712ffab753272394735becca154ddd4338f.png)

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.

---

<div class="post-metadata">

**Author:** ![amineo](https://avatars.discourse-cdn.com/v4/letter/a/edb3f5/32.png) [@amineo](https://forum.builder.io/u/amineo)\
**Post date:** [February 9, 2022, 7:30pm UTC](https://forum.builder.io/t/visual-editor-breaks-all-richtext-styling/1689/10 "2022-02-09T19:30:53Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![maddy](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/maddy/32/11_2.png) [@maddy](https://forum.builder.io/u/maddy)\
**Post date:** [February 9, 2022, 7:50pm UTC](https://forum.builder.io/t/visual-editor-breaks-all-richtext-styling/1689/11 "2022-02-09T19:50:38Z")

</div>

@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?

 ![Screen Shot 2022-02-09 at 2.36.45 PM](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/4/418094a4d275a5372bccaa7092b7f44e8827a817.png)

---

<div class="post-metadata">

**Author:** ![radikris](https://avatars.discourse-cdn.com/v4/letter/r/48db29/32.png) [@radikris](https://forum.builder.io/u/radikris)\
**Post date:** [February 9, 2022, 8:26pm UTC](https://forum.builder.io/t/visual-editor-breaks-all-richtext-styling/1689/12 "2022-02-09T20:26:56Z")

</div>

@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:

---

<div class="post-metadata">

**Author:** ![amineo](https://avatars.discourse-cdn.com/v4/letter/a/edb3f5/32.png) [@amineo](https://forum.builder.io/u/amineo)\
**Post date:** [February 9, 2022, 8:57pm UTC](https://forum.builder.io/t/visual-editor-breaks-all-richtext-styling/1689/13 "2022-02-09T20:57:51Z")

</div>

@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**

```auto
<strong class="text-highlight">Some Text</strong>

```

**Whats happening is the class attribute gets removed**

```auto
<strong>Some Text</strong>

```

Hope this helps to clarify things

---

<div class="post-metadata">

**Author:** ![maddy](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/maddy/32/11_2.png) [@maddy](https://forum.builder.io/u/maddy)\
**Post date:** [February 9, 2022, 9:14pm UTC](https://forum.builder.io/t/visual-editor-breaks-all-richtext-styling/1689/14 "2022-02-09T21:14:44Z")

</div>

@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!

---

<div class="post-metadata">

**Author:** ![maddy](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/maddy/32/11_2.png) [@maddy](https://forum.builder.io/u/maddy)\
**Post date:** [February 10, 2022, 6:31pm UTC](https://forum.builder.io/t/visual-editor-breaks-all-richtext-styling/1689/15 "2022-02-10T18:31:45Z")

</div>

@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!

---

<div class="post-metadata">

**Author:** ![amineo](https://avatars.discourse-cdn.com/v4/letter/a/edb3f5/32.png) [@amineo](https://forum.builder.io/u/amineo)\
**Post date:** [February 12, 2022, 1:19pm UTC](https://forum.builder.io/t/visual-editor-breaks-all-richtext-styling/1689/16 "2022-02-12T13:19:36Z")

</div>

@maddy Thanks so much! The rich text editor is no longer stripping classes and is working great.

---

<div class="post-metadata">

**Author:** ![amineo](https://avatars.discourse-cdn.com/v4/letter/a/edb3f5/32.png) [@amineo](https://forum.builder.io/u/amineo)\
**Post date:** [February 28, 2022, 7:40pm UTC](https://forum.builder.io/t/visual-editor-breaks-all-richtext-styling/1689/17 "2022-02-28T19:40:51Z")

</div>

@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](https://www.dropbox.com/s/9go4semst5y53lm/builder-editor-bug.mov?dl=0)

---

<div class="post-metadata">

**Author:** ![maddy](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/maddy/32/11_2.png) [@maddy](https://forum.builder.io/u/maddy)\
**Post date:** [February 28, 2022, 8:57pm UTC](https://forum.builder.io/t/visual-editor-breaks-all-richtext-styling/1689/18 "2022-02-28T20:57:51Z")

</div>

Hi @amineo! Thanks for reaching back out, I will share this with our team.

---

<div class="post-metadata">

**Author:** ![amineo](https://avatars.discourse-cdn.com/v4/letter/a/edb3f5/32.png) [@amineo](https://forum.builder.io/u/amineo)\
**Post date:** [February 28, 2022, 9:12pm UTC](https://forum.builder.io/t/visual-editor-breaks-all-richtext-styling/1689/19 "2022-02-28T21:12:36Z")

</div>

Thanks so much for the quick response!

---

<div class="post-metadata">

**Author:** ![amineo](https://avatars.discourse-cdn.com/v4/letter/a/edb3f5/32.png) [@amineo](https://forum.builder.io/u/amineo)\
**Post date:** [March 22, 2022, 8:15pm UTC](https://forum.builder.io/t/visual-editor-breaks-all-richtext-styling/1689/20 "2022-03-22T20:15:36Z")

</div>

Hello @maddy , do you know if there has been any movement on this bug? Much appreciated!

[Next page](https://forum.builder.io/t/visual-editor-breaks-all-richtext-styling/1689.md?page=2)