Space added on paste

1

If i go to https://prosemirror.net/examples/basic/ and copy the first word on the site(settings) and then paste it into the editor, a space is added after the word. This must be a bug? Or is the editor supposed to work like that?

If i copy the word from the headline no space is added, but when i copy it from the text beneath the space is added.

2

In which browser does this happen? I’m not seeing in in Chrome or Firefox (Linux).

3

I am also seeing it on the latest Chrome on Windows 10.

Interestingly, if I paste text from a code snippet, the extra space is not added. See the animated gif below:

extra_space
extra_space.gif837Ă—410 155 KB

4

In Chrome

If i copy the word from the headline or the code part of the page it doesn’t happen, only when i copy a word from the normal text.

Also, if i copy a paragraph and paste it, the created text node’s text property gets two extra spaces at the end which cannot be seen visually in the view.

5

Is there any chance this will be fixed? Or do I have to look at some other alternative? I really need pasting to work correctly.

6

This problem is related to how Windows handles copy/pasting from the browser and is one of the reasons they offer simple “Paste” (Ctrl+V) and “Paste as Plain Text” (Ctrl+Shift+V)

If you use the second shortcut it works without any issues, pasting with format is problematic even between Microsoft products so asking your users to use the second is not crazy.

7

If anyone is still interested in a solution and the reason for this to happen, here it is:

Windows 10 (and maybe others) creates a complex HTML structure inside the clipboard containing its own set of markup, styles, and other metadata.

The structure looks like this:

<html>
 <body>
   <!--StartFragment-->
   Content goes here
   <!--EndFragment-->
 </body>
</html>

Prosemirror pastes both what is before and after Start/End Fragment resulting in added spaces while copy pasting in the UI.

The code below excludes those problematic parts. You can just use transformPastedHTML to deal with the problem like here:

transformPastedHTML: (pasted) => {
  let reg1 = new RegExp(".*<!--StartFragment-->", "s"),
      reg2 = new RegExp("<!--EndFragment-->.*", "s");

  return pasted.replace(reg1, "").replace(reg2, "");
}
1 Like
8

Did you investigate whether all browsers do this on Windows 10, or just a specific one? I.e. whether it’s OS behavior or browser behavior.