Latest update v24.0.2.3 attaches classes to body that change document's font

[Alejandro]

Hello!

I'm facing an issue with the Rich Text Editor for javascript.

I noticed that after the .appendTo method is called, several classes get added to the document's body, which alter not only the font family of the whole page, but also the font size (image attached of the HTML).

By comparing this EJ2 version with an older one (I still had the SF zip of version 20.0.4.43 in my disk)  that didn't present this problem, I debugged the code using dev tools and noticed where the code changed between versions: a function called e.prototype.renderToolbar, 

The new version has the following (added) code part and in the final block is the call that causes the classes to be attached to the body:

this.parent.showTooltip && (this.tooltip = new Vw({target: "#" + this.parent.getID() + "_toolbar_wrapper [title]",
    showTipPointer: !0,
    openDelay: 400,
    opensOn: "Hover",
    beforeRender: this.tooltipBeforeRender.bind(this),
    cssClass: this.parent.getCssClass(),
    windowCollision: !0,
    position: "BottomCenter"
}), this.tooltip.appendTo(e.target)),
this.parent.showTooltip && (this.dropdownTooltip = new Vw({
    target: '[aria-owns="' + this.parent.getID() + '"].e-rte-elements [title]',
    showTipPointer: !0,
    openDelay: 400,
    opensOn: "Hover",
    beforeRender: this.tooltipBeforeRender.bind(this),
    cssClass: this.parent.getCssClass(),
    windowCollision: !0,
    position: "BottomCenter"
}), this.dropdownTooltip.appendTo(document.body))

I don't know if this is the intended behavior, a bug, or I missed setting a property when creating the editor.

For the sake of this ticket, this is the code I use to instantiate the RTE:

var _t._rtEditor = new ej.richtexteditor.RichTextEditor({
backgroundColor: {
modeSwitcher: true,
colorCode: {
Custom: [
'#FF1E00', '#FF00FA', '#FF00AF', '#C800F8', '#0080FF', '#00DCFF', '#9BFF00', '#FEFE20', '#FFB400', '#000000',
'#FF0A00', '#EE00FF', '#FF00A0', '#C800D0', '#4060FF', '#00B8EB', '#00FF00', '#F0F000', '#FFA000', '#383430',
'#EE0014', '#DF00DD', '#E800A3', '#AA00FF', '#2060FF', '#00A0C0', '#20FF80', '#D0D040', '#F59900', '#686460',
'#DD0032', '#C8009F', '#E00060', '#900090', '#6060DD', '#00A0F8', '#20D080', '#ADAD30', '#FF7300', '#909498',
'#BC1400', '#B800AA', '#CC005D', '#800080', '#5050C0', '#0099CC', '#38D040', '#A6A640', '#F06600', '#c0c4c8',
'#AA001E', '#AA00CC', '#AA006B', '#600070', '#3030A0', '#2080E0', '#40B020', '#909030', '#CC6900', '#FFFFFF',
]
},
},
enableFloating: false,
fontColor: {
modeSwitcher: true,
colorCode: {
Custom: [
'#FF1E00', '#FF00FA', '#FF00AF', '#C800F8', '#0080FF', '#00DCFF', '#9BFF00', '#FEFE20', '#FFB400', '#000000',
'#FF0A00', '#EE00FF', '#FF00A0', '#C800D0', '#4060FF', '#00B8EB', '#00FF00', '#F0F000', '#FFA000', '#383430',
'#EE0014', '#DF00DD', '#E800A3', '#AA00FF', '#2060FF', '#00A0C0', '#20FF80', '#D0D040', '#F59900', '#686460',
'#DD0032', '#C8009F', '#E00060', '#900090', '#6060DD', '#00A0F8', '#20D080', '#ADAD30', '#FF7300', '#909498',
'#BC1400', '#B800AA', '#CC005D', '#800080', '#5050C0', '#0099CC', '#38D040', '#A6A640', '#F06600', '#c0c4c8',
'#AA001E', '#AA00CC', '#AA006B', '#600070', '#3030A0', '#2080E0', '#40B020', '#909030', '#CC6900', '#FFFFFF',
]
},
},
height: '100%',
maxLength: 5000,
showCharCount: true
});
_t._rtEditor.appendTo('#rteEditorContainer'); // rteEditorContainer is a child DIV in the document

I'm attaching some pictures, hoping they could be helpful.

Thank you

Alex

Attachment: Ticket_20240206_389123a7.zip

[Vinitha Jeyakumar]

Hi Alejandro,

We would like to inform you that the classes "e-control e-tooltip e-lib" added to the body element for the tooltip bonded into the RichTextEditor. The "e-control" class have some font size and font family styles for the button controls in the Editor toolbar. This is the default behavior of the RichTextEditor control. 

Please let us know if you have any concerns.

Regards,

Vinitha

[Alejandro]

Hello Vinitha,

Thank you for your answer.

Regarding your comment: "The e-control class have some font size and font family styles for the button controls in the Editor toolbar". I agree, the RTE must have its own style, but I don't see the point of attaching those classes to the body instead of attaching them to the RTE container div.

In previous versions of the SF SDK, I could add the RTE to a page and use it without it modifying any other screen part.

With this version, if I add the RTE, the pages changes its font (the whole page, not only the RTE control), from say, Raleway 16px, to Helvetica 12px. This not only alters the visuals, but also reduces the font size (and readability), which is not acceptable for any kind of integration.

Adding controls to a page should not change its presentation. It similar to a lower level component affecting the layout of a higher level component, which is a bad design pattern.

I'm attaching a new screenshot, to show you the problem. In those, the RTE is not yet visible, only instantiated, but the problem is already

Regards

Alex

Attachment: SF_SDK_COMPARISON_989a98fe.zip

[Pere Argelich Romà]

The same thing happens to me, with version 24.2.4 of the RichTextEditor component, when I add it to a page it modifies the style and font size of the text of the whole page. In previous versions (previously I had version 20.4.49 it did not happen).

[Daniel Seleka]

Good day

I have the same thing happening on my side, using version 24.2.4. As soon as a RichTextEditor is loaded, the classes  e-control e-tooltip e-lib are added to the body, and the e-control class specifically causes the font style and sizing to change, as mentioned by the @Alejandro. This was not an issue on version 22.2.5 and version 23.1.36.

Please let me know if there is a way this can be resolved? The issue negatively affects the usability of the site.

Thank you.

[Vinitha Jeyakumar]

Hi All,

We have considered the reported issue "Need to remove "e-control" class added to the body when using RichTextEditor" as a bug from our end and the fix for the issue will be included with our upcoming patch release on the end of Feb 2024.

Now you can track the status of the reported issue through the feedback below,

https://www.syncfusion.com/feedback/50732/need-to-remove-e-control-class-added-to-the-body-when-using-richtexteditor

Disclaimer: “Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization.”

Regards,

Vinitha

[Luis Orozco]

Hi All,

We are facing the same issues on the latest version 24.2.7. We hope this gets fixed with the upcoming release in March 2024.

Regards,
Luis

[Vinitha Jeyakumar]

Hi Luis Orozco,

We will let you know once the fix was included.

Regards,

Vinitha

[Vinitha Jeyakumar]

Hi All,

We have included the fix for the reported issue "Need to remove "e-control" class added to the body when using RichTextEditor" with our patch release version 24.2.8. So please upgrade your package to the latest to resolve the issue from your end.

Regards,

Vinitha

[Daniel Seleka]

Good day

Thank you very much for the update, we appreciate it.

I will download the new version and test it.

Kind regards

Daniel

[Vinitha Jeyakumar]

Hi Daniel Seleka,

We are glad to assist you.

Regards,

Vinitha