@peaceroad/markdown-it-figure-with-p-caption 0.10.0 → 0.11.0

package/README.md

@@ -515,3 +515,45 @@ From version 0.8, role="doc-example" is not included as standard in figure.f-pre
 ```js
 const mdImgAltCaption = mdit({html: true}).use(mditFigureWithPCaption, {roleDocExample: true})
 ```
+
+### Option: allIframeTypeFigureClassName
+
+From version 0.16.0, unify the figure element that wraps the iframe or blockquote tag in the embed code to figure.f-embed (this may become the default in the future).
+
+```js
+const mdAllIframeTypeFigureClassName = mdit({html: true}).use(mdFigureWithPCaption, {
+  allIframeTypeFigureClassName: 'f-embed',
+  videoWithoutCaption = true,
+  iframeWithoutCaption = true,
+  iframeTypeBlockquoteWithoutCaption = true,
+}).use(mditAttrs).use(mditRndererFence);
+```
+
+```
+[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-embed">
+<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]
+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>
+[HTML]
+<figure class="f-embed">
+<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>
+
+
+[Markdown]
+<blockquote class="mastodon-embed" data-embed-url="https://mastodon.social/@xxxx/xxxx/embed" ...>xxxxxxxxxxxxxxxx</blockquote> <script data-allowed-prefixes="https://mastodon.social/" async src="https://mastodon.social/embed.js"></script>
+
+[HTML]
+<figure class="f-embed">
+<blockquote class="mastodon-embed" data-embed-url="https://mastodon.social/@xxxx/xxxx/embed" ...>xxxxxxxxxxxxxxxx</blockquote> <script data-allowed-prefixes="https://mastodon.social/" async src="https://mastodon.social/embed.js"></script>
+</figure>
+```

package/imgAttrToPCaption.js

@@ -0,0 +1,104 @@
+import { markReg } from 'p7d-markdown-it-p-captions'
+
+const imgReg = /^( *!\[)(.*?)\]\( *?((.*?)(?: +?\"(.*?)\")?) *?\)( *?\{.*?\})? *$/
+
+const imgAttrToPCaption = (state, startLine, opt) => {
+  let pos = state.bMarks[startLine] + state.tShift[startLine]
+  let max = state.eMarks[startLine]
+  //console.log('init inline: ' + state.src.slice(pos, max))
+  let inline = state.src.slice(pos, max)
+  const img = inline.match(imgReg)
+  if (!img) return
+
+  let alt = img[2] === undefined ? '' : img[2]
+  let title = img[5] === undefined ? '' : img[5]
+  //console.log('alt: ' + alt + ', title: ' + title)
+
+  let caption = ''
+  if (opt.imgAltCaption) caption = alt
+  if (opt.imgTitleCaption) caption = title
+
+  const hasMarkLabel = caption.match(markReg['img'])
+
+  let modCaption = ''
+  if (hasMarkLabel) {
+    modCaption = caption
+  } else {
+    if (typeof opt.imgAltCaption === 'string' || typeof opt.imgTitleCaption === 'string') {
+      if (/[a-zA-Z]/.test(opt.imgAltCaption)) {
+        if (caption ===  '') {
+          modCaption = (opt.imgAltCaption ? opt.imgAltCaption : opt.imgTitleCaption) + '.'
+        } else {
+          modCaption = (opt.imgAltCaption ? opt.imgAltCaption : opt.imgTitleCaption) + '. ' + caption
+        }
+      } else {
+        if (caption ===  '') {
+          modCaption = (opt.imgAltCaption ? opt.imgAltCaption : opt.imgTitleCaption) + ' '
+        } else {
+          modCaption = (opt.imgAltCaption ? opt.imgAltCaption : opt.imgTitleCaption) + '　' + caption
+        }
+      }
+    } else {
+      modCaption = 'Figure.'
+      if (caption !== '') modCaption += ' ' + caption
+    }
+  }
+  //console.log('modCaption: ' + modCaption)
+  let token = state.push('paragraph_open', 'p', 1)
+  token.map = [startLine, startLine + 1]
+  token = state.push('inline', '', 0)
+  token.content = modCaption
+  token.children = [new state.Token('text', modCaption, 0)]
+  if (!opt.setFigureNumber) {
+    if(caption === '') token.attrs = [['class', 'nocaption']]
+  }
+  token = state.push('paragraph_close', 'p', -1)
+  return true
+}
+
+const setAltToLabel = (state, n) => {
+  if (n < 2) return false
+  if (state.tokens[n+1].children[0].type !== 'image' || !state.tokens[n-2].children) return false
+  if (state.tokens[n-2].children) {
+    state.tokens[n+1].content = state.tokens[n+1].content.replace(/^!\[.*?\]/, '![' + state.tokens[n-2].children[0].content + ']')
+    if (!state.tokens[n+1].children[0].children[0]) {
+      const textToken  = new state.Token('text', '', 0)
+      state.tokens[n+1].children[0].children.push(textToken)
+    }
+    // Set figure label:
+    //state.tokens[n+1].children[0].children[0].content = state.tokens[n-2].children[2].content
+    // Set img alt to empty value:
+    state.tokens[n+1].children[0].children[0].content = ''
+  }
+  // Set figure label:
+  //state.tokens[n+1].children[0].content = state.tokens[n-2].children[2].content
+  // Set img alt to empty value:
+  state.tokens[n+1].children[0].content = ''
+  //console.log(state.tokens[n+1].children[0])
+  return true
+}
+
+const setTitleToLabel = (state, n) => {
+  if (n < 2) return false
+  if (state.tokens[n+1].children[0].type !== 'image') return false
+  if (!state.tokens[n-2].children[0]) return false
+  state.tokens[n+1].children[0].attrSet('alt', state.tokens[n+1].children[0].content)
+  if (!state.tokens[n+1].children[0].children[0]) {
+    const textToken  = new state.Token('text', '', 0)
+    state.tokens[n+1].children[0].children.push(textToken)
+  }
+  let i = 0
+  while (0 < state.tokens[n+1].children[0].attrs.length) {
+    if (state.tokens[n+1].children[0].attrs[i][0] === 'title') {
+      state.tokens[n+1].children[0].attrs.splice(i, i + 1)
+      break
+    } else {
+      state.tokens[n+1].children[0].attrJoin('title', '')
+    }
+    i++
+  }
+  //console.log(state.tokens[n+1].children[0])
+  return true
+}
+
+export { imgAttrToPCaption, setAltToLabel, setTitleToLabel }

package/index.js

@@ -1,14 +1,15 @@
-import {setCaptionParagraph} from 'p7d-markdown-it-p-captions'
+import { setCaptionParagraph } from 'p7d-markdown-it-p-captions'
+import { imgAttrToPCaption, setAltToLabel, setTitleToLabel } from './imgAttrToPCaption.js'
 
-const checkPrevCaption = (state, n, caption, sp, opt) => {
+const checkPrevCaption = (state, n, caption, fNum, sp, opt) => {
   if(n < 3) return caption
   const captionStartToken = state.tokens[n-3]
   const captionEndToken = state.tokens[n-1]
-  if (captionStartToken === undefined || captionEndToken === undefined) return caption
+  if (captionStartToken === undefined || captionEndToken === undefined) return
 
-  if (captionStartToken.type !== 'paragraph_open' && captionEndToken.type !== 'paragraph_close') return caption
+  if (captionStartToken.type !== 'paragraph_open' && captionEndToken.type !== 'paragraph_close') return
 
-  caption = setCaptionParagraph(n-3, state, caption, sp, opt)
+  setCaptionParagraph(n-3, state, caption, fNum, sp, opt)
 
   let captionName = ''
   if (captionStartToken.attrs) {
@@ -17,30 +18,34 @@ const checkPrevCaption = (state, n, caption, sp, opt) => {
       if (attr[0] === 'class' && hasCaptionName) captionName = hasCaptionName[1]
     })
   }
-  if(!captionName) return caption
+  if(!captionName) return
   caption.name = captionName
   caption.isPrev = true
-  return caption
+  return
 }
 
-const changePrevCaptionPosition = (state, n, caption) => {
+const changePrevCaptionPosition = (state, n, caption, opt) => {
   const captionStartToken = state.tokens[n-3]
   const captionInlineToken = state.tokens[n-2]
   const captionEndToken = state.tokens[n-1]
-  let isNoCaption = false
-  if (captionInlineToken.attrs) {
-    for (let attr of captionInlineToken.attrs) {
-      if (attr[0] === 'class' && attr[1] === 'nocaption') isNoCaption = true
+
+  if (opt.imgAltCaption || opt.imgTitleCaption) {
+    let isNoCaption = false
+    if (captionInlineToken.attrs) {
+      for (let attr of captionInlineToken.attrs) {
+        if (attr[0] === 'class' && attr[1] === 'nocaption') isNoCaption = true
+      }
+    }
+    if (isNoCaption) {
+      state.tokens.splice(n-3, 3)
+      return false
     }
-  }
-  if (isNoCaption) {
-    state.tokens.splice(n-3, 3)
-    return
   }
 
+  const attrReplaceReg = new RegExp(' *?f-' + caption.name)
   captionStartToken.attrs.forEach(attr => {
     if (attr[0] === 'class') {
-      attr[1] = attr[1].replace(new RegExp(' *?f-' + caption.name), '').trim()
+      attr[1] = attr[1].replace(attrReplaceReg, '').trim()
       if(attr[1] === '') {
         captionStartToken.attrs.splice(captionStartToken.attrIndex('class'), 1)
       }
@@ -55,14 +60,14 @@ const changePrevCaptionPosition = (state, n, caption) => {
   return true
 }
 
-const checkNextCaption = (state, en, caption, sp, opt) => {
-  if (en + 2 > state.tokens.length) return caption
+const checkNextCaption = (state, en, caption, fNum, sp, opt) => {
+  if (en + 2 > state.tokens.length) return
   const captionStartToken = state.tokens[en+1]
   const captionEndToken = state.tokens[en+3]
-  if (captionStartToken === undefined || captionEndToken === undefined) return caption
-  if (captionStartToken.type !== 'paragraph_open' && captionEndToken.type !== 'paragraph_close') return caption
+  if (captionStartToken === undefined || captionEndToken === undefined) return
+  if (captionStartToken.type !== 'paragraph_open' && captionEndToken.type !== 'paragraph_close') return
 
-  caption = setCaptionParagraph(en+1, state, caption, sp, opt)
+  setCaptionParagraph(en+1, state, caption, fNum, sp, opt)
 
   let captionName = ''
   if (captionStartToken.attrs) {
@@ -71,10 +76,10 @@ const checkNextCaption = (state, en, caption, sp, opt) => {
       if (attr[0] === 'class' && hasCaptionName) captionName = hasCaptionName[1]
     })
   }
-  if(!captionName) return caption
+  if(!captionName) return
   caption.name = captionName
   caption.isNext = true
-  return caption
+  return
 }
 
 const changeNextCaptionPosition = (state, en, caption) => {
@@ -103,23 +108,29 @@ const wrapWithFigure = (state, range, checkTokenTagName, caption, replaceInstead
   let en = range.end
   const figureStartToken = new state.Token('figure_open', 'figure', 1)
   figureStartToken.attrSet('class', 'f-' + checkTokenTagName)
-  if (sp.isVideoIframe) {
-    figureStartToken.attrSet('class', 'f-video')
-  }
-  if (sp.isIframeTypeBlockquote) {
-    let figureClassThatWrapsIframeTypeBlockquote = 'i-frame'
-    if (caption.isPrev || caption.isNext) {
-      if (caption.name === 'blockquote' || caption.name === 'img') {
-        figureClassThatWrapsIframeTypeBlockquote = 'f-img'
+
+  if (opt.allIframeTypeFigureClassName === '') {
+    if (sp.isVideoIframe) {
+      figureStartToken.attrSet('class', 'f-video')
+    }
+    if (sp.isIframeTypeBlockquote) {
+      let figureClassThatWrapsIframeTypeBlockquote = 'i-frame'
+      if (caption.isPrev || caption.isNext) {
+        if (caption.name === 'blockquote' || caption.name === 'img') {
+          figureClassThatWrapsIframeTypeBlockquote = 'f-img'
+        }
+        figureStartToken.attrSet('class', figureClassThatWrapsIframeTypeBlockquote)
+      } else {
+        figureClassThatWrapsIframeTypeBlockquote = opt.figureClassThatWrapsIframeTypeBlockquote
+        figureStartToken.attrSet('class', figureClassThatWrapsIframeTypeBlockquote)
       }
-      figureStartToken.attrSet('class', figureClassThatWrapsIframeTypeBlockquote)
-    } else {
-      figureClassThatWrapsIframeTypeBlockquote = opt.figureClassThatWrapsIframeTypeBlockquote
-      figureStartToken.attrSet('class', figureClassThatWrapsIframeTypeBlockquote)
+    }
+  } else {
+    if (checkTokenTagName === 'iframe' || sp.isIframeTypeBlockquote) {
+      figureStartToken.attrSet('class', opt.allIframeTypeFigureClassName)
     }
   }
 
-
   if(/pre-(?:code|samp)/.test(checkTokenTagName) && opt.roleDocExample) {
     figureStartToken.attrSet('role', 'doc-example')
   }
@@ -151,18 +162,22 @@ const wrapWithFigure = (state, range, checkTokenTagName, caption, replaceInstead
   }
   range.start = n
   range.end = en
-  return range
+  return
 }
 
-const checkCaption = (state, n, en, caption, sp, opt) => {
-  caption = checkPrevCaption(state, n, caption, sp, opt)
-  if (caption.isPrev) return caption
-  caption = checkNextCaption(state, en, caption, sp, opt)
-  return caption
+const checkCaption = (state, n, en, caption, fNum, sp, opt) => {
+  checkPrevCaption(state, n, caption, fNum, sp, opt)
+  if (caption.isPrev) return
+  checkNextCaption(state, en, caption, fNum, sp, opt)
+  return
 }
 
 const figureWithCaption = (state, opt) => {
   let n = 0
+  let fNum = {
+    img: 0,
+    table: 0,
+  }
   while (n < state.tokens.length) {
     const token = state.tokens[n]
     const nextToken = state.tokens[n+1]
@@ -172,7 +187,6 @@ const figureWithCaption = (state, opt) => {
       end: en,
     }
     let checkToken = false
-    let hasCloseTag = false
     let checkTokenTagName = ''
     let caption = {
       mark: '',
@@ -207,15 +221,14 @@ const figureWithCaption = (state, opt) => {
         }
         while (en < state.tokens.length) {
           if(state.tokens[en].type === checkTokenTagName + '_close') {
-            hasCloseTag = true
             break
           }
           en++
         }
         range.end = en
-        caption = checkCaption(state, n, en, caption, sp, opt)
+        checkCaption(state, n, en, caption, fNum, sp, opt)
         if (caption.isPrev || caption.isNext) {
-          range = wrapWithFigure(state, range, checkTokenTagName, caption, false, sp, opt)
+          wrapWithFigure(state, range, checkTokenTagName, caption, false, sp, opt)
         }
         break
       }
@@ -235,9 +248,9 @@ const figureWithCaption = (state, opt) => {
             checkTokenTagName = 'pre-code'
             caption.name = 'pre-code'
           }
-          caption = checkCaption(state, n, en, caption, sp, opt)
+          checkCaption(state, n, en, caption, fNum, sp, opt)
           if (caption.isPrev || caption.isNext) {
-            range = wrapWithFigure(state, range, checkTokenTagName, caption, false, sp, opt)
+            wrapWithFigure(state, range, checkTokenTagName, caption, false, sp, opt)
             break
           }
         }
@@ -247,23 +260,66 @@ const figureWithCaption = (state, opt) => {
     }
 
     if (token.type === 'html_block') {
-      const tags = ['video', 'audio', 'iframe', 'blockquote']
+      const tags = ['video', 'audio', 'iframe', 'blockquote', 'div']
       let ctj = 0
+      let hasTag
       while (ctj < tags.length) {
-        const hasTag = token.content.match(new RegExp('^<'+ tags[ctj] + ' ?[^>]*?>[\\s\\S]*?<\\/' + tags[ctj] + '>(\\n| *?)(<script [^>]*?>(?:<\\/script>)?)? *(\\n|$)'))
-        if (!hasTag) {
+        if (tags[ctj] === 'div') {
+          // for vimeo
+          hasTag = token.content.match(new RegExp('^<'+ tags[ctj] + ' ?[^>]*?><iframe[^>]*?>[\\s\\S]*?<\\/iframe><\\/' + tags[ctj] + '>(\\n| *?)(<script [^>]*?>(?:<\\/script>)?)? *(\\n|$)'))
+          tags[ctj] = 'iframe'
+          sp.isVideoIframe = true
+        } else {
+          hasTag = token.content.match(new RegExp('^<'+ tags[ctj] + ' ?[^>]*?>[\\s\\S]*?<\\/' + tags[ctj] + '>(\\n| *?)(<script [^>]*?>(?:<\\/script>)?)? *(\\n|$)'))
+        }
+        const blueskyContMatch = token.content.match(new RegExp('^<blockquote class="bluesky-embed"[^]*?>[\\s\\S]*$'))
+        if (!(hasTag || (blueskyContMatch && tags[ctj] === 'blockquote'))) {
           ctj++
           continue
         }
-        if ((hasTag[2] && hasTag[3] !== '\n') || (hasTag[1] !== '\n' && hasTag[2] === undefined)) {
-          token.content += '\n'
+        if (hasTag) {
+          if ((hasTag[2] && hasTag[3] !== '\n') || (hasTag[1] !== '\n' && hasTag[2] === undefined)) {
+            token.content += '\n'
+          }
+        } else if (blueskyContMatch) {
+          let addedCont = '';
+          let j = n + 1
+          let hasEndBlockquote = true
+          while (j < state.tokens.length) {
+            const nextToken = state.tokens[j]
+            if (nextToken.type === 'inline' && /<\/blockquote> *<script[^>]*?><\/script>$/.test(nextToken.content)) {
+              addedCont += nextToken.content + '\n'
+              if (state.tokens[j + 1] && state.tokens[j + 1].type === 'paragraph_close') {
+                state.tokens.splice(j + 1, 1)
+              }
+              state.tokens[j].content = ''
+              state.tokens[j].children.forEach((child, i) => {
+                child.content = ''
+              })
+              break
+            }
+            if (nextToken.type === 'paragraph_open') {
+              addedCont += '\n'
+              state.tokens.splice(j, 1)
+              continue
+            }
+            j++;
+          }
+          token.content += addedCont;
+          if (!hasEndBlockquote) {
+            ctj++
+            continue
+          }
         }
+
         checkTokenTagName = tags[ctj]
         caption.name = tags[ctj]
         checkToken = true
         if (checkTokenTagName === 'blockquote') {
-          //text-post-media: threads
-          if(/^<[^>]*? class="(?:twitter-tweet|instagram-media|text-post-media|bluesky-embed)"/.test(token.content)) {
+          const classNameReg = /^<[^>]*? class="(twitter-tweet|instagram-media|text-post-media|bluesky-embed|mastodon-embed)"/
+          const isIframeTypeBlockquote = token.content.match(classNameReg)
+          //console.log(isIframeTypeBlockquote)
+          if(isIframeTypeBlockquote) {
             sp.isIframeTypeBlockquote = true
           } else {
             ctj++
@@ -279,14 +335,14 @@ const figureWithCaption = (state, opt) => {
         }
       }
 
-      caption = checkCaption(state, n, en, caption, sp, opt)
+      checkCaption(state, n, en, caption, fNum, sp, opt)
       if (caption.isPrev || caption.isNext) {
-        range = wrapWithFigure(state, range, checkTokenTagName, caption, false, sp, opt)
+        wrapWithFigure(state, range, checkTokenTagName, caption, false, sp, opt)
         n = en + 2
       } else if ((opt.iframeWithoutCaption && (checkTokenTagName === 'iframe')) ||
         (opt.videoWithoutCaption && (checkTokenTagName === 'video')) ||
         (opt.iframeTypeBlockquoteWithoutCaption && (checkTokenTagName === 'blockquote'))) {
-        range = wrapWithFigure(state, range, checkTokenTagName, caption, false, sp, opt)
+        wrapWithFigure(state, range, checkTokenTagName, caption, false, sp, opt)
         n = en + 2
       }
     }
@@ -369,15 +425,15 @@ const figureWithCaption = (state, opt) => {
       nextToken.children[0].type = 'image'
 
       if (opt.imgAltCaption) setAltToLabel(state, n)
-      if (opt.imgTitleCaption) setTitleToLabel(state, n, en, checkTokenTagName, caption, opt)
-      caption = checkCaption(state, n, en, caption, sp, opt)
+      if (opt.imgTitleCaption) setTitleToLabel(state, n)
+      checkCaption(state, n, en, caption, fNum, sp, opt)
 
       if (opt.oneImageWithoutCaption && state.tokens[n-1]) {
         if (state.tokens[n-1].type === 'list_item_open') checkToken = false
       }
       if (checkToken && (opt.oneImageWithoutCaption || caption.isPrev || caption.isNext)) {
         if (caption.nameSuffix) checkTokenTagName += caption.nameSuffix
-        range = wrapWithFigure(state, range, checkTokenTagName, caption, true, sp, opt)
+        wrapWithFigure(state, range, checkTokenTagName, caption, true, sp, opt)
       }
     }
 
@@ -386,7 +442,7 @@ const figureWithCaption = (state, opt) => {
     n = range.start
     en = range.end
     if (caption.isPrev) {
-      changePrevCaptionPosition(state, n, caption)
+      changePrevCaptionPosition(state, n, caption, opt)
       n = en + 1
       continue
     }
@@ -400,112 +456,7 @@ const figureWithCaption = (state, opt) => {
   return
 }
 
-const setAltToLabel = (state, n) => {
-  if (n < 2) return false
-  if (state.tokens[n+1].children[0].type !== 'image' || !state.tokens[n-2].children) return false
-  if (state.tokens[n-2].children) {
-    state.tokens[n+1].content = state.tokens[n+1].content.replace(/^!\[.*?\]/, '![' + state.tokens[n-2].children[0].content + ']')
-    if (!state.tokens[n+1].children[0].children[0]) {
-      const textToken  = new state.Token('text', '', 0)
-      state.tokens[n+1].children[0].children.push(textToken)
-    }
-    // Set figure label:
-    //state.tokens[n+1].children[0].children[0].content = state.tokens[n-2].children[2].content
-    // Set img alt to empty value:
-    state.tokens[n+1].children[0].children[0].content = ''
-  }
-  // Set figure label:
-  //state.tokens[n+1].children[0].content = state.tokens[n-2].children[2].content
-  // Set img alt to empty value:
-  state.tokens[n+1].children[0].content = ''
-  //console.log(state.tokens[n+1].children[0])
-  return true
-}
-
-const setTitleToLabel = (state, n, en, checkTokenTagName, caption, opt) => {
-  if (n < 2) return false
-  if (state.tokens[n+1].children[0].type !== 'image') return false
-  if (!state.tokens[n-2].children[0]) return false
-  state.tokens[n+1].children[0].attrSet('alt', state.tokens[n+1].children[0].content)
-  if (!state.tokens[n+1].children[0].children[0]) {
-    const textToken  = new state.Token('text', '', 0)
-    state.tokens[n+1].children[0].children.push(textToken)
-  }
-  let i = 0
-  while (0 < state.tokens[n+1].children[0].attrs.length) {
-    if (state.tokens[n+1].children[0].attrs[i][0] === 'title') {
-      state.tokens[n+1].children[0].attrs.splice(i, i + 1)
-      break
-    } else {
-      state.tokens[n+1].children[0].attrJoin('title', '')
-    }
-    i++
-  }
-  //console.log(state.tokens[n+1].children[0])
-  return true
-}
-
-const imgAttrToPCaption = (state, startLine, opt) => {
-  let pos = state.bMarks[startLine] + state.tShift[startLine]
-  let max = state.eMarks[startLine]
-  let inline = state.src.slice(pos, max)
-  let label = ''
-  if (opt.imgAltCaption && typeof opt.imgAltCaption === 'string') label = opt.imgAltCaption
-  if (opt.imgTitleCaption && typeof opt.imgTitleCaption === 'string') label = opt.imgTitleCaption
-  let caption = ''
-  let imgAttrUsedCaption = ''
-
-  const img = inline.match(/^( *!\[)(.*?)\]\( *?((.*?)(?: +?\"(.*?)\")?) *?\)( *?\{.*?\})? *$/)
-  if (!img) return
-
-  let hasLabel
-  if (opt.imgAltCaption) {
-    caption = img[2]
-    hasLabel = img[2].match(new RegExp('^' + opt.imgAltCaption))
-    imgAttrUsedCaption = 'alt'
-  }
-  if (opt.imgTitleCaption) {
-    if (!img[5]) img[5] = ''
-    caption = img[5]
-    hasLabel = img[5].match(new RegExp('^' + opt.imgTitleCaption))
-    imgAttrUsedCaption = 'title'
-  }
-  let token
-  token = state.push('paragraph_open', 'p', 1)
-  token.map = [startLine, startLine + 1]
-  token = state.push('inline', '', 0)
-  if (hasLabel) {
-    token.content = caption
-  } else {
-    if (!label) {
-      if (imgAttrUsedCaption === 'alt') {
-        label = opt.imgAltCaption
-      } else if (imgAttrUsedCaption === 'title') {
-        label = opt.imgTitleCaption
-      } else if (imgAttrUsedCaption) {
-        label = 'Figure'
-      }
-    }
-    token.content = label
-    if (/[a-zA-Z]/.test(label)) {
-      token.content += '.'
-      if (caption) token.content += ' '
-    } else {
-      token.content += '　'
-    }
-    token.content += caption
-  }
-  token.map = [startLine, startLine + 1]
-  token.children = []
-  if (caption.length === 0) {
-    token.attrs = [['class', 'nocaption']]
-  }
-  token = state.push('paragraph_close', 'p', -1)
-  return
-}
-
 const mditFigureWithPCaption = (md, option) => {
-
   let opt = {
     classPrefix: 'f',
     figureClassThatWrapsIframeTypeBlockquote: 'f-img',
@@ -523,19 +474,25 @@ const mditFigureWithPCaption = (md, option) => {
     iframeTypeBlockquoteWithoutCaption: false,
     removeUnnumberedLabel: false,
     removeUnnumberedLabelExceptMarks: [],
+    removeMarkNameInCaptionClass: false,
     multipleImages: true,
     imgAltCaption: false,
+    setFigureNumber: false,
     imgTitleCaption: false,
     roleDocExample: false,
+    allIframeTypeFigureClassName: '',
   }
-  if (option !== undefined) {
-    for (let o in option) {
-        opt[o] = option[o]
-    }
-  }
+  if (option) Object.assign(opt, option)
 
   if (opt.imgAltCaption || opt.imgTitleCaption) {
-    opt.oneImageWithoutCaption = false
+    opt.oneImageWithoutCaption = true
+    opt.multipleImages = false
+    if (opt.setFigureNumber) {
+      for (let mark of opt.removeUnnumberedLabelExceptMarks) {
+        if (mark === 'img') opt.removeUnnumberedLabelExceptMarks.splice(opt.removeUnnumberedLabelExceptMarks.indexOf(mark), 1)
+        if (mark === 'table') opt.removeUnnumberedLabelExceptMarks.splice(opt.removeUnnumberedLabelExceptMarks.indexOf(mark), 1)
+      }
+    }
     md.block.ruler.before('paragraph', 'img_attr_caption', (state) => {
       imgAttrToPCaption(state, state.line, opt)
     })

package/package.json

@@ -1,13 +1,16 @@
 {
   "name": "@peaceroad/markdown-it-figure-with-p-caption",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "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",
   "type": "module",
   "scripts": {
     "test": "node test/test.js"
   },
-  "repository": "https://github.com/peaceroad/p7d-markdown-it-figure-with-p-caption.git",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/peaceroad/p7d-markdown-it-figure-with-p-caption.git"
+  },
   "author": "peaceroad <peaceroad@gmail.com>",
   "license": "MIT",
   "bugs": {
@@ -20,6 +23,6 @@
     "markdown-it-attrs": "^4.2.0"
   },
   "dependencies": {
-    "p7d-markdown-it-p-captions": "^0.15.1"
+    "p7d-markdown-it-p-captions": "^0.16.0"
   }
 }

package/test/examples-all-iframe-type-figure-class-name.txt

@@ -0,0 +1,192 @@
+[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-embed">
+<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-embed">
+<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.
+
+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-embed">
+<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>
+
+[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-embed">
+<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-embed">
+<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-embed">
+<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. 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. 28.</p>
+<figure class="f-embed">
+<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]
+<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]
+Video. A caption.
+
+<video controls width="400" height="300">
+<source src="example.mp4" type="video/mp4">
+</video>
+[HTML]
+<figure class="f-video">
+<figcaption><span class="f-video-label">Video<span class="f-video-label-joint">.</span></span> A caption.</figcaption>
+<video controls width="400" height="300">
+<source src="example.mp4" type="video/mp4">
+</video>
+</figure>
+
+
+[Markdown]
+A YouTube 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 YouTube paragraph.</p>
+<figure class="f-embed">
+<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]
+Video. A YouTube caption.
+
+<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]
+<figure class="f-embed">
+<figcaption><span class="f-video-label">Video<span class="f-video-label-joint">.</span></span> A YouTube caption.</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]
+<blockquote class="bluesky-embed" data-bluesky-uri="at://xxxxxxxxxxxxx" data-bluesky-cid="xxxx"><p lang="en">xxxx
+
+xxxx</p>&mdash; xxxx (<a href="https://bsky.app/profile/xxx">@xxx</a>) <a href="https://bsky.app/profile/xxx?ref_src=embed">1970年01月01日 00:00</a></blockquote><script async src="https://embed.bsky.app/static/embed.js" charset="utf-8"></script>
+
+[HTML]
+<figure class="f-embed">
+<blockquote class="bluesky-embed" data-bluesky-uri="at://xxxxxxxxxxxxx" data-bluesky-cid="xxxx"><p lang="en">xxxx
+
+xxxx</p>&mdash; xxxx (<a href="https://bsky.app/profile/xxx">@xxx</a>) <a href="https://bsky.app/profile/xxx?ref_src=embed">1970年01月01日 00:00</a></blockquote><script async src="https://embed.bsky.app/static/embed.js" charset="utf-8"></script>
+</figure>
+
+
+[Markdown]
+<blockquote class="mastodon-embed" data-embed-url="https://mastodon.social/@xxxx/xxxx/embed" style="background: #FCF8FF; border-radius: 8px; border: 1px solid #C9C4DA; margin: 0; max-width: 540px; min-width: 270px; overflow: hidden; padding: 0;"> <a href="https://mastodon.social/xxxx" target="_blank" style="align-items: center; color: #1C1A25; display: flex; flex-direction: column; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Roboto, sans-serif; font-size: 14px; justify-content: center; letter-spacing: 0.25px; line-height: 20px; padding: 24px; text-decoration: none;"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 79 75"><path d="xxx" fill="currentColor"/></svg> <div style="color: #787588; margin-top: 16px;">Post by @xxx</div> <div style="font-weight: 500;">View on Mastodon</div> </a> </blockquote> <script data-allowed-prefixes="https://mastodon.social/" async src="https://mastodon.social/embed.js"></script>
+
+[HTML]
+<figure class="f-embed">
+<blockquote class="mastodon-embed" data-embed-url="https://mastodon.social/@xxxx/xxxx/embed" style="background: #FCF8FF; border-radius: 8px; border: 1px solid #C9C4DA; margin: 0; max-width: 540px; min-width: 270px; overflow: hidden; padding: 0;"> <a href="https://mastodon.social/xxxx" target="_blank" style="align-items: center; color: #1C1A25; display: flex; flex-direction: column; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Roboto, sans-serif; font-size: 14px; justify-content: center; letter-spacing: 0.25px; line-height: 20px; padding: 24px; text-decoration: none;"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 79 75"><path d="xxx" fill="currentColor"/></svg> <div style="color: #787588; margin-top: 16px;">Post by @xxx</div> <div style="font-weight: 500;">View on Mastodon</div> </a> </blockquote> <script data-allowed-prefixes="https://mastodon.social/" async src="https://mastodon.social/embed.js"></script>
+</figure>
+
+
+[Markdown]
+<div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/xxxxxxx" frameborder="0" allow="autoplay; fullscreen; picture-in-picture; clipboard-write" style="position:absolute;top:0;left:0;width:100%;height:100%;" title="xxxx"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>
+[HTML]
+<figure class="f-embed">
+<div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/xxxxxxx" frameborder="0" allow="autoplay; fullscreen; picture-in-picture; clipboard-write" style="position:absolute;top:0;left:0;width:100%;height:100%;" title="xxxx"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>
+</figure>

package/test/examples-img-alt-caption-number.en.txt

@@ -0,0 +1,51 @@
+[Markdown]
+![A caption.](cat.jpg)
+
+[HTML]
+<figure class="f-img">
+<figcaption><span class="f-img-label">Figure 1<span class="f-img-label-joint">.</span></span> A caption.</figcaption>
+<img src="cat.jpg" alt="">
+</figure>
+
+
+[Markdown]
+![Figure. A caption.](cat.jpg)
+
+[HTML]
+<figure class="f-img">
+<figcaption><span class="f-img-label">Figure 1<span class="f-img-label-joint">.</span></span> A caption.</figcaption>
+<img src="cat.jpg" alt="">
+</figure>
+
+
+[Markdown]
+![](cat.jpg)
+
+[HTML]
+<figure class="f-img">
+<figcaption><span class="f-img-label">Figure 1<span class="f-img-label-joint">.</span></span></figcaption>
+<img src="cat.jpg" alt="">
+</figure>
+
+
+[Markdown]
+Figure. A caption.
+
+![](cat.jpg)
+
+[HTML]
+<p>Figure. A caption.</p>
+<figure class="f-img">
+<figcaption><span class="f-img-label">Figure 1<span class="f-img-label-joint">.</span></span></figcaption>
+<img src="cat.jpg" alt="">
+</figure>
+
+
+[Markdown]
+![Figure 12. A caption.](cat.jpg)
+
+[HTML]
+<figure class="f-img">
+<figcaption><span class="f-img-label">Figure 12<span class="f-img-label-joint">.</span></span> A caption.</figcaption>
+<img src="cat.jpg" alt="">
+</figure>

package/test/examples-img-alt-caption.en.txt

@@ -48,4 +48,13 @@ Figure. A caption.
 <img src="cat.jpg" alt="">
 </figure>
 
+[Markdown]
+![Figure.1 A caption.](cat.jpg)
+
+[HTML]
+<figure class="f-img">
+<figcaption><span class="f-img-label">Figure.1</span> A caption.</figcaption>
+<img src="cat.jpg" alt="">
+</figure>
+
 

package/test/examples-img-title-caption-number.en.txt

@@ -0,0 +1,60 @@
+[Markdown]
+![](cat.jpg "A caption.")
+
+[HTML]
+<figure class="f-img">
+<figcaption><span class="f-img-label">Figure 1<span class="f-img-label-joint">.</span></span> A caption.</figcaption>
+<img src="cat.jpg" alt="">
+</figure>
+
+
+[Markdown]
+![](cat.jpg "Figure. A caption.")
+
+[HTML]
+<figure class="f-img">
+<figcaption><span class="f-img-label">Figure 1<span class="f-img-label-joint">.</span></span> A caption.</figcaption>
+<img src="cat.jpg" alt="">
+</figure>
+
+
+[Markdown]
+![A alt text.](cat.jpg)
+
+[HTML]
+<figure class="f-img">
+<img src="cat.jpg" alt="A alt text.">
+</figure>
+
+[Markdown]
+![A alt text.](cat.jpg "Figure.")
+
+[HTML]
+<figure class="f-img">
+<figcaption><span class="f-img-label">Figure 1<span class="f-img-label-joint">.</span></span></figcaption>
+<img src="cat.jpg" alt="A alt text.">
+</figure>
+
+
+[Markdown]
+Figure. A caption.
+
+![](cat.jpg)
+
+[HTML]
+<p>Figure. A caption.</p>
+<figure class="f-img">
+<img src="cat.jpg" alt="">
+</figure>
+
+
+[Markdown]
+![](cat.jpg "Figure 12. A caption.")
+
+[HTML]
+<figure class="f-img">
+<figcaption><span class="f-img-label">Figure 12<span class="f-img-label-joint">.</span></span> A caption.</figcaption>
+<img src="cat.jpg" alt="">
+</figure>
+
+

package/test/examples-no-option.txt

@@ -713,3 +713,58 @@ code
 <pre><code>code
 </code></pre>
 <p><img src="cat.jpg" alt="A caption."></p>
+
+
+[Markdown]
+リスト キャプション
+
+```
+code
+```
+[HTML]
+<figure class="f-pre-code">
+<figcaption><span class="f-pre-code-label">リスト</span> キャプション</figcaption>
+<pre><code>code
+</code></pre>
+</figure>
+
+
+[Markdown]
+リスト キャプション
+
+```samp
+>
+```
+[HTML]
+<figure class="f-pre-samp">
+<figcaption><span class="f-pre-samp-label">リスト</span> キャプション</figcaption>
+<pre><samp>&gt;
+</samp></pre>
+</figure>
+
+[Markdown]
+リスト キャプション
+
+```
+>
+```
+[HTML]
+<figure class="f-pre-code">
+<figcaption><span class="f-pre-code-label">リスト</span> キャプション</figcaption>
+<pre><code>&gt;
+</code></pre>
+</figure>
+
+
+[Markdown]
+図 キャプション
+
+```samp
+>
+```
+[HTML]
+<figure class="f-pre-samp">
+<figcaption><span class="f-pre-samp-label">図</span> キャプション</figcaption>
+<pre><samp>&gt;
+</samp></pre>
+</figure>

package/test/examples-set-figure-number.en.txt

@@ -0,0 +1,21 @@
+[Markdown]
+Figure. A caption.
+
+![](example.jpg)
+
+Figure. A caption.
+
+![](example.jpg)
+
+[HTML]
+<figure class="f-img">
+<figcaption><span class="f-img-label">Figure 1<span class="f-img-label-joint">.</span></span> A caption.</figcaption>
+<img src="example.jpg" alt="">
+</figure>
+<figure class="f-img">
+<figcaption><span class="f-img-label">Figure 2<span class="f-img-label-joint">.</span></span> A caption.</figcaption>
+<img src="example.jpg" alt="">
+</figure>
+
+
+

package/test/test.js

@@ -16,6 +16,7 @@ let opt = {
   videoWithoutCaption: false,
   hasNumClass: false,
   iframeTypeBlockquoteWithoutCaption: false,
+  setFigureNumber: false,
 }
 
 const md = mdit({ html: true }).use(mdFigureWithPCaption, opt).use(mditAttrs).use(mditRndererFence);
@@ -40,6 +41,7 @@ const mdMultipleImages = mdit({ html: true }).use(mdFigureWithPCaption, opt).use
 opt.videoWithoutCaption = true
 const mdVideoWithoutCaption = mdit({ html: true }).use(mdFigureWithPCaption, opt).use(mditAttrs).use(mditRndererFence);
 
+
 const mdConsole = mdit({
   html: true,
   langPrefix: 'language-',
@@ -73,6 +75,10 @@ const testData = {
   imgAltCaption: __dirname + path.sep + 'examples-img-alt-caption.txt',
   imgTitleCaption: __dirname + path.sep + 'examples-img-title-caption.txt',
   console: __dirname + path.sep + 'examples-console.txt',
+  setFigureNumber: __dirname + path.sep + 'examples-set-figure-number.txt',
+  imgAltCaptionNumber: __dirname + path.sep + 'examples-img-alt-caption-number.txt',
+  imgTitleCaptionNumber: __dirname + path.sep + 'examples-img-title-caption-number.txt',
+  allIframeTypeFigureClassName: __dirname + path.sep + 'examples-all-iframe-type-figure-class-name.txt',
 }
 
 const getTestData = (pat) => {
@@ -125,7 +131,7 @@ const runTest = (process, pat, pass, testId) => {
   while(n <= end) {
 
     if (!ms[n]
-      //|| n != 24
+      //|| n != 11
     ) {
       n++
       continue
@@ -177,4 +183,26 @@ opt.imgTitleCaption = '図'
 const mdImgTitleCaptionJa = mdit({html: true}).use(mdFigureWithPCaption, opt).use(mditAttrs).use(mditRndererFence);
 pass = runTest(mdImgTitleCaptionJa, testData.imgTitleCaption.replace(/.txt$/, '.ja.txt'), pass)
 
+opt = {}
+opt.setFigureNumber = true
+const mdSetFigureNumber = mdit({html: true}).use(mdFigureWithPCaption, opt).use(mditAttrs).use(mditRndererFence);
+pass = runTest(mdSetFigureNumber, testData.setFigureNumber.replace(/\.txt$/, '.en.txt'), pass)
+
+opt.imgAltCaption = true
+const mdImgAltCaptionNumber = mdit({html: true}).use(mdFigureWithPCaption, opt).use(mditAttrs).use(mditRndererFence);
+pass = runTest(mdImgAltCaptionNumber, testData.imgAltCaptionNumber.replace(/\.txt$/, '.en.txt'), pass)
+
+opt = {}
+opt.imgTitleCaption = true
+const mdImgTitleCaptionNumber = mdit({html: true}).use(mdFigureWithPCaption, opt).use(mditAttrs).use(mditRndererFence);
+//pass = runTest(mdImgTitleCaptionNumber, testData.imgTitleCaptionNumber.replace(/\.txt$/, '.en.txt'), pass)
+
+opt = {}
+opt.videoWithoutCaption = true
+opt.iframeWithoutCaption = true
+opt.iframeTypeBlockquoteWithoutCaption = true
+opt.allIframeTypeFigureClassName = 'f-embed'
+const mdAllIframeTypeFigureClassName = mdit({html: true}).use(mdFigureWithPCaption, opt).use(mditAttrs).use(mditRndererFence);
+pass = runTest(mdAllIframeTypeFigureClassName, testData.allIframeTypeFigureClassName, pass)
+
 if (pass) console.log('Passed all test.')