Fix YouTube Embed extension for short URLs (#7390)

* fix(extension-youtube): fix YouTube Shorts embed URL query parameter separator

YouTube Shorts URLs were generating invalid embed URLs using '&' instead of '?'
as the query parameter separator. This fix changes the condition to use '?'
for all non-playlist URLs, including Shorts.

Fixes #7326

* test(extension-youtube): add playlist URL test to verify & separator

Address Copilot review feedback by adding test coverage for playlist URLs
to ensure the fix doesn't break existing list= behavior.

* test(extension-youtube): improve test naming accuracy

Address Copilot review feedback:
- Rename "with query parameters" to "with rel parameter" for accuracy
- Rename "without www" to "without www prefix" for clarity

Note: controls: true is intentionally kept in tests to prevent
controls=0 from being added to the URL (falsy values trigger this).

---------

Co-authored-by: Claude <noreply@anthropic.com>

Author: bdbch

.changeset/fix-youtube-shorts-embed-url.md

@@ -0,0 +1,5 @@
+---
+"@tiptap/extension-youtube": patch
+---
+
+Fix YouTube Shorts embed URLs using incorrect query parameter separator

packages/extension-youtube/__tests__/youtube.spec.ts

@@ -5,6 +5,8 @@ import Text from '@tiptap/extension-text'
 import Youtube from '@tiptap/extension-youtube'
 import { describe, expect, it } from 'vitest'
 
+import { getEmbedUrlFromYoutubeUrl } from '../src/utils.ts'
+
 /**
  * Most youtube tests should actually exist in the demo/ app folder
  */
@@ -77,4 +79,72 @@ describe('extension-youtube', () => {
     editor?.destroy()
     getEditorEl()?.remove()
   })
+
+  describe('YouTube Shorts URL handling', () => {
+    it('generates correct embed URL for YouTube Shorts with rel parameter', () => {
+      const result = getEmbedUrlFromYoutubeUrl({
+        url: 'https://www.youtube.com/shorts/EkRHhOCdZjw',
+        controls: true,
+        rel: 1,
+      })
+
+      expect(result).toBe('https://www.youtube.com/embed/EkRHhOCdZjw?rel=1')
+    })
+
+    it('generates correct embed URL for YouTube Shorts without www prefix', () => {
+      const result = getEmbedUrlFromYoutubeUrl({
+        url: 'https://youtube.com/shorts/EkRHhOCdZjw',
+        controls: true,
+        autoplay: true,
+      })
+
+      expect(result).toBe('https://www.youtube.com/embed/EkRHhOCdZjw?autoplay=1')
+    })
+
+    it('generates correct embed URL for YouTube Shorts with multiple parameters', () => {
+      const result = getEmbedUrlFromYoutubeUrl({
+        url: 'https://www.youtube.com/shorts/EkRHhOCdZjw',
+        autoplay: true,
+        controls: false,
+        rel: 0,
+      })
+
+      expect(result).toBe('https://www.youtube.com/embed/EkRHhOCdZjw?autoplay=1&controls=0&rel=0')
+    })
+
+    it('generates correct embed URL for YouTube Shorts with nocookie option', () => {
+      const result = getEmbedUrlFromYoutubeUrl({
+        url: 'https://www.youtube.com/shorts/EkRHhOCdZjw',
+        nocookie: true,
+        controls: true,
+        rel: 1,
+      })
+
+      expect(result).toBe('https://www.youtube-nocookie.com/embed/EkRHhOCdZjw?rel=1')
+    })
+
+    it('generates correct embed URL for YouTube Shorts without extra parameters', () => {
+      const result = getEmbedUrlFromYoutubeUrl({
+        url: 'https://www.youtube.com/shorts/EkRHhOCdZjw',
+        controls: true,
+      })
+
+      expect(result).toBe('https://www.youtube.com/embed/EkRHhOCdZjw')
+    })
+  })
+
+  describe('YouTube Playlist URL handling', () => {
+    it('generates correct embed URL for playlist with additional parameters using & separator', () => {
+      const result = getEmbedUrlFromYoutubeUrl({
+        url: 'https://www.youtube.com/playlist?list=PLrAXtmErZgOeiKm4sgNOknGvNjby9efdf',
+        controls: true,
+        autoplay: true,
+      })
+
+      // Playlist URLs use ?list= in base URL, so additional params should use &
+      expect(result).toBe(
+        'https://www.youtube-nocookie.com/embed/videoseries?list=PLrAXtmErZgOeiKm4sgNOknGvNjby9efdf&autoplay=1',
+      )
+    })
+  })
 })

packages/extension-youtube/src/utils.ts

@@ -158,7 +158,7 @@ export const getEmbedUrlFromYoutubeUrl = (options: GetEmbedUrlOptions) => {
   }
 
   if (params.length) {
-    outputUrl += `${matches[1] === 'v' ? '?' : '&'}${params.join('&')}`
+    outputUrl += `${matches[1] === 'list' ? '&' : '?'}${params.join('&')}`
   }
 
   return outputUrl