Fix internal page links rendering with red boxes (CORE-733)

[OpenStaxClaude]

Summary

Fixes CORE-733 - Internal links created in the CMS appear with red boxes due to missing href attributes.

Problem

The CMS (openstax-cms) generates internal page links with the format <a linktype="page" id="560">link text</a> (no href attribute). The os-webview frontend renders these as-is, and CSS styles links without hrefs with red boxes to indicate errors.

Solution

This PR modifies os-webview to detect and resolve these internal links by:

1. Finding all anchor tags with linktype="page" and an id attribute
2. Fetching page metadata from the CMS API: /apps/cms/api/v2/pages/{id}/
3. Extracting the html_url field from the API response
4. Setting the href attribute to the resolved URL

Changes Made

New Files

• src/app/helpers/resolve-page-links.ts - Utility function that:
  • Finds anchors with [linktype="page"][id] selector
  • Fetches page data from CMS API using cmsFetch
  • Implements in-memory caching (Map) to avoid repeated API calls for the same page ID
  • Handles errors gracefully (leaves link as-is if API fails)

Modified Files

• src/app/components/jsx-helpers/raw-html.tsx - Updated useLayoutEffect to call resolvePageLinks after rendering HTML content

Tests

• test/src/helpers/resolve-page-links.test.ts - Unit tests for the resolve-page-links utility
  • Tests successful link resolution
  • Tests caching behavior
  • Tests error handling
  • Tests missing html_url field handling
• test/src/components/jsx-helpers/raw-html.test.tsx - Integration tests for RawHTML component
  • Tests link resolution in the component context
  • Tests re-rendering behavior

Testing

• ✅ All new unit tests passing (8/8)
• ✅ All integration tests passing (6/6)
• ✅ ESLint checks passing
• ✅ No regressions in existing tests

Acceptance Criteria

• Internal links created in CMS will render without red boxes on the website
• Internal links will navigate to the correct page when clicked
• Page load performance is not significantly impacted (caching implemented)
• Failed API calls do not break page rendering (graceful error handling)
• Unit tests pass with good coverage

Next Steps

• Manual testing on dev environment with actual CMS data
• Verify links render correctly without red boxes
• Verify links navigate to correct pages

🤖 Generated with Claude Code

Co-Authored-By: Claude Sonnet 4.5 noreply@anthropic.com

[Copilot]

Pull request overview

This PR addresses CORE-733 by resolving CMS-generated internal page links (<a linktype="page" id="...">) that lack href attributes, preventing them from rendering with error styling and enabling proper navigation.

Changes:

• Added a resolvePageLinks helper to fetch CMS page metadata and populate missing href values.
• Updated RawHTML to invoke page-link resolution after rendering raw HTML content.
• Added unit + integration test coverage for link resolution, caching behavior, and error handling.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 14 comments.

File	Description
src/app/helpers/resolve-page-links.ts	Introduces the page-link resolver that finds linktype="page" anchors and sets href via CMS API lookups.
src/app/components/jsx-helpers/raw-html.tsx	Hooks the new resolver into RawHTML’s layout effect after HTML injection.
test/src/helpers/resolve-page-links.test.ts	Unit tests for the resolver’s behavior (single/multiple links, caching, missing fields, error handling).
test/src/components/jsx-helpers/raw-html.test.tsx	Integration tests ensuring RawHTML resolves internal page links and re-resolves on prop changes.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.