ckeditor
Allow copying semantic structure from Word without non-semantic styling to prevent insertion of extraneous non-breaking spaces
Note: The title reads like a feature request. However, because CKEditor5 inserts unwanted non-breaking spaces into some documents copied from Word, lack of this feature manifests as a bug. Either non-breaking spaces in CKEditor5 need to be fixed (see #1669) or it has to be possible to strip Word styling on paste so that CKEditor 5 no longer inserts extraneous non-breaking spaces, since there is no easy way to get rid of them.
This particularly impacts mobile portrait view in sentences with long strings of multiple word gaining such spaces upon paste.
Having this feature would also present the benefit of a consistent-looking website whose styles come solely from the website CSS and don't reflect the broad variations of styles created by Word document editors. Copying Word styles also occasionally results in sentences spilling out of their HTML containers due to manually-applied Word margin styles.
📝 Provide detailed reproduction steps (if any)
- In Windows 11, Word 365, open test document.docx
- In Chrome, go to Source code editing and HTML support demo page
- In Word, click Ctrl-A to select all
- Click Ctrl-C to copy.
- In Chrome, click in the WYSIWYG window
- Click Ctrl-V to paste
- Click Source button
✔️ Expected result
The pasted text has no-nonbreaking spaces, only regular spaces.
❌ Actual result
The pasted text has multiple no-nonbreaking spaces among the regular spaces.
<p style="margin:0in 0in 0in 32.25pt;">
<span style="font-family:"Graphein Pro Light", sans-serif;font-size:12pt;">[redacted]<span style="letter-spacing:-.1pt;"> </span>recessed<span style="letter-spacing:-.15pt;"> </span>the<span style="letter-spacing:-.1pt;"> </span>meeting<span style="letter-spacing:-.15pt;"> </span>at<span style="letter-spacing:-.1pt;"> </span>4:01pm<span style="letter-spacing:-.15pt;"> </span>and<span style="letter-spacing:-.1pt;"> </span>reconvened<span style="letter-spacing:-.15pt;"> </span>the<span style="letter-spacing:-.15pt;"> </span>meeting<span style="letter-spacing:-.1pt;"> </span>at<span style="letter-spacing:-.1pt;"> 4:13pm. This line does not have any non-breaking spaces.</span><o:p></o:p></span>
</p>
<ol>
<li style="margin-bottom:.0001pt;margin-right:5.4pt;margin-top:0in;tab-stops:32.1pt 32.25pt;">
<span style="font-family:"Graphein Pro Light", sans-serif;font-size:12.0pt;"><strong>Presentation and discussion of a Muni Service Update.</strong> (Explanatory documents include a slide presentation.)</span><span style="font-family:"Graphein Pro Light", sans-serif;font-size:11pt;"><o:p></o:p></span>
</li>
</ol>
<p style="line-height:200%;margin:0in 171.25pt .0001pt 32.25pt;">
<span style="font-family:"Graphein Pro Light", sans-serif;font-size:12pt;">[redacted],<span style="letter-spacing:-.25pt;"> </span>Director<span style="letter-spacing:-.3pt;"> </span>of<span style="letter-spacing:-.25pt;"> </span>Transit,<span style="letter-spacing:-.25pt;"> </span>presented<span style="letter-spacing:-.3pt;"> </span>the<span style="letter-spacing:-.3pt;"> </span>item. No public comment.<o:p></o:p></span>
</p>
<ol>
<li style="margin-bottom:.0001pt;margin-right:5.3pt;margin-top:0in;tab-stops:32.1pt 32.25pt;">
<span style="font-family:"Graphein Pro Light", sans-serif;font-size:12.0pt;"><strong>Discussion and vote pursuant to Administrative Code Section 67.10(d) as to whether to invoke the attorney-client privilege and conduct a closed session conference with legal </strong><span style="letter-spacing:-.1pt;"><strong>counsel.</strong></span></span><span style="font-family:"Graphein Pro Light", sans-serif;font-size:11pt;"><o:p></o:p></span>
</li>
</ol>
<p style="margin:0in 5.3pt .0001pt 32.25pt;tab-stops:32.1pt 32.25pt;text-indent:0in;">
<span style="font-family:"Graphein Pro Light", sans-serif;font-size:11pt;">No<span style="letter-spacing:-.1pt;"> </span>public<span style="letter-spacing:-.1pt;"> comment.</span><o:p></o:p></span>
</p>
📃 Other details
- Browser: Google Chrome
- OS: Windows 11
- First affected CKEditor version: unknown, but likely has existed for a long time
- Installed CKEditor plugins: whatever is installed on the Source code editing and HTML support demo page
Related to #2522
I am unable to test on Feature-rich editor as that page does not provide a Source button.
Attempting to do a find-and-replace to replace all non-breaking spaces with plain spaces results in the non-breaking spaces being automatically re-introduced, so far as I can tell. However, manually removing and re-adding each space fixes the issue; this is not feasible to expect editors to do as part of their normal workflow, especially for large documents with dozens if not hundreds of such spaces.
This appears related to #1669, and the comments in that issue about CKEditor 5 managing non-breaking spaces. Specifically, because paste from Word is wrapping some of the spaces in a span tag:
<p style="line-height:200%;margin:0in 171.25pt .0001pt 32.25pt;">
<span style="font-family:"Graphein Pro Light", sans-serif;font-size:12pt;">[redacted],<span style="letter-spacing:-.25pt;"> </span>Director<span style="letter-spacing:-.3pt;"> </span>of<span style="letter-spacing:-.25pt;"> </span>Transit,<span style="letter-spacing:-.25pt;"> </span>presented<span style="letter-spacing:-.3pt;"> </span>the<span style="letter-spacing:-.3pt;"> </span>item. No public comment.<o:p></o:p></span>
</p>
CKEditor5 is turning it into non-breaking spaces to preserve the space. What I'd really like is to be able to paste from Word but only carry over the structure, not the formatting. I believe this would cause CKEditor5 to not replace the plain spaces with non-breaking spaces:
<p>
[redacted], Director of Transit, presented the item. No public comment.
</p>
(If the style is not carried over, then there is no need for the span tags.)
Semantic styling such as strong tags would be kept.
<li style="margin-bottom:.0001pt;margin-right:5.4pt;margin-top:0in;tab-stops:32.1pt 32.25pt;">
<span style="font-family:"Graphein Pro Light", sans-serif;font-size:12.0pt;"><strong>Presentation and discussion of a Muni Service Update.</strong> (Explanatory documents include a slide presentation.)</span><span style="font-family:"Graphein Pro Light", sans-serif;font-size:11pt;"><o:p></o:p></span>
</li>
would become:
<li>
<span><strong>Presentation and discussion of a Muni Service Update.</strong> (Explanatory documents include a slide presentation.)</span>
</li>
The Tx button is not sufficient to remediate this, since it strips out semantic styling such as strong as well.
If you'd like to see this fixed sooner, add a 👍 reaction to this post.
There has been no activity on this issue for the past year. We've marked it as stale and will close it in 30 days. We understand it may still be relevant, so if you're interested in the solution, leave a comment or reaction under this issue.
