diff --git a/.circleci/config.yml b/.circleci/config.yml index 3d242998aac7d..634a1f992a910 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -540,6 +540,7 @@ jobs: - run: name: Run tests command: yarn jest --ci --runInBand ((yarn jest --listTests) | Foreach-Object {$_ -replace '.*\\packages', 'packages'} | Foreach-Object {$_ -replace '\\', '/'} | circleci tests split --split-by=timings) + no_output_timeout: 15m environment: NODE_OPTIONS: --max-old-space-size=2048 GENERATE_JEST_REPORT: "true" diff --git a/packages/gatsby-remark-images/src/__tests__/__snapshots__/index.js.snap b/packages/gatsby-remark-images/src/__tests__/__snapshots__/index.js.snap index c4c951fff5fba..138fbf30a3090 100644 --- a/packages/gatsby-remark-images/src/__tests__/__snapshots__/index.js.snap +++ b/packages/gatsby-remark-images/src/__tests__/__snapshots__/index.js.snap @@ -297,6 +297,37 @@ exports[`it transforms images in markdown and uses getRemarkFileDependency when " `; +exports[`it transforms images in markdown in nested markdown node 1`] = ` +" + + + \\"image\\" + + " +`; + exports[`it transforms images in markdown with query strings 1`] = ` " { + const dirName = `not-a-real-dir` + return { + files: [].concat(imagePaths).map(imagePath => { + return { + absolutePath: queryString.parseUrl(`${dirName}/${imagePath}`).url, + } + }), + markdownNode: createNode(content), + markdownAST: remark.parse(content), + getNode: id => { + if (id === 1234) { + return { + id: 1234, + internal: { type: `JsonRemarkProperty` }, + parent: 2345, + } + } + return { + dir: dirName, + internal: { + type: `File`, + }, + } + }, + compiler: { + parseString: remark.parse.bind(remark), + generateHTML: node => hastToHTML(toHAST(node)), + }, + } +} test(`it returns empty array when 0 images`, async () => { const content = ` @@ -170,6 +201,23 @@ test(`it transforms images in markdown`, async () => { expect(node.value).not.toMatch(``) }) +test(`it transforms images in markdown in nested markdown node`, async () => { + const imagePath = `images/my-image.jpeg` + const content = ` + +![image](./${imagePath}) + `.trim() + + const nodes = await plugin(createRecursivePluginOptions(content, imagePath)) + + expect(nodes.length).toBe(1) + + const node = nodes.pop() + expect(node.type).toBe(`html`) + expect(node.value).toMatchSnapshot() + expect(node.value).not.toMatch(``) +}) + test(`it transforms images in markdown with the "withWebp" option`, async () => { const imagePath = `images/my-image.jpeg` const content = ` diff --git a/packages/gatsby-remark-images/src/index.js b/packages/gatsby-remark-images/src/index.js index 5c480bef6754b..0f07da46b026f 100644 --- a/packages/gatsby-remark-images/src/index.js +++ b/packages/gatsby-remark-images/src/index.js @@ -143,7 +143,31 @@ module.exports = ( ) { // Check if this markdownNode has a File parent. This plugin // won't work if the image isn't hosted locally. - const parentNode = getNode(markdownNode.parent) + let parentNode = getNode(markdownNode.parent) + // check if the parent node is a File node, otherwise go up the chain and + // search for the closest parent File node. This is necessary in case + // you have markdown in child nodes (e.g. gatsby-plugin-json-remark). + if ( + parentNode && + parentNode.internal && + parentNode.internal.type !== `File` + ) { + let tempParentNode = parentNode + while ( + tempParentNode && + tempParentNode.internal && + tempParentNode.internal.type !== `File` + ) { + tempParentNode = getNode(tempParentNode.parent) + } + if ( + tempParentNode && + tempParentNode.internal && + tempParentNode.internal.type === `File` + ) { + parentNode = tempParentNode + } + } let imagePath if (parentNode && parentNode.dir) { imagePath = slash(path.join(parentNode.dir, getImageInfo(node.url).url))