Add Markdown and HTML copy buttons to alt-text-extractor

[simonw]

Add two more copy paste + button option to alt-text-extractor - a thing that provides the markdown for the image (so ![alt text](url)) and another thing with the HTML <img src=”…” alt=”…

[claude]

Claude finished @simonw's task —— View job

---

Code Review Complete ✅

Todo List

• Read repository CLAUDE.md file for guidelines
• Read and analyze alt-text-extractor.html changes
• Review code quality and best practices
• Check for potential bugs or issues
• Evaluate performance considerations
• Assess security concerns
• Review test coverage needs
• Provide comprehensive feedback via GitHub comment

---

Review Summary

This PR adds valuable Markdown and HTML copy functionality to the alt-text-extractor tool. The implementation is solid overall with good attention to detail.

✅ Strengths

1. Excellent HTML Escaping - Lines 318: Properly escapes quotes in alt text using replace(/"/g, '"') to prevent HTML injection
2. Consistent User Experience - New copy buttons follow the existing pattern with success feedback and proper styling
3. Code Reuse - Smart refactoring with the copyToClipboard function (lines 417-451) that consolidates common clipboard logic
4. Good Error Handling - Includes both modern Clipboard API and fallback for older browsers
5. Clean Structure - Well-organized sections with consistent CSS classes and semantic HTML

⚠️ Minor Issues

1. CSS Class Reuse - Lines 290, 312: Both Markdown and HTML sections use url-section class, which isn't semantically accurate. Consider:

   .copy-section { /* generic section for all copyable content */ }

2. Potential XSS Vector - Line 296: While the HTML escaping is good, the Markdown generation doesn't escape square brackets in alt text:

   const markdownCode = `![${altText.replace(/\]/g, '\\]').replace(/\[/g, '\\[')}](${src})`;

📈 Performance Considerations

• Good: DOM manipulation is efficient with proper element creation
• Good: Event listeners are properly attached without memory leaks
• Consider: For very large numbers of images, the synchronous DOM building could benefit from requestAnimationFrame batching

🔒 Security Assessment

• Strong: HTML attribute escaping prevents XSS in generated HTML
• Good: No innerHTML usage in new code sections
• Low Risk: Markdown output could theoretically be problematic if alt text contains ] characters, but this is a minor concern

🧪 Test Coverage Recommendations

Since this is a standalone HTML tool, consider testing:

1. HTML Escaping: Alt text with quotes, angle brackets, and special characters
2. Markdown Edge Cases: Alt text containing square brackets [, ]
3. Cross-browser Compatibility: Verify clipboard fallback works in older browsers
4. Empty Alt Text: Ensure Markdown/HTML generation handles empty alt text gracefully

🎯 Verdict

Approve with minor suggestions. This is a well-implemented feature that adds genuine value. The security considerations are properly handled, and the code follows good practices. The suggested improvements are minor and don't block the PR.

The new copy functionality significantly enhances the tool's utility for content creators working with multiple formats.