🎩 What? Why?

This PR adds the ability for users to add links to images in Tiptap editors. Previously, images could not be clickable links, limiting content authoring capabilities.

Changes include:

• Image Extension Enhancement: Added href attribute to the image node, allowing images to store link URLs
• Upload Dialog Update: Added a new "Link URL (optional)" input field to the image upload/edit dialog
• HTML Rendering: Images with links are now wrapped in <a> tags with target="_blank" and rel="noopener noreferrer" for security
• HTML Parsing: Correctly parses existing HTML with linked images and extracts the href attribute
• Accessibility Fix: Resolved aria-hidden warning by properly managing focus when closing the dialog
• i18n Support: Added translation keys for the new link field label
• Test Coverage: Added comprehensive test cases for adding, editing, and removing links on images

Technical implementation:

• When a user edits an image, they can now provide an optional URL
• Empty URLs are treated as no link (null)
• The node view forces recreation when href changes to properly render the structural change
• Links open in new tabs with appropriate security attributes

📌 Related Issues

• Fixes #? (Users cannot add links to images)

Testing

1. Navigate to any editor with full features (edit a help page http://localhost:3000/admin/static_pages/help/edit?locale=es)
2. Insert an image using the image button in the toolbar
3. In the image dialog, fill in:
   • Alternative text
   • NEW: Link URL field (e.g., https://example.com)
4. Click "Save" and verify the image is clickable
5. Click the image to verify it opens the link in a new tab
6. Double-click the image to edit it
7. Verify the link URL is preserved and displayed in the dialog
8. Change or remove the link URL and save
9. Verify the changes are applied correctly

Automated Testing:

Run the image extension test suite:

npm test -- decidim-core/app/packs/src/decidim/editor/test/extensions/image.test.js

New test cases cover:

• Setting an image with a link through the dialog
• Editing an image to add a link
• Editing an image to remove a link
• Editing an image to change the link
• Parsing HTML with linked images correctly

Accessibility Testing:

• Verify no aria-hidden warnings appear in the console when opening/closing the dialog
• Test with screen reader to ensure link labels are properly announced
• Verify keyboard navigation works correctly

📷 Screenshots

Image dialog with new link field:

Linked image in editor:

HTML output:

<a href="https://example.com" target="_blank" rel="noopener noreferrer">
  <div class="editor-content-image" data-image="">
    <img src="/path/to/image.jpg" alt="Alternative text">
  </div>
</a>

♥️ Thank you!