search

ProseMirror / prosemirror

The ProseMirror WYSIWYM editor
http://prosemirror.net/
MIT License
7.77k stars 338 forks source link

Windows: Link decays into multiple links when pasting #1496

Closed REPLicated closed 3 weeks ago

REPLicated commented 3 weeks ago

In Edge on Windows, certain pasted links "decay" into two separate links, where one of them is invalid.

Windows is special because when copying the URL of an open tab, the clipboard content is structured (presumably HTML), where the link text is the title of the tab and the href the actual URL.

Example: When copying the link from a tab with title foo:bar.pdf and URL http://localhost/foobar, this results in the editor HTML

<p><a href="http://localhost/foobar">foo:</a><a href="bar.pdf" target="_blank">bar.pdf</a></p>
marijnh commented 3 weeks ago

Is this an issue of ProseMirror incorrectly parsing the HTML from the clipboard, or the HTML not making sense in the first place? In the latter case, it may not be something the library can do much about.

REPLicated commented 3 weeks ago

Without ProseMirror, I created a textarea and registered an event handler for ClipboardEvent. The HTML seems to be valid:

  onPaste(ev: ClipboardEvent): void {
    console.log("Pasting", ev.clipboardData?.getData("text/html"))
  }

Results in:

Pasting <html>
<body>
<!--StartFragment--><a href="http://localhost/foobar">foo:bar.pdf</a><!--EndFragment-->
</body>
</html>
marijnh commented 3 weeks ago

Do you maybe have a custom paste handler in your editor? One that tries to detect and autolink urls? When I try to paste the HTML you show, I just get a regular, single link, as expected.

REPLicated commented 3 weeks ago

We use ProseMirror via https://sibiraj-s.github.io/ngx-editor/. And indeed, it has a plugin that linkifies pasted text: https://github.com/sibiraj-s/ngx-editor/blob/master/projects/ngx-editor/src/lib/plugins/link.ts

I will investigate whether this is the cause.

REPLicated commented 3 weeks ago

It seems that the HTML is first pasted, and then the transformPasted of the ngx-editor linkify plugin is called with the link text. Since its regex matching is not very strict, the link text "foo:bar.pdf" is recognized as a link and then pasted as a second link after the first one.

@sibiraj-s is this intended behavior?

marijnh commented 3 weeks ago

Since the misbehavior doesn't seem to be in code I maintain, I'm going to close this issue here.

sibiraj-s commented 3 weeks ago

Hi @REPLicated, I have to check, please create a issue in the editors repo and continue the discussion there.