Merge 0c010d6 into 41f5281

packages/rebber-plugins/__tests__/__snapshots__/rebber.test.js.snap

@@ -871,7 +871,6 @@ exports[`mix-5 1`] = `
 "\\\\image{http://www.numerama.com/content/uploads/2016/07/espace.jpg}[espace\\\\textsuperscript{\\\\ref{footnote:node}}]
 
 
-
 \\\\footnotetext[node]{\\\\label{footnote:node} Two things are infinite: the universe and human stupidity.}"
 `;
 

packages/remark-captions/__tests__/__snapshots__/index.js.snap

@@ -52,6 +52,7 @@ exports[`code 1`] = `
 
 exports[`compiles to markdown when at least 1 block caption 1`] = `
 "foo
+
 ![](img)
 Figure: 3 this is a legend
 
@@ -65,6 +66,7 @@ Figure: 5 this is a text with and image
 in the middle
 
 Figure: 6 displayed as text
+
 ![](img)
 Figure: 7 is a legend
 
@@ -245,23 +247,23 @@ b<em>a</em>r</p>
 
 exports[`legend in paragraph 1`] = `
 "<p>foo</p>
-<p><figure><img src=\\"\\"><figcaption>1 this is parsed as legend</figcaption></figure></p>
+<figure><img src=\\"\\"><figcaption>1 this is parsed as legend</figcaption></figure>
 <p>baz</p>
 <p><img src=\\"\\">
 aFigure: 2 this is displayed as text</p>
 <p><img src=\\"https://zestedesavoir.com/static/images/home-clem.4a2f792744c9.png\\" alt=\\"alt 2b\\">
 this is displayed as text</p>
-<p>foo
-<figure><img src=\\"\\"><figcaption>3 this is a legend</figcaption></figure></p>
-<p><figure><img src=\\"\\"><figcaption>4 this is a legend, remainder of the paragraph goes into
+<p>foo</p>
+<figure><img src=\\"\\"><figcaption>3 this is a legend</figcaption></figure>
+<figure><img src=\\"\\"><figcaption>4 this is a legend, remainder of the paragraph goes into
 the
-legend</figcaption></figure></p>
+legend</figcaption></figure>
 <p>Figure: 5 this is a text with and image
 <img src=\\"\\">
 in the middle</p>
-<p>Figure: 6 displayed as text
-<figure><img src=\\"\\"><figcaption>7 is a legend</figcaption></figure></p>
-<p><figure><img src=\\"\\"><figcaption>8 is a legend.</figcaption></figure></p>
+<p>Figure: 6 displayed as text</p>
+<figure><img src=\\"\\"><figcaption>7 is a legend</figcaption></figure>
+<figure><img src=\\"\\"><figcaption>8 is a legend.</figcaption></figure>
 <p>Figure: 9 this is a text.</p>"
 `;
 

packages/remark-captions/dist/index.js

@@ -53,6 +53,38 @@ function plugin(opts) {
     Object.keys(externalBlocks).forEach(function (nodeType) {
       return visit(tree, nodeType, externLegendVisitorCreator(externalBlocks));
     });
+    visit(tree, 'figure', function (figure, index, parent) {
+      if (parent.type === 'paragraph') {
+        if (index === 0) {
+          parent.type = figure.type;
+          parent.data = figure.data;
+          parent.children = figure.children;
+          return;
+        }
+        parent.type = 'tempWrapper';
+      }
+    });
+    visit(tree, 'tempWrapper', function (wrapper, index, parent) {
+      var _parent$children;
+
+      var newChildren = [];
+      wrapper.children.forEach(function (node, i) {
+        var child = clone(node);
+        if (child.type === 'figure') {
+          newChildren.push(child);
+          return;
+        }
+        if (child.type === 'text' && !child.value.trim()) {
+          return;
+        } else if (child.type === 'text') {
+          child.value = child.value.trim();
+        }
+        wrapper.children[i].type = 'paragraph';
+        wrapper.children[i].children = [child];
+        newChildren.push(wrapper.children[i]);
+      });
+      (_parent$children = parent.children).splice.apply(_parent$children, [index, 1].concat(newChildren));
+    });
   };
 }
 

packages/remark-captions/src/index.js

@@ -49,6 +49,36 @@ function plugin (opts) {
 
     Object.keys(externalBlocks).forEach(nodeType =>
       visit(tree, nodeType, externLegendVisitorCreator(externalBlocks)))
+    visit(tree, 'figure', (figure, index, parent) => {
+      if (parent.type === 'paragraph') {
+        if (index === 0) {
+          parent.type = figure.type
+          parent.data = figure.data
+          parent.children = figure.children
+          return
+        }
+        parent.type = 'tempWrapper'
+      }
+    })
+    visit(tree, 'tempWrapper', (wrapper, index, parent) => {
+      const newChildren = []
+      wrapper.children.forEach((node, i) => {
+        const child = clone(node)
+        if (child.type === 'figure') {
+          newChildren.push(child)
+          return
+        }
+        if (child.type === 'text' && !child.value.trim()) {
+          return
+        } else if (child.type === 'text') {
+          child.value = child.value.trim()
+        }
+        wrapper.children[i].type = 'paragraph'
+        wrapper.children[i].children = [child]
+        newChildren.push(wrapper.children[i])
+      })
+      parent.children.splice(index, 1, ...newChildren)
+    })
   }
 }
 

packages/zmarkdown/__tests__/__snapshots__/latex.tests.js.snap

@@ -501,7 +501,7 @@ multi \\\\par line \\\\par  \\\\par cells \\\\par too & \\\\multicolumn{2}{|c|}{
 
 \\\\begin{longtabu}{|p{\\\\linewidth / 2}|p{\\\\linewidth / 2}|} \\\\hline
 title & image \\\\\\\\ \\\\hline
-space & \\\\image{https://i.ytimg.com/vi/lt0WQ8JzLz4/maxresdefault.jpg} \\\\\\\\ \\\\hline
+space & \\\\image{https://i.ytimg.com/vi/lt0WQ8JzLz4/maxresdefault.jpg}[space] \\\\\\\\ \\\\hline
 \\\\end{longtabu}
 
 
@@ -527,7 +527,6 @@ exports[`mix-5 1`] = `
 "\\\\image{http://www.numerama.com/content/uploads/2016/07/espace.jpg}[espace\\\\textsuperscript{\\\\ref{footnote:1}}]
 
 
-
 \\\\footnotetext[1]{\\\\label{footnote:1} Two things are infinite: the universe and human stupidity.}"
 `;
 

packages/zmarkdown/__tests__/__snapshots__/new-html-suite.test.js.snap

@@ -0,0 +1,10 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`images become figures: does not apply when a caption is present 1`] = `
+"<figure><img src=\\"http://example.com\\" alt=\\"foo\\"><figcaption>foo</figcaption></figure>
+<figure><img src=\\"http://example.com\\"><figcaption>Caption</figcaption></figure>
+<figure><img src=\\"http://example.com\\" alt=\\"foo\\"><figcaption>Caption</figcaption></figure>
+<figure><img src=\\"http://example.com\\"><figcaption></figcaption></figure>"
+`;
+
+exports[`images become figures: works with only an image 1`] = `"<figure><img src=\\"http://blabla.fr\\" alt=\\"wrapped into _figure_\\"><figcaption>wrapped into _figure_</figcaption></figure>"`;

packages/zmarkdown/__tests__/__snapshots__/old-suite-latex.test.js.snap

@@ -2793,8 +2793,7 @@ exports[`#misc properly renders h1.txt 1`] = `
 `;
 
 exports[`#misc properly renders image.txt 1`] = `
-"\\\\image{http://humane_man.jpg}
-
+"\\\\image{http://humane_man.jpg}[Poster]
 
 
 \\\\image{http://humane_man.jpg}
@@ -2803,7 +2802,7 @@ exports[`#misc properly renders image.txt 1`] = `
 
 \\\\footnote{\\\\label{poster}\\\\externalLink{http://humane\\\\_man.jpg}{http://humane\\\\_man.jpg}}
 
-\\\\image{}"
+\\\\image{}[Blank]"
 `;
 
 exports[`#misc properly renders image_in_links.txt 1`] = `"\\\\externalLink{\\\\image{path/to/img_thumb.png}}{path/to/image.png}"`;
@@ -4116,8 +4115,7 @@ Ce n'est pas une légende
 
 
 
-\\\\image{https://zestedesavoir.com/media/galleries/3014/bee33fae-2216-463a-8b85-d1d9efe2c374.png}
-
+\\\\image{https://zestedesavoir.com/media/galleries/3014/bee33fae-2216-463a-8b85-d1d9efe2c374.png}[toto]
 
 
 ce n'est pas une légende non plus"

packages/zmarkdown/__tests__/fixtures/misc/image.html

@@ -1,3 +1,3 @@
+<figure><img src="http://humane_man.jpg" alt="Poster" title="The most humane man."><figcaption>Poster</figcaption></figure>
 <p><img alt="Poster" src="http://humane_man.jpg" title="The most humane man."></p>
-<p><img alt="Poster" src="http://humane_man.jpg" title="The most humane man."></p>
-<p><img alt="Blank" src=""></p>
+<figure><img src="" alt="Blank"><figcaption>Blank</figcaption></figure>

packages/zmarkdown/__tests__/fixtures/zds/extensions/emoticons.html

@@ -4,5 +4,5 @@
 <p>Citation</p>
 </blockquote>
 <p><img alt=":D" src="/static/smileys/heureux.png" class="smiley"> Ce n'est pas une légende</p>
-<p><img alt="toto" src="https://zestedesavoir.com/media/galleries/3014/bee33fae-2216-463a-8b85-d1d9efe2c374.png"></p>
+<figure><img src="https://zestedesavoir.com/media/galleries/3014/bee33fae-2216-463a-8b85-d1d9efe2c374.png" alt="toto"><figcaption>toto</figcaption></figure>
 <p><img alt=":D" src="/static/smileys/heureux.png" class="smiley"> ce n'est pas une légende non plus</p>

packages/zmarkdown/__tests__/new-html-suite.test.js

@@ -150,3 +150,57 @@ describe('tables', () => {
     return expect(renderString(input)).resolves.toContain('<td><code>gauche \\| droite</code></td>')
   })
 })
+
+describe('images become figures:', () => {
+  it('works with only an image', () => {
+    const input = dedent`
+      ![wrapped into _figure_](http://blabla.fr)`
+    return expect(renderString(input)).resolves.toMatchSnapshot()
+  })
+
+  it('does not apply to images not alone in a block', async () => {
+    const input = dedent`
+      ![wrapped into figure](http://blabla.fr)
+      one image`
+
+    expect(await renderString(input)).not.toContain('<figure')
+
+    const input2 = dedent`
+      one image
+      ![wrapped into figure](http://blabla.fr)`
+
+    expect(await renderString(input2)).not.toContain('<figure')
+  })
+
+  it('does not apply to images without [alt]', async () => {
+    const input = dedent`![](http://example.com)`
+
+    expect(await renderString(input)).not.toContain('<figure')
+  })
+
+  it('does not transform inline images', async () => {
+    const input = dedent`
+      one image ![not wrapped into figure because inline](http://blabla.fr)
+    `
+    expect(await renderString(input)).not.toContain('<figure')
+  })
+
+  it('does not apply when a caption is present', async () => {
+    const input = dedent`
+      ![foo](http://example.com)
+
+      ![](http://example.com)
+      Figure: Caption
+
+      ![foo](http://example.com)
+      Figure: Caption
+
+      ![](http://example.com)
+      Figure:
+    `
+    const result = await renderString(input)
+
+    expect(result).not.toContain('<p><figure')
+    expect(result).toMatchSnapshot()
+  })
+})

packages/zmarkdown/index.js

@@ -69,6 +69,32 @@ const wrappers = {
   ],
 }
 
+const imageToFigure = (img, index, parent) => {
+  if (parent.children.length === 1 && parent.type === 'paragraph') {
+    if (!img.alt) {
+      return
+    }
+    const figureCaptionNode = {
+      type: 'figcaption',
+      children: [
+        {
+          type: 'text',
+          value: img.alt,
+        },
+      ],
+      data: {
+        hName: 'figcaption',
+      },
+    }
+    parent.type = 'figure'
+    parent.children = [clone(img), figureCaptionNode]
+    parent.data = {
+      hName: 'figure',
+    }
+  }
+}
+
+
 const zmdParser = (config, target) => {
   const mdProcessor = unified()
     .use(remarkParse, config.reParse)
@@ -98,6 +124,8 @@ const zmdParser = (config, target) => {
     .use(remarkSubSuper)
     .use(remarkTrailingSpaceHeading)
     .use(() => (tree, vfile) => {
+      // implement old functionality that transforms block images into figure
+      visit(tree, 'image', imageToFigure)
       /* extract some metadata for frontends */
 
       // if we don't have any headings, we add a flag to disable