1. Home
  2. Forum
  3. Blazor
  4. Toolbar formating doesn't apply on the editor

Toolbar formating doesn't apply on the editor

Hello,

I was looking at the demo (https://blazor.syncfusion.com/demos/rich-text-editor/overview?theme=material3 ) and  was trying to apply some formating to the text. I was typing some text, I pressed the 'Bold' button and I returned to the position were I was before. The editor area has lost focus, (that it shouldn't be happen) and surprisly the button returned to its original state and the text didn't chanhe to bold!! Same thing happens on this editor were I'm writting right now, I press the "bold" but the text remains unchanged,


Regards,

Bill


5 Replies
VJ Vinitha Jeyakumar Syncfusion Team July 16, 2024 08:02 AM UTC

Hi Bill Lemonis,

We have followed the steps you provided to replicate the reported issue on our end using the demo sample you mentioned, but we didn't face any issues. We have also prepared a video illustration for your reference.

Could you please share us with the exact issue replication steps along with video illustration for further validation?

Regards,
Vinitha

Attachment: screencapture_(56)_18d1a335.zip

BL Bill Lemonis replied to Vinitha Jeyakumar July 16, 2024 08:15 PM UTC

Hello,


Please find attached my recording


Regards,


Bill


Attachment: screencapture_7f0aaedf.zip

VJ Vinitha Jeyakumar Syncfusion Team July 17, 2024 11:56 AM UTC

Hi Bill Lemonis,


We have checked the shared video and tried to reproduce the issue by following the exact steps, but still we didn't face any issues as you reported. Please refer to the attached video illustration. 

Could you please share the below details?

  • Are you using windows or Mac machine and its version?

  • Your browser details and version?
Regards,
Vinitha



Attachment: screencapture_(55)_de397a0f.zip

BL Bill Lemonis July 17, 2024 12:10 PM UTC

Hello,


My computer is a Windows 10 Pro, 22H2 and my browser is Chrome version  126.0.6478.127 (Official Build) (64-bit)

Also, I've an application using the RichEdit having the same effect described before


Regards


RK Revanth Krishnan Syncfusion Team August 19, 2024 02:44 PM UTC

Hi Bill,


We have further validated the reported issue using the video you shared and the problem was replicated only when we manually focused the editor after applying the bold format.


This issue occurs due to the following reasons:


  • When bold formatting is applied directly without selecting any text, it results in the following HTML structure: <p>normal text,&nbsp;<strong>&ZeroWidthSpace;</strong></p>.
  • The &ZeroWidthSpace; is a Unicode character that, while invisible and occupying no visual space, acts as a single character. It is primarily used here to position the cursor correctly after applying bold formatting to an empty selection, ensuring that typing resumes normally.


Working Case:

If you type some content ending with a space, then apply bold and start typing immediately, it will function correctly.


Non-Working Case:

If you type some content ending with a space, then apply bold and manually position the cursor at the end of the content before starting to type, it will not function properly. This issue occurs because manually focusing on the node containing &ZeroWidthSpace; does not focus on the node but instead shifts the focus to the text content of the previous element. This is the default browser behavior.


To ensure bold formatting continues after manually focusing the editor using the mouse, press the right arrow key and then begin typing.


Note: This behavior varies by browser. For instance, Firefox handles this use case of manually focusing using the mouse correctly.


You can view a default content editor DIV sample here: https://stackblitz.com/edit/quoy9j-w4jonc?file=index.ts,index.html


Regards,

Revanth


Loader.
Up arrow icon