Video Element HTML Paste Missing Source

I tried implementing nodes for video and source but ran into an issue of copy and pasting those html elements from outside of ProseMirror on Chrome and Firefox.

Pasting the example from here, it seems that Chrome or Firefox doesn’t provide the source elements with the clipboard data, as we only get

<html>
<body>
<!--StartFragment-->
<video controls="" style="vertical-align: middle; max-width: 100%; color: rgb(232, 230, 227); font-family: Helvetica, Arial, sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(24, 26, 27); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"></video>
<!--EndFragment-->
</body>
</html>

This has no source elements even though the original code is

<video controls>
  <source src="https://storage.googleapis.com/web-dev-assets/video-and-source-tags/chrome.webm" type="video/webm">
  <source src="https://storage.googleapis.com/web-dev-assets/video-and-source-tags/chrome.mp4" type="video/mp4">
  <p>Your browser cannot play the provided video file.</p>
</video>

To replicate this, I pasted that example into https://prosemirror.net/examples/basic/ and set a breakpoint inside of https://prosemirror.net/examples/prosemirror.js at

    var n, r, o, i, s = Cr ? null : e.clipboardData, a = s && s.getData("text/html"), c = s && s.getData("text/plain");

where prosemirror handles a DataTransfer paste event. Then log the getData("text/html") to console.

Does anyone know if there’s a reason the source tags are not copied in the DataTransfer with the video tags?

what is your parseDOM looking like ? As far as I understand, you should be able to get the source if you set it up correctly.

For video I used

      parseDOM: [{
        tag: "video",
        getAttrs(dom: HTMLElement) {
          console.log("hi")
          return dom.querySelector("source") ? {} : false; // check for a source element
        }, 
      }],

and source I had

      parseDOM: [{tag: "source"}],

As far as I understand, you should be able to get the source if you set it up correctly.

I think the problem exists above the node schemas, because when you inspect the text/html that prosemirror gets from a paste event, the source tags aren’t there. And the text/html is what is fed into prosemirror and transformed by parseDOM down the pipe.

where prosemirror handles a DataTransfer paste event. Then log the getData(“text/html”) to console.

Yes I can confirm the raw event itself doesn’t have the sources, which makes me think that this might not be a problem in Prosemirror but something the browsers intentionally do. If you control the place where users will copy from, maybe you can override the copy behavior so it includes source information ?

Ah no; I was hoping for a general copy and paste method for videos from articles on the web like you can do with images right now.