Skip to content
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

Rich Text: Prevent line breaks when disableLineBreaks is true #67412

Open
wants to merge 5 commits into
base: trunk
Choose a base branch
from
Open

Rich Text: Prevent line breaks when disableLineBreaks is true #67412

wants to merge 5 commits into from

Conversation

Infinite-Null
Copy link
Contributor

Fixes: #67387

What?

Modify RichText paste handling to correctly handle line breaks when disableLineBreaks is set to true

Why?

Currently, when pasting text into a RichText component with disableLineBreaks={true}, line breaks are being converted to
tags instead of being stripped out as expected. This breaks the intended functionality of preventing line breaks in the component.

Testing Instructions

  1. Insert a Site Tagline block. Inside this block
  2. Enter text, including line breaks, into the text area or you can use the below text.
Hello
Test
hi
  1. Copy it and paste it into the Site Tagline block.

Screencast

Before Patch

Screen.Recording.2024-11-29.at.2.17.22.PM.mov

After Patch

Screen.Recording.2024-11-29.at.2.12.49.PM.mov

@github-actions GitHub Actions
Copy link

github-actions bot commented Nov 29, 2024 •
edited
Loading

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

Unlinked Accounts

The following contributors have not linked their GitHub and WordPress.org accounts: @markhowellsmead.

Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Unlinked contributors: markhowellsmead.

Co-authored-by: Infinite-Null <[email protected]>
Co-authored-by: ellatrix <[email protected]>
Co-authored-by: rinkalpagdar <[email protected]>
Co-authored-by: t-hamano <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

@Mamaduka Mamaduka added [Type] Bug An existing feature does not function as intended [Feature] Rich Text Related to the Rich Text component that allows developers to render a contenteditable labels Nov 29, 2024
@Infinite-Null Infinite-Null mentioned this pull request Nov 29, 2024
Open
6 tasks
@markhowellsmead
Copy link

Looks good to me.

ellatrix
ellatrix reviewed Nov 29, 2024
View reviewed changes
packages/block-editor/src/components/rich-text/event-listeners/paste-handler.js Outdated
// When line breaks are disabled, convert all line breaks to a single space.
plainText = disableLineBreaks
? plainText.replace( /\r?\n/g, ' ' ).trim()
: plainText;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What if you paste HTML? This doesn't look like a complete solution. Could you modify valueToInsert within pasteInline instead? We should strip out all the \n there. There's a rich text replace function I believe.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi @ellatrix,
Thank you for the thoughtful review. I've implemented the solution by modifying valueToInsert within pasteInline using the rich-text replace function as you recommended.

Could you please review the changes

@rinkalpagdar
Copy link
Contributor

Hello @Infinite-Null
I have reviewed your PR changes in my local with all testing instructions, and they are working fine for me.
Thanks!

@ellatrix
Copy link
Member

Thank you, this looks better. Could you add an e2e test?

@Infinite-Null
Copy link
Contributor Author

Infinite-Null commented Dec 20, 2024 •
edited
Loading

Thank you, this looks better. Could you add an e2e test?

Sure @ellatrix,
I will write e2e test shortly

@Infinite-Null
Copy link
Contributor Author

Hi @ellatrix,
I have completed the end-to-end test for this PR. Please have a look at it at your convenience. Thank You!

Screencast:

Screen.Recording.2025-01-07.at.10.09.34.AM.mov

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

@ellatrix ellatrix Awaiting requested review from ellatrix ellatrix is a code owner

At least 1 approving review is required to merge this pull request.

Assignees
No one assigned
Labels
[Feature] Rich Text Related to the Rich Text component that allows developers to render a contenteditable [Type] Bug An existing feature does not function as intended
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

RichText component: pasting text ignores disableLineBreaks setting
5 participants
@Infinite-Null @markhowellsmead @rinkalpagdar @ellatrix @Mamaduka