search

fastmail / Squire

The rich text editor for arbitrary HTML.
MIT License
4.78k stars 406 forks source link

Additional line breaks - creates extra spacing in HTML #412

Open mattisdada opened 3 years ago

mattisdada commented 3 years ago

Hi,

Context: We're using Squire as a HTML editor primarily for HTML that is generated by Outlook originally.

We've noticed that for <p> elements (and others) that Squire inserts a <br> at the end, it's this line: https://github.com/neilj/Squire/blob/8ff042dd22f34a50e79e122bc443e9227035ebaa/source/Node.js#L277

Testing internally, by removing this line, does indeed break the cursor as expected. (but we get lovely clean HTML)

But unfortunately this is affecting our output from Squire with it adding in a bunch of <br>s and extra whitespace in :(

HTML Before:

<p class="MsoNormal">Test</p>

HTML After:

<p class="MsoNormal">Test<br></p>

How are other people handling this? Should we re-process the HTML afterwards and strip these out? Are we maybe doing something dumb with the way we get the HTML back from Squire? (listening to the input event and using .getHTML())

the-djmaze commented 3 years ago

Depends if you can reopen the saved HTML. Like re-open draft mail.

Then keep them or enter hell of browser issues due to block elements...

nik736 commented 8 months ago

@mattisdada I have the same issue. Do you mind sharing your solution? Stripping them out afterwards seems to be unreliable as well, since in my case those could be user generated line breaks.

mattisdada commented 8 months ago

@mattisdada I have the same issue. Do you mind sharing your solution? Stripping them out afterwards seems to be unreliable as well, since in my case those could be user generated line breaks.

I'm really sorry, no longer work at the company that I was doing this project with and I honestly cannot recall if we ever found a solution, or if we did, what that solution was 😅 . Sorry about that!

the-djmaze commented 8 months ago

Some browsers require a <br> inside block elements, else you can't focus your cursor (for editing) inside it.

When you get the HTML outside Squire, the <br> should be removed.