Fix alt attribute updates in rich-text widget linkImages method

[Copilot]

Problem

The linkImages method in modules/@apostrophecms/rich-text-widget/index.js was only updating the src attribute for inline images in rich text widgets, but not the alt attribute. This caused the frontend to display outdated alt text even when the alt text was updated in the Media Library, unless the image was manually re-added in the editor.

Solution

Enhanced the linkImages method to also handle alt attribute updates while preserving the existing fast string manipulation approach:

• Replace existing alt attributes with the latest value from the image document (doc.alt)
• Insert missing alt attributes when they don't exist and the image document has alt text
• Properly escape HTML entities in alt text using self.apos.util.escapeHtml()
• Maintain performance by using the same fast indexOf/substring logic instead of DOM parsers

Changes Made

Core Implementation

• Updated the linkImages method to recalculate img tag boundaries after src replacement
• Added logic to find and replace existing alt attributes within img tags
• Added logic to insert new alt attributes before img tag closure (handles both <img /> and <img> formats)
• Ensured proper HTML escaping for special characters in alt text

Code Quality

• Fixed all ESLint issues and maintained consistent code style
• Broke long lines to meet 90-character limit requirements
• Added comprehensive inline comments explaining the alt handling logic

Testing

• Added comprehensive test coverage for all alt attribute scenarios
• Tests cover: replacing existing alt, inserting missing alt, HTML escaping, empty alt text, and undefined alt properties
• Added tests to the existing test/rich-text-widget.js test suite

Example

Before this fix:

<!-- Image alt updated in Media Library from "Old description" to "New description" -->
<img src="https://example.com/image.jpg" alt="Old description" />
<!-- Alt text remains outdated on frontend -->

After this fix:

<!-- Alt text automatically updates to match Media Library -->
<img src="https://example.com/image.jpg" alt="New description" />

Impact

• Accessibility: Alt text now stays current with Media Library updates
• Content Management: No manual re-editing required when alt text is updated
• Performance: Maintains the fast string manipulation approach
• Backward Compatibility: No breaking changes to existing functionality

Fixes issue where rich-text widgets displayed outdated alt text until images were manually re-added in the editor.

This pull request was created as a result of the following prompt from Copilot chat.

Problem:

Currently, the linkImages method in modules/@apostrophecms/rich-text-widget/index.js updates the src attribute for inline images in rich text widgets by using a fast while loop and indexOf/substring logic. However, it does not update the alt attribute to reflect changes made to the alt text in the Media Library. This causes the frontend to display outdated alt text unless the image is re-added in the editor.

Task:

• Update the linkImages method to also update or insert the alt attribute with the latest value from the image doc (doc.alt) when replacing the image src.
• Retain the current fast string manipulation logic (while loop, indexOf, substring, etc.), and only add logic for handling the alt attribute in this same loop.
• Do not refactor to use Cheerio or other parsers; keep the performance-oriented approach.
• Ensure that if an alt attribute exists, it is replaced; if not, it is inserted.
• The solution should only affect the frontend (public view).

Acceptance Criteria:

• When an image's alt text is updated in the Media Library, all rich-text widgets using that image display the updated alt text on the frontend.
• The fast string manipulation approach is preserved.

Relevant file:
modules/@apostrophecms/rich-text-widget/index.js

References:

• The code is currently at commit cca5019.
• This feature is about images added via rich-text only, not image widgets.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.