Add anchor tag around image to avoid breaking keep-next functionality (#3384)

* Add anchor tag around image to avoid breaking keep-next functionality

Author: eduardo-proteinms

pwiz_tools/Skyline/Documentation/Tutorials/shared/skyline.js

@@ -16,30 +16,42 @@ function targetTop()
 });
 }
 
-function addFigureAltText()
-{
+function addFigureAltText() {
+    
+    // Helper function to wrap element with anchor
+    function wrapWithAnchor(element, id) {
+        const anchor = document.createElement('a');
+        anchor.setAttribute('name', id);
+        anchor.setAttribute('id', id);
+        
+        // Replace the element with the anchor
+        const parent = element.parentNode;
+        parent.replaceChild(anchor, element);
+        
+        // Add the element inside the anchor
+        anchor.appendChild(element);
+        
+        return anchor;
+    }
+
     const images = document.querySelectorAll('img');
     var figureCounter = 1;
+
     images.forEach((img) => {
         if (img.src.includes("/s-")) {
             img.title = `Figure ${figureCounter}`;
-
-            var anchor = document.createElement('a');
-            const anchorId = `figure${figureCounter}`
-            anchor.setAttribute('name', anchorId);
-            anchor.setAttribute('id', anchorId);
-            img.parentNode.parentNode.insertBefore(anchor, img.parentNode);
-
-            // If it is a screenshot path add a second bookmark anchor
+            
+            // Create figure number anchor
+            const figureAnchor = wrapWithAnchor(img, `figure${figureCounter}`);
+            
+            // Add screenshot ID anchor if available
             const match = img.src.match(/\/(s-\d+)/);
             if (match) {
-                anchor = document.createElement('a');
-                anchor.setAttribute('name', match[1]);
-                anchor.setAttribute('id', match[1]);
-                img.parentNode.parentNode.insertBefore(anchor, img.parentNode);
-            }            
-
-            figureCounter++
+                // For the second ID, we need to wrap the already wrapped image
+                wrapWithAnchor(figureAnchor, match[1]);
+            }
+            
+            figureCounter++;
         }
     });
 }