Repeated spaces are not preserved when text is contained in an element that renders whitespace using a CSS `white-space` rule. #16124

jessevanassen · 2024-03-28T14:44:08Z

📝 Provide detailed reproduction steps (if any)

When text is wrapped in a block containing a CSS white-space rule with either pre, pre-wrap or break-spaces, repeated whitespace isn't collapsed but rendered instead. However, when text wrapped like this is inserted into CKEditor, the repeated spaces are lost.

Probably the most common scenario of this occurring is when copying content formatted with these white-space rules from other pages and pasting them into the editor.

As an example for the following HTML file:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div {
			white-space: pre-wrap;
		}
	</style>
</head>
<body>
	<div>    Foo    Bar    Baz    </div>
</body>
</html>

When I select the text in the rendered document and copy it to the clipboard with Chrome 122, the clipboard content looks like this (retrieved by running xclip -selection clipboard -target text/html -out):

<span style="color: rgb(0, 0, 0); font-family: &quot;Times New Roman&quot;; font-size: medium; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: pre-wrap; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; display: inline !important; float: none;">    Foo    Bar    Baz    </span>

So the copied structure from Chrome has a different shape than the content on the original page, and it contains the required inline CSS to render it correctly on the pasted target.

However, when pasted into CKEditor, the spaces are collapsed to a single one, and the leading and trailing whitespace is stripped.

It's also really easy to reproduce in one of CKEditor's manual tests, by setting the editor data to something like

<span style="white-space: pre-wrap">Hello,    World!</span>

✔️ Expected result

I expect repeated spaces contained within a block with white-space: pre, white-space: pre-wrap or white-space: break-spaces to be preserved when being set or pasted into the editor.

❌ Actual result

Repeated spaces are collapsed.

❓ Possible solution

I submitted a pull request with a possible fix: #16125

The text was updated successfully, but these errors were encountered:

Witoso · 2024-04-03T15:06:27Z

I'm very hesitant about this change. Implementing a special check on the engine level is almost always not a proper way to go. If you want the editor to correctly store this style, a plugin should be created, ideally with some UI layer, so that users have a possibility to manage this as well. If I missed something, please let me know.

Witoso · 2024-04-03T15:09:05Z

Ok, I understand, it's not even about the managing of this style, more on the preservation of spaces, that we eagerly merge right now. @niegowski . @scofalik, thoughts?

Fix (engine): Preserve repeated spaces in text that is contained within an element that renders (repeated) white space. Closes #16124.

jessevanassen added the type:bug This issue reports a buggy (incorrect) behavior. label Mar 28, 2024

jessevanassen mentioned this issue Mar 28, 2024

Preserve repeated spaces when text is wrapped with a CSS white-space rule #16125

Merged

jenlampton mentioned this issue Mar 31, 2024

CKeditor 5 removes whitespace from within <pre> tags backdrop/backdrop-issues#6439

Open

aldonace-wu added the support:2 An issue reported by a commercially licensed client. label May 20, 2024

Dumluregn closed this as completed in #16125 May 28, 2024

Dumluregn added a commit that referenced this issue May 28, 2024

Merge pull request #16125 from jessevanassen/i/16124

8a392f1

Fix (engine): Preserve repeated spaces in text that is contained within an element that renders (repeated) white space. Closes #16124.

CKEditorBot added this to the iteration 75 milestone May 28, 2024

CKEditorBot mentioned this issue May 29, 2024

📄 Nightly releases changelog #14724

Open

KISSAdmin mentioned this issue Oct 30, 2024

[Snyk] Upgrade ckeditor5 from 42.0.0 to 42.0.2 Klantinteractie-Servicesysteem/KISS-frontend#929

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repeated spaces are not preserved when text is contained in an element that renders whitespace using a CSS `white-space` rule. #16124

Repeated spaces are not preserved when text is contained in an element that renders whitespace using a CSS `white-space` rule. #16124

jessevanassen commented Mar 28, 2024 •

edited

Loading

Witoso commented Apr 3, 2024

Witoso commented Apr 3, 2024

Repeated spaces are not preserved when text is contained in an element that renders whitespace using a CSS white-space rule. #16124

Repeated spaces are not preserved when text is contained in an element that renders whitespace using a CSS white-space rule. #16124

Comments

jessevanassen commented Mar 28, 2024 • edited Loading

📝 Provide detailed reproduction steps (if any)

✔️ Expected result

❌ Actual result

❓ Possible solution

Witoso commented Apr 3, 2024

Witoso commented Apr 3, 2024

Repeated spaces are not preserved when text is contained in an element that renders whitespace using a CSS `white-space` rule. #16124

Repeated spaces are not preserved when text is contained in an element that renders whitespace using a CSS `white-space` rule. #16124

jessevanassen commented Mar 28, 2024 •

edited

Loading