search

ckeditor / ckeditor5

Powerful rich text editor framework with a modular architecture, modern integrations, and features like collaborative editing.
https://ckeditor.com/ckeditor-5
Other
9.37k stars 3.68k forks source link

Lone HTML <script> tags are stripped on paste #9659

Open Jules-Bertholet opened 3 years ago

Jules-Bertholet commented 3 years ago

📝 Provide detailed reproduction steps (if any)

I discovered this problem while debugging https://github.com/isaul32/ckeditor5-math/issues/35. The plugin makes it easy to observe the incorrect behavior:

  1. Open https://jsfiddle.net/isaul32/qktj9h7x/
  2. Attempt to copy and paste the first or second equation, with or without surrounding text. The operation will succeed
  3. Attempt to copy and paste the third or fourth equation, along with surrounding text. The operation will succeed.
  4. Attempt to copy and paste the third or fourth equation, without surrounding text. Nothing will be pasted.

The issue is that when content is pasted, _setupPasteDrop() from ClipboardPipeline processes the content with HtmlDataProcessor's toView(), which itself calls _toDom(), which processes the pasted HTML via a DOMParser:

_toDom( data ) {
    const document = this._domParser.parseFromString( data, 'text/html' );
    const fragment = document.createDocumentFragment();
    const nodes = document.body.childNodes;

    while ( nodes.length > 0 ) {
        fragment.appendChild( nodes[ 0 ] );
    }

    return fragment;
}

_toDom() only retains nodes in the body of DOMParser.parseFromString()'s response. However, when DOMParser encounters certain tags, like <script>, that are alone and not surrounded by text, it places these tags in the <head> and not the <body>. Therefore, if plugins (like the aforementioned math plugin) use <script> tags to store view elements, those elements can be stripped on paste.

✔️ Expected result

All HTML tags are retained when content is pasted into CKEditor.

❌ Actual result

Lone <script> tags are stripped upon pasting into CKEditor.

📃 Other details

If you'd like to see this fixed sooner, add a 👍 reaction to this post.

Jules-Bertholet commented 3 years ago

9674 addresses this

psmyrek commented 3 years ago

I was trying to reproduce this issue, but without success.

It all depends on what is copied/pasted:

Case 1: plain text is copied from equation input box → plain text is inserted

https://user-images.githubusercontent.com/56868128/123267855-c01ef200-d4fd-11eb-8602-4e60646ac7cf.mp4

Case 2: HTML content is copied from editor view → HTML content is inserted

https://user-images.githubusercontent.com/56868128/123267862-c319e280-d4fd-11eb-879a-8f784ba3ff95.mp4

It seems that it has nothing to do with the HtmlDataProcessor#_toDom() method in CKEditor 5.

The same behavior can be observed in your https://github.com/isaul32/ckeditor5-math/issues/34, where in the first video you copied & pasted plain text, but in the second video you copied & pasted HTML content.

Please let me know if my conclusions are correct.

Jules-Bertholet commented 3 years ago

@psmyrek The first video in the linked issue https://github.com/isaul32/ckeditor5-math/issues/34 doesn't actually demonstrate this issue (#9659). Yes, copying and pasting plain text copies and pastes plain text, this is normal. As for your case 2, the one that is relevant to reproduce this issue: in your video you have ckeditor5-math configured to use span tags; the issue only becomes apparent when the plugin is configured to use script tags (edit: see https://github.com/isaul32/ckeditor5-math#plugin-options for config instructions).

Jules-Bertholet commented 3 years ago

@psmyrek Video demonstrating the bug

https://user-images.githubusercontent.com/79955405/123275543-65bc6c00-d4d2-11eb-8cb9-328f340d8276.mp4

psmyrek commented 3 years ago

Thanks for the clarification.

I tried again, this time I think I followed the same steps as you did: I cloned https://github.com/isaul32/ckeditor5-math.git, installed all dependencies and started the development server on http://localhost:8080 with the yarn start. Also the ckeditor5-math package is configured to use script instead of span as its output type.

However, I am still unable to reproduce this error on my side. The copied equation in my case is always a complete HTML content: <html>\r\n<body>\r\n<!--StartFragment--><script type=\"math/tex\">e=mc^2</script><!--EndFragment-->\r\n</body>\r\n</html>. I wonder why on your side the <html> and <body> tags are missing and where did you get the <meta> tag from, that precedes the <script> tag in the copied equation.

https://user-images.githubusercontent.com/56868128/123379747-d923b380-d58e-11eb-8acb-36934124acbb.mp4

I've checked this issue in latest versions of Chrome, Firefox, Edge and Brave browsers and it works exactly the same in all of them, as I expected, but I wanted to make sure that the browser doesn't have any effect here.

Could you help me reproduce this issue? Do you know what I did different than you? Did I miss something?

Jules-Bertholet commented 3 years ago

@psmyrek I notice that you have Windows line endings (\r\n) in the HTML snippet in the debugger... maybe this is an OS-dependent-thing? I am on Fedora 34, with GNOME. Also, can you try dragging and dropping the equation? That should also reproduce the issue

Jules-Bertholet commented 3 years ago

@psmyrek Yes, this does in fact appear to be a Windows-specific behavior: https://docs.microsoft.com/en-us/windows/win32/dataxchg/html-clipboard-format

psmyrek commented 3 years ago

Thanks @Jules-Bertholet for the hints, this could be OS-related issue indeed.