1. Home
  2. Forum
  3. Blazor
  4. Rich text editor issues discovered

Rich text editor issues discovered

Hello. I'm using the Syncfusion Rich Text editor and I've encountered some issues with the component. I've attached a video to this questions which displays visually the problems encountered.

Issues found : 
1. When first rendering not sure why the component has a flicker before displaying an empty container. You can see this in the second part of the video when I refresh the page.

2. When using the rich text editor with a placeholder it feels like the cursor and the placeholder are not on the same level ( this can be seen also in the video). For this I have found a fix by modifying the font size of the placeholder or changing the padding but I don't want to change the inside of the component that much.

3. Another issue with the placeholder is that it feels like when starting to type the placeholder should disappear faster. This can also be seen in the video when typing character "a" the placeholder and the character overlap for half a second. 

Looking forward to hearing from you. 
Thanks,
Mihai 

Attachment: 20200630_17h23_46_28b9fa54.7z

6 Replies 1 reply marked as answer
PM Pandiyaraj Muniyandi Syncfusion Team July 1, 2020 03:07 PM UTC

Hi Mihai, 
 
Greetings from Syncfusion support. 
 
We have validated the reported issue with shared gif image from our end. Find more details from below 
 
Query 1: When first rendering not sure why the component has a flicker before displaying an empty container. You can see this in the second part of the video when I refresh the page. 
 
We could reproduce the reported issue, when refer a Syncfusion styles in end of <body> tag section of _host.cshtml. To resolve this issue, we suggest you move the Syncfusion style reference into <head> tag section. 
 
Query 2: When using the rich text editor with a placeholder it feels like the cursor and the placeholder are not on the same level ( this can be seen also in the video). For this I have found a fix by modifying the font size of the placeholder or changing the padding but I don't want to change the inside of the component that much. 
 
We have validated the reported query and confirmed “Editor and placeholder font size not same in RichTextEditor” as a bug from our end and logged the report for the same, and the fix will be included with our weekly patch release, which is scheduled in the Mid of July 2020. 

You can now track the current status of the report, review the proposed resolution timeline, and contact us for any further inquiries through this link: https://www.syncfusion.com/feedback/15683 
 
Query 3: Another issue with the placeholder is that it feels like when starting to type the placeholder should disappear faster. This can also be seen in the video when typing character "a" the placeholder and the character overlap for half a second.  
 
We have validated the reported query and confirmed “Editor and placeholder text overlap half a second while initial typing in RichTextEditor” as a bug from our end and logged the report for the same, and the fix will be included with our weekly patch release, which is scheduled in the Mid of July 2020. 

You can now track the current status of the report, review the proposed resolution timeline, and contact us for any further inquiries through this link: https://www.syncfusion.com/feedback/15684/ 
 
Regards, 
Pandiyaraj 


MC Mihai Calugar July 2, 2020 06:57 AM UTC

The issue with the flicker is still reproducing even though the styling is placed in the head of the Host.cshtml file. I'll post two screenshots of how the Host.cshtml file looks. Something to be noted is that I use a custom material theme for the Syncfusion controls. 
This is the head : 

This is the body: 


Looking forward to hearing from you.(if there is a solution to the initial flicker of the component)
Thanks,
Mihai

MC Mihai Calugar replied to Mihai Calugar July 2, 2020 11:39 AM UTC

The issue with the flicker is still reproducing even though the styling is placed in the head of the Host.cshtml file. I'll post two screenshots of how the Host.cshtml file looks. Something to be noted is that I use a custom material theme for the Syncfusion controls. 
This is the head : 

This is the body: 


Looking forward to hearing from you.(if there is a solution to the initial flicker of the component)
Thanks,
Mihai

Another issue I've found is that when placed within a splitter containing tabs the rich text editor doesn't behave normally. I have a rich text editor for each tab and I'll also attach a video for the issues discovered. (sorry about the watermark ) 
1. Horizontal scroll appears in the rich text editor when writing more text.
2. When trying to press enter the cursor doesn't jump to the next line even though behind the scenes it actually does as you can see in the video. 
Is there something wrong i am doing or is the rich text editor behaving badly inside the splitter with tabs? 
Looking forward to hearing from you.
Thanks,
Mihai 

Attachment: ScreenRecorderProject1_c2cb9c4b.7z

PM Pandiyaraj Muniyandi Syncfusion Team July 3, 2020 04:31 PM UTC

 
Good day to you. 
 
Query 1: The issue with the flicker is still reproducing even though the styling is placed in the head of the Host.cshtml file. I'll post two screenshots of how the Host.cshtml file looks. Something to be noted is that I use a custom material theme for the Syncfusion controls.  
 
Currently, we are validating the reported issue, will update further details within two business days, 
 
Query 2: 1. Horizontal scroll appears in the rich text editor when writing more text.  2. When trying to press enter the cursor doesn't jump to the next line even though behind the scenes it actually does as you can see in the video.  
Is there something wrong i am doing or is the rich text editor behaving badly inside the splitter with tabs?  
 
We have validated the reported issue with shared video reference and couldn’t reproduce the issue from our end. We have tried to replicate the issue by following ways 
 
We suspect due to sample level referred other styles override the RichTextEditor behavior. We prepared sample based on shared video reference, get it from below link 
 
Can you provide the following details, which help us to provide the solution at earliest 
 
Regards, 
Pandiyaraj 


PM Pandiyaraj Muniyandi Syncfusion Team July 21, 2020 02:50 PM UTC


Thanks for your patience,  

We have resolved the reported issue “Editor and placeholder text overlap half a second while initial typing in RichTextEditor” and the fix is now available with the NuGet package version 18.2.46.   

Release Notes: https://blazor.syncfusion.com/documentation/release-notes/18.2.46/?type=all#richtexteditor

Can you please upgrade your package to this version to resolve the issue from your end?  
 
 
Regards, 
Pandiyaraj 


PM Pandiyaraj Muniyandi Syncfusion Team July 24, 2020 10:57 AM UTC

Hi Mihai,  

Sorry for the delayed response. 

We have resolved the reported issue “Editor and placeholder font size not same in RichTextEditor” and the fix is now available with the NuGet package version 18.2.46.    

Release Notes: https://blazor.syncfusion.com/documentation/release-notes/18.2.46/?type=all#richtexteditor

Can you please upgrade your package to this version to resolve the issue from your end?   
  
 
Additionally, we have validated the fix from our end and noticed default Blazor app configured Bootstrap CSS overrides the Rich Text Editor placeholder line-height style. To resolve this override we suggest you, add below style in your application end. 
 
 
<style> 
    .e-richtexteditor .rte-placeholder { 
        line-height: inherit; 
    } 
</style> 
 
 
 
Regards,  
Pandiyaraj 


Marked as answer
Loader.
Up arrow icon