Slate: New lines are removed on copy

[thetutlage]

Do you want to request a feature or report a bug?

Bug

What's the current behavior?

This has been reported earlier https://github.com/ianstormtaylor/slate/issues/1635 and then a related PR was created https://github.com/ianstormtaylor/slate/pull/1644.

Somehow it doesn't work as expected with [email protected].

In Action

What's the expected behavior?

The new lines must be copied over

[thetutlage]

After doing bit of debugging. This is not a problem with the empty nodes. The \n is not preserved even between 2 text nodes.

Also the textContent property from output of range.cloneContents() doesn't preserve line breaks.

https://github.com/ianstormtaylor/slate/blob/master/packages/slate-react/src/utils/clone-fragment.js#L32

contents.textContent // no line breaks

[thetutlage]

One way I can think of is to add a new br element inside this forEach loop https://github.com/ianstormtaylor/slate/blob/master/packages/slate-react/src/utils/clone-fragment.js#L36.

I tried it and it works fine. Not sure if this is the best way to do it.

contents.childNodes.forEach(function (node) {
 if (node.textContent && node.textContent.trim() !== '') {
   attach = node;
 }
+  node.appendChild(document.createElement('br'))
});

and then simply get rid of these lines https://github.com/ianstormtaylor/slate/blob/master/packages/slate-react/src/utils/clone-fragment.js#L62-L65

[ianstormtaylor]

@thetutlage thanks for investigating! We’re we always using textContent? Might be something to check in Git blame. I don’t recall this issue in the past. Wonder if it was a recent regression.

[thetutlage]

Yes added in this commit https://github.com/ianstormtaylor/slate/commit/ee8bc1b695930fbd79c17b256511744b3c9b54f9 13 days ago

[ianstormtaylor]

Ah okay, should be an easy fix then. Maybe does innerText solve our needs? Not sure.

[tobiasandersen]

Hm, what's weird is that it works fine in our editor — but not in the examples. I haven't investigated what differs though. Anyway, sorry for breaking stuff. Reading on mdn, it sounds like innerText should do the trick:

As a getter, it approximates the text the user would get if they highlighted the contents of the element with the cursor and then copied to the clipboard.

But unfortunately, innerText have the same problem as textContent in that it doesn't break child nodes.

I'm not sure about the solution proposed above though, since I believe there're important distinctions between the different zero width space attributes (for IMEs I think?), and that it would probably also add extra line breaks for legacy browsers that don't support the clipboard api. Maybe it could be altered to solve those cases as well though?

Another solution would be to add back some old logic, where we actually add the dummy div to the DOM, select it, and then use the selection to retrieve the text. I don't know why, but doing it this way seems to preserve line breaks. Sadly we'd have to add back some COMPAT stuff for Firefox for this to work properly.

[Slapbox]

Is the consensus that there are still issues with handling newlines despite previous commits? At least for me, new lines are lost on copying out of Slate (version 0.34.6.)

[thetutlage]

Yes, it's still there. @Slapbox How are you checking it.

I simply go to Markdown preview tab in examples and copy/paste from their.

[Slapbox]

I'm trying to handle copying out of Slate into code editors without losing line breaks. Pasting to text areas that can handle HTML formatting works great, but other formats not as much.

[thetutlage]

This is the behavior I get, when pasting to Sublime

[Slapbox]

@thetutlage yes that's exactly what I'm experiencing.

[ianstormtaylor]

This is fixed in the latest version of slate-react, thanks @Slapbox!

[Jacfem]

Hi @thetutlage, apologies for such a delayed question on this closed issue! My team is working through some slate upgrades from a very old version (0.34 currently), and we just noticed this bug. I'm wondering if you remember which version of slate-react/slate this fix is present on? I'm having a hard time tracing it down. Any help would be greatly appreciated, thank you!

[Slapbox]

@Jacfem since the PR to fix this is from 2018, it should already have been merged waaaay ahead of 0.34.

Running npm info slate-react time in my terminal shows that Slate 0.16 and 0.17 came out around that time.