feat(image): optionally add image captions from alt tags

showdownjs · Aug 2, 2019 · 5557e62 · 5557e62
1 parent 6679891
commit 5557e62
Show file tree

Hide file tree

Showing 9 changed files with 110 additions and 70 deletions.
diff --git a/dist/showdown.js b/dist/showdown.js
diff --git a/dist/showdown.js.map b/dist/showdown.js.map
diff --git a/dist/showdown.min.js b/dist/showdown.min.js
diff --git a/dist/showdown.min.js.map b/dist/showdown.min.js.map
diff --git a/src/options.js b/src/options.js
@@ -46,6 +46,11 @@ function getDefaultOpts (simple) {
       describe: 'Turn on/off image dimension parsing',
       type: 'boolean'
     },
+    extractImageCaptions: {
+      defaultValue: false,
+      describe: 'Extract image alt tag as a caption for the image',
+      type: 'boolean'
+    },
     simplifiedAutoLink: {
       defaultValue: false,
       describe: 'Turn on/off GFM autolink style',

diff --git a/src/subParsers/makehtml/images.js b/src/subParsers/makehtml/images.js
@@ -59,7 +59,13 @@ showdown.subParser('makehtml.images', function (text, options, globals) {
       .replace(showdown.helper.regexes.asteriskDashTildeAndColon, showdown.helper.escapeCharactersCallback);
     //url = showdown.helper.escapeCharacters(url, '*_', false);
     url = url.replace(showdown.helper.regexes.asteriskDashTildeAndColon, showdown.helper.escapeCharactersCallback);
-    var result = '<img src="' + url + '" alt="' + altText + '"';
+    var result = '';
+
+    if (options.extractImageCaptions && altText) {
+      result += '<figure>';
+    }
+
+    result += '<img src="' + url + '" alt="' + altText + '"';
 
     if (title && showdown.helper.isString(title)) {
       title = title
@@ -79,6 +85,11 @@ showdown.subParser('makehtml.images', function (text, options, globals) {
 
     result += ' />';
 
+    if (options.extractImageCaptions && altText) {
+      result += '<figcaption>' + altText + '</figcaption>';
+      result += '</figure>';
+    }
+
     return result;
   }
 

diff --git a/test/functional/makehtml/cases/features/extractImageCaptions.html b/test/functional/makehtml/cases/features/extractImageCaptions.html
@@ -0,0 +1,2 @@
+<p><figure><img src="./image.png" alt="This is a caption" /><figcaption>This is a caption</figcaption></figure></p>
+<p><img src="./no-caption.png" alt="" /></p>
diff --git a/test/functional/makehtml/cases/features/extractImageCaptions.md b/test/functional/makehtml/cases/features/extractImageCaptions.md
@@ -0,0 +1,3 @@
+![This is a caption](./image.png)
+
+![](./no-caption.png)
diff --git a/test/functional/makehtml/testsuite.features.js b/test/functional/makehtml/testsuite.features.js
@@ -95,6 +95,8 @@ describe('makeHtml() features testsuite', function () {
         converter = new showdown.Converter({openLinksInNewWindow: true});
       } else if (testsuite[i].name === '#355.simplifiedAutoLink-URLs-inside-parenthesis-followed-by-another-character-are-not-parsed-correctly') {
         converter = new showdown.Converter({simplifiedAutoLink: true});
+      } else if (testsuite[i].name === 'extractImageCaptions') {
+        converter = new showdown.Converter({extractImageCaptions: true});
       } else {
         converter = new showdown.Converter();
       }