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

package/README.md

@@ -2,11 +2,12 @@
 
 This is a markdown-it plugin.
 
-For a paragraph with one image/images only, a table or code block or a blockquote or a iframe, and by writing a caption paragraph immediately before or after, they are converted into the figure element with the figcaption element.
+For paragraphs containing only images, tables, code blocks, blockquotes, or iframes, this plugin converts them into figure elements with figcaption elements when a caption paragraph is written immediately before or after.
 
-1. Check that the element: one image only paragraph, table, code(samp) block, blockquote, and video, iframe.
-2. Check if this element has a caption paragraph immediately before or after it
-3. If there is the caption paragraph, convert them to figure and figcaption element.
+The conversion process:
+1. Detect supported elements: image paragraphs, tables, code/samp blocks, blockquotes, videos, and iframes
+2. Check for caption paragraphs immediately before or after the element
+3. Convert both elements into a figure with figcaption structure
 
 The figcaption behavior of this plugin depends on [p7d-markdown-it-p-captions](https://www.npmjs.com/package/p7d-markdown-it-p-captions).
 
@@ -36,6 +37,11 @@ Also, It is recommended to set the width and height attributes of the images at
 
 It could be applied to table, codeblock(pre > code, pre > samp), video as well.
 
+These elements are also supported within the following structure. [0.13.0+]
+
+- Blockquote
+- loose list (with blank lines between items), not tight list (no blank lines)
+- Description list block (`<dl>` markup, markdown-it-deflist)
 
 ## Example
 

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
 }