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?