Skip to content

fix: preserve twitch src on HTML round-trip#7696

Open
bdbch wants to merge 2 commits intomainfrom
fix/twitch-embed-roundtrip
Open

fix: preserve twitch src on HTML round-trip#7696
bdbch wants to merge 2 commits intomainfrom
fix/twitch-embed-roundtrip

Conversation

@bdbch
Copy link
Copy Markdown
Member

@bdbch bdbch commented Apr 3, 2026

Changes Overview

  • Fixes a bug where Twitch embeds lost their original video, clip, or channel URL when content was converted to HTML and then reloaded into the editor.

Implementation Approach

  • Added a reverse-embed URL parser in packages/extension-twitch/src/utils.ts and wired parseHTML attribute parsing for the Twitch node in packages/extension-twitch/src/twitch.ts.
  • Added a round-trip regression test to packages/extension-twitch/__tests__/twitch.spec.ts.

Testing Done

  • Ran the Twitch unit tests locally:
pnpm exec vitest run packages/extension-twitch/__tests__/twitch.spec.ts
  • Built the Twitch package:
cd packages/extension-twitch && pnpm build

Verification Steps

  • Run the Twitch unit test locally:
pnpm exec vitest run packages/extension-twitch/__tests__/twitch.spec.ts
  • Optionally build the package and inspect dist:
cd packages/extension-twitch && pnpm build

Additional Notes

  • A changeset is included at .changeset/green-stingrays-shop.md with a short user-facing note. No public API changes were made.

Checklist

  • I have created a changeset for this PR.
  • My changes do not break the library (local unit test passed for the Twitch spec).
  • I have added tests where applicable.
  • I have followed the project guidelines (run pnpm lint if needed).

Related Issues

Copilot AI review requested due to automatic review settings April 3, 2026 17:43
@changeset-bot
Copy link
Copy Markdown

changeset-bot bot commented Apr 3, 2026

🦋 Changeset detected

Latest commit: 8521ecb

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 72 packages
Name Type
@tiptap/extension-twitch Patch
@tiptap/core Patch
@tiptap/extension-audio Patch
@tiptap/extension-blockquote Patch
@tiptap/extension-bold Patch
@tiptap/extension-bubble-menu Patch
@tiptap/extension-bullet-list Patch
@tiptap/extension-code-block-lowlight Patch
@tiptap/extension-code-block Patch
@tiptap/extension-code Patch
@tiptap/extension-collaboration-caret Patch
@tiptap/extension-collaboration Patch
@tiptap/extension-color Patch
@tiptap/extension-details Patch
@tiptap/extension-document Patch
@tiptap/extension-drag-handle-react Patch
@tiptap/extension-drag-handle-vue-2 Patch
@tiptap/extension-drag-handle-vue-3 Patch
@tiptap/extension-drag-handle Patch
@tiptap/extension-emoji Patch
@tiptap/extension-file-handler Patch
@tiptap/extension-floating-menu Patch
@tiptap/extension-font-family Patch
@tiptap/extension-hard-break Patch
@tiptap/extension-heading Patch
@tiptap/extension-highlight Patch
@tiptap/extension-horizontal-rule Patch
@tiptap/extension-image Patch
@tiptap/extension-invisible-characters Patch
@tiptap/extension-italic Patch
@tiptap/extension-link Patch
@tiptap/extension-list Patch
@tiptap/extension-mathematics Patch
@tiptap/extension-mention Patch
@tiptap/extension-node-range Patch
@tiptap/extension-ordered-list Patch
@tiptap/extension-paragraph Patch
@tiptap/extension-strike Patch
@tiptap/extension-subscript Patch
@tiptap/extension-superscript Patch
@tiptap/extension-table-of-contents Patch
@tiptap/extension-table Patch
@tiptap/extension-text-align Patch
@tiptap/extension-text-style Patch
@tiptap/extension-text Patch
@tiptap/extension-typography Patch
@tiptap/extension-underline Patch
@tiptap/extension-unique-id Patch
@tiptap/extension-youtube Patch
@tiptap/extensions Patch
@tiptap/html Patch
@tiptap/markdown Patch
@tiptap/pm Patch
@tiptap/react Patch
@tiptap/starter-kit Patch
@tiptap/static-renderer Patch
@tiptap/suggestion Patch
@tiptap/vue-2 Patch
@tiptap/vue-3 Patch
@tiptap/extension-character-count Patch
@tiptap/extension-dropcursor Patch
@tiptap/extension-focus Patch
@tiptap/extension-gapcursor Patch
@tiptap/extension-history Patch
@tiptap/extension-list-item Patch
@tiptap/extension-list-keymap Patch
@tiptap/extension-placeholder Patch
@tiptap/extension-table-cell Patch
@tiptap/extension-table-header Patch
@tiptap/extension-table-row Patch
@tiptap/extension-task-item Patch
@tiptap/extension-task-list Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@netlify
Copy link
Copy Markdown

netlify bot commented Apr 3, 2026

Deploy Preview for tiptap-embed ready!

Name Link
🔨 Latest commit 8521ecb
🔍 Latest deploy log https://app.netlify.com/projects/tiptap-embed/deploys/69d0008c4780c80008d14222
😎 Deploy Preview https://deploy-preview-7696--tiptap-embed.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Fixes a Twitch embed round-trip issue in @tiptap/extension-twitch where the original Twitch URL (video/clip/channel) could be lost when content is rendered to HTML and then parsed back into the editor.

Changes:

  • Added a utility to reverse-parse Twitch embed URLs back into canonical node attributes (src, plus relevant params).
  • Updated the Twitch node’s addAttributes().parseHTML handling to restore canonical src (and parse width/height/autoplay/muted/time from HTML).
  • Added a regression test to verify src is preserved across HTML round-trips, plus a changeset entry.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 4 comments.

File Description
packages/extension-twitch/src/utils.ts Adds getAttributesFromTwitchEmbedUrl to convert embed URLs back into canonical Twitch node attrs.
packages/extension-twitch/src/twitch.ts Wires new parsing into parseHTML for node attributes so HTML re-import preserves canonical src.
packages/extension-twitch/tests/twitch.spec.ts Adds round-trip regression test ensuring src survives HTML export/import.
.changeset/green-stingrays-shop.md Adds a patch changeset describing the user-facing fix.

return {
src: {
default: null,
parseHTML: element => getParsedTwitchAttributes(element as HTMLElement)?.src,
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is the casting (as operator) always valid here? Or could there be a situation where the element is not an HTML element?

@arnaugomez
Copy link
Copy Markdown
Contributor

Should we do the same in the YouTube extension?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

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

3 participants