1. Home
  2. Forum
  3. Xamarin.Forms
  4. Hitting enter key adds 2 \n\n in SfRichTextEditor

Hitting enter key adds 2 \n\n in SfRichTextEditor


Situation 1:

When typing in SfRichTextEditor and hitting a Enter key, 2 \n\n are added. Why is that so?

It is causing issues where the line spacing between the previous line and current line (after hitting) enter is more than the below situation described:

Situation 2:

Line 1

Line 2

Imagine I have Line 1, a blank line and Line 2. If I hit backspace at the beginning of Line 2, then you will see as below

Line 1
Line 2

In the above situation there is only one \n between Line 1 and Line 2. And the line spacing between Line 1 and Line 2 are also less than described in Situation 1. Where as if I hit Enter key, then \n\n are added (Situation 1).

Please help. Thanks.

14 Replies 1 reply marked as answer
GR Gayathri Ramalingam Syncfusion Team June 7, 2021 12:48 PM UTC

Hi Gautam,  
 
 
We tried to reproduce the issue “Hitting enter key add more than one new line in SfRichTextEditor”, but it is working fine as expected. 
  
We have created a simple sample based on the provided information and the sample can be downloaded from the below link.  
 
We created a video for illustrating the same and it can be downloaded from the below links, 
 
Kindly provide the following details to investigate further on this issue.   
1.      Modify / Simple sample with which the issue could be reproduced. 
2.      Replication procedure to reproduce the issue or screen shot illustrating the issue. 
3.      Android device specification with the OS version. 
The above details will be more helpful for us to reproduce the issue in our side and assist you with the better solution at the earliest.   
 
With Regards, 
Gayathri R 


GJ Gautam Jain June 8, 2021 06:39 AM UTC


The first screenshot shows that I typed Line 1, hit Enter once and then typed Line 2. 

Then when I get the .Text property of the rich edit control, I see two \n\n instead of one..





GR Gayathri Ramalingam Syncfusion Team June 9, 2021 11:03 AM UTC

Hi Gautam, 
 
We were able to reproduce the issue “Hitting enter key add more than one new line in SfRichTextEditor." in our side and we suspect this to be a defect. We have forwarded this issue to our development team for further analysis and we will update further details by 15th June 2021. 
 
 
With Regards, 
Gayathri R 


GJ Gautam Jain June 10, 2021 09:52 AM UTC

Thanks a lot Gayathri. Will look forward for the fix as we cannot launch our app without this fix.

GR Gayathri Ramalingam Syncfusion Team June 11, 2021 05:29 AM UTC

Hi Gautam,

Thank you for your update. As we promised in the previous update, we will provide validation details for the issue “Hitting enter key add more than one new line in SfRichTextEditor” on 15th June 2021. 
 
 
With Regards, 
Gayathri R 


GR Gayathri Ramalingam Syncfusion Team June 15, 2021 11:46 AM UTC

Hi Gautam, 
 
On further analyzation, we found that this issue occurs in our dependency control. We have forwarded the query to appropriate team and will update you further details on or before 17th June 2021.  
 
With Regards, 
Gayathri R 


GR Gayathri Ramalingam Syncfusion Team June 17, 2021 05:53 AM UTC

Hi Gautam, 
 
 
Thank you for your patience. 
 
RichTextEditor relies on Web-view with java-script content editable div. Content editable div returns double '/n' when enters . This is the behavior of content editable div and RTE also does the same. However, we can achieve it by workaround solution to replace double '/n' into single '/n' . Please use the below code example to get this issue. 
 
private string IgnoreVoidElementsInHTML(string inputString) 
        { 
            inputString = inputString.Replace("<meta http-equiv=\"Content-Type\" content=\"application/xhtml+xml; charset=utf-8\">", ""); 
            inputString = inputString.Replace("<br>", "<br/>"); 
            inputString = inputString.Replace("\n\n", "\n"); 
            inputString = inputString.Replace("\r", ""); 
            inputString = inputString.Replace("<title></title>", ""); 
            inputString = inputString.Replace("<?xml version=\"1.0\" encoding=\"utf-8\"?><!DOCTYPE html PUBLIC" + 
                " \"-//W3C//DTD XHTML 1.1//EN\" \"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd\">", ""); 
 
           
            return inputString; 
        } 
     
 
Please find the sample to ensure this behavior from below link, 
 
Please find the screen shot from below, 
 
 
 
Please let us know if any further assistance required 
 
With Regards, 
Gayathri R 


Marked as answer
GJ Gautam Jain July 7, 2021 09:44 AM UTC


There is even a bigger problem. I believe it started after updating to 19.2.0.46. Please check against 19.2.0.39.




I just hit enter key between First and Second. When I take the plain text using RichTextEditor.Text property, I get 3 new line characters \n. See above screenshot.


It is a serious issue for us. Your earlier suggestion to replace double \n with single \n in this thread will not work. We have a very urgent release and it is important that this gets fixed. 


Many times I notice that both <p></p> and <br> are inserted when hitting Enter key. To reproduce this, hit Enter keys twice between First and Second and then hit a backspace key. You will get the below in HtmlText property.






I guess, you are replacing <br> with one \n. And </p> with two \n. Which is causing an issue of multiple \n characters when only one \n is required.


Please do resolve this asap.


Regards,

Gautam Jain




GJ Gautam Jain July 8, 2021 05:24 AM UTC

Here is another example of above issue:


Although I hit only one enter key. There are three \n added. Causing a lot of issues. This can be reproduced when using backspace to delete the previous line and then hitting enter again to create new line.




PK Prakash Kumar D Syncfusion Team July 8, 2021 10:29 AM UTC

Hi Gautam, 
 
Thank you for contacting Syncfusion support. Please find the details below  
 
Queries  
Answer 
I just hit enter key between First and Second. When I take the plain text using RichTextEditor.Text property, I get 3 new line characters. See above screenshot. 
We suspect that the issue is not raised due to latest version 19.2.0.46. it happens at certain operation. 
 
We have tried to reproduce the issue with given details. However, we could see that the 2 new lines are added not 3 when entering in between the words. 
 
We have shared the sample for your reference. Kindly modify the sample or else provide us the exact operation that causes the issue.  
 
 
It is a serious issue for us. Your earlier suggestion to replace double with single in this thread will not work. We have a very urgent release and it is important that this gets fixed.  
As we said in previous update, RichTextEditor relies on Web-view with java-script content editable div. Content editable div returns 2 new lines when enters. This is the behavior of content editable div and RTE also does the same.  So, we request you to replace the string at sample level  
 
 inputString = inputString.Replace("\n\n", "\n");  
Many times I notice that both <p></p> and <br> are inserted when hitting Enter key. To reproduce this, hit Enter keys twice between First and Second and then hit a backspace key. You will get the below in HtmlText property. 
We could reproduce the issue “<p></p> and <br> tags are appended when hitting enter and back space”. We have forwarded this query to our dependent web team. We will provide the validation details on 12th 2021. 
 
Regards, 
Prakash Kumar 


GJ Gautam Jain July 8, 2021 11:48 AM UTC

Thanks a lot Prakash.

The first and third issue you had mentioned above are related.

You will be able to see three \n only when hitting backspace to remove new lines and then again hitting Enter key when adding new lines.

So when you try the above, you will see <p></p> and <br> both in the HtmlText property. At the same time you will see three \n in the Text property.


Your second suggestion to replace \n\n with \n works fine. But the above is creating a lot of issues as we cannot replace \n\n\n as they may contain actual new lines.


Thanks for your fantastic service. Hats off! Hope to get this resolved. We are stuck.


Regards,

Gautam Jain


PK Prakash Kumar D Syncfusion Team July 9, 2021 02:24 PM UTC

Hi Gautam, 
 
Thank you for contacting Syncfusion support  
 
Hitting enter adds 3 new lines  
 
We can reproduce the scenario. RichTextEditor is a wrapper of content editable div. This is a default behavior of content editable div and RTE does the same. 
 
 
 
 <p></p> and <br> are inserted when hitting Enter key 
 
 
We can able to reproduce the use case scenario. This is the actual behavior of the Rich Text Editor and by default, the <div> element with “contentEditable” sets to true also behaves as the same.   
   
   
Please check the above sample and video illustration for your reference.   
 
 
Regards, 
Prakash kumar 


GJ Gautam Jain July 9, 2021 03:14 PM UTC

Thanks Prakash, but the answers are not satisfactory.


sf-issue-166088.png



GR Gayathri Ramalingam Syncfusion Team July 12, 2021 06:03 AM UTC

Hi Gautam, 
 
Thank you for contacting for Syncfusion support. 
 
Query 
Details 
The issue doesn’t appear when simply pressing enter key. This issue occurs when enters back space to remove the new line and enter the key 
 
Yes, the issue with ‘/n/n/n’ doesn’t occur for simple enter key. It occurs when doing + backspace + enter 
 
The former result is <p> <br> </p>The later result is <p> </p> 
 
Sorry for the inconvenience. 
We did not construct the HTML text in RichTextEditor. RichTextEditor is a wrapper of content editable div element. Content editable div element is an Html element. We get the HTML text from content editable div element and returned the same in RichTextEditor. 
As mentioned in the previous update, this is a default behavior of HTML and RTE does the same. 
You can the behavior of HTML in the below W3Schools by doing backspace +enter https://www.w3schools.com/code/tryit.asp?filename=GSAZCR6WF02B  
 
 
With Regards, 
Gayathri R 


Loader.
Up arrow icon