question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

pressing enter at the end of line already having br tag for new line will keep the br tag + add the p tags

See original GitHub issue

Description of your Issue :

It seems like if user will try to add new line with enter at the line break already introduced with shift+enter the editor will not remove the br but introduce p tags as would one expect. this will result in bigger space between rows.

steps to reproduce (Add more if necessary):

  1. open https://summernote.org/
  2. type : abcd , shift + enter, abcd
  3. arrow up (or click at the beginning of first row)
  4. press enter

What is your Operating System, Browser and Version and Summernote Version you are using:

This can help find and resolve any issues, place an x inside the brackets or if relevant elaborate after each choice.

  1. Operating System: [x] Microsoft Windows [ ] Apple [ ] Linux [ ] All

  2. Browser and Version: [ ] Brave [x] Chrome 96.0.4664.45 (Official Build) (64-bit) [ ] Edge [x] Firefox 94.0.1 [ ] Internet Explorer [ ] Opera [ ] Safari [ ] Other (Specify):

  3. Summernote Version, place an x inside the brackets: [ ] BS3 [ ] BS4 [ ] Lite [x] All

screenshot of issue

Chrome : image code view : image code in editor : <p>abcd</p><p><br>abcd</p> FF : image code view : image code in editor : <p>abcd</p><p><br>abcd</p>

just for fun I tested different editors, it seems kendo will remove the br tag (tested here) but syncfusion (https://ej2.syncfusion.com/javascript/demos/rich-text-editor/tools/) and ckeditor (https://ckeditor.com/ckeditor-5/demo/) will behave exactly as summernote.

is this something you will look into?

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:10 (5 by maintainers)

github_iconTop GitHub Comments

1reaction
DiemenDesigncommented, Nov 23, 2021

Well, the use of the execCommand() function that Browsers allow access to, as Lothar mentioned is considered deprecated, so eventually, if Summernote is to stay around as a viable editor needs to change how it manipulates DOM Elements. It’s been discussed on different posts, and we all agree something needs to be implemented at some point. First I would like to see Summernote drop jQuery as a dependency, but there are features in the jQuery API that we use, and are difficult to implement in native Javascript.

1reaction
1der1commented, Nov 23, 2021

Yes, Dennis. SummerNote works together with native editing features. Therefore, results are browser-dependent.

There are many discussions about using <br> - for example here: https://stackoverflow.com/questions/1726073/is-it-sometimes-bad-to-use-br

Read more comments on GitHub >

github_iconTop Results From Across the Web

HTML New Line – How to Add a Line Break with the <br> Tag
Adding line breaks in your HTML using the <br> tag is a simple way to make your text more readable. The <br> tag...
Read more >
The Correct Usage of the HTML P and BR Elements
The line break element <br> tag is a singleton tag — it has no end tag. In XHTML, you must use the tag...
Read more >
How to Create a New Line in a P Tag of HTML - Computer Hope
Then, press and hold Shift , and press Enter . If this keyboard shortcut does not work, it is likely only possible to...
Read more >
When are <br> elements ignored when within a paragraph?
If a paragraph consists of nothing but a single br element, it represents a placeholder blank line (e.g. as in a template). Such...
Read more >
<br>: The Line Break element - HTML - MDN Web Docs - Mozilla
The <br> element has a single, well-defined purpose — to create a line break in a block of text. As such, it has...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found