feat: Add image capttions support

diplodoc-platform · Dec 16, 2024 · 1174cd9 · 1174cd9
1 parent 4629398
commit 1174cd9
Show file tree

Hide file tree

Showing 2 changed files with 96 additions and 4 deletions.
diff --git a/src/transform/plugins/images/collect.ts b/src/transform/plugins/images/collect.ts
@@ -27,7 +27,7 @@ const collect = (input: string, options: Options) => {
         const children = token.children || [];
 
         children.forEach((childToken) => {
-            if (childToken.type !== 'image') {
+            if (childToken.type !== 'image' && childToken.type !== 'image_with_caption') {
                 return;
             }
 
@@ -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);

diff --git a/src/transform/plugins/images/index.ts b/src/transform/plugins/images/index.ts
@@ -92,6 +92,52 @@ type Opts = SVGOpts & ImageOpts;
 const index: MarkdownItPluginCb<Opts> = (md, opts) => {
     md.assets = [];
 
+    md.inline.ruler.after('image', 'image_caption', (state, silent) => {
+        const pos = state.pos;
+        const max = state.posMax;
+
+        if (state.tokens.length === 0 || state.tokens[state.tokens.length - 1].type !== 'image') {
+            return false;
+        }
+        if (state.src.charCodeAt(pos) !== 0x7b /* { */) {
+            return false;
+        }
+
+        let found = false;
+        let curPos = pos + 1;
+        let captionText = '';
+
+        while (curPos < max) {
+            if (state.src.charCodeAt(curPos) === 0x7d /* } */) {
+                const content = state.src.slice(pos + 1, curPos).trim();
+                const captionMatch = content.match(/^caption(?:="([^"]*)")?$/);
+                if (captionMatch) {
+                    found = true;
+                    captionText = captionMatch[1] || '';
+                    break;
+                }
+            }
+            curPos++;
+        }
+
+        if (!found) {
+            return false;
+        }
+
+        if (!silent) {
+            const token = state.tokens[state.tokens.length - 1];
+            token.type = 'image_with_caption';
+            if (captionText) {
+                token.attrSet('caption', captionText);
+            }
+            state.pos = curPos + 1;
+            return true;
+        }
+
+        state.pos = curPos + 1;
+        return true;
+    });
+
     const plugin = (state: StateCore) => {
         const tokens = state.tokens;
         let i = 0;
@@ -106,11 +152,15 @@ const index: MarkdownItPluginCb<Opts> = (md, opts) => {
             let j = 0;
 
             while (j < childrenTokens.length) {
-                if (childrenTokens[j].type === 'image') {
+                if (
+                    childrenTokens[j].type === 'image' ||
+                    childrenTokens[j].type === 'image_with_caption'
+                ) {
                     const didPatch = childrenTokens[j].attrGet('yfm_patched') || false;
 
                     if (didPatch) {
-                        return;
+                        j++;
+                        continue;
                     }
 
                     const imgSrc = childrenTokens[j].attrGet('src') || '';
@@ -124,10 +174,47 @@ const index: MarkdownItPluginCb<Opts> = (md, opts) => {
 
                     childrenTokens[j].attrSet('yfm_patched', '1');
                 }
+                j++;
+            }
+
+            j = 0;
+            const newTokens: Token[] = [];
 
+            while (j < childrenTokens.length) {
+                if (childrenTokens[j].type === 'image_with_caption') {
+                    const explicitCaption = childrenTokens[j].attrGet('caption');
+                    const title = childrenTokens[j].attrGet('title');
+                    const captionText = explicitCaption || title || '';
+
+                    const figureOpen = new state.Token('figure_open', 'figure', 1);
+                    const figureClose = new state.Token('figure_close', 'figure', -1);
+
+                    childrenTokens[j].type = 'image';
+
+                    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,
+                            childrenTokens[j],
+                            captionOpen,
+                            captionContent,
+                            captionClose,
+                            figureClose,
+                        );
+                    } else {
+                        newTokens.push(figureOpen, childrenTokens[j], figureClose);
+                    }
+                } else {
+                    newTokens.push(childrenTokens[j]);
+                }
                 j++;
             }
 
+            tokens[i].children = newTokens;
             i++;
         }
     };
@@ -143,6 +230,11 @@ const index: MarkdownItPluginCb<Opts> = (md, opts) => {
 
         return token.attrGet('content') || '';
     };
+
+    md.renderer.rules.figure_open = () => '<figure>';
+    md.renderer.rules.figure_close = () => '</figure>';
+    md.renderer.rules.figcaption_open = () => '<figcaption>';
+    md.renderer.rules.figcaption_close = () => '</figcaption>';
 };
 
 export = index;