PCH Smart Linking: Implement Smart Links Reviewing step #2507
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
# Conflicts: # src/content-helper/editor-sidebar/smart-linking/component.tsx
# Conflicts: # build/admin-settings.asset.php # build/content-helper/dashboard-widget.asset.php # build/content-helper/editor-sidebar.asset.php # build/content-helper/excerpt-generator.asset.php
Actions PerformedReviews paused. |
acicovic
reviewed
May 23, 2024
Co-authored-by: Alex Cicovic <23142906+acicovic@users.noreply.github.com>
Co-authored-by: Alex Cicovic <23142906+acicovic@users.noreply.github.com>
…p-parsely into add/smart-linking-links-review
acicovic
reviewed
May 23, 2024
acicovic
reviewed
May 23, 2024
acicovic
reviewed
May 24, 2024
src/content-helper/editor-sidebar/smart-linking/component-link-monitor.tsx
Outdated
Show resolved
Hide resolved
src/content-helper/editor-sidebar/smart-linking/smart-linking.scss
Outdated
Show resolved
Hide resolved
src/content-helper/editor-sidebar/smart-linking/review-modal/component-suggestion.tsx
Outdated
Show resolved
Hide resolved
src/content-helper/editor-sidebar/smart-linking/review-modal/component-suggestion.tsx
Outdated
Show resolved
Hide resolved
# Conflicts: # build/content-helper/editor-sidebar.asset.php # build/content-helper/editor-sidebar.js # build/content-helper/excerpt-generator.asset.php
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
acicovic
approved these changes
Jun 6, 2024
This was referenced Jul 8, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
This PR implements a new review step for the Smart Linking feature in the Parse.ly Plugin. It introduces a modal where all new link suggestions and existing smart links are visible together, and can be reviewed from a single place.
This is part 1 of the new Smart Linking feature, focusing primarily on the UI/UX. Part 2, which will implement a backend to persistently store smart links, will be coming next.
The New Review Modal
This PR introduces several new components. To help understand this new implementation, here is a breakdown of the modal into its individual components.
ReviewModalSidebar
The
ReviewModalSidebarcomponent provides users with an organized list of all the smart links within a review modal. This sidebar makes it easy to navigate through each linkable word or phrase by displaying them in a clear, scrollable list.Users can click on any link to view its details, and the sidebar automatically scrolls to keep the selected link in view. Each link item shows its text and indicates whether the link is new and unapplied. This functionality helps users efficiently review and manage their smart links, ensuring they can easily identify and select the most relevant links for their content.
The items on the sidebar are always ordered - the sorting is managed by the Smart Linking store directly, where new suggestions are on the top, and existing smart links are on the bottom. On top of this sorting, the links are also ordered by when the occur in the post content.
ReviewSuggestion
The
ReviewSuggestioncomponent provides an interface for reviewing individual smart link suggestions. It allows users to navigate through the list of suggestions, view the context within which each link appears, and make decisions on whether to accept, reject, or modify the suggested links.Key Functionalities:
Existing Smart Links
When opening a post, the Parse.ly Content Helper (PCH) needs to identify the existing Smart Links within the content. This is achieved using a custom data attribute included with all smart links:
data-smartlink. The value of this attribute is the Smart Link UID, which uniquely identifies each link in the content.The PCH scans the post content to find all anchor (
<a>) tags that contain thedata-smartlinkattribute. By extracting the UID from each of these tags, it builds a comprehensive list of existing Smart Links. This method ensures that all Smart Links can be managed effectively, even if the block editor has been closed and reopened. This functionality allows users to seamlessly maintain and update their Smart Links across editing sessions, ensuring that the content remains connected and relevant.Fixing and Validating Smart Links
When opening a post, the PCH needs to ensure that the store is synchronized with the actual post content. This can become challenging when a smart link is edited because the
data-smartlinkattribute, which is not included in theLinkallowlist, gets stripped during the editing process.The
LinkMonitorcomponent plays a important role in addressing this issue. It continuously listens for changes in smart links—whether new links are added, existing links are removed, or links are edited. When it detects that a smart link has been modified and thedata-smartlinkattribute has been unintentionally removed, it parses the content and attempts to re-add the missingdata-smartlinkattribute, thereby preserving the unique identifier of the smart link.Additionally, there is a validation and fixing step implemented during the post save process. This ensures that all smart links are validated and any missing
data-smartlinkattributes are restored, preventing the loss of any smart links. This comprehensive validation process guarantees that the integrity of smart links is maintained throughout the content lifecycle, even after multiple edits and saves.Getting the Post Type from a URL
To populate the type of the post in the Link Details section, PCH uses the
url_to_post_typeendpoint. This endpoint processes a given URL and returns the corresponding post type, ensuring accurate identification of linked content.When a URL is submitted to the endpoint, the PCH retrieves the post ID associated with the URL using caching and available WordPress functions. If the post ID is found, the function fetches and returns the post type. This allows the plugin to provide relevant post type information in the Link Details section, enhancing the management and validation of smart links.
Here's some quick documentation about this endpoint:
Endpoint:
/smart-linking/url-to-post-typeMethod: POST
Request Parameters:
url(string) - The URL to determine the post type.Response:
post_id(int),post_type(string)Motivation and context
This new version addresses several limitations and introduces new capabilities to make the feature more robust and user-friendly. It solves the problem of manual link management by providing smarter, more contextually relevant suggestions, thereby saving time and effort for content creators.
It addresses a few open issues:
numAddedLinksstate in Smart Linking component #2400How has this been tested?
This have been thoroughly tested in my local environment, with different types of content. However, this is still experimental, so I appreciate if you try to break it 😄
Video demo
Screen.Recording.2024-05-20.at.13.54.48.mov
Summary by CodeRabbit
New Features
Smart_Linking_Endpointclass for managing smart links, including URL conversion and availability checks.Smart_Linkclass to represent smart link suggestions with methods for serialization, deserialization, and saving.LinkMonitorcomponent to detect smart link changes in the WordPress editor.ReviewModalSidebarcomponent for interacting with smart links within the review modal interface.Enhancements