Skip to content

fix(bylines): avoid rerendering of editable area #3896

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 2 commits into from
Apr 9, 2025
Merged

fix(bylines): avoid rerendering of editable area #3896

merged 2 commits into from
Apr 9, 2025

Conversation

@miguelpeixe
Copy link
Member

@miguelpeixe miguelpeixe commented Apr 7, 2025 •
edited
Loading

All Submissions:

Changes proposed in this Pull Request:

This PR places the contentEditable node behind useMemo() so it's not rendered on state and prop changes. This change prevents the cursor position from resetting to 0 after token deletion via backspace.

Related and for a smoother experience, this PR also adds handling of the cursor position and input focus on insertToken().

How to test the changes in this Pull Request:

  1. While on trunk, edit a post with multiple authors (CAP)
  2. Edit the byline and confirm the backspacing an author resets the cursor position
  3. Add the author back and confirm the input area is not focused
  4. Checkout this branch, edit the byline and confirm backspacing an author preserves the cursor position
  5. Add the author back and confirm the input is focused and the cursor is at the end of the added author
  6. With just 1 author added, place the cursor in the middle of the text before the added author and click to add the other author
  7. Confirm the input is focused and the cursor is at the end of the added author
  8. Save the changes and the post
  9. Refresh and confirm the changes persist and editing the byline again works without issues

Other information:

  • Have you added an explanation of what your changes do and why you'd like us to include them?
  • Have you written new tests for your changes, as applicable?
  • Have you successfully ran tests with your changes locally?

@miguelpeixe miguelpeixe self-assigned this Apr 8, 2025
@miguelpeixe miguelpeixe added the [Status] Needs Review The issue or pull request needs to be reviewed label Apr 8, 2025
@miguelpeixe miguelpeixe marked this pull request as ready for review April 8, 2025 14:12
@miguelpeixe miguelpeixe requested a review from a team as a code owner April 8, 2025 14:12
@github-actions github-actions bot added [Status] Approved The pull request has been reviewed and is ready to merge and removed [Status] Needs Review The issue or pull request needs to be reviewed labels Apr 9, 2025
@miguelpeixe miguelpeixe merged commit 9fdf659 into trunk Apr 9, 2025
9 checks passed
@miguelpeixe miguelpeixe deleted the fix/bylines-editable-rerender branch April 9, 2025 12:07
@github-actions
Copy link

github-actions bot commented Apr 9, 2025

Hey @miguelpeixe, good job getting this PR merged! 🎉

Now, the needs-changelog label has been added to it.

Please check if this PR needs to be included in the "Upcoming Changes" and "Release Notes" doc. If it doesn't, simply remove the label.

If it does, please add an entry to our shared document, with screenshots and testing instructions if applicable, then remove the label.

Thank you! ❤️

matticbot pushed a commit that referenced this pull request Apr 23, 2025
@semantic-release-bot
chore(release): 6.5.0-alpha.1 [skip ci]
6192692 
# [6.5.0-alpha.1](v6.4.4...v6.5.0-alpha.1) (2025-04-23)

### Bug Fixes

* add white background to Newspack admin screens ([#3909](#3909)) ([4c8409e](4c8409e))
* allow guest contributors to have empty archives ([#3902](#3902)) ([af8bed9](af8bed9))
* **analytics:** migrate back-end GA4 events to front-end ([#3895](#3895)) ([7e18628](7e18628))
* **auth-form:** check user before is_user_reader() call ([#3944](#3944)) ([1cbb760](1cbb760))
* avoid warning for network event ([#3942](#3942)) ([60d0aa3](60d0aa3))
* **bylines:** avoid rerendering of editable area ([#3896](#3896)) ([9fdf659](9fdf659))
* **bylines:** custom edited state for modal ([#3919](#3919)) ([2a1a800](2a1a800))
* **bylines:** get CAP data from the plugin's store ([#3906](#3906)) ([0745113](0745113))
* **corrections:** Limit CPT to posts only ([#3927](#3927)) ([1d49c39](1d49c39))
* **corrections:** Use Corrections Archive template by default ([#3929](#3929)) ([c4c1925](c4c1925))
* **email-change:** ensure success and error messages persist after redirect ([#3913](#3913)) ([caf82a5](caf82a5))
* **email-change:** improve messaging for in-progress or expired change requests ([#3886](#3886)) ([02d2ea0](02d2ea0))
* **email-change:** typo in variable name ([#3941](#3941)) ([941dc21](941dc21))
* **google-login:** handle google oauth disabled state in the editor ([#3946](#3946)) ([0f9f7c6](0f9f7c6))
* hide campaigns menu when the Newspack Campaigns plugin is not activated ([#3922](#3922)) ([adcc21f](adcc21f))
* make front end not dependent on coauthors plus ([#3905](#3905)) ([dc96e5b](dc96e5b))
* **otp-input:** enhance OTP input handling for clipboard ([#3898](#3898)) ([a56328b](a56328b))
* reinstate the Add New Newsletter link in the admin menu ([#3926](#3926)) ([1c8c7d7](1c8c7d7))
* remove extra space above empty help text ([#3904](#3904)) ([6a4fe4f](6a4fe4f))
* remove import and route for Suppression ([#3894](#3894)) ([a2034e7](a2034e7))
* **setup-wizard:** prevent Yoast redirect ([#3940](#3940)) ([3461b5f](3461b5f))

### Features

* **auth:** OTP autocomplete integration ([#3888](#3888)) ([5a1d7a8](5a1d7a8))
* **bylines:** get post byline authors ([#3911](#3911)) ([17942a2](17942a2))
* **bylines:** useAuthorTokens() hook with user entity validation ([#3907](#3907)) ([3d1feee](3d1feee))
* **email-change:** allow old email to cancel email change only, not confirm ([#3912](#3912)) ([92413e3](92413e3))
* **ga4:** np_newsletter_subscribed event upon front-end signup ([#3938](#3938)) ([2295277](2295277))
* **ras-newsletter:** Newsletters list progressive disclosure ([#3887](#3887)) ([53f4eed](53f4eed))
* **reader-auth:** send WP login reminder email to non-reader accounts ([#3796](#3796)) ([d1af25e](d1af25e)), closes [#3823](#3823)
* **scss:** export colors as module for JS consumption ([#3910](#3910)) ([81da8f0](81da8f0))
* **segments:** add filter for device segment ([#3880](#3880)) ([d465726](d465726))
* update colors and add all design system variables ([#3882](#3882)) ([6ee8e30](6ee8e30))
@matticbot
Copy link
Contributor

matticbot commented Apr 23, 2025

🎉 This PR is included in version 6.5.0-alpha.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

matticbot pushed a commit that referenced this pull request May 8, 2025
@semantic-release-bot
chore(release): 6.6.0-alpha.1 [skip ci]
e3c4554 
# [6.6.0-alpha.1](v6.5.0...v6.6.0-alpha.1) (2025-05-08)

### Bug Fixes

* add white background to Newspack admin screens ([#3909](#3909)) ([4c8409e](4c8409e))
* allow guest contributors to have empty archives ([#3902](#3902)) ([af8bed9](af8bed9))
* **analytics:** migrate back-end GA4 events to front-end ([#3895](#3895)) ([7e18628](7e18628))
* **auth-form:** check user before is_user_reader() call ([#3944](#3944)) ([1cbb760](1cbb760))
* avoid warning for network event ([#3942](#3942)) ([60d0aa3](60d0aa3))
* **bylines:** avoid rerendering of editable area ([#3896](#3896)) ([9fdf659](9fdf659))
* **bylines:** custom edited state for modal ([#3919](#3919)) ([2a1a800](2a1a800))
* **bylines:** get CAP data from the plugin's store ([#3906](#3906)) ([0745113](0745113))
* **corrections:** Limit CPT to posts only ([#3927](#3927)) ([1d49c39](1d49c39))
* **corrections:** Use Corrections Archive template by default ([#3929](#3929)) ([c4c1925](c4c1925))
* **email-change:** ensure success and error messages persist after redirect ([#3913](#3913)) ([caf82a5](caf82a5))
* **email-change:** improve messaging for in-progress or expired change requests ([#3886](#3886)) ([02d2ea0](02d2ea0))
* **email-change:** typo in variable name ([#3941](#3941)) ([941dc21](941dc21))
* **ga4:** ensure gate_post_id and newspack_popup_id are passed to activities ([#3956](#3956)) ([fadaa4d](fadaa4d))
* **google-login:** handle google oauth disabled state in the editor ([#3946](#3946)) ([0f9f7c6](0f9f7c6))
* hide campaigns menu when the Newspack Campaigns plugin is not activated ([#3922](#3922)) ([adcc21f](adcc21f))
* make front end not dependent on coauthors plus ([#3905](#3905)) ([dc96e5b](dc96e5b))
* **newsletters-wizard:** remove advertisers menu item ([#3948](#3948)) ([2fddbd6](2fddbd6))
* **otp-input:** enhance OTP input handling for clipboard ([#3898](#3898)) ([a56328b](a56328b))
* reinstate the Add New Newsletter link in the admin menu ([#3926](#3926)) ([1c8c7d7](1c8c7d7))
* remove extra space above empty help text ([#3904](#3904)) ([6a4fe4f](6a4fe4f))
* remove import and route for Suppression ([#3894](#3894)) ([a2034e7](a2034e7))
* **setup-wizard:** prevent Yoast redirect ([#3940](#3940)) ([3461b5f](3461b5f))

### Features

* **auth:** OTP autocomplete integration ([#3888](#3888)) ([5a1d7a8](5a1d7a8))
* **bylines:** get post byline authors ([#3911](#3911)) ([17942a2](17942a2))
* **bylines:** useAuthorTokens() hook with user entity validation ([#3907](#3907)) ([3d1feee](3d1feee))
* **email-change:** allow old email to cancel email change only, not confirm ([#3912](#3912)) ([92413e3](92413e3))
* **ga4:** np_newsletter_subscribed event upon front-end signup ([#3938](#3938)) ([2295277](2295277))
* **ras-newsletter:** Newsletters list progressive disclosure ([#3887](#3887)) ([53f4eed](53f4eed))
* **reader-auth:** send WP login reminder email to non-reader accounts ([#3796](#3796)) ([d1af25e](d1af25e)), closes [#3823](#3823)
* **scss:** export colors as module for JS consumption ([#3910](#3910)) ([81da8f0](81da8f0))
* **segments:** add filter for device segment ([#3880](#3880)) ([d465726](d465726))
* update colors and add all design system variables ([#3882](#3882)) ([6ee8e30](6ee8e30))
@matticbot
Copy link
Contributor

matticbot commented May 8, 2025

🎉 This PR is included in version 6.6.0-alpha.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

matticbot pushed a commit that referenced this pull request May 14, 2025
@semantic-release-bot
chore(release): 6.6.0 [skip ci]
47cd462 
# [6.6.0](v6.5.1...v6.6.0) (2025-05-14)

### Bug Fixes

* add white background to Newspack admin screens ([#3909](#3909)) ([4c8409e](4c8409e))
* allow guest contributors to have empty archives ([#3902](#3902)) ([af8bed9](af8bed9))
* **analytics:** migrate back-end GA4 events to front-end ([#3895](#3895)) ([7e18628](7e18628))
* **auth-form:** check user before is_user_reader() call ([#3944](#3944)) ([1cbb760](1cbb760))
* avoid warning for network event ([#3942](#3942)) ([60d0aa3](60d0aa3))
* **bylines:** avoid rerendering of editable area ([#3896](#3896)) ([9fdf659](9fdf659))
* **bylines:** custom edited state for modal ([#3919](#3919)) ([2a1a800](2a1a800))
* **bylines:** get CAP data from the plugin's store ([#3906](#3906)) ([0745113](0745113))
* **corrections:** Limit CPT to posts only ([#3927](#3927)) ([1d49c39](1d49c39))
* **corrections:** Use Corrections Archive template by default ([#3929](#3929)) ([c4c1925](c4c1925))
* **email-change:** ensure success and error messages persist after redirect ([#3913](#3913)) ([caf82a5](caf82a5))
* **email-change:** improve messaging for in-progress or expired change requests ([#3886](#3886)) ([02d2ea0](02d2ea0))
* **email-change:** typo in variable name ([#3941](#3941)) ([941dc21](941dc21))
* **ga4:** ensure gate_post_id and newspack_popup_id are passed to activities ([#3956](#3956)) ([fadaa4d](fadaa4d))
* **google-login:** handle google oauth disabled state in the editor ([#3946](#3946)) ([0f9f7c6](0f9f7c6))
* hide campaigns menu when the Newspack Campaigns plugin is not activated ([#3922](#3922)) ([adcc21f](adcc21f))
* make front end not dependent on coauthors plus ([#3905](#3905)) ([dc96e5b](dc96e5b))
* **newsletters-wizard:** remove advertisers menu item ([#3948](#3948)) ([2fddbd6](2fddbd6))
* **otp-input:** enhance OTP input handling for clipboard ([#3898](#3898)) ([a56328b](a56328b))
* reinstate the Add New Newsletter link in the admin menu ([#3926](#3926)) ([1c8c7d7](1c8c7d7))
* remove extra space above empty help text ([#3904](#3904)) ([6a4fe4f](6a4fe4f))
* remove import and route for Suppression ([#3894](#3894)) ([a2034e7](a2034e7))
* **setup-wizard:** prevent Yoast redirect ([#3940](#3940)) ([3461b5f](3461b5f))

### Features

* **auth:** OTP autocomplete integration ([#3888](#3888)) ([5a1d7a8](5a1d7a8))
* **bylines:** get post byline authors ([#3911](#3911)) ([17942a2](17942a2))
* **bylines:** useAuthorTokens() hook with user entity validation ([#3907](#3907)) ([3d1feee](3d1feee))
* **email-change:** allow old email to cancel email change only, not confirm ([#3912](#3912)) ([92413e3](92413e3))
* **email-change:** remove env constant requirement ([#3943](#3943)) ([f04e58f](f04e58f))
* **ga4:** np_newsletter_subscribed event upon front-end signup ([#3938](#3938)) ([2295277](2295277))
* **ras-newsletter:** Newsletters list progressive disclosure ([#3887](#3887)) ([53f4eed](53f4eed))
* **reader-auth:** send WP login reminder email to non-reader accounts ([#3796](#3796)) ([d1af25e](d1af25e)), closes [#3823](#3823)
* **scss:** export colors as module for JS consumption ([#3910](#3910)) ([81da8f0](81da8f0))
* **segments:** add filter for device segment ([#3880](#3880)) ([d465726](d465726))
* update colors and add all design system variables ([#3882](#3882)) ([6ee8e30](6ee8e30))
@matticbot
Copy link
Contributor

matticbot commented May 14, 2025

🎉 This PR is included in version 6.6.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@adekbadek adekbadek adekbadek approved these changes

Assignees

@miguelpeixe miguelpeixe

Labels

released on @alpha released [Status] Approved The pull request has been reviewed and is ready to merge

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

4 participants

@miguelpeixe @matticbot @adekbadek