fix: youtube url parser

thematters · May 24, 2023 · 62b5770 · 62b5770
1 parent 441b15b
commit 62b5770
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 30 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@matters/matters-editor",
-  "version": "0.2.0-alpha.46",
+  "version": "0.2.0-alpha.47",
   "description": "Editor for matters.news",
   "author": "https://github.com/thematters",
   "homepage": "https://github.com/thematters/matters-editor",

diff --git a/src/editors/extensions/figureEmbed.ts b/src/editors/extensions/figureEmbed.ts
@@ -97,7 +97,7 @@ export const normalizeEmbedURL = (url: string): NormalizeEmbedURLReturn => {
   ].includes(hostname)
   if (isYouTube) {
     const v = searchParams.get('v')
-    const t = searchParams.get('t')
+    const t = searchParams.get('t') || searchParams.get('start')
     const qs = new URLSearchParams({
       rel: '0',
       ...(t ? { start: t } : {}),
@@ -113,7 +113,7 @@ export const normalizeEmbedURL = (url: string): NormalizeEmbedURLReturn => {
     }
 
     return {
-      url: `https://www.youtube.com/embed/${id}` + (qs ? `?=${qs}` : ''),
+      url: `https://www.youtube.com/embed/${id}` + (qs ? `?${qs}` : ''),
       provider: Provider.YouTube,
       allowfullscreen: true,
       sandbox: [],
@@ -327,24 +327,26 @@ export const FigureEmbed = Node.create({
 
   addCommands() {
     return {
-      setFigureEmbed: ({ caption, position, ...attrs }) => ({ chain }) => {
-        const insertContent = [
-          {
-            type: this.name,
-            attrs,
-            content: caption ? [{ type: 'text', text: caption }] : [],
-          },
-          {
-            type: 'paragraph',
-          },
-        ]
-
-        if (!position) {
-          return chain().insertContent(insertContent).focus().run()
-        }
-
-        return chain().insertContentAt(position, insertContent).focus().run()
-      },
+      setFigureEmbed:
+        ({ caption, position, ...attrs }) =>
+        ({ chain }) => {
+          const insertContent = [
+            {
+              type: this.name,
+              attrs,
+              content: caption ? [{ type: 'text', text: caption }] : [],
+            },
+            {
+              type: 'paragraph',
+            },
+          ]
+
+          if (!position) {
+            return chain().insertContent(insertContent).focus().run()
+          }
+
+          return chain().insertContentAt(position, insertContent).focus().run()
+        },
     }
   },
 

diff --git a/src/transformers/normalize.test.ts b/src/transformers/normalize.test.ts
@@ -67,8 +67,8 @@ describe('Normalization', () => {
 
     // <iframe /> -> <iframe></iframe>
     expectNormalizeArticleHTML(
-      '<figure class="embed" data-provider="youtube"><div class="iframe-container"><iframe src="https://www.youtube.com/embed/Zk7DppcfaMY?=rel=0" loading="lazy" allowfullscreen frameborder="0" /></div><figcaption></figcaption></figure>',
-      '<figure class="embed embed-video" data-provider="youtube"><div class="iframe-container"><iframe src="https://www.youtube.com/embed/Zk7DppcfaMY?=rel=0" loading="lazy" allowfullscreen frameborder="0"></iframe></div><figcaption></figcaption></figure>'
+      '<figure class="embed" data-provider="youtube"><div class="iframe-container"><iframe src="https://www.youtube.com/embed/Zk7DppcfaMY?rel=0" loading="lazy" allowfullscreen frameborder="0" /></div><figcaption></figcaption></figure>',
+      '<figure class="embed embed-video" data-provider="youtube"><div class="iframe-container"><iframe src="https://www.youtube.com/embed/Zk7DppcfaMY?rel=0" loading="lazy" allowfullscreen frameborder="0"></iframe></div><figcaption></figcaption></figure>'
     )
   })
 
@@ -132,25 +132,25 @@ describe('Normalization', () => {
   test('figure: embeds', () => {
     // identical
     expectNormalizeArticleHTML(
-      '<figure class="embed embed-video" data-provider="youtube"><div class="iframe-container"><iframe src="https://www.youtube.com/embed/Zk7DppcfaMY?=rel=0" loading="lazy" allowfullscreen frameborder="0"></iframe></div><figcaption></figcaption></figure>',
-      '<figure class="embed embed-video" data-provider="youtube"><div class="iframe-container"><iframe src="https://www.youtube.com/embed/Zk7DppcfaMY?=rel=0" loading="lazy" allowfullscreen frameborder="0"></iframe></div><figcaption></figcaption></figure>'
+      '<figure class="embed embed-video" data-provider="youtube"><div class="iframe-container"><iframe src="https://www.youtube.com/embed/Zk7DppcfaMY?rel=0" loading="lazy" allowfullscreen frameborder="0"></iframe></div><figcaption></figcaption></figure>',
+      '<figure class="embed embed-video" data-provider="youtube"><div class="iframe-container"><iframe src="https://www.youtube.com/embed/Zk7DppcfaMY?rel=0" loading="lazy" allowfullscreen frameborder="0"></iframe></div><figcaption></figcaption></figure>'
     )
 
     // backward compatible
     expectNormalizeArticleHTML(
       '<figure class="embed-video"><div class="iframe-container"><iframe src="https://www.youtube.com/embed/Zk7DppcfaMY?rel=0" frameborder="0" allowfullscreen="true" sandbox="allow-scripts allow-same-origin allow-popups"></iframe></div><figcaption><span></span></figcaption></figure>',
-      '<figure class="embed embed-video" data-provider="youtube"><div class="iframe-container"><iframe src="https://www.youtube.com/embed/Zk7DppcfaMY?=rel=0" loading="lazy" allowfullscreen frameborder="0"></iframe></div><figcaption></figcaption></figure>'
+      '<figure class="embed embed-video" data-provider="youtube"><div class="iframe-container"><iframe src="https://www.youtube.com/embed/Zk7DppcfaMY?rel=0" loading="lazy" allowfullscreen frameborder="0"></iframe></div><figcaption></figcaption></figure>'
     )
 
     // unknown attributes
     expectNormalizeArticleHTML(
-      '<figure class="embed" something unknown data-provider="youtube" style="font-size: 500"><div class="iframe-container"><iframe src="https://www.youtube.com/embed/Zk7DppcfaMY?=rel=0" loading="lazy" allowfullscreen frameborder="0"></iframe></div><figcaption></figcaption></figure>',
-      '<figure class="embed embed-video" data-provider="youtube"><div class="iframe-container"><iframe src="https://www.youtube.com/embed/Zk7DppcfaMY?=rel=0" loading="lazy" allowfullscreen frameborder="0"></iframe></div><figcaption></figcaption></figure>'
+      '<figure class="embed" something unknown data-provider="youtube" style="font-size: 500"><div class="iframe-container"><iframe src="https://www.youtube.com/embed/Zk7DppcfaMY?rel=0" loading="lazy" allowfullscreen frameborder="0"></iframe></div><figcaption></figcaption></figure>',
+      '<figure class="embed embed-video" data-provider="youtube"><div class="iframe-container"><iframe src="https://www.youtube.com/embed/Zk7DppcfaMY?rel=0" loading="lazy" allowfullscreen frameborder="0"></iframe></div><figcaption></figcaption></figure>'
     )
 
     // unmatch
     expectNormalizeArticleHTML(
-      '<figure class="unknown class embed" something unknown data-provider="youtube" style="font-size: 500"><div class="iframe-container"><iframe src="https://www.youtube.com/embed/Zk7DppcfaMY?=rel=0" loading="lazy" allowfullscreen frameborder="0"></iframe></div><figcaption></figcaption></figure>',
+      '<figure class="unknown class embed" something unknown data-provider="youtube" style="font-size: 500"><div class="iframe-container"><iframe src="https://www.youtube.com/embed/Zk7DppcfaMY?rel=0" loading="lazy" allowfullscreen frameborder="0"></iframe></div><figcaption></figcaption></figure>',
       '<p></p>'
     )
   })
@@ -164,7 +164,7 @@ describe('Normalization', () => {
       'https://youtu.be/Zk7DppcfaMY/',
       'https://youtu.be/Zk7DppcfaMY?abc=123',
     ]
-    const youtubeTargetUrl = 'https://www.youtube.com/embed/Zk7DppcfaMY?=rel=0'
+    const youtubeTargetUrl = 'https://www.youtube.com/embed/Zk7DppcfaMY?rel=0'
     youtubeUrls.forEach((url) => {
       expectNormalizeArticleHTML(
         `<figure class="embed" data-provider="youtube"><div class="iframe-container"><iframe src="${url}" loading="lazy" allowfullscreen frameborder="0"></iframe></div><figcaption></figcaption></figure>`,