GetmeUK / ContentTools

A JS library for building WYSIWYG editors for HTML content.
http://getcontenttools.com
MIT License
3.94k stars 393 forks source link

Copy&Pasting HTML in Webkit browsers leaves straying   in the text #542

Closed cyclaero closed 4 years ago

cyclaero commented 4 years ago

I am using ContentTools for editing my BLog for more than a year now. This contains quite a lot of text, and I want to have it nicely justified with automatic hyphenation enabled. Since the beginning, I noticed that after editing an article, it is full of strayed  ’s which in many cases defeat line breaking and hyphenation. So after editing, I enter the HTML code of each paragraph and remove manually these nonsense  ’s.

Finally the situation became sufficiently annoying, for me to start an investigation.

My findings:

  1. Editing text with Firefox (on Windows) does not show this issues, i.e. no left over undesired  ’s

  2. Editing text with Webkit based browsers (Safari on Mac, Chrome on Windows, Epiphany on GNOME3/FreeBSD shows the issue.

  3. Before and after any HTML tag of the copied text, Safari inserts <span class="Apple-converted-space"> </span> while Chrome and Epiphany insert <span> </span>. The thus embraced space char is not the normal one but unicode no-brake space U+00A0. And this finally becomes converted to &nbsp;.

For me, I solved this issue by replacing in ContentTools/build/content-tools.js on line number 8216

wrapper.innerHTML = html;

with:

wrapper.innerHTML = html.replace(/<span( class="Apple-converted-space")?> <\/span>/g," ");

Hopefully this helps people who find straying &nbsp;’s as annoying as I did.

anthonyjb commented 4 years ago

Excellent description of the problem @cyclaero - thank you for the help identifying and the workaround for now.

anthonyjb commented 4 years ago

@cyclaero The next release will include your workaround so just wanted to say thanks again for the help with this.

stalkergx commented 2 years ago

Very helpful!