Recent searches
No recent searches
Pasting content from a live article introduces unwanted CSS styling
Posted Feb 20, 2024
When I paste content from a live article into the editor, a lot of unwanted CSS styling is inserted into the HTML. This can be hard to spot at first but causes issues with the appearance of the content.
Here's a link to a video demonstrating the issue: https://app.screencast.com/TOcrnqdz38TD0
This is a problem because this CSS that is introduced causes the pasted content to look different from the source content. See the screenshot below:
Original content HTML from the above screenshot:
<h1 id="h_01HPPNPKJV3DWC1V8V2XKBH958">Heading 1</h1>
<h2 id="h_01HPPNPPX87EFZ8VM4597QFEC8">Heading 2</h2>
<h3 id="h_01HPPNPTWM24JE71YQJHJ7GSXK">Heading 3</h3>
<h4 id="h_01HPPNQ1ZBADM3QHSFFZG5KEB6">Heading 4</h4>
<p>Paragraph</p>
Pasted content HTML from the above screenshot:
<h1 id="01HPPNQRYC7F1HFQAE04X8TP1G" style="box-sizing: border-box; font-size: 32px; margin: 0px 0px 0.67em; font-family: -apple-system, BlinkMacSystemFont, ' Segoe UI' , Helvetica, Arial, sans-serif; color: #484848; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; 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: normal; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; background-color: #ffffff;">Heading 1 paste styling original</h1>
<h2 id="01HPPNQRYC5JCCC971GCZRJZ1P" style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, ' Segoe UI' , Helvetica, Arial, sans-serif; margin: 1em 0px 0px; font-size: 22px; color: #484848; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; 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: normal; background-color: #ffffff; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">Heading 2</h2>
<h3 id="01HPPNQRYCC2M2A9SMD81PYS6J" style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, ' Segoe UI' , Helvetica, Arial, sans-serif; margin: 1em 0px 0px; font-size: 18px; font-weight: 600; color: #484848; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; 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: normal; background-color: #ffffff; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">Heading 3</h3>
<h4 id="01HPPNQRYC3KX7DBWJA4YD88MA" style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, ' Segoe UI' , Helvetica, Arial, sans-serif; margin: 1em 0px 0px; font-size: 16px; color: #484848; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; 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: normal; background-color: #ffffff; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">Heading 4</h4>
<p style="box-sizing: border-box; margin-bottom: 0px; color: #484848; font-family: -apple-system, BlinkMacSystemFont, ' Segoe UI' , Helvetica, Arial, sans-serif; font-size: 15px; 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: normal; background-color: #ffffff; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">Paragraph</p>
This is causing headaches when we are trying to copy/paste content from other articles. As a workaround, we are forced to paste as plain text and manually re-add any links, bold/italics, bulleted lists, etc. It is unnecessarily time-consuming.
I have contacted support and they seem to not understand or are willing to acknowledge the issue, so I'm sharing here. I would like at least for someone at Zendesk to please acknowledge that they understand what is happening here and that it is a pain point for my team at my company. We should be able to copy/paste content from our own articles without encountering these types of issues.
4
3 comments
Shawna James
Thank you for taking the time to provide us with your feedback. For those interested in viewing the link Ryan has submitted, note that it is safe to click on. This has been logged for our PM team to review. For others who may be interested in this feature request, please add your support by upvoting this post and/or adding your use case to the comments below. Thank you again!
0
Mat Foley
This happens when I paste any text, really. When I first started managing our Guide, I was using Word to type my drafts, collaborate with the team, etc. I would then paste the whole article and all the formatting would paste as well. I could get around by doing a paste as plain text (ctrl+shift+v on PC) but then I lost any formatting like bulleted or numbered lists. I've just stopped using Word and edit and save the drafts directly in Guide. Adding my upvote that allowing paste without adding extra formatting would be great.
1
Ryan Bickett
Thank you! Yes I agree - ideally rich text pasting (ctrl+v) should preserve HTML such as links and bulleted lists, but NOT any of the CSS (i.e. don't insert the style attributes in my test case above).
0