@peaceroad/markdown-it-figure-with-p-caption 0.5.1 → 0.5.3

package/README.md

@@ -2,9 +2,9 @@
 
 This is a markdown-it plugin.
 
-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.
+For a paragraph with one image/images only, a table or code block or a blockquote or a iframe, 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.
+1. Check that the element: one image only paragraph, table, code block, samp block, blockquote, and video, iframe.
 2. Check if this element has a caption paragraph immediately before or after it
 3. If there is the caption paragraph, convert them to figure and figcaption element.
 
@@ -389,6 +389,14 @@ A paragraph.
 <p>A paragraph.</p>
 ~~~
 
+### Convert one video element without caption
+
+Convert one video element without a caption paragraph to figure element.
+
+```js
+md.use(mdFigureWithPCaption, {videoWithoutCaption: true});
+```
+
 #### Convert one iframe without caption
 
 Convert one iframe without a caption paragraph to iframe element. (adn twitter blockquote embed eelment.)

package/index.js

@@ -15,6 +15,7 @@ module.exports = function figure_with_caption_plugin(md, option) {
     jointSpaceUseHalfWidth: false,
     oneImageWithoutCaption: false,
     iframeWithoutCaption: false,
+    videoWithoutCaption: false,
     removeUnnumberedLabel: false,
     removeUnnumberedLabelExceptMarks: [],
     multipleImages: true,
@@ -130,7 +131,10 @@ module.exports = function figure_with_caption_plugin(md, option) {
     const figureStartToken = new state.Token('figure_open', 'figure', 1);
     figureStartToken.attrSet('class', 'f-' + tagName);
     if (sp) {
-      if (sp.isTwitterBlock) {
+      if (sp.isYoutube) {
+        figureStartToken.attrSet('class', 'f-video');
+      }
+      if (sp.isTwitter) {
         if (sp.hasImgCaption) {
           figureStartToken.attrSet('class', 'f-img');
         } else {
@@ -263,12 +267,12 @@ module.exports = function figure_with_caption_plugin(md, option) {
           tagName = tags[ctj];
           if (tagName === 'iframe') {
             if(/^<[^>]*? src="https:\/\/(?:www.youtube-nocookie.com|player.vimeo.com)\//i.test(token.content)) {
-              tagName = 'video'; // figure.f-video used.
+              sp.isYoutube = true;
             }
           }
           if (tagName === 'blockquote') {
             if(/^<[^>]*? class="twitter-tweet"/.test(token.content)) {
-              sp.isTwitterBlock = true;
+              sp.isTwitter = true;
               if (n > 2) {
                 if (state.tokens[n-2].children.length > 1) {
                   if (state.tokens[n-2].children[1].attrs.length > 0) {
@@ -300,9 +304,11 @@ module.exports = function figure_with_caption_plugin(md, option) {
           }
           checkToken = true;
           caption = checkCaption(state, n, en, tagName, caption);
-          if (opt.iframeWithoutCaption || caption.hasPrev || caption.hasNext) {
+          if (caption.hasPrev || caption.hasNext ||
+            (opt.iframeWithoutCaption && (tagName === 'iframe' || sp.isTwitter)) ||
+            (opt.videoWithoutCaption && tagName === 'video')) {
             range = wrapWithFigure(state, range, tagName, false, sp);
-            if (opt.iframeWithoutCaption && (!caption.hasPrev || !caption.hasNext)) {
+            if ((opt.videoWithoutCaption || opt.iframeWithoutCaption) && (!caption.hasPrev || !caption.hasNext)) {
               n = en + 2;
             }
             break;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@peaceroad/markdown-it-figure-with-p-caption",
-  "version": "0.5.1",
+  "version": "0.5.3",
   "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,10 +13,10 @@
     "url": "https://github.com/peaceroad/p7d-markdown-it-figure-with-p-caption/issues"
   },
   "devDependencies": {
-    "markdown-it": "^12.1.0",
-    "markdown-it-attrs": "^4.1.4"
+    "markdown-it": "^14.1.0",
+    "markdown-it-attrs": "^4.1.6"
   },
   "dependencies": {
-    "p7d-markdown-it-p-captions": "^0.10.0"
+    "p7d-markdown-it-p-captions": "^0.12.0"
   }
 }

package/test/examples.txt

@@ -731,6 +731,17 @@ A paragraph.
 <iframe class="speakerdeck-iframe" style="border: 0px none; background: rgba(0, 0, 0, 0.1) padding-box; margin: 0px; padding: 0px; border-radius: 6px; box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 40px; width: 100%; height: auto; aspect-ratio: 560 / 314;" src="https://speakerdeck.com/player/xxxxxxxxxxxxxx" title="xxxxxxxxxxx" allowfullscreen="true" data-ratio="1.78343949044586" frameborder="0"></iframe>
 </figure>
 
+
+[Markdown]
+Slide. A caption.
+
+<iframe class="speakerdeck-iframe" style="border: 0px none; background: rgba(0, 0, 0, 0.1) padding-box; margin: 0px; padding: 0px; border-radius: 6px; box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 40px; width: 100%; height: auto; aspect-ratio: 560 / 314;" src="https://speakerdeck.com/player/xxxxxxxxxxxxxx" title="xxxxxxxxxxx" allowfullscreen="true" data-ratio="1.78343949044586" frameborder="0"></iframe>
+[HTML]
+<figure class="f-iframe">
+<figcaption><span class="f-slide-label">Slide<span class="f-slide-label-joint">.</span></span> A caption.</figcaption>
+<iframe class="speakerdeck-iframe" style="border: 0px none; background: rgba(0, 0, 0, 0.1) padding-box; margin: 0px; padding: 0px; border-radius: 6px; box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 40px; width: 100%; height: auto; aspect-ratio: 560 / 314;" src="https://speakerdeck.com/player/xxxxxxxxxxxxxx" title="xxxxxxxxxxx" allowfullscreen="true" data-ratio="1.78343949044586" frameborder="0"></iframe>
+</figure>
+
 [Markdown]
 <iframe src="https://player.vimeo.com/video/xxxxxxxxxxxxxxx" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
 <p><a href="https://vimeo.com/xxxx">Title</a> from <a href="https://vimeo.com/yyy">User</a> on <a href="https://vimeo.com">Vimeo</a>.</p>
@@ -898,3 +909,32 @@ A paragraph.
 <img src="cat3.jpg" alt="Three cat"><img src="cat4.jpg" alt="Four cat">
 </figure>
 <p>A paragraph.</p>
+
+
+[Markdown]
+<video controls width="400" height="300">
+<source src="example.mp4" type="video/mp4">
+</video>
+[HTML]
+<video controls width="400" height="300">
+<source src="example.mp4" type="video/mp4">
+</video>
+
+[Markdown]
+<video controls width="400" height="300">
+<source src="example.mp4" type="video/mp4">
+</video>
+[HTML]
+<figure class="f-video">
+<video controls width="400" height="300">
+<source src="example.mp4" type="video/mp4">
+</video>
+</figure>
+
+[Markdown]
+<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">XXXXX <a href="https://t.co/XXXXX">https://t.co/XXXXX</a></p>&mdash; User (@twitter) <a href="https://twitter.com/UserID/status/XXXXX">August 4, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
+[HTML]
+<figure class="f-iframe">
+<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">XXXXX <a href="https://t.co/XXXXX">https://t.co/XXXXX</a></p>&mdash; User (@twitter) <a href="https://twitter.com/UserID/status/XXXXX">August 4, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
+</figure>
+

package/test/test.js

@@ -4,44 +4,34 @@ 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 mdAllOptionTrue = require('markdown-it')({ html: true });
 
 const mdFigureWithPCaption = require('../index.js');
 
 const attrs = require('../node_modules/markdown-it-attrs');
-
-md.use(mdFigureWithPCaption, {
+let opt = {
   dquoteFilename: true,
   strongFilename: true,
   oneImageWithoutCaption: false,
   hasNumClass: true,
-});
+}
+md.use(mdFigureWithPCaption, opt);
 
-mdOneImage.use(mdFigureWithPCaption, {
-  dquoteFilename: true,
-  strongFilename: true,
-  oneImageWithoutCaption: true,
-  hasNumClass: true,
-}).use(attrs);
+opt.oneImageWithoutCaption = true
+mdOneImage.use(mdFigureWithPCaption, opt).use(attrs);
 
-mdWithoutCaption.use(mdFigureWithPCaption, {
-  dquoteFilename: true,
-  strongFilename: true,
-  oneImageWithoutCaption: true,
-  iframeWithoutCaption: true,
-  hasNumClass: true,
-}).use(attrs);
+opt.iframeWithoutCaption = true
+mdWithoutCaption.use(mdFigureWithPCaption, opt).use(attrs);
+
+opt.multipleImages =  true
+mdMultipleImages.use(mdFigureWithPCaption, opt).use(attrs)
+
+opt.videoWithoutCaption = true
+mdAllOptionTrue.use(mdFigureWithPCaption, opt).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();
 let ms = [];
 let ms0 = exampleCont.split(/\n*\[Markdown\]\n/);
@@ -65,14 +55,16 @@ while(n < ms0.length) {
 }
 
 n = 1;
+let pass = true
 while(n < ms.length) {
   //if (n !== 37) { n++; continue };
-  console.log('Test: ' + n + ' >>>');
   //console.log(ms[n].markdown);
 
   const m = ms[n].markdown;
   let h = ''
-  if (n > 44) {
+  if (n >= 56) {
+    h = mdAllOptionTrue.render(m);
+  } else if (n > 44) {
     h = mdMultipleImages.render(m);
   } else if (n > 37) {
     h = mdWithoutCaption.render(m);
@@ -85,8 +77,13 @@ while(n < ms.length) {
   try {
     assert.strictEqual(h, ms[n].html);
   } catch(e) {
-    console.log('incorrect: ');
+    pass =false
+    console.log('Test: ' + n + ' >>>');
+    console.log('incorrect:');
+    console.log(opt);
     console.log('H: ' + h +'C: ' + ms[n].html);
   };
   n++;
-}
+}
+
+if (pass) console.log('Passed all test.')