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

package/imgAttrToPCaption.js

@@ -1,49 +1,36 @@
 import { markReg } from 'p7d-markdown-it-p-captions'
 
-const imgReg = /^( *!\[)(.*?)\]\( *?((.*?)(?: +?\"(.*?)\")?) *?\)( *?\{.*?\})? *$/
+const imgReg = /^( *!\[)(.*?)\]\( *?((.*?)(?: +?"(.*?)")?) *?\)( *?\{.*?\})? *$/
 
 const imgAttrToPCaption = (state, startLine, opt) => {
+  const imgMarkReg = markReg['img']
   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 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 {
-    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
-        }
-      }
+    const prefix = altCap || titleCap || ''
+    if (prefix && /[a-zA-Z]/.test(prefix)) {
+      modCaption = caption === '' ? prefix + '.' : prefix + '. ' + caption
     } else {
-      modCaption = 'Figure.'
-      if (caption !== '') modCaption += ' ' + caption
+      modCaption = caption === '' ? prefix + ' ' : prefix + '　' + caption
+    }
+    if (!prefix) {
+      modCaption = 'Figure.' + (caption !== '' ? ' ' + caption : '')
     }
   }
-  //console.log('modCaption: ' + modCaption)
   let token = state.push('paragraph_open', 'p', 1)
   token.map = [startLine, startLine + 1]
   token = state.push('inline', '', 0)
@@ -58,46 +45,37 @@ const imgAttrToPCaption = (state, startLine, opt) => {
 
 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
+  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(/^!\[.*?\]/, '![' + state.tokens[n-2].children[0].content + ']')
-    if (!state.tokens[n+1].children[0].children[0]) {
+    state.tokens[n+1].content = state.tokens[n+1].content.replace(/^!\[.*?\]/, '![' + prevTokenChild.content + ']')
+    if (!imageToken.children[0]) {
       const textToken  = new state.Token('text', '', 0)
-      state.tokens[n+1].children[0].children.push(textToken)
+      imageToken.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 = ''
+    imageToken.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])
+  imageToken.content = ''
   return true
 }
 
 const setTitleToLabel = (state, n) => {
   if (n < 2) return false
-  if (state.tokens[n+1].children[0].type !== 'image') 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
-  state.tokens[n+1].children[0].attrSet('alt', state.tokens[n+1].children[0].content)
-  if (!state.tokens[n+1].children[0].children[0]) {
+  imageToken.attrSet('alt', imageToken.content)
+  if (!imageToken.children[0]) {
     const textToken  = new state.Token('text', '', 0)
-    state.tokens[n+1].children[0].children.push(textToken)
+    imageToken.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)
+  for (let i = 0; i < imageToken.attrs.length; i++) {
+    if (imageToken.attrs[i][0] === 'title') {
+      imageToken.attrs.splice(i, 1)
       break
-    } else {
-      state.tokens[n+1].children[0].attrJoin('title', '')
     }
-    i++
   }
-  //console.log(state.tokens[n+1].children[0])
   return true
 }
 

package/index.js

@@ -1,29 +1,70 @@
 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 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
-
   if (captionStartToken.type !== 'paragraph_open' && captionEndToken.type !== 'paragraph_close') return
-
   setCaptionParagraph(n-3, state, caption, fNum, 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]
-    })
-  }
+  const captionName = getCaptionName(captionStartToken)
   if(!captionName) return
   caption.name = captionName
   caption.isPrev = true
   return
 }
 
+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
+}
+
+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)
+    }
+  }
+}
+
 const changePrevCaptionPosition = (state, n, caption, opt) => {
   const captionStartToken = state.tokens[n-3]
   const captionInlineToken = state.tokens[n-2]
@@ -32,8 +73,13 @@ const changePrevCaptionPosition = (state, n, caption, opt) => {
   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
+      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) {
@@ -42,15 +88,7 @@ const changePrevCaptionPosition = (state, n, caption, opt) => {
     }
   }
 
-  const attrReplaceReg = new RegExp(' *?f-' + caption.name)
-  captionStartToken.attrs.forEach(attr => {
-    if (attr[0] === 'class') {
-      attr[1] = attr[1].replace(attrReplaceReg, '').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'
@@ -60,40 +98,11 @@ const changePrevCaptionPosition = (state, n, caption, opt) => {
   return true
 }
 
-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)
-
-  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.name = captionName
-  caption.isNext = true
-  return
-}
-
 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'
@@ -143,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])
@@ -153,12 +161,10 @@ 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
@@ -173,14 +179,18 @@ const checkCaption = (state, n, en, caption, fNum, sp, opt) => {
 }
 
 const figureWithCaption = (state, opt) => {
+  const tokens = state.tokens
+  const checkTypes = ['table', 'pre', 'blockquote']
+  const htmlTags = ['video', 'audio', 'iframe', 'blockquote', 'div']
+
   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]
+  while (n < tokens.length) {
+    const token = tokens[n]
+    const nextToken = tokens[n+1]
     let en = n
     let range = {
       start: n,
@@ -194,7 +204,7 @@ const figureWithCaption = (state, opt) => {
       nameSuffix: '',
       isPrev: false,
       isNext: false,
-    };
+    }
     const sp = {
       attrs: [],
       isVideoIframe: false,
@@ -202,25 +212,23 @@ 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') {
+        while (en < tokens.length) {
+          if(tokens[en].type === checkTokenTagName + '_close') {
             break
           }
           en++
@@ -260,20 +268,19 @@ const figureWithCaption = (state, opt) => {
     }
 
     if (token.type === 'html_block') {
-      const tags = ['video', 'audio', 'iframe', 'blockquote', 'div']
       let ctj = 0
       let hasTag
-      while (ctj < tags.length) {
-        if (tags[ctj] === 'div') {
+      while (ctj < htmlTags.length) {
+        if (htmlTags[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'
+          hasTag = token.content.match(getHtmlReg('div'))
+          htmlTags[ctj] = 'iframe'
           sp.isVideoIframe = true
         } else {
-          hasTag = token.content.match(new RegExp('^<'+ tags[ctj] + ' ?[^>]*?>[\\s\\S]*?<\\/' + tags[ctj] + '>(\\n| *?)(<script [^>]*?>(?:<\\/script>)?)? *(\\n|$)'))
+          hasTag = token.content.match(getHtmlReg(htmlTags[ctj]))
         }
-        const blueskyContMatch = token.content.match(new RegExp('^<blockquote class="bluesky-embed"[^]*?>[\\s\\S]*$'))
-        if (!(hasTag || (blueskyContMatch && tags[ctj] === 'blockquote'))) {
+        const blueskyContMatch = token.content.match(blueskyEmbedReg)
+        if (!(hasTag || (blueskyContMatch && htmlTags[ctj] === 'blockquote'))) {
           ctj++
           continue
         }
@@ -282,43 +289,44 @@ const figureWithCaption = (state, opt) => {
             token.content += '\n'
           }
         } else if (blueskyContMatch) {
-          let addedCont = '';
+          let addedCont = ''
+          const tokensChildren = tokens
+          const tokensLength = tokensChildren.length
           let j = n + 1
           let hasEndBlockquote = true
-          while (j < state.tokens.length) {
-            const nextToken = state.tokens[j]
+          while (j < tokensLength) {
+            const nextToken = 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)
+              if (tokens[j + 1] && tokens[j + 1].type === 'paragraph_close') {
+                tokens.splice(j + 1, 1)
               }
-              state.tokens[j].content = ''
-              state.tokens[j].children.forEach((child, i) => {
+              nextToken.content = ''
+              nextToken.children.forEach((child) => {
                 child.content = ''
               })
               break
             }
             if (nextToken.type === 'paragraph_open') {
               addedCont += '\n'
-              state.tokens.splice(j, 1)
+              tokens.splice(j, 1)
               continue
             }
-            j++;
+            j++
           }
-          token.content += addedCont;
+          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') {
           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 {
@@ -354,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]) {
@@ -411,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 = ''
           }
@@ -428,8 +439,8 @@ const figureWithCaption = (state, 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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@peaceroad/markdown-it-figure-with-p-caption",
-  "version": "0.11.0",
+  "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",
@@ -17,12 +17,12 @@
     "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.16.0"
+    "p7d-markdown-it-p-captions": "^0.17.0"
   }
 }