@peaceroad/markdown-it-figure-with-p-caption 0.4.6 → 0.5.0

package/README.md

@@ -2,7 +2,7 @@
 
 This is a markdown-it plugin.
 
-For a paragraph with only one image, a table or code block or a blockquote, and by writing a caption paragraph immediately before or after, they are converted into the figure element with the figcaption element.
+For a paragraph with one image/images only, a table or code block or a blockquote, and by writing a caption paragraph immediately before or after, they are converted into the figure element with the figcaption element.
 
 1. Check that the element: one image only paragraph, table, code block, samp block, blockquote, and video.
 2. Check if this element has a caption paragraph immediately before or after it
@@ -10,7 +10,9 @@ For a paragraph with only one image, a table or code block or a blockquote, and
 
 The figcaption behavior of this plugin depends on [p7d-markdown-it-p-captions](https://www.npmjs.com/package/p7d-markdown-it-p-captions).
 
-Note. If code block language setting is "samp", change it to use samp element instead of code element.
+Notice. If code block language setting is "samp", change it to use samp element instead of code element.
+
+Notice. It assumes simultaneous use of `markdown-it-attrs`. However, if there is `{.style}` at the end of the image-only paragraph, and the next paragraph is a caption, processing is not handled well with `markdown-it-attrs` alone, so in order to normalize it, {} The processing is written in this plugin. (This process can be turned off by specifying `{styleProcess: false}`.) [0.5.0]
 
 Use it as follows.
 
@@ -96,7 +98,6 @@ A paragraph.
 <p>A paragraph.</p>
 
 
-
 [Markdown]
 A paragraph.
 
@@ -237,6 +238,68 @@ A paragraph.
 Note: External embedding supports Youtube and Twitter. Twitter embedding uses blockquote instead of iframe. Therefore, the caption identifier should use "Quote", but "Figure" is also acceptable.
 
 
+From version 0.5.0, it supports cases where a paragraph contains only multiple images. Instead of `f-img` as the figure class name, use the following class name. (This class name is unstable, but I probably won't change it.) 
+
+- `f-img-horizontal` if the image is written in one line on Markdown
+- `f-img-vertical` if images are written only vertically, one per line
+- `f-img-multiple` in other cases
+
+Notice. This process can be turned off by specifying `{multipleImages: false}`.
+
+```
+[Markdown]
+A paragraph. multipleImages: true. horizontal images only.
+
+![One cat](cat1.jpg) ![Two cat](cat2.jpg)
+
+Figure. Cats.
+
+A paragraph.
+[HTML]
+<p>A paragraph. multipleImages: true.  horizontal images only</p>
+<figure class="f-img-horizontal">
+<img src="cat1.jpg" alt="One cat"><img src="cat2.jpg" alt="Two cat">
+<figcaption><span class="f-img-label">Figure<span class="f-img-label-joint">.</span></span> Cats.</figcaption>
+</figure>
+<p>A paragraph.</p>
+
+[Markdown]
+A paragraph. multipleImages: true. vertical images only.
+
+Figure. Cats.
+
+![One cat](cat1.jpg) 
+     ![Two cat](cat2.jpg)
+
+A paragraph.
+[HTML]
+<p>A paragraph. multipleImages: true. vertical images only.</p>
+<figure class="f-img-vertical">
+<figcaption><span class="f-img-label">Figure<span class="f-img-label-joint">.</span></span> Cats.</figcaption>
+<img src="cat1.jpg" alt="One cat">
+<img src="cat2.jpg" alt="Two cat">
+</figure>
+<p>A paragraph.</p>
+
+[Markdown]
+A paragraph. multipleImages: true.
+
+Figure. Cats.
+
+![One cat](cat1.jpg) ![Two cat](cat2.jpg)
+![Three cat](cat3.jpg)
+
+A paragraph.
+[HTML]
+<p>A paragraph. multipleImages: true.</p>
+<figure class="f-img-multiple">
+<figcaption><span class="f-img-label">Figure<span class="f-img-label-joint">.</span></span> Cats.</figcaption>
+<img src="cat1.jpg" alt="One cat"><img src="cat2.jpg" alt="Two cat">
+<img src="cat3.jpg" alt="Three cat">
+</figure>
+<p>A paragraph.</p>
+```
+
 ## Option: Specify file name
 
 Specify the file name before writing the caption.

package/index.js

@@ -16,6 +16,8 @@ module.exports = function figure_with_caption_plugin(md, option) {
     oneImageWithoutCaption: false,
     iframeWithoutCaption: false,
     removeUnnumberedLabel: false,
+    multipleImages: true,
+    styleProcess: true,
   };
   if (option !== undefined) {
     for (let o in option) {
@@ -141,6 +143,13 @@ module.exports = function figure_with_caption_plugin(md, option) {
     const figureEndToken = new state.Token('figure_close', 'figure', -1);
     const breakToken = new state.Token('text', '', 0);
     breakToken.content = '\n';
+    if (sp) {
+      if (sp.attrs) {
+        for (let attr of sp.attrs) {
+          figureStartToken.attrJoin(attr[0], attr[1]);
+        }
+      }
+    }
     ///Add for vsce
     if(state.tokens[n].attrs) {
       for (let attr of state.tokens[n].attrs) {
@@ -186,9 +195,11 @@ module.exports = function figure_with_caption_plugin(md, option) {
       let tagName = '';
       let caption = {
         name: '',
+        nameSuffix: '',
         hasPrev: false,
         hasNext: false,
       };
+      let sp = {attrs: []};
 
       const checkTags = ['table', 'pre', 'blockquote'];
       let cti = 0;
@@ -239,7 +250,6 @@ module.exports = function figure_with_caption_plugin(md, option) {
       if (token.type === 'html_block') {
         const tags = ['video', 'audio', 'iframe', 'blockquote'];
         let ctj = 0;
-        let sp = {};
         while (ctj < tags.length) {
           const hasTag = token.content.match(new RegExp('^<'+ tags[ctj] + ' ?[^>]*?>[\\s\\S]*?<\\/' + tags[ctj] + '> *?(?:<script [^>]*?>(?:</script>)?)?(\\n|$)'));
           if (!hasTag) {
@@ -301,13 +311,77 @@ module.exports = function figure_with_caption_plugin(md, option) {
       }
 
 
-      if (token.type === 'paragraph_open' && nextToken.type === 'inline' && nextToken.children[0].type === 'image' && state.tokens[n+2].type === 'paragraph_close' && nextToken.children.length < 3) {
-        if (nextToken.children.length === 2) {
-          if (!nextToken.children[nextToken.children.length - 1].type === 'text' || !/^ *?\{.*?\}$/.test(nextToken.children[nextToken.children.length - 1].content)) {
-            n++; continue;
+      if (token.type === 'paragraph_open' && nextToken.type === 'inline' && nextToken.children[0].type === 'image') {
+        let ntChildTokenIndex = 1
+        let imageNum = 1
+        let isMultipleImagesHorizontal = true
+        let isMultipleImagesVertical = true
+        checkToken = true
+        while (ntChildTokenIndex < nextToken.children.length) {
+          const ntChildToken = nextToken.children[ntChildTokenIndex]
+          if (ntChildTokenIndex === nextToken.children.length - 1) {
+             let imageAttrs = ntChildToken.content.match(/^ *\{(.*?)\} *$/)
+            if(ntChildToken.type === 'text' && imageAttrs) {
+              imageAttrs = imageAttrs[1].split(/ +/)
+              let iai = 0
+              while (iai < imageAttrs.length) {
+                if (/^\./.test(imageAttrs[iai])) {
+                  imageAttrs[iai] = imageAttrs[iai].replace(/^\./, "class=")
+                }
+                if (/^#/.test(imageAttrs[iai])) {
+                  imageAttrs[iai] = imageAttrs[iai].replace(/^\#/, "id=")
+                }
+                let imageAttr = imageAttrs[iai].match(/^(.*?)="?(.*)"?$/)
+                if (!imageAttr || !imageAttr[1]) {
+                  iai++
+                  continue
+                }
+                sp.attrs.push([imageAttr[1], imageAttr[2]])
+                iai++
+              }
+              break
+            }
+          }
+
+          if (!opt.multipleImages) {
+            checkToken = false
+            break
+          }
+          if (ntChildToken.type === 'image') {
+            imageNum += 1
+          } else if (ntChildToken.type === 'text' && /^ *$/.test(ntChildToken.content)) {
+            isMultipleImagesVertical = false
+            if (isMultipleImagesVertical) {
+              isMultipleImagesHorizontal = false
+            }
+          } else if (ntChildToken.type === 'softbreak') {
+            isMultipleImagesHorizontal = false
+            if (isMultipleImagesHorizontal) {
+              isMultipleImagesVertical = false
+            }
+          } else {
+            checkToken = false
+            break
+          }
+          ntChildTokenIndex++
+        }
+        if (checkToken && imageNum > 1 && opt.multipleImages) {
+          if (isMultipleImagesHorizontal) {
+            caption.nameSuffix = '-horizontal'
+          } else if (isMultipleImagesVertical) {
+            caption.nameSuffix = '-vertical'
+          } else {
+            caption.nameSuffix = '-multiple'
+          }
+          ntChildTokenIndex = 0
+          while (ntChildTokenIndex < nextToken.children.length) {
+            const ccToken = nextToken.children[ntChildTokenIndex]
+            if (ccToken.type === 'text' && /^ *$/.test(ccToken.content)) {
+              ccToken.content = ''
+            }
+            ntChildTokenIndex++
           }
         }
-        checkToken = true;
         en = n + 2;
         range.end = en;
         tagName = 'img';
@@ -317,7 +391,12 @@ module.exports = function figure_with_caption_plugin(md, option) {
           if (state.tokens[n-1].type === 'list_item_open') {checkToken = false;}
         }
         if (checkToken && (opt.oneImageWithoutCaption || caption.hasPrev || caption.hasNext)) {
-          range = wrapWithFigure(state, range, tagName, true);
+          if (caption.nameSuffix) tagName += caption.nameSuffix
+          if (caption.hasNext && opt.styleProcess) {
+            range = wrapWithFigure(state, range, tagName, true, sp);
+          } else {
+            range = wrapWithFigure(state, range, tagName, true);
+          }
         }
       }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@peaceroad/markdown-it-figure-with-p-caption",
-  "version": "0.4.6",
+  "version": "0.5.0",
   "description": "A markdown-it plugin. For a paragraph with only one image, a table or code block or blockquote, and by writing a caption paragraph immediately before or after, they are converted into the figure element with the figcaption element.",
   "main": "index.js",
   "scripts": {

package/test/examples.txt

@@ -676,6 +676,17 @@ Figure. A Caption.
 <img src="cat.jpg" alt="Figure">
 </figure>
 
+
+[Markdown]
+![Figure](cat.jpg) {.style}
+
+Figure. A Caption.
+[HTML]
+<figure class="f-img style">
+<img src="cat.jpg" alt="Figure">
+<figcaption><span class="f-img-label">Figure<span class="f-img-label-joint">.</span></span> A Caption.</figcaption>
+</figure>
+
 [Markdown]
 Figure. A Caption.
 
@@ -748,3 +759,142 @@ A paragraph.
 </figure>
 <p>A paragraph.</p>
 
+[Markdown]
+A paragraph. multipleImages: true.
+
+Figure. Cats.
+
+![One cat](cat1.jpg) ![Two cat](cat2.jpg)
+
+A paragraph.
+[HTML]
+<p>A paragraph. multipleImages: true.</p>
+<figure class="f-img-horizontal">
+<figcaption><span class="f-img-label">Figure<span class="f-img-label-joint">.</span></span> Cats.</figcaption>
+<img src="cat1.jpg" alt="One cat"><img src="cat2.jpg" alt="Two cat">
+</figure>
+<p>A paragraph.</p>
+
+
+[Markdown]
+A paragraph. multipleImages: true.
+
+![One cat](cat1.jpg) ![Two cat](cat2.jpg)
+
+Figure. Cats.
+
+A paragraph.
+[HTML]
+<p>A paragraph. multipleImages: true.</p>
+<figure class="f-img-horizontal">
+<img src="cat1.jpg" alt="One cat"><img src="cat2.jpg" alt="Two cat">
+<figcaption><span class="f-img-label">Figure<span class="f-img-label-joint">.</span></span> Cats.</figcaption>
+</figure>
+<p>A paragraph.</p>
+
+
+[Markdown]
+A paragraph. multipleImages: true.
+
+Figure. Cats.
+
+![One cat](cat1.jpg)![Two cat](cat2.jpg)![Three cat](cat3.jpg) {.style}
+
+A paragraph.
+[HTML]
+<p>A paragraph. multipleImages: true.</p>
+<figure class="f-img-horizontal style">
+<figcaption><span class="f-img-label">Figure<span class="f-img-label-joint">.</span></span> Cats.</figcaption>
+<img src="cat1.jpg" alt="One cat"><img src="cat2.jpg" alt="Two cat"><img src="cat3.jpg" alt="Three cat">
+</figure>
+<p>A paragraph.</p>
+
+[Markdown]
+A paragraph. multipleImages: true.
+
+Figure. Cats.
+
+![One cat](cat1.jpg) 
+     ![Two cat](cat2.jpg)
+
+A paragraph.
+[HTML]
+<p>A paragraph. multipleImages: true.</p>
+<figure class="f-img-vertical">
+<figcaption><span class="f-img-label">Figure<span class="f-img-label-joint">.</span></span> Cats.</figcaption>
+<img src="cat1.jpg" alt="One cat">
+<img src="cat2.jpg" alt="Two cat">
+</figure>
+<p>A paragraph.</p>
+
+[Markdown]
+A paragraph. multipleImages: true.
+
+Figure. Cats.
+
+![One cat](cat1.jpg) ![Two cat](cat2.jpg)
+![Three cat](cat3.jpg)
+
+A paragraph.
+[HTML]
+<p>A paragraph. multipleImages: true.</p>
+<figure class="f-img-multiple">
+<figcaption><span class="f-img-label">Figure<span class="f-img-label-joint">.</span></span> Cats.</figcaption>
+<img src="cat1.jpg" alt="One cat"><img src="cat2.jpg" alt="Two cat">
+<img src="cat3.jpg" alt="Three cat">
+</figure>
+<p>A paragraph.</p>
+
+[Markdown]
+A paragraph. multipleImages: true.
+
+Figure. Cats.
+
+![One cat](cat1.jpg) ![Two cat](cat2.jpg)
+![Three cat](cat3.jpg) {.style}
+
+A paragraph.
+[HTML]
+<p>A paragraph. multipleImages: true.</p>
+<figure class="f-img-multiple style">
+<figcaption><span class="f-img-label">Figure<span class="f-img-label-joint">.</span></span> Cats.</figcaption>
+<img src="cat1.jpg" alt="One cat"><img src="cat2.jpg" alt="Two cat">
+<img src="cat3.jpg" alt="Three cat">
+</figure>
+<p>A paragraph.</p>
+
+
+[Markdown]
+A paragraph. multipleImages: true.
+
+![One cat](cat1.jpg) ![Two cat](cat2.jpg)
+![Three cat](cat3.jpg)![Four cat](cat4.jpg) {.style #id}
+
+Figure. Cats.
+
+A paragraph.
+[HTML]
+<p>A paragraph. multipleImages: true.</p>
+<figure class="f-img-multiple style" id="id">
+<img src="cat1.jpg" alt="One cat"><img src="cat2.jpg" alt="Two cat">
+<img src="cat3.jpg" alt="Three cat"><img src="cat4.jpg" alt="Four cat">
+<figcaption><span class="f-img-label">Figure<span class="f-img-label-joint">.</span></span> Cats.</figcaption>
+</figure>
+<p>A paragraph.</p>
+
+
+
+[Markdown]
+A paragraph. multipleImages: true.
+
+![One cat](cat1.jpg) ![Two cat](cat2.jpg)
+![Three cat](cat3.jpg)![Four cat](cat4.jpg) {.style #id}
+
+A paragraph.
+[HTML]
+<p>A paragraph. multipleImages: true.</p>
+<figure class="f-img-multiple style" id="id">
+<img src="cat1.jpg" alt="One cat"><img src="cat2.jpg" alt="Two cat">
+<img src="cat3.jpg" alt="Three cat"><img src="cat4.jpg" alt="Four cat">
+</figure>
+<p>A paragraph.</p>

package/test/test.js

@@ -3,6 +3,7 @@ const fs = require('fs');
 const md = require('markdown-it')({ html: true });
 const mdOneImage = require('markdown-it')({ html: true });
 const mdWithoutCaption = require('markdown-it')({ html: true });
+const mdMultipleImages = require('markdown-it')({ html: true });
 
 const mdFigureWithPCaption = require('../index.js');
 
@@ -30,6 +31,15 @@ mdWithoutCaption.use(mdFigureWithPCaption, {
   hasNumClass: true,
 }).use(attrs);
 
+mdMultipleImages.use(attrs).use(mdFigureWithPCaption, {
+  dquoteFilename: true,
+  strongFilename: true,
+  oneImageWithoutCaption: true,
+  iframeWithoutCaption: true,
+  hasNumClass: true,
+  multipleImages: true,
+})
+
 const example = __dirname + '/examples.txt';
 const mdPath = __dirname + '/examples.md';
 const exampleCont = fs.readFileSync(example, 'utf-8').trim();
@@ -56,13 +66,15 @@ while(n < ms0.length) {
 
 n = 1;
 while(n < ms.length) {
-  //if (n !== 22) { n++; continue };
+  //if (n !== 37) { n++; continue };
   console.log('Test: ' + n + ' >>>');
   //console.log(ms[n].markdown);
 
   const m = ms[n].markdown;
   let h = ''
-  if (n > 37) {
+  if (n > 44) {
+    h = mdMultipleImages.render(m);
+  } else if (n > 37) {
     h = mdWithoutCaption.render(m);
   } else if (n > 20) {
     h = mdOneImage.render(m);