feat: Add image captions support

src/transform/plugins/images/collect.ts

@@ -43,7 +43,7 @@ const collect = (input: string, options: Options) => {
             if (singlePage && !path.includes('_includes/')) {
                 const newSrc = relative(root, resolveRelativePath(path, src));
 
-                result = result.replace(src, newSrc);
+                result = result.replace(new RegExp(src, 'g'), newSrc);
             }
 
             copyFile(targetPath, targetDestPath);

src/transform/plugins/images/index.ts

@@ -87,6 +87,62 @@ function convertSvg(
     }
 }
 
+function imageCaption(state: StateCore) {
+    const tokens = state.tokens;
+
+    for (let i = 0; i < tokens.length; i++) {
+        if (tokens[i].type !== 'inline') {
+            continue;
+        }
+
+        const childrenTokens = tokens[i].children || [];
+        const newTokens: Token[] = [];
+
+        for (let j = 0; j < childrenTokens.length; j++) {
+            const token = childrenTokens[j];
+
+            if (token.type === 'image') {
+                const attrs = token.attrs || [];
+                const hasCaptionAttr = attrs.some(([key]) => key === 'caption');
+
+                if (hasCaptionAttr) {
+                    const captionAttr = attrs.find(([key]) => key === 'caption');
+                    const explicitCaption = captionAttr ? captionAttr[1] : '';
+                    const title = attrs.find(([key]) => key === 'title');
+                    const captionText = explicitCaption || (title ? title[1] : '');
+
+                    const figureOpen = new state.Token('figure_open', 'figure', 1);
+                    const figureClose = new state.Token('figure_close', 'figure', -1);
+
+                    if (captionText) {
+                        const captionOpen = new state.Token('figcaption_open', 'figcaption', 1);
+                        const captionContent = new state.Token('text', '', 0);
+                        captionContent.content = captionText;
+                        const captionClose = new state.Token('figcaption_close', 'figcaption', -1);
+
+                        newTokens.push(
+                            figureOpen,
+                            token,
+                            captionOpen,
+                            captionContent,
+                            captionClose,
+                            figureClose,
+                        );
+                    } else {
+                        newTokens.push(figureOpen, token, figureClose);
+                    }
+                } else {
+                    newTokens.push(token);
+                }
+            } else {
+                newTokens.push(token);
+            }
+        }
+
+        tokens[i].children = newTokens;
+    }
+}
+
 type Opts = SVGOpts & ImageOpts;
 
 const index: MarkdownItPluginCb<Opts> = (md, opts) => {
@@ -110,7 +166,8 @@ const index: MarkdownItPluginCb<Opts> = (md, opts) => {
                     const didPatch = childrenTokens[j].attrGet('yfm_patched') || false;
 
                     if (didPatch) {
-                        return;
+                        j++;
+                        continue;
                     }
 
                     const imgSrc = childrenTokens[j].attrGet('src') || '';
@@ -124,7 +181,6 @@ const index: MarkdownItPluginCb<Opts> = (md, opts) => {
 
                     childrenTokens[j].attrSet('yfm_patched', '1');
                 }
-
                 j++;
             }
 
@@ -138,6 +194,7 @@ const index: MarkdownItPluginCb<Opts> = (md, opts) => {
         md.core.ruler.push('images', plugin);
     }
 
+    md.core.ruler.push('image_caption', imageCaption);
     md.renderer.rules.image_svg = (tokens, index) => {
         const token = tokens[index];