Traffic Boost: Fix link text selection adjustment when a link is included later in the same parent

[alecgeatches]

Description

This fixes an issue where sometimes allowed text could not be selected for link replacement:

This happened under these circumstances:

1. A link is suggested in a paragraph that already contains a link.
2. The user highlights a portion of text that contains the auto-generated suggestion link, but not the existing link in text.
3. The code uses range.commonAncestorContainer to check for existing links, which is the parent <p> tag. containsAnchor() then loops through all nodes in the parent, including the link in the paragraph after the selection. containsAnchor() then mistakenly returns true, even though the anchor is not in the selected text.

Fix

Rather than using range.commonAncestorContainer and evaluating all nodes in the parent selection, the new code walks through the node tree from range.startContainer to range.endContainer. This allows us to stop checking before we run into unrelated links later in the parent element. The code borrows from this answer, which recursively visits nodes between the beginning and end nodes.

Testing

To test:

1. In the add/traffic-boost branch, apply Traffic Boost to a story.

2. Find a suggestion in a paragraph that already contains a link, like the first GIF in this issue.

3. Select additional text that contains the suggested text, but none of the actual link later in the paragraph.

4. See incorrect "Select text without existing links." text:

   

5. Switch to this branch fix/link-replacement-with-existing-anchor.

6. Retry the same steps. Ensure that valid highlight changes including the original suggested text can be added.

Summary by CodeRabbit

• Refactor
  • Improved the method for detecting links within selected text, resulting in more accurate identification when highlighting or interacting with text selections.

[coderabbitai]

📝 Walkthrough

Walkthrough

The logic for detecting anchor (<a>) elements within a text selection was refactored from a recursive subtree check to an iterative, range-based traversal. A new helper function was introduced for node traversal, and the relevant callback and effect were updated to use the new approach.

Changes

File(s)	Change Summary
src/content-helper/dashboard-page/pages/traffic-boost/preview/components/text-selection-tooltip.tsx	Refactored anchor detection logic from recursive node check to iterative range-based traversal; added getNextNode helper; updated containsAnchor callback and its usage in useEffect.

Suggested labels

Feature: Traffic Boost

Suggested reviewers

• acicovic

Tip

⚡️ Faster reviews with caching

• CodeRabbit now supports caching for code and dependencies, helping speed up reviews. This means quicker feedback, reduced wait times, and a smoother review experience overall. Cached data is encrypted and stored securely. This feature will be automatically enabled for all accounts on May 16th. To opt out, configure Review - Disable Cache at either the organization or repository level. If you prefer to disable all data retention across your organization, simply turn off the Data Retention setting under your Organization Settings.

Enjoy the performance boost—your workflow just got faster.

---

📜 Recent review details

Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 05f365e and c815bdb.

⛔ Files ignored due to path filters (2)

• build/content-helper/dashboard-page.asset.php is excluded by !build/**
• build/content-helper/dashboard-page.js is excluded by !build/**

📒 Files selected for processing (1)

• src/content-helper/dashboard-page/pages/traffic-boost/preview/components/text-selection-tooltip.tsx (3 hunks)

🧰 Additional context used

📓 Path-based instructions (1)

`**/*.{js,ts,tsx,jsx}`: "Perform a detailed review of the provided code with following key aspects in mind: - Review the code to ensure it is well-structured and adheres to best ...

**/*.{js,ts,tsx,jsx}: "Perform a detailed review of the provided code with following key aspects in mind:

• Review the code to ensure it is well-structured and adheres to best practices.
• Verify compliance with WordPress coding standards.
• Ensure the code is well-documented.
• Check for security vulnerabilities and confirm the code is secure.
• Optimize the code for performance, removing any unnecessary elements.
• Validate JSDoc comments for accuracy, currency, and adherence to WordPress coding standards.
• Ensure each line comment concludes with a period.
• Confirm every JSDoc comment includes a @SInCE tag indicating the next version of the plugin to include the code.
• Guarantee compatibility with the latest version of WordPress, avoiding deprecated functions or features."

• src/content-helper/dashboard-page/pages/traffic-boost/preview/components/text-selection-tooltip.tsx

⏰ Context from checks skipped due to timeout of 90000ms (2)

• GitHub Check: E2E against WordPress latest
• GitHub Check: build

🔇 Additional comments (3)

src/content-helper/dashboard-page/pages/traffic-boost/preview/components/text-selection-tooltip.tsx (3)

148-166: Excellent refactoring to fix link text selection detection!

The refactored containsAnchor function properly traverses only the nodes within the selection range instead of checking all nodes in the common ancestor. This directly addresses the issue where text selections were being incorrectly flagged as containing links when those links appeared later in the same parent element.

The implementation is clean and well-structured, with a clear flow from start container to end container using the new getNextNode helper function.

---

204-206: Correctly updated function call to match new signature.

The useEffect hook has been properly updated to pass the entire Range object to the containsAnchor function rather than just the commonAncestorContainer. This change is consistent with the function signature change and enables the improved traversal method.

---

546-573: Well-implemented DOM traversal helper function.

The new getNextNode function provides a robust implementation for traversing DOM nodes in document order. The documentation is thorough with appropriate JSDoc comments and type annotations. The function correctly handles different traversal scenarios:

1. Stopping at the end node
2. Descending into children when appropriate
3. Moving to siblings
4. Recursively ascending to parent's siblings when needed

This implementation follows the approach mentioned in the PR objectives and ensures efficient traversal of only the relevant nodes.

✨ Finishing Touches

• 📝 Generate Docstrings

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit testing code for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR.
• @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[acicovic]

Thank you! 🙂