[Bug] Twitch Extension nodes converted to HTML don't convert back properly if loaded into the editor again

[MMOSimca]

Affected Packages

@tiptap/extension-twitch

Version(s)

3.20.0

Bug Description

The issue occurs when the editor's content, after being read as HTML, is fed back into itself. For some reason, it strips the unique parts of the links out from the iframe elements, leaving generic player.twitch.tv URLs for Channel and Video links (which turn into "Invalid Twitch URL"). For Clips links, the unique clip ID is stripped, resulting in a "clip not found" entry. While it never turns into "Invalid Twitch URL", this is also wrong.

Browser Used

Chrome

Code Example URL

https://codesandbox.io/p/devbox/boring-star-xr4mhf?workspaceId=ws_7RxxXybA9sS3v4RjCuas2r

Expected Behavior

I expect the HTML to be converted back into PM nodes in Tiptap. This is how the YouTube extension functions.

Additional Context (Optional)

I assume this has to do with how Twitch's URLs have to be converted from the "normal" format to those weird player.twitch.tv links - the conversion probably isn't working right in the other direction. The YouTube extension doesn't need to do this, I think, so it doesn't have this issue.

In the example I provided, the issue is present. Just click on the big button at the top to trigger the issue repeatedly. I'm not sure how to get around codesandbox.io blocking Twitch content from loading, but that doesn't seem to matter since the underlying div/iframe structure is correct and the rest shouldn't matter (plus this code works fine locally and has the same bug).

Dependency Updates

• Yes, I've updated all my dependencies.

[MMOSimca]

Poking around at the code, the issue appears to be that the conversion from "Twitch URL" to "Twitch embed URL" is only done during renderHTML and not done in the reverse direction during parseHTML (or the second renderHTML that actually re-renders the elements).

Basically:

https://www.twitch.tv/examplechannel ->
  renderHTML() 1: https://player.twitch.tv/?channel=examplechannel&parent=example.com ->
    renderHTML() 2: "Invalid Twitch URL"
https://www.twitch.tv/videos/1234567890 ->
  renderHTML() 1: https://player.twitch.tv/?video=1234567890&parent=example.com ->
    renderHTML() 2: "Invalid Twitch URL"
https://www.twitch.tv/examplechannel/clip/ExampleClipName-ABC123 ->
  renderHTML() 1: https://clips.twitch.tv/embed?clip=ExampleClipName-ABC123&parent=example.com ->
    renderHTML() 2: https://clips.twitch.tv/embed?parent=example.com

In the first two cases, the URL is declared invalid because it fails to pass TWITCH_GLOBAL_REGEX, which only accepts twitch.tv and clips.twitch.tv domains. In the third case, it kind of succeeds but strips the "clip" parameter by accident, which is required to identify the clip.

After thinking about it, maybe transforming the URLs back into their non-embed form isn't the best solution anyway. After all, why is that important? Maybe the best solution is to just expand the regexes used so that Twitch embed URLs are treated as valid links and not discarded, ignored, or improperly parsed. That would both fix this bug and expand the range of Twitch URL formats that the extension can accept, which is a win-win, yeah?