@peaceroad/markdown-it-figure-with-p-caption 0.2.0 → 0.3.1

package/README.md

@@ -2,9 +2,9 @@
 
 This is a markdown-it plugin.
 
-For a paragraph with only one image, a table or code block, 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 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.
 
-1. Check that the element: one image only paragraph, table, code block, samp block ,and video.
+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
 3. If there is the caption paragraph, convert them to figure and figcaption element.
 
@@ -16,7 +16,7 @@ Use it as follows.
 const md = require('markdown-it')();
 const mdFigureWithPCaption = require('@peaceroad/markdown-it-figure-with-p-caption');
 
-md.use(mdPCaption, {'classPrefix': 'f'}).use(mdFigureWithPCaption);
+md.use(mdFigureWithPCaption);
 
 console.log(md.render('Figure. A Cat.\n\n![Figure](cat.jpg)');
 // <figure class="f-img">
@@ -116,6 +116,26 @@ A paragraph.
 <p>A paragraph.</p>
 
 
+[Markdown]
+A paragraph.
+
+Quote. A Caption.
+
+> A quoted paragraph.
+
+A paragraph.
+
+[HTML]
+<p>A paragraph.</p>
+<figure class="f-blockquote">
+<figcaption><span class="f-blockquote-label">Code<span class="f-blockquote-label-joint">.</span></span> A Caption.</figcaption>
+<blockquote>
+<p>A quoted paragraph.</p>
+</blockquote>
+</figure>
+<p>A paragraph.</p>
+
+
 [Markdown]
 A paragraph.
 

package/index.js

@@ -165,7 +165,7 @@ module.exports = function figure_with_caption_plugin(md, option) {
         hasNext: false,
       };
 
-      const checkTags = ['table', 'video', 'audio', 'pre'];
+      const checkTags = ['table', 'pre', 'blockquote'];
       let cti = 0;
       while (cti < checkTags.length) {
         if (token.type === checkTags[cti] + '_open') {
@@ -211,6 +211,31 @@ module.exports = function figure_with_caption_plugin(md, option) {
         cti++;
       }
 
+      if (token.type === 'html_block') {
+        const tags = ['video', 'audio', 'iframe'];
+        let ctj = 0;
+        while (ctj < tags.length) {
+          const hasTag = token.content.match(new RegExp('^<'+ tags[ctj] + ' ?[^>]*?>[\\s\\S]*?<\\/' + tags[ctj] + '>\\n'))
+          if (!hasTag) {
+            ctj++;
+            continue;
+          }
+          tagName = tags[ctj];
+          if (tags[ctj] === 'iframe') {
+            if(/^<[^>]*? title="YouTube video player"/i.test(token.content)) {
+              tagName = 'video';
+            }
+          }
+          checkToken = true;
+          caption = checkCaption(state, n, en, tagName, caption);
+          if (caption.hasPrev || caption.hasNext) {
+            range = wrapWithFigure(state, range, tagName, false);
+            break;
+          }
+        }
+        ctj++
+      }
+
       if (token.type === 'paragraph_open'
         && nextToken.type === 'inline'
         && nextToken.children[0].type === 'image'

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@peaceroad/markdown-it-figure-with-p-caption",
-  "version": "0.2.0",
-  "description": "A markdown-it plugin. For a paragraph with only one image, a table or code block, and by writing a caption paragraph immediately before or after, they are converted into the figure element with the figcaption element.",
+  "version": "0.3.1",
+  "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": {
     "test": "node test/test.js"
@@ -16,6 +16,6 @@
     "markdown-it": "^12.1.0"
   },
   "dependencies": {
-    "p7d-markdown-it-p-captions": "^0.4.6"
+    "p7d-markdown-it-p-captions": "^0.5.0"
   }
 }

package/test/examples.txt

@@ -326,3 +326,85 @@ A paragraph.
 </tr>
 </tbody>
 </table>
+
+
+[Markdown]
+A paragraph.
+
+Quote. A Caption.
+
+> A quoted paragraph.
+>
+> A quoted paragraph.
+
+A paragraph.
+
+[HTML]
+<p>A paragraph.</p>
+<figure class="f-blockquote">
+<figcaption><span class="f-blockquote-label">Quote<span class="f-blockquote-label-joint">.</span></span> A Caption.</figcaption>
+<blockquote>
+<p>A quoted paragraph.</p>
+<p>A quoted paragraph.</p>
+</blockquote>
+</figure>
+<p>A paragraph.</p>
+
+
+[Markdown]
+A paragraph.
+
+> A quoted paragraph.
+>
+> A quoted paragraph.
+
+Quote. A Caption.
+
+A paragraph.
+
+[HTML]
+<p>A paragraph.</p>
+<figure class="f-blockquote">
+<blockquote>
+<p>A quoted paragraph.</p>
+<p>A quoted paragraph.</p>
+</blockquote>
+<figcaption><span class="f-blockquote-label">Quote<span class="f-blockquote-label-joint">.</span></span> A Caption.</figcaption>
+</figure>
+<p>A paragraph.</p>
+
+[Markdown]
+A paragraph.
+
+Video. A mp4.
+
+<video controls width="400" height="300">
+<source src="example.mp4" type="video/mp4">
+</video>
+
+A paragraph.
+[HTML]
+<p>A paragraph.</p>
+<figure class="f-video">
+<figcaption><span class="f-video-label">Video<span class="f-video-label-joint">.</span></span> A mp4.</figcaption>
+<video controls width="400" height="300">
+<source src="example.mp4" type="video/mp4">
+</video>
+</figure>
+<p>A paragraph.</p>
+
+[Markdown]
+A paragraph.
+
+Video. A youtube.
+
+<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">
+<figcaption><span class="f-video-label">Video<span class="f-video-label-joint">.</span></span> A youtube.</figcaption>
+<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/test/test.js

@@ -1,6 +1,8 @@
 const assert = require('assert');
 const fs = require('fs');
-const md = require('markdown-it')();
+const md = require('markdown-it')({
+  html: true,
+});
 const mdFigureWithPCaption = require('../index.js');
 
 md.use(mdFigureWithPCaption);
@@ -31,15 +33,12 @@ while(n < ms0.length) {
 
 n = 1;
 while(n < ms.length) {
-  //if (n !== 1) { n++; continue };
+  //if (n !== 21) { n++; continue };
   console.log('Test: ' + n + ' >>>');
   //console.log(ms[n].markdown);
 
   const m = ms[n].markdown;
-  const renderEnv = {
-    'md': mdPath,
-  }
-  const h = md.render(m, renderEnv);
+  const h = md.render(m);
   try {
     assert.strictEqual(h, ms[n].html);
   } catch(e) {