fix(gatsby-remark-responsive-iframe): Support MDX by visiting JSX nod…

…es (#13913)

In MDX the nodes that need to be visited are labeled as JSX so this
includes that node type in addition to HTML.

Related:

- mdx-js/mdx#553
- #13552

packages/gatsby-remark-responsive-iframe/package.json

@@ -18,7 +18,9 @@
     "@babel/core": "^7.0.0",
     "babel-preset-gatsby-package": "^0.2.0",
     "cross-env": "^5.1.4",
-    "remark": "^9.0.0",
+    "remark": "^10.0.1",
+    "remark-mdx": "^1.0.14",
+    "semver": "^6.0.0",
     "unist-util-find": "^1.0.1"
   },
   "homepage": "https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-remark-responsive-iframe#readme",

packages/gatsby-remark-responsive-iframe/src/__tests__/__snapshots__/index.js.snap

@@ -1,5 +1,23 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`gatsby-remark-responsive-iframe can copy JSX images 1`] = `
+"
+          <div
+            class=\\"gatsby-resp-iframe-wrapper\\"
+            style=\\"padding-bottom: NaN%; position: relative; height: 0; overflow: hidden;\\"
+          >
+            <iframe url=\\"http://www.example.com/\\" style=\\"border:0;
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+          \\"></iframe>
+    
+          </div>
+          "
+`;
+
 exports[`gatsby-remark-responsive-iframe doesn't transform an iframe with dimensions: '100%' '100' 1`] = `
 "  <iframe url=\\"http://www.example.com/\\" width=\\"100%\\" height=\\"100\\"></iframe>
       "

packages/gatsby-remark-responsive-iframe/src/__tests__/index.js

@@ -1,9 +1,19 @@
 const Remark = require(`remark`)
 const find = require(`unist-util-find`)
 const _ = require(`lodash`)
+const semver = require(`semver`)
 
 const plugin = require(`../`)
 
+const testInNode8OrHigher = (title, ...args) => {
+  const isNode8OrHigher = semver.satisfies(process.version, `>=8`)
+  if (isNode8OrHigher) {
+    it(title, ...args)
+  } else {
+    it.skip(`skipped on Node 7 or lower: ${title}`, ...args)
+  }
+}
+
 const remark = new Remark().data(`settings`, {
   commonmark: true,
   footnotes: true,
@@ -73,6 +83,22 @@ describe(`gatsby-remark-responsive-iframe`, () => {
     })
   })
 
+  testInNode8OrHigher(`can copy JSX images`, async () => {
+    const mdx = require(`remark-mdx`)
+
+    const markdownAST = remark().use(mdx).parse(`
+<iframe url="http://www.example.com/" style="border:0;" width="600px" height="400px"></iframe>
+    `)
+
+    const transformed = await plugin({ markdownAST })
+    const node = find(transformed, function(node) {
+      return node.type === `html`
+    })
+
+    expect(node).toBeDefined()
+    expect(node.value).toMatchSnapshot()
+  })
+
   const shouldntTransform = [
     [`100%`, `100`],
     [`100`, `100%`],

packages/gatsby-remark-responsive-iframe/src/index.js

@@ -26,7 +26,7 @@ module.exports = ({ markdownAST }, pluginOptions = {}) =>
       wrapperStyle: ``,
     }
     const options = _.defaults(pluginOptions, defaults)
-    visit(markdownAST, `html`, node => {
+    visit(markdownAST, [`html`, `jsx`], node => {
       const $ = cheerio.load(node.value)
       const iframe = $(`iframe, object`)
       if (iframe.length) {