@peaceroad/markdown-it-figure-with-p-caption 0.4.1 → 0.4.2

package/README.md

@@ -181,6 +181,7 @@ A paragraph.
 </figure>
 <p>A paragraph.</p>
 
+
 [Markdown]
 A paragraph.
 
@@ -196,8 +197,62 @@ 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>
 </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>
+
+
+[Markdown]
+A paragraph.
+
+Quote. Twitter Post.
+
+<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>
+
+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> Twitter Post.</figcaption>
+<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>
+<p>A paragraph.</p>
+
+
+[Markdown]
+A paragraph.
+
+Figure. Twitter Post.
+
+<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">XXXXX <a href="https://t.co/XXXXX">https://t.co/XXXXX</a></p>&mdash; UserName (@account) <a href="https://twitter.com/account/status/XXXXX">August 4, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
+
+A paragraph.
+[HTML]
+<p>A paragraph.</p>
+<figure class="f-img">
+<figcaption><span class="f-img-label">Figure<span class="f-img-label-joint">.</span></span> Twitter Post.</figcaption>
+<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>
+<p>A paragraph.</p>
+
 ~~~
 
+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.
+
 
 ## Option: Specify file name
 

package/index.js

@@ -10,6 +10,9 @@ module.exports = function figure_with_caption_plugin(md, option) {
     scaleSuffix: false,
     dquoteFilename: false,
     strongFilename: false,
+    bLabel: false,
+    strongLabel: false,
+    jointSpaceUseHalfWidth: false,
     oneImageWithoutCaption: false,
   };
   if (option !== undefined) {
@@ -110,11 +113,16 @@ module.exports = function figure_with_caption_plugin(md, option) {
     return true;
   }
 
-  function wrapWithFigure(state, range, tagName, replaceInsteadOfWrap) {
+  function wrapWithFigure(state, range, tagName, replaceInsteadOfWrap, sp) {
     let n = range.start;
     let en = range.end;
     const figureStartToken = new state.Token('figure_open', 'figure', 1);
     figureStartToken.attrSet('class', 'f-' + tagName);
+    if (sp) {
+      if (sp.isTwitterBlock && sp.hasImgCaption) {
+        figureStartToken.attrSet('class', 'f-img');
+      }
+    }
     if(/pre-(?:code|samp)/.test(tagName)) {
       figureStartToken.attrSet('role', 'doc-example');
     }
@@ -216,24 +224,52 @@ module.exports = function figure_with_caption_plugin(md, option) {
       }
 
       if (token.type === 'html_block') {
-        const tags = ['video', 'audio', 'iframe'];
+        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] + '>\\n'));
+          const hasTag = token.content.match(new RegExp('^<'+ tags[ctj] + ' ?[^>]*?>[\\s\\S]*?<\\/' + tags[ctj] + '> *?(?:<script [^>]*?>(?:</script>)?)?\\n'));
           if (!hasTag) {
             ctj++;
             continue;
           }
           tagName = tags[ctj];
-          if (tags[ctj] === 'iframe') {
+          if (tagName === 'iframe') {
             if(/^<[^>]*? title="YouTube video player"/i.test(token.content)) {
-              tagName = 'video';
+              tagName = 'video'; // figure.f-video used.
+            }
+            // Non Youtube iframe currently use figure.f-iframe.
+            // Class in caption uses actual caption identifier.
+          }
+          if (tagName === 'blockquote') {
+            if(/^<[^>]*? class="twitter-tweet"/.test(token.content)) {
+              sp.isTwitterBlock = true;
+              if (n > 2) {
+                if (state.tokens[n-2].children.length > 1) {
+                  if (state.tokens[n-2].children[1].attrs.length > 0) {
+                    if (state.tokens[n-2].children[1].attrs[0][0] === 'class' &&
+                      state.tokens[n-2].children[1].attrs[0][1] === 'f-img-label') {
+                      sp.hasImgCaption = true;
+                    }
+                  }
+                }
+              }
+              if (n + 2 < state.tokens.length) {
+                if (state.tokens[n+2].children.length > 1) {
+                  if (state.tokens[n+2].children[1].attrs.length > 0) {
+                    if (state.tokens[n+2].children[1].attrs[0][0] === 'class' &&
+                      state.tokens[n+2].children[1].attrs[0][1] === 'f-img-label') {
+                      sp.hasImgCaption = true;
+                    }
+                  }
+                }
+              }
             }
           }
           checkToken = true;
           caption = checkCaption(state, n, en, tagName, caption);
           if (caption.hasPrev || caption.hasNext) {
-            range = wrapWithFigure(state, range, tagName, false);
+            range = wrapWithFigure(state, range, tagName, false, sp);
             break;
           }
           ctj++
@@ -251,6 +287,9 @@ module.exports = function figure_with_caption_plugin(md, option) {
         tagName = 'img';
         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 (opt.oneImageWithoutCaption || caption.hasPrev || caption.hasNext) {
           range = wrapWithFigure(state, range, tagName, true);
         }
@@ -280,6 +319,9 @@ module.exports = function figure_with_caption_plugin(md, option) {
     dquoteFilename: opt.dquoteFilename,
     strongFilename: opt.strongFilename,
     hasNumClass: opt.hasNumClass,
+    bLabel: opt.bLabel,
+    strongLabel: opt.strongLabel,
+    jointSpaceUseHalfWidth: opt.jointSpaceUseHalfWidth,
   });
   md.core.ruler.before('linkify', 'figure_with_caption', figureWithCaption);
   md.renderer.rules['fence_samp'] = function (tokens, idx, options, env, slf) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@peaceroad/markdown-it-figure-with-p-caption",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "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": {
@@ -16,6 +16,6 @@
     "markdown-it": "^12.1.0"
   },
   "dependencies": {
-    "p7d-markdown-it-p-captions": "^0.7.0"
+    "p7d-markdown-it-p-captions": "^0.8.0"
   }
 }

package/test/examples.txt

@@ -409,6 +409,83 @@ A paragraph.
 <p>A paragraph.</p>
 
 
+[Markdown]
+A paragraph.
+
+Quote. Twitter Post.
+
+<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>
+
+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> Twitter Post.</figcaption>
+<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>
+<p>A paragraph.</p>
+
+[Markdown]
+A paragraph.
+
+Figure. Twitter Post.
+
+<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>
+
+A paragraph.
+[HTML]
+<p>A paragraph.</p>
+<figure class="f-img">
+<figcaption><span class="f-img-label">Figure<span class="f-img-label-joint">.</span></span> Twitter Post.</figcaption>
+<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>
+<p>A paragraph.</p>
+
+[Markdown]
+A paragraph.
+
+<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. Twitter Post.
+
+A paragraph.
+[HTML]
+<p>A paragraph.</p>
+<figure class="f-img">
+<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>
+<figcaption><span class="f-img-label">Figure<span class="f-img-label-joint">.</span></span> Twitter Post.</figcaption>
+</figure>
+<p>A paragraph.</p>
+
+[Markdown]
+A paragraph.
+
+<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>
+
+Quote. Twitter Post.
+
+A paragraph.
+[HTML]
+<p>A paragraph.</p>
+<figure class="f-blockquote">
+<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>
+<figcaption><span class="f-blockquote-label">Quote<span class="f-blockquote-label-joint">.</span></span> Twitter Post.</figcaption>
+</figure>
+<p>A paragraph.</p>
+
+
+[Markdown]
+A paragraph.
+
+<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>
+
+A paragraph.
+[HTML]
+<p>A paragraph.</p>
+<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>
+<p>A paragraph.</p>
+
+
 [Markdown]
 A paragraph.
 
@@ -509,6 +586,21 @@ A paragraph.
 <p>A paragraph.</p>
 
 
+[Markdown]
+A paragraph.
+
+- ![Figure](cat.jpg)
+
+A paragraph.
+
+[HTML]
+<p>A paragraph.</p>
+<ul>
+<li><img src="cat.jpg" alt="Figure"></li>
+</ul>
+<p>A paragraph.</p>
+
+
 [Markdown]
 A paragraph.
 

package/test/test.js

@@ -40,7 +40,7 @@ while(n < ms0.length) {
 
 n = 1;
 while(n < ms.length) {
-  //if (n !== 21) { n++; continue };
+  //if (n !== 24) { n++; continue };
   console.log('Test: ' + n + ' >>>');
   //console.log(ms[n].markdown);