@peaceroad/markdown-it-figure-with-p-caption 0.10.1 → 0.12.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,82 @@
+import { markReg } from 'p7d-markdown-it-p-captions'
+
+const imgReg = /^( *!\[)(.*?)\]\( *?((.*?)(?: +?"(.*?)")?) *?\)( *?\{.*?\})? *$/
+
+const imgAttrToPCaption = (state, startLine, opt) => {
+  const imgMarkReg = markReg['img']
+  let pos = state.bMarks[startLine] + state.tShift[startLine]
+  let max = state.eMarks[startLine]
+  let inline = state.src.slice(pos, max)
+  const img = inline.match(imgReg)
+  if (!img) return
+
+  let alt = img[2] ?? ''
+  let title = img[5] ?? ''
+  const caption = opt.imgTitleCaption ? title : (opt.imgAltCaption ? alt : '')
+  const altCap = typeof opt.imgAltCaption === 'string' ? opt.imgAltCaption : ''
+  const titleCap = typeof opt.imgTitleCaption === 'string' ? opt.imgTitleCaption : ''
+
+  const hasMarkLabel = caption.match(imgMarkReg)
+  let modCaption = ''
+  if (hasMarkLabel) {
+    modCaption = caption
+  } else {
+    const prefix = altCap || titleCap || ''
+    if (prefix && /[a-zA-Z]/.test(prefix)) {
+      modCaption = caption === '' ? prefix + '.' : prefix + '. ' + caption
+    } else {
+      modCaption = caption === '' ? prefix + ' ' : prefix + '　' + caption
+    }
+    if (!prefix) {
+      modCaption = 'Figure.' + (caption !== '' ? ' ' + caption : '')
+    }
+  }
+  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
+  const imageToken = state.tokens[n+1].children[0]
+  if (imageToken.type !== 'image' || !state.tokens[n-2].children) return false
+  const prevTokenChild = state.tokens[n-2].children[0]
+  if (state.tokens[n-2].children) {
+    state.tokens[n+1].content = state.tokens[n+1].content.replace(/^!\[.*?\]/, '![' + prevTokenChild.content + ']')
+    if (!imageToken.children[0]) {
+      const textToken  = new state.Token('text', '', 0)
+      imageToken.children.push(textToken)
+    }
+    imageToken.children[0].content = ''
+  }
+  imageToken.content = ''
+  return true
+}
+
+const setTitleToLabel = (state, n) => {
+  if (n < 2) return false
+  const imageToken = state.tokens[n+1].children[0]
+  if (imageToken.type !== 'image') return false
+  if (!state.tokens[n-2].children[0]) return false
+  imageToken.attrSet('alt', imageToken.content)
+  if (!imageToken.children[0]) {
+    const textToken  = new state.Token('text', '', 0)
+    imageToken.children.push(textToken)
+  }
+  for (let i = 0; i < imageToken.attrs.length; i++) {
+    if (imageToken.attrs[i][0] === 'title') {
+      imageToken.attrs.splice(i, 1)
+      break
+    }
+  }
+  return true
+}
+
+export { imgAttrToPCaption, setAltToLabel, setTitleToLabel }

package/index.js

@@ -1,51 +1,94 @@
-import {setCaptionParagraph} from 'p7d-markdown-it-p-captions'
+import { setCaptionParagraph } from 'p7d-markdown-it-p-captions'
+import { imgAttrToPCaption, setAltToLabel, setTitleToLabel } from './imgAttrToPCaption.js'
+
+const htmlRegCache = {}
+const classReg = /^f-(.+)$/
+const blueskyEmbedReg = /^<blockquote class="bluesky-embed"[^]*?>[\s\S]*?$/
+
+const getHtmlReg = (tag) => {
+  if (htmlRegCache[tag]) return htmlRegCache[tag]
+  let regexStr = '^<' + tag + ' ?[^>]*?>[\\s\\S]*?<\\/' + tag + '>(\\n| *?)(<script [^>]*?>(?:<\\/script>)?)? *(\\n|$)'
+  const reg = new RegExp(regexStr)
+  htmlRegCache[tag] = reg
+  return reg
+}
 
-const checkPrevCaption = (state, n, caption, sp, opt) => {
+const getCaptionName = (token) => {
+  if (!token.attrs) return ''
+  const attrs = token.attrs
+  for (let i = 0, len = attrs.length; i < len; i++) {
+    const attr = attrs[i]
+    if (attr[0] === 'class') {
+      const match = attr[1].match(classReg)
+      if (match) return match[1]
+    }
+  }
+  return ''
+}
+
+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.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
+  setCaptionParagraph(n-3, state, caption, fNum, sp, opt)
+  const captionName = getCaptionName(captionStartToken)
+  if(!captionName) return
+  caption.name = captionName
+  caption.isPrev = true
+  return
+}
 
-  caption = setCaptionParagraph(n-3, state, caption, sp, opt)
+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
+  if (captionStartToken.type !== 'paragraph_open' && captionEndToken.type !== 'paragraph_close') return
+  setCaptionParagraph(en+1, state, caption, fNum, sp, opt)
+  const captionName = getCaptionName(captionStartToken)
+  if(!captionName) return
+  caption.name = captionName
+  caption.isNext = true
+  return
+}
 
-  let captionName = ''
-  if (captionStartToken.attrs) {
-    captionStartToken.attrs.forEach(attr => {
-      let hasCaptionName = attr[1].match(/^f-(.+)$/)
-      if (attr[0] === 'class' && hasCaptionName) captionName = hasCaptionName[1]
-    })
+const cleanCaptionTokenAttrs = (token, captionName) => {
+  const reg = new RegExp(' *?f-' + captionName)
+  if (!token.attrs) return
+  for (let i = token.attrs.length - 1; i >= 0; i--) {
+    if (token.attrs[i][0] === 'class') {
+      token.attrs[i][1] = token.attrs[i][1].replace(reg, '').trim()
+      if (token.attrs[i][1] === '') token.attrs.splice(i, 1)
+    }
   }
-  if(!captionName) return caption
-  caption.name = captionName
-  caption.isPrev = true
-  return caption
 }
 
-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 (isNoCaption) {
-    state.tokens.splice(n-3, 3)
-    return
-  }
 
-  captionStartToken.attrs.forEach(attr => {
-    if (attr[0] === 'class') {
-      attr[1] = attr[1].replace(new RegExp(' *?f-' + caption.name), '').trim()
-      if(attr[1] === '') {
-        captionStartToken.attrs.splice(captionStartToken.attrIndex('class'), 1)
+  if (opt.imgAltCaption || opt.imgTitleCaption) {
+    let isNoCaption = false
+    if (captionInlineToken.attrs) {
+      const attrs = captionInlineToken.attrs, len = attrs.length
+      for (let i = 0; i < len; i++) {
+        const attr = attrs[i]
+        if (attr[0] === 'class' && attr[1] === 'nocaption') {
+          isNoCaption = true
+          break
+        }
       }
     }
-  })
+    if (isNoCaption) {
+      state.tokens.splice(n-3, 3)
+      return false
+    }
+  }
+
+  cleanCaptionTokenAttrs(captionStartToken, caption.name)
   captionStartToken.type = 'figcaption_open'
   captionStartToken.tag = 'figcaption'
   captionEndToken.type = 'figcaption_close'
@@ -55,40 +98,11 @@ const changePrevCaptionPosition = (state, n, caption) => {
   return true
 }
 
-const checkNextCaption = (state, en, caption, sp, opt) => {
-  if (en + 2 > state.tokens.length) return caption
-  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
-
-  caption = setCaptionParagraph(en+1, state, caption, sp, opt)
-
-  let captionName = ''
-  if (captionStartToken.attrs) {
-    captionStartToken.attrs.forEach(attr => {
-      let hasCaptionName = attr[1].match(/^f-(.+)$/)
-      if (attr[0] === 'class' && hasCaptionName) captionName = hasCaptionName[1]
-    })
-  }
-  if(!captionName) return caption
-  caption.name = captionName
-  caption.isNext = true
-  return caption
-}
-
 const changeNextCaptionPosition = (state, en, caption) => {
   const captionStartToken = state.tokens[en+2] // +1: text node for figure.
   const captionInlineToken = state.tokens[en+3]
   const captionEndToken = state.tokens[en+4]
-  captionStartToken.attrs.forEach(attr => {
-    if (attr[0] === 'class') {
-      attr[1] = attr[1].replace(new RegExp(' *?f-' + caption.name), '').trim()
-      if(attr[1] === '') {
-        captionStartToken.attrs.splice(captionStartToken.attrIndex('class'), 1)
-      }
-    }
-  })
+  cleanCaptionTokenAttrs(captionStartToken, caption.name)
   captionStartToken.type = 'figcaption_open'
   captionStartToken.tag = 'figcaption'
   captionEndToken.type = 'figcaption_close'
@@ -103,23 +117,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')
   }
@@ -132,7 +152,6 @@ const wrapWithFigure = (state, range, checkTokenTagName, caption, replaceInstead
     }
   }
   // For vsce
-  //console.log(caption)
   if(state.tokens[n].attrs && caption.name === 'img') {
     for (let attr of state.tokens[n].attrs) {
       figureStartToken.attrJoin(attr[0], attr[1])
@@ -142,37 +161,42 @@ const wrapWithFigure = (state, range, checkTokenTagName, caption, replaceInstead
     state.tokens.splice(en, 1, breakToken, figureEndToken, breakToken)
     state.tokens.splice(n, 1, figureStartToken, breakToken)
     en = en + 2
-    //console.log(state.tokens[n].type, state.tokens[en].type)
   } else {
     state.tokens.splice(en+1, 0, figureEndToken, breakToken)
     state.tokens.splice(n, 0, figureStartToken, breakToken)
     en = en + 3
-    //console.log(state.tokens[n].type, state.tokens[en].type)
   }
   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) => {
+  const tokens = state.tokens
+  const checkTypes = ['table', 'pre', 'blockquote']
+  const htmlTags = ['video', 'audio', 'iframe', 'blockquote', 'div']
+
   let n = 0
-  while (n < state.tokens.length) {
-    const token = state.tokens[n]
-    const nextToken = state.tokens[n+1]
+  let fNum = {
+    img: 0,
+    table: 0,
+  }
+  while (n < tokens.length) {
+    const token = tokens[n]
+    const nextToken = tokens[n+1]
     let en = n
     let range = {
       start: n,
       end: en,
     }
     let checkToken = false
-    let hasCloseTag = false
     let checkTokenTagName = ''
     let caption = {
       mark: '',
@@ -180,7 +204,7 @@ const figureWithCaption = (state, opt) => {
       nameSuffix: '',
       isPrev: false,
       isNext: false,
-    };
+    }
     const sp = {
       attrs: [],
       isVideoIframe: false,
@@ -188,34 +212,31 @@ const figureWithCaption = (state, opt) => {
       hasImgCaption: false,
     }
 
-    const checkTypes = ['table', 'pre', 'blockquote']
     let cti = 0
-    //console.log(state.tokens[n].type, state.tokens[n].tag)
     while (cti < checkTypes.length) {
       if (token.type === checkTypes[cti] + '_open') {
         // for n-1 token is line-break
-        if (n > 1 && state.tokens[n-2].type === 'figure_open') {
+        if (n > 1 && tokens[n-2].type === 'figure_open') {
           cti++; continue
         }
         checkToken = true
         checkTokenTagName = token.tag
         caption.name = checkTypes[cti]
         if (checkTypes[cti] === 'pre') {
-          if (state.tokens[n+1].tag === 'code') caption.mark = 'pre-code'
-          if (state.tokens[n+1].tag === 'samp') caption.mark = 'pre-samp'
+          if (tokens[n+1].tag === 'code') caption.mark = 'pre-code'
+          if (tokens[n+1].tag === 'samp') caption.mark = 'pre-samp'
           caption.name = caption.mark
         }
-        while (en < state.tokens.length) {
-          if(state.tokens[en].type === checkTokenTagName + '_close') {
-            hasCloseTag = true
+        while (en < tokens.length) {
+          if(tokens[en].type === checkTokenTagName + '_close') {
             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 +256,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 +268,66 @@ const figureWithCaption = (state, opt) => {
     }
 
     if (token.type === 'html_block') {
-      const tags = ['video', 'audio', 'iframe', 'blockquote']
       let ctj = 0
-      while (ctj < tags.length) {
-        const hasTag = token.content.match(new RegExp('^<'+ tags[ctj] + ' ?[^>]*?>[\\s\\S]*?<\\/' + tags[ctj] + '>(\\n| *?)(<script [^>]*?>(?:<\\/script>)?)? *(\\n|$)'))
-        if (!hasTag) {
+      let hasTag
+      while (ctj < htmlTags.length) {
+        if (htmlTags[ctj] === 'div') {
+          // for vimeo
+          hasTag = token.content.match(getHtmlReg('div'))
+          htmlTags[ctj] = 'iframe'
+          sp.isVideoIframe = true
+        } else {
+          hasTag = token.content.match(getHtmlReg(htmlTags[ctj]))
+        }
+        const blueskyContMatch = token.content.match(blueskyEmbedReg)
+        if (!(hasTag || (blueskyContMatch && htmlTags[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 = ''
+          const tokensChildren = tokens
+          const tokensLength = tokensChildren.length
+          let j = n + 1
+          let hasEndBlockquote = true
+          while (j < tokensLength) {
+            const nextToken = tokens[j]
+            if (nextToken.type === 'inline' && /<\/blockquote> *<script[^>]*?><\/script>$/.test(nextToken.content)) {
+              addedCont += nextToken.content + '\n'
+              if (tokens[j + 1] && tokens[j + 1].type === 'paragraph_close') {
+                tokens.splice(j + 1, 1)
+              }
+              nextToken.content = ''
+              nextToken.children.forEach((child) => {
+                child.content = ''
+              })
+              break
+            }
+            if (nextToken.type === 'paragraph_open') {
+              addedCont += '\n'
+              tokens.splice(j, 1)
+              continue
+            }
+            j++
+          }
+          token.content += addedCont
+          if (!hasEndBlockquote) {
+            ctj++
+            continue
+          }
         }
-        checkTokenTagName = tags[ctj]
-        caption.name = tags[ctj]
+
+        checkTokenTagName = htmlTags[ctj]
+        caption.name = htmlTags[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)
+          if(isIframeTypeBlockquote) {
             sp.isIframeTypeBlockquote = true
           } else {
             ctj++
@@ -279,14 +343,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
       }
     }
@@ -298,19 +362,22 @@ const figureWithCaption = (state, opt) => {
       let isMultipleImagesVertical = true
       checkToken = true
       caption.name = 'img'
-      while (ntChildTokenIndex < nextToken.children.length) {
-        const ntChildToken = nextToken.children[ntChildTokenIndex]
-        if (ntChildTokenIndex === nextToken.children.length - 1) {
+      const children = nextToken.children
+      const childrenLength = children.length
+      while (ntChildTokenIndex < childrenLength) {
+        const ntChildToken = children[ntChildTokenIndex]
+        if (ntChildTokenIndex === childrenLength - 1) {
            let imageAttrs = ntChildToken.content.match(/^ *\{(.*?)\} *$/)
           if(ntChildToken.type === 'text' && imageAttrs) {
             imageAttrs = imageAttrs[1].split(/ +/)
             let iai = 0
-            while (iai < imageAttrs.length) {
+            const attrsLength = imageAttrs.length
+            while (iai < attrsLength) {
               if (/^\./.test(imageAttrs[iai])) {
                 imageAttrs[iai] = imageAttrs[iai].replace(/^\./, "class=")
               }
               if (/^#/.test(imageAttrs[iai])) {
-                imageAttrs[iai] = imageAttrs[iai].replace(/^\#/, "id=")
+                imageAttrs[iai] = imageAttrs[iai].replace(/^#/, "id=")
               }
               let imageAttr = imageAttrs[iai].match(/^(.*?)="?(.*)"?$/)
               if (!imageAttr || !imageAttr[1]) {
@@ -355,8 +422,8 @@ const figureWithCaption = (state, opt) => {
           caption.nameSuffix = '-multiple'
         }
         ntChildTokenIndex = 0
-        while (ntChildTokenIndex < nextToken.children.length) {
-          const ccToken = nextToken.children[ntChildTokenIndex]
+        while (ntChildTokenIndex < childrenLength) {
+          const ccToken = children[ntChildTokenIndex]
           if (ccToken.type === 'text' && /^ *$/.test(ccToken.content)) {
             ccToken.content = ''
           }
@@ -369,15 +436,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 (opt.oneImageWithoutCaption && tokens[n-1]) {
+        if (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 +453,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 +467,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 +485,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,25 +1,28 @@
 {
   "name": "@peaceroad/markdown-it-figure-with-p-caption",
-  "version": "0.10.1",
+  "version": "0.12.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": {
     "url": "https://github.com/peaceroad/p7d-markdown-it-figure-with-p-caption/issues"
   },
   "devDependencies": {
-    "@peaceroad/markdown-it-renderer-fence": "^0.1.1",
-    "highlight.js": "^11.10.0",
+    "@peaceroad/markdown-it-renderer-fence": "^0.1.2",
+    "highlight.js": "^11.11.1",
     "markdown-it": "^14.1.0",
-    "markdown-it-attrs": "^4.2.0"
+    "markdown-it-attrs": "^4.3.1"
   },
   "dependencies": {
-    "p7d-markdown-it-p-captions": "^0.15.2"
+    "p7d-markdown-it-p-captions": "^0.17.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

@@ -741,3 +741,30 @@ code
 <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 != 43
+      //|| 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.')