Plain text to HTML conversion removes linebreaks

[Mgsy]

Follow up of the mozilla/notes#534.

Right now, all linebreaks from a plain text are removed after pasting it to the editor. Current algorithm for this case looks like this:

“a\nb” -> “a<br>b”
“a\n\nb” -> “<p>a</p><p>b</p>”

We don't support soft-line breaks, so the outcome is a single-line of text. The problem is most visible in case of pasting content from, i.e. Sublime Text to our editor.

As we talked with @Reinmar, it concerns this part of the code:

https://github.com/ckeditor/ckeditor5-clipboard/blob/587c2aac8fe42c4a062db9c69de2b7222f6b693b/src/utils/plaintexttohtml.js#L10-L40

[Reinmar]

If we supported soft line breaks already this would look good – just like in Sublime. But the problem is that bazillion of <br> created on paste from a plain text editor is not that great either. Soft line breaks should be used for special cases. Unfortunately, it's hard to understand what semantics (cause there's no) had the copied plain text.

In other words – we need to understand what most users would expect in which cases. Right now, IIRC, we follow some native behaviour (but the visual result is wrong because <br>s are stripped off.

[vladikoff]

we need to understand what most users would expect in which cases

@ryanfeeley do you have any user feedback regarding this to paste here?

[ryanfeeley]

Some recent related feedback:

In the previous version, if I copied and pasted to Notepad, the linebreaks were preserved. With this version, no matter what I've tried, I get one long line in Notepad. This is a nuisance for printing.

Pasting plain text with new line characters (Linux, Windows) removes those characters. Not good :-/

It's annoying to paste in text with single line breaks and have them all disappear.

I used Notes to store some sort of templates that I past frequently to the other applications. I noticed two issues: - When I copy/past test additional line breaks are added - Asterisk marks (*) disappears - that is annoying since some of my templates are in mark down and I need to add asterisks later (to reproduce this type Example - asterisks should disapper)

[ryanfeeley]

Also:

I used to love Notes, best thing that ever happened to Firefox. Now you've ruined it and I can't use it any more. The lag when I try to type or paste in anything is so bad that I can make a coffee while i wait for the cursor to catch up with me. I never wanted Sync or any special formatting features, I just wanted to be able to save my Notes, but now I don't use it anyway. Back to Notepad and Sticky notes, so sad about this. Oh, and the formatting that you supposedly improved is lousy. No paragraph spaces when I paste in copied text, like poems, and trying to make paragraph spaces can take an hour in a long poem. I really hate you Mozilla for ruining such a great feature!

[vladikoff]

/me looks at the last comment (just to be clear there are good comments about other stuff too ;) )

[ryanfeeley]

True! Most comments are positive, but if we only listen to those ones we'll never improve.

[Reinmar]

Thanks for the feedback, guys. But, frankly speaking, until your editor doesn't support soft line-breaks it's hard to understand what people expect. Right now they see that nearly all line breaks are lost when pasting a plain-text. But that doesn't help understanding how plain-text should be converted to HTML when paragraphs and soft line-breaks were supported.

From our perspective we need to:

1. implement the soft line-break feature (see https://github.com/ckeditor/ckeditor5-enter/issues/2).
2. tune up the plain-text to HTML conversion.

In your case, you can choose. Either start with 1. or with 2. If you want to start with 1. then there's a community plugin https://github.com/alexeckermann/ckeditor5-soft-break (although, I don't know how well it works). If you want to start with 2., then you need to plug a similar listener to this one: https://github.com/ckeditor/ckeditor5-clipboard/blob/3045e1e3ecd69dd8ef5de3838d40693cf0e9ef6d/src/clipboard.js#L136-L157 and tune the plainTextToHtml() function.

[vladikoff]

cc @Natim @sebastienbarbier for visibility

[zadam]

Stopgap solution might be converting new lines to paragraphs. Of course it's not perfect, but still pretty close to what people expect and miles better than current "non-solution".

Looks like one liner: https://github.com/ckeditor/ckeditor5-clipboard/blob/587c2aac8fe42c4a062db9c69de2b7222f6b693b/src/utils/plaintexttohtml.js#L10-L40

Just replace the current handling with .replace( /\n/g, '</p><p>' )

[Natim]

Just replace the current handling with .replace( /\n/g, '</p><p>' )

I would use .replace( /\n\n/g, '</p><p>' ) and .replace( /\n/g, '<br/>' )

[gwebkiev]

I fixed to .replace( /\n/g, '</p><p>' ) because <br /> cutting by some other plugin.

[Reinmar]

We're adding a support for <br> elements (ckeditor/ckeditor5-enter#54, https://github.com/ckeditor/ckeditor5-essentials/issues/6), so, now we need to make a decision. How should the following plain text be converted to HTML?

Foo
Bar

Bom

Should it be:

1) <p>Foo<br>Bar</p><p>Bom</p>

or

2) <p>Foo</p><p>Bar</p><p>Bom</p>

or maybe

3) <p>Foo</p><p>Bar</p><p></p><p>Bom</p>

I'm for option 1 because it's close to Markdown.

WDYT?

[wwalc]

If I checked correctly, CKEditor 4 currently does "3".

Wrong: CKEditor 4 does "1" when pasting text from Notepad on Windows. CKEditor does "3" when pasting text content copied from Terminal or Vim on OSX.

For me personally, option "1" is more intuitive.

[Reinmar]

CKEditor 4 does "1".

https://github.com/ckeditor/ckeditor-dev/blob/major/plugins/clipboard/plugin.js#L1320-L1325

and

https://github.com/ckeditor/ckeditor-dev/blob/major/core/tools.js#L446-L454