@peaceroad/markdown-it-figure-with-p-caption 0.4.3 → 0.4.5

package/README.md

@@ -317,7 +317,9 @@ A paragraph.
 <p>A paragraph.</p>
 ~~~
 
-## Option: Convert one image paragraph without caption
+## Option
+
+### Convert one image paragraph without caption
 
 Convert one image paragraph without a caption paragraph to figure element.
 
@@ -340,3 +342,26 @@ A paragraph.
 </figure>
 <p>A paragraph.</p>
 ~~~
+
+#### Convert one iframe without caption
+
+Convert one iframe without a caption paragraph to figure element.
+
+```js
+md.use(mdFigureWithPCaption, {iframeWithoutCaption: true});
+```
+
+~~~
+[Markdown]
+A paragraph.
+
+<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/XXXXXXXXXXX" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+
+A paragraph.
+[HTML]
+<p>A paragraph.</p>
+<figure class="f-video">
+<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/XXXXXXXXXXX" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+</figure>
+<p>A paragraph.</p>
+~~~

package/index.js

@@ -14,6 +14,7 @@ module.exports = function figure_with_caption_plugin(md, option) {
     strongLabel: false,
     jointSpaceUseHalfWidth: false,
     oneImageWithoutCaption: false,
+    iframeWithoutCaption: false,
     removeUnnumberedLabel: false,
   };
   if (option !== undefined) {
@@ -236,11 +237,14 @@ module.exports = function figure_with_caption_plugin(md, option) {
         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'));
+          const hasTag = token.content.match(new RegExp('^<'+ tags[ctj] + ' ?[^>]*?>[\\s\\S]*?<\\/' + tags[ctj] + '> *?(?:<script [^>]*?>(?:</script>)?)?(\\n|$)'));
           if (!hasTag) {
             ctj++;
             continue;
           }
+          if (hasTag[hasTag.length - 1] !== '\n') {
+            token.content += '\n'
+          }
           tagName = tags[ctj];
           if (tagName === 'iframe') {
             if(/^<[^>]*? title="YouTube video player"/i.test(token.content)) {
@@ -276,19 +280,24 @@ module.exports = function figure_with_caption_plugin(md, option) {
           }
           checkToken = true;
           caption = checkCaption(state, n, en, tagName, caption);
-          if (caption.hasPrev || caption.hasNext) {
+          if (opt.iframeWithoutCaption || caption.hasPrev || caption.hasNext) {
             range = wrapWithFigure(state, range, tagName, false, sp);
+            if (opt.iframeWithoutCaption && (!caption.hasPrev || !caption.hasNext)) {
+              n = en + 2;
+            }
             break;
           }
           ctj++
         }
       }
 
-      if (token.type === 'paragraph_open'
-        && nextToken.type === 'inline'
-        && nextToken.children[0].type === 'image'
-        && nextToken.children.length === 1
-        && state.tokens[n+2].type === 'paragraph_close') {
+
+      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;
+          }
+        }
         checkToken = true;
         en = n + 2;
         range.end = en;
@@ -296,9 +305,9 @@ module.exports = function figure_with_caption_plugin(md, option) {
         nextToken.children[0].type = 'image';
         caption = checkCaption(state, n, en, tagName, caption);
         if (opt.oneImageWithoutCaption && state.tokens[n-1]) {
-          if (state.tokens[n-1].type === 'list_item_open') {n++; continue;}
+          if (state.tokens[n-1].type === 'list_item_open') {checkToken = false;}
         }
-        if (opt.oneImageWithoutCaption || caption.hasPrev || caption.hasNext) {
+        if (checkToken && (opt.oneImageWithoutCaption || caption.hasPrev || caption.hasNext)) {
           range = wrapWithFigure(state, range, tagName, true);
         }
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@peaceroad/markdown-it-figure-with-p-caption",
-  "version": "0.4.3",
+  "version": "0.4.5",
   "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": {
@@ -13,7 +13,8 @@
     "url": "https://github.com/peaceroad/p7d-markdown-it-figure-with-p-caption/issues"
   },
   "devDependencies": {
-    "markdown-it": "^12.1.0"
+    "markdown-it": "^12.1.0",
+    "markdown-it-attrs": "^4.1.4"
   },
   "dependencies": {
     "p7d-markdown-it-p-captions": "^0.9.0"

package/test/examples.txt

@@ -666,3 +666,49 @@ A paragraph.
 <p>A paragraph.</p>
 
 
+[Markdown]
+Figure. A Caption.
+
+![Figure](cat.jpg) {.style}
+[HTML]
+<figure class="f-img style">
+<figcaption><span class="f-img-label">Figure<span class="f-img-label-joint">.</span></span> A Caption.</figcaption>
+<img src="cat.jpg" alt="Figure">
+</figure>
+
+[Markdown]
+Figure. A Caption.
+
+![Figure](cat.jpg) Text {.style}
+[HTML]
+<p class="f-img"><span class="f-img-label">Figure<span class="f-img-label-joint">.</span></span> A Caption.</p>
+<p class="style"><img src="cat.jpg" alt="Figure"> Text</p>
+
+
+[Markdown]
+A paragraph.
+
+<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/XXXXXXXXXXX" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+
+A paragraph.
+[HTML]
+<p>A paragraph.</p>
+<figure class="f-video">
+<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/XXXXXXXXXXX" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+</figure>
+<p>A paragraph.</p>
+
+
+[Markdown]
+<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/XXXXXXXXXXX" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+[HTML]
+<figure class="f-video">
+<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/XXXXXXXXXXX" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+</figure>
+
+[Markdown]
+<iframe src="https://example.com/embed" class="mastodon-embed" style="max-width: 100%; border: 0" width="400" allowfullscreen="allowfullscreen"></iframe><script src="https://exapmle.com/embed.js" async="async"></script>
+[HTML]
+<figure class="f-iframe">
+<iframe src="https://example.com/embed" class="mastodon-embed" style="max-width: 100%; border: 0" width="400" allowfullscreen="allowfullscreen"></iframe><script src="https://exapmle.com/embed.js" async="async"></script>
+</figure>

package/test/test.js

@@ -2,8 +2,11 @@ const assert = require('assert');
 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 mdFigureWithPCaption = require('../index.js');
 
+const attrs = require('../node_modules/markdown-it-attrs');
 
 md.use(mdFigureWithPCaption, {
   dquoteFilename: true,
@@ -17,8 +20,15 @@ mdOneImage.use(mdFigureWithPCaption, {
   strongFilename: true,
   oneImageWithoutCaption: true,
   hasNumClass: true,
-});
+}).use(attrs);
 
+mdWithoutCaption.use(mdFigureWithPCaption, {
+  dquoteFilename: true,
+  strongFilename: true,
+  oneImageWithoutCaption: true,
+  iframeWithoutCaption: true,
+  hasNumClass: true,
+}).use(attrs);
 
 const example = __dirname + '/examples.txt';
 const mdPath = __dirname + '/examples.md';
@@ -52,7 +62,9 @@ while(n < ms.length) {
 
   const m = ms[n].markdown;
   let h = ''
-  if (n > 20) {
+  if (n > 37) {
+    h = mdWithoutCaption.render(m);
+  } else if (n > 20) {
     h = mdOneImage.render(m);
   } else {
     h = md.render(m);