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

package/README.md

@@ -121,7 +121,7 @@ A paragraph.
 [Markdown]
 A paragraph.
 
-Quote. A Caption.
+Source. A Caption.
 
 > A quoted paragraph.
 
@@ -130,7 +130,7 @@ 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>
+<figcaption><span class="f-blockquote-label">Source<span class="f-blockquote-label-joint">.</span></span> A Caption.</figcaption>
 <blockquote>
 <p>A quoted paragraph.</p>
 </blockquote>
@@ -216,23 +216,6 @@ 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.
 
@@ -345,13 +328,20 @@ A paragraph.
 
 #### Convert one iframe without caption
 
-Convert one iframe without a caption paragraph to figure element.
+Convert one iframe without a caption paragraph to iframe element. (adn twitter blockquote embed eelment.)
 
 ```js
 md.use(mdFigureWithPCaption, {iframeWithoutCaption: true});
 ```
 
 ~~~
+[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>
+
 [Markdown]
 A paragraph.
 
@@ -364,4 +354,38 @@ 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]
+<iframe src="https://player.vimeo.com/video/xxxxxxxxxxxxxxx" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
+[HTML]
+<figure class="f-video">
+<iframe src="https://player.vimeo.com/video/xxxxxxxxxxxxxxx" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
+</figure>
+
+[Markdown]
+A paragraph. iframeWithoutCaption: true.
+
+<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. iframeWithoutCaption: true.</p>
+<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>
+<p>A paragraph.</p>
+
+[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>
+
+[Markdown]
+<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">
+<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>
 ~~~

package/index.js

@@ -127,8 +127,12 @@ 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 && sp.hasImgCaption) {
-        figureStartToken.attrSet('class', 'f-img');
+      if (sp.isTwitterBlock) {
+        if (sp.hasImgCaption) {
+          figureStartToken.attrSet('class', 'f-img');
+        } else {
+        figureStartToken.attrSet('class', 'f-iframe');
+        }
       }
     }
     if(/pre-(?:code|samp)/.test(tagName)) {
@@ -247,11 +251,9 @@ module.exports = function figure_with_caption_plugin(md, option) {
           }
           tagName = tags[ctj];
           if (tagName === 'iframe') {
-            if(/^<[^>]*? title="YouTube video player"/i.test(token.content)) {
+            if(/^<[^>]*? src="https:\/\/(?:www.youtube-nocookie.com|player.vimeo.com)\//i.test(token.content)) {
               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)) {
@@ -259,9 +261,16 @@ module.exports = function figure_with_caption_plugin(md, option) {
               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 (state.tokens[n-2].children[1].attrs[0][0] === 'class') {
+                      if (state.tokens[n-2].children[1].attrs[0][1] === 'f-img-label') {
+                        sp.hasImgCaption = true;
+                      /* under consideration. I think I should use figure instead of blockquoe for caption.
+                      } else {
+                        if (state.tokens[n-2].children[1].attrs[0][1] === 'f-blockquote-label') {
+                          state.tokens[n-2].children[1].attrs[0][1] = 'f-iframe-label'
+                          state.tokens[n-2].children[3].attrs[0][1] = 'f-iframe-label-joint'
+                        } */
+                      }
                     }
                   }
                 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@peaceroad/markdown-it-figure-with-p-caption",
-  "version": "0.4.5",
+  "version": "0.4.6",
   "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": {
@@ -17,6 +17,6 @@
     "markdown-it-attrs": "^4.1.4"
   },
   "dependencies": {
-    "p7d-markdown-it-p-captions": "^0.9.0"
+    "p7d-markdown-it-p-captions": "^0.9.1"
   }
 }

package/test/examples.txt

@@ -456,15 +456,15 @@ A paragraph.
 [Markdown]
 A paragraph.
 
-Quote. Twitter Post.
+Source. 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>
+<figure class="f-iframe">
+<figcaption><span class="f-blockquote-label">Source<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>
@@ -511,7 +511,7 @@ Quote. Twitter Post.
 A paragraph.
 [HTML]
 <p>A paragraph.</p>
-<figure class="f-blockquote">
+<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>
 <figcaption><span class="f-blockquote-label">Quote<span class="f-blockquote-label-joint">.</span></span> Twitter Post.</figcaption>
 </figure>
@@ -519,13 +519,13 @@ A paragraph.
 
 
 [Markdown]
-A paragraph.
+A paragraph. 28.
 
 <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>
+<p>A paragraph. 28.</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>
 
@@ -712,3 +712,39 @@ A paragraph.
 <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>
+
+[Markdown]
+<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">
+<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>
+[HTML]
+<figure class="f-video">
+<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></figure>
+
+[Markdown]
+<iframe src="https://player.vimeo.com/video/xxxxxxxxxxxxxxx" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
+[HTML]
+<figure class="f-video">
+<iframe src="https://player.vimeo.com/video/xxxxxxxxxxxxxxx" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
+</figure>
+
+[Markdown]
+A paragraph. iframeWithoutCaption: true.
+
+<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. iframeWithoutCaption: true.</p>
+<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>
+<p>A paragraph.</p>
+