fix: transform paragraph parent node for standalone link nodes (#170)

Solves #102
queen-raae · Jul 20, 2022 · 193547e · 193547e
1 parent 78f4622
commit 193547e
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 37 deletions.
diff --git a/gatsby-remark-oembed/index.js b/gatsby-remark-oembed/index.js
@@ -31,13 +31,13 @@ module.exports = async (
 };
 
 // For each node this is the process
-const processNode = async (node, providers) => {
+const processNode = async ({ node, url }, providers) => {
   try {
-    const endpoint = getProviderEndpointForLinkUrl(node.url, providers);
+    const endpoint = getProviderEndpointForLinkUrl(url, providers);
 
     if (endpoint.url) {
       const oembedResponse = await fetchOembed(endpoint);
-      return tranformsLinkNodeToOembedNode(node, oembedResponse);
+      return tranformsLinkNodeToOembedNode({ node, url }, oembedResponse);
     }
   } catch (error) {
     error.url = node.url;

diff --git a/gatsby-remark-oembed/utils/selectPossibleOembedLinkNodes.js b/gatsby-remark-oembed/utils/selectPossibleOembedLinkNodes.js
@@ -15,15 +15,20 @@ const selectPossibleOembedLinkNodes = (markdownAST, usePrefix = false) => {
         node.children.length === 1 &&
         node.children[0].type === "text"
       ) {
-        possibleOembedLinkNodes.push(node);
+        possibleOembedLinkNodes.push({
+          node: ancestors[1],
+          url: node.url,
+        });
       }
     });
   } else {
     visitParents(markdownAST, "inlineCode", (node) => {
       const [prefix, ...rest] = node.value.split(":");
       if (usePrefix.includes(prefix.trim())) {
-        node.url = rest.join(":").trim();
-        possibleOembedLinkNodes.push(node);
+        possibleOembedLinkNodes.push({
+          node: node,
+          url: rest.join(":").trim(),
+        });
       }
     });
   }

diff --git a/gatsby-remark-oembed/utils/selectPossibleOembedLinkNodes.test.js b/gatsby-remark-oembed/utils/selectPossibleOembedLinkNodes.test.js
@@ -45,14 +45,18 @@ describe("#selectPossibleOembedLinkNodes", () => {
   test("select only links that are the only child of a paragraph", () => {
     const possibleOembedLinks = selectPossibleOembedLinkNodes(MARKDOWN_AST);
     expect(possibleOembedLinks).toHaveLength(2);
-    expect(possibleOembedLinks[0]).toMatchObject({
-      type: "link",
-      url: "http://www.youtube.com/watch?v=iwGFalTRHDA",
+    expect(possibleOembedLinks[0].node).toMatchObject({
+      type: "paragraph",
     });
-    expect(possibleOembedLinks[1]).toMatchObject({
-      type: "link",
-      url: "http://www.youtube.com/watch?v=iwGFalTRHDA",
+    expect(possibleOembedLinks[0].url).toBe(
+      "http://www.youtube.com/watch?v=iwGFalTRHDA"
+    );
+    expect(possibleOembedLinks[1].node).toMatchObject({
+      type: "paragraph",
     });
+    expect(possibleOembedLinks[1].url).toBe(
+      "http://www.youtube.com/watch?v=iwGFalTRHDA"
+    );
   });
 
   test("select only links that inline code and prefixed with 'oembed:'", () => {
@@ -61,21 +65,25 @@ describe("#selectPossibleOembedLinkNodes", () => {
     ]);
     expect(possibleOembedLinks).toHaveLength(1);
     // allow space after 'oembed:'
-    expect(possibleOembedLinks[0]).toMatchObject({
+    expect(possibleOembedLinks[0].node).toMatchObject({
       type: "inlineCode",
-      url: "https://twitter.com/raae/status/1045394833001652225",
     });
+    expect(possibleOembedLinks[0].url).toBe(
+      "https://twitter.com/raae/status/1045394833001652225"
+    );
   });
 
   test("select only links that inline code and prefixed with 'video:'", () => {
     const possibleOembedLinks = selectPossibleOembedLinkNodes(MARKDOWN_AST, [
       "video",
     ]);
     expect(possibleOembedLinks).toHaveLength(1);
-    expect(possibleOembedLinks[0]).toMatchObject({
+    expect(possibleOembedLinks[0].node).toMatchObject({
       type: "inlineCode",
-      url: "https://www.twitch.tv/videos/72749628",
     });
+    expect(possibleOembedLinks[0].url).toBe(
+      "https://www.twitch.tv/videos/72749628"
+    );
   });
 
   test("select only links that inline code and prefixed with 'oembed:' or 'video:'", () => {
@@ -85,13 +93,17 @@ describe("#selectPossibleOembedLinkNodes", () => {
     ]);
     expect(possibleOembedLinks).toHaveLength(2);
     // allow space after 'oembed:'
-    expect(possibleOembedLinks[0]).toMatchObject({
+    expect(possibleOembedLinks[0].node).toMatchObject({
       type: "inlineCode",
-      url: "https://twitter.com/raae/status/1045394833001652225",
     });
-    expect(possibleOembedLinks[1]).toMatchObject({
+    expect(possibleOembedLinks[0].url).toBe(
+      "https://twitter.com/raae/status/1045394833001652225"
+    );
+    expect(possibleOembedLinks[1].node).toMatchObject({
       type: "inlineCode",
-      url: "https://www.twitch.tv/videos/72749628",
     });
+    expect(possibleOembedLinks[1].url).toBe(
+      "https://www.twitch.tv/videos/72749628"
+    );
   });
 });
diff --git a/gatsby-remark-oembed/utils/tranformsLinkNodeToOembedNode.js b/gatsby-remark-oembed/utils/tranformsLinkNodeToOembedNode.js
@@ -1,4 +1,4 @@
-const tranformsLinkNodeToOembedNode = (node, oembedResult) => {
+const tranformsLinkNodeToOembedNode = ({ node }, oembedResult) => {
   if (oembedResult.html) {
     node.type = "html";
     node.value = oembedResult.html.replace(

diff --git a/gatsby-remark-oembed/utils/transformLinkNodesToOembedNode.test.js b/gatsby-remark-oembed/utils/transformLinkNodesToOembedNode.test.js
@@ -5,22 +5,24 @@ describe("#tranformsLinkNodeToOembedNode", () => {
     type: "link",
   };
 
-  const transformedNode = tranformsLinkNodeToOembedNode(originalNode, {
-    author_name: "LevelUpTuts",
-    author_url: "https://www.youtube.com/user/LevelUpTuts",
-    height: 270,
-    html:
-      '<iframe width="480" height="270" src="https://www.youtube.com/embed/b2H7fWhQcdE?feature=oembed" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>',
-    provider_name: "YouTube",
-    provider_url: "https://www.youtube.com/",
-    thumbnail_height: 360,
-    thumbnail_url: "https://i.ytimg.com/vi/b2H7fWhQcdE/hqdefault.jpg",
-    thumbnail_width: 480,
-    title: "GatsbyJS Tutorials #1 - Getting Started with Gatsby",
-    type: "video",
-    version: "1.0",
-    width: 480,
-  });
+  const transformedNode = tranformsLinkNodeToOembedNode(
+    { node: originalNode },
+    {
+      author_name: "LevelUpTuts",
+      author_url: "https://www.youtube.com/user/LevelUpTuts",
+      height: 270,
+      html: '<iframe width="480" height="270" src="https://www.youtube.com/embed/b2H7fWhQcdE?feature=oembed" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>',
+      provider_name: "YouTube",
+      provider_url: "https://www.youtube.com/",
+      thumbnail_height: 360,
+      thumbnail_url: "https://i.ytimg.com/vi/b2H7fWhQcdE/hqdefault.jpg",
+      thumbnail_width: 480,
+      title: "GatsbyJS Tutorials #1 - Getting Started with Gatsby",
+      type: "video",
+      version: "1.0",
+      width: 480,
+    }
+  );
 
   test("change node type to html", () => {
     expect(transformedNode.type).toBe("html");