Traffic Boost: Fix permalinks and highlighting #3090
Conversation
vaurdan
added
Component: PHP
📝 WalkthroughWalkthroughThe pull request introduces changes across multiple files related to the dashboard page and smart linking functionality. The modifications primarily focus on how post links are handled, content area selection, and preview rendering. Key changes include updating how URLs are referenced, modifying the preview wrapper structure, and introducing a new utility function for content area selection. The changes aim to improve the consistency and reliability of link handling and preview display in the dashboard. Changes
Sequence DiagramsequenceDiagram
participant UI as Dashboard UI
participant Provider as TrafficBoostProvider
participant Preview as PreviewComponent
participant ContentArea as ContentAreaUtility
UI->>Provider: Request post data
Provider-->>UI: Return post with link
UI->>Preview: Load preview
Preview->>ContentArea: Get content area
ContentArea-->>Preview: Return content area
Preview->>Preview: Render preview with marker
Possibly related PRs
Suggested labels
Suggested reviewers
✨ Finishing Touches
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
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)
Other keywords and placeholders
Documentation and Community
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
src/content-helper/dashboard-page/pages/traffic-boost/preview/utils.ts (1)
34-60: Consider adding null check for document parameter.The function is well-structured and documented. However, consider adding a null check for the document parameter to prevent potential runtime errors.
export const getContentArea = ( document: Document ): Element | null => { + if (!document) { + return null; + } // Get the content area by checking for the PARSELY_PREVIEW_MARKER_CLASS first.src/content-helper/dashboard-page/pages/traffic-boost/preview/components/text-selection-tooltip.tsx (1)
9-9: Consider adding JSDoc for the imported utility function.To maintain consistency with the existing documentation style, consider adding JSDoc comments for the
getContentAreaimport:/** * Internal dependencies */ import { getContentArea } from '../utils';
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (2)
build/content-helper/dashboard-page.asset.phpis excluded by!build/**build/content-helper/dashboard-page.jsis excluded by!build/**
📒 Files selected for processing (9)
src/UI/class-dashboard-page.php(1 hunks)src/content-helper/common/base-wordpress-provider.tsx(1 hunks)src/content-helper/dashboard-page/pages/traffic-boost/preview/components/link-options-panel.tsx(1 hunks)src/content-helper/dashboard-page/pages/traffic-boost/preview/components/preview-iframe.tsx(3 hunks)src/content-helper/dashboard-page/pages/traffic-boost/preview/components/text-selection-tooltip.tsx(4 hunks)src/content-helper/dashboard-page/pages/traffic-boost/preview/preview-post.php(1 hunks)src/content-helper/dashboard-page/pages/traffic-boost/preview/preview.tsx(3 hunks)src/content-helper/dashboard-page/pages/traffic-boost/preview/utils.ts(2 hunks)src/content-helper/dashboard-page/pages/traffic-boost/provider.ts(2 hunks)
🧰 Additional context used
📓 Path-based instructions (9)
src/content-helper/dashboard-page/pages/traffic-boost/preview/components/preview-iframe.tsx (1)
Pattern **/*.{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/common/base-wordpress-provider.tsx (1)
Pattern **/*.{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/provider.ts (1)
Pattern **/*.{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/preview-post.php (1)
Pattern **/*.{html,php}: "Perform a detailed review of the provided code with following key aspects in mind:
- Review the HTML and PHP code to ensure it is well-structured and adheres to best practices.
- Ensure the code follows WordPress coding standards and is well-documented.
- Confirm the code is secure and free from vulnerabilities.
- Optimize the code for performance, removing any unnecessary elements.
- Validate comments for accuracy, currency, and adherence to WordPress coding standards.
- Ensure each line comment concludes with a period.
- Verify code compatibility with the latest version of WordPress, avoiding deprecated functions or features."
src/UI/class-dashboard-page.php (1)
Pattern **/*.{html,php}: "Perform a detailed review of the provided code with following key aspects in mind:
- Review the HTML and PHP code to ensure it is well-structured and adheres to best practices.
- Ensure the code follows WordPress coding standards and is well-documented.
- Confirm the code is secure and free from vulnerabilities.
- Optimize the code for performance, removing any unnecessary elements.
- Validate comments for accuracy, currency, and adherence to WordPress coding standards.
- Ensure each line comment concludes with a period.
- Verify code 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 (1)
Pattern **/*.{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/preview.tsx (1)
Pattern **/*.{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/utils.ts (1)
Pattern **/*.{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/link-options-panel.tsx (1)
Pattern **/*.{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."
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: build
- GitHub Check: E2E against WordPress latest
🔇 Additional comments (18)
src/content-helper/common/base-wordpress-provider.tsx (1)
70-70: LGTM! Good addition of thelinkproperty.The addition of the
linkproperty toHydratedPosttype is well-placed and aligns with the PR's objective to use more reliable permalinks.src/content-helper/dashboard-page/pages/traffic-boost/preview/utils.ts (2)
17-17: LGTM! Good switch to using thelinkproperty.The change from
guid.rawtolinkaligns with the PR's objective to use more reliable permalinks.
27-32: LGTM! Well-documented constant.The constant is properly documented with JSDoc comments and follows WordPress coding standards.
src/content-helper/dashboard-page/pages/traffic-boost/preview/preview-post.php (1)
72-74: LGTM! Good restructuring of the preview markup.The changes improve theme compatibility by:
- Using a more semantic class name for the content wrapper
- Adding the marker div as a sibling instead of wrapping the content
src/content-helper/dashboard-page/pages/traffic-boost/preview/components/link-options-panel.tsx (1)
120-120: LGTM! Consistent use of thelinkproperty.The change aligns with the PR's objective to use more reliable permalinks and is consistent with the type changes.
src/content-helper/dashboard-page/pages/traffic-boost/preview/preview.tsx (3)
146-149: LGTM: Usinglinkproperty for preview URL construction.The change from
guid.rawtolinkproperty is a more reliable approach for obtaining the correct permalink, especially in multisite environments.
164-168: LGTM: Updated post link handling in new tab function.The change ensures consistent URL handling across the component.
190-195: LGTM: Updated Parse.ly dashboard URL construction.The change maintains consistency in URL handling while preserving the proper encoding of the URL parameter.
src/content-helper/dashboard-page/pages/traffic-boost/provider.ts (2)
91-91: LGTM: Usinglinkproperty for site URL extraction.The change ensures consistent URL handling for internal link classification.
161-161: LGTM: Updated smart link href assignment.The change maintains consistency in URL handling across the application.
src/content-helper/dashboard-page/pages/traffic-boost/preview/components/preview-iframe.tsx (3)
18-18: LGTM: Added utility function import.The import of
getContentAreautility function improves code organization.
245-258: LGTM: Improved content area observer setup.The change enhances the reliability of content area handling and cleanup.
276-279: LGTM: Updated content area reference handling.The change ensures consistent content area access across the component.
src/UI/class-dashboard-page.php (1)
135-136: Verify styling and JavaScript compatibility with the new marker approach.The change from wrapping content to adding a sibling marker div is a good approach to avoid CSS inheritance issues. However, ensure that:
- All JavaScript code that previously relied on the wrapper structure has been updated
- CSS selectors targeting the preview content have been adjusted
Run this script to verify the changes:
✅ Verification successful
Implementation of marker div approach is correct and consistent.
The change from wrapper to marker div has been properly implemented across all relevant files. JavaScript code has been updated to work with the new marker approach, and no legacy wrapper class references were found.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Check for any remaining references to the old wrapper class # Search for old wrapper class references in JS/TS files echo "Checking JavaScript/TypeScript files for old wrapper class references..." rg -l "wp-parsely-preview-wrapper" # Search for old wrapper class references in CSS/SCSS files echo "Checking CSS/SCSS files for old wrapper class references..." rg -l "wp-parsely-preview-wrapper" --type cssLength of output: 364
Script:
#!/bin/bash # Search for new marker class and preview-related code # Check for new marker class references echo "Checking for new marker class references..." rg -l "wp-parsely-preview-marker" # Search for preview-related JavaScript files echo "Checking for preview-related JavaScript files..." rg -l "preview" --type js --type ts # Search for preview-related CSS echo "Checking for preview-related CSS..." rg -l "preview" --type css # Get content of found files for better context echo "Getting content of PHP file for context..." rg -A 5 -B 5 "wp-parsely-preview-marker"Length of output: 71204
src/content-helper/dashboard-page/pages/traffic-boost/preview/components/text-selection-tooltip.tsx (4)
9-9: LGTM! Import statement is well-placed.The addition of the
getContentAreautility function import aligns with the PR's objective of improving link handling within the content area.
405-414: LGTM! Robust content area handling.The code properly:
- Retrieves the content area using the utility function
- Validates its existence
- Ensures the selection is within bounds
This change aligns with the PR's goal of fixing issues with the Traffic Boost interface.
459-459: LGTM! Consistent offset calculation.The offset calculation now correctly uses the content area as the reference point, maintaining consistency with the architectural changes.
487-487: LGTM! Improved highlight placement.Appending the highlight to the content area instead of the preview wrapper resolves the CSS issues mentioned in the PR objectives, where certain themes had styling conflicts.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
src/content-helper/dashboard-page/pages/traffic-boost/preview/utils.ts (1)
34-45: Enhance JSDoc comments for better documentation.The JSDoc comments are well-structured but could be improved by:
- Adding a description for the
@returntag to explain what the parent element represents.- Adding examples of usage.
/** * Gets the content area element from the document. * * It tries to get the content area by checking for the PARSELY_PREVIEW_MARKER_CLASS. * The content area is the element that contains the marker as a child. * * @since 3.18.0 * * @param {Document} document The document to get the content area from. * - * @return {Element | null} The content area element or null if not found. + * @return {Element | null} The parent element containing the preview marker, or null if not found or if the marker has no parent. + * + * @example + * ```ts + * const contentArea = getContentArea(document); + * if (contentArea) { + * // Content area found, proceed with highlighting + * } + * ``` */src/content-helper/dashboard-page/pages/traffic-boost/preview/components/text-selection-tooltip.tsx (2)
405-410: Add JSDoc comment and error logging.While the content area retrieval logic is correct, consider these improvements:
- Add a JSDoc comment explaining the content area retrieval.
- Add error logging when content area is not found for better debugging.
+/** + * Retrieves and validates the content area from the iframe document. + * + * @since 3.19.0 + */ // Get the content area. const contentArea = getContentArea( iframeDocument ); if ( ! contentArea ) { + console.warn( 'Traffic Boost: Content area not found in iframe.' ); return; }
413-414: Add JSDoc comment for boundary check.The boundary check is crucial for security and UX. Consider adding documentation:
+/** + * Verify that the selection is within the content area boundaries. + * This prevents highlighting outside the main content. + * + * @since 3.19.0 + */ // Check if selection is within content area. if ( ! contentArea.contains( range.commonAncestorContainer ) ) {
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (2)
build/content-helper/dashboard-page.asset.phpis excluded by!build/**build/content-helper/dashboard-page.jsis excluded by!build/**
📒 Files selected for processing (9)
src/UI/class-dashboard-page.php(1 hunks)src/content-helper/common/base-wordpress-provider.tsx(1 hunks)src/content-helper/dashboard-page/pages/traffic-boost/preview/components/link-options-panel.tsx(1 hunks)src/content-helper/dashboard-page/pages/traffic-boost/preview/components/preview-iframe.tsx(3 hunks)src/content-helper/dashboard-page/pages/traffic-boost/preview/components/text-selection-tooltip.tsx(4 hunks)src/content-helper/dashboard-page/pages/traffic-boost/preview/preview-post.php(1 hunks)src/content-helper/dashboard-page/pages/traffic-boost/preview/preview.tsx(3 hunks)src/content-helper/dashboard-page/pages/traffic-boost/preview/utils.ts(2 hunks)src/content-helper/dashboard-page/pages/traffic-boost/provider.ts(2 hunks)
🧰 Additional context used
📓 Path-based instructions (9)
src/content-helper/dashboard-page/pages/traffic-boost/preview/utils.ts (1)
Pattern **/*.{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/common/base-wordpress-provider.tsx (1)
Pattern **/*.{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/link-options-panel.tsx (1)
Pattern **/*.{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 (1)
Pattern **/*.{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/UI/class-dashboard-page.php (1)
Pattern **/*.{html,php}: "Perform a detailed review of the provided code with following key aspects in mind:
- Review the HTML and PHP code to ensure it is well-structured and adheres to best practices.
- Ensure the code follows WordPress coding standards and is well-documented.
- Confirm the code is secure and free from vulnerabilities.
- Optimize the code for performance, removing any unnecessary elements.
- Validate comments for accuracy, currency, and adherence to WordPress coding standards.
- Ensure each line comment concludes with a period.
- Verify code compatibility with the latest version of WordPress, avoiding deprecated functions or features."
src/content-helper/dashboard-page/pages/traffic-boost/preview/preview.tsx (1)
Pattern **/*.{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/preview-iframe.tsx (1)
Pattern **/*.{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/preview-post.php (1)
Pattern **/*.{html,php}: "Perform a detailed review of the provided code with following key aspects in mind:
- Review the HTML and PHP code to ensure it is well-structured and adheres to best practices.
- Ensure the code follows WordPress coding standards and is well-documented.
- Confirm the code is secure and free from vulnerabilities.
- Optimize the code for performance, removing any unnecessary elements.
- Validate comments for accuracy, currency, and adherence to WordPress coding standards.
- Ensure each line comment concludes with a period.
- Verify code compatibility with the latest version of WordPress, avoiding deprecated functions or features."
src/content-helper/dashboard-page/pages/traffic-boost/provider.ts (1)
Pattern **/*.{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."
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: E2E against WordPress latest
🔇 Additional comments (15)
src/content-helper/dashboard-page/pages/traffic-boost/preview/components/link-options-panel.tsx (1)
120-120: LGTM! Usinglinkinstead ofguid.rawfor permalinks.The change aligns with the PR objectives and maintains proper optional chaining.
src/content-helper/common/base-wordpress-provider.tsx (1)
70-70: LGTM! Addedlinkproperty to HydratedPost type.The addition properly supports the permalink changes and is well-integrated with the existing type system.
src/content-helper/dashboard-page/pages/traffic-boost/preview/preview.tsx (3)
146-146: LGTM! Usinglinkfor preview URL construction.The change correctly uses the post's permalink for frontend preview URL construction.
164-168: LGTM! Updated post link handling in openPostInNewTab.The change properly uses optional chaining and the post's permalink.
190-194: LGTM! Updated Parse.ly dashboard URL construction.The change correctly uses the post's permalink and properly encodes it for the dashboard URL.
src/content-helper/dashboard-page/pages/traffic-boost/provider.ts (2)
91-91: LGTM! Usinglinkfor site URL extraction.The change correctly uses the post's permalink to extract the hostname for link classification.
161-161: LGTM! Updated mock smart link generation.The change properly uses the post's permalink in the mocked smart link.
src/content-helper/dashboard-page/pages/traffic-boost/preview/utils.ts (1)
17-17: LGTM! Usinglinkproperty for more reliable permalink handling.The change from
guid.rawtolinkproperty aligns with the PR objectives and provides a more reliable way to obtain the correct permalink, especially when syncing between environments.src/content-helper/dashboard-page/pages/traffic-boost/preview/preview-post.php (1)
72-74: LGTM! Improved HTML structure to prevent CSS conflicts.The changes effectively address the CSS issues by:
- Using
wp-parsely-preview-contentclass for the content wrapper.- Adding the marker div as a sibling instead of wrapping content, which prevents interference with theme styling rules.
src/content-helper/dashboard-page/pages/traffic-boost/preview/components/preview-iframe.tsx (3)
18-18: LGTM! Clean import of the new utility function.The import is properly organized with other internal imports and correctly destructured.
245-258: LGTM! Improved content area handling and observer setup.The changes enhance reliability by:
- Using the centralized
getContentAreafunction.- Adding proper null checks before setting up the observer.
- Maintaining the immediate scroll attempt for better UX.
276-279: LGTM! Consistent use of content area retrieval.The changes maintain consistency by using the centralized
getContentAreafunction while preserving proper null checks.src/UI/class-dashboard-page.php (1)
135-136: LGTM! Improved preview marker implementation.The changes correctly implement the new approach of adding the marker as a sibling instead of wrapping content, while maintaining proper security checks and WordPress coding standards.
src/content-helper/dashboard-page/pages/traffic-boost/preview/components/text-selection-tooltip.tsx (2)
9-9: LGTM!The import statement follows WordPress coding standards and correctly imports the utility function.
459-459: LGTM! Changes align with PR objectives.The modifications correctly use the content area for:
- Calculating text offset
- Appending highlight elements
This change ensures proper positioning and hierarchy of highlight elements, fixing the CSS issues mentioned in the PR objectives.
Also applies to: 487-487
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/content-helper/dashboard-page/pages/traffic-boost/preview/components/text-selection-tooltip.tsx (1)
413-414: Enhance the comment for better clarity.The current comment could be more descriptive about why we need to check if the selection is within the content area.
- // Check if selection is within content area. + // Ensure the selection is within the main content area to prevent highlighting in sidebars or navigation.
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (2)
build/content-helper/dashboard-page.asset.phpis excluded by!build/**build/content-helper/dashboard-page.jsis excluded by!build/**
📒 Files selected for processing (9)
src/UI/class-dashboard-page.php(1 hunks)src/content-helper/common/base-wordpress-provider.tsx(1 hunks)src/content-helper/dashboard-page/pages/traffic-boost/preview/components/link-options-panel.tsx(1 hunks)src/content-helper/dashboard-page/pages/traffic-boost/preview/components/preview-iframe.tsx(3 hunks)src/content-helper/dashboard-page/pages/traffic-boost/preview/components/text-selection-tooltip.tsx(4 hunks)src/content-helper/dashboard-page/pages/traffic-boost/preview/preview-post.php(1 hunks)src/content-helper/dashboard-page/pages/traffic-boost/preview/preview.tsx(3 hunks)src/content-helper/dashboard-page/pages/traffic-boost/preview/utils.ts(2 hunks)src/content-helper/dashboard-page/pages/traffic-boost/provider.ts(2 hunks)
🧰 Additional context used
📓 Path-based instructions (9)
src/content-helper/dashboard-page/pages/traffic-boost/preview/components/link-options-panel.tsx (1)
Pattern **/*.{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/provider.ts (1)
Pattern **/*.{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/preview-post.php (1)
Pattern **/*.{html,php}: "Perform a detailed review of the provided code with following key aspects in mind:
- Review the HTML and PHP code to ensure it is well-structured and adheres to best practices.
- Ensure the code follows WordPress coding standards and is well-documented.
- Confirm the code is secure and free from vulnerabilities.
- Optimize the code for performance, removing any unnecessary elements.
- Validate comments for accuracy, currency, and adherence to WordPress coding standards.
- Ensure each line comment concludes with a period.
- Verify code compatibility with the latest version of WordPress, avoiding deprecated functions or features."
src/content-helper/common/base-wordpress-provider.tsx (1)
Pattern **/*.{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/preview-iframe.tsx (1)
Pattern **/*.{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 (1)
Pattern **/*.{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/utils.ts (1)
Pattern **/*.{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/UI/class-dashboard-page.php (1)
Pattern **/*.{html,php}: "Perform a detailed review of the provided code with following key aspects in mind:
- Review the HTML and PHP code to ensure it is well-structured and adheres to best practices.
- Ensure the code follows WordPress coding standards and is well-documented.
- Confirm the code is secure and free from vulnerabilities.
- Optimize the code for performance, removing any unnecessary elements.
- Validate comments for accuracy, currency, and adherence to WordPress coding standards.
- Ensure each line comment concludes with a period.
- Verify code compatibility with the latest version of WordPress, avoiding deprecated functions or features."
src/content-helper/dashboard-page/pages/traffic-boost/preview/preview.tsx (1)
Pattern **/*.{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."
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: E2E against WordPress latest
🔇 Additional comments (17)
src/content-helper/common/base-wordpress-provider.tsx (1)
70-70: LGTM! Well-structured type definition.The addition of the
linkproperty toHydratedPosttype is a good improvement, providing a more reliable way to access post permalinks compared to usingguid.raw.src/content-helper/dashboard-page/pages/traffic-boost/preview/utils.ts (3)
17-17: LGTM! Improved URL handling.The change from
guid.rawtolinkproperty provides more reliable permalink handling.
27-32: LGTM! Well-documented constant.The constant is properly documented with JSDoc and follows WordPress coding standards.
34-60: LGTM! Well-structured utility function.The
getContentAreafunction is:
- Well-documented with JSDoc
- Handles null checks properly
- Has a clear single responsibility
src/content-helper/dashboard-page/pages/traffic-boost/preview/preview-post.php (1)
72-74: LGTM! Improved theme compatibility.The changes improve theme compatibility by:
- Using more semantic class naming
- Adding the marker div as a sibling instead of wrapping content, which prevents potential CSS conflicts with complex themes
src/content-helper/dashboard-page/pages/traffic-boost/preview/components/link-options-panel.tsx (1)
120-120: LGTM! Consistent link handling.The change from
guid.rawtolinkproperty in the TextControl provides a more reliable permalink display, consistent with other components.src/content-helper/dashboard-page/pages/traffic-boost/preview/preview.tsx (3)
146-146: LGTM: Usinglinkproperty for preview URL construction.The change from
guid.rawtolinkproperty improves permalink reliability for the preview functionality.
164-168: LGTM: Usinglinkproperty for opening posts.The change ensures consistent and reliable post URL handling when opening posts in new tabs.
190-194: LGTM: Usinglinkproperty for Parse.ly dashboard URL.The change ensures correct URL handling when opening posts in the Parse.ly dashboard.
src/content-helper/dashboard-page/pages/traffic-boost/provider.ts (2)
91-91: LGTM: Usinglinkproperty for site URL extraction.The change improves reliability of site URL extraction for link classification.
161-161: LGTM: Usinglinkproperty for smart link href.The change ensures consistent URL handling in smart link generation.
src/content-helper/dashboard-page/pages/traffic-boost/preview/components/preview-iframe.tsx (1)
245-258: LGTM: Improved content area handling with proper cleanup.The changes enhance content area handling by:
- Using the
getContentAreautility for consistent selection- Adding proper cleanup of the MutationObserver
- Including proper error handling
src/UI/class-dashboard-page.php (1)
135-136: LGTM: Improved theme compatibility.The change from wrapping content to appending a marker div as a sibling prevents potential CSS styling issues with complex themes. This aligns with the PR objective to fix theme compatibility issues.
src/content-helper/dashboard-page/pages/traffic-boost/preview/components/text-selection-tooltip.tsx (4)
405-410: LGTM! Well-structured error handling.The code properly retrieves and validates the content area, with appropriate null checking.
459-459: LGTM! Correct usage of content area for offset calculation.The change properly uses the content area as the reference point for calculating text offsets.
487-487: LGTM! Improved highlight positioning.Appending the highlight to the content area as a sibling of post paragraphs is a better approach that prevents CSS disruption in complex themes.
9-9: Verify the utility function's location and usage across the codebase.Let's verify the location and usage of the
getContentAreautility:✅ Verification successful
Import statement is correctly implemented and the utility function exists
The
getContentAreautility function is properly implemented in the utils file and is consistently used across both preview-iframe.tsx and text-selection-tooltip.tsx components for handling iframe content area detection.🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the location and usage of getContentArea utility. # Find the utility function definition ast-grep --pattern 'export function getContentArea' # Find all imports of getContentArea rg "import.*getContentArea.*from.*utils"Length of output: 389
Script:
#!/bin/bash # Find and examine the utils file content fd utils.ts --exec cat {} \; --max-depth 6 --base-directory src/content-helper/dashboard-page/pages/traffic-boost/preview # Find all references to getContentArea in the codebase rg "getContentArea" -A 2Length of output: 4122
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (5)
src/content-helper/dashboard-page/pages/traffic-boost/preview/preview-post.php (1)
72-74: Consider adding defensive CSS rules.While the new structure with
wp-parsely-preview-contentandwp-parsely-preview-markeris good, consider adding CSS rules to prevent theme styles from affecting the preview marker.<style> + .wp-parsely-preview-marker { + pointer-events: none; + position: relative; + z-index: 1000; + } </style>src/content-helper/dashboard-page/pages/traffic-boost/preview/preview.tsx (2)
164-164: Verify error handling for missing post link.The null check for
activePost?.linkis good, but consider adding user feedback when the link is missing.if ( ! activePost?.link ) { + console.warn('Post link is missing or invalid'); return; }Also applies to: 168-168
190-190: Consider sanitizing the URL before encoding.While
encodeURIComponentis used correctly, consider sanitizing the URL before encoding to prevent potential security issues.-const parselyDashboardUrl = `https://dash.parsely.com/${ window.wpParselySiteId }/find?url=${ encodeURIComponent( activePost.link ) }`; +const sanitizedUrl = activePost.link.trim(); +const parselyDashboardUrl = `https://dash.parsely.com/${ window.wpParselySiteId }/find?url=${ encodeURIComponent( sanitizedUrl ) }`;Also applies to: 194-194
src/content-helper/dashboard-page/pages/traffic-boost/preview/components/preview-iframe.tsx (1)
245-258: Consider adding retry mechanism for content area.The content area might not be immediately available. Consider implementing a retry mechanism with a timeout.
const contentArea = getContentArea( iframeDocument ); +const maxRetries = 3; +let retryCount = 0; + +const tryGetContentArea = () => { + const area = getContentArea( iframeDocument ); + if (area || retryCount >= maxRetries) { + return area; + } + retryCount++; + setTimeout(tryGetContentArea, 100); +}; -if ( contentArea ) { +const area = tryGetContentArea(); +if ( area ) {src/content-helper/dashboard-page/pages/traffic-boost/preview/components/text-selection-tooltip.tsx (1)
405-410: Add documentation and error handling.While the code logic is sound, consider these improvements:
- Add JSDoc comment explaining the content area retrieval and validation.
- Add error logging when content area is not found to help with debugging.
+/** + * Retrieves and validates the content area from the iframe document. + * + * @since 3.19.0 + */ // Get the content area. const contentArea = getContentArea( iframeDocument ); if ( ! contentArea ) { + console.warn( 'Traffic Boost: Content area not found in iframe.' ); return; }
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (2)
build/content-helper/dashboard-page.asset.phpis excluded by!build/**build/content-helper/dashboard-page.jsis excluded by!build/**
📒 Files selected for processing (9)
src/UI/class-dashboard-page.php(1 hunks)src/content-helper/common/base-wordpress-provider.tsx(1 hunks)src/content-helper/dashboard-page/pages/traffic-boost/preview/components/link-options-panel.tsx(1 hunks)src/content-helper/dashboard-page/pages/traffic-boost/preview/components/preview-iframe.tsx(3 hunks)src/content-helper/dashboard-page/pages/traffic-boost/preview/components/text-selection-tooltip.tsx(4 hunks)src/content-helper/dashboard-page/pages/traffic-boost/preview/preview-post.php(1 hunks)src/content-helper/dashboard-page/pages/traffic-boost/preview/preview.tsx(3 hunks)src/content-helper/dashboard-page/pages/traffic-boost/preview/utils.ts(2 hunks)src/content-helper/dashboard-page/pages/traffic-boost/provider.ts(2 hunks)
🧰 Additional context used
📓 Path-based instructions (9)
src/content-helper/common/base-wordpress-provider.tsx (1)
Pattern **/*.{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/UI/class-dashboard-page.php (1)
Pattern **/*.{html,php}: "Perform a detailed review of the provided code with following key aspects in mind:
- Review the HTML and PHP code to ensure it is well-structured and adheres to best practices.
- Ensure the code follows WordPress coding standards and is well-documented.
- Confirm the code is secure and free from vulnerabilities.
- Optimize the code for performance, removing any unnecessary elements.
- Validate comments for accuracy, currency, and adherence to WordPress coding standards.
- Ensure each line comment concludes with a period.
- Verify code compatibility with the latest version of WordPress, avoiding deprecated functions or features."
src/content-helper/dashboard-page/pages/traffic-boost/preview/components/link-options-panel.tsx (1)
Pattern **/*.{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/preview.tsx (1)
Pattern **/*.{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/preview-post.php (1)
Pattern **/*.{html,php}: "Perform a detailed review of the provided code with following key aspects in mind:
- Review the HTML and PHP code to ensure it is well-structured and adheres to best practices.
- Ensure the code follows WordPress coding standards and is well-documented.
- Confirm the code is secure and free from vulnerabilities.
- Optimize the code for performance, removing any unnecessary elements.
- Validate comments for accuracy, currency, and adherence to WordPress coding standards.
- Ensure each line comment concludes with a period.
- Verify code compatibility with the latest version of WordPress, avoiding deprecated functions or features."
src/content-helper/dashboard-page/pages/traffic-boost/provider.ts (1)
Pattern **/*.{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/utils.ts (1)
Pattern **/*.{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 (1)
Pattern **/*.{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/preview-iframe.tsx (1)
Pattern **/*.{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."
🔇 Additional comments (11)
src/content-helper/common/base-wordpress-provider.tsx (1)
70-70: LGTM! Good improvement to use thelinkproperty.The addition of the
linkproperty toHydratedPosttype is a positive change, as it provides a more reliable way to access post permalinks compared to usingguid.raw.src/content-helper/dashboard-page/pages/traffic-boost/preview/utils.ts (3)
17-17: LGTM! Improved URL handling.Using
linkinstead ofguid.rawfor URL comparison is more reliable and consistent with WordPress standards.
27-32: LGTM! Well-documented constant.The constant is properly documented with JSDoc comments and follows WordPress coding standards.
34-60: LGTM! Well-structured utility function.The
getContentAreafunction is:
- Well-documented with JSDoc
- Has proper null checks
- Follows single responsibility principle
src/content-helper/dashboard-page/pages/traffic-boost/preview/components/link-options-panel.tsx (1)
120-120: LGTM! Consistent use of link property.The change from
post?.guid?.rawtopost?.linkaligns with the type changes and provides a more reliable way to access post permalinks.src/content-helper/dashboard-page/pages/traffic-boost/preview/preview.tsx (1)
146-147: LGTM: Preview URL construction using post.link is correct.The change from
guid.rawtolinkfor preview URL construction is appropriate as it provides a more reliable way to access the post's permalink.src/content-helper/dashboard-page/pages/traffic-boost/provider.ts (1)
161-161: LGTM: Smart link href update is correct.The change from
guid.rawtolinkfor smart link href is appropriate and consistent with other changes.src/content-helper/dashboard-page/pages/traffic-boost/preview/components/preview-iframe.tsx (1)
276-276: LGTM: Content area retrieval is correct.The change to use getContentArea is appropriate and consistent with the utility function's purpose.
src/content-helper/dashboard-page/pages/traffic-boost/preview/components/text-selection-tooltip.tsx (3)
9-9: LGTM!Clean import statement following WordPress coding standards.
413-414: LGTM!The selection validation using
contentAreais correct and aligns with the PR's goal of fixing highlighting issues.
459-459: Verify offset calculation with new content area.The changes to use
contentAreaare consistent, but please verify that the offset calculation remains accurate with the new content area, especially for:
- Nested content structures
- Complex layouts with multiple content blocks
Also applies to: 487-487
✅ Verification successful
✓ Offset calculation is correctly implemented with new content area
The offset calculation:
- Properly uses contentArea for containment checks
- Correctly measures text position relative to the content boundary
- Accurately counts previous occurrences of selected text
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Search for test cases covering offset calculation rg -l "calculateOffset|getContentArea" --type testLength of output: 81
Script:
#!/bin/bash # Find test files and implementation fd "\.(test|spec)\.(ts|tsx)$" | xargs rg "calculateOffset|getContentArea" # Find implementation of calculateOffset ast-grep --pattern 'function calculateOffset($_) { $$$ }' # Search for related test utilities rg "describe.*calculateOffset|test.*calculateOffset|it.*calculateOffset" -g "*.{ts,tsx}"Length of output: 228
Script:
#!/bin/bash # Check the component file content cat src/content-helper/dashboard-page/pages/traffic-boost/preview/components/text-selection-tooltip.tsx # Search for offset-related calculations rg "offset.*=|getOffset|calculateOffset" -g "*.{ts,tsx}" # Look for selection-related utilities rg "selection.*offset|getSelection|document\.selection" -g "*.{ts,tsx}"Length of output: 17342
| @@ -88,7 +88,7 @@ export class TrafficBoostProvider extends BaseWordPressProvider { | |||
| */ | |||
| private populatePostLinks( post: HydratedPost ): PostLinks { | |||
| const postContent = post.content.raw; | |||
| const siteUrl = new URL( post.guid.raw ).hostname; | |||
| const siteUrl = new URL( post.link ).hostname; | |||
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add error handling for invalid URLs.
The URL constructor could throw for invalid URLs. Consider adding try-catch block.
-const siteUrl = new URL( post.link ).hostname;
+let siteUrl;
+try {
+ siteUrl = new URL( post.link ).hostname;
+} catch (error) {
+ console.error('Invalid post link URL:', error);
+ siteUrl = '';
+}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const siteUrl = new URL( post.link ).hostname; | |
| let siteUrl; | |
| try { | |
| siteUrl = new URL( post.link ).hostname; | |
| } catch (error) { | |
| console.error('Invalid post link URL:', error); | |
| siteUrl = ''; | |
| } |
| // Add a marker class to the content container and add the wrapper as a sibling. | ||
| return $content . '<div class="wp-parsely-preview-marker"></div>'; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Consider escaping the content for security.
While the change to use a marker div is good, ensure content is properly escaped.
-return $content . '<div class="wp-parsely-preview-marker"></div>';
+return wp_kses_post($content) . '<div class="wp-parsely-preview-marker"></div>';📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| // Add a marker class to the content container and add the wrapper as a sibling. | |
| return $content . '<div class="wp-parsely-preview-marker"></div>'; | |
| // Add a marker class to the content container and add the wrapper as a sibling. | |
| return wp_kses_post($content) . '<div class="wp-parsely-preview-marker"></div>'; |
|
Caution No docstrings were generated. |
Description
This PR fixes a couple issues I have detected when testing the TB interface on a real site:
guidparam of an article might not be the most reliable way to get the link. Sometimes it does not have the permalink, on other cases it might point to a different multisite - this happened to me with a dev environment sync from a VIP environment. Thelinkprop, on the other hand, seems more reliable on getting the correct permalink for a post.wp-parsely-preview-marker).Motivation and context
How has this been tested?
Tested locally on my local environment, and on a VIP dev-env synced from a real prod environment.
Summary by CodeRabbit
New Features
linkproperty to hydrated postsBug Fixes
post.linkinstead ofpost.guid.rawRefactor