From af209f9215d8cd9c5ec2f3fda1cbdae1ec40027d Mon Sep 17 00:00:00 2001 From: Jason Lengstorf Date: Thu, 2 Aug 2018 17:44:30 -0700 Subject: [PATCH 1/3] =?UTF-8?q?fix(gatsby-remark-images):=20don=E2=80=99t?= =?UTF-8?q?=20add=20links=20if=20image=20is=20already=20linked?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit fixes #6980 Co-authored-by: @pieh --- packages/gatsby-remark-images/package.json | 3 ++- .../src/__tests__/index.js | 23 +++++++++++++++++++ packages/gatsby-remark-images/src/index.js | 17 ++++++++++++-- 3 files changed, 40 insertions(+), 3 deletions(-) diff --git a/packages/gatsby-remark-images/package.json b/packages/gatsby-remark-images/package.json index 07be9a75590ee..7fabab416130e 100644 --- a/packages/gatsby-remark-images/package.json +++ b/packages/gatsby-remark-images/package.json @@ -12,7 +12,8 @@ "is-relative-url": "^2.0.0", "lodash": "^4.17.4", "slash": "^1.0.0", - "unist-util-select": "^1.5.0" + "unist-util-select": "^1.5.0", + "unist-util-visit-parents": "^2.0.1" }, "devDependencies": { "@babel/cli": "7.0.0-beta.52", diff --git a/packages/gatsby-remark-images/src/__tests__/index.js b/packages/gatsby-remark-images/src/__tests__/index.js index dc66744e49448..8168135c4e8b3 100644 --- a/packages/gatsby-remark-images/src/__tests__/index.js +++ b/packages/gatsby-remark-images/src/__tests__/index.js @@ -146,3 +146,26 @@ test(`it leaves non-relative HTML img tags alone`, async () => { const nodes = await plugin(createPluginOptions(content, imagePath)) expect(nodes[0].value).toBe(content) }) + +test(`it leaves images that are already linked alone`, async () => { + const imagePath = `image/my-image.jpg` + const content = ` +[![img](./${imagePath})](https://google.com) +` + + const nodes = await plugin(createPluginOptions(content, imagePath)) + expect(nodes).toEqual([]) +}) + +test(`it leaves linked HTML img tags alone`, async () => { + const imagePath = `images/this-image-already-has-a-link.jpeg` + + const content = ` + + + + `.trim() + + const nodes = await plugin(createPluginOptions(content, imagePath)) + expect(nodes[0].value).toBe(content) +}) diff --git a/packages/gatsby-remark-images/src/index.js b/packages/gatsby-remark-images/src/index.js index 36a00d1bfd2df..5a6430cab136e 100644 --- a/packages/gatsby-remark-images/src/index.js +++ b/packages/gatsby-remark-images/src/index.js @@ -1,4 +1,5 @@ const select = require(`unist-util-select`) +const visitWithParents = require(`unist-util-visit-parents`) const path = require(`path`) const isRelativeUrl = require(`is-relative-url`) const _ = require(`lodash`) @@ -30,11 +31,18 @@ module.exports = ( const options = _.defaults(pluginOptions, defaults) // This will only work for markdown syntax image tags - const markdownImageNodes = select(markdownAST, `image`) + let markdownImageNodes = [] // This will also allow the use of html image tags const rawHtmlNodes = select(markdownAST, `html`) + visitWithParents(markdownAST, `image`, (node, ancestors) => { + const inLink = ancestors.some(ancestor => ancestor.type === `link`) + if (!inLink) { + markdownImageNodes.push(node) + } + }) + // Takes a node and generates the needed images and then returns // the needed HTML replacement for the image const generateImagesAndUpdateNode = async function(node, resolve) { @@ -138,7 +146,7 @@ module.exports = ( ${node.alt ? node.alt : defaultAlt} 0) { + return + } + imageRefs.push($(this)) }) From b3099dbcc7846d18bfcb64f3421661663fa2924b Mon Sep 17 00:00:00 2001 From: Jason Lengstorf Date: Fri, 3 Aug 2018 18:18:41 -0700 Subject: [PATCH 2/3] fix: handle weird nesting and mixed MD/HTML --- .../src/__tests__/__snapshots__/index.js.snap | 64 +++++++++++++++++++ .../src/__tests__/index.js | 42 +++++++++++- packages/gatsby-remark-images/src/index.js | 45 +++++++++---- 3 files changed, 135 insertions(+), 16 deletions(-) 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 1739a79db4e72..8da215d9a4103 100644 --- a/packages/gatsby-remark-images/src/__tests__/__snapshots__/index.js.snap +++ b/packages/gatsby-remark-images/src/__tests__/__snapshots__/index.js.snap @@ -1,5 +1,69 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`it handles goofy nesting properly 1`] = ` +" + + + \\"test\\" + + + " +`; + +exports[`it leaves images that are already linked alone 1`] = ` +" + + + \\"img\\" + + + " +`; + +exports[`it leaves linked HTML img tags alone 1`] = ` +" + +" +`; + +exports[`it leaves single-line linked HTML img tags alone 1`] = ` +" + + + \\"this + + + " +`; + exports[`it transforms HTML img tags 1`] = ` " diff --git a/packages/gatsby-remark-images/src/__tests__/index.js b/packages/gatsby-remark-images/src/__tests__/index.js index 8168135c4e8b3..40d30dcfa61e3 100644 --- a/packages/gatsby-remark-images/src/__tests__/index.js +++ b/packages/gatsby-remark-images/src/__tests__/index.js @@ -154,7 +154,11 @@ test(`it leaves images that are already linked alone`, async () => { ` const nodes = await plugin(createPluginOptions(content, imagePath)) - expect(nodes).toEqual([]) + const node = nodes.pop() + + expect(node.type).toBe(`html`) + expect(node.value).toMatchSnapshot() + expect(node.value).not.toMatch(``) }) test(`it leaves linked HTML img tags alone`, async () => { @@ -167,5 +171,39 @@ test(`it leaves linked HTML img tags alone`, async () => { `.trim() const nodes = await plugin(createPluginOptions(content, imagePath)) - expect(nodes[0].value).toBe(content) + const node = nodes.pop() + + expect(node.type).toBe(`html`) + expect(node.value).toMatchSnapshot() + expect(node.value).not.toMatch(``) +}) + +test(`it leaves single-line linked HTML img tags alone`, async () => { + const imagePath = `images/this-image-already-has-a-link.jpeg` + + const content = ` + + `.trim() + + const nodes = await plugin(createPluginOptions(content, imagePath)) + const node = nodes.pop() + + expect(node.type).toBe(`html`) + expect(node.value).toMatchSnapshot() + expect(node.value).not.toMatch(``) +}) + +test(`it handles goofy nesting properly`, async () => { + const imagePath = `images/this-image-already-has-a-link.jpeg` + + const content = ` + **![test](./${imagePath})** + `.trim() + + const nodes = await plugin(createPluginOptions(content, imagePath)) + const node = nodes.pop() + + expect(node.type).toBe(`html`) + expect(node.value).toMatchSnapshot() + expect(node.value).not.toMatch(``) }) diff --git a/packages/gatsby-remark-images/src/index.js b/packages/gatsby-remark-images/src/index.js index 5a6430cab136e..72bc1f5cf1eb4 100644 --- a/packages/gatsby-remark-images/src/index.js +++ b/packages/gatsby-remark-images/src/index.js @@ -1,4 +1,4 @@ -const select = require(`unist-util-select`) +// const select = require(`unist-util-select`) const visitWithParents = require(`unist-util-visit-parents`) const path = require(`path`) const isRelativeUrl = require(`is-relative-url`) @@ -30,22 +30,34 @@ module.exports = ( const options = _.defaults(pluginOptions, defaults) + const findParentLinks = ({ children }) => + children.some( + node => + (node.type === `html` && !!node.value.match(/ { + const inLink = ancestors.some(findParentLinks) + + rawHtmlNodes.push({ node, inLink }) + }) + // This will only work for markdown syntax image tags let markdownImageNodes = [] - // This will also allow the use of html image tags - const rawHtmlNodes = select(markdownAST, `html`) - visitWithParents(markdownAST, `image`, (node, ancestors) => { - const inLink = ancestors.some(ancestor => ancestor.type === `link`) - if (!inLink) { - markdownImageNodes.push(node) - } + const inLink = ancestors.some(findParentLinks) + + markdownImageNodes.push({ node, inLink }) }) // Takes a node and generates the needed images and then returns // the needed HTML replacement for the image - const generateImagesAndUpdateNode = async function(node, resolve) { + const generateImagesAndUpdateNode = async function(node, resolve, inLink) { // 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) @@ -173,7 +185,7 @@ module.exports = ( ` // Make linking to original image optional. - if (options.linkImagesToOriginal) { + if (!inLink && options.linkImagesToOriginal) { rawHTML = ` + ({ node, inLink }) => new Promise(async (resolve, reject) => { const fileType = node.url.slice(-3) @@ -215,7 +227,11 @@ module.exports = ( fileType !== `gif` && fileType !== `svg` ) { - const rawHTML = await generateImagesAndUpdateNode(node, resolve) + const rawHTML = await generateImagesAndUpdateNode( + node, + resolve, + inLink + ) if (rawHTML) { // Replace the image node with an inline HTML node. @@ -234,7 +250,7 @@ module.exports = ( Promise.all( // Complex because HTML nodes can contain multiple images rawHtmlNodes.map( - node => + ({ node, inLink }) => new Promise(async (resolve, reject) => { if (!node.value) { return resolve() @@ -278,7 +294,8 @@ module.exports = ( ) { const rawHTML = await generateImagesAndUpdateNode( formattedImgTag, - resolve + resolve, + inLink ) if (rawHTML) { From b6107101e3875dc80b8e4a079c46c9321f68117d Mon Sep 17 00:00:00 2001 From: Jason Lengstorf Date: Fri, 3 Aug 2018 18:32:50 -0700 Subject: [PATCH 3/3] fix: remove bad check for parent links --- .../src/__tests__/__snapshots__/index.js.snap | 8 +++++++- packages/gatsby-remark-images/src/index.js | 5 ----- 2 files changed, 7 insertions(+), 6 deletions(-) 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 8da215d9a4103..2b6a2ce33edab 100644 --- a/packages/gatsby-remark-images/src/__tests__/__snapshots__/index.js.snap +++ b/packages/gatsby-remark-images/src/__tests__/__snapshots__/index.js.snap @@ -50,7 +50,13 @@ exports[`it leaves images that are already linked alone 1`] = ` exports[`it leaves linked HTML img tags alone 1`] = ` " - + + + + \\"this + + + " `; diff --git a/packages/gatsby-remark-images/src/index.js b/packages/gatsby-remark-images/src/index.js index 72bc1f5cf1eb4..b1f30caa64b03 100644 --- a/packages/gatsby-remark-images/src/index.js +++ b/packages/gatsby-remark-images/src/index.js @@ -264,11 +264,6 @@ module.exports = ( let imageRefs = [] $(`img`).each(function() { - // Make sure we don’t override already-linked images - if ($(this).closest(`a`).length > 0) { - return - } - imageRefs.push($(this)) })