BUG : When editting font-size in navbar-link the text inside get duplicated

[lechuhuuha]

What browser are you using?

Reproducible demo link You can test directly on https://grapesjs.com/demo-mjml.html

Describe the bug How to reproduce the bug?

1. Add navbar-link to a section
2. Addtext insise navbar-link
3. Use style manager to edit font-size (resize its) What is the expected behavior? The text changed font-size

What is the current behavior? The text get duplicated everytime you editting but reload make its turn to normal. Probably relate to render in view in NavBarLink.ts Here is the video reproducible the bug https://user-images.githubusercontent.com/59781669/206948681-43b6fe64-446a-45a8-98d8-a304b027f1f6.mp4 @DRoet does you have any idea to where to start looking for this issue? @ronaldohoch have you ever encounter this issue before.

Thanks

[ronaldohoch]

Hello!

We didn't find this bug, maybe @gustavohleal has some idea.

We have removed the tagName from original from <a> to <span> because of ckeditor.

[gustavohleal]

Hi. I was testing the bug here. It only happens when you edit the text using the RTE first and then changes the font-size with the style manager. When the text is edited by the RTE it inserts a new tag around the text. If it is to be bold he will put a <strong> If you change the font-size or font-family it will put a <span> with the style. But when you edit using the style manager the new font-size is added to the <a> element of the link component. Actually, after changing the element using the RTE any changes made by the style manager will duplicate the text. This does have something with the way the link element is being rendered in the view. I didn't look into the code to find a solution yet but this explains the behavior with more details.

There are some inconsistencys between the styles shown by the RTE and the style manager. If you change something with the RTE it does not update the style manager but trigger this bug. In our editor @ronaldohoch and I removed some typograph options from the style manager and we use CKEditor as the RTE. So we have to change a few things in the navbar-link element as shown by his print. I will investigate later this but if @DRoet has some opinion on this please tell us where to begin looking into.

[lechuhuuha]

Hi. I was testing the bug here. It only happens when you edit the text using the RTE first and then changes the font-size with the style manager. When the text is edited by the RTE it inserts a new tag around the text. If it is to be bold he will put a \<strong\> If you change the font-size or font-family it will put a <span> with the style. But when you edit using the style manager the new font-size is added to the <a> element of the link component. Actually, after changing the element using the RTE any changes made by the style manager will duplicate the text. This does have something with the way the link element is being rendered in the view. I didn't look into the code to find a solution yet but this explains the behavior with more details.

There are some inconsistencys between the styles shown by the RTE and the style manager. If you change something with the RTE it does not update the style manager but trigger this bug. In our editor @ronaldohoch and I removed some typograph options from the style manager and we use CKEditor as the RTE. So we have to change a few things in the navbar-link element as shown by his print. I will investigate later this but if @DRoet has some opinion on this please tell us where to begin looking into.

Hi and thanks for the detail explain. I'm actually solve its using the rerender method from the text.ts component Here is the image

This can fix this bug but i encounter another bug is when you use ckeditor as RTE and you paste any text from any website the ckeditor will duplicate the a tag itself and make the view not render correctly I think the paste event paste into wrong tag or some thing wacky with the way grapesjs handle paste event

Here is the video describe the bug

https://user-images.githubusercontent.com/59781669/207644998-e5e169a8-7aec-48b5-83a2-200c43c6971e.mp4

And here is my code in navbarlink.ts

The code is pretty much the same except for the two function

      getChildrenSelector() {
        return 'div.mj-inline-links > a.mj-link';
      },
      rerender() {
        this.render();
      },

Do you guys came up with solution for this bug. Thanks